diff --git a/src/pages/header.css b/src/pages/header.css
index 25e06e7..c755095 100644
--- a/src/pages/header.css
+++ b/src/pages/header.css
@@ -21,6 +21,12 @@
     inset 0px 0px 0px 0px #0001;
   transition: box-shadow 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
   border-radius: 0px;
+  position: sticky;
+  background-color: var(--background-color-light);
+  z-index: 999999;
+}
+.frame.dark{
+  background-color: var(--background-color-dark);
 }
 
 .header {
diff --git a/src/pages/header.js b/src/pages/header.js
index c0d546c..a54fc04 100644
--- a/src/pages/header.js
+++ b/src/pages/header.js
@@ -26,7 +26,7 @@ function handleHamClick(){
 isOpen?setIsOpen(false): setIsOpen(true)
 }
     return (
-        <div className="frame">
+        <div className={`frame ${theme=="dark"?'dark':'light'}`}>
             <div className="header">
                 <div className="logo">
                     <Link to="/" className="link1">