diff --git a/app/Http/Controllers/IngredientPickerController.php b/app/Http/Controllers/IngredientPickerController.php
new file mode 100644
index 0000000..c559ad9
--- /dev/null
+++ b/app/Http/Controllers/IngredientPickerController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\JsonResponse;
+
+class IngredientPickerController extends Controller
+{
+    /**
+     * Search for ingredients.
+     */
+    public function search(): JsonResponse
+    {
+        return response()->json([
+            ['id' => 1, 'name' => 'Flour'],
+            ['id' => 2, 'name' => 'Eggs'],
+        ]);
+    }
+}
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
index 117ff49..fa61207 100644
--- a/app/Providers/RouteServiceProvider.php
+++ b/app/Providers/RouteServiceProvider.php
@@ -38,10 +38,6 @@ class RouteServiceProvider extends ServiceProvider
         $this->configureRateLimiting();
 
         $this->routes(function () {
-            Route::middleware('api')
-                ->namespace($this->namespace)
-                ->group(base_path('routes/api.php'));
-
             Route::middleware('web')
                 ->namespace($this->namespace)
                 ->group(base_path('routes/web.php'));
diff --git a/resources/views/components/ingredient-picker.blade.php b/resources/views/components/ingredient-picker.blade.php
new file mode 100644
index 0000000..7747975
--- /dev/null
+++ b/resources/views/components/ingredient-picker.blade.php
@@ -0,0 +1,35 @@
+<div x-data="{ searching: false, results: [] }">
+    <div>
+        <div>
+            <x-inputs.input type="hidden"
+                            name="ingredients[{{ $index }}]"
+                            value="{{ $defaultId ?? '' }}"
+                            x-ref="ingredients{{ $index }}"/>
+            <x-inputs.input type="text"
+                            name="ingredients_name[{{ $index }}]"
+                            value="{{ $defaultName ?? '' }}"
+                            placeholder="Search..."
+                            autocomplete="off"
+                            x-on:input.debounce.400ms="if ($event.target.value != '') {
+                                fetch('{{ route('ingredient-picker.search') }}')
+                                  .then(response => response.json())
+                                  .then(data => { results = data; searching = true; }); }"
+                            x-on:focusout.debounce.200ms="searching = false;"
+                            x-ref="ingredients_name{{ $index }}" />
+        </div>
+        <div x-show="searching" x-cloak>
+            <div class="absolute border-2 border-gray-500 border-b-0 bg-white"
+                 x-on:click="selected = $event.target; if (selected.dataset.id) { $refs.ingredients_name{{ $index }}.value = selected.dataset.value; $refs.ingredients{{ $index }}.value = selected.dataset.id; searching = false; }">
+                <template x-for="result in results" :key="result.id">
+                    <div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer"
+                         x-bind:data-id="result.id"
+                         x-bind:data-value="result.name">
+                        <div class="pointer-events-none">
+                            <div x-text="result.name"></div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/recipes/edit.blade.php b/resources/views/recipes/edit.blade.php
index d0b8a3f..ebe2a85 100644
--- a/resources/views/recipes/edit.blade.php
+++ b/resources/views/recipes/edit.blade.php
@@ -63,43 +63,47 @@
 
                         <!-- Ingredients -->
                         <h3 class="pt-2 mb-2 font-extrabold">Ingredients</h3>
-                        <div x-data="{ingredients: 0}">
-                            @foreach($recipe->foodAmounts as $foodAmount)
-                                <div class="flex flex-row space-x-4 mb-4">
-                                    <x-inputs.input type="text"
-                                                    name="foods_amount[]"
-                                                    size="5"
-                                                    :value="old('foods_amount.' . $loop->index, \App\Support\Number::fractionStringFromFloat($foodAmount->amount))" />
-                                    <x-inputs.select name="foods_unit[]"
-                                                     :options="$food_units"
-                                                     :selectedValue="old('foods_unit.' . $loop->index, $foodAmount->unit)">
-                                        <option value=""></option>
-                                    </x-inputs.select>
-                                    <livewire:food-picker :index="$loop->index"
-                                                          :default-id="old('foods.' . $loop->index, $foodAmount->food->id)"
-                                                          :default-name="old('foods_name.' . $loop->index, $foodAmount->food->name)" />
-                                    <x-inputs.input type="text"
-                                                    class="block"
-                                                    name="foods_detail[]"
-                                                    :value="old('foods_detail.' . $loop->index, $foodAmount->detail)" />
-                                </div>
-                            @endforeach
+                        <div x-data="{ ingredients: 0 }">
+{{--                            @foreach($recipe->foodAmounts as $foodAmount)--}}
+{{--                                <div class="flex flex-row space-x-4 mb-4">--}}
+{{--                                    <x-inputs.input type="text"--}}
+{{--                                                    name="foods_amount[]"--}}
+{{--                                                    size="5"--}}
+{{--                                                    :value="old('foods_amount.' . $loop->index, \App\Support\Number::fractionStringFromFloat($foodAmount->amount))" />--}}
+{{--                                    <x-inputs.select name="foods_unit[]"--}}
+{{--                                                     :options="$food_units"--}}
+{{--                                                     :selectedValue="old('foods_unit.' . $loop->index, $foodAmount->unit)">--}}
+{{--                                        <option value=""></option>--}}
+{{--                                    </x-inputs.select>--}}
+{{--                                    <livewire:food-picker :index="$loop->index"--}}
+{{--                                                          :default-id="old('foods.' . $loop->index, $foodAmount->food->id)"--}}
+{{--                                                          :default-name="old('foods_name.' . $loop->index, $foodAmount->food->name)" />--}}
+{{--                                    <x-inputs.input type="text"--}}
+{{--                                                    class="block"--}}
+{{--                                                    name="foods_detail[]"--}}
+{{--                                                    :value="old('foods_detail.' . $loop->index, $foodAmount->detail)" />--}}
+{{--                                </div>--}}
+{{--                            @endforeach--}}
                             <template x-for="i in ingredients + 1">
-                                <div class="flex flex-row space-x-4 mb-4">
-                                    <x-inputs.input type="text"
-                                                    name="foods_amount[]"
-                                                    size="5" />
-                                    <x-inputs.select name="foods_unit[]"
-                                                     :options="$food_units" >
-                                        <option value=""></option>
-                                    </x-inputs.select>
-                                    <!-- TODO: Get this working in the template. See wire:init or use wire:click? -->
-                                    <livewire:food-picker index="1" />
-                                    <x-inputs.input type="text"
-                                                    class="block"
-                                                    name="foods_detail[]" />
-                                </div>
+                                <x-ingredient-picker index="1" />
                             </template>
+
+{{--                            <template x-for="i in ingredients + 1">--}}
+{{--                                <div class="flex flex-row space-x-4 mb-4">--}}
+{{--                                    <x-inputs.input type="text"--}}
+{{--                                                    name="foods_amount[]"--}}
+{{--                                                    size="5" />--}}
+{{--                                    <x-inputs.select name="foods_unit[]"--}}
+{{--                                                     :options="$food_units" >--}}
+{{--                                        <option value=""></option>--}}
+{{--                                    </x-inputs.select>--}}
+{{--                                    <!-- TODO: Get this working in the template. See wire:init or use wire:click? -->--}}
+{{--                                    <livewire:food-picker index="1" />--}}
+{{--                                    <x-inputs.input type="text"--}}
+{{--                                                    class="block"--}}
+{{--                                                    name="foods_detail[]" />--}}
+{{--                                </div>--}}
+{{--                            </template>--}}
                             <x-inputs.button type="button" class="ml-3" x-on:click="ingredients++;">
                                 Add Ingredient
                             </x-inputs.button>
diff --git a/routes/api.php b/routes/api.php
deleted file mode 100644
index d891a47..0000000
--- a/routes/api.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-
-use CloudCreativity\LaravelJsonApi\Facades\JsonApi;
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Route;
-
-/*
-|--------------------------------------------------------------------------
-| API Routes
-|--------------------------------------------------------------------------
-|
-| Here is where you can register API routes for your application. These
-| routes are loaded by the RouteServiceProvider within a group which
-| is assigned the "api" middleware group. Enjoy building your API!
-|
-*/
-
-Route::middleware('auth:api')->get('/user', function (Request $request) {
-    return $request->user();
-});
diff --git a/routes/web.php b/routes/web.php
index 654d870..bbfb901 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\FoodController;
+use App\Http\Controllers\IngredientPickerController;
 use App\Http\Controllers\JournalEntryController;
 use App\Http\Controllers\RecipeController;
 use Illuminate\Support\Facades\Route;
@@ -34,4 +35,8 @@ Route::get('/journal-entries/{journalEntry}/delete', [JournalEntryController::cl
     ->middleware(['auth'])
     ->name('journal-entries.delete');
 
+Route::get('/ingredient-picker/search', [IngredientPickerController::class, 'search'])
+    ->middleware(['auth'])
+    ->name('ingredient-picker.search');
+
 require __DIR__.'/auth.php';