diff --git a/frontend/src/components/AppSidebar.tsx b/frontend/src/components/AppSidebar.tsx
index d5ade67..870225d 100644
--- a/frontend/src/components/AppSidebar.tsx
+++ b/frontend/src/components/AppSidebar.tsx
@@ -1,4 +1,4 @@
-import { Smile, BadgeCheck, Home, BookOpen } from "lucide-react";
+import { Smile, BadgeCheck, Home, BookOpen , Table2 } from "lucide-react";
 
 import {
   Sidebar,
@@ -33,6 +33,11 @@ const items = [
     url: "/badges",
     icon: BadgeCheck,
   },
+  {
+    title: "Leaderboard",
+    url: "/leaderboard",
+    icon: Table2,
+  },
 ];
 
 export function AppSidebar() {
diff --git a/frontend/src/components/pages/Leaderboardcontent.tsx b/frontend/src/components/pages/Leaderboardcontent.tsx
new file mode 100644
index 0000000..5038677
--- /dev/null
+++ b/frontend/src/components/pages/Leaderboardcontent.tsx
@@ -0,0 +1,23 @@
+import { AppWrapper } from "@/components/AppWrapper";
+
+export default function LeaderboardContent() {
+  return (
+    
+      <section className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-10 space-y-8">
+        <div className="flex items-center justify-between">
+          <h1 className="text-3xl font-bold tracking-tight">LeaderBoard</h1>
+          <a
+            href="https://discord.gg/axCqT23Xhj"
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          >
+            Join our Discord
+          </a>
+        </div>
+        {/* Leaderboard content goes here */}
+      </section>
+    
+  )
+}
+
diff --git a/frontend/src/pages/leaderboard.astro b/frontend/src/pages/leaderboard.astro
new file mode 100644
index 0000000..48f8739
--- /dev/null
+++ b/frontend/src/pages/leaderboard.astro
@@ -0,0 +1,15 @@
+---
+import Layout from "@/layouts/Layout.astro";
+// Alias the component to something like 'LeaderboardContent'
+import LeaderboardContent from "@/components/pages/Leaderboardcontent"; 
+import { AppWrapper } from "@/components/AppWrapper";
+---
+
+<Layout title="Leaderboard - The Guild Genesis">
+  <div class="min-h-screen bg-gray-50">
+    <AppWrapper client:only="react">
+      <!-- Use the aliased name here -->
+      <LeaderboardContent />
+    </AppWrapper>
+  </div>
+</Layout>