diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index 5093bbe2..dd5b5e19 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -21,7 +21,6 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Login to GitHub Container Registry
-        if: ${{ github.ref == 'refs/heads/main' }}
         uses: docker/login-action@v3
         with:
           registry: ghcr.io
@@ -44,7 +43,7 @@ jobs:
       - name: Build Docker image (and push on main)
         uses: docker/build-push-action@v6
         with:
-          push: ${{ github.ref == 'refs/heads/main' }}
+          push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
diff --git a/src/components/ContentPane/Collapsible/Collapsible.module.scss b/src/components/ContentPane/Collapsible/Collapsible.module.scss
index 3b560c06..c273c144 100644
--- a/src/components/ContentPane/Collapsible/Collapsible.module.scss
+++ b/src/components/ContentPane/Collapsible/Collapsible.module.scss
@@ -10,17 +10,25 @@
   background-color: transparent;
   overflow: hidden;
   padding-bottom: 0.5rem;
+  max-height: 10rem;
 }
 
-.open {
+input:checked + .content {
   max-height: unset;
 }
 
-.closed {
-  max-height: 20rem;
+input:checked ~ .button {
+  .open {
+    display: none;
+  }
+  .close {
+    display: block;
+  }
 }
 
 .button {
+  display: flex;
+  flex-direction: column;
   padding: 0;
   align-items: center;
   width: 100%;
@@ -29,4 +37,11 @@
   cursor: pointer;
   border: none;
   border-top: 2px solid var(--content-border-color);
+
+  .open {
+    display: block;
+  }
+  .close {
+    display: none;
+  }
 }
diff --git a/src/components/ContentPane/Collapsible/Collapsible.tsx b/src/components/ContentPane/Collapsible/Collapsible.tsx
index c5e4bd93..e5f2e36d 100644
--- a/src/components/ContentPane/Collapsible/Collapsible.tsx
+++ b/src/components/ContentPane/Collapsible/Collapsible.tsx
@@ -1,21 +1,21 @@
-'use client';
-
 import styles from './Collapsible.module.scss';
 import { MdOutlineExpandMore, MdOutlineExpandLess } from 'react-icons/md';
-import { useState } from 'react';
 
-const Collapsible = ({ children }: { children: React.ReactNode }) => {
-  const [open, setOpen] = useState(false);
+const Collapsible = ({
+  children,
+  id
+}: {
+  children: React.ReactNode;
+  id: string;
+}) => {
   return (
     <div className={styles.collapsible}>
-      <div
-        className={`${styles.content} ${open ? styles.open : styles.closed}`}
-      >
-        {children}
-      </div>
-      <button className={styles.button} onClick={() => setOpen(!open)}>
-        {open ? <MdOutlineExpandLess /> : <MdOutlineExpandMore />}
-      </button>
+      <input type="checkbox" id={id} hidden />
+      <div className={styles.content}>{children}</div>
+      <label htmlFor={id} className={styles.button}>
+        <MdOutlineExpandLess className={styles.close} />
+        <MdOutlineExpandMore className={styles.open} />
+      </label>
     </div>
   );
 };
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index f4fb6ec8..e571a241 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -1,3 +1,7 @@
+.selector {
+  padding: 0 1rem;
+}
+
 .header {
   position: sticky;
   top: 0;
@@ -30,6 +34,26 @@
 
 .mobile {
   display: none;
+  height: 4.75rem;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mobileActions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.mobileUser {
+  margin: 0 0 1.5rem 0.75rem !important;
+}
+
+button.mobileUser {
+  margin: 0 1rem 1.5rem 1rem !important;
 }
 
 @media screen and (max-width: #{$header-breakpoint}) {
@@ -37,12 +61,7 @@
     display: none;
   }
   .mobile {
-    height: 4.75rem;
-    width: 100%;
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
   }
   .header {
     padding: 0;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index e39f9d5d..1c999d2c 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -11,23 +11,25 @@ import Link from 'next/link';
 const Header = ({ locale }: { locale: string }) => {
   return (
     <header className={styles.header}>
-      <div className={`${styles.mobile}`}>
+      <div className={styles.mobile}>
         <NavDrawer>
+          <User locale={locale} className={styles.mobileUser} />
           <Navigation locale={locale} desktop={false} />
-          <User locale={locale} />
-          <ThemeSelector />
-          <Link href="/post/search">
-            <SearchIcon />
-          </Link>
+          <div className={styles.mobileActions}>
+            <ThemeSelector />
+            <Link href="/post/search">
+              <SearchIcon />
+            </Link>
+          </div>
         </NavDrawer>
         <EscapeHatch locale={locale} />
       </div>
-      <div className={`${styles.desktop}`}>
+      <div className={styles.desktop}>
         <SearchSwitcher
           locale={locale}
           nav={<Navigation locale={locale} desktop />}
         >
-          <ThemeSelector />
+          <ThemeSelector className={styles.selector} />
           <User locale={locale} />
         </SearchSwitcher>
       </div>
diff --git a/src/components/Header/NavDrawer/NavDrawer.module.scss b/src/components/Header/NavDrawer/NavDrawer.module.scss
index c0c3e05b..484dd956 100644
--- a/src/components/Header/NavDrawer/NavDrawer.module.scss
+++ b/src/components/Header/NavDrawer/NavDrawer.module.scss
@@ -5,12 +5,14 @@
   color: var(--text-color);
   height: min(calc(1.5rem + 2.5vw), 2.5rem);
   width: min(calc(1.5rem + 2.5vw), 2.5rem);
+  cursor: pointer;
 }
 
 .drawer {
   position: fixed;
   display: flex;
   flex-direction: row;
+  transition: left 0.5s;
   top: 0;
   left: 0;
   width: 100vw;
@@ -30,23 +32,15 @@
 .content {
   position: absolute;
   background-color: var(--header-color);
+  max-width: 25rem;
   width: 70vw;
   height: 100%;
   z-index: 10;
-  animation: slideIn 0.5s;
   padding: 1.875rem 0;
   display: flex;
   flex-direction: column;
   overflow: scroll;
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
+  transition: left 0.5s;
 }
 
 .overlay {
@@ -54,7 +48,7 @@
   background-color: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100%;
-  animation: fadeIn 0.5s;
+  transition: opacity 0.5s;
 }
 
 @keyframes fadeIn {
@@ -66,10 +60,22 @@
   }
 }
 
-.open {
-  display: block;
+.checkbox + .drawer {
+  pointer-events: none;
+  .content {
+    left: -100%;
+  }
+  .overlay {
+    opacity: 0;
+  }
 }
 
-.closed {
-  display: none;
+.checkbox:checked + .drawer {
+  pointer-events: all;
+  .content {
+    left: 0;
+  }
+  .overlay {
+    opacity: 1;
+  }
 }
diff --git a/src/components/Header/NavDrawer/NavDrawer.tsx b/src/components/Header/NavDrawer/NavDrawer.tsx
index decc9e6e..676afe3a 100644
--- a/src/components/Header/NavDrawer/NavDrawer.tsx
+++ b/src/components/Header/NavDrawer/NavDrawer.tsx
@@ -1,17 +1,39 @@
 'use client';
-
+import { useRef, useEffect } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
 import styles from './NavDrawer.module.scss';
-import { useState } from 'react';
 import { FaBars } from 'react-icons/fa6';
 
 const NavDrawer = ({ children }: { children: React.ReactNode }) => {
-  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleClose = () => {
+    if (inputRef.current) {
+      inputRef.current.checked = false;
+    }
+  };
+
+  useEffect(() => {
+    handleClose();
+  }, [pathname, searchParams]);
+
   return (
     <div>
-      <FaBars className={styles.toggle} onClick={() => setOpen(!open)} />
-      <div className={`${styles.drawer} ${open ? styles.open : styles.closed}`}>
+      <label htmlFor="drawer-toggle">
+        <FaBars className={styles.toggle} />
+      </label>
+      <input
+        ref={inputRef}
+        className={styles.checkbox}
+        type="checkbox"
+        id="drawer-toggle"
+        hidden
+      />
+      <div className={styles.drawer}>
         <div className={styles.content}>{children}</div>
-        <div className={styles.overlay} onClick={() => setOpen(false)} />
+        <label htmlFor="drawer-toggle" className={styles.overlay} />
       </div>
     </div>
   );
diff --git a/src/components/Header/Navigation/Dropdown/Dropdown.tsx b/src/components/Header/Navigation/Dropdown/Dropdown.tsx
index a827fa45..77895989 100644
--- a/src/components/Header/Navigation/Dropdown/Dropdown.tsx
+++ b/src/components/Header/Navigation/Dropdown/Dropdown.tsx
@@ -1,6 +1,9 @@
+'use client';
+
 import { Poppins } from 'next/font/google';
 import styles from './Dropdown.module.scss';
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, useRef, useState } from 'react';
+import useClickOutside from '@/hooks/clickOutside';
 
 const poppins = Poppins({ subsets: ['latin'], weight: ['500'] });
 
@@ -19,16 +22,26 @@ const Dropdown = ({
   contentClassName,
   ...rest
 }: Props & HTMLAttributes<HTMLDivElement>) => {
+  const [isDroppedDown, setIsDroppedDown] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useClickOutside(ref, () => setIsDroppedDown(false));
+
   return (
-    <div className={`${styles.dropdown} ${className}`} {...rest}>
+    <div ref={ref} className={`${styles.dropdown} ${className}`} {...rest}>
       <input
-        type="radio"
+        type="checkbox"
         id={id}
         name="dropdown"
         className={styles.dropdownInput}
+        checked={isDroppedDown}
+        readOnly
         hidden
       />
-      <label htmlFor={id} className={styles.dropdownLabel}>
+      <label
+        htmlFor={id}
+        className={styles.dropdownLabel}
+        onClick={() => setIsDroppedDown((d) => !d)}
+      >
         {parent}
       </label>
       <div className={`${styles.dropdownHitbox}`} />
diff --git a/src/components/Header/ThemeSelector/ThemeSelector.module.scss b/src/components/Header/ThemeSelector/ThemeSelector.module.scss
index 2f013471..73e2d469 100644
--- a/src/components/Header/ThemeSelector/ThemeSelector.module.scss
+++ b/src/components/Header/ThemeSelector/ThemeSelector.module.scss
@@ -2,7 +2,6 @@
   font-size: 1.5rem;
   line-height: 1.2rem;
   color: var(--text-color);
-  padding: 0 1rem;
 }
 
 .loading {
diff --git a/src/components/Header/ThemeSelector/ThemeSelector.tsx b/src/components/Header/ThemeSelector/ThemeSelector.tsx
index d6842287..5f699532 100644
--- a/src/components/Header/ThemeSelector/ThemeSelector.tsx
+++ b/src/components/Header/ThemeSelector/ThemeSelector.tsx
@@ -5,7 +5,7 @@ import { BsFillSunFill, BsFillMoonFill, BsThreeDots } from 'react-icons/bs';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 
-const ThemeSelector = () => {
+const ThemeSelector = ({ className }: { className?: string }) => {
   const [mounted, setMounted] = useState(false);
   const { resolvedTheme, setTheme } = useTheme();
 
@@ -15,8 +15,8 @@ const ThemeSelector = () => {
 
   if (!mounted) {
     return (
-      <div className={`${styles.icon} ${styles.loading}`}>
-        <BsThreeDots />
+      <div className={`${styles.icon} ${className}`}>
+        <BsThreeDots className={styles.loading} />
       </div>
     );
   }
@@ -28,7 +28,10 @@ const ThemeSelector = () => {
   };
 
   return (
-    <a className={`${styles.icon} ${styles.toggle}`} onClick={toggleTheme}>
+    <a
+      className={`${styles.icon} ${styles.toggle} ${className}`}
+      onClick={toggleTheme}
+    >
       {isDark ? <BsFillMoonFill /> : <BsFillSunFill />}
     </a>
   );
diff --git a/src/components/Header/User/LoginButton/LoginButton.tsx b/src/components/Header/User/LoginButton/LoginButton.tsx
index e7bd7145..4fa58a4f 100644
--- a/src/components/Header/User/LoginButton/LoginButton.tsx
+++ b/src/components/Header/User/LoginButton/LoginButton.tsx
@@ -4,10 +4,18 @@ import ActionButton from '@/components/ActionButton/ActionButton';
 import i18nService from '@/services/i18nService';
 import { signIn } from 'next-auth/react';
 
-const LoginButton = ({ locale }: { locale: string }) => {
+const LoginButton = ({
+  locale,
+  className
+}: {
+  locale: string;
+  className?: string;
+}) => {
   const l = i18nService.getLocale(locale);
   return (
-    <ActionButton onClick={() => signIn('gamma')}>{l.user.login}</ActionButton>
+    <ActionButton className={className} onClick={() => signIn('gamma')}>
+      {l.user.login}
+    </ActionButton>
   );
 };
 
diff --git a/src/components/Header/User/User.module.scss b/src/components/Header/User/User.module.scss
index 83c48e8d..18212417 100644
--- a/src/components/Header/User/User.module.scss
+++ b/src/components/Header/User/User.module.scss
@@ -1,9 +1,3 @@
-.user {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .pfpContainer {
   position: relative;
   height: 2.5rem;
diff --git a/src/components/Header/User/User.tsx b/src/components/Header/User/User.tsx
index 49e7c6a2..973fce2f 100644
--- a/src/components/Header/User/User.tsx
+++ b/src/components/Header/User/User.tsx
@@ -9,36 +9,49 @@ import i18nService from '@/services/i18nService';
 import GammaService from '@/services/gammaService';
 import FallbackImage from '@/components/FallbackImage/FallbackImage';
 
-const User = async ({ locale }: { locale: string }) => {
+const User = async ({
+  locale,
+  className
+}: {
+  locale: string;
+  className?: string;
+}) => {
   const session = await getServerSession(authConfig);
   const id = session?.user?.id;
 
-  return (
-    <div className={styles.user}>
-      {id === undefined ? (
-        <LoginButton locale={locale} />
-      ) : (
-        <LoggedIn image={GammaService.getUserAvatarURL(id)} locale={locale} />
-      )}
-    </div>
+  return id === undefined ? (
+    <LoginButton className={className} locale={locale} />
+  ) : (
+    <LoggedIn
+      className={className}
+      image={GammaService.getUserAvatarURL(id)}
+      locale={locale}
+    />
   );
 };
 
-const LoggedIn = ({ image, locale }: { image: string; locale: string }) => {
+const LoggedIn = ({
+  image,
+  locale,
+  className
+}: {
+  image: string;
+  locale: string;
+  className?: string;
+}) => {
   const l = i18nService.getLocale(locale);
   return (
     <Dropdown
+      className={className}
       parent={
         <div className={styles.pfpContainer}>
-          <Link target="_blank" href={GammaService.gammaUrl ?? ''}>
-            <FallbackImage
-              src={image}
-              className={styles.pfp}
-              alt="Profile Picture"
-              width="3rem"
-              height="3rem"
-            />
-          </Link>
+          <FallbackImage
+            src={image}
+            className={styles.pfp}
+            alt="Profile Picture"
+            width="3rem"
+            height="3rem"
+          />
         </div>
       }
       id="user-dropdown"
diff --git a/src/components/Lunch/Lunch.tsx b/src/components/Lunch/Lunch.tsx
index a22facb0..5fad950a 100644
--- a/src/components/Lunch/Lunch.tsx
+++ b/src/components/Lunch/Lunch.tsx
@@ -12,7 +12,7 @@ const Lunch = async ({ locale }: { locale: string }) => {
     <ContentPane>
       <h1>Lunch</h1>
       <Divider />
-      <Collapsible>
+      <Collapsible id="lunch">
         {lunch.length === 0 && <p>{l.lunch.nolunch}</p>}
         {lunch.map((restaurant) => (
           <div key={restaurant.name}>
diff --git a/src/hooks/clickOutside.tsx b/src/hooks/clickOutside.tsx
new file mode 100644
index 00000000..ae47600e
--- /dev/null
+++ b/src/hooks/clickOutside.tsx
@@ -0,0 +1,21 @@
+import { useEffect, RefObject } from 'react';
+
+export default function useClickOutside(
+  ref: RefObject<HTMLElement>,
+  handleOnClickOutside: (event: MouseEvent | TouchEvent) => void
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handleOnClickOutside(event);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handleOnClickOutside]);
+}