diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index a60a2ac..b86e175 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -8,16 +8,6 @@ const translatePaths = useTranslatedPaths(lang);
 const t = useTranslations(lang);
 
 const targets = [
-  {
-    name: t('projects'),
-    href: translatePaths('#work'),
-    hideMobile: true,
-  },
-  {
-    name: t('skills'),
-    href: translatePaths('#skills'),
-    hideMobile: true,
-  },
   {
     name: t('blog'),
     href: translatePaths('/blog'),
@@ -69,7 +59,11 @@ const targets = [
         {
           targets.map((t) => (
             <li>
-              <a class="clickable target" href={t.href} data-hide-mobile={!!t.hideMobile}>
+              <a
+                class="clickable target"
+                href={t.href}
+                data-hide-mobile={'hideMobile' in t && !!t.hideMobile}
+              >
                 {t.name}
               </a>
             </li>
@@ -105,17 +99,37 @@ const targets = [
 
     // fix for chromium to have the language menu on top of content
     position: sticky;
-    top: 1.25rem;
+    inset-block-start: 0;
     z-index: 99;
 
-    background-color: var(--color-white);
     color: var(--color-850);
-    border: 1px solid var(--color-500);
-    border-radius: 999px;
-    margin: 1.25rem auto;
-    padding: 0.5rem 1rem 0.5rem 0.5rem;
-    max-width: 800px;
-    width: calc(100% - 1.5rem);
+    margin-block: 1.25rem;
+    margin-inline: auto;
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+    max-inline-size: 800px;
+    inline-size: 100%;
+
+    &::before {
+      content: '';
+      background: linear-gradient(
+        to bottom,
+        var(--color-40),
+        color-mix(in srgb, var(--color-40), transparent 25%) 25%,
+        transparent
+      );
+
+      mask: linear-gradient(black, black, transparent);
+      backdrop-filter: blur(10px);
+
+      position: fixed;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: 100%;
+      block-size: 140px;
+      z-index: -1;
+      pointer-events: none;
+    }
   }
 
   .logo {
@@ -157,12 +171,12 @@ const targets = [
     cursor: pointer;
 
     &:focus-visible {
-      background-color: var(--color-40);
+      background-color: var(--color-100);
     }
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--color-40);
+        background-color: var(--color-100);
       }
     }
 
@@ -181,14 +195,14 @@ const targets = [
     right: -1px;
 
     &:focus-visible + #language-input-wrapper label {
-      background-color: var(--color-40);
+      background-color: var(--color-100);
       box-shadow:
         0 0 0 2px var(--color-white),
         0 0 0 4px var(--color-500);
     }
 
     &:checked + #language-input-wrapper label {
-      background-color: var(--color-40);
+      background-color: var(--color-100);
 
       & + #language-menu {
         display: flex;