diff --git a/src/App/App.css b/src/App/App.css
index e107012b1cf4e4b2a0f1a0a14d5a8ffaae1867bc..d5d7109a5fcc75e38a58c84f5448bdc2243612b4 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -61,9 +61,9 @@ a {
   color: var(--lightblue) !important;
   text-decoration: none !important;
 }
-a:active {
-  background-color: yellow;
-}
+
+
+
 /* * * * * * * */
 /* *SIDEBAR* * */
 /* * * * * * * */
@@ -117,6 +117,10 @@ color: var(--text-primary);
   max-height: 100% !important;
   max-width: 100% !important; 
 }
+.header-container{
+  padding-top: 380px;
+  background-color: var(--lightblue);
+}
 .null{
   padding: 0% !important;
    margin: 0% !important;
diff --git a/src/contents/header-box.tsx b/src/contents/header-box.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5a44913ce632d4049370817ff09a1115d729c0c7
--- /dev/null
+++ b/src/contents/header-box.tsx
@@ -0,0 +1,18 @@
+interface Props{
+    children?: React.ReactNode,
+}
+
+export default function HeaderBox({children}: Props ){
+    return(
+        <>
+        <div className="row">
+          <div className="col header-container">
+            {children}
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    )
+}
\ No newline at end of file
diff --git a/src/headers/attribution-h.tsx b/src/headers/attribution-h.tsx
index 1efccb7ee8538914696d87308b74e233543e4b49..7c10b3fae663a50ba34c2be1c37391f1f247516f 100644
--- a/src/headers/attribution-h.tsx
+++ b/src/headers/attribution-h.tsx
@@ -1,15 +1,10 @@
+import HeaderBox from "../contents/header-box";
+
 export function ATTH() {
 
     return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
-      
-        </div>
-      </>
+      <HeaderBox>
+        
+      </HeaderBox>
     );
   }
\ No newline at end of file
diff --git a/src/headers/bhf-h.tsx b/src/headers/bhf-h.tsx
index db5014de39820c167a1c7ff7cd7d49f06ad5a558..51ec034ea879294555a2c3a72c2f07e967532622 100644
--- a/src/headers/bhf-h.tsx
+++ b/src/headers/bhf-h.tsx
@@ -3,7 +3,7 @@ export function BFHH() {
     return (
       <>
         <div className="row">
-          <div className="col">
+          <div className="col header-container">
           <div className="bg-video-container">
           <iframe title="Bielefeld-CeBiTec: MeetUp (2024) [English]" width="100%" height="700" src="https://video.igem.org/videos/embed/30b8a6e0-2b4a-4618-8867-4eb8e6a52936?start=27s&amp;loop=1&amp;autoplay=1&amp;muted=1&amp;title=0&amp;warningTitle=0&amp;controlBar=0&amp;peertubeLink=0&amp;p2p=0" frameBorder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
           </div>
diff --git a/src/headers/cont-h.tsx b/src/headers/cont-h.tsx
index 54a54c141cbb83509209dacf1393137304aa890d..a247292e8c757335b1abeba4911db908d975525d 100644
--- a/src/headers/cont-h.tsx
+++ b/src/headers/cont-h.tsx
@@ -1,15 +1,10 @@
+import HeaderBox from "../contents/header-box";
+
 export function CONTH() {
 
     return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
-      
-        </div>
-      </>
+      <HeaderBox>
+        
+      </HeaderBox>
     );
   }
\ No newline at end of file
diff --git a/src/headers/des-h.tsx b/src/headers/des-h.tsx
index d0e066d81042a59fbcdb4b1bc175c33991ef1b42..24ae3ef19c092702e1d3758aeb937d16a18148a5 100644
--- a/src/headers/des-h.tsx
+++ b/src/headers/des-h.tsx
@@ -1,15 +1,10 @@
 export function DESH() {
 
     return (
-      <>
-        <div className="row">
-          <div className="col">
-           
-          </div>
-        </div>
-        <div className="row">
-      
-        </div>
-      </>
+      <HeaderBox>
+        
+      </HeaderBox>
     );
-  }
\ No newline at end of file
+  }
+
+  import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/desc-h.tsx b/src/headers/desc-h.tsx
index 3ee87430c2ee3e4dd46c2cb957aee90b00b718f1..c135f1458ac38bc9b40290f941c3070320df4725 100644
--- a/src/headers/desc-h.tsx
+++ b/src/headers/desc-h.tsx
@@ -1,15 +1,10 @@
 export function DESCH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-           
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/dry-h.tsx b/src/headers/dry-h.tsx
index b889131b6707d39d43a93c8536e58a81539374e2..18b43088a3965cef849ec5e13ce0db84dcdf6c00 100644
--- a/src/headers/dry-h.tsx
+++ b/src/headers/dry-h.tsx
@@ -1,15 +1,9 @@
 export function DRYH() {
-
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/eng-h.tsx b/src/headers/eng-h.tsx
index 7752af80c4df476e964415544e723b30e8aee927..0fe088c9095ed3456c2ec2b5aba0c1319dd120ed 100644
--- a/src/headers/eng-h.tsx
+++ b/src/headers/eng-h.tsx
@@ -1,15 +1,10 @@
 export function ENGH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/eth-h.tsx b/src/headers/eth-h.tsx
index 28ad539a90cb92c6ee2564e5cd4fa20cb634e89d..80b261faa662c4646b59684ebcf67f86d253f86e 100644
--- a/src/headers/eth-h.tsx
+++ b/src/headers/eth-h.tsx
@@ -1,15 +1,10 @@
 export function ETHH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/exp-h.tsx b/src/headers/exp-h.tsx
index bbf43ad04ceac1c4ee7806cb6982863a985bc452..8235ad65bc3d56973d8c7f09aecfd40ad70281bc 100644
--- a/src/headers/exp-h.tsx
+++ b/src/headers/exp-h.tsx
@@ -1,15 +1,10 @@
 export function EXPH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/home-h.tsx b/src/headers/home-h.tsx
index 2e062010c7338f49722598bd96e635d8d4b36760..945a31ea1704c524edbc2ec40623d02c0dfa22e9 100644
--- a/src/headers/home-h.tsx
+++ b/src/headers/home-h.tsx
@@ -1,15 +1,9 @@
 export function HOMEH() {
-
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-           
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/hp-h.tsx b/src/headers/hp-h.tsx
index daa895fc5b47913abe48775cb5a5e4093cafb41a..f3d19ec1ebba22da6751d3ef179019bd78e6fed6 100644
--- a/src/headers/hp-h.tsx
+++ b/src/headers/hp-h.tsx
@@ -1,15 +1,10 @@
 export function HPH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/imp-h.tsx b/src/headers/imp-h.tsx
index 40f648ef47b55ae704848853d49fd847a2f8a612..e915b14f29ccb4aff10efd0decac34c896f5358d 100644
--- a/src/headers/imp-h.tsx
+++ b/src/headers/imp-h.tsx
@@ -1,15 +1,10 @@
 export function IMPH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-           
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/ints-h.tsx b/src/headers/ints-h.tsx
index 500571a21ba0c8c60b9aecf553ed3c63f1846773..290a1704490d6a1f969d4bac87a013c1f5322ec1 100644
--- a/src/headers/ints-h.tsx
+++ b/src/headers/ints-h.tsx
@@ -1,15 +1,10 @@
 export function INTSH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/judge-h.tsx b/src/headers/judge-h.tsx
index 1509c2bfdd89949c3ce24ab4a5d49b5a20aa91e9..8d598cab67d8cf906eb272e4ebf2eadd1facb5cd 100644
--- a/src/headers/judge-h.tsx
+++ b/src/headers/judge-h.tsx
@@ -1,15 +1,11 @@
+import HeaderBox from "../contents/header-box";
+
 export function JUDGEH() {
 
     return (
-      <>
-        <div className="row">
-          <div className="col">
-           
-          </div>
-        </div>
-        <div className="row">
       
-        </div>
-      </>
+      <HeaderBox>
+        
+      </HeaderBox>
     );
   }
\ No newline at end of file
diff --git a/src/headers/mes-h.tsx b/src/headers/mes-h.tsx
index a3ff1a80fa32e5f98b3b5fe233be8f9e48a1aa2a..0f447d6ce6dc802061ae77f52a1ac700c5582146 100644
--- a/src/headers/mes-h.tsx
+++ b/src/headers/mes-h.tsx
@@ -1,15 +1,10 @@
 export function MESH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/note-h.tsx b/src/headers/note-h.tsx
index 9a52bd93da75164d587bd53d32bbdba54d44bc18..f46632144b0db66a403e42070e2376594164739e 100644
--- a/src/headers/note-h.tsx
+++ b/src/headers/note-h.tsx
@@ -1,15 +1,10 @@
 export function NOTEH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-           
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/part-h.tsx b/src/headers/part-h.tsx
index 1ef11dba3808aebe0b9e526e2a6c1d2b73517d13..afc03aa1b9422bbfad760c76f282a9535492d6f0 100644
--- a/src/headers/part-h.tsx
+++ b/src/headers/part-h.tsx
@@ -1,15 +1,10 @@
 export function PARTH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/proof-h.tsx b/src/headers/proof-h.tsx
index 21f6b9fbe2db380a636700faa8e3581337d1c449..d290e8bd28fcc6f36bf5e35de91ba006190646ea 100644
--- a/src/headers/proof-h.tsx
+++ b/src/headers/proof-h.tsx
@@ -1,15 +1,10 @@
 export function PROOFH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/res-h.tsx b/src/headers/res-h.tsx
index ed2277b4a6f50b2f17f1a4ac8c36667bb4617a4f..7f2090daccd99c45569f57eebbdc611cb2cd83db 100644
--- a/src/headers/res-h.tsx
+++ b/src/headers/res-h.tsx
@@ -1,15 +1,10 @@
 export function RESH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-           
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/safe-h.tsx b/src/headers/safe-h.tsx
index 77cc3ed4508c2a592afea3fddc4488ece2f482b6..aa8e7d6c028b4e05aa268d625b6e3371a727e501 100644
--- a/src/headers/safe-h.tsx
+++ b/src/headers/safe-h.tsx
@@ -1,15 +1,10 @@
 export function SAFEH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-           
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/spons-h.tsx b/src/headers/spons-h.tsx
index 4acc4b440ff7c5ca66d28d228949d56ed158ee39..65e3d367ff058f269599690b25613f2c0db460fa 100644
--- a/src/headers/spons-h.tsx
+++ b/src/headers/spons-h.tsx
@@ -1,15 +1,10 @@
 export function SPONH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/sup-h.tsx b/src/headers/sup-h.tsx
index 1997d1fe16838480282c73d7c380d6f5ec2a83b9..a81d147069626c32eb8577beb478f4609fe2d65f 100644
--- a/src/headers/sup-h.tsx
+++ b/src/headers/sup-h.tsx
@@ -1,15 +1,10 @@
 export function SUPH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/team-h.tsx b/src/headers/team-h.tsx
index 7a7b013f70c6e44dab753b42bace6414ff24cd18..733d556b704c24a15b331b71361b9232bd9f3053 100644
--- a/src/headers/team-h.tsx
+++ b/src/headers/team-h.tsx
@@ -1,15 +1,10 @@
 export function TEAMH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-           
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file
diff --git a/src/headers/wiki-h.tsx b/src/headers/wiki-h.tsx
index 9cd02d37a9d19e25de1f184401fa2ea209274fe9..f44a84920a6f3326491614818f7846e187a819c7 100644
--- a/src/headers/wiki-h.tsx
+++ b/src/headers/wiki-h.tsx
@@ -1,15 +1,10 @@
 export function WIKIH() {
 
-    return (
-      <>
-        <div className="row">
-          <div className="col">
-            
-          </div>
-        </div>
-        <div className="row">
+  return (
+    <HeaderBox>
       
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+    </HeaderBox>
+  );
+}
+
+import HeaderBox from "../contents/header-box";
\ No newline at end of file