diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
new file mode 100644
index 0000000..65942c8
--- /dev/null
+++ b/frontend/src/components/Header.tsx
@@ -0,0 +1,28 @@
+import { Link } from "@tanstack/react-router";
+import { ConnectMetamaskButton } from "./ConnectMetamaskButton";
+
+export function Header() {
+	return (
+		<header className="bg-primary text-primary-content p-4 flex items-center">
+			<div className="flex-grow">
+				<span className="text-4xl font-bold">OsiPad&trade;</span>
+				<hr className="my-1" />
+				<div className="flex gap-3">
+					<Link to="/" className="[&.active]:font-bold">
+						Home
+					</Link>
+					<Link to="/about" className="[&.active]:font-bold">
+						About
+					</Link>
+					<Link to="/message-box" className="[&.active]:font-bold">
+						Message Box
+					</Link>
+					<Link to="/pad-token" className="[&.active]:font-bold">
+						PAD Token
+					</Link>
+				</div>
+			</div>
+			<ConnectMetamaskButton />
+		</header>
+	);
+}
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index 2e1d31b..6a1db69 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -1,6 +1,6 @@
-import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
+import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { Toaster } from "sonner";
-import { ConnectMetamaskButton } from "../components/ConnectMetamaskButton";
+import { Header } from "../components/Header";
 
 export const Route = createRootRoute({
 	component: RootLayout,
@@ -9,27 +9,7 @@ export const Route = createRootRoute({
 function RootLayout() {
 	return (
 		<>
-			<header className="bg-primary text-primary-content p-4 flex items-center">
-				<div className="flex-grow">
-					<span className="text-4xl font-bold">OsiPad&trade;</span>
-					<hr className="my-1" />
-					<div className="flex gap-3">
-						<Link to="/" className="[&.active]:font-bold">
-							Home
-						</Link>
-						<Link to="/about" className="[&.active]:font-bold">
-							About
-						</Link>
-						<Link to="/message-box" className="[&.active]:font-bold">
-							Message Box
-						</Link>
-						<Link to="/pad-token" className="[&.active]:font-bold">
-							PAD Token
-						</Link>
-					</div>
-				</div>
-				<ConnectMetamaskButton />
-			</header>
+			<Header />
 			<main>
 				<Outlet />
 				<Toaster />