diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index 4b76325..52946c2 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_','-',app()->getLocale()) }}">
 <x-head/>
-<body class="bg-blue-600">
+<body class="bg-gradient-to-br from-blue-900 via-blue-700 to-indigo-900 min-h-screen">
 <div class="container mx-auto text-white">
     <x-header/>
     {{ $slot }}
diff --git a/resources/views/components/movie.blade.php b/resources/views/components/movie.blade.php
index be4d5e1..5568a3a 100644
--- a/resources/views/components/movie.blade.php
+++ b/resources/views/components/movie.blade.php
@@ -1,5 +1,5 @@
 @props(['movie'])
-<div class="flex flex-col bg-gray-500 w-full h-full cursor-pointer hover:bg-gray-600 transition-colors"
+<div class="flex flex-col bg-gray-500 w-full h-full cursor-pointer rounded-lg overflow-hidden shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300"
      wire:click="$dispatch('openMovieDetails', { movieId: {{ $movie->id }} })">
     <img class="w-full h-full object-cover" src="{{$movie->poster}}" alt="{{$movie->title}}">
 </div>
diff --git a/resources/views/components/ui/card.blade.php b/resources/views/components/ui/card.blade.php
index e6db936..bf558db 100644
--- a/resources/views/components/ui/card.blade.php
+++ b/resources/views/components/ui/card.blade.php
@@ -1,3 +1,3 @@
-<div {{ $attributes->merge(['class' => 'bg-gray-700 p-5 flex flex-col gap-5 items-center rounded']) }}>
+<div {{ $attributes->merge(['class' => 'bg-gray-800/90 backdrop-blur-sm p-6 flex flex-col gap-5 items-center rounded-xl shadow-xl border border-gray-700/50']) }}>
     {{ $slot }}
 </div>
diff --git a/resources/views/livewire/lists.blade.php b/resources/views/livewire/lists.blade.php
index f5ca730..12ac44e 100644
--- a/resources/views/livewire/lists.blade.php
+++ b/resources/views/livewire/lists.blade.php
@@ -27,44 +27,40 @@
         <div class="w-full flex flex-col gap-5">
             <h2 class="text-2xl font-bold">Your Lists</h2>
             @if(!$lists->isEmpty())
-                <ul class="w-full flex flex-col gap-2">
-                    <hr/>
+                <ul class="w-full flex flex-col gap-3">
                     @foreach($lists as $list)
-                        <li class="flex justify-between text-center">
-                            <a class="text-xl" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
+                        <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
+                            <a class="text-xl hover:text-amber-200 transition-colors" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
                             @if((bool)$list->is_public === true)
-                                <i class="fa fa-earth my-auto" title="Public" aria-label="Public"></i>
+                                <i class="fa fa-earth text-green-400" title="Public" aria-label="Public"></i>
                             @else
-                                <i class="fa fa-lock my-auto" title="Private" aria-label="Private"></i>
+                                <i class="fa fa-lock text-gray-400" title="Private" aria-label="Private"></i>
                             @endif
                         </li>
-                        <hr/>
                     @endforeach
                 </ul>
             @else
-                <span>No lists found.</span>
+                <span class="text-gray-400">No lists found.</span>
             @endif
         </div>
 
         <div class="w-full flex flex-col gap-5">
             <h2 class="text-2xl font-bold">Shared With You</h2>
             @if(!$sharedLists->isEmpty())
-                <ul>
-                    <hr/>
+                <ul class="w-full flex flex-col gap-3">
                     @foreach($sharedLists as $list)
-                        <li class="flex justify-between text-center">
-                            <a class="text-xl" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
+                        <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
+                            <a class="text-xl hover:text-amber-200 transition-colors" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
                             @if((bool)$list->is_public === true)
-                                <i class="fa fa-earth my-auto" title="Public" aria-label="Public"></i>
+                                <i class="fa fa-earth text-green-400" title="Public" aria-label="Public"></i>
                             @else
-                                <i class="fa fa-lock my-auto" title="Private" aria-label="Private"></i>
+                                <i class="fa fa-lock text-gray-400" title="Private" aria-label="Private"></i>
                             @endif
                         </li>
-                        <hr/>
                     @endforeach
                 </ul>
             @else
-                <span>No lists found.</span>
+                <span class="text-gray-400">No lists found.</span>
             @endif
         </div>
     </x-ui.card>
diff --git a/resources/views/livewire/movie-list.blade.php b/resources/views/livewire/movie-list.blade.php
index d125baa..7fd7a8a 100644
--- a/resources/views/livewire/movie-list.blade.php
+++ b/resources/views/livewire/movie-list.blade.php
@@ -10,11 +10,12 @@
         @endcan
     </div>
 
+    <div>
+        <livewire:search-panel :list-id="$list->id"/>
+        <livewire:movie-details-panel/>
+    </div>
+
     <x-ui.card class="overflow-hidden min-h-screen">
-        <div class="absolute">
-            <livewire:search-panel :list-id="$list->id"/>
-            <livewire:movie-details-panel/>
-        </div>
 
         <div class="relative w-full overflow-hidden">
             <div class="flex transition-transform duration-300 ease-in-out"
@@ -41,7 +42,7 @@
                     @if(!$filteredMovies->isEmpty())
                         <ul class="grid grid-cols-2 sm:grid-cols-4 gap-5">
                             @foreach ($filteredMovies as $movie)
-                                <li class="bg-gray-200">
+                                <li>
                                     <x-movie :movie="$movie"/>
                                 </li>
                             @endforeach
@@ -62,7 +63,7 @@
                         <h2 class="text-xl font-semibold">Settings</h2>
                     </div>
 
-                    <div class="flex flex-col gap-2 w-full p-5">
+                    <div class="flex flex-col gap-2 w-full p-5 bg-gray-700">
                         <label for="list-name" class="font-bold">List Name</label>
                         <div class="flex flex-row">
                             <input type="text" wire:model.live="settingsForm.name" id="list-name"
@@ -72,7 +73,7 @@
                         </div>
                     </div>
                     <div
-                        class="flex items-center justify-between bg-gray-700 hover:bg-gray-500 hover:opacity-85 p-5 rounded">
+                        class="flex items-center justify-between bg-gray-700 hover:opacity-85 p-5 rounded">
                         <label for="is_public" class="text-white font-bold cursor-pointer">Make list public</label>
                         <input type="checkbox"
                                id="is_public"
@@ -81,9 +82,9 @@
                     </div>
 
 
-                    <div class="p-5 flex flex-col gap-5 hover:bg-gray-500 rounded">
+                    <div class="p-5 flex flex-col gap-5 bg-gray-700 rounded">
                         <span class="font-bold">Collaborators</span>
-                        <details class="hover:cursor-pointer bg-gray-500 p-5 rounded">
+                        <details class="hover:cursor-pointer bg-gray-600 p-5 rounded">
                             <ul class="flex flex-col gap-2 py-2">
                                 <li><span class="font-bold">Viewer</span>: Can view the list, but cannot make any changes.</li>
                                 <li><span class="font-bold">Editor</span>: Can add/remove movies from the list.</li>
@@ -103,7 +104,7 @@
                         </ul>
                     </div>
 
-                    <div class="p-5 flex flex-col gap-3 hover:bg-gray-500 rounded">
+                    <div class="p-5 flex flex-col gap-3 bg-gray-700 rounded">
                         <span class="font-bold">Invite collaborators</span>
                         <span class="hover:cursor-pointer">Enter a comma separated list of emails.</span>
                         <textarea class="bg-white rounded text-black p-2" placeholder="user1@example.com, user2@example.com, user3@example.com"></textarea>
@@ -113,7 +114,7 @@
 
                     @can('delete', $list)
                     <div
-                        class="flex items-center justify-between bg-gray-700 hover:bg-gray-500 hover:opacity-85 p-5 rounded">
+                        class="flex items-center justify-between bg-gray-700 p-5 rounded">
                         <label for="delete_list" class="text-white cursor-pointer">Delete List</label>
                         <button name="delete_list"
                                 type="button"
