diff --git a/src/app/board/page.tsx b/src/app/board/page.tsx
index d6899f8..2cce784 100644
--- a/src/app/board/page.tsx
+++ b/src/app/board/page.tsx
@@ -4,7 +4,7 @@ import Board from "@/components/board/Board";
 const Page = () => {
   return (
     <>
-      <Header />
+      <Header title="BOARD" />
       <Board />
     </>
   );
diff --git a/src/app/calendar/page.tsx b/src/app/calendar/page.tsx
index d2eaaf2..bbcef9d 100644
--- a/src/app/calendar/page.tsx
+++ b/src/app/calendar/page.tsx
@@ -5,7 +5,7 @@ import Header from "@/components/Header";
 const Page = () => {
   return (
     <>
-      <Header />
+      <Header title="CALENDAR" />
       <EventCard />
       <CalendarEvents />
     </>
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 7b9b789..4a78503 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -6,7 +6,7 @@ import Header from "@/components/Header";
 const Page = () => {
   return (
     <>
-      <Header />
+      <Header title="Events" />
       <div className="grid grid-cols-3">
         <div className="col-start-2 mb-5">
           <FriendshipGames
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index bbee80f..54953ab 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -4,7 +4,7 @@ import Header from "@/components/Header";
 const Page = () => {
   return (
     <>
-      <Header />
+      <Header title="GALLERY" />
       <Photos />
     </>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index dd391d4..59d46d9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,10 +3,12 @@ import About from "@/components/home/About";
 import Mission from "@/components/home/Mission";
 import Do from "@/components/home/Do";
 import Example from "../components/example";
+import Header from "@/components/Header";
 
 const Home = () => {
   return (
     <div className="">
+      <Header title="About" />
       <Hero />
       <About />
       <Mission />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0adfd30..95998c9 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,24 @@
-const Header = () => {
-  return <div>Header</div>;
+import Image from "next/image";
+import hsa5 from "@/public/assets/hsa5.svg";
+
+type props = {
+  title: string;
+};
+
+const Header = ({ title }: props) => {
+  return (
+    <div className="flex flex-row justify-between bg-hsa-gray-100">
+      <div className="mt-12 flex flex-row justify-center">
+        <Image src={hsa5} alt="HSA5" className="w-1/2" />
+      </div>
+      <div className="ml-5 flex flex-col justify-center">
+        <div className="mb-5 h-5 w-full pr-10 text-4xl">{title}</div>
+      </div>
+      <div className="mb-12 flex flex-row justify-center">
+        <Image src={hsa5} alt="HSA5" className="w-1/2" />
+      </div>
+    </div>
+  );
 };
 
 export default Header;