diff --git a/app/Http/Controllers/FoodController.php b/app/Http/Controllers/FoodController.php
index 7c914cb..4f93ea6 100644
--- a/app/Http/Controllers/FoodController.php
+++ b/app/Http/Controllers/FoodController.php
@@ -86,13 +86,23 @@ class FoodController extends Controller
     }
 
     /**
-     * Remove the specified resource from storage.
-     *
-     * @param  \App\Models\Food  $food
-     * @return \Illuminate\Http\Response
+     * Confirm removal of specified resource.
      */
-    public function destroy(Food $food)
+    public function delete(Food $food): View
     {
-        //
+        return view('foods.delete')->with('food', $food);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Food $food): RedirectResponse
+    {
+        if ($food->foodAmounts()->count()) {
+            return back()->withErrors('Cannot delete: this food is used in recipes.');
+        }
+        $food->delete();
+        return redirect(route('foods.index'))
+            ->with('message', "Food {$food->name} deleted!");
     }
 }
diff --git a/app/Models/Food.php b/app/Models/Food.php
index 65c96b6..ac957f2 100644
--- a/app/Models/Food.php
+++ b/app/Models/Food.php
@@ -6,6 +6,7 @@ use App\Models\Traits\Journalable;
 use App\Models\Traits\Sluggable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 
 /**
  * @mixin IdeHelperFood
@@ -52,4 +53,11 @@ class Food extends Model
         'serving_weight' => 'float',
         'sodium' => 'float',
     ];
+
+    /**
+     * Get the food amounts using this food.
+     */
+    public function foodAmounts(): HasMany {
+        return $this->hasMany(FoodAmount::class);
+    }
 }
diff --git a/resources/views/foods/delete.blade.php b/resources/views/foods/delete.blade.php
new file mode 100644
index 0000000..5375e0b
--- /dev/null
+++ b/resources/views/foods/delete.blade.php
@@ -0,0 +1,43 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            Delete {{ $food->name }}?
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            @if ($errors->any())
+                <div class="flex flex-col space-y-2 pb-2">
+                    @foreach ($errors->all() as $error)
+                        <div class="bg-red-200 border-2 border-red-900 p-2">
+                            {{ $error }}
+                        </div>
+                    @endforeach
+                </div>
+            @endif
+            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 bg-white border-b border-gray-200">
+                    <form method="POST" action="{{ route('foods.destroy', $food) }}">
+                        @method('delete')
+                        @csrf
+                        <div class="text-lg pb-3">
+                            Are you sure what to delete <span class="font-extrabold">{{ $food->name }}</span>?
+                            <div class="grid grid-cols-2 w-max">
+                                <div class="font-bold pr-2">Detail:</div>
+                                <div>{{ $food->detail ?? 'None' }}</div>
+                                <div class="font-bold pr-2">Brand:</div>
+                                <div>{{ $food->brand ?? 'None' }}</div>
+                            </div>
+                        </div>
+                        <x-inputs.button class="bg-red-800 hover:bg-red-700">
+                            Yes, delete
+                        </x-inputs.button>
+                        <a class="ml-3 text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                           href="{{ route('foods.show', $food) }}">No, do not delete</a>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/foods/edit.blade.php b/resources/views/foods/edit.blade.php
index 6485ced..c395047 100644
--- a/resources/views/foods/edit.blade.php
+++ b/resources/views/foods/edit.blade.php
@@ -1,7 +1,7 @@
 <x-app-layout>
     <x-slot name="header">
         <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-            {{ ($food->exists ? 'Save' : 'Add') }} Food
+            {{ ($food->exists ? "Edit {$food->name}" : 'Add Food') }}
         </h2>
     </x-slot>
 
@@ -25,14 +25,8 @@
 
             <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                 <div class="p-6 bg-white border-b border-gray-200">
-                    @if ($food->exists)
-                        <form method="POST" action="{{ route('foods.update', $food) }}">
-                        @method('put')
-                    @else
-                        <form method="POST" action="{{ route('foods.store') }}">
-                    @endif
-
-                    <form method="POST" action="{{ route('foods.store') }}">
+                    <form method="POST" action="{{ ($food->exists ? route('foods.update', $food) : route('foods.store')) }}">
+                        @if ($food->exists)@method('put')@endif
                         @csrf
                         <div class="flex flex-col space-y-4">
                             <div class="grid grid-cols-3 gap-4">
@@ -131,6 +125,10 @@
                             <x-inputs.button class="ml-3">
                                 {{ ($food->exists ? 'Save' : 'Add') }}
                             </x-inputs.button>
+                            @if ($food->exists)
+                                <a class="px-4 py-2 ml-4 bg-red-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase hover:bg-red-700 active:bg-red-900 focus:outline-none"
+                                    href="{{ route('foods.delete', $food) }}">Delete</a>
+                            @endif
                         </div>
                     </form>
                 </div>
diff --git a/resources/views/foods/index.blade.php b/resources/views/foods/index.blade.php
index 55243d4..bdb7728 100644
--- a/resources/views/foods/index.blade.php
+++ b/resources/views/foods/index.blade.php
@@ -16,7 +16,14 @@
                 <div class="p-6 bg-white border-b border-gray-200">
                     <div class="grid grid-cols-3 gap-4">
                         @foreach ($foods as $food)
-                            <div class="p-2 font-light rounded-lg border-2 border-gray-200">
+                            <div class="p-2 font-light rounded-t border-2 border-gray-400">
+                                <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300 float-right text-sm"
+                                   href="{{ route('foods.edit', $food) }}">
+                                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                        <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
+                                        <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
+                                    </svg>
+                                </a>
                                 <div class="text-2xl lowercase">
                                     {{ $food->name }}@if($food->detail), <span class="text-gray-500">{{ $food->detail }}</span>@endif
                                 </div>
@@ -31,7 +38,7 @@
                                     ({{ $food->serving_weight }}g)
                                 </div>
                                 <div class="grid grid-cols-2 text-sm border-t-8 border-black pt-2">
-                                    <div class="col-span-2 text-xs font-bold">Amount per serving</div>
+                                    <div class="col-span-2 text-xs font-bold text-right">Amount per serving</div>
                                     <div class="font-extrabold text-lg border-b-4 border-black">Calories</div>
                                     <div class="font-extrabold text-right text-lg border-b-4 border-black">{{$food->calories}}</div>
                                     <div class="font-bold border-b border-gray-300">Fat</div>
@@ -45,12 +52,6 @@
                                     <div class="font-bold">Protein</div>
                                     <div class="text-right">{{ $food->protein < 1 ? $food->protein * 1000 . "m" : $food->protein }}g</div>
                                 </div>
-                                <div class="flex flex-row justify-around">
-                                    <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                                       href="{{ route('foods.edit', $food) }}">edit</a>
-                                    <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                                       href="{{ route('foods.destroy', $food) }}">delete (TBD)</a>
-                                </div>
                             </div>
                         @endforeach
                     </div>
diff --git a/routes/web.php b/routes/web.php
index d678668..8496999 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -25,6 +25,9 @@ Route::get('/dashboard', function () {
 })->middleware(['auth'])->name('dashboard');
 
 Route::resource('foods', FoodController::class)->middleware(['auth']);
+Route::get('/foods/{food}/delete', [FoodController::class, 'delete'])
+    ->middleware(['auth'])
+    ->name('foods.delete');
 Route::resource('recipes', RecipeController::class)->middleware(['auth']);
 Route::resource('journal-entries', JournalEntryController::class)->middleware(['auth']);