diff --git a/app/games/[id]/page.js b/app/games/[id]/page.js
index 227dbcd..ee13dfd 100644
--- a/app/games/[id]/page.js
+++ b/app/games/[id]/page.js
@@ -6,6 +6,13 @@ import { useState } from "react";
 import { HeartFilledIcon, HeartIcon } from "@radix-ui/react-icons";
 import TournamentSection from "../../../components/TournamentSection";
 import { ListFilter } from "lucide-react";
+import { Button } from "../../../@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../../components/ui/dropdown-menu";
 
 export default function GamePage({ params }) {
   const [isFavourite, setIsFavourite] = useState(false);
@@ -18,6 +25,25 @@ export default function GamePage({ params }) {
     setIsFavourite(!isFavourite);
   };
 
+  const [filters, setFilters] = useState({
+    entryFee: "",
+    mode: "",
+    status: "",
+  });
+
+  const handleFilterChange = (e) => {
+    const { name, value } = e.target;
+    setFilters((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const clearFilters = () => {
+    setFilters({
+      entryFee: "",
+      mode: "",
+      status: "",
+    });
+  };
+
   return (
     <div className="mt-20 px-[5%] md:px-[7%] xl:px-[12%]">
       {/* Banner */}
@@ -34,21 +60,21 @@ export default function GamePage({ params }) {
 
       {/* Title */}
       <div className="mt-10">
-        <div className="flex justify-between">
+        <div className="flex justify-between items-center">
           <h1 className="text-3xl md:text-4xl font-semibold transition-all">
             {game.name}
           </h1>
-          <button
-            className="flex items-center gap-2 px-4 py-1 md:px-6 md:py-2 text-white text-sm md:text-lg font-medium bg-sky-600 hover:bg-sky-700 rounded-md transition-all"
+          <Button
+            className="flex items-center gap-2 px-2 py-1 md:px-4 md:py-2 font-medium text- text-white bg-indigo-500 hover:bg-indigo-600 rounded-md active:scale-90 transition-all"
             onClick={handleClick}
           >
             Favourite
             {isFavourite ? (
-              <HeartFilledIcon className="md:w-5 md:h-5 transition-all" />
+              <HeartFilledIcon className="md:w-4 md:h-4 transition-all" />
             ) : (
-              <HeartIcon className="md:w-5 md:h-5 transition-all" />
+              <HeartIcon className="md:w-4 md:h-4 transition-all" />
             )}
-          </button>
+          </Button>
         </div>
 
         {/* Desc */}
@@ -60,16 +86,77 @@ export default function GamePage({ params }) {
       {/* Tournaments */}
       <div className="mt-20 flex flex-col">
         {/* title */}
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between mb-10">
           <h1 className="text-xl md:text-2xl font-semibold uppercase transition-all">
             Tournaments
           </h1>
           <div className="relative">
-            <button className="px-3 py-1 md:px-4 md:py-2 flex items-center gap-2 rounded-lg border border-gray-500 hover:bg-gray-800 transition-all">
-              Filter
-              <ListFilter className="w-4 h-4 mb-0.5" />
-            </button>
-            {/* Filter dropdown logic */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="flex gap-2">
+                  Filter
+                  <ListFilter className="w-4 h-4 mb-0.5" />
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className="w-56">
+                <div className="mb-4 p-2">
+                  <label className="block text-sm font-medium mb-2">
+                    Entry Fee
+                  </label>
+                  <select
+                    name="entryFee"
+                    value={filters.entryFee}
+                    onChange={handleFilterChange}
+                    className="w-full rounded px-2 py-1 bg-background border"
+                  >
+                    <option value="">All</option>
+                    <option value="free">Free</option>
+                    <option value="paid">Paid</option>
+                  </select>
+                </div>
+                <div className="mb-4 p-2">
+                  <label className="block text-sm font-medium mb-2">Mode</label>
+                  <select
+                    name="mode"
+                    value={filters.mode}
+                    onChange={handleFilterChange}
+                    className="w-full rounded px-2 py-1 bg-background border"
+                  >
+                    <option value="">All</option>
+                    <option value="solo">Solo</option>
+                    <option value="duo">Duo</option>
+                    <option value="squad">Squad</option>
+                  </select>
+                </div>
+                <div className="mb-4 p-2">
+                  <label className="block text-sm font-medium mb-2">
+                    Status
+                  </label>
+                  <select
+                    name="status"
+                    value={filters.status}
+                    onChange={handleFilterChange}
+                    className="w-full rounded px-2 py-1 bg-background border"
+                  >
+                    <option value="">All</option>
+                    <option value="open">Open</option>
+                    <option value="live">Live</option>
+                    <option value="completed">Completed</option>
+                  </select>
+                </div>
+
+                <DropdownMenuSeparator />
+
+                <Button
+                  variant="ghost"
+                  onClick={clearFilters}
+                  className="w-full rounded transition-colors"
+                >
+                  Clear Filters
+                </Button>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
 
diff --git a/app/layout.js b/app/layout.js
index 5273c16..7663713 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -4,6 +4,7 @@ import { ThemeProvider } from "../components/theme-provider";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import AuthProvider from "../context/AuthProvider";
+import NextTopLoader from "nextjs-toploader";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -23,6 +24,7 @@ export default function RootLayout({ children }) {
             enableSystem
             disableTransitionOnChange
           >
+            <NextTopLoader />
             <Navbar />
             <main className="mx-auto mt-10">{children}</main>
             <Footer />
diff --git a/components/FeatureSection/FeatureSectionGrid.jsx b/components/FeatureSection/FeatureSectionGrid.jsx
index 0d53333..5618990 100644
--- a/components/FeatureSection/FeatureSectionGrid.jsx
+++ b/components/FeatureSection/FeatureSectionGrid.jsx
@@ -112,6 +112,7 @@ export const SkeletonOne = () => {
             width={1000}
             height={1000}
             className="full rounded-sm"
+            draggable="false"
           />
         </div>
       </div>
@@ -149,6 +150,7 @@ export const SkeletonThree = () => {
             width={800}
             height={800}
             className="mt-2 object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
+            draggable="false"
           />
         </div>
       </div>
@@ -202,10 +204,11 @@ export const SkeletonTwo = () => {
           >
             <Image
               src={image}
-              alt="bali images"
+              alt=""
               width="500"
               height="500"
               className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover flex-shrink-0"
+              draggable="false"
             />
           </motion.div>
         ))}
@@ -224,10 +227,11 @@ export const SkeletonTwo = () => {
           >
             <Image
               src={image}
-              alt="bali images"
+              alt=""
               width="500"
               height="500"
               className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover flex-shrink-0"
+              draggable="false"
             />
           </motion.div>
         ))}
diff --git a/components/HeroSection.jsx b/components/HeroSection.jsx
index e667b0f..7fa4d80 100644
--- a/components/HeroSection.jsx
+++ b/components/HeroSection.jsx
@@ -51,6 +51,7 @@ export default function HeroSection() {
           width={1200}
           className="mx-auto shadow-lg rounded-2xl"
           alt=""
+          draggable={false}
         />
       </div>
     </motion.section>
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 2783f4f..5bdd10b 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -69,7 +69,7 @@ const Navbar = () => {
       {/* buttons */}
       <div className="hidden lg:flex items-center gap-5 transition-all">
         <Link href="https://discord.gg/AB2vCdyw">
-          <Button variant="outline" className="px-5 rounded-md border-indigo-800">
+          <Button variant="outline" className="px-5 rounded-md">
             Join Community
           </Button>
         </Link>
diff --git a/package-lock.json b/package-lock.json
index 2807e5e..ede353e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
         "next-auth": "^4.24.7",
         "next-sanity": "^9.4.2",
         "next-themes": "^0.3.0",
+        "nextjs-toploader": "^1.6.12",
         "prisma": "^5.16.1",
         "react": "^18",
         "react-dom": "^18",
@@ -11633,6 +11634,24 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nextjs-toploader": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-1.6.12.tgz",
+      "integrity": "sha512-nbun5lvVjlKnxLQlahzZ55nELVEduqoEXT03KCHnsEYJnFpI/3BaIzpMyq/v8C7UGU2NfxQmjq6ldZ310rsDqA==",
+      "license": "MIT",
+      "dependencies": {
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/TheSGJ"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0",
+        "react": ">= 16.0.0",
+        "react-dom": ">= 16.0.0"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
@@ -11759,6 +11778,12 @@
         "set-blocking": "^2.0.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+      "license": "MIT"
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
diff --git a/package.json b/package.json
index d33febc..75191aa 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "next-auth": "^4.24.7",
     "next-sanity": "^9.4.2",
     "next-themes": "^0.3.0",
+    "nextjs-toploader": "^1.6.12",
     "prisma": "^5.16.1",
     "react": "^18",
     "react-dom": "^18",