diff --git a/components/Header.tsx b/components/Header.tsx
index 4d5d1b6..3caa32a 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,112 +1,10 @@
-import Link from 'next/link'
 import {usePathname} from 'next/navigation'
-import {Fragment, useEffect, useRef} from 'react'
-import {Popover, Transition} from '@headlessui/react'
-import clsx from 'clsx'
+import {useEffect, useRef} from 'react'
 import {Container} from './Container'
-import {MobileNavItem} from './ui/MobileNavItem'
+import {MobileNavigation, DesktopNavigation} from './ui/Navigation'
 import {Avatar, AvatarContainer} from './ui/Avatar'
-import {CloseIcon} from './icons/CloseIcon'
-import {ChevronDownIcon} from './icons/ChevronDownIcon'
 import {MoonIcon} from './icons/MoonIcon'
 import {SunIcon} from './icons/SunIcon'
-import type {Props} from 'types'
-
-function MobileNavigation(props: Props) {
-    return (
-        <Popover {...props}>
-            <Popover.Button
-                className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20">
-                Menu
-                <ChevronDownIcon
-                    className="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400"/>
-            </Popover.Button>
-            <Transition.Root>
-                <Transition.Child
-                    as={Fragment}
-                    enter="duration-150 ease-out"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="duration-150 ease-in"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                >
-                    <Popover.Overlay className="fixed inset-0 z-50 bg-zinc-800/40 backdrop-blur-sm dark:bg-black/80"/>
-                </Transition.Child>
-                <Transition.Child
-                    as={Fragment}
-                    enter="duration-150 ease-out"
-                    enterFrom="opacity-0 scale-95"
-                    enterTo="opacity-100 scale-100"
-                    leave="duration-150 ease-in"
-                    leaveFrom="opacity-100 scale-100"
-                    leaveTo="opacity-0 scale-95"
-                >
-                    <Popover.Panel
-                        focus
-                        className="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5 dark:bg-zinc-900 dark:ring-zinc-800"
-                    >
-                        <div className="flex flex-row-reverse items-center justify-between">
-                            <Popover.Button aria-label="Close menu" className="-m-1 p-1">
-                                <CloseIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400"/>
-                            </Popover.Button>
-                            <h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
-                                Navigation
-                            </h2>
-                        </div>
-                        <nav className="mt-6">
-                            <ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
-                                <MobileNavItem href="/about">About</MobileNavItem>
-                                <MobileNavItem href="/dashboard">Dashboard</MobileNavItem>
-                                <MobileNavItem href="/writing">Writing</MobileNavItem>
-                                <MobileNavItem href="/projects">Projects</MobileNavItem>
-                                <MobileNavItem href="/uses">Uses</MobileNavItem>
-                            </ul>
-                        </nav>
-                    </Popover.Panel>
-                </Transition.Child>
-            </Transition.Root>
-        </Popover>
-    )
-}
-
-function NavItem({href, children}: { href: string } & Props) {
-    let isActive = usePathname() === href
-
-    return (
-        <li>
-            <Link
-                href={href}
-                className={clsx(
-                    'relative block px-3 py-2 transition',
-                    isActive
-                        ? 'text-indigo-500 dark:text-indigo-400'
-                        : 'hover:text-indigo-500 dark:hover:text-indigo-400'
-                )}
-            >
-                {children}
-                {isActive && (
-                    <span
-                        className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-indigo-500/0 via-indigo-500/40 to-indigo-500/0 dark:from-indigo-400/0 dark:via-indigo-400/40 dark:to-indigo-400/0"/>
-                )}
-            </Link>
-        </li>
-    )
-}
-
-function DesktopNavigation(props: Props) {
-    return (
-        <nav {...props}>
-            <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
-                <NavItem href="/about">About</NavItem>
-                <NavItem href="/dashboard">Dashboard</NavItem>
-                <NavItem href="/writing">Writing</NavItem>
-                <NavItem href="/projects">Projects</NavItem>
-                <NavItem href="/uses">Uses</NavItem>
-            </ul>
-        </nav>
-    )
-}
 
 function ModeToggle() {
     function disableTransitionsTemporarily() {
diff --git a/components/ui/MobileNavItem.tsx b/components/ui/MobileNavItem.tsx
deleted file mode 100644
index 9c0a1ed..0000000
--- a/components/ui/MobileNavItem.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Props} from '@/types';
-import {Popover} from '@headlessui/react'
-import Link from 'next/link'
-
-export function MobileNavItem({href, children}: { href: string } & Props) {
-    return (
-        <li>
-            <Popover.Button as={Link} href={href} className="block py-2">
-                {children}
-            </Popover.Button>
-        </li>
-    )
-}
\ No newline at end of file
diff --git a/components/ui/Navigation.tsx b/components/ui/Navigation.tsx
new file mode 100644
index 0000000..cc2ee5e
--- /dev/null
+++ b/components/ui/Navigation.tsx
@@ -0,0 +1,115 @@
+import {Fragment} from 'react'
+import {usePathname} from 'next/navigation'
+import {Popover, Transition} from '@headlessui/react'
+import clsx from 'clsx'
+import Link from 'next/link'
+import {ChevronDownIcon} from '@/components/icons/ChevronDownIcon'
+import {CloseIcon} from '@/components/icons/CloseIcon'
+import {Props} from '@/types'
+
+function MobileNavItem({href, children}: { href: string } & Props) {
+    return (
+        <li>
+            <Popover.Button as={Link} href={href} className="block py-2">
+                {children}
+            </Popover.Button>
+        </li>
+    )
+}
+
+export function MobileNavigation(props: Props) {
+    return (
+        <Popover {...props}>
+            <Popover.Button
+                className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20">
+                Menu
+                <ChevronDownIcon
+                    className="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400"/>
+            </Popover.Button>
+            <Transition.Root>
+                <Transition.Child
+                    as={Fragment}
+                    enter="duration-150 ease-out"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="duration-150 ease-in"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <Popover.Overlay className="fixed inset-0 z-50 bg-zinc-800/40 backdrop-blur-sm dark:bg-black/80"/>
+                </Transition.Child>
+                <Transition.Child
+                    as={Fragment}
+                    enter="duration-150 ease-out"
+                    enterFrom="opacity-0 scale-95"
+                    enterTo="opacity-100 scale-100"
+                    leave="duration-150 ease-in"
+                    leaveFrom="opacity-100 scale-100"
+                    leaveTo="opacity-0 scale-95"
+                >
+                    <Popover.Panel
+                        focus
+                        className="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5 dark:bg-zinc-900 dark:ring-zinc-800"
+                    >
+                        <div className="flex flex-row-reverse items-center justify-between">
+                            <Popover.Button aria-label="Close menu" className="-m-1 p-1">
+                                <CloseIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400"/>
+                            </Popover.Button>
+                            <h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
+                                Navigation
+                            </h2>
+                        </div>
+                        <nav className="mt-6">
+                            <ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
+                                <MobileNavItem href="/about">About</MobileNavItem>
+                                <MobileNavItem href="/dashboard">Dashboard</MobileNavItem>
+                                <MobileNavItem href="/writing">Writing</MobileNavItem>
+                                <MobileNavItem href="/projects">Projects</MobileNavItem>
+                                <MobileNavItem href="/uses">Uses</MobileNavItem>
+                            </ul>
+                        </nav>
+                    </Popover.Panel>
+                </Transition.Child>
+            </Transition.Root>
+        </Popover>
+    )
+}
+
+function NavItem({href, children}: { href: string } & Props) {
+    let isActive = usePathname() === href
+
+    return (
+        <li>
+            <Link
+                href={href}
+                className={clsx(
+                    'relative block px-3 py-2 transition',
+                    isActive
+                        ? 'text-indigo-500 dark:text-indigo-400'
+                        : 'hover:text-indigo-500 dark:hover:text-indigo-400'
+                )}
+            >
+                {children}
+                {isActive && (
+                    <span
+                        className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-indigo-500/0 via-indigo-500/40 to-indigo-500/0 dark:from-indigo-400/0 dark:via-indigo-400/40 dark:to-indigo-400/0"/>
+                )}
+            </Link>
+        </li>
+    )
+}
+
+export function DesktopNavigation(props: Props) {
+    return (
+        <nav {...props}>
+            <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
+                <NavItem href="/about">About</NavItem>
+                <NavItem href="/dashboard">Dashboard</NavItem>
+                <NavItem href="/writing">Writing</NavItem>
+                <NavItem href="/projects">Projects</NavItem>
+                <NavItem href="/uses">Uses</NavItem>
+            </ul>
+        </nav>
+    )
+}
+