diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9b1d6ed..08a7f67 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({
           ^
         </a>
         <div
-          className="z-40 flex h-[67px] w-full items-center justify-between bg-[#fff] px-2 py-[50px] xl:px-10"
+          className="relative z-40 flex h-[67px] w-full items-center justify-between bg-[#fff] px-2 py-[50px] xl:px-10"
           id="header"
         >
           <div className="flex flex-wrap items-center justify-center xl:flex-nowrap xl:justify-normal">
@@ -46,40 +46,40 @@ export default function RootLayout({
               Parsa Aghayi
             </p>
           </div>
-          <ul className="hidden items-center justify-center lg:flex">
+          <ul className="fixed left-[50%] right-[45%] top-3 hidden items-center justify-center rounded p-2 lg:flex">
             <a
               href="/#home"
-              className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]"
+              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
             >
               Home
             </a>
             <a
               href="/#about-me"
-              className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]"
+              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
             >
               About Me
             </a>
             <a
               href="/#services"
-              className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]"
+              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
             >
               Services
             </a>
             <a
               href="/#projects"
-              className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]"
+              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
             >
               Projects
             </a>
             <a
               href="/#testimonials"
-              className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]"
+              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
             >
               Testimonials
             </a>
             <a
               href="/#contact"
-              className="whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400]"
+              className="mx-2 rounded-lg whitespace-nowrap py-[10px] text-[18px] font-[600] bg-[rgba(0,0,0,0.1)] px-2 border shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
             >
               Contact
             </a>