diff --git a/frontend/src/App.css b/frontend/src/App.css
index 60e0e06..adfda3e 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -34,7 +34,7 @@ body {
 }
 .vr {
   width: 1px;
-  height: 100vh;
+  height: 100dvh;
   background-color: #855621;
 }
 .sidebarcontent {
@@ -43,8 +43,7 @@ body {
   justify-content: space-around;
   align-items: center;
   height: 100%;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 30px;
 }
 .sidebarcontent ul {
   display: flex;
@@ -76,17 +75,13 @@ body {
   transition: font-size 0.1s ease, text-shadow 0.5s ease;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
   @apply font-[600] text-lg
 }
 .sidebar li:hover > .sidebarkeys {
   font-size: 20px;
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
 }
-.sidebar li:hover > .icon{
+.sidebar li:hover > .sidebarkeys >.icon{
   height: 50px;
   left: 20px;
 }
@@ -107,17 +102,18 @@ body {
   font-size: 25px;
 }
 
-.active{
-  background-color: #302e2e !important;
-  border: 2px solid #f39425 !important;
-}
-
 .passVaultItemList{
   transition: all 0.1s ease;
   border: 2px solid rgba(48,46,46,0.49);
   @apply py-2 px-2 w-10/12 rounded-md bg-[rgba(48,46,46,0.49)]
 }
 
+.active-item{
+  background-color: #302e2e !important;
+  border: 2px solid #f39425 !important;
+}
+
+
 .passVaultItemList:hover{
   background-color: #302e2e;
 }
@@ -166,4 +162,9 @@ tr:nth-child(even) {
 .item-details-form input{
   padding: 5px;
   border-radius: 5px;
+}
+
+.active{
+  background-color: #141313;
+  border-radius: 50px 0 0 50px;
 }
\ No newline at end of file
diff --git a/frontend/src/components/sidebar.jsx b/frontend/src/components/sidebar.jsx
index 1341da6..6cc752d 100644
--- a/frontend/src/components/sidebar.jsx
+++ b/frontend/src/components/sidebar.jsx
@@ -1,11 +1,34 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import logo from "../images/Logo.svg";
 import lock from "../images/Lock.svg";
 import ssh from "../images/SSH.svg";
 import pgp from "../images/PGP.svg";
 import settings from "../images/Settings.svg";
 
+const sideBarItems = [
+  {
+    path: '/passvault',
+    title: 'PASS VAULT',
+    icon: lock
+  },
+  {
+    path: '/sshkeys',
+    title: 'SSH VAULT',
+    icon: ssh
+  },
+  {
+    path: '/pgpkeys',
+    title: 'PGP VAULT',
+    icon: pgp
+  },
+  {
+    path: '/settings',
+    title: 'SETTINGS',
+    icon: settings
+  }
+]
+
 export const Sidebar = () => {
   return (
     <div className="sidebar">
@@ -17,30 +40,14 @@ export const Sidebar = () => {
       <div className="hr"></div>
       <div className="sidebarcontent">
         <ul className="sidebarlist">
-          <li>
-            <img src={lock} alt="Example" className="icon" />
-            <Link to="/passvault" className="sidebarkeys">
-              PASS VAULT
-            </Link>
-          </li>
-          <li>
-            <img src={ssh} alt="Example" className="icon" />
-            <Link to="/sshkeys" className="sidebarkeys">
-              SSH VAULT
-            </Link>
-          </li>
-          <li>
-            <img src={pgp} alt="Example" className="icon" />
-            <Link to="/pgpkeys" className="sidebarkeys">
-              PGP VAULT
-            </Link>
-          </li>
-          <li>
-            <img src={settings} alt="Example" className="icon" />
-            <Link to="settings" className="sidebarkeys">
-              SETTINGS
-            </Link>
-          </li>
+          {sideBarItems.map((item) => (
+            <li>
+              <NavLink to={item.path} className="sidebarkeys gap-20 items-center">
+              <img src={item.icon} alt="Example" className="icon" />
+                {item.title}
+              </NavLink>
+            </li>
+          ))}
         </ul>
       </div>
     </div>
diff --git a/frontend/src/pages/PGPKeys.jsx b/frontend/src/pages/PGPKeys.jsx
index 9fa8f91..9fe0b10 100644
--- a/frontend/src/pages/PGPKeys.jsx
+++ b/frontend/src/pages/PGPKeys.jsx
@@ -90,7 +90,7 @@ const PassVault = () => {
             }}
             className={
               item.id === selectedItem.id
-                ? "passVaultItemList active cursor-pointer"
+                ? "passVaultItemList active-item cursor-pointer"
                 : "passVaultItemList cursor-pointer"
             }
           >
diff --git a/frontend/src/pages/PassVault.jsx b/frontend/src/pages/PassVault.jsx
index 7741e57..6613b6c 100644
--- a/frontend/src/pages/PassVault.jsx
+++ b/frontend/src/pages/PassVault.jsx
@@ -57,7 +57,7 @@ const PassVault = () => {
             }}
             className={
               item.id === selectedItem.id
-                ? "passVaultItemList active cursor-pointer"
+                ? "passVaultItemList active-item cursor-pointer"
                 : "passVaultItemList cursor-pointer"
             }
           >
diff --git a/frontend/src/pages/SSHKeys.jsx b/frontend/src/pages/SSHKeys.jsx
index 820dfa8..8ec65d1 100644
--- a/frontend/src/pages/SSHKeys.jsx
+++ b/frontend/src/pages/SSHKeys.jsx
@@ -91,7 +91,7 @@ const PassVault = () => {
             }}
             className={
               item.id === selectedItem.id
-                ? "passVaultItemList active cursor-pointer"
+                ? "passVaultItemList active-item cursor-pointer"
                 : "passVaultItemList cursor-pointer"
             }
           >