diff --git a/_includes/header.html b/_includes/header.html
index 6220186..d2a276c 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,11 +1,11 @@
-<header>
+<header class="header">
   <div>
-    <a id="logo" href="/">
+    <a class="header_logo-link" href="/">
       <img src="/assets/img/CoTech-logo.png">CoTech
     </a>
   </div>
   <div>
-    <ul>
+    <ul class="header_menu-list">
       <li><a href="/#members">Members</a></li>
       <li><a href="/about">About</a></li>
       <li><a href="/join">Join</a></li>
diff --git a/assets/css/app.css b/assets/css/app.css
index 386ee15..333c44c 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -20,3 +20,33 @@ p, li, a {
 h1, h2, h3, h4, h5, h6 {
   font-family: "open_sansbold", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
 }
+
+.header {
+  display: flex;
+  padding: 1.4rem;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header a {
+  text-decoration: none;
+}
+
+.header a:hover {
+  text-decoration: underline;
+  color: #38aad5;
+}
+
+.header_logo-link {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.header_menu-list {
+  list-style-type: none;
+  display: flex;
+  gap: 0.7rem;
+  font-size: 1rem;
+  letter-spacing: 0.05em;
+}