diff --git a/components/header.js b/components/header.js
index 2bc418c..976a8f8 100644
--- a/components/header.js
+++ b/components/header.js
@@ -44,7 +44,7 @@ class Header extends HTMLElement {
         border-bottom: 1px solid var(--bg-300);
         background-color: var(--bg-200);
 
-        @media only screen and (min-width: 1024px) {          
+        @media only screen and (min-width: 1024px) {
           z-index: 1000;
         }
       }
@@ -53,25 +53,17 @@ class Header extends HTMLElement {
         background-color: var(--bg-100);
       }
 
-      *:focus {
-        border: 1px solid black;
-      }
-
       header {
         display: flex;
-        margin: 0 27px 0;
+        margin: 0 27px;
         justify-content: space-between;
         align-items: center;
 
         @media only screen and (min-width: 768px) {
-          flex-direction: row !important;
-        }
-        
-        @media only screen and (min-width: 1024px) {
           width: 80%;
           margin: 0 auto;
+          flex-direction: row !important;
         }
-        
       }
 
       header.vertical {
@@ -80,8 +72,6 @@ class Header extends HTMLElement {
 
       .buttons-container {
         display: none;
-        align-items: center;
-        column-gap: 40px;
 
         @media only screen and (min-width: 768px) {
           display: flex !important;
@@ -98,6 +88,14 @@ class Header extends HTMLElement {
         align-items: center;
         row-gap: 18px;
         margin-top: 30px;
+        
+        @media only screen and (min-width: 768px) {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          column-gap: 40px;
+          margin-top: 0;
+        }
       }
 
       a {
@@ -105,10 +103,11 @@ class Header extends HTMLElement {
         gap: 10px;
         align-items: center;
         text-decoration: none;
+        padding: 10px 20px;
 
         span {
           display: none;
-          
+
           @media only screen and (min-width: 768px) {
             display: inline;
             font-size: 16px;
@@ -119,15 +118,39 @@ class Header extends HTMLElement {
           }
         }
 
-        img {
+        svg {
           width: 41px;
           height: 20.5px;
-          
+
           @media only screen and (min-width: 1024px) {
             width: 45px;
             height: 22.5px;
           }
         }
+
+        &:focus {
+          outline: 3px solid #846de9;
+          outline-offset: 2px;
+          border-radius: 10px;
+        }
+
+        &:focus-visible {
+          outline: 3px solid #24eaca;
+          outline-offset: 2px;
+          border-radius: 10px;
+        }
+
+        &:hover {
+          box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+        }
+
+        &:active svg path {
+          fill: #160b46;
+        }
+
+        &:active span {
+          color: #846de9;
+        }
       }
 
       button {
@@ -137,24 +160,45 @@ class Header extends HTMLElement {
         display: flex;
         align-items: center;
         cursor: pointer;
-        padding: 0;
-        width: 18px;
-        height: 18px;
+        width: 48px;
+        height: 40px;
+
+        &:focus {
+          outline: 3px solid #846de9;
+          outline-offset: 2px;
+          border-radius: 10px;
+        }
+
+        &:focus-visible {
+          outline: 3px solid #24eaca;
+          outline-offset: 2px;
+          border-radius: 10px;
+        }
+
+        &:hover {
+          box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+        }
+
+        &:active svg path {
+          fill: #846de9;
+        }
 
         @media only screen and (min-width: 768px) {
           display: none;
         }
       }
 
-      button > img {
+      button > svg {
+        width: 18px;
+        height: 17px;
+        top: 12px;
+        left: 14px;
         position: absolute;
-        top: 0;
-        left: 0;
         opacity: 1;
         transition: opacity 200ms ease-in-out;
       }
 
-      button > img.hide {
+      button > svg.hide {
         opacity: 0;
       }
 
@@ -171,33 +215,67 @@ class Header extends HTMLElement {
       <header>
         <div class="header-content">
           <a href="/">
-            <img src="images/logo.png" alt="logo" />
+            <svg
+              id="logo"
+              width="45"
+              height="22"
+              viewBox="0 0 45 22"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14.84 19.03L0.29 12.61V10.51L14.84 3.25V6.76L4.82 11.41L14.84 15.52V19.03ZM28.408 0.579999L20.428 22H16.378L24.358 0.579999H28.408ZM29.8505 15.52L39.8705 11.41L29.8505 6.76V3.25L44.4005 10.51V12.61L29.8505 19.03V15.52Z"
+                fill="url(#paint0_linear_278_133)"
+              />
+              <defs>
+                <linearGradient
+                  id="paint0_linear_278_133"
+                  x1="-1"
+                  y1="9.51219"
+                  x2="46"
+                  y2="9.51219"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stop-color="#24EACA" />
+                  <stop offset="1" stop-color="#846DE9" />
+                </linearGradient>
+              </defs>
+            </svg>
             <span>달레 스터디</span>
           </a>
           <button>
-            <img
-              width="100%"
-              height="100%"
+            <svg
               id="menuIcon"
-              src="images/menu.png"
-              alt="menu open icon"
-            />
-            <img
-              width="100%"
-              height="100%"
+              width="18"
+              height="17"
+              viewBox="0 0 18 17"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 0H18V2.83333H0V0ZM0 7.08333H18V9.91667H0V7.08333ZM0 14.1667H18V17H0V14.1667Z"
+                fill="#160B46"
+              />
+            </svg>
+            <svg
               id="closeIcon"
               class="hide"
-              src="images/cancel.png"
-              alt="menu close icon"
-            />
+              width="14"
+              height="15"
+              viewBox="0 0 14 15"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.46 7.54208L14 13.0821V14.5421H12.54L7 9.00208L1.46 14.5421H0V13.0821L5.54 7.54208L0 2.00208V0.542084H1.46L7 6.08208L12.54 0.542084H14V2.00208L8.46 7.54208Z"
+                fill="#160B46"
+              />
+            </svg>
           </button>
         </div>
 
         <div class="buttons-container">
-          <ds-button-link
-            href="#steps-section"
-            size="small"
-            variant="ghost"
+          <ds-button-link href="#steps-section" size="small" variant="ghost"
             >참여방법 안내</ds-button-link
           >
           <ds-button-link
diff --git a/images/Logo.png b/images/Logo.png
deleted file mode 100644
index bc55df2..0000000
Binary files a/images/Logo.png and /dev/null differ
diff --git a/images/close.svg b/images/close.svg
new file mode 100644
index 0000000..9c4d7d8
--- /dev/null
+++ b/images/close.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.46 7.54208L14 13.0821V14.5421H12.54L7 9.00208L1.46 14.5421H0V13.0821L5.54 7.54208L0 2.00208V0.542084H1.46L7 6.08208L12.54 0.542084H14V2.00208L8.46 7.54208Z" fill="#160B46"/>
+</svg>
diff --git a/images/logo.png b/images/logo.png
deleted file mode 100644
index bc55df2..0000000
Binary files a/images/logo.png and /dev/null differ
diff --git a/images/logo.svg b/images/logo.svg
new file mode 100644
index 0000000..4f46a0b
--- /dev/null
+++ b/images/logo.svg
@@ -0,0 +1,9 @@
+<svg width="45" height="22" viewBox="0 0 45 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.84 19.03L0.29 12.61V10.51L14.84 3.25V6.76L4.82 11.41L14.84 15.52V19.03ZM28.408 0.579999L20.428 22H16.378L24.358 0.579999H28.408ZM29.8505 15.52L39.8705 11.41L29.8505 6.76V3.25L44.4005 10.51V12.61L29.8505 19.03V15.52Z" fill="url(#paint0_linear_278_133)"/>
+<defs>
+<linearGradient id="paint0_linear_278_133" x1="-1" y1="9.51219" x2="46" y2="9.51219" gradientUnits="userSpaceOnUse">
+<stop stop-color="#24EACA"/>
+<stop offset="1" stop-color="#846DE9"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/images/menu.png b/images/menu.png
deleted file mode 100644
index 292ddb7..0000000
Binary files a/images/menu.png and /dev/null differ
diff --git a/images/menu.svg b/images/menu.svg
new file mode 100644
index 0000000..d6360e9
--- /dev/null
+++ b/images/menu.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H18V2.83333H0V0ZM0 7.08333H18V9.91667H0V7.08333ZM0 14.1667H18V17H0V14.1667Z" fill="#160B46"/>
+</svg>