diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 5ded5fb..2896769 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -21,6 +21,7 @@ import BlueskyIcon from '@/components/BlueskyIcon'
 import GitHubIcon from '@/components/GitHubIcon'
 import AtIcon from '@/components/AtIcon'
 import DocumentIcon from '@/components/DocumentIcon'
+import Logo from '@/components/Logo'
 
 type TabType = 'featured' | 'recent' | 'viewed'
 
@@ -93,7 +94,7 @@ export default function HomePage() {
     <div className={styles.container}>
       <header className={styles.header}>
         <div className={styles.headerContent}>
-          <h1 className={styles.title}>LexHub</h1>
+          <Logo className={styles.title} />
           <div className={styles.socialLinks}>
             <a
               href="https://bsky.app"
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
new file mode 100644
index 0000000..8d50804
--- /dev/null
+++ b/src/components/Logo.tsx
@@ -0,0 +1,7 @@
+export interface LogoProps {
+  className?: string
+}
+
+export default function Logo({ className }: LogoProps) {
+  return <h1 className={className}>LexHub</h1>
+}