diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
new file mode 100644
index 0000000..c1ab047
--- /dev/null
+++ b/src/components/footer/index.tsx
@@ -0,0 +1,18 @@
+import { useTranslation } from "react-i18next"
+import { useMemo } from "react"
+import dayjs from "dayjs"
+
+export default function Footer() {
+  const { t } = useTranslation()
+  const today = useMemo(() => dayjs(), [])
+
+  return (
+    <footer className="bg-white border-t shrink-0">
+      <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
+        <p className="text-center text-sm text-gray-500">
+          {t("app.copyright", { year: today.year() })}
+        </p>
+      </div>
+    </footer>
+  )
+}
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
new file mode 100644
index 0000000..aebf9fb
--- /dev/null
+++ b/src/components/header/index.tsx
@@ -0,0 +1,39 @@
+import { Link } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import LanguageSwitcher from "@/components/language-switcher"
+
+export default function Header() {
+  const { t } = useTranslation()
+
+  return (
+    <header className="bg-white shadow-sm border-b">
+      <div className="px-4">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center">
+            <h1 className="text-xl font-semibold text-gray-900">{t("app.title")}</h1>
+          </div>
+          <div className="flex items-center gap-4">
+            <nav className="flex space-x-8">
+              <Link
+                to="/"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
+                {t("navigation.home")}
+              </Link>
+              <Link
+                to="/about"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
+                {t("navigation.about")}
+              </Link>
+              <Link
+                to="/contact"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
+                {t("navigation.contact")}
+              </Link>
+            </nav>
+            <LanguageSwitcher />
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/src/layout/hero-layout/index.tsx b/src/layout/hero-layout/index.tsx
index aa44f94..0b5f43e 100644
--- a/src/layout/hero-layout/index.tsx
+++ b/src/layout/hero-layout/index.tsx
@@ -3,6 +3,8 @@ import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import dayjs from "dayjs"
 import LanguageSwitcher from "@/components/language-switcher"
+import Header from "@/components/header"
+import Footer from "@/components/footer"
 
 /**
  * Main application component that serves as the root layout.
@@ -15,46 +17,7 @@ export default function HeroLayout() {
   return (
     <div className="h-screen bg-gray-50 flex flex-col overflow-hidden">
       {/* Navigation Header */}
-      <header className="bg-white shadow-sm border-b">
-        <div className="px-4">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center">
-              <h1 className="text-xl font-semibold text-gray-900">
-                {t("app.title")}
-              </h1>
-            </div>
-            <div className="flex items-center gap-4">
-              <nav className="flex space-x-8">
-                <Link
-                  to="/"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-                >
-                  {t("navigation.home")}
-                </Link>
-                <Link
-                  to="/about"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-                >
-                  {t("navigation.about")}
-                </Link>
-                <Link
-                  to="/contact"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-                >
-                  {t("navigation.contact")}
-                </Link>
-                <Link
-                  to="/changelog"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-                >
-                  {t("navigation.changelog")}
-                </Link>
-              </nav>
-              <LanguageSwitcher />
-            </div>
-          </div>
-        </div>
-      </header>
+      <Header></Header>
 
       {/* Main Content Area */}
       <main className="flex-1 p-4 overflow-hidden min-h-0">
@@ -62,13 +25,7 @@ export default function HeroLayout() {
       </main>
 
       {/* Footer */}
-      <footer className="bg-white border-t shrink-0">
-        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
-          <p className="text-center text-sm text-gray-500">
-            {t("app.copyright", { year: today.year() })}
-          </p>
-        </div>
-      </footer>
+      <Footer></Footer>
     </div>
   )
 }
diff --git a/src/layout/tools-layout/index.tsx b/src/layout/tools-layout/index.tsx
index 43982c9..7516d75 100644
--- a/src/layout/tools-layout/index.tsx
+++ b/src/layout/tools-layout/index.tsx
@@ -3,6 +3,8 @@ import { Link, NavLink, Outlet } from "react-router-dom"
 import { useTranslation } from "react-i18next"
 import dayjs from "dayjs"
 import LanguageSwitcher from "@/components/language-switcher"
+import Header from "@/components/header"
+import Footer from "@/components/footer"
 
 export default function ToolsLayout() {
   const today = useMemo(() => dayjs(), [])
@@ -28,40 +30,7 @@ export default function ToolsLayout() {
 
   return (
     <div className="h-screen bg-gray-50 flex flex-col overflow-hidden">
-      <header className="bg-white shadow-sm border-b">
-        <div className="px-4">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center">
-              <h1 className="text-xl font-semibold text-gray-900">{t("app.title")}</h1>
-            </div>
-            <div className="flex items-center gap-4">
-              <nav className="flex space-x-8">
-                <Link
-                  to="/"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
-                  {t("navigation.home")}
-                </Link>
-                <Link
-                  to="/about"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
-                  {t("navigation.about")}
-                </Link>
-                <Link
-                  to="/contact"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
-                  {t("navigation.contact")}
-                </Link>
-                <Link
-                  to="/changelog"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
-                  {t("navigation.changelog")}
-                </Link>
-              </nav>
-              <LanguageSwitcher />
-            </div>
-          </div>
-        </div>
-      </header>
+      <Header></Header>
 
       <main className="flex-1 p-4 overflow-hidden min-h-0">
         <div className="h-full flex gap-4 overflow-hidden">
@@ -120,13 +89,7 @@ export default function ToolsLayout() {
         </div>
       </main>
 
-      <footer className="bg-white border-t shrink-0">
-        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
-          <p className="text-center text-sm text-gray-500">
-            {t("app.copyright", { year: today.year() })}
-          </p>
-        </div>
-      </footer>
+      <Footer></Footer>
     </div>
   )
 }