diff --git a/src/components/themetoggle/index.js b/src/components/themetoggle/index.js
index bcf55cc..53718c2 100644
--- a/src/components/themetoggle/index.js
+++ b/src/components/themetoggle/index.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { WiMoonAltWaningCrescent4 } from "react-icons/wi";
-
+import { RiSunLine, RiMoonClearLine } from "react-icons/ri";
 
 const Themetoggle = () => {
   const [theme, settheme] = useState(localStorage.getItem("theme") || "dark");
@@ -9,11 +8,11 @@ const Themetoggle = () => {
   };
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
-    localStorage.setItem('theme', theme );
+    localStorage.setItem('theme', theme);
   }, [theme]);
   return (
     <div className="nav_ac" onClick={themetoggle}>
-      <WiMoonAltWaningCrescent4 />
+      {theme === "dark" ? <RiSunLine /> : <RiMoonClearLine />}
     </div>
   );
 };
diff --git a/src/components/themetoggle/style.css b/src/components/themetoggle/style.css
index 178241e..54da820 100644
--- a/src/components/themetoggle/style.css
+++ b/src/components/themetoggle/style.css
@@ -1,15 +1,22 @@
 .theme_toggler {
-    background: var(--primary-color);
-    z-index: 999999999;
-    left: 10px;
-    background: var(--primary-color);
-    display: flex;
-    height: 50px;
-    align-items: center;
-    padding-left: 10px;
+  z-index: 999999999;
+  left: 20px;
+  display: flex;
+  height: 70px;
+  align-items: center;
+  padding: 10px;
+  background: transparent;
+  cursor: pointer;
 }
 
-.theme_toggler svg {
-    width: 2em;
-    height: 2em;
+.theme_toggler svg,
+.nav_ac svg {
+  width: 2em;
+  height: 2em;
+  color: var(--text-color-2);
+  transition: color 0.3s ease;
+}
+
+.theme_toggler:hover svg {
+  color: var(--text-color-3);
 }
diff --git a/src/header/index.js b/src/header/index.js
index d0a58eb..733e6c2 100644
--- a/src/header/index.js
+++ b/src/header/index.js
@@ -1,6 +1,6 @@
-    import React, { useState } from "react";
+import React, { useState } from "react";
 import "./style.css";
-import { VscGrabber, VscClose } from "react-icons/vsc";
+import { RiMenuLine, RiCloseLine } from "react-icons/ri";
 import { Link } from "react-router-dom";
 import { logotext ,socialprofils } from "../content_option";
 import Themetoggle from "../components/themetoggle";
@@ -18,15 +18,14 @@ const Headermain = () => {
     <>
       <header className="fixed-top site__header">
         <div className="d-flex align-items-center justify-content-between">
-          <Link  className="navbar-brand nav_ac" to="/">
+          <Link className="navbar-brand nav_ac" to="/">
             {logotext}
           </Link>
           <div className="d-flex align-items-center">
           <Themetoggle />
-          <button className="menu__button  nav_ac" onClick={handleToggle}>
-            {!isActive ? <VscClose /> : <VscGrabber />}
+          <button className="menu__button nav_ac" onClick={handleToggle}>
+            {!isActive ? <RiCloseLine /> : <RiMenuLine />}
           </button>
-
           </div>
         </div>
 
diff --git a/src/header/style.css b/src/header/style.css
index 9f6a968..a76ba6a 100644
--- a/src/header/style.css
+++ b/src/header/style.css
@@ -1,17 +1,21 @@
 .site__header {
-  top: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
+  top: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .menu__button {
   color: var(--text-color);
+  padding: 10px;
+  background: transparent;
+  border: none;
 }
 
 .menu__button:focus,
 .menu__button:hover {
-  color: var(--text-color);
+  color: var(--text-color-3);
   box-shadow: unset;
+  background: transparent;
 }
 
 .menu__button svg {
@@ -19,18 +23,23 @@
   height: 2em;
   fill: var(--text-color-2);
   color: var(--text-color-2);
+  transition: color 0.3s ease;
+}
+
+.menu__button:hover svg {
+  color: var(--text-color-3);
+  fill: var(--text-color-3);
 }
 
 .nav_ac {
-  padding: 5px 15px;
+  padding: 10px 25px;
   margin: 0;
   border: unset;
-  background: var(--primary-color);
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   font-family: Marcellus;
   color: var(--text-color-2);
   line-height: 2;
-  height: 50px;
+  height: 70px;
   font-weight: bold;
   z-index: 1000;
 }