diff --git a/package-lock.json b/package-lock.json
index ae30a1b5..d82756a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,7 +86,6 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -1763,7 +1762,6 @@
       "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1773,7 +1771,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1847,7 +1844,6 @@
       "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.3",
         "@typescript-eslint/types": "8.46.3",
@@ -2106,7 +2102,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2446,7 +2441,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -3261,7 +3255,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3322,7 +3315,6 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -7218,7 +7210,6 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -7315,7 +7306,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7325,7 +7315,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -8424,8 +8413,7 @@
       "version": "4.1.16",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
       "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -8487,7 +8475,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8667,7 +8654,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8918,7 +8904,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
       "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -9010,7 +8995,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9264,7 +9248,6 @@
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index d8fa6ccb..bc5c426c 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "preview": "vite preview --host",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
-    "lint:ts": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:ts": "eslint \"src/**/*.{ts,tsx}\"",
     "lint:md": "markdownlint '**/*.md' --ignore-path .prettierignore",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,md}'",
     "format:file": "prettier --write",
diff --git a/src/constants/Header.ts b/src/constants/Header.ts
index 97570c29..421ce430 100644
--- a/src/constants/Header.ts
+++ b/src/constants/Header.ts
@@ -11,7 +11,6 @@ export const navigationData = {
       ],
     },
   },
-
   links: [
     { label: 'News', path: '/news' },
     { label: 'Merchandise', path: '/products' },
@@ -19,4 +18,5 @@ export const navigationData = {
     { label: 'Join Development', path: '/join-development' },
     { label: 'Volunteer', path: '/volunteer' },
   ],
+  linksBefore: [{ label: 'Home', path: '/' }],
 };
diff --git a/src/sections/Header.tsx b/src/sections/Header.tsx
index 85051fa9..fb0c832b 100644
--- a/src/sections/Header.tsx
+++ b/src/sections/Header.tsx
@@ -81,7 +81,7 @@ const Header: React.FC = () => {
               <img
                 src={logo}
                 alt="Sugar Labs"
-                className="h-8 md:h-12 w-auto transition-transform hover:scale-105"
+                className="h-8 md:h-12 w-auto transition-transform "
               />
             </Link>
 
@@ -114,9 +114,19 @@ const Header: React.FC = () => {
                 />
               </div>
             </button>
-
-            {/* Desktop Navigation (visible from lg and up) */}
             <nav className="hidden lg:flex lg:items-center lg:space-x-4">
+              {navigationData.linksBefore.map((link) => (
+                <Link
+                  key={link.label}
+                  to={link.path}
+                  className="px-2 lg:px-2 py-2 text-gray-700 dark:text-gray-200 hover:text-blue-600 font-medium rounded-md
+                            transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800 text-sm lg:text-sm whitespace-nowrap"
+                  onClick={handleNavigation}
+                >
+                  {link.label}
+                </Link>
+              ))}
+              {/* Desktop Navigation (visible from lg and up) */}
               {/* Dropdown menus */}
               {Object.entries(navigationData.dropdowns).map(
                 ([key, dropdown]) => (
@@ -218,6 +228,17 @@ const MobileNavDrawer: React.FC<{
             <div className="flex-1 overflow-y-auto py-2">
               <div className="space-y-4">
                 {/* Dropdown menus */}
+                {navigationData.linksBefore.map((link) => (
+                  <Link
+                    key={link.label}
+                    to={link.path}
+                    onClick={onClose}
+                    className="block px-4 py-2 text-gray-700 dark:text-gray-200 font-medium rounded-lg
+                            hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-blue-600"
+                  >
+                    {link.label}
+                  </Link>
+                ))}
                 {Object.entries(navigationData.dropdowns).map(
                   ([key, dropdown]) => (
                     <div key={key} className="space-y-1 px-2">
@@ -277,6 +298,7 @@ const MobileNavDrawer: React.FC<{
                 )}
 
                 {/* Regular links */}
+
                 {navigationData.links.map((link) => (
                   <Link
                     key={link.label}
diff --git a/src/sections/NavDropdown.tsx b/src/sections/NavDropdown.tsx
index 0749de6e..08e0ebed 100644
--- a/src/sections/NavDropdown.tsx
+++ b/src/sections/NavDropdown.tsx
@@ -26,7 +26,7 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
       onMouseLeave={() => setActive(null)}
     >
       <button
-        className={`px-2 lg:px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-blue-600 font-medium rounded-md
+        className={`px-2 lg:px-3 py-2 text-sm lg:text-sm   text-gray-700 dark:text-gray-200 hover:text-blue-600 font-medium rounded-md cursor-pointer
                   transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center space-x-1
                   ${isActive ? 'text-blue-600 dark:text-blue-400' : ''}`}
         aria-expanded={isActive}
@@ -54,7 +54,7 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 10 }}
             transition={{ duration: 0.2 }}
-            className="absolute left-0 mt-[0.074rem] w-56 rounded-xl bg-white dark:bg-gray-800 shadow-xl ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-10 overflow-hidden"
+            className="absolute left-0 mt-[0.779rem] w-56 rounded-xl bg-white dark:bg-gray-800 shadow-xl ring-1 ring-zinc-300/50 dark:ring-white/20 ring-opacity-5  overflow-hidden"
           >
             <div className="py-2">
               {items.map((item) => (
@@ -66,7 +66,7 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
                           transition-all duration-200 hover:text-blue-600 dark:hover:text-blue-400"
                 >
                   <span
-                    className="w-2 h-2 rounded-full bg-blue-600 opacity-0 group-hover:opacity-100
+                    className="w-2 h-2  rounded-full bg-blue-600 opacity-0 group-hover:opacity-100
                               transition-all duration-200 mr-2 transform scale-0 group-hover:scale-100"
                   />
                   {item.label}