diff --git a/src/App.tsx b/src/App.tsx
index 9a85fe2..8264a10 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,8 @@
 import { useState } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { Navbar } from './features/Nav/v1/components';
-import reactLogo from './assets/react.svg';
-import viteLogo from './assets/vite.svg';
-import heroImg from './assets/hero.png';
 import './App.css';
+import Home from './features/Home/v1/Home';
 
 function RoutePage({
   title,
@@ -26,7 +24,6 @@ function RoutePage({
 }
 
 function App() {
-  const [count, setCount] = useState(0);
   const [isAuthenticated, setIsAuthenticated] = useState(true);
 
   return (
@@ -38,126 +35,7 @@ function App() {
       <Routes>
         <Route
           path="/"
-          element={
-            <main className="flex min-w-0 flex-1 flex-col items-center justify-center overflow-x-hidden pt-[72px] text-center">
-              <section id="center" className="py-20">
-                <div className="hero">
-                  <img
-                    src={heroImg}
-                    className="base"
-                    width="170"
-                    height="179"
-                    alt=""
-                  />
-                  <img src={reactLogo} className="framework" alt="React logo" />
-                  <img src={viteLogo} className="vite" alt="Vite logo" />
-                </div>
-                <div>
-                  <h1>Get started</h1>
-                  <p className="hero-copy">
-                    Edit <code>src/App.tsx</code> and save to test{' '}
-                    <code>HMR</code>
-                  </p>
-                </div>
-                <button
-                  type="button"
-                  className="counter"
-                  onClick={() => setCount((count) => count + 1)}
-                >
-                  Count is {count}
-                </button>
-              </section>
-
-              <div className="ticks"></div>
-
-              <section id="next-steps">
-                <div id="docs">
-                  <svg className="icon" role="presentation" aria-hidden="true">
-                    <use href="/icons.svg#documentation-icon"></use>
-                  </svg>
-                  <h2>Documentation</h2>
-                  <p>Your questions, answered</p>
-                  <ul>
-                    <li>
-                      <a href="https://vite.dev/" target="_blank">
-                        <img className="logo" src={viteLogo} alt="" />
-                        Explore Vite
-                      </a>
-                    </li>
-                    <li>
-                      <a href="https://react.dev/" target="_blank">
-                        <img className="button-icon" src={reactLogo} alt="" />
-                        Learn more
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-                <div id="social">
-                  <svg className="icon" role="presentation" aria-hidden="true">
-                    <use href="/icons.svg#social-icon"></use>
-                  </svg>
-                  <h2>Connect with us</h2>
-                  <p>Join the Vite community</p>
-                  <ul>
-                    <li>
-                      <a href="https://github.com/vitejs/vite" target="_blank">
-                        <svg
-                          className="button-icon"
-                          role="presentation"
-                          aria-hidden="true"
-                        >
-                          <use href="/icons.svg#github-icon"></use>
-                        </svg>
-                        GitHub
-                      </a>
-                    </li>
-                    <li>
-                      <a href="https://chat.vite.dev/" target="_blank">
-                        <svg
-                          className="button-icon"
-                          role="presentation"
-                          aria-hidden="true"
-                        >
-                          <use href="/icons.svg#discord-icon"></use>
-                        </svg>
-                        Discord
-                      </a>
-                    </li>
-                    <li>
-                      <a href="https://x.com/vite_js" target="_blank">
-                        <svg
-                          className="button-icon"
-                          role="presentation"
-                          aria-hidden="true"
-                        >
-                          <use href="/icons.svg#x-icon"></use>
-                        </svg>
-                        X.com
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://bsky.app/profile/vite.dev"
-                        target="_blank"
-                      >
-                        <svg
-                          className="button-icon"
-                          role="presentation"
-                          aria-hidden="true"
-                        >
-                          <use href="/icons.svg#bluesky-icon"></use>
-                        </svg>
-                        Bluesky
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </section>
-
-              <div className="ticks"></div>
-              <section id="spacer"></section>
-            </main>
-          }
+          element={<Home />}
         />
         <Route
           path="/features"
diff --git a/src/features/Home/v1/Home.tsx b/src/features/Home/v1/Home.tsx
index e69de29..fa3dd5e 100644
--- a/src/features/Home/v1/Home.tsx
+++ b/src/features/Home/v1/Home.tsx
@@ -0,0 +1,17 @@
+import Hero from './components/Hero';
+import Stats from './components/Stats';
+import Features from './components/Features';
+import WhyCommDesk from './components/WhyCommDesk';
+import CTA from './components/CTA';
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-[#0b0f1f] text-white pt-[72px]">
+      <Hero />
+      <Stats />
+      <Features />
+      <WhyCommDesk />
+      <CTA />
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Home/v1/components/CTA.tsx b/src/features/Home/v1/components/CTA.tsx
new file mode 100644
index 0000000..199da67
--- /dev/null
+++ b/src/features/Home/v1/components/CTA.tsx
@@ -0,0 +1,18 @@
+export default function CTA() {
+  return (
+    <section className="max-w-4xl mx-auto px-6 py-16 text-center">
+      <h2 className="text-4xl font-bold mb-6">
+        Ready to Transform Community Management?
+      </h2>
+
+      <p className="text-gray-400 mb-8">
+        Join organizations using CommDesk to streamline collaboration,
+        event management, and resource sharing.
+      </p>
+
+      <button className="px-8 py-4 rounded-lg bg-purple-600 hover:bg-purple-700 transition-all duration-300">
+        Explore CommDesk
+      </button>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Home/v1/components/Features.tsx b/src/features/Home/v1/components/Features.tsx
new file mode 100644
index 0000000..47a82d4
--- /dev/null
+++ b/src/features/Home/v1/components/Features.tsx
@@ -0,0 +1,45 @@
+export default function Features() {
+  const features = [
+    {
+      title: 'Communities',
+      desc: 'Build and manage thriving communities.',
+    },
+    {
+      title: 'Events',
+      desc: 'Organize and engage members through events.',
+    },
+    {
+      title: 'Resources',
+      desc: 'Share documents and knowledge efficiently.',
+    },
+    {
+      title: 'Collaboration',
+      desc: 'Work together in one unified platform.',
+    },
+  ];
+
+  return (
+    <section className="max-w-6xl mx-auto px-6 py-12">
+      <h2 className="text-4xl font-bold text-center mb-8">
+        Features
+      </h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {features.map((feature) => (
+          <div
+            key={feature.title}
+            className="bg-[#14192c] rounded-xl p-6 hover:bg-[#1c2240] transition-all duration-300"
+          >
+            <h3 className="text-2xl font-semibold mb-3">
+              {feature.title}
+            </h3>
+
+            <p className="text-gray-400">
+              {feature.desc}
+            </p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Home/v1/components/Hero.tsx b/src/features/Home/v1/components/Hero.tsx
new file mode 100644
index 0000000..f574e94
--- /dev/null
+++ b/src/features/Home/v1/components/Hero.tsx
@@ -0,0 +1,33 @@
+import heroImg from '../../../../assets/hero.png';
+
+export default function Hero() {
+  return (
+    <section className="w-full max-w-7xl mx-auto px-6 pt-8 pb-16 text-center">
+      <img
+        src={heroImg}
+        alt="CommDesk Hero"
+        className="mx-auto mb-6 w-64"
+      />
+
+      <h1 className="text-5xl md:text-6xl font-bold mb-6 text-center">
+        The Modern Platform for Community Management
+      </h1>
+       
+       <div className="flex justify-center">
+  <p className="text-lg md:text-xl text-gray-400 mb-8 text-center leading-relaxed max-w-3xl">
+    Manage communities, events, resources and collaboration from a single unified workspace.
+  </p>
+</div>
+
+      <div className="flex justify-center items-center gap-4 mt-2">
+        <button className="px-6 py-3 rounded-lg bg-purple-600 hover:bg-purple-700">
+          Get Started
+        </button>
+
+        <button className="px-6 py-3 rounded-lg border border-gray-600">
+          Explore Features
+        </button>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Home/v1/components/Stats.tsx b/src/features/Home/v1/components/Stats.tsx
new file mode 100644
index 0000000..0d3b246
--- /dev/null
+++ b/src/features/Home/v1/components/Stats.tsx
@@ -0,0 +1,41 @@
+export default function Stats() {
+  const stats = [
+    {
+      icon: '👥',
+      title: 'Community Driven',
+    },
+    {
+      icon: '📅',
+      title: 'Event Management',
+    },
+    {
+      icon: '📚',
+      title: 'Resource Sharing',
+    },
+    {
+      icon: '📱',
+      title: 'Responsive Design',
+    },
+  ];
+
+  return (
+    <section className="max-w-6xl mx-auto px-6 py-10">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        {stats.map((item) => (
+          <div
+            key={item.title}
+            className="bg-[#14192c] rounded-xl p-6 text-center"
+          >
+            <div className="text-3xl mb-3">
+              {item.icon}
+            </div>
+
+            <h3 className="font-semibold">
+              {item.title}
+            </h3>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Home/v1/components/WhyCommDesk.tsx b/src/features/Home/v1/components/WhyCommDesk.tsx
new file mode 100644
index 0000000..76caabf
--- /dev/null
+++ b/src/features/Home/v1/components/WhyCommDesk.tsx
@@ -0,0 +1,29 @@
+export default function WhyCommDesk() {
+  const reasons = [
+    'Modern Interface',
+    'Easy Community Management',
+    'Event Organization',
+    'Resource Sharing',
+    'Responsive Design',
+    'Scalable Architecture',
+  ];
+
+  return (
+    <section className="max-w-6xl mx-auto px-6 py-12">
+      <h2 className="text-4xl font-bold text-center mb-8">
+        Why CommDesk?
+      </h2>
+
+      <div className="grid md:grid-cols-3 gap-6">
+        {reasons.map((reason) => (
+          <div
+            key={reason}
+            className="bg-[#14192c] rounded-xl p-5 text-center"
+          >
+            ✓ {reason}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Nav/v1/components/CommandPalette.tsx b/src/features/Nav/v1/components/CommandPalette.tsx
index 48a010b..63b8c85 100644
--- a/src/features/Nav/v1/components/CommandPalette.tsx
+++ b/src/features/Nav/v1/components/CommandPalette.tsx
@@ -15,7 +15,7 @@ import {
   MessageSquare,
   ArrowRight,
 } from 'lucide-react';
-import { navItems } from '../types/navbar.types';
+
 
 interface CommandPaletteProps {
   isOpen: boolean;
@@ -39,7 +39,6 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({
   onSearch,
 }) => {
   const navigate = useNavigate();
-  const overlayRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const [query, setQuery] = useState('');