diff --git a/src/lib/components/SideBar/SideBar.svelte b/src/lib/components/SideBar/SideBar.svelte
index e3d9f854..a75b045c 100644
--- a/src/lib/components/SideBar/SideBar.svelte
+++ b/src/lib/components/SideBar/SideBar.svelte
@@ -3,7 +3,10 @@
   import SideBarLink from "./SideBarLink.svelte";
 </script>
 
-<div id="sidebar" class="flex flex-col outline-slate-100 rounded card outline-5 h-full w-full">
+<div
+  id="sidebar"
+  class="flex flex-col bg-secondary-400 outline-secondary-800 rounded-lg card outline-5 h-full w-full"
+>
   <div class="user-info flex justify-left gap-2 m-3 ml-4">
     <img src="user-icon.png" alt="User Icon" class="user-icon rounded-full w-1/5" />
     <div class="user-name align-text-bottom flex-col content-center justify-center inline-grid">
diff --git a/src/lib/components/SideBar/SideBarLink.svelte b/src/lib/components/SideBar/SideBarLink.svelte
index 2649ba76..f31b32c9 100644
--- a/src/lib/components/SideBar/SideBarLink.svelte
+++ b/src/lib/components/SideBar/SideBarLink.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <a id="sidebar-link-{label}" {href}>
-  <div class="flex flex-row whitespace-nowrap hover:bg-surface-300 w-full gap-2 pl-5 p-3">
+  <div class="flex flex-row whitespace-nowrap hover:bg-secondary-500 w-full gap-2 pl-5 p-3 rounded">
     <img src={icon} alt="Icon" class="w-8 h-8" />
     <span class="text-lg">{label}</span>
   </div>