diff --git a/src/components/header/header.css b/src/components/header/header.css
index b83605f..63e9898 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -1,57 +1,129 @@
-header{
-    height: 59px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 15px;
-    margin-bottom: 70px;
-    background-color: #FFFFFF;
-    border-radius: 10px;
-    box-shadow: var(--box-shadow);
-    position: relative;
-  }
-  
-  header .logo{
-    display: flex;
-    align-items: center;
-  }
-  
-  header .logo img{
-    max-width: 35px;
-    cursor: pointer;
-  }
+:root {
+  --header-bg: #ffffff;
+  --header-text: #333333;
+  --header-accent: #4f46e5; /* Indigo */
+  --header-radius: 12px;
+  --header-shadow: 0 2px 6px rgba(0,0,0,0.08);
+}
+
+[data-theme="dark"] {
+  --header-bg: #1f2937;
+  --header-text: #f9fafb;
+  --header-accent: #6366f1;
+}
+
+header {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.5rem;
+  margin-bottom: 70px;
+  background-color: var(--header-bg);
+  border-radius: var(--header-radius);
+  box-shadow: var(--header-shadow);
+  position: relative;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+header .logo {
+  display: flex;
+  align-items: center;
+}
+
+header .logo img {
+  max-width: 40px;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+header .logo img:hover {
+  transform: scale(1.05);
+}
+
+header .logo span {
+  font-size: 20px;
+  margin-left: 10px;
+  cursor: pointer;
+  font-family: "Inter", sans-serif;
+  font-weight: 600;
+  color: var(--header-accent);
+}
+
+header nav {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
 
-  header .user{
-    height: 40px;
-    width: 40px;
-    border-radius: 50%;
-    display: inline-block;
-    margin-left: 5px;
-    cursor: pointer;
-    border: 1px solid #dfdfdf;
+header nav a {
+  font-family: "Inter", sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--header-text);
+  transition: color 0.3s ease;
+}
+
+header nav a:hover {
+  color: var(--header-accent);
+}
+
+header .user {
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-left: 5px;
+  cursor: pointer;
+  border: 1px solid #dfdfdf;
+  transition: box-shadow 0.3s ease;
+}
+
+header .user:hover {
+  box-shadow: 0 0 0 3px rgba(79,70,229,0.2);
+}
+
+header .themeSelector img {
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  right: 60px;
+  top: 12px;
+  margin-left: 5px;
+  cursor: pointer;
+  border: 1px solid #dfdfdf;
+  transition: transform 0.3s ease;
+}
+
+header .themeSelector img:hover {
+  transform: rotate(20deg);
+}
+
+header .themeSelector .activeTheme {
+  height: 30px;
+  width: 30px;
+}
+
+@media (max-width: 768px) {
+  header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    height: auto;
+    padding: 1rem;
   }
-  
-  header .logo span{
-    font-size: 22px;
-    margin-left: 7px;
-    cursor: pointer;
-    color: #9536ea;
+
+  header nav {
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
   }
-  
-  header .themeSelector img{
-    height: 40px;
-    width: 40px;
-    border-radius: 50%;
-    display: inline-block;
-    position: absolute;
-    right: 60px;
-    top: 10px;
-    margin-left: 5px;
-    cursor: pointer;
-    border: 1px solid #dfdfdf;
+
+  header .themeSelector img {
+    position: static;
+    margin-left: 0;
   }
-  
-  header .themeSelector .activeTheme{
-    height: 30px;
-    width: 30px;
-  }
\ No newline at end of file
+}
diff --git a/src/components/header/header.js b/src/components/header/header.js
index 83f6a30..ca70d87 100644
--- a/src/components/header/header.js
+++ b/src/components/header/header.js
@@ -22,11 +22,15 @@ function Header({theme, settheme}) {
 
 
 return (
-<header>
+<header data-theme={theme}>
     <span className="logo">
-        <img src={taskmatelogo} alt="taskmatelogo" />
+        <img src={taskmatelogo} alt="TaskMate logo" />
         <span>TaskMate</span>
     </span>
+    <nav>
+        <a href="/tasks">Tasks</a>
+        <a href="/about">About</a>
+      </nav>
     <span className="themeSelector">
     {theme === "light" ? (
               <img
@@ -42,9 +46,10 @@ return (
               />
             )}
     </span>
-    <img className='user' src={user} alt="user"/>
+    <img className='user' src={user} alt="user avatar"/>
 </header>
   )
 }
 
 export default Header
+