diff --git a/components/navbar.js b/components/navbar.js
index 9dab293..9ef48cc 100644
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -1,10 +1,10 @@
 /* eslint-disable @next/next/no-html-link-for-pages */
 import Image from "next/image";
 import Link from "next/link";
-import {MdMenu} from "react-icons/md";
-import {AiOutlineClose} from "react-icons/ai";
-import {useState} from "react";
-import {useRouter} from "next/router";
+import { MdMenu } from "react-icons/md";
+import { AiOutlineClose } from "react-icons/ai";
+import { useState } from "react";
+import { useRouter } from "next/router";
 
 const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -13,56 +13,56 @@ const Navbar = () => {
   const showMenu = () => {
     setIsMenuOpen((prev) => !prev);
   };
+  
   const displayMenu = () => {
-    if (isMenuOpen) {
-      return "flex small-screen-header flex-col justify-center items-center gap-2 my-2";
-    } else {
-      return "hidden";
-    }
+    return isMenuOpen ? "flex" : "hidden";
   };
+
   return (
     <div className="nav_container font-poppins">
-      <nav>
+      <nav className="flex items-center justify-between py-4">
         <Image
           src="/nav_logo.png"
           alt="logo"
           width={240}
           height={36}
           onClick={() => router.push("/")}
-          className=" cursor-pointer"
+          className="cursor-pointer"
         />
-        <div className="right_contents">
+        
+        <div className="right_contents space-x-4 hidden md:flex">
           <Link href="/components">
-            <div role="button" className="nav_links">Components</div>
+            <a className="nav_links">Components</a>
           </Link>
           <Link href="/documentation">
-            <div role="button" className="nav_links">Documentation</div>
+            <a className="nav_links">Documentation</a>
           </Link>
           <Link href="/aboutUs">
-            <div role="button" className="nav_links">About Us</div>
+            <a className="nav_links">About Us</a>
           </Link>
           <Link href="/faqs">
-            <div role="button" className="nav_links">FAQs</div>
+            <a className="nav_links">FAQs</a>
           </Link>
         </div>
-        <div className="hamburger" onClick={showMenu}>
-          <p>{isMenuOpen ? <AiOutlineClose /> : <MdMenu />}</p>
+        
+        <div className="hamburger md:hidden" onClick={showMenu}>
+          {isMenuOpen ? <AiOutlineClose /> : <MdMenu />}
         </div>
       </nav>
 
-      <div className={displayMenu()}>
-        <div className="nav_links">
-          <Link href="/components">Components</Link>
-        </div>
-        <div className="nav_links">
-          <Link href="/documentation">Documentation</Link>
-        </div>
-        <div className="nav_links">
-          <Link href="/aboutUs">About Us</Link>
-        </div>
-        <div className="nav_links">
-          <Link href="/faqs">FAQs</Link>
-        </div>
+      <div className={`flex flex-col items-center justify-center gap-2 my-2 ${displayMenu()}`}>
+        <Link href="/components">
+          <a className="nav_links">Components</a>
+        </Link>
+        <Link href="/documentation">
+          <a className="nav_links">Documentation</a>
+        </Link>
+        <Link href="/aboutUs">
+          <a className="nav_links">About Us</a>
+        </Link>
+        <Link href="/faqs">
+          <a className="nav_links">FAQs</a>
+        </Link>
       </div>
     </div>
   );