diff --git a/src/app/league/page.tsx b/src/app/league/page.tsx
new file mode 100644
index 0000000..86702a4
--- /dev/null
+++ b/src/app/league/page.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { HeroUIProvider } from "@heroui/react";
+import MainNavbar from '@/components/shared/main-navbar';
+import { Hero } from "@/components/league/sections/hero";
+import { Rules } from "@/components/league/sections/rules";
+import { UpcomingEvents } from "@/components/league/sections/upcoming-events";
+import { Podium } from "@/components/league/sections/podium";
+
+const navLinks = [
+  { key: "home", label: "Home", href: "/" },
+  { key: "rules", label: "Rules", href: "#rules" },
+  { key: "upcoming-events", label: "Upcoming Events", href: "#upcoming-events" },
+  { key: "podium", label: "Podium", href: "#podium" },
+];
+
+export default function LeagueHomePage() {
+  return (
+    <HeroUIProvider>
+      <MainNavbar navLinks={navLinks} />
+      <Hero />
+      <Rules />
+      <UpcomingEvents />
+      <Podium />
+    </HeroUIProvider>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3aabfaa..96aae06 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,14 +5,21 @@ import { Activities } from "@/components/home/sections/activities";
 import { Hero } from "@/components/home/sections/hero";
 import { Members } from "@/components/home/sections/members";
 import { HeroUIProvider } from "@heroui/react";
-import MainNavbar from '@/components/home/main-navbar';
+import MainNavbar from '@/components/shared/main-navbar';
 import { CursorWrapper } from "@/components/home/ui/CursorWrapper";
 
+const navLinks = [
+  { key: "home", label: "Home", href: "#home" },
+  { key: "about us", label: "About Us", href: "#about-us" },
+  { key: "members", label: "Members", href: "#members" },
+  { key: "league", label: "League", href: "/league" },
+];
+
 export default function HomePage() {
   return (
     <HeroUIProvider>
       <CursorWrapper>
-        <MainNavbar />
+        <MainNavbar navLinks={navLinks} />
         <Hero />
         <AboutUs />
         <Members />
diff --git a/src/components/league/sections/hero.tsx b/src/components/league/sections/hero.tsx
new file mode 100644
index 0000000..281c97c
--- /dev/null
+++ b/src/components/league/sections/hero.tsx
@@ -0,0 +1,3 @@
+export function Hero() {
+  return (<></>);
+}
\ No newline at end of file
diff --git a/src/components/league/sections/podium.tsx b/src/components/league/sections/podium.tsx
new file mode 100644
index 0000000..aa75004
--- /dev/null
+++ b/src/components/league/sections/podium.tsx
@@ -0,0 +1,3 @@
+export function Podium() {
+  return (<></>);
+}
\ No newline at end of file
diff --git a/src/components/league/sections/rules.tsx b/src/components/league/sections/rules.tsx
new file mode 100644
index 0000000..9c33ddc
--- /dev/null
+++ b/src/components/league/sections/rules.tsx
@@ -0,0 +1,3 @@
+export function Rules() {
+  return (<></>);
+}
\ No newline at end of file
diff --git a/src/components/league/sections/upcoming-events.tsx b/src/components/league/sections/upcoming-events.tsx
new file mode 100644
index 0000000..0456ffb
--- /dev/null
+++ b/src/components/league/sections/upcoming-events.tsx
@@ -0,0 +1,3 @@
+export function UpcomingEvents() {
+  return (<></>);
+}
\ No newline at end of file
diff --git a/src/components/home/main-navbar.tsx b/src/components/shared/main-navbar.tsx
similarity index 96%
rename from src/components/home/main-navbar.tsx
rename to src/components/shared/main-navbar.tsx
index 0492267..d10c0a0 100644
--- a/src/components/home/main-navbar.tsx
+++ b/src/components/shared/main-navbar.tsx
@@ -4,7 +4,17 @@ import { IconMoon, IconSun } from "@tabler/icons-react";
 import Link from "next/link";
 import React, { useState } from "react";
 
-export default function MainNavbar() {
+type NavLink = {
+    key: string;
+    label: string;
+    href: string;
+};
+
+interface MainNavbarProps {
+    navLinks: NavLink[];
+}
+
+export default function MainNavbar({ navLinks }: MainNavbarProps) {
     const [activeLink, setActiveLink] = useState("home");
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
@@ -38,14 +48,6 @@ export default function MainNavbar() {
         }
     };
 
-    // Nav links
-    const navLinks = [
-        { key: "home", label: "Home", href: "#home" },
-        { key: "about us", label: "About Us", href: "#about-us" },
-        { key: "members", label: "Members", href: "#members" },
-        { key: "activities", label: "Activities", href: "#activities" },
-    ];
-
     return (
         <nav className="fixed top-0 left-0 right-0 z-50 px-6 py-4 ">
             <div className="max-w-7xl mx-auto">