diff --git a/components/NavBar.tsx b/components/NavBar.tsx
new file mode 100644
index 00000000..a9b4d564
--- /dev/null
+++ b/components/NavBar.tsx
@@ -0,0 +1,16 @@
+import type { NextPage } from 'next'
+import Link from 'next/link'
+
+const NavBar: NextPage = () => {
+  return (
+    <>
+      <div className="navbar bg-neutral text-white">
+        <div className="text-xl pl-4">
+          <Link href="/">幻水総選挙2022</Link>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default NavBar
diff --git a/pages/index.tsx b/pages/index.tsx
index 08e0bd23..f68170d6 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,6 +6,8 @@ import type { NextPage } from 'next'
 
 import HumbergerNavigation from '../components/HumbergerMenu/Navigation'
 
+import NavBar from '../components/NavBar'
+
 import EventSummary from '../components/EventSummary'
 import HowToVote from '../components/HowToVote'
 import Departments from '../components/Departments'
@@ -53,11 +55,7 @@ const Home: NextPage = () => {
       </div>
 
       <main id="page-wrap">
-        <div className="navbar bg-neutral text-neutral-content sticky top-0 z-50">
-          <div className="normal-case text-xl pl-4">
-            <Link href="/">幻水総選挙2022</Link>
-          </div>
-        </div>
+        <NavBar />
 
         <Image
           src="/gss2022_top.jpg"