diff --git a/app/Http/Livewire/SearchDropdown.php b/app/Http/Livewire/SearchDropdown.php
new file mode 100644
index 0000000..7dc71d3
--- /dev/null
+++ b/app/Http/Livewire/SearchDropdown.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Illuminate\Support\Facades\Http;
+use Livewire\Component;
+
+class SearchDropdown extends Component
+{
+    public $search = '';
+
+    public function render()
+    {
+        $searchResults = [];
+
+        if (strlen($this->search) >= 2) {
+            $searchResults = Http::withToken(config('services.tmdb.token'))
+                ->get("https://api.themoviedb.org/3/search/movie?query={$this->search}")
+                ->json()['results'];
+        }
+
+        return view('livewire.search-dropdown', [
+            'searchResults' => collect($searchResults)->take(7),
+        ]);
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
index c364eb2..8cf45d4 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -5101,11 +5101,8 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
-.mt-8 {
-  margin-top: 2rem;
-}
-.mt-2 {
-  margin-top: 0.5rem;
+.mt-4 {
+  margin-top: 1rem;
 }
 .mt-1 {
   margin-top: 0.25rem;
@@ -5113,15 +5110,27 @@ Ensure the default browser behavior of the `hidden` attribute.
 .ml-1 {
   margin-left: 0.25rem;
 }
+.mt-8 {
+  margin-top: 2rem;
+}
+.mt-12 {
+  margin-top: 3rem;
+}
+.mr-8 {
+  margin-right: 2rem;
+}
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .ml-4 {
   margin-left: 1rem;
 }
 .ml-12 {
   margin-left: 3rem;
 }
-.mt-4 {
-  margin-top: 1rem;
-}
 .-mt-px {
   margin-top: -1px;
 }
@@ -5131,21 +5140,18 @@ Ensure the default browser behavior of the `hidden` attribute.
 .mt-1\.5 {
   margin-top: 0.375rem;
 }
-.ml-2 {
-  margin-left: 0.5rem;
-}
-.ml-24 {
-  margin-left: 6rem;
-}
-.mt-12 {
-  margin-top: 3rem;
+.mr-4 {
+  margin-right: 1rem;
 }
-.ml-8 {
-  margin-left: 2rem;
+.mr-3 {
+  margin-right: 0.75rem;
 }
 .flex {
   display: flex;
 }
+.inline-flex {
+  display: inline-flex;
+}
 .grid {
   display: grid;
 }
@@ -5164,8 +5170,11 @@ Ensure the default browser behavior of the `hidden` attribute.
 .min-h-screen {
   min-height: 100vh;
 }
-.w-96 {
-  width: 24rem;
+.w-64 {
+  width: 16rem;
+}
+.w-6 {
+  width: 1.5rem;
 }
 .w-auto {
   width: auto;
@@ -5176,15 +5185,12 @@ Ensure the default browser behavior of the `hidden` attribute.
 .w-5 {
   width: 1.25rem;
 }
-.w-64 {
-  width: 16rem;
-}
-.w-6 {
-  width: 1.5rem;
-}
 .max-w-6xl {
   max-width: 72rem;
 }
+.flex-none {
+  flex: none;
+}
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -5209,12 +5215,12 @@ Ensure the default browser behavior of the `hidden` attribute.
 .overflow-hidden {
   overflow: hidden;
 }
-.rounded-full {
-  border-radius: 9999px;
-}
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -5229,10 +5235,13 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
-.border-x-gray-800 {
+.border-gray-700 {
   --tw-border-opacity: 1;
-  border-left-color: rgb(31 41 55 / var(--tw-border-opacity));
-  border-right-color: rgb(31 41 55 / var(--tw-border-opacity));
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+.bg-orange-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
 }
 .bg-gray-100 {
   --tw-bg-opacity: 1;
@@ -5250,10 +5259,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
-.bg-orange-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
-}
 .fill-current {
   fill: currentColor;
 }
@@ -5272,6 +5277,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-top: 4rem;
   padding-bottom: 4rem;
 }
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -5288,9 +5297,13 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 .pt-16 {
   padding-top: 4rem;
@@ -5311,14 +5324,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
 .font-semibold {
   font-weight: 600;
 }
@@ -5339,29 +5352,29 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
-.text-gray-700 {
+.text-gray-300 {
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
+  color: rgb(209 213 219 / var(--tw-text-opacity));
 }
-.text-gray-500 {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-.text-gray-600 {
+.text-gray-700 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(55 65 81 / var(--tw-text-opacity));
 }
-.text-white {
+.text-gray-500 {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.text-gray-300 {
+.text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
+  color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 .underline {
   -webkit-text-decoration-line: underline;
@@ -5389,10 +5402,58 @@ Ensure the default browser behavior of the `hidden` attribute.
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+.spinner {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+}
+.spinner::after {
+  content: '';
+  position: absolute !important;
+  top: calc(50% - (1em / 2));
+  left: calc(50% - (1em / 2));
+  display: block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid #dae1e7;
+  border-radius: 9999px;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  -webkit-animation: spinAround 500ms infinite linear;
+          animation: spinAround 500ms infinite linear;
+}
+@-webkit-keyframes spinAround {
+
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinAround {
+
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+    position: absolute;
+}
 .hover\:bg-orange-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(234 88 12 / var(--tw-bg-opacity));
 }
+.hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
 .hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -5489,24 +5550,20 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 @media (min-width: 768px) {
 
-  .md\:ml-6 {
-    margin-left: 1.5rem;
+  .md\:ml-24 {
+    margin-left: 6rem;
   }
 
   .md\:mt-0 {
     margin-top: 0px;
   }
 
-  .md\:ml-4 {
-    margin-left: 1rem;
-  }
-
-  .md\:ml-24 {
-    margin-left: 6rem;
+  .md\:ml-6 {
+    margin-left: 1.5rem;
   }
 
-  .md\:w-96 {
-    width: 24rem;
+  .md\:ml-4 {
+    margin-left: 1rem;
   }
 
   .md\:grid-cols-3 {
@@ -5531,6 +5588,10 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 @media (min-width: 1024px) {
 
+  .lg\:w-96 {
+    width: 24rem;
+  }
+
   .lg\:grid-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
diff --git a/resources/css/app.css b/resources/css/app.css
index 5d63e97..ad7f867 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+.spinner {
+    position: absolute;
+}
+
 @import '~@fortawesome/fontawesome-free/css/fontawesome';
 @import '~@fortawesome/fontawesome-free/css/regular';
 @import '~@fortawesome/fontawesome-free/css/solid';
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index b7326dd..b8e9061 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Movie App</title>
-
     <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-</head>
+    @livewireStyles
+  </head>
 <body class="font-sans bg-gray-900 text-white">
     <nav class="border-b border-gray-800">
       <div class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4 py-6">
@@ -28,12 +28,7 @@
           </li>
         </ul>
         <div class="flex flex-col md:flex-row items-center">
-          <div class="relative mt-3 md:mt-0">
-            <input type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
-            <div class="absolute top-0">
-              <i class="fill-current text-gray-500 mt-1.5 ml-2 fas fa-search"></i>
-            </div>
-          </div>
+          <livewire:search-dropdown />
           <div class="md:ml-4 mt-3 md:mt-0">
             <a href="#">
               <img src="/img/avatar.jpg" alt="avatar" class="rounded-full w-8 h-8">
@@ -43,5 +38,6 @@
       </div>
     </nav>
     @yield('content')
+    @livewireScripts
 </body>
 </html>
diff --git a/resources/views/livewire/search-dropdown.blade.php b/resources/views/livewire/search-dropdown.blade.php
new file mode 100644
index 0000000..b3f1a52
--- /dev/null
+++ b/resources/views/livewire/search-dropdown.blade.php
@@ -0,0 +1,31 @@
+<div class="relative mt-3 md:mt-0">
+  <input wire:model.debounce.500ms="search" type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
+  <div class="absolute top-0">
+    <i class="fill-current text-gray-500 mt-1.5 ml-2 fas fa-search"></i>
+  </div>
+
+  <div wire:loading class="spinner top-0 right-0 mr-4 mt-3"></div>
+
+  @if (strlen($search) >= 2)
+    <div class="absolute bg-gray-800 text-sm rounded w-64 mt-4">
+      @if ($searchResults->count() > 0)
+        <ul>
+          @foreach ($searchResults as $result)
+            <li class="border-b border-gray-700">
+              <a href="{{ route('movies.show', $result['id']) }}" class="hover:bg-gray-700 px-3 py-3 flex items-center">
+                @if ($result['poster_path'])
+                  <img src="https://image.tmdb.org/t/p/w92{{ $result['poster_path'] }}" alt="poster" class="w-8">
+                @else
+                  <img src="https://via.placeholder.com/58x75" alt="poster" class="w-8">
+                @endif
+                <span class="ml-4">{{ $result['title'] }}</span>
+              </a>
+            </li>
+          @endforeach
+        </ul>
+      @else
+        <div class="px-3 py-3">No results for "{{ $search }}"</div>
+      @endif
+    </div>
+  @endif
+</div>