Improve UI

src/components/MovieDetails.vue

@@ -17,11 +17,7 @@ const alreadyAdded = computed(() =>
 <template>
   <ErrorAlert v-if="props.movie?.Error" :message="props.movie.ErrorMessage" />
 
-  <div
+
-    v-else
-    class="min-h-screen flex items-center justify-center px-6 py-12
-           bg-gradient-to-b from-gray-50 to-white"
-  >
     <!-- Loading state -->
     <div v-if="props.movie === undefined" class="flex justify-center items-center">
       <span class="loading loading-ring loading-lg text-primary"></span>
@@ -99,5 +95,5 @@ const alreadyAdded = computed(() =>
         </div>
       </div>
     </div>
-  </div>
+  
 </template>

src/components/MovieList.vue

@@ -27,7 +27,7 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
     <ul
       v-auto-animate
       v-else
-      class="grid gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 lg:gap-8"
+      class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
     >
       <li v-for="movie in props.movies" :key="movie.imdbID" v-auto-animate>
         <MovieCard

src/components/NavBar.vue

@@ -36,7 +36,7 @@
                  bg-white/80 backdrop-blur-md border border-gray-200/60"
         >
           <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/">Home</RouterLink></li>
-          <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/list">List</RouterLink></li>
+          <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/list">Library</RouterLink></li>
           <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/add">Add</RouterLink></li>
         </ul>
       </div>
@@ -55,7 +55,7 @@
     <div class="navbar-center hidden lg:flex">
       <ul class="menu menu-horizontal px-1 space-x-4">
         <li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/">Home</RouterLink></li>
-        <li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list">List</RouterLink></li>
+        <li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list">Library</RouterLink></li>
         <li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/add">Add</RouterLink></li>
       </ul>
     </div>
@@ -65,9 +65,9 @@
       <RouterLink
         class="btn px-5 bg-gradient-to-r from-gray-100 to-gray-200
                border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
-        to="/add"
+        to="/list"
       >
-        Get Started
+        Go to library
       </RouterLink>
     </div>
   </div>