diff --git a/app/page.tsx b/app/page.tsx
index a2e09f1..9d765b6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,7 +11,7 @@ import OurBlog from "components/ourblog/OurBlog"
 export default function Web() {
   return (
     <div>
-      <section id="Home" className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[2%] lg:pr-[2%]">
+      <section id="home" className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[2%] lg:pr-[2%]">
         <Hero01 />
       </section>
       <section id="aboutUs" className="bg-[#0f172a] md:pl-0 md:pr-0 ">
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index e17ac95..1d38203 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -60,7 +60,7 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
       } fixed start-0 top-0 z-20 w-full bg-transparent dark:border-gray-600 dark:bg-gray-900`}
     >
       <section
-        className={`${isNavOpen ? "animate-openmenu" : "animate-closemenu"}  block  backdrop-blur-lg`}
+        className={`${isNavOpen ? "animate-openmenu" : "animate-closemenu"}  block h-screen backdrop-blur-lg`}
         style={mobileNavStyle}
       >
         <div>
@@ -81,19 +81,19 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
               </svg>
             </button>
           </div>
-          <ul className="MENU-LINK-MOBILE-OPEN flex h-full min-h-[300px]  flex-col items-center justify-center text-white">
+          <ul className="MENU-LINK-MOBILE-OPEN flex h-screen min-h-[300px] flex-col items-center justify-center text-white">
             <li className="my-2 border-b border-gray-400 uppercase">
               <a href="#home">Home</a>
             </li>
+            <li className="my-2 border-b border-gray-400 uppercase">
+              <a href="#aboutUs">About</a>
+            </li>
             <li className="my-2 border-b border-gray-400 uppercase">
               <a href="#services">Services</a>
             </li>
             <li className="my-2 border-b border-gray-400 uppercase">
               <a href="#portfolio">Portfolio</a>
             </li>
-            <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="#aboutUs">About</a>
-            </li>
             <li className="my-2 border-b border-gray-400 uppercase">
               <a href="#">Sign In</a>
             </li>
@@ -168,6 +168,14 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
                     Home
                   </a>
                 </li>
+                <li>
+                  <a
+                    href="#aboutUs"
+                    className="block rounded px-3 py-2 text-white hover:bg-gray-100 hover:text-vizoleG2 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
+                  >
+                    About
+                  </a>
+                </li>
                 <li>
                   <a
                     href="#services"
@@ -184,14 +192,6 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
                     Portfolio
                   </a>
                 </li>
-                <li>
-                  <a
-                    href="#aboutUs"
-                    className="block rounded px-3 py-2 text-white hover:bg-gray-100 hover:text-vizoleG2 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
-                  >
-                    About
-                  </a>
-                </li>
               </div>
             </ul>
           </div>