patch#2

frontend/src/app/genres/[genre]/genres.css

@@ -108,13 +108,22 @@ body {
 }
 
 /* Loading and error messages */
-.loading,
 .error {
   font-size: 1.2rem;
   text-align: center;
   margin-top: 50px;
 }
 
+.loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}
+
 /* No items available message */
 .no-items {
   font-size: 1.2rem;

frontend/src/app/genres/[genre]/page.js

@@ -13,6 +13,7 @@ import {
 import Image from "next/image";
 import "./genres.css";
 import GenreFilterModal from "@/modals/GenreFilterModal"; // Import the Modal
+import { Spinner } from "@/components/Spinner";
 
 export default function GenrePage({ params }) {
   const [genreItems, setGenreItems] = useState(null);
@@ -77,7 +78,11 @@ export default function GenrePage({ params }) {
   };
 
   if (loading) {
-    return <div className="loading">Loading...</div>;
+    return (
+      <div className="loading">
+        <Spinner />
+      </div>
+    );
   }
 
   return (

frontend/src/app/globals.css

@@ -27,4 +27,4 @@ body {
 
 .app-container::-webkit-scrollbar {
   display: none;
-}
+}

frontend/src/components/MovieCard.css

@@ -48,6 +48,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    text-decoration: none;
   }
   
   .movie-title {