diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index bce6bd1..b6ea61c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -25,20 +25,36 @@ function Layout({ children }) {
         <h1>NexaPG</h1>
         <nav className="sidebar-nav">
           <NavLink to="/" end className={navClass}>
-            <span className="nav-icon">DB</span>
+            <span className="nav-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24">
+                <path d="M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3zm0 6c0 1.7 3.6 3 8 3s8-1.3 8-3M4 18c0 1.7 3.6 3 8 3s8-1.3 8-3" />
+              </svg>
+            </span>
             <span className="nav-label">Dashboard</span>
           </NavLink>
           <NavLink to="/targets" className={navClass}>
-            <span className="nav-icon">TG</span>
+            <span className="nav-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24">
+                <path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3zM12 12l8-4.5M12 12L4 7.5M12 12v9" />
+              </svg>
+            </span>
             <span className="nav-label">Targets</span>
           </NavLink>
           <NavLink to="/query-insights" className={navClass}>
-            <span className="nav-icon">QI</span>
+            <span className="nav-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24">
+                <path d="M4 19h16M7 15l3-3 3 2 4-5M18 8h.01" />
+              </svg>
+            </span>
             <span className="nav-label">Query Insights</span>
           </NavLink>
           {me?.role === "admin" && (
             <NavLink to="/admin/users" className={navClass}>
-              <span className="nav-icon">AD</span>
+              <span className="nav-icon" aria-hidden="true">
+                <svg viewBox="0 0 24 24">
+                  <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8a7 7 0 0 1 14 0" />
+                </svg>
+              </span>
               <span className="nav-label">Admin</span>
             </NavLink>
           )}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 6f2c718..5a5210d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -48,55 +48,78 @@ a {
 .sidebar-nav {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 9px;
 }
 
 .nav-btn {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border: 1px solid #223056;
-  border-radius: 10px;
-  background: linear-gradient(180deg, #101b3a, #0d1530);
-  color: #c6d5ef;
-  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
+  gap: 12px;
+  padding: 11px 13px;
+  border: 1px solid #253962;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #101a36, #0d1630);
+  color: #cedbf2;
+  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
 }
 
 .nav-btn:hover {
-  border-color: #2e4f98;
-  background: linear-gradient(180deg, #13224b, #101b3a);
+  border-color: #355ca6;
+  background: linear-gradient(180deg, #122449, #0f1e3f);
   transform: translateY(-1px);
+  box-shadow: 0 6px 18px #07122c66;
 }
 
 .nav-btn.active {
   border-color: #38bdf8;
-  box-shadow: inset 0 0 0 1px #38bdf860;
-  background: linear-gradient(180deg, #16305f, #101f43);
+  box-shadow: inset 0 0 0 1px #38bdf84f, 0 8px 20px #0a1c4260;
+  background: linear-gradient(180deg, #173a6e, #112851);
   color: #ecf5ff;
 }
 
+.nav-btn.active::before {
+  content: "";
+  position: absolute;
+  left: -1px;
+  top: 8px;
+  bottom: 8px;
+  width: 3px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #7dd3fc, #38bdf8);
+}
+
 .nav-icon {
-  width: 26px;
-  height: 26px;
+  width: 28px;
+  height: 28px;
   border-radius: 8px;
   display: grid;
   place-items: center;
-  font-size: 11px;
-  font-weight: 700;
-  border: 1px solid #2b3f74;
-  background: #0d1631;
+  border: 1px solid #324f8a;
+  background: linear-gradient(180deg, #0f1e40, #0d1a37);
+}
+
+.nav-icon svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
 .nav-label {
   font-size: 15px;
-  font-weight: 600;
+  font-weight: 650;
+  letter-spacing: 0.01em;
 }
 
 .profile {
   margin-top: auto;
   border-top: 1px solid #223056;
-  padding-top: 16px;
+  padding-top: 14px;
+  color: #d7e4fa;
 }
 
 .role {