diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index b5ee010..bc0116a 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -5,6 +5,36 @@ interface IIconProps {
     className?: string | ClassNames;
 }
 
+export const HamburgerIcon: React.FC<IIconProps> = ({ className = "size-6" }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className={new ClassNames(className).list()}
+    >
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+        />
+    </svg>
+);
+
+export const CloseIcon: React.FC<IIconProps> = ({ className = "size-6" }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className={new ClassNames(className).list()}
+    >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+    </svg>
+);
+
 export const TwitterIcon: React.FC<IIconProps> = ({ className = "" }) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -91,12 +121,102 @@ export const StarIcon: React.FC<IIconProps> = ({ className = "" }) => (
     </svg>
 );
 
+export const LinkIcon: React.FC<IIconProps> = ({ className = "size-6" }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className={new ClassNames(className).list()}
+    >
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+        />
+    </svg>
+);
+
+export const HomeIcon: React.FC<IIconProps> = ({ className = "size-6" }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className={new ClassNames(className).list()}
+    >
+        <path d="M19.006 3.705a.75.75 0 1 0-.512-1.41L6 6.838V3a.75.75 0 0 0-.75-.75h-1.5A.75.75 0 0 0 3 3v4.93l-1.006.365a.75.75 0 0 0 .512 1.41l16.5-6Z" />
+        <path
+            fillRule="evenodd"
+            d="M3.019 11.114 18 5.667v3.421l4.006 1.457a.75.75 0 1 1-.512 1.41l-.494-.18v8.475h.75a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1 0-1.5H3v-9.129l.019-.007ZM18 20.25v-9.566l1.5.546v9.02H18Zm-9-6a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75H9Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const BlogIcon: React.FC<IIconProps> = ({ className = "size-6" }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className={new ClassNames(className).list()}
+    >
+        <path
+            fillRule="evenodd"
+            d="M4.125 3C3.089 3 2.25 3.84 2.25 4.875V18a3 3 0 0 0 3 3h15a3 3 0 0 1-3-3V4.875C17.25 3.839 16.41 3 15.375 3H4.125ZM12 9.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5H12Zm-.75-2.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM6 12.75a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5H6Zm-.75 3.75a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75ZM6 6.75a.75.75 0 0 0-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75v-3A.75.75 0 0 0 9 6.75H6Z"
+            clipRule="evenodd"
+        />
+        <path d="M18.75 6.75h1.875c.621 0 1.125.504 1.125 1.125V18a1.5 1.5 0 0 1-3 0V6.75Z" />
+    </svg>
+);
+
+export const UsesIcon: React.FC<IIconProps> = ({ className = "size-6" }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className={new ClassNames(className).list()}
+    >
+        <path
+            fillRule="evenodd"
+            d="M12 6.75a5.25 5.25 0 0 1 6.775-5.025.75.75 0 0 1 .313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 0 1 1.248.313 5.25 5.25 0 0 1-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 1 1 2.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0 1 12 6.75ZM4.117 19.125a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z"
+            clipRule="evenodd"
+        />
+        <path d="m10.076 8.64-2.201-2.2V4.874a.75.75 0 0 0-.364-.643l-3.75-2.25a.75.75 0 0 0-.916.113l-.75.75a.75.75 0 0 0-.113.916l2.25 3.75a.75.75 0 0 0 .643.364h1.564l2.062 2.062 1.575-1.297Z" />
+        <path
+            fillRule="evenodd"
+            d="m12.556 17.329 4.183 4.182a3.375 3.375 0 0 0 4.773-4.773l-3.306-3.305a6.803 6.803 0 0 1-1.53.043c-.394-.034-.682-.006-.867.042a.589.589 0 0 0-.167.063l-3.086 3.748Zm3.414-1.36a.75.75 0 0 1 1.06 0l1.875 1.876a.75.75 0 1 1-1.06 1.06L15.97 17.03a.75.75 0 0 1 0-1.06Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const CodeIcon: React.FC<IIconProps> = ({ className = "size-6" }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className={new ClassNames(className).list()}
+    >
+        <path
+            fillRule="evenodd"
+            d="M2.25 5.25a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3V15a3 3 0 0 1-3 3h-3v.257c0 .597.237 1.17.659 1.591l.621.622a.75.75 0 0 1-.53 1.28h-9a.75.75 0 0 1-.53-1.28l.621-.622a2.25 2.25 0 0 0 .659-1.59V18h-3a3 3 0 0 1-3-3V5.25Zm1.5 0v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
 const icons = {
     blueSky: BlueSkyIcon,
     twitter: TwitterIcon,
     github: GithubIcon,
     fork: ForkIcon,
-    linkedin: LinkedInIcon
+    linkedin: LinkedInIcon,
+    link: LinkIcon,
+    home: HomeIcon,
+    blog: BlogIcon,
+    uses: UsesIcon,
+    code: CodeIcon
 } as const;
 export type IconName = keyof typeof icons;
 export const Icon: React.FC<{ name: IconName } & IIconProps> = ({ name, className = "" }) => {
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index a203e96..4c289ae 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -55,7 +55,7 @@ const rgb = (hex: string) => {
 </style>
 
 <script is:inline>
-    const handleToggleClick = (e) => {
+    function handleToggleClick(e) {
         if (e) {
             e.preventDefault();
             e.stopPropagation();
@@ -65,9 +65,9 @@ const rgb = (hex: string) => {
 
         const isDark = element.classList.contains("dark");
         localStorage.setItem("theme", isDark ? "dark" : "light");
-    };
+    }
 
-    const setThemeColor = (color) => {
+    function setThemeColor(color) {
         if (!color) {
             return;
         }
@@ -81,7 +81,7 @@ const rgb = (hex: string) => {
         document
             .querySelector(".theme-button[data-value='" + color + "']")
             .classList.add("selected");
-    };
+    }
 
     function pageSetup() {
         const theme = (() => {
@@ -107,15 +107,14 @@ const rgb = (hex: string) => {
             setThemeColor(color);
         }
 
-        const modeButton = document.getElementById("ThemeToggle");
-        if (modeButton) {
+        const modeButtons = document.querySelectorAll(".light-dark-toggle");
+        for (const modeButton of modeButtons) {
             modeButton.addEventListener("click", handleToggleClick);
         }
 
         const themeButtons = document.querySelectorAll(".theme-button");
         for (const themeButton of themeButtons) {
             themeButton.addEventListener("click", (e) => {
-                console.log("themeButton click");
                 if (e) {
                     e.preventDefault();
                     e.stopPropagation();
@@ -136,8 +135,7 @@ const rgb = (hex: string) => {
 <ul class="flex items-center gap-2">
     <li class="flex items-center">
         <button
-            id="ThemeToggle"
-            class="rounded-full bg-transparent p-1 transition duration-200 hover:bg-primary/50"
+            class="light-dark-toggle rounded-full bg-transparent p-1 transition duration-200 hover:bg-primary/50"
         >
             <svg class="size-8 lg:size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                 <path
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 8d4ddcf..cedb77a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,6 @@
 ---
 import { Picture, getImage } from "astro:assets";
-import { Icon } from "~components/Icons";
+import { Icon, HamburgerIcon, CloseIcon } from "~components/Icons";
 import type { IconName } from "~components/Icons";
 import myImage from "../assets/me.png";
 import Glow from "~components/Glow.astro";
@@ -22,11 +22,11 @@ interface Props {
     publishDate?: string;
 }
 
-const navItems: Array<{ name: string; href: string; className?: string }> = [
-    { name: "Home", href: "/", className: "hidden lg:block" },
-    { name: "Blog", href: "/blog" },
-    { name: "Uses", href: "/uses" },
-    { name: "Code", href: "/code" }
+const navItems: Array<{ name: string; href: string; className?: string; icon?: IconName }> = [
+    { name: "Home", href: "/", className: "hidden lg:block", icon: "home" },
+    { name: "Blog", href: "/blog", icon: "blog" },
+    { name: "Uses", href: "/uses", icon: "uses" },
+    { name: "Code", href: "/code", icon: "code" }
 ];
 
 const socialMediaItems: Array<{ name: string; href: string; icon: IconName }> = [
@@ -135,6 +135,7 @@ import "./../styles/global.css";
     <body
         class="absolute inset-0 flex h-screen min-w-[350px] flex-col bg-white text-slate-900 lg:flex-row lg:overflow-hidden dark:bg-gray-950 dark:text-slate-50"
     >
+        <input type="checkbox" id="menu-toggle" title="Toggle the Mobile Navigation" />
         <section
             id="sidebar"
             class:list={[
@@ -150,7 +151,7 @@ import "./../styles/global.css";
             >
                 <a
                     href="/"
-                    class="flex w-1/3 min-w-[115px] items-center gap-4 decoration-transparent lg:w-full lg:flex-col lg:items-start"
+                    class="flex w-full min-w-[115px] items-center gap-4 decoration-transparent sm:w-1/3 lg:w-full lg:flex-col lg:items-start"
                 >
                     <header class="flex items-center gap-4 lg:flex-col lg:items-start">
                         <Picture
@@ -166,7 +167,17 @@ import "./../styles/global.css";
                         <h1 class="text-lg font-bold lg:text-2xl">Christopher Vachon</h1>
                     </header>
                 </a>
-                <nav class="w-1/3 lg:w-full">
+                <nav>
+                    <label
+                        for="menu-toggle"
+                        id="menu-open-toggle"
+                        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded transition-colors duration-200 ease-in-out hover:bg-primary md:hidden dark:bg-slate-800 dark:text-white"
+                        aria-label="Toggle menu"
+                    >
+                        <HamburgerIcon className={"size-8"} />
+                    </label>
+                </nav>
+                <nav class="hidden w-1/3 md:block lg:w-full">
                     <ul class="flex justify-center gap-6 lg:flex-col lg:gap-2">
                         {
                             navItems.map((item) => (
@@ -182,7 +193,7 @@ import "./../styles/global.css";
                         }
                     </ul>
                 </nav>
-                <nav class="flex w-1/3 justify-end lg:w-full lg:justify-start">
+                <nav class="hidden w-1/3 justify-end md:flex lg:w-full lg:justify-start">
                     <ol class="flex items-center gap-2">
                         {
                             socialMediaItems.map(({ name, href, icon }) => (
@@ -236,6 +247,68 @@ import "./../styles/global.css";
                 </p>
             </footer>
         </section>
+        <section id="flyout-menu">
+            <label id="backdrop" for="menu-toggle">
+                <label for="menu-toggle">
+                    <CloseIcon
+                        className={"size-12 text-white transition-colors duration-200 hover:text-primary dark:text-white"}
+                    />
+                </label>
+            </label>
+            <nav
+                class="fixed bottom-0 right-0 top-0 flex w-[90vw] min-w-[300px] flex-col justify-between overflow-y-auto bg-white shadow-md sm:w-[400px] dark:bg-slate-800"
+            >
+                <ol class="">
+                    {
+                        navItems.map((item) => (
+                            <li class={Astro.url.pathname === item.href ? "bg-primary/50" : ""}>
+                                <a
+                                    href={item.href}
+                                    title={`Check me out on ${item.name}`}
+                                    class="flex cursor-pointer items-center gap-6 p-4 decoration-transparent transition duration-200 ease-in-out hover:bg-primary hover:text-white"
+                                >
+                                    <Icon name={item.icon ?? "link"} className="size-12" />
+                                    <span class="text-xl">{item.name}</span>
+                                </a>
+                            </li>
+                        ))
+                    }
+                </ol>
+
+                <ol>
+                    {
+                        socialMediaItems.map(({ name, href, icon }) => (
+                            <li>
+                                <a
+                                    href={href}
+                                    target="_blank"
+                                    title={`Check me out on ${name}`}
+                                    class=" flex cursor-pointer items-center gap-6 p-4 decoration-transparent transition duration-200 ease-in-out hover:bg-primary hover:text-white"
+                                >
+                                    <Icon name={icon} className="size-12" />
+                                    <span class="text-xl">{name}</span>
+                                </a>
+                            </li>
+                        ))
+                    }
+
+                    <li>
+                        <label for="menu-toggle">
+                            <div
+                                class="flex cursor-pointer items-center gap-6 p-4 transition duration-200 ease-in-out hover:bg-primary hover:text-white"
+                            >
+                                <CloseIcon className={"size-12"} />
+                                <span class="text-xl">Close</span>
+                            </div>
+                        </label>
+                    </li>
+                    <li class="p-4">
+                        <ThemeToggle />
+                    </li>
+                </ol>
+            </nav>
+        </section>
+
         <!-- Google tag (gtag.js) -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=G-RREP1WR95X"></script>
         <script is:inline>
@@ -247,5 +320,13 @@ import "./../styles/global.css";
 
             gtag("config", "G-RREP1WR95X");
         </script>
+        <script is:inline>
+            document.addEventListener("astro:before-swap", (ev) => {
+                const toggle = document.getElementById("menu-toggle");
+                if (toggle.checked) {
+                    toggle.checked = false;
+                }
+            });
+        </script>
     </body>
 </html>
diff --git a/src/styles/global.css b/src/styles/global.css
index 5123f60..696eff6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -71,4 +71,32 @@
             @apply absolute -left-36 top-4 size-32;
         }
     }
+
+    #flyout-menu {
+        #backdrop {
+            @apply fixed inset-0 z-0 bg-slate-500/0 backdrop-blur-none duration-300 ease-in-out;
+            label {
+                @apply absolute left-4 top-0 -translate-y-full transform cursor-pointer duration-500 ease-in-out;
+            }
+        }
+        nav {
+            @apply z-[1001] translate-x-full transform duration-500 ease-in-out;
+        }
+
+        #menu-toggle:checked ~ & {
+            #backdrop {
+                @apply fixed inset-0 z-[1000] bg-slate-500/30 backdrop-blur-sm;
+                label {
+                    @apply sm:translate-y-4;
+                }
+            }
+            nav {
+                @apply translate-x-0;
+            }
+        }
+    }
+
+    #menu-toggle {
+        @apply hidden;
+    }
 }