diff --git a/package.json b/package.json
index 7319f6d5..b514c53e 100755
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "dev": "vite --host",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "lint:scss": "stylelint \"./**/*.{css,scss,sass,vue}\"",
     "serve": "vite preview",
     "test": "vitest",
     "coverage": "vitest run --coverage",
diff --git a/src/App.vue b/src/App.vue
index e1f58329..19fd6b7a 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,10 +5,12 @@ import TheNavbar from '@/components/layout/TheNavbar.vue'
 </script>
 
 <template>
-  <TheNavbar />
-  <router-view />
-  <TheContributing />
-  <TheFooter />
+  <div class="relative">
+    <TheNavbar />
+    <RouterView />
+    <TheContributing />
+    <TheFooter />
+  </div>
 </template>
 
 <style lang="scss">
@@ -67,7 +69,7 @@ body {
   vertical-align: super;
 }
 
-//Animations
+// Animations
 
 @keyframes scale {
   0% {
diff --git a/src/components/buttons/CtaIcon.vue b/src/components/buttons/CtaIcon.vue
new file mode 100644
index 00000000..2e004804
--- /dev/null
+++ b/src/components/buttons/CtaIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import { useCtaComponent } from '@/functions/useCtaComponent'
+
+defineProps<{
+  icon: string
+  small?: boolean
+}>()
+
+const { component, bindings } = useCtaComponent(useAttrs())
+</script>
+
+<template>
+  <component
+    :is="component"
+    v-bind="bindings"
+    class="button mx-1 px-1 py-0.5 rounded-1"
+    :class="{ small }"
+  >
+    <i :class="icon" />
+  </component>
+</template>
+
+<style lang="scss" scoped>
+.button {
+  font-size: rem(20px);
+
+  &.small {
+    font-size: rem(16px);
+  }
+}
+</style>
diff --git a/src/components/layout/MobileMenu.vue b/src/components/layout/MobileMenu.vue
index adb4b32c..83a7d54c 100755
--- a/src/components/layout/MobileMenu.vue
+++ b/src/components/layout/MobileMenu.vue
@@ -1,138 +1,75 @@
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { watch } from 'vue'
+import CtaComponent from '@/components/buttons/CtaComponent.vue'
+
+interface Link {
+  id: string
+  to?: string
+  test?: string
+  text?: string
+  href?: string
+  target?: string
+  icon?: string
+}
+
 const props = defineProps<{
-  showMobileMenu: Boolean
-  smallerThanLg: Boolean
+  links: Link[]
+  show: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'onCloseMenu'): void
+  (e: 'close'): void
 }>()
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const smallerThanMd = breakpoints.smaller('md')
+
+watch(smallerThanMd, (value) => {
+  if (props.show && !value)
+    emit('close')
+})
 </script>
 
 <template>
   <transition name="slide">
-    <div v-if="props.showMobileMenu && props.smallerThanLg" class="mobile-menu-container">
-      <div class="mobile-menu-header">
-        <div class="logo">
-          <router-link
-            data-test="mobile-homepage-link"
-            :to="{ name: 'Home' }"
-            @click="emit('onCloseMenu')"
-          >
-            <img alt="SH logo" width="36" src="@/assets/sh-logo-small.png">
-          </router-link>
-        </div>
-        <button class="close-header" data-test="mobile-burger-menu-cta" @click="emit('onCloseMenu')">
-          <i class="fas fa-hamburger" />
-        </button>
-      </div>
-      <nav>
-        <div class="navbar" data-test="mobile-nav-link-wrapper">
-          <a
-            data-test="mobile-github-page-link"
-            href="https://github.com/Schrodinger-Hat"
-            target="_blank"
-            @click="emit('onCloseMenu')"
-          >GitHub
-          </a>
-          <router-link
-            data-test="mobile-team-page-link"
-            :to="{ name: 'Team' }"
-            @click="emit('onCloseMenu')"
-          >
-            {{ $t('navbar.team') }}
-          </router-link>
-          <router-link
-            data-test="mobile-event-page-link"
-            :to="{ name: 'EventList' }"
-            @click="emit('onCloseMenu')"
-          >
-            {{ $t('navbar.events') }}
-          </router-link>
-          <router-link
-            data-test="mobile-conduct-page-link"
-            :to="{ name: 'CodeOfConduct' }"
-            @click="emit('onCloseMenu')"
-          >
-            {{ $t('navbar.codeOfConduct') }}
-          </router-link>
-          <a
-            data-test="mobile-go-nord-page-link"
-            href="https://ign.schrodinger-hat.it"
-            target="_blank"
-            @click="emit('onCloseMenu')"
-          > ImageGoNord </a>
-        </div>
-      </nav>
-    </div>
+    <nav v-if="show && smallerThanMd" class="menu">
+      <CtaComponent
+        v-for="{ id, href, to, text, test, target } in links"
+        :key="id"
+        :data-test="`data-${test}`"
+        :href="href"
+        :target="target ? target : null"
+        :to="to ? { name: to } : null"
+        class="head-6 link block py-4 cursor-pointer border-b border-b-slate-300 dark:border-b-slate-50/[0.06] "
+        @click="$emit('close')"
+      >
+        <span>{{ $t(text as string) }}</span>
+      </CtaComponent>
+    </nav>
   </transition>
 </template>
 
 <style scoped lang="scss">
-.mobile-menu-container {
-  position: fixed;
-  z-index: 1;
-  left: 0;
-  width: 100%;
-  height: calc(100vh);
+.menu {
   background: $bg-primary;
   transition: all 0.4s ease-in 0s;
-
-  nav {
-    .navbar {
-      text-align: center;
-
-      a {
-        display: block;
-        padding: 0.8em 0;
-        border-bottom: 1px solid $bg-secondary;
-        font-size: 1.3em;
-
-        &:last-child {
-          border-bottom: none;
-        }
-      }
-    }
-  }
 }
 
 .#{$dark-mode-class} {
-  .mobile-menu-container {
+  .menu{
     background: $dark-bg-primary;
   }
 }
 
 .slide-enter-active,
 .slide-leave-active {
-  bottom: 0;
-  opacity: 1;
-  transition: bottom 0.25s ease-out 0s, opacity 0.3s ease-in-out 0s;
+  transition: 0.25s ease-out 0s;
 }
 
 .slide-enter-from,
 .slide-leave-to {
-  bottom: 100vh;
   opacity: 0;
-}
-
-.mobile-menu-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-}
-
-button {
-  border: none;
-  border-radius: 0.25em;
-  margin: 0 0.4em;
-  background-color: transparent;
-  cursor: pointer;
-  font-size: 1.2em;
-  transition: background-color 100ms ease-in-out 0s;
-
-  &:hover {
-    background-color: $bg-secondary;
-  }
+  transform: translateY(-100%);
 }
 </style>
diff --git a/src/components/layout/TheNavbar.vue b/src/components/layout/TheNavbar.vue
index 67112c57..b307e9d8 100755
--- a/src/components/layout/TheNavbar.vue
+++ b/src/components/layout/TheNavbar.vue
@@ -1,216 +1,145 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
-import { breakpointsTailwind, useBreakpoints, useDark, useToggle } from '@vueuse/core'
+import { computed, watch } from 'vue'
+import { useDark, useToggle } from '@vueuse/core'
 import LogoAnimated from '@/components/buttons/LogoAnimated.vue'
 import MobileMenu from '@/components/layout/MobileMenu.vue'
 import CtaComponent from '@/components/buttons/CtaComponent.vue'
+import { useGlobalScrollLock } from '@/functions/useGlobalScrollLock'
+import CtaIcon from '@/components/buttons/CtaIcon.vue'
+
+interface Link {
+  id: string
+  to?: string
+  test?: string
+  text?: string
+  href?: string
+  target?: string
+  icon?: string
+}
 
-// TODO: Move this data to an outer file
-// TODO: We could create a component called CtaIcon based of CtaComponent
-
-const links = {
-  router: [
-    {
-      name: 'Team',
-      test: 'nav-team-page-link',
-      text: 'navbar.team',
-    },
-    {
-      name: 'EventList',
-      test: 'nav-team-page-link',
-      text: 'navbar.events',
-    },
-    {
-      name: 'CodeOfConduct',
-      test: 'nav-team-page-link',
-      text: 'navbar.codeOfConduct',
-    },
-  ],
-  anchors: [
-    {
-      id: 'gonord',
-      href: 'https://ign.schrodinger-hat.it',
-      test: 'nav-go-nord-page-link',
-      text: 'ImageGoNord',
-      icon: null,
-    },
-    {
-      id: 'github',
-      href: 'https://github.com/Schrodinger-Hat',
-      test: 'nav-github-page-link',
-      text: null,
-      icon: {
-        class: 'fab fa-github',
-        test: 'nav-github-icon',
-      },
-    },
-  ],
+const links = [
+  {
+    id: 'Team',
+    to: 'Team',
+    test: 'team-page-link',
+    text: 'navbar.team',
+  },
+  {
+    id: 'Events',
+    to: 'EventList',
+    test: 'event-page-link',
+    text: 'navbar.events',
+  },
+  {
+    id: 'CodeOfConduct',
+    test: 'code-page-link',
+    text: 'navbar.codeOfConduct',
+    to: 'CodeOfConduct',
+  },
+  {
+    href: 'https://ign.schrodinger-hat.it',
+    id: 'IGN',
+    target: '_blank',
+    test: 'IGN-link',
+    text: 'navbar.imageGoNord',
+  },
+]
+
+const ghCTA = {
+  href: 'https://github.com/Schrodinger-Hat',
+  icon: 'fab fa-github',
+  id: 'GitHub',
+  test: 'github-cta',
+  text: 'navbar.gitHub',
 }
 
-const [showMobileMenu, toggleMobileMenu] = useToggle()
-const breakpoints = useBreakpoints(breakpointsTailwind)
+const [showMenu, toggleMenu] = useToggle()
+const scrollLock = useGlobalScrollLock()
 const isDark = useDark()
-const smallerThanLg = breakpoints.smaller('lg')
+const mobileLinks: Link[] = [ghCTA, ...links]
 const toggleDark = useToggle(isDark)
 
-const themeIcon = computed(() => {
-  return isDark.value ? 'fa-sun' : 'fa-moon'
-})
+const themeIcon = computed(() => isDark.value ? 'fa-sun' : 'fa-moon')
+
+watch(showMenu, value => (value ? scrollLock.value = true : scrollLock.value = false))
 </script>
 
 <template>
-  <header class="container">
-    <div class="inner-header-container" data-test="nav-wrapper">
+  <header class="inline-flex w-full h-15 m-auto py-4 px-2 sticky top-0 z-2 backdrop-blur border-b border-b-slate-300 lg:px-4 dark:border-slate-50/[0.06]" :class="{ 'active-menu': showMenu }">
+    <div class="flex justify-between items-center w-full mx-auto px-4 md:px-0" data-test="nav-wrapper">
       <LogoAnimated />
-      <nav>
-        <div class="navbar" data-test="nav-link-wrapper">
-          <CtaComponent
-            v-for="{ test, text, name } in links.router"
-            :key="text"
-            :to="{ name }"
-            :data-test="test"
-          >
-            {{ $t(text) }}
-          </CtaComponent>
-          <CtaComponent v-for="{ id, href, test, text, icon } in links.anchors" :id="id" :key="id" :href="href" :data-test="test">
-            <i v-if="icon" :class="icon.class" :data-test="icon.test" />
-            <span v-else>{{ text }}</span>
-          </CtaComponent>
-          <button class="hamburger-none-md" data-test="nav-burger-menu-cta" @click="toggleMobileMenu()">
-            <i class="fas fa-hamburger" data-test="nav-hamburget-icon" />
-          </button>
-          <button data-test="nav-theme-cta" @click="toggleDark()">
-            <i class="fas" :class="themeIcon" data-test="nav-theme-icon" />
-          </button>
-        </div>
+      <nav class="flex">
+        <CtaComponent
+          v-for="{ id, href, to, text, test, target } in links"
+          :key="id"
+          :data-test="`data-${test}`"
+          :to="to ? { name: to } : null"
+          :href="href"
+          :target="target ? target : null"
+          class="hidden mx-1 p-1 rounded-1 cursor-pointer text-xl md:inline"
+        >
+          <span>{{ $t(text as string) }}</span>
+        </CtaComponent>
+        <CtaIcon
+          :data-test="ghCTA.test"
+          :href="ghCTA.href"
+          :icon="ghCTA.icon"
+          target="_blank"
+        />
+        <CtaIcon
+          class="md:hidden"
+          data-test="nav-burger-menu-cta"
+          icon="fas fa-hamburger"
+          @click="toggleMenu()"
+        />
+        <CtaIcon
+          :icon="`fas ${themeIcon}`"
+          data-test="nav-theme-icon"
+          @click="toggleDark()"
+        />
       </nav>
     </div>
     <MobileMenu
+      class="w-full h-screen absolute top-15 left-0 overflow-auto text-center"
+      :links="mobileLinks"
+      :show="showMenu"
       data-test="mobile-menu"
-      :show-mobile-menu="showMobileMenu"
-      :smaller-than-lg="smallerThanLg"
-      @on-close-menu="toggleMobileMenu()"
+      @close="toggleMenu()"
     />
   </header>
 </template>
 
 <style scoped lang="scss">
 header {
-  position: relative;
-  z-index: $z-header;
-  display: flex;
-  height: 5em;
-  padding: 0 !important;
-  margin: auto;
-  text-align: left;
-
-  .inner-header-container {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 0.5em;
-    margin: 0 auto;
-    -webkit-box-align: center;
-    -webkit-box-pack: justify;
-
-    nav {
-      display: flex;
-
-      .navbar {
-        justify-content: space-between;
-        -webkit-box-pack: justify;
-        list-style: none;
+ background: $bg-primary-reduced;
 
-        a {
-          border-radius: 0.25em;
-          margin: 0 0.4em;
-          cursor: pointer;
-          font-size: 1.2em;
-          transition: background-color 100ms ease-in-out 0s;
-
-          &:nth-child(-n + 3) {
-            display: none;
-          }
-
-          &:hover {
-            background-color: $bg-secondary;
-          }
-        }
-
-        button {
-          border: none;
-          border-radius: 0.25em;
-          margin: 0 0.4em;
-          background-color: transparent;
-          cursor: pointer;
-          font-size: 1.2em;
-          transition: background-color 100ms ease-in-out 0s;
+ &.active-menu {
+  background: $bg-primary;
+ }
+}
 
-          &:nth-child(-n + 3) {
-            display: none;
-          }
+a:not(.logo),
+button {
+  transition: background-color 0.1s ease-in-out;
 
-          &:hover {
-            background-color: $bg-secondary;
-          }
-        }
-      }
-    }
+  &:hover {
+    background-color: $bg-secondary;
   }
 }
 
-@media (width >= 56.25em) {
+.#{$dark-mode-class} {
   header {
-    .inner-header-container {
-      padding: 0;
-
-      .logo {
-        span {
-          font-size: 2em;
-        }
-      }
-
-      nav {
-        .navbar {
-          .hamburger-none-md {
-            display: none;
-          }
+    background: $dark-bg-primary-reduced;
 
-          a {
-            &:nth-child(-n + 3) {
-              display: inline;
-            }
-          }
-        }
-      }
+    &.active-menu {
+      background: $dark-bg-primary;
     }
   }
-}
-
-@media (width <= 900px) {
-  .logo span {
-    pointer-events: none;
-  }
 
-  #gonord {
-    display: none;
-  }
-}
-
-.#{$dark-mode-class} {
-  header {
-    .inner-header-container {
-      nav {
-        .navbar {
-          a,
-          button {
-            &:hover {
-              background-color: $dark-bg-secondary;
-            }
-          }
-        }
-      }
+  a:not(.logo),
+  button {
+    &:hover {
+      background-color: $dark-bg-secondary;
     }
   }
 }
diff --git a/src/functions/useCtaComponent.ts b/src/functions/useCtaComponent.ts
index f8818c33..e94235c0 100644
--- a/src/functions/useCtaComponent.ts
+++ b/src/functions/useCtaComponent.ts
@@ -1,29 +1,29 @@
-import type { ComputedRef, SetupContext } from 'vue'
+import type { SetupContext } from 'vue'
 import { computed, unref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
 
 type Component = 'a' | 'button' | 'router-link'
 
-interface CtaComponent {
-  component: ComputedRef<Component>
-  bindings: ComputedRef<SetupContext['attrs']>
+type Attributes = SetupContext['attrs'] & {
+  to?: { name: string }
+  href?: string
 }
 
-export const useCtaComponent = (attrs: MaybeRef<SetupContext['attrs']>): CtaComponent => {
+export const useCtaComponent = (attrs: MaybeRef<Attributes>) => {
   const attributes = unref(attrs)
 
-  const component = computed(() => {
+  const component = computed((): Component => {
     switch (true) {
-      case 'to' in attributes:
+      case ('to' in attributes && attributes.to?.name !== undefined):
         return 'router-link'
-      case 'href' in attributes:
+      case ('href' in attributes && attributes.href !== undefined):
         return 'a'
       default:
         return 'button'
     }
   })
 
-  const bindings = computed((): SetupContext['attrs'] => ({ ...attributes }))
+  const bindings = computed((): Attributes => ({ ...attributes }))
 
   return {
     bindings,
diff --git a/src/functions/useGlobalScrollLock.ts b/src/functions/useGlobalScrollLock.ts
new file mode 100644
index 00000000..9d261ea2
--- /dev/null
+++ b/src/functions/useGlobalScrollLock.ts
@@ -0,0 +1,7 @@
+import { useScrollLock } from '@vueuse/core'
+
+const scrollLock = useScrollLock(document.documentElement)
+
+export const useGlobalScrollLock = () => {
+  return scrollLock
+}
diff --git a/src/i18n/messages.ts b/src/i18n/messages.ts
index f4c08303..f332c543 100644
--- a/src/i18n/messages.ts
+++ b/src/i18n/messages.ts
@@ -14,6 +14,8 @@ const messages = {
       team: 'Team',
       events: 'Eventi',
       codeOfConduct: 'Codice di Condotta',
+      imageGoNord: 'ImageGoNord',
+      gitHub: 'GitHub',
     },
     main: {
       h1: 'Una community open source italiana',
@@ -298,6 +300,8 @@ const messages = {
       team: 'Team',
       events: 'Events',
       codeOfConduct: 'Code of Conduct',
+      imageGoNord: 'ImageGoNord',
+      gitHub: 'GitHub',
     },
     main: {
       h1: 'An Italian open source community',
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index f60e23cf..505e7c78 100755
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -6,12 +6,14 @@ $dark-mode-class: 'dark';
 $z-header: 2;
 
 // Colors
-$text-primary: $nord3;
-$text-secondary: $nord6;
+$bg-primary-reduced: rgba(236, 239, 244, 0.7);
 $bg-primary: $nord6;
 $bg-secondary: $nord4;
+$text-primary: $nord3;
+$text-secondary: $nord6;
 
 // Dark-mode Colors
+$dark-bg-primary-reduced: rgba(46, 52, 64, 0.7);
 $dark-bg-primary: $nord0;
 $dark-bg-secondary: $nord1;
 $dark-bg-secondary: $nord3;