diff --git a/Vector.png b/Vector.png
deleted file mode 100644
index b5ab6a1..0000000
Binary files a/Vector.png and /dev/null differ
diff --git a/data.json b/data.json
index 8f666a8..37f5599 100644
--- a/data.json
+++ b/data.json
@@ -1,124 +1,157 @@
 {
-    "collegeCode": "SNT",
+  "collegeCode": "UCEK",
 
-    "college": "Sree Narayana Guru Institute of Science and Technology",
+  "college": "University College Of Engineering, Kariavattom ",
 
-    "about": "Lorem ipsum dolor sit amet consectetur adipiscing, elit ultricies imperdiet neque mattis, orci pellentesque turpis facilisi leo. Laoreet donec tortor sagittis habitasse eleifend conubia quis lacinia accumsan auctor, montes morbi natoque convallis integer aliquam posuere eu nulla, proin fames dapibus mattis sociis ligula blandit quam potenti. Himenaeos fringilla tincidunt aptent porta ultrices velit dignissim senectus purus suspendisse, fames eleifend feugiat nam hac montes semper pretium potenti, viverra curae netus volutpat cras per eu cubilia primis.",
+  "about": "Welcome to MuLearn UCEK! MuLearn is an online platform and student community committed to empowering students to enhance their skills and thrive as individuals and as a community. Our approach integrates micro peer groups, interest groups, and gamified tasks, encouraging engaging and collaborative learning experiences. MuLearn has been successfully implemented at UCEK, assisting students in honing their skills and facilitating easier access to internships and placements. Join us on a journey of growth and discovery, as we support each other's paths to knowledge and personal development.",
 
-    "events": [
-        {
-            "month": "Sep",
-            "date": "29",
-            "head": "Event 1",
-            "para": "Webinar on Engineering and Industrial Services division of TCS.",
-            "img": "https://wallpaperaccess.com/full/1642272.jpg"
-        },
-        {
-            "month": "Sep",
-            "date": "27",
-            "head": "Opportunities in TCS EIS",
-            "para": "Webinar on Engineering and Industrial Services division of TCS.",
-            "img": "https://wallpaperaccess.com/full/1642272.jpg"
-        },
-        {
-            "month": "Sep",
-            "date": "26",
-            "head": "Opportunities in TCS EIS",
-            "para": "Webinar on Engineering and Industrial Services division of TCS.",
-            "img": "https://wallpaperaccess.com/full/1642272.jpg"
-        },
-        {
-            "month": "Sep",
-            "date": "25",
-            "head": "Opportunities in TCS EIS",
-            "para": "Webinar on Engineering and Industrial Services division of TCS.",
-            "img": "https://wallpaperaccess.com/full/1642272.jpg"
-        },
+  "events": [
+    {
+      "month": "Apr",
+      "date": "22",
+      "head": "Mediacon",
+      "para": "Kerala's First Meadia & Entertainment Conference",
+      "img": "mulearn-ucek assets/events/mediacon.jpg"
+    },
+    {
+      "month": "Oct",
+      "date": "14",
+      "head": "μClimb",
+      "para": "μClimb organised by MulearnUcek",
+      "img": "mulearn-ucek assets/events/muclimb.jpg"
+    },
+
+    {
+      "month": "Sep",
+      "date": "26",
+      "head": "Mulearn Orientation",
+      "para": "Mulearn orientation and onboarding of students",
+      "img": "https://wallpaperaccess.com/full/1642272.jpg"
+    },
+    {
+      "month": "Sep",
+      "date": "07",
+      "head": "ERROR_418",
+      "para": "24 hour hackathon organised by MulearnUcek", 
+      "img": "mulearn-ucek assets/events/error418.jpg"
+    },
+    {
+      "month": "July",
+      "date": "03",
+      "head": "Introduction to Game Dev",
+      "para": "Organized by MulearnUcek",
+      "img": "mulearn-ucek assets/events/gamedev.jpg"
+    },
         {
-            "month": "Sep",
-            "date": "25",
-            "head": "Opportunities in TCS EIS",
-            "para": "Webinar on Engineering and Industrial Services division of TCS.",
-            "img": "https://wallpaperaccess.com/full/1642272.jpg"
-        }
+      "month": "July",
+      "date": "03",
+      "head": "Dev Expo",
+      "para": "Organized by MulearnUcek",
+      "img": "mulearn-ucek assets/events/devexpo.jpg"
+    }
+
+  ],
+
+  "gallery": {
+    "row1": [
+      {
+        "image": "mulearn-ucek assets/gallery/Award_cermony.jpg"
+      },
+      {
+        "image": "mulearn-ucek assets/gallery/Award.jpg"
+      },
+      {
+        "image": "mulearn-ucek assets/gallery/shreyas.png"
+      },
+      {
+        "image": "mulearn-ucek assets/gallery/Group.jpg"
+      },
+      {
+        "image": "mulearn-ucek assets/gallery/score.png"
+      },
+      {
+        "image": "mulearn-ucek assets/gallery/score2.png"
+      },
+      {
+        "image": "mulearn-ucek assets/gallery/permute.png"
+      }
     ],
+    "row2": [
+      {
+        "image": "https://th.bing.com/th/id/OIP.p5zC9uLm5ByGSy8gYI0McAHaE8?pid=ImgDet&rs=1"
+      },
+      {
+        "image": "https://images.squarespace-cdn.com/content/v1/5c710438b914490d5769a64f/b4fb2b4f-5f95-41a1-9416-d156d0ae273f/Most+Famous+Astrologer+in+the+World.jpg"
+      }
+    ]
+  },
+  "statistics": {
+    "studentsCount": 297,
+    "learningCircles": 32,
+    "InterestGroups": 5,
+    "karmaEarned": 354.24,
+    "rank": 8
+  },
 
-    "gallery": {
-        "row1": [
-            {
-                "image": "https://mulearn.org/assets/home/illustration.webp"
-            },
-            {
-                "image": "https://mulearn.org/assets/home/Chart.webp"
-            },
-			{
-				"image": "https://learn.mulearn.org/assets/challenge/typingsample.webp"
-			}
-        ],
-        "row2": [
-            {
-                "image": "https://th.bing.com/th/id/OIP.p5zC9uLm5ByGSy8gYI0McAHaE8?pid=ImgDet&rs=1"
-            },
-            {
-                "image": "https://images.squarespace-cdn.com/content/v1/5c710438b914490d5769a64f/b4fb2b4f-5f95-41a1-9416-d156d0ae273f/Most+Famous+Astrologer+in+the+World.jpg"
-            }
-        ]
+  "team": {
+    "campusLead": {
+      "name": "Chethas L Pramod",
+      "image": "mulearn-ucek assets/team/Chethas.png"
     },
-
-    "statistics": {
-        "studentsCount": 30,
-        "learningCircles": 10,
-        "InterestGroups": 5,
-        "karmaEarned": 60,
-        "rank": 28
+    "campusCoLead": {
+      "name": "Aswath S A",
+      "image": "mulearn-ucek assets/team/Ashwath.jpg"
     },
-
-    "team": {
-        "staffAdvisor": {
-            "name": "Enric S Neelamkavil",
-            "image": "https://mulearn-cce.vercel.app/static/media/img1.31943833473f0d0a748b.png"
-        },
-        "campusLead": {
-            "name": "Elon Musk",
-            "image": "https://th.bing.com/th/id/OIP.DjyPSeO-t7bK2agoLSYJzgHaHa?pid=ImgDet&rs=1"
-        },
-        "campusCoLead": {
-            "name": "Enric S Neelamkavil",
-            "image": "https://mulearn-cce.vercel.app/static/media/img1.31943833473f0d0a748b.png"
-        },
-        "treasurer": {
-            "name": "Enric S Neelamkavil",
-            "image": "https://mulearn-cce.vercel.app/static/media/img1.31943833473f0d0a748b.png"
-        },
-        "technicalLead": {
-            "name": "Enric S Neelamkavil",
-            "image": "https://mulearn-cce.vercel.app/static/media/img1.31943833473f0d0a748b.png"
-        },
-        "mediaLead": {
-            "name": "Enric S Neelamkavil",
-            "image": "https://mulearn-cce.vercel.app/static/media/img1.31943833473f0d0a748b.png"
-        },
-        "contentLead": {
-            "name": "Enric S Neelamkavil",
-            "image": "https://mulearn-cce.vercel.app/static/media/img1.31943833473f0d0a748b.png"
-        },
-        "operationLead": {
-            "name": "Enric S Neelamkavil",
-            "image": "https://mulearn-cce.vercel.app/static/media/img1.31943833473f0d0a748b.png"
-        }
+    "igLead": {
+      "name": "Arjun TK",
+      "image": "mulearn-ucek assets/team/Arjun TK.jpg"
     },
+    "technicalLead": {
+      "name": "Richard S",
+      "image": "mulearn-ucek assets/team/Richard.jpg"
+    },
+    "mediaLead": {
+      "name": "Bhagyasree",
+      "image": "mulearn-ucek assets/team/Bhagyashree.jpg"
+    },
+    "marketingLead": {
+      "name": "Sooryakanth S",
+      "image": "mulearn-ucek assets/team/Sooryakanth.jpg"
+    },
+    "operationLead": {
+      "name": "Aadil Mohamed A",
+      "image": "mulearn-ucek assets/team/Aadil.jpg"
+    },
+    "communityLead": {
+      "name": "Aswath S A",
+      "image": "mulearn-ucek assets/team/Ashwath.jpg"
+    },
+    "contentLead": {
+      "name": "Mihirima A R",
+      "image": "mulearn-ucek assets/team/Mihirima.jpg"
+    }
+  },
 
-    "discordLink": "",
-
-    "whatsAppLink": "",
+  "discordLink": "https://discord.gg/GgZCqppkJF",
 
-    "email": "mulearn@cce.edu.in",
+  "whatsAppLink": "https://chat.whatsapp.com/KpVdfID7x3H7zUttYvH4ck",
 
-    "linkedIn": "",
+  "email": "mulearnucek@gmail.com",
 
-    "instagram": "",
+  "linkedIn": "https://www.linkedin.com/company/mulearnucek/",
 
-    "twitter": "",
+  "instagram": "https://www.instagram.com/mulearn.ucek/",
 
-    "facebook": ""
+  "achievements": [
+    {
+      "title": "PERMUTE Emerging Campus Award",
+      "description": "University College of Engineering - Emerging Campus 2024",
+      "image": "mulearn-ucek assets/achievements/Award.jpg"
+    },
+    {
+      "title": "Top Karma Miner Award",
+      "description": "Shreyas S - #1 Karma Miner All Over Kerala, 2024",
+      "image": "mulearn-ucek assets/achievements/shreyas.png"
+    }
+  ]
 }
diff --git a/index.html b/index.html
index 71f2d7e..0e95b57 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/x-icon" href="src/assets/images/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
         #overlay {
diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 0000000..c0061d8
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,11 @@
+[build]
+  publish = "dist"
+  command = "npm run build"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[build.environment]
+  NODE_VERSION = "18"
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 98eebd0..2a45b20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,13 @@
       "name": "vite-project",
       "version": "0.0.0",
       "dependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "@types/react-router-dom": "^5.3.3",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-fast-marquee": "^1.6.0",
         "react-helmet-async": "^1.3.0",
-        "react-icons": "^4.11.0"
+        "react-icons": "^4.12.0",
+        "react-router-dom": "^7.9.3"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
@@ -50,13 +52,13 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
-      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
       "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.22.13",
-        "chalk": "^2.4.2"
+        "@babel/highlight": "^7.24.2",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -111,14 +113,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.15.tgz",
-      "integrity": "sha512-Zu9oWARBqeVOW0dZOjXc3JObrzuqothQ3y/n1kUtrjCoCPLkXUwMvOo/F/TCfoHMbWIFlWwpZtkZVb9ga4U2pA==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.4.tgz",
+      "integrity": "sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.15",
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "@jridgewell/trace-mapping": "^0.3.17",
+        "@babel/types": "^7.24.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^2.5.1"
       },
       "engines": {
@@ -151,22 +153,22 @@
       }
     },
     "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-      "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-      "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -249,18 +251,18 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz",
-      "integrity": "sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -290,23 +292,24 @@
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.13.tgz",
-      "integrity": "sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
+      "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.16",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.16.tgz",
-      "integrity": "sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz",
+      "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -371,20 +374,20 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.22.17",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.17.tgz",
-      "integrity": "sha512-xK4Uwm0JnAMvxYZxOVecss85WxTEIbTa7bnGyf/+EgCL5Zt3U7htUpEOWv9detPlamGKuRzCqw74xVglDWpPdg==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz",
+      "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.22.15",
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-function-name": "^7.22.5",
+        "@babel/code-frame": "^7.24.1",
+        "@babel/generator": "^7.24.1",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.22.16",
-        "@babel/types": "^7.22.17",
-        "debug": "^4.1.0",
+        "@babel/parser": "^7.24.1",
+        "@babel/types": "^7.24.0",
+        "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -392,13 +395,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.22.17",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.17.tgz",
-      "integrity": "sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.15",
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -862,14 +865,14 @@
       "dev": true
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -885,9 +888,9 @@
       }
     },
     "node_modules/@jridgewell/set-array": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
       "dev": true,
       "engines": {
         "node": ">=6.0.0"
@@ -900,9 +903,9 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
-      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -944,6 +947,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -953,14 +962,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/react": {
       "version": "18.2.21",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz",
       "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -976,11 +983,31 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
-      "dev": true
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.1",
@@ -1398,6 +1425,15 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1415,8 +1451,7 @@
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -2271,9 +2306,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "dev": true,
       "funding": [
         {
@@ -2431,9 +2466,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "dev": true,
       "funding": [
         {
@@ -2450,9 +2485,9 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -2507,9 +2542,10 @@
       ]
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -2518,15 +2554,16 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-fast-compare": {
@@ -2560,9 +2597,10 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
-      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
+      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "*"
       }
@@ -2581,6 +2619,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.9.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.3.tgz",
+      "integrity": "sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.9.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.3.tgz",
+      "integrity": "sha512-1QSbA0TGGFKTAc/aWjpfW/zoEukYfU4dc1dLkT/vvf54JoGMkW+fNA+3oyo2gWVW1GM7BxjJVHz5GnPJv40rvg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.9.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
@@ -2660,9 +2736,10 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -2700,6 +2777,12 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -2736,9 +2819,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -2896,9 +2979,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
-      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
diff --git a/package.json b/package.json
index 01327df..83cb5f9 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@types/react-router-dom": "^5.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-fast-marquee": "^1.6.0",
     "react-helmet-async": "^1.3.0",
-    "react-icons": "^4.11.0"
+    "react-icons": "^4.12.0",
+    "react-router-dom": "^7.9.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/public/mulearn-ucek assets/achievements/Award.jpg b/public/mulearn-ucek assets/achievements/Award.jpg
new file mode 100644
index 0000000..53f81ef
Binary files /dev/null and b/public/mulearn-ucek assets/achievements/Award.jpg differ
diff --git a/public/mulearn-ucek assets/achievements/shreyas.png b/public/mulearn-ucek assets/achievements/shreyas.png
new file mode 100644
index 0000000..b4390ed
Binary files /dev/null and b/public/mulearn-ucek assets/achievements/shreyas.png differ
diff --git a/public/mulearn-ucek assets/events/Isr_pic.png b/public/mulearn-ucek assets/events/Isr_pic.png
new file mode 100644
index 0000000..8861e65
Binary files /dev/null and b/public/mulearn-ucek assets/events/Isr_pic.png differ
diff --git a/public/mulearn-ucek assets/events/LLM.jpeg b/public/mulearn-ucek assets/events/LLM.jpeg
new file mode 100644
index 0000000..c158d2a
Binary files /dev/null and b/public/mulearn-ucek assets/events/LLM.jpeg differ
diff --git a/public/mulearn-ucek assets/events/SIH_pic.png b/public/mulearn-ucek assets/events/SIH_pic.png
new file mode 100644
index 0000000..2e988a5
Binary files /dev/null and b/public/mulearn-ucek assets/events/SIH_pic.png differ
diff --git a/public/mulearn-ucek assets/events/buildnship.png b/public/mulearn-ucek assets/events/buildnship.png
new file mode 100644
index 0000000..7b29b56
Binary files /dev/null and b/public/mulearn-ucek assets/events/buildnship.png differ
diff --git a/public/mulearn-ucek assets/events/devexpo.jpg b/public/mulearn-ucek assets/events/devexpo.jpg
new file mode 100644
index 0000000..ef20031
Binary files /dev/null and b/public/mulearn-ucek assets/events/devexpo.jpg differ
diff --git a/public/mulearn-ucek assets/events/error418.jpg b/public/mulearn-ucek assets/events/error418.jpg
new file mode 100644
index 0000000..4e0752c
Binary files /dev/null and b/public/mulearn-ucek assets/events/error418.jpg differ
diff --git a/public/mulearn-ucek assets/events/gamedev.jpg b/public/mulearn-ucek assets/events/gamedev.jpg
new file mode 100644
index 0000000..05194b4
Binary files /dev/null and b/public/mulearn-ucek assets/events/gamedev.jpg differ
diff --git a/public/mulearn-ucek assets/events/mediacon.jpg b/public/mulearn-ucek assets/events/mediacon.jpg
new file mode 100644
index 0000000..5b24fb6
Binary files /dev/null and b/public/mulearn-ucek assets/events/mediacon.jpg differ
diff --git a/public/mulearn-ucek assets/events/muclimb.jpg b/public/mulearn-ucek assets/events/muclimb.jpg
new file mode 100644
index 0000000..f95ba87
Binary files /dev/null and b/public/mulearn-ucek assets/events/muclimb.jpg differ
diff --git a/public/mulearn-ucek assets/events/muclimb1.png b/public/mulearn-ucek assets/events/muclimb1.png
new file mode 100644
index 0000000..ad376ac
Binary files /dev/null and b/public/mulearn-ucek assets/events/muclimb1.png differ
diff --git a/public/mulearn-ucek assets/gallery/Award.jpg b/public/mulearn-ucek assets/gallery/Award.jpg
new file mode 100644
index 0000000..53f81ef
Binary files /dev/null and b/public/mulearn-ucek assets/gallery/Award.jpg differ
diff --git a/public/mulearn-ucek assets/gallery/Award_cermony.jpg b/public/mulearn-ucek assets/gallery/Award_cermony.jpg
new file mode 100644
index 0000000..1f421f4
Binary files /dev/null and b/public/mulearn-ucek assets/gallery/Award_cermony.jpg differ
diff --git a/public/mulearn-ucek assets/gallery/Group.jpg b/public/mulearn-ucek assets/gallery/Group.jpg
new file mode 100644
index 0000000..95f3624
Binary files /dev/null and b/public/mulearn-ucek assets/gallery/Group.jpg differ
diff --git a/public/mulearn-ucek assets/gallery/permute.png b/public/mulearn-ucek assets/gallery/permute.png
new file mode 100644
index 0000000..602a5b7
Binary files /dev/null and b/public/mulearn-ucek assets/gallery/permute.png differ
diff --git a/public/mulearn-ucek assets/gallery/score.png b/public/mulearn-ucek assets/gallery/score.png
new file mode 100644
index 0000000..9dd49e8
Binary files /dev/null and b/public/mulearn-ucek assets/gallery/score.png differ
diff --git a/public/mulearn-ucek assets/gallery/score2.png b/public/mulearn-ucek assets/gallery/score2.png
new file mode 100644
index 0000000..f8709b7
Binary files /dev/null and b/public/mulearn-ucek assets/gallery/score2.png differ
diff --git a/public/mulearn-ucek assets/gallery/shreyas.png b/public/mulearn-ucek assets/gallery/shreyas.png
new file mode 100644
index 0000000..b4390ed
Binary files /dev/null and b/public/mulearn-ucek assets/gallery/shreyas.png differ
diff --git a/public/mulearn-ucek assets/team/Aadil.jpg b/public/mulearn-ucek assets/team/Aadil.jpg
new file mode 100644
index 0000000..94ca097
Binary files /dev/null and b/public/mulearn-ucek assets/team/Aadil.jpg differ
diff --git a/public/mulearn-ucek assets/team/Akshay.jpg b/public/mulearn-ucek assets/team/Akshay.jpg
new file mode 100644
index 0000000..2b9bf1c
Binary files /dev/null and b/public/mulearn-ucek assets/team/Akshay.jpg differ
diff --git a/public/mulearn-ucek assets/team/Amarnath.jpg b/public/mulearn-ucek assets/team/Amarnath.jpg
new file mode 100644
index 0000000..8e5a721
Binary files /dev/null and b/public/mulearn-ucek assets/team/Amarnath.jpg differ
diff --git a/public/mulearn-ucek assets/team/Aneez.jpg b/public/mulearn-ucek assets/team/Aneez.jpg
new file mode 100644
index 0000000..bdff649
Binary files /dev/null and b/public/mulearn-ucek assets/team/Aneez.jpg differ
diff --git a/public/mulearn-ucek assets/team/Anjana.jpg b/public/mulearn-ucek assets/team/Anjana.jpg
new file mode 100644
index 0000000..c2a1463
Binary files /dev/null and b/public/mulearn-ucek assets/team/Anjana.jpg differ
diff --git a/public/mulearn-ucek assets/team/Anza.jpg b/public/mulearn-ucek assets/team/Anza.jpg
new file mode 100644
index 0000000..970f754
Binary files /dev/null and b/public/mulearn-ucek assets/team/Anza.jpg differ
diff --git a/public/mulearn-ucek assets/team/Arjun TK.jpg b/public/mulearn-ucek assets/team/Arjun TK.jpg
new file mode 100644
index 0000000..bad5d57
Binary files /dev/null and b/public/mulearn-ucek assets/team/Arjun TK.jpg differ
diff --git a/public/mulearn-ucek assets/team/Ashwath.jpg b/public/mulearn-ucek assets/team/Ashwath.jpg
new file mode 100644
index 0000000..8457a6f
Binary files /dev/null and b/public/mulearn-ucek assets/team/Ashwath.jpg differ
diff --git a/public/mulearn-ucek assets/team/Bhagyashree.jpg b/public/mulearn-ucek assets/team/Bhagyashree.jpg
new file mode 100644
index 0000000..4518ede
Binary files /dev/null and b/public/mulearn-ucek assets/team/Bhagyashree.jpg differ
diff --git a/public/mulearn-ucek assets/team/Chethas.png b/public/mulearn-ucek assets/team/Chethas.png
new file mode 100644
index 0000000..e838888
Binary files /dev/null and b/public/mulearn-ucek assets/team/Chethas.png differ
diff --git a/public/mulearn-ucek assets/team/Mihirima.jpg b/public/mulearn-ucek assets/team/Mihirima.jpg
new file mode 100644
index 0000000..2ea4db5
Binary files /dev/null and b/public/mulearn-ucek assets/team/Mihirima.jpg differ
diff --git a/public/mulearn-ucek assets/team/Richard.jpg b/public/mulearn-ucek assets/team/Richard.jpg
new file mode 100644
index 0000000..c0e0cb4
Binary files /dev/null and b/public/mulearn-ucek assets/team/Richard.jpg differ
diff --git a/public/mulearn-ucek assets/team/Sooryakanth.jpg b/public/mulearn-ucek assets/team/Sooryakanth.jpg
new file mode 100644
index 0000000..903ddd1
Binary files /dev/null and b/public/mulearn-ucek assets/team/Sooryakanth.jpg differ
diff --git a/public/mulearn-ucek assets/team/Sreerag.jpg b/public/mulearn-ucek assets/team/Sreerag.jpg
new file mode 100644
index 0000000..66c1761
Binary files /dev/null and b/public/mulearn-ucek assets/team/Sreerag.jpg differ
diff --git a/src/App.css b/src/App.css
index b55bb08..79a3c6f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -25,4 +25,13 @@ a {
   align-items: center;
   justify-content: center;
   width: 100%;
+}
+
+.redirect-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100dvh;
+  width: 100%;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 7ac4f91..9af7fde 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import "./App.css";
+import { Routes, Route, useLocation } from "react-router-dom";
 // import { Helmet, HelmetProvider } from "react-helmet-async";
 import Navbar from "./Components/Navbar/Navbar";
 import Home from "./Components/Home/Home";
@@ -10,13 +11,16 @@ import ExploreLC from "./Components/ExploreLC/ExploreLC";
 import Team from "./Components/Team/Team";
 import Connect from "./Components/Connect/Connect";
 import Footer from "./Components/Footer/Footer";
-function App() {
+import Achievements from "./Components/Achievements/Achievements";
+import TeamMember from "./Components/TeamMember/TeamMember";
 
+// Main homepage component
+const HomePage = () => {
     return (
-        <div className="appWrapper">
-            <Navbar />
+        <>
             <Home />
             <About />
+            <Achievements />
             <Events />
             <Gallery />
             <Statistics />
@@ -24,8 +28,31 @@ function App() {
             <Team />
             <Connect />
             <Footer />
+        </>
+    );
+};
+
+function App() {
+    const location = useLocation();
+    const needNavbar = location.pathname == '/'
+    
+    return (
+        <div className="appWrapper">
+            {needNavbar && <Navbar />}
+            <Routes>
+                <Route path="/blender-workshop" element={<RedirectToForm />} />
+                <Route path="/" element={<HomePage />} />
+                <Route path="/team/:memberName" element={<TeamMember />} />
+            </Routes>
         </div>
     );
 }
 
+function RedirectToForm() {
+    window.location.href = "https://docs.google.com/forms/d/e/1FAIpQLSc1D0sBBioSchEqV_lBfCYBsV5jhZ-Nj0SJZeYo6Iu_r-GEsQ/viewform";
+    return <div className="redirect-main">
+        <div className="progress"></div><br />
+    </div>
+}
+
 export default App;
diff --git a/src/Components/About/About.module.css b/src/Components/About/About.module.css
index ed6e7e5..9d18b07 100644
--- a/src/Components/About/About.module.css
+++ b/src/Components/About/About.module.css
@@ -17,7 +17,7 @@
 .AboutWrapper p {
   font-size: 20px;
   color: rgb(66, 66, 66);
-  text-align: left;
+  text-align: center;
   font-size: 1.2rem;
 }
 
@@ -38,6 +38,7 @@
   }
 
   .AboutWrapper p {
-    font-size: .8rem;
+    font-size: 0.8rem;
+    text-align: justify;
   }
-}
\ No newline at end of file
+}
diff --git a/src/Components/Achievements/Achievements.module.css b/src/Components/Achievements/Achievements.module.css
new file mode 100644
index 0000000..9889c51
--- /dev/null
+++ b/src/Components/Achievements/Achievements.module.css
@@ -0,0 +1,132 @@
+.AboutWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 25px;
+  padding: 5vh 5%;
+  width: 100%;
+}
+
+/* Renaming the main wrapper for clarity */
+.AchievementsWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 25px;
+  padding: 5vh 5%;
+  width: 100%;
+}
+
+.AchievementsWrapper h1 {
+  color: #ae59ff;
+  font-size: 35px;
+}
+
+.achievementsContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 30px;
+  width: 100%;
+  max-width: 1200px;
+}
+
+.achievementCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 500px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.achievementCard:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(174, 89, 255, 0.2);
+}
+
+.achievementImage {
+  width: 100%;
+  height: 300px; /* Fixed height for consistency */
+  overflow: hidden;
+  background-color: #f8f8f8;
+}
+
+.achievementImage img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Fill the container */
+  transition: transform 0.5s ease;
+}
+
+.achievementCard:hover .achievementImage img {
+  transform: scale(1.03);
+}
+
+.achievementInfo {
+  padding: 20px;
+  width: 100%;
+  background-color: #fff;
+  text-align: left; /* Align text to left for consistency */
+}
+
+.achievementInfo h3 {
+  color: #ae59ff;
+  font-size: 22px;
+  margin-bottom: 10px;
+  text-align: center; /* Center the title */
+}
+
+.achievementInfo p {
+  font-size: 16px;
+  color: rgb(66, 66, 66);
+}
+
+/* Keep existing media queries */
+@media screen and (max-width: 900px) {
+  .AboutWrapper p {
+    font-size: 17px;
+  }
+  
+  .achievementCard {
+    max-width: 450px;
+  }
+  
+  .achievementImage {
+    height: 250px;
+  }
+}
+
+@media screen and (max-width: 670px) {
+  .AchievementsWrapper {
+    gap: 15px;
+    padding: 3vh 5%;
+  }
+
+  .AchievementsWrapper h1 {
+    font-size: 2rem;
+  }
+  
+  .achievementCard {
+    max-width: 100%;
+  }
+  
+  .achievementImage {
+    height: 200px;
+  }
+  
+  .achievementInfo h3 {
+    font-size: 18px;
+  }
+  
+  .achievementInfo p {
+    font-size: 0.8rem;
+  }
+}
diff --git a/src/Components/Achievements/Achievements.tsx b/src/Components/Achievements/Achievements.tsx
new file mode 100644
index 0000000..64b9ff1
--- /dev/null
+++ b/src/Components/Achievements/Achievements.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+import styles from "./Achievements.module.css";
+import data from "../../../data.json";
+
+const Achievements = () => {
+    const [imageDimensions, setImageDimensions] = useState<{[key: string]: {width: number, height: number}}>({});
+    
+    useEffect(() => {
+        // Get dimensions of each achievement image when component mounts
+        data.achievements.forEach((achievement, index) => {
+            const img = new Image();
+            img.onload = () => {
+                setImageDimensions(prev => ({
+                    ...prev,
+                    [index]: { width: img.width, height: img.height }
+                }));
+            };
+            img.src = achievement.image;
+        });
+    }, []);
+
+    // Log image dimensions when they change (this uses the state to solve the unused variable issue)
+    useEffect(() => {
+        if (Object.keys(imageDimensions).length > 0) {
+            console.log("Image dimensions loaded:", imageDimensions);
+        }
+    }, [imageDimensions]);
+
+    return (
+        <div id="achievements" className={styles.AchievementsWrapper}>
+            <h1>Achievements</h1>
+            <div className={styles.achievementsContainer}>
+                {data.achievements.map((achievement, index) => (
+                    <div key={index} className={styles.achievementCard}>
+                        <div 
+                            className={styles.achievementImage} 
+                            style={{ 
+                                height: "auto", 
+                                minHeight: "200px" 
+                            }}
+                        >
+                            <img src={achievement.image} alt={achievement.title} />
+                        </div>
+                        <div 
+                            className={styles.achievementInfo} 
+                            style={index === 1 ? {
+                                textAlign: 'center',
+                                paddingTop: '37.5px' // Add padding to move content down
+                            } : {}}
+                        >
+                            <h3>{achievement.title}</h3>
+                            <p style={index === 1 ? {textAlign: 'center'} : {}}>{achievement.description}</p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default Achievements;
diff --git a/src/Components/Connect/Connect.module.css b/src/Components/Connect/Connect.module.css
index fc2266b..f4f14e8 100644
--- a/src/Components/Connect/Connect.module.css
+++ b/src/Components/Connect/Connect.module.css
@@ -3,8 +3,10 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-  padding: 0vh 10vw 5vh;
+  padding: 15vh 10vw 5vh;
   gap: 25px;
+  z-index: 100;
+  background-color: white;
 }
 
 .contentWrapper {
@@ -35,7 +37,7 @@
 .innerContent p {
   font-size: 25px;
   color: #757575;
-  margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
 .socialMedia {
@@ -175,7 +177,7 @@
   .innerContent p {
     font-size: 14px;
     margin: 0;
-    margin-top: .3rem;
+    margin-top: 0.3rem;
   }
 }
 
@@ -192,4 +194,4 @@
   .innerContent p {
     font-size: 12px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/Components/Connect/Connect.tsx b/src/Components/Connect/Connect.tsx
index aac2bb1..eb4d103 100644
--- a/src/Components/Connect/Connect.tsx
+++ b/src/Components/Connect/Connect.tsx
@@ -17,7 +17,7 @@ const Connect = () => {
                         </p>
                     </div>
                     <div className={styles.socialMedia}>
-                        <a href={data.discordLink} className={styles.discord}>
+                        <a href={data.discordLink} className={styles.discord} target="_blank">
                             <Discord />
                             Join Discord
                         </a>
diff --git a/src/Components/Events/Events.module.css b/src/Components/Events/Events.module.css
index 31982d0..922802a 100644
--- a/src/Components/Events/Events.module.css
+++ b/src/Components/Events/Events.module.css
@@ -1,7 +1,7 @@
 .events {
   max-height: 700px;
   width: 100%;
-  padding: 0rem 2rem;
+  padding: 25rem 2rem; /* Modified: Added vertical padding */
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -26,6 +26,7 @@
 }
 
 .card {
+  justify-content: space-between; 
   display: flex;
   align-items: center;
   box-shadow: 0px 0px 24.0251px 0px rgba(0, 0, 0, 0.1);
@@ -34,6 +35,7 @@
 }
 
 .card .content {
+
   display: flex;
   align-items: center;
 }
@@ -102,7 +104,8 @@
 }
 
 .subContent {
-  display: flex;
+
+  display: block;
   align-items: center;
   flex-direction: column;
   gap: .5rem;
@@ -134,6 +137,7 @@
 @media screen and (max-width: 880px) {
   .events {
     max-height: none;
+    padding: 0rem 10px
   }
 
   .innerDiv {
diff --git a/src/Components/ExploreLC/ExploreLC.module.css b/src/Components/ExploreLC/ExploreLC.module.css
index 2f67c94..96270bb 100644
--- a/src/Components/ExploreLC/ExploreLC.module.css
+++ b/src/Components/ExploreLC/ExploreLC.module.css
@@ -77,6 +77,6 @@
   }
 
   .contentWrapper p {
-    font-size: .8rem;
+    font-size: 0.8rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/Components/Footer/Footer.tsx b/src/Components/Footer/Footer.tsx
index bc0a3ba..6d807ff 100644
--- a/src/Components/Footer/Footer.tsx
+++ b/src/Components/Footer/Footer.tsx
@@ -1,5 +1,5 @@
 import styles from "./Footer.module.css";
-import { Instagram, Twitter, Facebook, LinkedIn } from "./assets/svg";
+import { Instagram,LinkedIn } from "./assets/svg";
 import { ULearnWhite } from "../../assets/svg/svg";
 import data from "../../../data.json"
 
@@ -36,19 +36,11 @@ const Footer = () => {
                     <Instagram />
                     Instagram
                 </a>
-                <a href={data.twitter}>
-                    <Twitter />
-                    Twitter
-                </a>
-                <a href={data.facebook}>
-                    <Facebook />
-                    Facebook
-                </a>
             </div>
             <div className={styles.line}></div>
             <div className={styles.ptag}>
                 {" "}
-                <p>Copyright © 2023. All Rights Reserved.</p>
+                <p>Copyright © 2025. All Rights Reserved.</p>
                 <p>µLearn Foundation.</p>
             </div>
         </div>
diff --git a/src/Components/Gallery/Gallery.tsx b/src/Components/Gallery/Gallery.tsx
index a883a5e..af9dac0 100644
--- a/src/Components/Gallery/Gallery.tsx
+++ b/src/Components/Gallery/Gallery.tsx
@@ -6,6 +6,7 @@ const Gallery = () => {
     const marqParams = {
         autoFill: true,
         pauseOnHover: true,
+        speed:80, //speed
     };
 
     return (
@@ -20,7 +21,7 @@ const Gallery = () => {
                     ))}
                 </Marquee>
             </div>
-            <div className={styles.row}>
+         {/*  <div className={styles.row}>
                 <Marquee
                     direction="right"
                     {...marqParams}
@@ -32,7 +33,7 @@ const Gallery = () => {
                         </div>
                     ))}
                 </Marquee>
-            </div>
+                </div>*/}
         </div>
     );
 };
diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index fba2a38..0a186ec 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -1,5 +1,6 @@
 import styles from "./Navbar.module.css";
 import { useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
 import { ULearn } from "../../assets/svg/svg";
 import { useReactPath } from "./path.hook.ts";
 import { AiOutlineMenu } from "react-icons/ai";
@@ -8,11 +9,16 @@ import data from "../../../data.json";
 const Navbar = () => {
     const [openmenu, setopenmenu] = useState(false);
     const [navbg, setNavBg] = useState(false);
+    const location = useLocation();
+    
     function openMenu() {
         setopenmenu(!openmenu);
     }
     const path = useReactPath();
-    const navContent = ["home", "about", "gallery", "team", "contact"];
+    const navContent = ["home", "about", "achievements", "gallery", "team", "contact"];
+    
+    // Check if we're on a team member page
+    const isTeamMemberPage = location.pathname.startsWith('/team/');
     useEffect(() => { }, [path]);
     const changeNavBg = () => {
         window.scrollY >= 150 ? setNavBg(true) : setNavBg(false);
@@ -32,30 +38,52 @@ const Navbar = () => {
             }}
         >
             <div className={styles.navbarLeft}>
-                <a href="#home">
-                    <ULearn/>
-                    <p>{data.collegeCode}</p>
-                </a>
+                {isTeamMemberPage ? (
+                    <Link to="/">
+                        <ULearn/>
+                        <p>{data.collegeCode}</p>
+                    </Link>
+                ) : (
+                    <a href="#home">
+                        <ULearn/>
+                        <p>{data.collegeCode}</p>
+                    </a>
+                )}
             </div>
             <div className={styles.navbarRight}>
                 <div>
                     {navContent.map((content, i) => (
-                        <a href={`#${content}`} key={i.toString() + content}>
-                            <p
-                                style={{
-                                    borderBottom: window.location.href.includes(
-                                        `#${content}`
-                                    )
-                                        ? "4px solid #B3B3FF"
-                                        : "",
-                                    height: "18px",
-                                    fontSize: "18px",
-                                    fontWeight: 600,
-                                }}
-                            >
-                                {content}
-                            </p>
-                        </a>
+                        isTeamMemberPage ? (
+                            <a href={`/#${content}`} key={i.toString() + content}>
+                                <p
+                                    style={{
+                                        borderBottom: "",
+                                        height: "18px",
+                                        fontSize: "18px",
+                                        fontWeight: 600,
+                                    }}
+                                >
+                                    {content}
+                                </p>
+                            </a>
+                        ) : (
+                            <a href={`#${content}`} key={i.toString() + content}>
+                                <p
+                                    style={{
+                                        borderBottom: window.location.href.includes(
+                                            `#${content}`
+                                        )
+                                            ? "4px solid #B3B3FF"
+                                            : "",
+                                        height: "18px",
+                                        fontSize: "18px",
+                                        fontWeight: 600,
+                                    }}
+                                >
+                                    {content}
+                                </p>
+                            </a>
+                        )
                     ))}
                 </div>
                 <button>
@@ -70,24 +98,40 @@ const Navbar = () => {
                 {openmenu && (
                     <div>
                         {navContent.map((content, i) => (
-                            <a
-                                href={`#${content}`}
-                                key={i.toString() + content}
-                            >
-                                <p
-                                    style={{
-                                        borderBottom:
-                                            window.location.href.includes(
-                                                `#${content}`
-                                            )
-                                                ? "4px solid #B3B3FF"
-                                                : "",
-                                        height: "18px",
-                                    }}
+                            isTeamMemberPage ? (
+                                <a
+                                    href={`/#${content}`}
+                                    key={i.toString() + content}
                                 >
-                                    {content}
-                                </p>
-                            </a>
+                                    <p
+                                        style={{
+                                            borderBottom: "",
+                                            height: "18px",
+                                        }}
+                                    >
+                                        {content}
+                                    </p>
+                                </a>
+                            ) : (
+                                <a
+                                    href={`#${content}`}
+                                    key={i.toString() + content}
+                                >
+                                    <p
+                                        style={{
+                                            borderBottom:
+                                                window.location.href.includes(
+                                                    `#${content}`
+                                                )
+                                                    ? "4px solid #B3B3FF"
+                                                    : "",
+                                            height: "18px",
+                                        }}
+                                    >
+                                        {content}
+                                    </p>
+                                </a>
+                            )
                         ))}
                         <button>
                             <a href="http://app.mulearn.org">Join µlearn</a>
diff --git a/src/Components/Spinner/Spinner.module.css b/src/Components/Spinner/Spinner.module.css
new file mode 100644
index 0000000..4d83d55
--- /dev/null
+++ b/src/Components/Spinner/Spinner.module.css
@@ -0,0 +1,22 @@
+.spinnerContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 200px;
+}
+
+.spinner {
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #667eea;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/src/Components/Spinner/Spinner.tsx b/src/Components/Spinner/Spinner.tsx
new file mode 100644
index 0000000..6f3d256
--- /dev/null
+++ b/src/Components/Spinner/Spinner.tsx
@@ -0,0 +1,23 @@
+import styles from './Spinner.module.css';
+
+interface SpinnerProps {
+    size?: number;
+    color?: string;
+}
+
+const Spinner = ({ size = 40, color = '#667eea' }: SpinnerProps) => {
+    return (
+        <div className={styles.spinnerContainer}>
+            <div 
+                className={styles.spinner}
+                style={{ 
+                    width: `${size}px`, 
+                    height: `${size}px`,
+                    borderTopColor: color 
+                }}
+            />
+        </div>
+    );
+};
+
+export default Spinner;
diff --git a/src/Components/Statistics/Statistics.tsx b/src/Components/Statistics/Statistics.tsx
index bdd6c89..179d433 100644
--- a/src/Components/Statistics/Statistics.tsx
+++ b/src/Components/Statistics/Statistics.tsx
@@ -93,8 +93,10 @@ const Statistics = () => {
                             <h3>
                                 {index >= 0
                                     ? counter >= 2
-                                        ? `${counter}+`
-                                        : counter
+                                     ? counter == data.statistics.karmaEarned
+                                      ? `${counter}k+`
+                                        : `${counter}+`
+                                     : counter
                                     : counter.toLocaleString()}
                             </h3>
                             <p>
diff --git a/src/Components/Team/Team.module.css b/src/Components/Team/Team.module.css
index 5762125..d3901c1 100644
--- a/src/Components/Team/Team.module.css
+++ b/src/Components/Team/Team.module.css
@@ -32,9 +32,14 @@
 }
 
 .teamBgLineWrapper> :nth-child(3),
-.teamBgLineWrapper> :nth-child(4) {
+.teamBgLineWrapper> :nth-child(4){
     display: none;
 }
+.teamBgLineWrapper> :nth-child(5) {
+    display: block;
+    width: 100%;
+    height: auto;
+}
 
 .teamMembersDetailsWrapper {
     display: flex;
@@ -162,9 +167,49 @@
     left: 77%;
 }
 
-@media screen and (max-width: 1650px) {
+.team9{
+    margin-top: 400px;
+    top: 100%;
+    left: 80%;
+
+}
+@media screen and (min-width: 1501px){
+    .team5 {
+        margin-top: 300px;
+
+        top: 100%;
+        left: 2%;
+    }
+
+    .team6 {
+        margin-top: 330px;
+
+        top: 100%;
+        left: 22%;
+    }
+
+    .team7 {
+        margin-top: 350px;
+        top: 100%;
+        left: 42%;
+    }
+
+    .team8 {
+        margin-top: 310px;
+
+        top: 100%;
+        left: 62%;
+    }
+    .team9{
+        margin-top: 300px;
+        top: 100%;
+        left: 81%;
+    }
+}
+@media screen and (max-width: 1500px) {
     .teamBodyWrapper {
         height: 95vh;
+        margin-bottom: -40px;
     }
 
     .teamBgLineWrapper {
@@ -202,27 +247,32 @@
         margin-top: 300px;
 
         top: 100%;
-        left: 7%;
+        left: 2%;
     }
 
     .team6 {
         margin-top: 330px;
 
         top: 100%;
-        left: 30%;
+        left: 22%;
     }
 
     .team7 {
         margin-top: 350px;
         top: 100%;
-        left: 54%;
+        left: 42%;
     }
 
     .team8 {
         margin-top: 310px;
 
         top: 100%;
-        left: 77%;
+        left: 62%;
+    }
+    .team9{
+        margin-top: 300px;
+        top: 100%;
+        left: 81%;
     }
 }
 
@@ -233,7 +283,7 @@
     }
 
     .teamBodyWrapper {
-        height: 120vh;
+        height: 170vh;
     }
 
     .teamBgLineWrapper {
@@ -284,33 +334,51 @@
     }
 
     .team7 {
-        margin-top: 650px;
-        left: 20%;
+        margin-top: 690px;
+        left: 9%;
     }
 
     .team8 {
         margin-top: 640px;
 
-        left: 60%;
+        left: 42%;
+    }
+    .team9 {
+        margin-top: 700px;
+
+        left: 75%;
     }
 }
 
 @media screen and (max-width: 900px) {
+    
+    .teamBodyWrapper {
+        height: 90vh;
+        margin-bottom: -118px;
+        z-index: 0;
+    }
     .team7 {
         margin-top: 620px;
-        left: 20%;
+        left: 5%;
     }
 
     .team8 {
         margin-top: 610px;
 
-        left: 60%;
+        left: 38%;
+    }
+    .team9 {
+        margin-top: 640px;
+
+        left: 70%;
     }
 }
 
 @media screen and (max-width: 780px) {
     .teamBodyWrapper {
         height: 105vh;
+        margin-bottom: -130px;
+        z-index: 0;
     }
 
     .teamBgLineWrapper> :nth-child(3) {
@@ -354,7 +422,7 @@
     }
 
     .team4 {
-        margin-top: 160px;
+        margin-top: 200px;
 
         left: 4%;
     }
@@ -372,14 +440,19 @@
     }
 
     .team7 {
-        margin-top: 520px;
-        left: 20%;
+        margin-top: 550px;
+        left: 5%;
     }
 
     .team8 {
         margin-top: 530px;
 
-        left: 56%;
+        left: 38%;
+    }
+    .team9 {
+        margin-top: 560px;
+
+        left: 70%;
     }
 }
 
@@ -390,6 +463,7 @@
 
     .teamBodyWrapper {
         height: 120vh;
+        margin-bottom: 50px;
     }
 
     .teamBgLineWrapper> :nth-child(4) {
@@ -446,14 +520,19 @@
     }
 
     .team7 {
-        margin-top: 680px;
-        left: 15%;
+        margin-top: 700px;
+        left: 5%;
     }
 
     .team8 {
-        margin-top: 690px;
+        margin-top: 730px;
 
-        left: 60%;
+        left: 38%;
+    }
+    .team9 {
+        margin-top: 710px;
+
+        left: 70%;
     }
 }
 
@@ -463,7 +542,17 @@
     }
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 450px) {
+    .teamBodyWrapper {
+        height: 180vh;
+    }
+    .teamBgLineWrapper> :nth-child(5) {
+        display: block;
+    }
+    .teamBgLineWrapper {
+        width: 100%;
+        gap: 220px;
+    }
     .team1 {
         margin-top: -120px;
         top: 0;
@@ -510,11 +599,17 @@
 
         left: 52%;
     }
+    .team9 {
+        margin-top: 885px;
+
+        left: 32%;
+    }
 }
 
 @media screen and (max-width: 380px) {
     .teamBodyWrapper {
-        height: 115vh;
+        height: 165vh;
+        margin-bottom: -40px;
     }
 
     .teamImageIndividual {
diff --git a/src/Components/Team/Team.tsx b/src/Components/Team/Team.tsx
index a28ceda..53c4eb6 100644
--- a/src/Components/Team/Team.tsx
+++ b/src/Components/Team/Team.tsx
@@ -1,160 +1,165 @@
 import styles from "./Team.module.css";
 import line from "./assets/line.png";
 import line2 from "./assets/line2.png";
-import data from "../../../data.json"
+import data from "../../../data.json";
 
 const Team = () => {
-    return (
-        <div className={styles.teamWrapper} id="team">
-            <h1>Our Team</h1>
-            <div className={styles.teamBodyWrapper}>
-                <div className={styles.teamBgLineWrapper}>
-                    <img src={line} alt="" loading="lazy" />
-                    <img src={line2} alt="" loading="lazy" />
-                    <img src={line} alt="" loading="lazy" />
-                    <img src={line2} alt="" loading="lazy" />
-                </div>
-                <div className={styles.teamMembersDetailsWrapper}>
-                    <div className={`${styles.team} ${styles.team1}`}>
-                        <div className={styles.team1Img}>
-                            <img
-                                className={styles.teamImageIndividual}
-                                src={data.team.staffAdvisor.image}
-                                loading="lazy"
-                            />
-                        </div>
-                        <div className={styles.teamNameDesignation}>
-                            <div className={styles.teamMemberName}>
-                                {data.team.staffAdvisor.name}
-                            </div>
-                            <div className={styles.teamMemberDesignation}>
-                                Staff Advisor
-                            </div>
-                        </div>
-                    </div>
-                    <div className={`${styles.team} ${styles.team2}`}>
-                        <div className={styles.team1Img}>
-                            <img
-                                className={styles.teamImageIndividual}
-                                src={data.team.campusLead.image}
-                                loading="lazy"
-                            />
-                        </div>
-                        <div className={styles.teamNameDesignation}>
-                            <div className={styles.teamMemberName}>
-                                {data.team.campusLead.name}
-                            </div>
-                            <div className={styles.teamMemberDesignation}>
-                                Campus Lead
-                            </div>
-                        </div>
-                    </div>
-                    <div className={`${styles.team} ${styles.team3}`}>
+  return (
+    <div className={styles.teamWrapper} id="team">
+      <h1>Our Team</h1>
+      <div className={styles.teamBodyWrapper}>
+        <div className={styles.teamBgLineWrapper}>
+          <img src={line} alt="" loading="lazy" />
+          <img src={line2} alt="" loading="lazy" />
+          <img src={line} alt="" loading="lazy" />
+          <img src={line2} alt="" loading="lazy" />
+          <img src={line} alt="" loading="lazy" />
+        </div>
+        <div className={styles.teamMembersDetailsWrapper}>
+          <div className={`${styles.team} ${styles.team1}`}>
+            <div className={styles.team1Img}>
+              <img
+                className={styles.teamImageIndividual}
+                src={data.team.campusLead.image}
+                loading="lazy"
+              />
+            </div>
+            <div className={styles.teamNameDesignation}>
+              <div className={styles.teamMemberName}>
+                {data.team.campusLead.name}
+              </div>
+              <div className={styles.teamMemberDesignation}>Campus Lead</div>
+            </div>
+          </div>
+          <div className={`${styles.team} ${styles.team2}`}>
+            <div className={styles.team1Img}>
+              <img
+                className={styles.teamImageIndividual}
+                src={data.team.campusCoLead.image}
+                loading="lazy"
+              />
+            </div>
+            <div className={styles.teamNameDesignation}>
+              <div className={styles.teamMemberName}>
+                {data.team.campusCoLead.name}
+              </div>
+              <div className={styles.teamMemberDesignation}>Campus Co-Lead</div>
+            </div>
+          </div>
+          <div className={`${styles.team} ${styles.team3}`}>
                         <div className={styles.team1Img}>
                             <img
                                 className={styles.teamImageIndividual}
-                                src={data.team.campusCoLead.image}
+                                src={data.team.igLead.image}
                                 loading="lazy"
                             />
                         </div>
                         <div className={styles.teamNameDesignation}>
                             <div className={styles.teamMemberName}>
-                                {data.team.campusCoLead.name}
+                                {data.team.igLead.name}
                             </div>
                             <div className={styles.teamMemberDesignation}>
-                                Campus Co-Lead
+                                IG Manager
                             </div>
                         </div>
                     </div>
                     <div className={`${styles.team} ${styles.team4}`}>
-                        <div className={styles.team1Img}>
-                            <img
-                                className={styles.teamImageIndividual}
-                                src={data.team.treasurer.image}
-                                loading="lazy"
-                            />
-                        </div>
-                        <div className={styles.teamNameDesignation}>
-                            <div className={styles.teamMemberName}>
-                                {data.team.treasurer.name}
-                            </div>
-                            <div className={styles.teamMemberDesignation}>
-                                Treasurer
-                            </div>
-                        </div>
-                    </div>
-                    <div className={`${styles.team} ${styles.team5}`}>
-                        <div className={styles.team1Img}>
-                            <img
-                                className={styles.teamImageIndividual}
-                                src={data.team.technicalLead.image}
-                                loading="lazy"
-                            />
-                        </div>
-                        <div className={styles.teamNameDesignation}>
-                            <div className={styles.teamMemberName}>
-                                {data.team.technicalLead.name}
-                            </div>
-                            <div className={styles.teamMemberDesignation}>
-                                Technical Lead
-                            </div>
-                        </div>
-                    </div>
-                    <div className={`${styles.team} ${styles.team6}`}>
-                        <div className={styles.team1Img}>
-                            <img
-                                className={styles.teamImageIndividual}
-                                src={data.team.mediaLead.image}
-                                loading="lazy"
-                            />
-                        </div>
-                        <div className={styles.teamNameDesignation}>
-                            <div className={styles.teamMemberName}>
-                                {data.team.mediaLead.name}
-                            </div>
-                            <div className={styles.teamMemberDesignation}>
-                                Media Lead
-                            </div>
-                        </div>
-                    </div>
-                    <div className={`${styles.team} ${styles.team7}`}>
-                        <div className={styles.team1Img}>
-                            <img
-                                className={styles.teamImageIndividual}
-                                src={data.team.contentLead.image}
-                                loading="lazy"
-                            />
-                        </div>
-                        <div className={styles.teamNameDesignation}>
-                            <div className={styles.teamMemberName}>
-                                {data.team.contentLead.name}
-                            </div>
-                            <div className={styles.teamMemberDesignation}>
-                                Content Lead
-                            </div>
-                        </div>
-                    </div>
-                    <div className={`${styles.team} ${styles.team8}`}>
-                        <div className={styles.team1Img}>
-                            <img
-                                className={styles.teamImageIndividual}
-                                src={data.team.operationLead.image}
-                                loading="lazy"
-                            />
-                        </div>
-                        <div className={styles.teamNameDesignation}>
-                            <div className={styles.teamMemberName}>
-                                {data.team.operationLead.name}
-                            </div>
-                            <div className={styles.teamMemberDesignation}>
-                                Operation Lead
-                            </div>
-                        </div>
-                    </div>
-                </div>
+            <div className={styles.team1Img}>
+              <img
+                className={styles.teamImageIndividual}
+                src={data.team.operationLead.image}
+                loading="lazy"
+              />
+            </div>
+            <div className={styles.teamNameDesignation}>
+              <div className={styles.teamMemberName}>
+                {data.team.operationLead.name}
+              </div>
+              <div className={styles.teamMemberDesignation}>Operation Lead</div>
+            </div>
+          </div>
+          <div className={`${styles.team} ${styles.team5}`}>
+            <div className={styles.team1Img}>
+              <img
+                className={styles.teamImageIndividual}
+                src={data.team.technicalLead.image}
+                loading="lazy"
+              />
+            </div>
+            <div className={styles.teamNameDesignation}>
+              <div className={styles.teamMemberName}>
+                {data.team.technicalLead.name}
+              </div>
+              <div className={styles.teamMemberDesignation}>Technical Lead</div>
+            </div>
+          </div>
+          <div className={`${styles.team} ${styles.team6}`}>
+            <div className={styles.team1Img}>
+              <img
+                className={styles.teamImageIndividual}
+                src={data.team.mediaLead.image}
+                loading="lazy"
+              />
+            </div>
+            <div className={styles.teamNameDesignation}>
+              <div className={styles.teamMemberName}>
+                {data.team.mediaLead.name}
+              </div>
+              <div className={styles.teamMemberDesignation}>Creative Lead</div>
+            </div>
+          </div>
+          <div className={`${styles.team} ${styles.team7}`}>
+            <div className={styles.team1Img}>
+              <img
+                className={styles.teamImageIndividual}
+                src={data.team.marketingLead.image}
+                loading="lazy"
+              />
             </div>
+            <div className={styles.teamNameDesignation}>
+              <div className={styles.teamMemberName}>
+                {data.team.marketingLead.name}
+              </div>
+              <div className={styles.teamMemberDesignation}>
+                Marketing Lead
+              </div>
+            </div>
+          </div>
+          <div className={`${styles.team} ${styles.team8}`}>
+            <div className={styles.team1Img}>
+              <img
+                className={styles.teamImageIndividual}
+                src={data.team.communityLead.image}
+                loading="lazy"
+              />
+            </div>
+            <div className={styles.teamNameDesignation}>
+              <div className={styles.teamMemberName}>
+                {data.team.communityLead.name}
+              </div>
+              <div className={styles.teamMemberDesignation}>Community Lead</div>
+            </div>
+          </div>
+          <div className={`${styles.team} ${styles.team9}`}>
+            <div className={styles.team1Img}>
+              <img
+                className={styles.teamImageIndividual}
+                src={data.team.contentLead.image}
+                loading="lazy"
+              />
+            </div>
+            <div className={styles.teamNameDesignation}>
+              <div className={styles.teamMemberName}>
+                {data.team.contentLead.name}
+              </div>
+              <div className={styles.teamMemberDesignation}>Content Lead</div>
+            </div>
+          </div>
+
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default Team;
\ No newline at end of file
diff --git a/src/Components/TeamMember/TeamMember.module.css b/src/Components/TeamMember/TeamMember.module.css
new file mode 100644
index 0000000..ca63f1c
--- /dev/null
+++ b/src/Components/TeamMember/TeamMember.module.css
@@ -0,0 +1,762 @@
+.linkTreeWrapper {
+    min-height: 100vh;
+    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
+    width: 100%;
+    margin: 0;
+    padding: 15px;
+    background: #242124;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.container {
+    width: 100%;
+    max-width: 360px;
+    margin: 0 auto;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.backButton {
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.backButton a {
+    color: rgba(255, 255, 255, 0.9);
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 10px 20px;
+    border-radius: 25px;
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(15px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.backButton a:hover {
+    background: rgba(255, 255, 255, 0.25);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+/* Profile Section - Updated for consistency */
+.profileSection {
+    text-align: center;
+    margin-bottom: 12px;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 14px;
+    padding: 16px 14px;
+    backdrop-filter: blur(20px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.profileImage {
+    margin: 0 auto 14px auto;
+    width: 95px;
+    height: 95px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    border: none;
+    box-shadow: none;
+    overflow: hidden;
+}
+
+.profileImage img {
+    width: 88px;
+    height: 88px;
+    border-radius: 50%;
+    object-fit: cover;
+    object-position: center center;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: block;
+}
+
+.profileImage:hover img {
+    transform: scale(1.05);
+}
+
+.memberName {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #333;
+    margin-bottom: 10px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    line-height: 1.2;
+}
+
+.memberRole {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #667eea;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    position: relative;
+}
+
+.memberRole::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 3px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 2px;
+}
+
+.memberBio {
+    font-size: 1rem;
+    line-height: 1.7;
+    color: #555;
+    margin: 0;
+    text-align: center;
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Information Section */
+.infoSection {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 14px;
+    padding: 16px 14px;
+    margin-bottom: 12px;
+    backdrop-filter: blur(20px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.infoItem {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+    text-align: left;
+    gap: 4px;
+}
+
+.infoItem:last-child {
+    border-bottom: none;
+}
+
+.infoItem:hover {
+    background: rgba(102, 126, 234, 0.05);
+    margin: 0 -12px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-radius: 8px;
+}
+
+.infoLabel {
+    font-weight: 600;
+    color: #333;
+    font-size: 0.85rem;
+    min-width: auto;
+    text-align: left;
+}
+
+.infoValue {
+    color: #555;
+    font-weight: 500;
+    text-align: right;
+    flex: 1;
+    margin-left: 0;
+    font-size: 0.85rem;
+}
+
+.emailLink, .phoneLink {
+    color: #667eea;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.emailLink:hover, .phoneLink:hover {
+    color: #764ba2;
+    text-decoration: underline;
+}
+
+/* Action Section */
+.actionSection {
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.composeEmailBtn {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 32px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    text-decoration: none;
+    border-radius: 50px;
+    font-weight: 600;
+    font-size: 1rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+.composeEmailBtn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
+    background: linear-gradient(135deg, #5a6fd8, #6a42a0);
+}
+
+.composeEmailBtn svg {
+    font-size: 1.2rem;
+}
+
+/* Removed social links section - replaced with info section above */
+
+/* Removed custom links section - replaced with info section above */
+
+/* Branding Section */
+.brandingSection {
+    text-align: center;
+    padding: 24px;
+    background: rgba(255, 255, 255, 0.12);
+    border-radius: 20px;
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.brandingSection:hover {
+    transform: translateY(-2px);
+    background: rgba(255, 255, 255, 0.18);
+}
+
+.brandingSection p {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.9rem;
+    margin: 0 0 16px 0;
+    font-weight: 500;
+}
+
+.brandLink {
+    display: inline-block;
+    padding: 12px 24px;
+    background: rgba(255, 255, 255, 0.25);
+    color: white;
+    text-decoration: none;
+    border-radius: 25px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.brandLink:hover {
+    background: rgba(255, 255, 255, 0.35);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+/* Desktop Enhancements */
+@media (min-width: 1024px) {
+    .linkTreeWrapper {
+        padding: 40px;
+        align-items: center;
+        min-height: 100vh;
+        min-height: 100dvh;
+    }
+    
+    .container {
+        max-width: 520px;
+    }
+    
+    .profileSection {
+        padding: 20px 16px;
+        margin-bottom: 16px;
+        border-radius: 14px;
+    }
+    
+    .profileImage img {
+        width: 160px;
+        height: 160px;
+    }
+    
+    .memberName {
+        font-size: 2.2rem;
+    }
+    
+    .memberRole {
+        font-size: 1.2rem;
+    }
+    
+    .memberBio {
+        font-size: 1.05rem;
+    }
+    
+    .socialLinks {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+    }
+    
+    .socialLink {
+        padding: 16px 20px;
+        font-size: 1rem;
+    }
+    
+    .customLink {
+        padding: 28px;
+    }
+    
+    .linkContent h4 {
+        font-size: 1.2rem;
+    }
+    
+    .linkContent p {
+        font-size: 0.95rem;
+    }
+    
+    .socialLinksSection,
+    .customLinksSection {
+        margin-bottom: 40px;
+    }
+    
+    .backButton a {
+        padding: 12px 24px;
+        font-size: 15px;
+    }
+}
+
+/* Large Desktop */
+@media (min-width: 1440px) {
+    .container {
+        max-width: 580px;
+    }
+    
+    .profileSection {
+        padding: 20px 16px;
+        border-radius: 14px;
+        margin-bottom: 16px;
+    }
+    
+    .profileImage img {
+        width: 180px;
+        height: 180px;
+    }
+    
+    .memberName {
+        font-size: 2.4rem;
+    }
+    
+    .socialLinks {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+/* Tablet Responsiveness */
+@media (max-width: 1023px) and (min-width: 769px) {
+    .container {
+        max-width: 500px;
+    }
+    
+    .socialLinks {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 14px;
+    }
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+    .linkTreeWrapper {
+        padding: 15px;
+        align-items: center;
+        min-height: 100vh;
+        min-height: 100dvh;
+    }
+    
+    .container {
+        max-width: 100%;
+    }
+    
+    .profileSection {
+        padding: 20px 16px;
+        margin-bottom: 16px;
+        border-radius: 14px;
+    }
+    
+    .profileImage img {
+        width: 120px;
+        height: 120px;
+    }
+    
+    .memberName {
+        font-size: 1.7rem;
+    }
+    
+    .memberRole {
+        font-size: 1rem;
+    }
+    
+    .infoSection {
+        padding: 20px 16px;
+        margin-bottom: 16px;
+    }
+    
+    .infoItem {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 12px 0;
+    }
+    
+    .infoLabel {
+        font-size: 0.9rem;
+        margin-bottom: 4px;
+        color: #667eea;
+        font-weight: 700;
+    }
+    
+    .infoValue {
+        margin-left: 0;
+        text-align: left;
+        font-size: 0.95rem;
+    }
+    
+    .composeEmailBtn {
+        padding: 14px 28px;
+        font-size: 0.95rem;
+    }
+    
+    .memberBio {
+        font-size: 0.95rem;
+    }
+    
+    .socialLinks {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+    }
+    
+    .socialLink {
+        padding: 12px 14px;
+        font-size: 0.9rem;
+    }
+    
+    .customLink {
+        padding: 18px;
+    }
+    
+    .linkContent h4 {
+        font-size: 1.05rem;
+    }
+    
+    .linkContent p {
+        font-size: 0.85rem;
+    }
+    
+    .socialLinksSection,
+    .customLinksSection {
+        margin-bottom: 30px;
+    }
+}
+
+@media (max-width: 480px) {
+    .linkTreeWrapper {
+        padding: 12px;
+        align-items: center;
+        min-height: 100vh;
+        min-height: 100dvh;
+    }
+    
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .profileSection {
+        padding: 20px 16px;
+        text-align: center;
+        border-radius: 14px;
+        margin-bottom: 16px;
+    }
+    
+    .profileImage img {
+        width: 100px;
+        height: 100px;
+    }
+    
+    .memberName {
+        font-size: 1.5rem;
+        text-align: center;
+    }
+    
+    .memberRole {
+        font-size: 0.95rem;
+        letter-spacing: 0.5px;
+        text-align: center;
+    }
+    
+    .memberBio {
+        font-size: 0.9rem;
+        line-height: 1.6;
+        text-align: center;
+    }
+    
+    .infoSection {
+        width: 100%;
+    }
+    
+    .infoItem {
+        justify-content: space-between;
+        flex-direction: row;
+        text-align: left;
+        gap: 4px;
+    }
+    
+    .infoLabel {
+        text-align: left;
+    }
+    
+    .infoValue {
+        text-align: right;
+    }
+    
+    .socialSection {
+        width: 100%;
+    }
+    
+    .socialTitle {
+        text-align: center;
+    }
+    
+    .socialLinks {
+        grid-template-columns: 1fr;
+        gap: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .socialLink {
+        padding: 14px 16px;
+        border-radius: 14px;
+        width: 100%;
+        max-width: 280px;
+        justify-content: center;
+    }
+    
+    .customLink {
+        padding: 16px;
+        border-radius: 16px;
+    }
+    
+    .socialLinksSection h3,
+    .customLinksSection h3 {
+        font-size: 1.05rem;
+        margin-bottom: 18px;
+    }
+    
+    .backButton a {
+        padding: 8px 16px;
+        font-size: 13px;
+    }
+    
+    .brandingSection {
+        padding: 20px;
+    }
+}
+
+/* Hover Effects for Desktop */
+@media (hover: hover) and (pointer: fine) {
+    .profileSection {
+        cursor: default;
+    }
+    
+    .socialLink:hover {
+        transform: translateY(-4px) scale(1.02);
+    }
+    
+    .customLink:hover {
+        transform: translateY(-4px) scale(1.01);
+    }
+    
+    .profileImage img:hover {
+        transform: scale(1.08) rotate(2deg);
+    }
+}
+
+/* Social Links Section */
+.socialSection {
+    margin-bottom: 12px;
+    margin-top: 0px;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 14px;
+    padding: 14px;
+    backdrop-filter: blur(20px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.socialSection:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+}
+
+.socialTitle {
+    text-align: center;
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: #333;
+    margin-bottom: 10px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.socialLinks {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    justify-content: center;
+}
+
+.socialLink {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px;
+    background: rgba(255, 255, 255, 0.8);
+    border: 2px solid transparent;
+    border-radius: 50%;
+    text-decoration: none;
+    color: #333;
+    font-weight: 600;
+    font-size: 1.2rem;
+    width: 48px;
+    height: 48px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+}
+
+.socialLink::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    transition: left 0.5s ease;
+}
+
+.socialLink:hover::before {
+    left: 100%;
+}
+
+.socialLink:hover {
+    transform: translateY(-4px) scale(1.05);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+    border-color: var(--social-color, #667eea);
+    background: var(--social-color, #667eea);
+}
+
+.socialLink svg {
+    font-size: 1.3rem;
+    color: var(--social-color, #667eea);
+    transition: all 0.3s ease;
+}
+
+.socialLink:hover svg {
+    transform: scale(1.15);
+    color: white;
+}
+
+/* Specific social platform styles */
+.socialLink[href*="instagram"] {
+    --social-color: #E4405F;
+}
+
+.socialLink[href*="linkedin"] {
+    --social-color: #0A66C2;
+}
+
+.socialLink[href*="github"] {
+    --social-color: #333;
+}
+
+.socialLink[href*="mulearn"] {
+    --social-color: #F59E0B;
+}
+
+/* Loading and Error States */
+.loadingState,
+.errorState {
+    text-align: center;
+    padding: 60px 20px;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.loadingState h2,
+.errorState h2 {
+    margin: 0 0 20px;
+    font-size: 24px;
+    font-weight: 600;
+}
+
+.errorState p {
+    margin: 0 0 20px;
+    font-size: 16px;
+    opacity: 0.8;
+}
+
+.errorState a {
+    color: rgba(255, 255, 255, 0.9);
+    text-decoration: none;
+    font-size: 16px;
+    padding: 10px 20px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 25px;
+    transition: all 0.3s ease;
+}
+
+.errorState a:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+    
+    .profileImage img:hover {
+        transform: none;
+    }
+    
+    .socialLink:hover,
+    .customLink:hover {
+        transform: none;
+    }
+}
\ No newline at end of file
diff --git a/src/Components/TeamMember/TeamMember.tsx b/src/Components/TeamMember/TeamMember.tsx
new file mode 100644
index 0000000..1862330
--- /dev/null
+++ b/src/Components/TeamMember/TeamMember.tsx
@@ -0,0 +1,250 @@
+import { useParams, Navigate, Link } from "react-router-dom";
+import { useMemo, useState, useRef } from "react";
+import styles from "./TeamMember.module.css";
+import { useTeamMembers } from "../../hooks/useTeamMembers";
+import { isValidTeamRoute, getMemberNameFromPath } from "../../data/staticTeamRoutes";
+import { FaInstagram, FaLinkedinIn, FaGithub, FaExternalLinkAlt } from "react-icons/fa";
+import MulearnUCEKLogo from "../../assets/images/MulearnUCEK.png";
+import Spinner from "../Spinner/Spinner";
+
+const TeamMember = () => {
+    const { memberName } = useParams<{ memberName: string }>();
+    const { teamMembers, loading, error } = useTeamMembers();
+    const [imageError, setImageError] = useState(false);
+    const imageRetryCount = useRef(0);
+    const MAX_RETRIES = 3;
+    
+    // Check if the route is allowed
+    const isValidRoute = useMemo(() => {
+        return memberName ? isValidTeamRoute(memberName) : false;
+    }, [memberName]);
+    
+    // If route is not in the allowed list, redirect immediately
+    if (!isValidRoute && !loading) {
+        return <Navigate to="/#team" replace />;
+    }
+    
+    // Get the full member name from the route mapping
+    const fullMemberName = useMemo(() => {
+        return memberName ? getMemberNameFromPath(memberName) : undefined;
+    }, [memberName]);
+    
+    // Memoize the member lookup to prevent unnecessary re-renders
+    // Match by exact full name to handle duplicates
+    const member = useMemo(() => {
+        if (!fullMemberName) return undefined;
+        
+        // Find by exact name match (case-insensitive)
+        const found = teamMembers.find(m => 
+            m.name.toLowerCase().trim() === fullMemberName.toLowerCase().trim()
+        );
+        
+        return found;
+    }, [teamMembers, fullMemberName]);
+    
+    // Only log once when component mounts or member changes
+    useMemo(() => {
+        if (memberName) {
+            console.log('Route path:', memberName);
+            console.log('Looking for member name:', fullMemberName);
+            console.log('Found member:', member);
+            if (member) {
+                console.log('Member MuID:', member.muId);
+                console.log('Member full data:', JSON.stringify(member, null, 2));
+            }
+        }
+    }, [memberName, fullMemberName, member]);
+    
+    // Show loading state
+    if (loading) {
+        return (
+            <div className={styles.linkTreeWrapper}>
+                <Spinner size={60} color="#667eea" />
+            </div>
+        );
+    }
+    
+    // Show error state
+    if (error) {
+        return (
+            <div className={styles.linkTreeWrapper}>
+                <div className={styles.container}>
+                    <div className={styles.errorState}>
+                        <h2>Error loading team data</h2>
+                        <p>{error}</p>
+                        <a href="/#team">← Back to Team</a>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    
+    // If member not found, show debug info instead of redirecting
+    if (!member) {
+        return (
+            <div className={styles.linkTreeWrapper}>
+                <div className={styles.container}>
+                    <div className={styles.errorState}>
+                        <h2>Member not found</h2>
+                        <p>Looking for: {memberName}</p>
+                        <p>Available IDs: {teamMembers.map(m => m.id).join(', ')}</p>
+                        <a href="/#team">← Back to Team</a>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    
+    return (
+        <div className={styles.linkTreeWrapper}>
+            <div className={styles.container}>
+                {/* MuLearn UCEK Logo */}
+                <div style={{ textAlign: 'center', marginBottom: '10px', marginTop: '0' }}>
+                    <Link to="/" style={{ display: 'inline-block' }}>
+                        <img 
+                            src={MulearnUCEKLogo} 
+                            alt="μLearn UCEK" 
+                            style={{ 
+                                height: '50px',
+                                width: 'auto',
+                                cursor: 'pointer'
+                            }}
+                        />
+                    </Link>
+                </div>
+
+                {/* Profile and Member Information */}
+                <div className={styles.infoSection}>
+                    <div style={{ textAlign: 'center', paddingBottom: '0' }}>
+                        <div className={styles.profileImage}>
+                            {!imageError ? (
+                                <img 
+                                    src={`/${member.image.replace(/\s+/g, '%20')}`}
+                                    alt={member.name}
+                                    loading="lazy"
+                                    style={{ width: '88px', height: '88px' }}
+                                    onError={(e) => {
+                                        imageRetryCount.current += 1;
+                                        console.log(`Image load attempt ${imageRetryCount.current} failed for:`, member.image);
+                                        
+                                        if (imageRetryCount.current < MAX_RETRIES) {
+                                            // Retry with different URL format
+                                            const target = e.currentTarget;
+                                            setTimeout(() => {
+                                                target.src = `/${member.image}`;
+                                            }, 500);
+                                        } else {
+                                            console.log('Max retries reached. Stopping image load attempts.');
+                                            setImageError(true);
+                                        }
+                                    }}
+                                />
+                            ) : (
+                                <div style={{ 
+                                    width: '88px', 
+                                    height: '88px', 
+                                    borderRadius: '50%', 
+                                    background: '#242124',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    color: 'white',
+                                    fontSize: '32px',
+                                    fontWeight: 'bold'
+                                }}>
+                                    {member.name?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2) || '??'}
+                                </div>
+                            )}
+                        </div>
+                        <h1 style={{ fontSize: '1.4rem', margin: '8px 0 4px' }}>{member.name}</h1>
+                        {member.muId && (
+                            <p style={{ fontSize: '0.75rem', color: '#666', fontWeight: '500', margin: '0 0 8px 0' }}>
+                                {member.muId}
+                            </p>
+                        )}
+                        <div style={{ display: 'flex', gap: '8px', justifyContent: 'center', marginTop: '12px' }}>
+                            {member.team && member.team !== 'μ' && (
+                                <span style={{ 
+                                    fontSize: '0.85rem', 
+                                    color: '#555', 
+                                    fontWeight: '600', 
+                                    padding: '6px 16px',
+                                    background: 'rgba(102, 126, 234, 0.1)',
+                                    borderRadius: '20px',
+                                    border: '1px solid rgba(102, 126, 234, 0.2)'
+                                }}>
+                                    {member.team}
+                                </span>
+                            )}
+                            {member.role && (
+                                <span style={{ 
+                                    fontSize: '0.85rem', 
+                                    color: '#555', 
+                                    fontWeight: '600', 
+                                    padding: '6px 16px',
+                                    background: 'rgba(118, 75, 162, 0.1)',
+                                    borderRadius: '20px',
+                                    border: '1px solid rgba(118, 75, 162, 0.2)'
+                                }}>
+                                    {member.role}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Social Links Section */}
+                {member.socialLinks && member.socialLinks.length > 0 && (
+                    <div className={styles.socialSection}>
+                        <h3 className={styles.socialTitle}>Connect with me</h3>
+                        <div className={styles.socialLinks}>
+                            {member.socialLinks.map((social, index) => {
+                                let IconComponent = FaExternalLinkAlt;
+                                
+                                // Choose appropriate icon based on platform
+                                switch (social.icon.toLowerCase()) {
+                                    case 'instagram':
+                                        IconComponent = FaInstagram;
+                                        break;
+                                    case 'linkedin':
+                                        IconComponent = FaLinkedinIn;
+                                        break;
+                                    case 'github':
+                                        IconComponent = FaGithub;
+                                        break;
+                                    case 'mulearn':
+                                        IconComponent = FaExternalLinkAlt;
+                                        break;
+                                    default:
+                                        IconComponent = FaExternalLinkAlt;
+                                }
+                                
+                                return (
+                                    <a 
+                                        key={index}
+                                        href={social.url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className={styles.socialLink}
+                                        style={{ '--social-color': social.color } as React.CSSProperties}
+                                    >
+                                        <IconComponent />
+                                    </a>
+                                );
+                            })}
+                        </div>
+                    </div>
+                )}
+
+                {/* MuLearn UCEK Link */}
+                <div style={{ textAlign: 'center', marginTop: '4px' }}>
+                    <a href="/#home" className={styles.brandLink}>
+                        μLearn UCEK
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamMember;
\ No newline at end of file
diff --git a/src/assets/images/MulearnUCEK.png b/src/assets/images/MulearnUCEK.png
new file mode 100644
index 0000000..8ff524a
Binary files /dev/null and b/src/assets/images/MulearnUCEK.png differ
diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico
new file mode 100644
index 0000000..a1d48ee
Binary files /dev/null and b/src/assets/images/favicon.ico differ
diff --git a/src/data/staticTeamRoutes.ts b/src/data/staticTeamRoutes.ts
new file mode 100644
index 0000000..ddee825
--- /dev/null
+++ b/src/data/staticTeamRoutes.ts
@@ -0,0 +1,56 @@
+// Static team member routes mapping
+// Map route paths to member names for lookup
+
+export interface TeamRoute {
+  path: string;        // URL path (e.g., "chethas")
+  memberName: string;  // Full name to match in the sheet (exact match)
+}
+
+// Define your allowed team member routes here
+// Use full names for exact matching to handle duplicate names
+export const teamRoutes: TeamRoute[] = [
+  { path: "amarnath", memberName: "Amarnath Sujith" },
+  { path: "chethas", memberName: "Chethas L Pramod" },
+  { path: "aswath", memberName: "Aswath S A" },
+  { path: "adithya", memberName: "Adithya R" },
+  { path: "ananya", memberName: "Ananya K" },
+  { path: "mohammed-hafeez", memberName: "Mohammed Hafeez" },
+  { path: "mihirima", memberName: "Mihirima A R" },
+  { path: "amna", memberName: "Amna Fathima S" },
+  { path: "niveditha", memberName: "Niveditha Gopakumar" },
+  { path: "bhagyashree", memberName: "Bhagyasree" },
+  { path: "anjana", memberName: "Anjana MS" },
+  { path: "anza", memberName: "Anza S" },
+  { path: "akshay", memberName: "Akshay G" },
+  { path: "aneez", memberName: "Aneez Rahuman M" },
+  { path: "arjun-tk", memberName: "Arjun TK" },
+  { path: "arjun-g", memberName: "Arjun G" },
+  { path: "teny", memberName: "Teny Catherine Tony" },
+  { path: "sooryakanth", memberName: "Sooryakanth S" },
+  { path: "mohammed-irfan", memberName: "Mohammed Irfan P" },
+  { path: "fathima", memberName: "Fathima S" },
+  { path: "adwaith", memberName: "Adwaith S" },
+  { path: "pranav", memberName: "Pranav g nath" },
+  { path: "sruthy", memberName: "Sruthy N S" },
+  { path: "theertha", memberName: "Theertha. S. Nair" },
+  { path: "midhun", memberName: "Midhun Das" },
+  { path: "aadil", memberName: "Aadil Mohamed A" },
+  { path: "sanjay", memberName: "Sanjay krishna" },
+  { path: "richard", memberName: "Richard S" },
+  { path: "vaishakh", memberName: "Vaishakh V S" },
+  { path: "abhishek", memberName: "Abhishek P" },
+  { path: "aswin-s", memberName: "Aswin S" },
+  { path: "sreerag", memberName: "Sreerag Satheesh S" },
+  { path: "adarsh", memberName: "Adarsh Dev M.R." },
+];
+
+// Helper function to check if a route is allowed
+export const isValidTeamRoute = (path: string): boolean => {
+  return teamRoutes.some(route => route.path === path);
+};
+
+// Helper function to get member name from route path
+export const getMemberNameFromPath = (path: string): string | undefined => {
+  const route = teamRoutes.find(r => r.path === path);
+  return route?.memberName;
+};
diff --git a/src/data/teamData.ts b/src/data/teamData.ts
new file mode 100644
index 0000000..0856852
--- /dev/null
+++ b/src/data/teamData.ts
@@ -0,0 +1,27 @@
+export interface SocialLink {
+  name: string;
+  url: string;
+  icon: string; // Icon name or component
+  color?: string; // Brand color
+}
+
+export interface TeamMember {
+  id: string;
+  name: string;
+  role: string;
+  image: string;
+  team: string;
+  email: string;
+  gender: string;
+  bio?: string;
+  muId?: string; // MuLearn ID
+  socialLinks?: SocialLink[];
+  customLinks?: {
+    title: string;
+    url: string;
+    description?: string;
+  }[];
+}
+
+// Team members data is now loaded dynamically from Google Sheets
+// This file only exports the TypeScript interfaces
\ No newline at end of file
diff --git a/src/hooks/useTeamMembers.ts b/src/hooks/useTeamMembers.ts
new file mode 100644
index 0000000..d67fdd9
--- /dev/null
+++ b/src/hooks/useTeamMembers.ts
@@ -0,0 +1,115 @@
+import { useState, useEffect } from 'react';
+import { TeamMember } from '../data/teamData';
+import { getTeamMembers } from '../services/googleSheets';
+
+interface UseTeamMembersReturn {
+  teamMembers: TeamMember[];
+  loading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+}
+
+// Cache the team members data globally
+let cachedTeamMembers: TeamMember[] | null = null;
+let cachePromise: Promise<TeamMember[]> | null = null;
+
+export const useTeamMembers = (): UseTeamMembersReturn => {
+  const [teamMembers, setTeamMembers] = useState<TeamMember[]>(cachedTeamMembers || []);
+  const [loading, setLoading] = useState(!cachedTeamMembers);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = async () => {
+    try {
+      // Only set loading to true if we don't have cached data
+      if (!cachedTeamMembers) {
+        setLoading(true);
+      }
+      setError(null);
+      
+      // Try to fetch from Google Sheets first (NO FALLBACK)
+      const members = await getTeamMembers(false);
+      cachedTeamMembers = members;
+      setTeamMembers(members);
+      console.log('Successfully loaded team members from Google Sheets');
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch team members';
+      setError(errorMessage);
+      console.error('Error fetching team members:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const refetch = async () => {
+    setLoading(true);
+    await fetchData();
+  };
+
+  useEffect(() => {
+    let mounted = true;
+    
+    // If we already have cached data, use it immediately
+    if (cachedTeamMembers) {
+      setTeamMembers(cachedTeamMembers);
+      setLoading(false);
+      return;
+    }
+
+    // If cache promise exists, reuse it
+    if (cachePromise) {
+      cachePromise
+        .then(members => {
+          if (mounted) {
+            setTeamMembers(members);
+            setLoading(false);
+          }
+        })
+        .catch(err => {
+          if (mounted) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to fetch team members';
+            setError(errorMessage);
+            setLoading(false);
+            console.error('Google Sheets fetch failed:', err);
+          }
+        });
+      return;
+    }
+    
+    const loadData = async () => {
+      try {
+        // Try to fetch from Google Sheets (NO FALLBACK)
+        cachePromise = getTeamMembers(false);
+        const members = await cachePromise;
+        cachedTeamMembers = members;
+        
+        if (mounted) {
+          setTeamMembers(members);
+          setLoading(false);
+          console.log('Successfully loaded team members from Google Sheets');
+        }
+      } catch (err) {
+        if (mounted) {
+          const errorMessage = err instanceof Error ? err.message : 'Failed to fetch team members';
+          setError(errorMessage);
+          setLoading(false);
+          console.error('Google Sheets fetch failed:', err);
+        }
+      } finally {
+        cachePromise = null;
+      }
+    };
+
+    loadData();
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  return {
+    teamMembers,
+    loading,
+    error,
+    refetch
+  };
+};
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 9f9ac84..d2bc64c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 import App from "./App.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <App />
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
     </React.StrictMode>
 );
diff --git a/src/services/googleSheets.ts b/src/services/googleSheets.ts
new file mode 100644
index 0000000..9d62ae3
--- /dev/null
+++ b/src/services/googleSheets.ts
@@ -0,0 +1,171 @@
+import { TeamMember, SocialLink } from '../data/teamData';
+
+// Direct Google Sheets URL (published as CSV)
+const SPREADSHEET_ID = '1acu2AnsIu-4I76I-Pkg0xwTQV_mSQMlrft-oZ8fpJmA';
+const SHEET_GID = '0'; // First sheet, change if needed
+const SHEET_URL = `https://docs.google.com/spreadsheets/d/${SPREADSHEET_ID}/gviz/tq?tqx=out:csv&gid=${SHEET_GID}`;
+
+/**
+ * Parse CSV data
+ */
+const parseCSV = (text: string): string[][] => {
+  const rows: string[][] = [];
+  let currentRow: string[] = [];
+  let currentCell = '';
+  let insideQuotes = false;
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    const nextChar = text[i + 1];
+
+    if (char === '"' && insideQuotes && nextChar === '"') {
+      currentCell += '"';
+      i++; // Skip next quote
+    } else if (char === '"') {
+      insideQuotes = !insideQuotes;
+    } else if (char === ',' && !insideQuotes) {
+      currentRow.push(currentCell);
+      currentCell = '';
+    } else if (char === '\n' && !insideQuotes) {
+      currentRow.push(currentCell);
+      rows.push(currentRow);
+      currentRow = [];
+      currentCell = '';
+    } else if (char === '\r' && nextChar === '\n' && !insideQuotes) {
+      currentRow.push(currentCell);
+      rows.push(currentRow);
+      currentRow = [];
+      currentCell = '';
+      i++; // Skip \n
+    } else {
+      currentCell += char;
+    }
+  }
+
+  // Push last cell and row if exists
+  if (currentCell || currentRow.length > 0) {
+    currentRow.push(currentCell);
+    rows.push(currentRow);
+  }
+
+  return rows;
+};
+
+/**
+ * Fetches team members from Google Sheets
+ * Sheet structure: ID, Name, Batch, Gender, Position, Team, Added, Email, Phone, Photo, Instagram, LinkedIn, Github, MuID
+ * @param forceRefresh - If true, bypasses cache and fetches fresh data (reserved for future use)
+ * @returns Array of team members
+ */
+export const getTeamMembers = async (forceRefresh: boolean = false): Promise<TeamMember[]> => {
+  // forceRefresh parameter reserved for future cache implementation
+  void forceRefresh;
+
+  try {
+    const response = await fetch(SHEET_URL, {
+      method: 'GET',
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
+    }
+
+    const csvText = await response.text();
+    const rows = parseCSV(csvText);
+    
+    // Debug: Log the header row to see column structure
+    if (rows.length > 0) {
+      console.log('CSV Headers:', rows[0]);
+      console.log('Number of columns:', rows[0].length);
+    }
+    
+    if (rows.length < 2) {
+      throw new Error('No data found in the sheet');
+    }
+
+    // Parse the data (skip headers row)
+    // Headers: ID, Name, Batch, Gender, Position, Team, Added, Email, Phone, Photo, Instagram, LinkedIn, Github, MuID
+    const dataRows = rows.slice(1);
+
+    // Map the rows to TeamMember objects
+    const teamMembers: TeamMember[] = dataRows
+      .filter(row => row.length > 0 && row[0]?.trim()) // Filter out empty rows
+      .map(row => {
+        const socialLinks: SocialLink[] = [];
+        
+        // Instagram (column 10, index 10)
+        if (row[10]?.trim()) {
+          const instagramValue = row[10].trim();
+          socialLinks.push({
+            name: 'Instagram',
+            url: instagramValue.startsWith('http') ? instagramValue : `https://instagram.com/${instagramValue.replace('@', '')}`,
+            icon: 'instagram',
+            color: '#E4405F'
+          });
+        }
+        
+        // LinkedIn (column 11, index 11)
+        if (row[11]?.trim()) {
+          const linkedinValue = row[11].trim();
+          socialLinks.push({
+            name: 'LinkedIn',
+            url: linkedinValue.startsWith('http') ? linkedinValue : `https://linkedin.com/in/${linkedinValue}`,
+            icon: 'linkedin',
+            color: '#0077B5'
+          });
+        }
+        
+        // Github (column 12, index 12)
+        if (row[12]?.trim()) {
+          const githubValue = row[12].trim();
+          socialLinks.push({
+            name: 'Github',
+            url: githubValue.startsWith('http') ? githubValue : `https://github.com/${githubValue}`,
+            icon: 'github',
+            color: '#333333'
+          });
+        }
+
+        // Generate ID from name if ID column is empty
+        const id = row[0]?.trim() 
+          ? row[0].trim().toLowerCase().replace(/\s+/g, '-')
+          : row[1]?.trim().toLowerCase().replace(/\s+/g, '-') || '';
+
+        const member: TeamMember = {
+          id: id,
+          name: row[1]?.trim() || '', // Name column (index 1)
+          gender: '', // Gender not fetched
+          role: row[4]?.trim() || '', // Position column (index 4)
+          team: row[5]?.trim() || '', // Team column (index 5)
+          email: '', // Email not fetched
+          image: row[9]?.trim() || '', // Photo column (index 9)
+          muId: row[13]?.trim() || '', // MuID column (index 13)
+          socialLinks: socialLinks,
+        };
+
+        // Debug log for first few members
+        if (dataRows.indexOf(row) < 3) {
+          console.log('Row data:', row);
+          console.log('Member parsed:', member);
+        }
+
+        return member;
+      });
+
+    console.log(`Fetched ${teamMembers.length} team members from Google Sheets`);
+    return teamMembers;
+  } catch (error) {
+    console.error('Error fetching team members from Google Sheets:', error);
+    throw error;
+  }
+};
+
+/**
+ * Validates the Google Sheets configuration
+ */
+export const validateConfig = (): { isValid: boolean; message: string } => {
+  if (!SPREADSHEET_ID) {
+    return { isValid: false, message: 'Spreadsheet ID is not configured' };
+  }
+  return { isValid: true, message: 'Configuration is valid' };
+};
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..29c0269
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}
\ No newline at end of file