diff --git a/app/Http/Controllers/IngredientController.php b/app/Http/Controllers/IngredientController.php
index 9b6e9da..a0ce9af 100644
--- a/app/Http/Controllers/IngredientController.php
+++ b/app/Http/Controllers/IngredientController.php
@@ -12,11 +12,12 @@ class IngredientController extends Controller
     /**
      * Display a listing of the resource.
      *
-     * @return \Illuminate\Http\Response
+     * @return \Illuminate\Contracts\View\View
      */
-    public function index()
+    public function index(): View
     {
-        //
+        return view('ingredients.index')
+            ->with('ingredients', Ingredient::all()->sortBy('name'));
     }
 
     /**
@@ -29,7 +30,7 @@ class IngredientController extends Controller
         return view('ingredients.create');
     }
 
-    /**
+    /**newly
      * Store a newly created resource in storage.
      */
     public function store(Request $request): RedirectResponse
diff --git a/resources/views/ingredients/index.blade.php b/resources/views/ingredients/index.blade.php
new file mode 100644
index 0000000..5d2edc3
--- /dev/null
+++ b/resources/views/ingredients/index.blade.php
@@ -0,0 +1,54 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            {{ __('List Ingredients') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            @if(session()->has('message'))
+                <div class="bg-green-200 border-2 border-green-600 p-2 mb-2">
+                    {{ session()->get('message') }}
+                </div>
+            @endif
+            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 bg-white border-b border-gray-200">
+                    <div class="grid grid-cols-3 gap-4">
+                        @foreach ($ingredients as $ingedient)
+                            <div class="p-2 font-light rounded-lg border-2 border-gray-200">
+                                <div class="pb-2 lowercase flex justify-between items-baseline">
+                                    <div class="text-2xl">
+                                        {{ $ingedient->name }}@if($ingedient->detail), <span class="text-gray-500">{{ $ingedient->detail }}</span>@endif
+                                    </div>
+                                    <div class="text-right text-sm">
+                                        @if ($ingedient->unit_weight)
+                                            {{ $ingedient->unit_weight }}g each
+                                        @else
+                                            {{ $ingedient->cup_weight }}g per cup
+                                        @endif
+                                    </div>
+                                </div>
+                                <div class="grid grid-cols-2 text-sm border-t-8 border-black pt-2">
+                                    <div class="col-span-2 text-xs text-right">Amount per 100g</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">{{$ingedient->calories}}</div>
+                                    <div class="font-bold border-b border-gray-300">Fat</div>
+                                    <div class="text-right border-b border-gray-300">{{ $ingedient->fat < 1 ? $ingedient->fat * 1000 . "m" : $ingedient->fat }}g</div>
+                                    <div class="font-bold border-b border-gray-300">Cholesterol</div>
+                                    <div class="text-right border-b border-gray-300">{{ $ingedient->cholesterol < 1 ? $ingedient->cholesterol * 1000 . "m" : $ingedient->cholesterol }}g</div>
+                                    <div class="font-bold border-b border-gray-300">Sodium</div>
+                                    <div class="text-right border-b border-gray-300">{{ $ingedient->sodium < 1 ? $ingedient->sodium * 1000 . "m" : $ingedient->sodium }}g</div>
+                                    <div class="font-bold border-b border-gray-300">Carbohydrates</div>
+                                    <div class="text-right border-b border-gray-300">{{ $ingedient->carbohydrates < 1 ? $ingedient->carbohydrates * 1000 . "m" : $ingedient->carbohydrates }}g</div>
+                                    <div class="font-bold">Protein</div>
+                                    <div class="text-right">{{$ingedient->protein}}g</div>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index 89c9645..a19db08 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -16,10 +16,33 @@
                         {{ __('Dashboard') }}
                     </x-nav-link>
                 </div>
-                <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
-                    <x-nav-link :href="route('ingredients.create')" :active="request()->routeIs('ingredients.create')">
-                        {{ __('Add Ingredient') }}
-                    </x-nav-link>
+
+                <!-- Ingredients Dropdown -->
+                <div class="hidden sm:flex sm:items-center sm:ml-6">
+                    <x-dropdown align="left" width="48">
+                        <x-slot name="trigger">
+                            <button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
+                                <div>Ingredients</div>
+
+                                <div class="ml-1">
+                                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                            </button>
+                        </x-slot>
+
+                        <x-slot name="content">
+                            <x-dropdown-link :href="route('ingredients.create')"
+                                             :active="request()->routeIs('ingredients.create')">
+                                {{ __('Add Ingredient') }}
+                            </x-dropdown-link>
+                            <x-dropdown-link :href="route('ingredients.index')"
+                                             :active="request()->routeIs('ingredients.index')">
+                                {{ __('List Ingredients') }}
+                            </x-dropdown-link>
+                        </x-slot>
+                    </x-dropdown>
                 </div>
             </div>