diff --git a/app/components/logo.tsx b/app/components/logo.tsx
new file mode 100644
index 000000000..5776eaa37
--- /dev/null
+++ b/app/components/logo.tsx
@@ -0,0 +1,14 @@
+import { Link } from "react-router";
+
+export function Logo() {
+	return (
+		<Link to="/" className="group grid leading-snug">
+			<span className="font-light transition group-hover:-translate-x-1">
+				epic
+			</span>
+			<span className="font-bold transition group-hover:translate-x-1">
+				notes
+			</span>
+		</Link>
+	)
+}
\ No newline at end of file
diff --git a/app/root.tsx b/app/root.tsx
index 0f0d1cb56..f2d2b2233 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -15,6 +15,7 @@ import { type Route } from './+types/root.ts'
 import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'
 import faviconAssetUrl from './assets/favicons/favicon.svg'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
+import { Logo } from './components/logo.tsx'
 import { EpicProgress } from './components/progress-bar.tsx'
 import { SearchBar } from './components/search-bar.tsx'
 import { useToast } from './components/toaster.tsx'
@@ -234,19 +235,6 @@ function App() {
 	)
 }
 
-function Logo() {
-	return (
-		<Link to="/" className="group grid leading-snug">
-			<span className="font-light transition group-hover:-translate-x-1">
-				epic
-			</span>
-			<span className="font-bold transition group-hover:translate-x-1">
-				notes
-			</span>
-		</Link>
-	)
-}
-
 function AppWithProviders() {
 	const data = useLoaderData<typeof loader>()
 	return (