diff --git a/messages/en.json b/messages/en.json
index f9b2767..39b00c3 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -39,6 +39,8 @@
     "storage": "Storage",
     "about": "About",
     "shiftSchedule": "Shift Schedule",
+    "desktopNavMenu": "{open, select, true {Open} other {Close}} navigation menu",
+    "matrix": "Go to matrix",
     "changeLocale": "Change language",
     "toggleTheme": "Toggle theme",
     "light": "Light",
diff --git a/messages/no.json b/messages/no.json
index 8062933..6c90b00 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -39,6 +39,8 @@
     "storage": "Lager",
     "about": "Om oss",
     "shiftSchedule": "Vaktliste",
+    "desktopNavMenu": "{open, select, true {Åpne} other {Lukk}} navigasjonsmeny",
+    "matrix": "Dra til matrix",
     "changeLocale": "Bytt språk",
     "toggleTheme": "Bytt tema",
     "light": "Lys",
diff --git a/src/components/composites/ResponsiveDialog.tsx b/src/components/composites/ResponsiveDialog.tsx
index 417fe57..5c951b0 100644
--- a/src/components/composites/ResponsiveDialog.tsx
+++ b/src/components/composites/ResponsiveDialog.tsx
@@ -40,7 +40,7 @@ interface ResponsiveDialogProps extends BaseProps {
   asChild?: true;
 }
 
-const desktop = '(min-width: 768px)';
+const desktop = '(min-width: 48rem)';
 
 /**
  * This uses a drawer on mobile and a dialog on desktop so it is usually the preffered way to use dialogs in the app for a repsonsive experience.
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index cc7f462..3007c40 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -21,7 +21,12 @@ function Footer() {
       <div className='grid grid-cols-1 xs:grid-cols-2 gap-x-4 gap-y-12 sm:grid-cols-3 lg:grid-cols-4'>
         <div>
           <div className='flex'>
-            <LogoLink className='justify-start' />
+            <LogoLink
+              className='justify-start'
+              t={{
+                hackerspaceHome: t('hackerspaceHome'),
+              }}
+            />
           </div>
           <p className='ml-2 leading-tight'>
             <strong>{t('openingHours')}:</strong>
@@ -114,7 +119,7 @@ function Footer() {
         <div>
           <h4>{t('links')}</h4>
           <Nav
-            className='mt-2 ml-2 space-y-1.5'
+            className='mt-2 ml-2 flex flex-col items-start gap-1.5'
             t={{
               news: t('news'),
               events: t('events'),
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 85faf28..9442861 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,15 +1,18 @@
 import { LogoLink } from '@/components/layout/LogoLink';
 import { DarkModeMenu } from '@/components/layout/header/DarkModeMenu';
+import { DesktopNavMenu } from '@/components/layout/header/DesktopNavMenu';
 import { LocaleMenu } from '@/components/layout/header/LocaleMenu';
 import { MobileSheet } from '@/components/layout/header/MobileSheet';
 import { Nav } from '@/components/layout/header/Nav';
 import { ProfileMenu } from '@/components/layout/header/ProfileMenu';
 import { useTranslations } from 'next-intl';
+import { MatrixButton } from './header/MatrixButton';
 
 function Header() {
   const t = useTranslations('layout');
+
   return (
-    <header className='~px-4/24 sticky top-0 z-20 mx-auto flex min-h-14 w-full max-w-screen-2xl items-center justify-between border-border/40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'>
+    <header className='~px-1/24 sticky top-0 z-20 mx-auto flex min-h-14 w-full max-w-screen-2xl items-center justify-between border-border/40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'>
       <div className='flex gap-2'>
         <MobileSheet
           className='flex md:hidden'
@@ -18,25 +21,50 @@ function Header() {
             news: t('news'),
             events: t('events'),
             about: t('about'),
+            storage: t('storage'),
+            shiftSchedule: t('shiftSchedule'),
+            hackerspaceHome: t('hackerspaceHome'),
+            matrix: t('matrix'),
+            changeLocale: t('changeLocale'),
+            toggleTheme: t('toggleTheme'),
+            light: t('light'),
+            dark: t('dark'),
+            system: t('system'),
             close: useTranslations('ui')('close'),
           }}
         />
-        <LogoLink />
-      </div>
-      <div className='flex gap-10'>
-        <Nav
-          className='hidden items-center gap-6 text-sm md:flex'
+        <LogoLink
           t={{
-            news: t('news'),
-            events: t('events'),
-            about: t('about'),
+            hackerspaceHome: t('hackerspaceHome'),
           }}
         />
+      </div>
+      <div className='flex gap-6'>
+        <div className='hidden items-center gap-6 md:flex'>
+          <Nav
+            className='flex items-center gap-6 text-sm'
+            t={{
+              news: t('news'),
+              events: t('events'),
+              about: t('about'),
+            }}
+          />
+          <DesktopNavMenu
+            t={{
+              open: t('desktopNavMenu', { open: true }),
+              close: t('desktopNavMenu', { open: false }),
+              storage: t('storage'),
+              shiftSchedule: t('shiftSchedule'),
+            }}
+          />
+        </div>
         <div className='flex'>
+          <MatrixButton t={{ title: t('matrix') }} className='xs:flex hidden' />
           <LocaleMenu
             t={{
               changeLocale: t('changeLocale'),
             }}
+            classname='hidden xs:flex'
           />
           <DarkModeMenu
             t={{
@@ -45,6 +73,7 @@ function Header() {
               dark: t('dark'),
               system: t('system'),
             }}
+            classname='hidden xs:flex'
           />
           <ProfileMenu
             t={{
diff --git a/src/components/layout/LogoLink.tsx b/src/components/layout/LogoLink.tsx
index dfddc11..fd2a6b1 100644
--- a/src/components/layout/LogoLink.tsx
+++ b/src/components/layout/LogoLink.tsx
@@ -2,16 +2,16 @@ import { Logo } from '@/components/assets/Logo';
 import { Button } from '@/components/ui/Button';
 import { Link } from '@/lib/locale/navigation';
 import { cx } from '@/lib/utils';
-import { useTranslations } from 'next-intl';
 
-function LogoLink({
-  className,
-  onClick,
-}: {
+type LogoLinkProps = {
   className?: string;
   onClick?: () => void;
-}) {
-  const t = useTranslations('layout');
+  t: {
+    hackerspaceHome: string;
+  };
+};
+
+function LogoLink({ className, onClick, t }: LogoLinkProps) {
   return (
     <Button
       className={cx('flex items-center space-x-2', className)}
@@ -19,7 +19,7 @@ function LogoLink({
       variant='none'
       size='none'
     >
-      <Link href='/' aria-label={t('hackerspaceHome')} onClick={onClick}>
+      <Link href='/' aria-label={t.hackerspaceHome} onClick={onClick}>
         <Logo className='size-6 md:size-8 lg:size-10' />
         <span className='font-bold font-montserrat text-md md:text-lg lg:text-2xl'>
           HACKERSPACE
diff --git a/src/components/layout/header/DarkModeMenu.tsx b/src/components/layout/header/DarkModeMenu.tsx
index 09ea3ed..b8712cf 100644
--- a/src/components/layout/header/DarkModeMenu.tsx
+++ b/src/components/layout/header/DarkModeMenu.tsx
@@ -9,7 +9,6 @@ import {
 } from '@/components/ui/DropdownMenu';
 import { MoonIcon, SunIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
-import * as React from 'react';
 
 type DarkModeMenuProps = {
   t: {
@@ -18,18 +17,30 @@ type DarkModeMenuProps = {
     dark: string;
     system: string;
   };
+  classname?: string;
 };
 
-function DarkModeMenu({ t }: DarkModeMenuProps) {
+function DarkModeMenu({ t, classname }: DarkModeMenuProps) {
   const { setTheme } = useTheme();
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon'>
-          <SunIcon className='dark:-rotate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0' />
-          <MoonIcon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
-          <span className='sr-only'>{t.toggleTheme}</span>
+        <Button
+          variant='ghost'
+          size='icon'
+          title={t.toggleTheme}
+          aria-label={t.toggleTheme}
+          className={classname}
+        >
+          <SunIcon
+            className='dark:-rotate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0'
+            aria-hidden='true'
+          />
+          <MoonIcon
+            className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100'
+            aria-hidden='true'
+          />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className='min-w-[6rem]' align='end'>
diff --git a/src/components/layout/header/DesktopNavMenu.tsx b/src/components/layout/header/DesktopNavMenu.tsx
new file mode 100644
index 0000000..d412944
--- /dev/null
+++ b/src/components/layout/header/DesktopNavMenu.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { SecondaryNav } from '@/components/layout/header/SecondaryNav';
+import { Button } from '@/components/ui/Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/components/ui/DropdownMenu';
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
+import { EllipsisIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type DesktopNavMenuProps = {
+  className?: string;
+  t: {
+    open: string;
+    close: string;
+    storage: string;
+    shiftSchedule: string;
+  };
+};
+
+function DesktopNavMenu({ t }: DesktopNavMenuProps) {
+  const [open, setOpen] = useState(false);
+  const visible = useMediaQuery('(min-width: 48rem)');
+
+  useEffect(() => {
+    if (!visible) {
+      setOpen(false);
+    }
+  }, [visible]);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          className='h-fit'
+          variant='nav'
+          size='none'
+          aria-label={open ? t.close : t.open}
+        >
+          <EllipsisIcon aria-hidden='true' />
+        </Button>
+      </DropdownMenuTrigger>
+      <SecondaryNav
+        asDropDown
+        onClick={() => setOpen(false)}
+        t={{
+          storage: t.storage,
+          shiftSchedule: t.shiftSchedule,
+        }}
+      />
+    </DropdownMenu>
+  );
+}
+
+export { DesktopNavMenu };
diff --git a/src/components/layout/header/LocaleMenu.tsx b/src/components/layout/header/LocaleMenu.tsx
index 19164e6..341cf00 100644
--- a/src/components/layout/header/LocaleMenu.tsx
+++ b/src/components/layout/header/LocaleMenu.tsx
@@ -11,18 +11,29 @@ import { localeIcons, routing } from '@/lib/locale';
 import { usePathname, useRouter } from '@/lib/locale/navigation';
 import { Globe2Icon } from 'lucide-react';
 import { useParams } from 'next/navigation';
-import * as React from 'react';
 
-function LocaleMenu({ t }: { t: { changeLocale: string } }) {
+type LocaleMenuProps = {
+  t: {
+    changeLocale: string;
+  };
+  classname?: string;
+};
+
+function LocaleMenu({ t, classname }: LocaleMenuProps) {
   const router = useRouter();
   const pathname = usePathname();
   const params = useParams();
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon'>
-          <Globe2Icon className='h-[1.2rem] w-[1.2rem]' />
-          <span className='sr-only'>{t.changeLocale}</span>
+        <Button
+          variant='ghost'
+          size='icon'
+          title={t.changeLocale}
+          aria-label={t.changeLocale}
+          className={classname}
+        >
+          <Globe2Icon className='h-[1.2rem] w-[1.2rem]' aria-hidden='true' />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className='min-w-[6rem]' align='end'>
diff --git a/src/components/layout/header/MatrixButton.tsx b/src/components/layout/header/MatrixButton.tsx
new file mode 100644
index 0000000..b713e6b
--- /dev/null
+++ b/src/components/layout/header/MatrixButton.tsx
@@ -0,0 +1,25 @@
+import { Button } from '@/components/ui/Button';
+import { MessageSquareMoreIcon } from 'lucide-react';
+import Link from 'next/link';
+
+type MatrixButtonProps = {
+  className?: string;
+  t: {
+    title: string;
+  };
+};
+
+function MatrixButton({ className, t }: MatrixButtonProps) {
+  return (
+    <Button variant='ghost' size='icon' className={className} asChild>
+      <Link href='/' title={t.title} aria-label={t.title}>
+        <MessageSquareMoreIcon
+          className='h-[1.2rem] w-[1.2rem]'
+          aria-hidden='true'
+        />
+      </Link>
+    </Button>
+  );
+}
+
+export { MatrixButton };
diff --git a/src/components/layout/header/MobileSheet.tsx b/src/components/layout/header/MobileSheet.tsx
index 9bcd6da..cc5ffce 100644
--- a/src/components/layout/header/MobileSheet.tsx
+++ b/src/components/layout/header/MobileSheet.tsx
@@ -1,17 +1,24 @@
 'use client';
 
 import { LogoLink } from '@/components/layout/LogoLink';
+import { DarkModeMenu } from '@/components/layout/header/DarkModeMenu';
+import { LocaleMenu } from '@/components/layout/header/LocaleMenu';
+import { MatrixButton } from '@/components/layout/header/MatrixButton';
 import { Nav } from '@/components/layout/header/Nav';
+import { SecondaryNav } from '@/components/layout/header/SecondaryNav';
 import { Button } from '@/components/ui/Button';
+import { Separator } from '@/components/ui/Separator';
 import {
   Sheet,
   SheetContent,
+  SheetFooter,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
 } from '@/components/ui/Sheet';
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
 import { MenuIcon } from 'lucide-react';
-import * as React from 'react';
+import { useEffect, useState } from 'react';
 
 type MobileSheetProps = {
   className?: string;
@@ -20,12 +27,29 @@ type MobileSheetProps = {
     news: string;
     events: string;
     about: string;
+    storage: string;
+    shiftSchedule: string;
+    hackerspaceHome: string;
+    matrix: string;
+    changeLocale: string;
+    toggleTheme: string;
+    light: string;
+    dark: string;
+    system: string;
     close: string;
   };
 };
 
 function MobileSheet({ className, t }: MobileSheetProps) {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
+  const visible = useMediaQuery('(max-width: 48rem)');
+
+  useEffect(() => {
+    if (!visible) {
+      setOpen(false);
+    }
+  }, [visible]);
+
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
@@ -33,26 +57,67 @@ function MobileSheet({ className, t }: MobileSheetProps) {
           className={className}
           variant='ghost'
           size='icon'
+          title={t.navigationMenu}
           aria-label={t.navigationMenu}
         >
-          <MenuIcon className='h-5 w-5' />
+          <MenuIcon className='h-5 w-5' aria-hidden='true' />
         </Button>
       </SheetTrigger>
-      <SheetContent side='left' close={t.close}>
-        <SheetHeader>
-          <SheetTitle className='flex'>
-            <LogoLink onClick={() => setOpen(false)} />
-          </SheetTitle>
-        </SheetHeader>
-        <Nav
-          className='flex flex-col space-y-3 pt-6'
-          onClick={() => setOpen(false)}
-          t={{
-            news: t.news,
-            events: t.events,
-            about: t.about,
-          }}
-        />
+      <SheetContent
+        className='flex w-72 flex-col justify-between'
+        side='left'
+        close={t.close}
+      >
+        <div>
+          <SheetHeader>
+            <SheetTitle className='flex'>
+              <LogoLink
+                onClick={() => setOpen(false)}
+                t={{
+                  hackerspaceHome: t.hackerspaceHome,
+                }}
+              />
+            </SheetTitle>
+          </SheetHeader>
+          <Nav
+            className='flex flex-col items-start space-y-3 py-6'
+            onClick={() => setOpen(false)}
+            t={{
+              news: t.news,
+              events: t.events,
+              about: t.about,
+            }}
+          />
+          <Separator />
+          <div className='mt-6 ml-2 flex flex-row gap-2'>
+            <Separator orientation='vertical' className='h-auto' />
+            <SecondaryNav
+              onClick={() => setOpen(false)}
+              t={{
+                storage: t.storage,
+                shiftSchedule: t.shiftSchedule,
+              }}
+            />
+          </div>
+        </div>
+        <SheetFooter className='flex flex-row'>
+          <MatrixButton t={{ title: t.matrix }} className='xs:hidden' />
+          <LocaleMenu
+            t={{
+              changeLocale: t.changeLocale,
+            }}
+            classname='xs:hidden'
+          />
+          <DarkModeMenu
+            t={{
+              toggleTheme: t.toggleTheme,
+              light: t.light,
+              dark: t.dark,
+              system: t.system,
+            }}
+            classname='xs:hidden'
+          />
+        </SheetFooter>
       </SheetContent>
     </Sheet>
   );
diff --git a/src/components/layout/header/Nav.tsx b/src/components/layout/header/Nav.tsx
index 3164282..921c38d 100644
--- a/src/components/layout/header/Nav.tsx
+++ b/src/components/layout/header/Nav.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@/components/ui/Button';
-import { Link } from '@/lib/locale/navigation';
+import { NavItem } from '@/components/layout/header/NavItem';
 
 type NavProps = {
   className?: string;
@@ -16,25 +15,13 @@ function Nav({ className, onClick, t }: NavProps) {
     <nav className='flex items-center'>
       <ul className={className}>
         <li>
-          <Button asChild variant='nav' size='none'>
-            <Link href='/news' onClick={onClick}>
-              {t.news}
-            </Link>
-          </Button>
+          <NavItem onClick={onClick} href='/news' t={t.news} />
         </li>
         <li>
-          <Button asChild variant='nav' size='none'>
-            <Link href='/events' onClick={onClick}>
-              {t.events}
-            </Link>
-          </Button>
+          <NavItem onClick={onClick} href='/events' t={t.events} />
         </li>
         <li>
-          <Button asChild variant='nav' size='none'>
-            <Link href='/about' onClick={onClick}>
-              {t.about}
-            </Link>
-          </Button>
+          <NavItem onClick={onClick} href='/about' t={t.about} />
         </li>
       </ul>
     </nav>
diff --git a/src/components/layout/header/NavItem.tsx b/src/components/layout/header/NavItem.tsx
new file mode 100644
index 0000000..2e84125
--- /dev/null
+++ b/src/components/layout/header/NavItem.tsx
@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/Button';
+import { Link } from '@/lib/locale/navigation';
+import type { ComponentProps } from 'react';
+
+type NavItemProps = ComponentProps<typeof Link> & {
+  onClick?: () => void;
+  t: string;
+};
+
+function NavItem({ onClick, t, ...props }: NavItemProps) {
+  return (
+    <Button className='justify-start' variant='nav' size='none' asChild>
+      <Link onClick={onClick} {...props}>
+        {t}
+      </Link>
+    </Button>
+  );
+}
+
+export { NavItem };
diff --git a/src/components/layout/header/ProfileMenu.tsx b/src/components/layout/header/ProfileMenu.tsx
index 446f65e..8fa4263 100644
--- a/src/components/layout/header/ProfileMenu.tsx
+++ b/src/components/layout/header/ProfileMenu.tsx
@@ -8,16 +8,22 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/DropdownMenu';
 import { UserIcon } from 'lucide-react';
-import * as React from 'react';
 
 function ProfileMenu({ t }: { t: { profile: string; signIn: string } }) {
   // TODO: User Icon Color should only have the primary color when logged in
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon'>
-          <UserIcon className='h-[1.2rem] w-[1.2rem] text-primary' />
-          <span className='sr-only'>{t.profile}</span>
+        <Button
+          variant='ghost'
+          size='icon'
+          title={t.profile}
+          aria-label={t.profile}
+        >
+          <UserIcon
+            className='h-[1.2rem] w-[1.2rem] text-primary'
+            aria-hidden='true'
+          />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className='min-w-[6rem]' align='end'>
diff --git a/src/components/layout/header/SecondaryNav.tsx b/src/components/layout/header/SecondaryNav.tsx
new file mode 100644
index 0000000..6114012
--- /dev/null
+++ b/src/components/layout/header/SecondaryNav.tsx
@@ -0,0 +1,56 @@
+import { NavItem } from '@/components/layout/header/NavItem';
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '@/components/ui/DropdownMenu';
+
+type SecondaryNavProps = {
+  asDropDown?: boolean;
+  onClick?: () => void;
+  t: {
+    storage: string;
+    shiftSchedule: string;
+  };
+};
+
+function SecondaryNav({ asDropDown = false, onClick, t }: SecondaryNavProps) {
+  const items = [
+    <NavItem key={0} onClick={onClick} href='/storage' t={t.storage} />,
+    <NavItem
+      key={1}
+      onClick={onClick}
+      href='/shift-schedule'
+      t={t.shiftSchedule}
+    />,
+  ];
+
+  return (
+    <nav>
+      {!asDropDown && (
+        <ul className='space-y-3'>
+          {items.map((item) => (
+            <li key={item.key}>{item}</li>
+          ))}
+        </ul>
+      )}
+      {asDropDown && (
+        <DropdownMenuContent
+          className='hidden min-w-[6rem] flex-col items-start md:flex'
+          align='end'
+        >
+          {items.map((item) => (
+            <DropdownMenuItem
+              className='w-full justify-start'
+              key={item.key}
+              asChild
+            >
+              {item}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      )}
+    </nav>
+  );
+}
+
+export { SecondaryNav };