diff --git a/frontend/react-app/package-lock.json b/frontend/react-app/package-lock.json
index c6b0fc3..2b6c9c6 100644
--- a/frontend/react-app/package-lock.json
+++ b/frontend/react-app/package-lock.json
@@ -14,6 +14,7 @@
         "ajv": "^8.17.1",
         "ajv-keywords": "^5.1.0",
         "jquery": "^3.7.1",
+        "lucide-react": "^0.486.0",
         "react": "^18.3.1",
         "react-cookie": "^7.2.2",
         "react-dom": "^18.3.1",
@@ -12865,6 +12866,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.486.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.486.0.tgz",
+      "integrity": "sha512-xWop/wMsC1ikiEVLZrxXjPKw4vU/eAip33G2mZHgbWnr4Nr5Rt4Vx4s/q1D3B/rQVbxjOuqASkEZcUxDEKzecw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/frontend/react-app/package.json b/frontend/react-app/package.json
index 2136c88..41607bb 100644
--- a/frontend/react-app/package.json
+++ b/frontend/react-app/package.json
@@ -9,6 +9,7 @@
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
     "jquery": "^3.7.1",
+    "lucide-react": "^0.486.0",
     "react": "^18.3.1",
     "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
diff --git a/frontend/react-app/src/components/Header.jsx b/frontend/react-app/src/components/Header.jsx
index c31818a..9623674 100644
--- a/frontend/react-app/src/components/Header.jsx
+++ b/frontend/react-app/src/components/Header.jsx
@@ -1,20 +1,26 @@
-import {useCookies} from 'react-cookie'
+import { useCookies } from 'react-cookie'
+import { Home, ListTodo, UserCircle, Settings, ListCheck, ListChecks, ShieldAlert, ShieldUser } from "lucide-react";
+
 function Header(){
     const [cookies] = useCookies(['userInfo'])
     return(
-           
-          <div>
-                <h1 className ="inner-header">
-                        <ul className ='list'>
-                            <li className ="logo list"><span><a href="/home">Whatever we Call this</a></span></li>
-                            <li><span><a href="/home">Home</a></span></li>
-                            <li><span><a href="/my-tasks">Tasks</a></span></li>
-                            <li><span><a href="/profile">Profile</a></span></li>
-                            {cookies.userInfo.role === 'admin' && (<li><span><a href="/admin-panel">Admin Controls</a></span></li>)}
-                        </ul>
-                </h1>
-            </div>
-            
+        <div>
+            <h1 className="inner-header">
+                <div className="logo" >
+                    <a href="/home">Taskly</a>
+                </div>
+
+                <ul className ='icon-nav'>
+                    <li><a href="/home" title="Home"><Home/></a></li>
+                    <li><a href="/my-tasks" title="My Tasks"><ListChecks/></a></li>
+                    <li><a href="/profile" title="Profile"><UserCircle/></a></li>
+
+                    {cookies.userInfo.role === 'admin' && (
+                        <li><a href="/admin-panel" title="Admin Controls"><ShieldUser /></a></li>)}
+                </ul>
+            </h1>
+        </div>
     );
 }
+
 export default Header
\ No newline at end of file
diff --git a/frontend/react-app/src/css/Header.css b/frontend/react-app/src/css/Header.css
index 3c4f186..ad60d89 100644
--- a/frontend/react-app/src/css/Header.css
+++ b/frontend/react-app/src/css/Header.css
@@ -2,33 +2,63 @@
     text-decoration: none;
 }
 
-h1.inner-header{
+h1.inner-header {
     align-self: start;
     margin: 0;
     font-family: Calibri;
     width: 100%;
-    padding: 1% 5%;;
     height: auto;
-    min-height: 10%;
+    overflow: visible;
+    padding-top: 1%;
+    padding-bottom: 1%;
     background-color: #2d2644;
     display: flex; 
     align-items: center; 
     justify-content: space-between;
 }
 
-li{
+.logo {
+    color: #fefcfd;
+    font-weight: bold;
+    margin-left: 30px;
+}
+
+.logo a {
+    color: #fefcfd;
+}
+
+ul.icon-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 10px;
+}
+
+ul.icon-nave li {
+    list-style: none;
+    margin-left: 24px;
+}
+
+ul.icon-nav svg {
+    width: 24px;
+    height: 24px;
+    stroke-width: 2.5;
+}
+
+li {
     list-style: none;
     display: inline-block;
 }
-li a{
+
+li a {
     color: #bfcde0;
     font-size: calc(20%+2vw); 
     font-weight: bold; 
     margin-right: 25px;
 }
-li.logo a{
+
+li.logo a {
     margin-right: 60px;
     font-size: calc(30%+2vw);
     color: #fefcfd;
 }
-