diff --git a/app/globals.css b/app/globals.css
index a2dc41e..cf45804 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -14,13 +14,127 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: white;
+    --foreground: black;
   }
 }
-
+* {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+}
 body {
   background: var(--background);
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+.Eco-h1{
+  font-size: 3rem;
+  font-weight: 500;
+
+}
+.Eco-head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+
+}
+.f-img{
+  width: 20rem;
+  height: 25rem;
+}
+section {
+  padding-left: 7rem;
+  padding-right: 7rem;
+}
+.social-logo {
+  width: 14rem;
+  padding: 1rem 1rem 0px 1rem;
+}
+.social-text {
+  display: inline-block;
+  font-size: 1.5rem;
+  font-weight: 500;
+  text-align: left;
+  padding: 1rem 1rem 0px 1rem;
+}
+.c-1 {
+  border-radius: 12px;
+  width: 20rem;
+  height: 25rem;
+}
+.c-2 {
+  display: flex;
+  flex-direction: column;
+  width: 20rem;
+  height: 25rem;
+  background: #F7F8F9;
+  gap: 1rem;
+  border-radius: 12px;
+}
+.vector {
+  margin-top: auto;
+  width: 100%;
+}
+.Eco-container-1 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  align-items: center;
+  gap: 1rem;
+}
+.c-3 {
+  display: flex;
+  flex-direction: column;
+  background-color: #F7F8F9;
+  border-radius: 12px;
+  padding: 1rem;
+  width: 40rem;
+  height: 25rem;
+}
+.c3-text, .c4-text {
+  margin-top: auto;
+}
+.c-4 {
+  display: flex;
+  flex-direction: column;
+  background-color: #F7F8F9;
+  border-radius: 12px;
+  padding: 1rem;
+  width: 40rem;
+  height: 25rem;
+}
+.Eco-container-2 {
+  display: grid;
+  padding-top: 1rem;
+  grid-template-columns: repeat(3, 1fr);
+  align-items: center;
+  gap: 1rem;
+}
+.c5-img {
+  width: 20rem;
+  height: 25rem;
+}
+.c-5 {
+  border-radius: 12px;
+  width: 20rem;
+  height: 25rem;
+}
+.c-6 {
+  display: flex;
+  flex-direction: column;
+  background-color: #F7F8F9;
+  border-radius: 12px;
+  padding: 1rem;
+  width: 20rem;
+  height: 25rem;
+}
+.coming-soon {
+  background-color: #c8c8c8;
+  width: fit-content;
+  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
+  border-radius: 12px;
+  margin-top: auto;
+  border: 1px solid #a4a4a4;
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..f9bd983 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,7 +13,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Nirvana",
   description: "Generated by create next app",
 };
 
diff --git a/app/page.tsx b/app/page.tsx
index 1933473..e08f9ed 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,18 +1,14 @@
-import Navbar from "@/components/navbar";
-import Footer from "@/components/footer";
+
+import Ecosystem from "@/components/ecosystem";
 
 export default function Home() {
   return (
     <div>
-      <Navbar />
 
       <main className="container mx-auto px-4 py-8">
-        <h1 className="text-4xl font-bold mb-4">Welcome to My Next.js App</h1>
-        <p className="text-lg text-gray-700">
-          This is a simple Next.js application with a navbar and footer.
-        </p>
+        <Ecosystem />
       </main>
-      <Footer />
+      
     </div>
   );
 }
diff --git a/components/ecosystem.tsx b/components/ecosystem.tsx
new file mode 100644
index 0000000..7888ebe
--- /dev/null
+++ b/components/ecosystem.tsx
@@ -0,0 +1,52 @@
+//  import { FaXTwitter } from "react-icons/fa6";
+//  import { FaInstagram } from "react-icons/fa";
+//  import { FaTelegram } from "react-icons/fa";
+//  import { FaYoutube } from "react-icons/fa";
+//  import { FaDiscord } from "react-icons/fa";
+//  import { FaLinkedin } from "react-icons/fa";
+//  import { FaFacebook } from "react-icons/fa";
+const Ecosystem = () => {
+    return (
+        <>
+        <section>
+            <div className="Eco-head">
+                <h1 className="Eco-h1">Our Ecosystem</h1>
+                <p className="Eco-p">A comprehensive platform designed to support</p>
+                <p className="Eco-p">your Web3 journey from learning to building.</p>
+            </div>
+
+            <div className="Eco-container-1">
+                <div className="c-1">
+                    <img src="/f-img.png" className="f-img" alt="Ecosystem"/>
+                </div>
+                <div className="c-2">
+                    <p className="social-text">Follow us on all <br />platform.</p>
+                    <img src="/social-logo.png"className="social-logo" alt="social-logo" />
+                    <img src="/vector.png" className="vector" alt="" />
+                </div>
+                <div className="c-3">
+                <p className="c3-text">Nirvana Labs</p>
+                <p>Our innovation hub where cutting-edge <br />Web3 research meets practical application.</p>
+                </div>
+            </div>
+
+            <div className="Eco-container-2">
+                <div className="c-4">
+                    <p className="c4-text">DAO Governance</p>
+                    <p>Community-driven decision making. Shape <br />the future of Web3 education together.</p>
+                </div>
+                <div className="c-5">
+                    <img src="/c5img.png" className="c5-img" alt="" />
+                </div>
+                <div className="c-6">
+                    <p className="coming-soon">Coming Soon</p>
+                    <p className="c6-head">Community Hub</p>
+                    <p className="c6-p">Connect, collaborate, and grow with fellow Web3 enthusiasts worldwide.</p>
+                </div>
+            </div>
+        </section>
+        </>
+    )
+}
+
+export default Ecosystem
\ No newline at end of file
diff --git a/components/footer.tsx b/components/footer.tsx
deleted file mode 100644
index 796e7ba..0000000
--- a/components/footer.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-
-const Footer = () => {
-  return (
-    <div className="bg-gray-800 text-white py-6">
-      <div className="container mx-auto px-4">
-        <p className="text-center">© 2023 My Next.js App. All rights reserved.</p>
-      </div>
-    </div>
-  )
-}
-
-export default Footer
diff --git a/components/navbar.tsx b/components/navbar.tsx
deleted file mode 100644
index 82103ac..0000000
--- a/components/navbar.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-
-const Navbar = () => {
-  return (
-    <div className="bg-gray-800 text-white py-4">
-      <div className="container mx-auto px-4">
-        <h1 className="text-xl font-bold">My Next.js App</h1>
-      </div>
-    </div>
-  )
-}
-
-export default Navbar
diff --git a/package-lock.json b/package-lock.json
index c0597dd..6c9ad26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "16.1.6",
         "react": "19.2.3",
-        "react-dom": "19.2.3"
+        "react-dom": "19.2.3",
+        "react-icons": "^5.5.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -5462,6 +5463,15 @@
         "react": "^19.2.3"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 16cf3fb..587f451 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "16.1.6",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
diff --git a/public/Vector.png b/public/Vector.png
new file mode 100644
index 0000000..cb6bb16
Binary files /dev/null and b/public/Vector.png differ
diff --git a/public/c5img.png b/public/c5img.png
new file mode 100644
index 0000000..803dd11
Binary files /dev/null and b/public/c5img.png differ
diff --git a/public/f-img.png b/public/f-img.png
new file mode 100644
index 0000000..b99db9c
Binary files /dev/null and b/public/f-img.png differ
diff --git a/public/social-logo.png b/public/social-logo.png
new file mode 100644
index 0000000..69bc8e3
Binary files /dev/null and b/public/social-logo.png differ