diff --git a/src/frontend/src/components/appHeaderComponent/index.tsx b/src/frontend/src/components/appHeaderComponent/index.tsx
index afbb4f341..fe87216d3 100644
--- a/src/frontend/src/components/appHeaderComponent/index.tsx
+++ b/src/frontend/src/components/appHeaderComponent/index.tsx
@@ -47,7 +47,7 @@ export default function AppHeader(): JSX.Element {
   }, []);
 
   return (
-    <div className="z-[1] flex h-[62px] w-full items-center justify-between gap-2 border-b px-5 py-2.5 dark:bg-background">
+    <div className="flex h-[62px] w-full items-center justify-between gap-2 border-b px-5 py-2.5 dark:bg-background">
       {/* Left Section */}
       <div className={`flex gap-2`}>
         <Button
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index c8b846006..e7559c41a 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -271,6 +271,14 @@ const config = {
       backdropBlur: {
         xs: "2px",
       },
+      zIndex: {
+        '60': '60',
+        '70': '70',
+        '80': '80',
+        '90': '90',
+        '100': '100',
+        '999': '999',
+      },
     },
   },