diff --git a/web/src/app/login/page.tsx b/web/src/app/login/page.tsx
index 562f99a..497ed2b 100644
--- a/web/src/app/login/page.tsx
+++ b/web/src/app/login/page.tsx
@@ -1,24 +1,12 @@
-import Image from 'next/image'
 import { Suspense } from 'react'
 import { LoginForm } from '@/components/login/login-form'
-import config from '@/config'
+import { AuthHeader } from '@/components/common/auth-header'
 
 function LoginPageContent() {
   return (
     <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
       <div className="flex w-full max-w-sm flex-col gap-6">
-        <a href="#" className="flex items-center gap-3 self-center font-bold text-2xl">
-          <div className="flex size-10 items-center justify-center rounded-full overflow-hidden border-2 border-gray-300 dark:border-gray-600">
-            <Image
-              src={config.metadata.icon}
-              alt="Logo"
-              width={40}
-              height={40}
-              className="rounded-full object-cover"
-            />
-          </div>
-          <span className="font-bold text-2xl">{config.metadata.name}</span>
-        </a>
+        <AuthHeader />
         <LoginForm />
       </div>
     </div>
diff --git a/web/src/app/reset-password/page.tsx b/web/src/app/reset-password/page.tsx
index 5c7b4e3..00e3a12 100644
--- a/web/src/app/reset-password/page.tsx
+++ b/web/src/app/reset-password/page.tsx
@@ -1,23 +1,10 @@
+import { AuthHeader } from "@/components/common/auth-header";
 import { ResetPasswordForm } from "@/components/reset-password/reset-password-form";
-import config from "@/config";
-import Image from "next/image";
-
 export default function Page() {
   return (
     <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
       <div className="flex w-full max-w-sm flex-col gap-6">
-        <a href="#" className="flex items-center gap-3 self-center font-bold text-2xl">
-          <div className="flex size-10 items-center justify-center rounded-full overflow-hidden border-2 border-gray-300 dark:border-gray-600">
-            <Image
-              src={config.metadata.icon}
-              alt="Logo"
-              width={40}
-              height={40}
-              className="rounded-full object-cover"
-            />
-          </div>
-          <span className="font-bold text-2xl">{config.metadata.name}</span>
-        </a>
+        <AuthHeader />
         <ResetPasswordForm />
       </div>
     </div>
diff --git a/web/src/components/common/auth-header.tsx b/web/src/components/common/auth-header.tsx
new file mode 100644
index 0000000..23f0d70
--- /dev/null
+++ b/web/src/components/common/auth-header.tsx
@@ -0,0 +1,19 @@
+import config from "@/config";
+import Image from "next/image";
+
+export function AuthHeader() {
+  return (
+    <div className="flex items-center gap-3 self-center font-bold text-2xl">
+      <div className="flex size-10 items-center justify-center rounded-full overflow-hidden border-2 border-gray-300 dark:border-gray-600">
+        <Image
+          src={config.metadata.icon}
+          alt="Logo"
+          width={40}
+          height={40}
+          className="rounded-full object-cover"
+        />
+      </div>
+      <span className="font-bold text-2xl">{config.metadata.name}</span>
+    </div>
+  )
+}
\ No newline at end of file