diff --git a/components/Home/Navbar/DesktopNav.tsx b/components/Home/Navbar/DesktopNav.tsx
index 9ad51f6..e7d8cf7 100644
--- a/components/Home/Navbar/DesktopNav.tsx
+++ b/components/Home/Navbar/DesktopNav.tsx
@@ -24,12 +24,12 @@ const Nav = ({openNav}: Props) => {
             if (window.scrollY >= 90) {
                 setNavBg(true);
                 setNavHeight("h-[8vh]");
-                setContentSize("text-[9px] md:text-[11px]");
+                setContentSize("text-sm md:text-base");
                 setButtonSize("md:px-5 md:py-1.5 px-3 py-1 text-xs");
             } else {
                 setNavBg(false);
                 setNavHeight("h-[10vh]");
-                setContentSize("text-[10px] md:text-xs");
+                setContentSize("text-base md:text-lg");
                 setButtonSize("md:px-6 md:py-2 px-4 py-1 text-sm");
             }
         };
@@ -49,38 +49,34 @@ const Nav = ({openNav}: Props) => {
             <div
                 className="flex items-center h-full justify-between w-[90%] xl:w-[80%] mx-auto transition-all duration-300 ease-in-out">
                 {/* LOGO */}
-                <h1 className="text-lg md:text-xl lg:text-2xl font-bold transition-all duration-300 ease-in-out"
-                    style={{color: colors.primaryText}}
-                >
-                    <span className="text-xl md:text-2xl text-pink-700">R</span>hein Software
+                <h1 className={`${contentSize} font-bold transition-all duration-300 ease-in-out`}
+                    style={{color: colors.primaryText}}>
+                    <span className="text-lg md:text-xl text-pink-700">R</span>hein Software
                 </h1>
 
                 {/* Desktop Nav Links */}
                 <div className="hidden lg:flex items-center space-x-6 transition-all duration-300 ease-in-out">
                     {navLinks.map((link) => (
                         <Link href={link.url} key={link.id}>
-                            <p className={`nav_link ${contentSize} uppercase relative group`}
-                               style={{color: colors.primaryText}}
-                            >
-                                {link.label}
-                                <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-pink-700 transition-all duration-300 group-hover:w-full"></span></p>
+                            <p className={`nav_link ${contentSize} transition-all duration-300 ease-in-out`}
+                               style={{color: colors.primaryText}}>{link.label}</p>
                         </Link>
                     ))}
                 </div>
 
                 {/* Right Side Buttons */}
                 <div className="flex items-center space-x-3 transition-all duration-300 ease-in-out">
-                    {/* Portal Button - Hidden on mobile */}
+                    {/* Portal Button */}
                     <button
-                        className={`hidden lg:block ${buttonSize} text-white font-semibold bg-blue-700 hover:bg-blue-900 transition-all duration-300 ease-in-out rounded-full`}
+                        className={`${buttonSize} text-white font-semibold bg-blue-700 hover:bg-blue-900 transition-all duration-300 ease-in-out rounded-full`}
                     >
                         Portal
                     </button>
 
-                    {/* Theme Toggle Button - Hidden on mobile */}
+                    {/* Theme Toggle Button */}
                     <button
                         onClick={toggleTheme}
-                        className="hidden lg:flex w-7 h-7 items-center justify-center rounded-full transition-all duration-300 ease-in-out"
+                        className="w-7 h-7 flex items-center justify-center rounded-full transition-all duration-300 ease-in-out"
                         style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
                     >
                         {theme === "dark" ? "🌙" : "☀️"}
@@ -89,8 +85,7 @@ const Nav = ({openNav}: Props) => {
                     {/* Burger Menu (for mobile) */}
                     <HiBars3BottomRight
                         onClick={openNav}
-                        className="w-6 h-6 cursor-pointer lg:hidden transition-all duration-300 ease-in-out"
-                        style={{color: colors.primaryText}}
+                        className="w-6 h-6 cursor-pointer text-black lg:hidden transition-all duration-300 ease-in-out"
                     />
                 </div>
             </div>
@@ -98,4 +93,4 @@ const Nav = ({openNav}: Props) => {
     );
 };
 
-export default Nav;
+export default Nav;
\ No newline at end of file
diff --git a/components/Home/Navbar/MobileNav.tsx b/components/Home/Navbar/MobileNav.tsx
index 331b6ff..853025d 100644
--- a/components/Home/Navbar/MobileNav.tsx
+++ b/components/Home/Navbar/MobileNav.tsx
@@ -1,9 +1,7 @@
 import {navLinks} from "@/constant/Constant";
 import Link from "next/link";
-import React, {useContext} from "react";
+import React from "react";
 import {CgClose} from "react-icons/cg";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
 
 type Props = {
     showNav: boolean;
@@ -11,52 +9,32 @@ type Props = {
 };
 
 const MobileNav = ({closeNav, showNav}: Props) => {
-    const navOpen = showNav ? "translate-y-0 opacity-100" : "-translate-y-20 opacity-0 pointer-events-none";
-    const {theme, toggleTheme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
+    const navOpen = showNav ? "translate-x-0" : "translate-x-[-100%]";
+
     return (
-        <div className="lg:hidden">
-            {/* overlay background */}
+        <div>
+            {/* overlay */}
             <div
-                className={`fixed inset-0 z-[10000] transition-opacity duration-500 ${
-                    showNav ? "opacity-60 bg-black" : "opacity-0 pointer-events-none"
-                }`}
-                onClick={closeNav}
-            />
-
-            {/* nav menu */}
+                className={`fixed ${navOpen} inset-0 transform transition-all duration-500 z-[10000] bg-black opacity-70 w-full h-screen`}
+            ></div>
+            {/* Navlinks */}
             <div
-                className={`fixed top-0 left-0 w-full z-[10006] transform ${navOpen} transition-all duration-500 ease-in-out text-[var(--primary-text)] shadow-md rounded-b-2xl`}
-                style={{
-                    backgroundColor: theme === "dark" ? "#2A2A2A" : "#ffffff",
-                    color: theme === "dark" ? "#f5f5f5" : "#1a1a1a"
-                }}
+                className={`text-white ${navOpen} fixed justify-center flex flex-col h-full transform transition-all duration-500 delay-300 w-[80%] sm:w-[60%] bg-indigo-900 space-y-6 z-[10006]`}
             >
-                <div className="flex flex-col items-center justify-center py-8 space-y-4 px-4 relative">
-                    {/* Close icon */}
-                    <CgClose
-                        onClick={closeNav}
-                        className="absolute top-4 right-6 sm:right-8 sm:w-7 sm:h-7 w-6 h-6 cursor-pointer p-1"
-                        style={{color: colors.primaryText}}
-                    />
-
-                    {navLinks.map((link) => (
+                {navLinks.map((link) => {
+                    return (
                         <Link href={link.url} key={link.id}>
-                            <p className="nav__link uppercase text-[14px] sm:text-[16px] border-b pb-1 border-gray-400 transition-all duration-300 ease-in-out hover:scale-105">
+                            <p className="nav__link text-white text-[20px] ml-12 border-b-[1.5px] pb-1 border-white sm:text-[30px]">
                                 {link.label}
                             </p>
                         </Link>
-                    ))}
-
-                    {/* Theme toggle button */}
-                    <button
-                        onClick={toggleTheme}
-                        className="mt-4 w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 transition-all duration-300"
-                        style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
-                    >
-                        {theme === "dark" ? "🌙" : "☀️"}
-                    </button>
-                </div>
+                    );
+                })}
+                {/* Close icon */}
+                <CgClose
+                    onClick={closeNav}
+                    className="absolute top-[0.7rem] right-[1.4rem] sm:w-8 sm:h-8 w-6 h-6"
+                />
             </div>
         </div>
     );