diff --git a/app/globals.css b/app/globals.css
index a8c214d..7641b9d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -62,4 +62,9 @@
 
 ::-webkit-scrollbar {
   display: none;
+}
+
+.glass {
+  backdrop-filter: blur(15px) saturate(100%);
+  -webkit-backdrop-filter: blur(15px) saturate(100%);
 }
\ No newline at end of file
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 8023f11..4399fa1 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -93,7 +93,7 @@ function Navbar() {
     <>
       <div
         className={`fixed left-0 top-0 z-50 flex w-screen justify-center px-7 xl:px-0 ${
-          isScrolled ? "border-b backdrop-blur-lg" : ""
+          isScrolled ? "glass border-b bg-background/50" : ""
         }`}
       >
         <div className="flex h-20 w-full max-w-7xl flex-row-reverse items-center justify-between sm:flex-row">