diff --git a/components/Header.tsx b/components/Header.tsx
index b9edc8d..4d5d1b6 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,4 +1,3 @@
-import Image from 'next/image'
 import Link from 'next/link'
 import {usePathname} from 'next/navigation'
 import {Fragment, useEffect, useRef} from 'react'
@@ -6,11 +5,11 @@ import {Popover, Transition} from '@headlessui/react'
 import clsx from 'clsx'
 import {Container} from './Container'
 import {MobileNavItem} from './ui/MobileNavItem'
+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 avatar from '@/public/static/images/avatar.jpg'
 import type {Props} from 'types'
 
 function MobileNavigation(props: Props) {
@@ -152,40 +151,6 @@ function clamp(num: number, a: number, b: number) {
     return Math.min(Math.max(num, min), max)
 }
 
-function AvatarContainer({className, ...props}: { style?: Object } & Props) {
-    return (
-        <div
-            className={clsx(
-                className,
-                'h-10 w-10 rounded-full bg-white/90 p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:ring-white/10'
-            )}
-            {...props}
-        />
-    )
-}
-
-function Avatar({large = false, className, ...props}: { large?: boolean, style?: Object } & Props) {
-    return (
-        <Link
-            href="/"
-            aria-label="Home"
-            className={clsx(className, 'pointer-events-auto')}
-            {...props}
-        >
-            <Image
-                src={avatar}
-                alt=""
-                sizes={large ? '4rem' : '2.25rem'}
-                className={clsx(
-                    'rounded-full bg-zinc-100 object-cover dark:bg-zinc-800',
-                    large ? 'h-16 w-16' : 'h-9 w-9'
-                )}
-                placeholder="blur"
-            />
-        </Link>
-    )
-}
-
 export function Header() {
     const isHomePage = usePathname() === '/'
 
diff --git a/components/ui/Avatar.tsx b/components/ui/Avatar.tsx
new file mode 100644
index 0000000..6320932
--- /dev/null
+++ b/components/ui/Avatar.tsx
@@ -0,0 +1,39 @@
+import {Props} from '@/types'
+import clsx from 'clsx'
+import Link from 'next/link'
+import Image from 'next/image'
+import avatar from '@/public/static/images/avatar.jpg'
+
+export function AvatarContainer({className, ...props}: { style?: Object } & Props) {
+    return (
+        <div
+            className={clsx(
+                className,
+                'h-10 w-10 rounded-full bg-white/90 p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:ring-white/10'
+            )}
+            {...props}
+        />
+    )
+}
+
+export function Avatar({large = false, className, ...props}: { large?: boolean, style?: Object } & Props) {
+    return (
+        <Link
+            href="/"
+            aria-label="Home"
+            className={clsx(className, 'pointer-events-auto')}
+            {...props}
+        >
+            <Image
+                src={avatar}
+                alt=""
+                sizes={large ? '4rem' : '2.25rem'}
+                className={clsx(
+                    'rounded-full bg-zinc-100 object-cover dark:bg-zinc-800',
+                    large ? 'h-16 w-16' : 'h-9 w-9'
+                )}
+                placeholder="blur"
+            />
+        </Link>
+    )
+}
\ No newline at end of file