diff --git a/public/fonts/Nunito/Nunito-Bold.ttf b/public/fonts/Nunito/Nunito-Bold.ttf
new file mode 100644
index 0000000..581cdf3
Binary files /dev/null and b/public/fonts/Nunito/Nunito-Bold.ttf differ
diff --git a/public/fonts/Nunito/Nunito-Regular.ttf b/public/fonts/Nunito/Nunito-Regular.ttf
new file mode 100644
index 0000000..61a0f78
Binary files /dev/null and b/public/fonts/Nunito/Nunito-Regular.ttf differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 394f799..c52f0e1 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,19 @@
+@font-face {
+  font-family: 'Nunito';
+  src: url('/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Nunito';
+  src: url('/fonts/Nunito/Nunito-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
 @import "tailwindcss";
 
 
@@ -23,5 +39,5 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'nunito', sans-serif;
 }
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index ec2ce96..d7b31a3 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -1,8 +1,15 @@
-import React from 'react';
+"use client"
+import React, { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
 const Header = () => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
   return (
     <header className="bg-white shadow-sm">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -14,19 +21,20 @@ const Header = () => {
               <Image 
                 src="/images/logo-splash.svg" 
                 alt="3engine Logo" 
-                width={100} height={100}
+                width={100} 
+                height={100}
               />
             </Link>
 
             {/* Main Navigation - Left side */}
             <nav className="hidden md:flex space-x-8">
-              <Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
+              <Link href="/" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
                 Home
               </Link>
-              <Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
+              <Link href="/products" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
                 Products
               </Link>
-              <Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
+              <Link href="/solution" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
                 Solution
               </Link>
             </nav>
@@ -34,28 +42,27 @@ const Header = () => {
 
           {/* Right side navigation */}
           <div className="hidden md:flex items-center space-x-6">
-            <Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
+            <Link href="/partners" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
               Partners
             </Link>
             <a
-                href="https://docs.rootxwire.com/index.html"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium"
+              href="https://docs.rootxwire.com/index.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium"
             >
-                Documentation
+              Documentation
             </a>
-
             <a
-                href="https://3engine.rootxwire.com/auth/login/"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium"
+              href="https://3engine.rootxwire.com/auth/login/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium"
             >
-                Console
+              Console
             </a>
             <Link 
-              href="/" 
+              href="/signup" 
               className="bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
             >
               SignUp
@@ -66,40 +73,92 @@ const Header = () => {
           <div className="md:hidden">
             <button
               type="button"
+              onClick={toggleMobileMenu}
               className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
-              aria-expanded="false"
+              aria-expanded={isMobileMenuOpen}
             >
               <span className="sr-only">Open main menu</span>
-              <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              {/* Hamburger icon when menu is closed */}
+              <svg 
+                className={`${isMobileMenuOpen ? 'hidden' : 'block'} h-6 w-6`} 
+                xmlns="http://www.w3.org/2000/svg" 
+                fill="none" 
+                viewBox="0 0 24 24" 
+                stroke="currentColor" 
+                aria-hidden="true"
+              >
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
               </svg>
+              {/* X icon when menu is open */}
+              <svg 
+                className={`${isMobileMenuOpen ? 'block' : 'hidden'} h-6 w-6`} 
+                xmlns="http://www.w3.org/2000/svg" 
+                fill="none" 
+                viewBox="0 0 24 24" 
+                stroke="currentColor" 
+                aria-hidden="true"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
             </button>
           </div>
         </div>
       </div>
 
-      {/* Mobile menu - you can expand this later */}
-      <div className="md:hidden hidden">
-        <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
-          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
+      {/* Mobile menu */}
+      <div className={`md:hidden ${isMobileMenuOpen ? 'block' : 'hidden'}`}>
+        <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t shadow-lg">
+          <Link 
+            href="/" 
+            className="text-gray-700 hover:text-gray-900 hover:bg-gray-50 block px-3 py-2 text-sm font-medium rounded-md"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
             Home
           </Link>
-          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
+          <Link 
+            href="/products" 
+            className="text-gray-700 hover:text-gray-900 hover:bg-gray-50 block px-3 py-2 text-sm font-medium rounded-md"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
             Products
           </Link>
-          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
+          <Link 
+            href="/solution" 
+            className="text-gray-700 hover:text-gray-900 hover:bg-gray-50 block px-3 py-2 text-sm font-medium rounded-md"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
             Solution
           </Link>
-          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
+          <Link 
+            href="/partners" 
+            className="text-gray-700 hover:text-gray-900 hover:bg-gray-50 block px-3 py-2 text-sm font-medium rounded-md"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
             Partners
           </Link>
-          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
+          <a
+            href="https://docs.rootxwire.com/index.html"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-gray-700 hover:text-gray-900 hover:bg-gray-50 block px-3 py-2 text-sm font-medium rounded-md"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
             Documentation
-          </Link>
-          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
+          </a>
+          <a
+            href="https://3engine.rootxwire.com/auth/login/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-gray-700 hover:text-gray-900 hover:bg-gray-50 block px-3 py-2 text-sm font-medium rounded-md"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
             Console
-          </Link>
-          <Link href="/" className="bg-blue-600 text-white hover:bg-blue-700 block px-3 py-2 rounded-md text-sm font-medium mx-3 mt-2">
+          </a>
+          <Link 
+            href="/signup" 
+            className="bg-blue-600 text-white hover:bg-blue-700 block px-3 py-2 rounded-md text-sm font-medium mx-3 mt-2 text-center"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
             SignUp
           </Link>
         </div>