diff --git a/frontend/src/views/main/SideBar.vue b/frontend/src/views/main/SideBar.vue
index 6a7024e..486d608 100644
--- a/frontend/src/views/main/SideBar.vue
+++ b/frontend/src/views/main/SideBar.vue
@@ -34,7 +34,7 @@ function toggleLanguage() {
 </script>
 
 <template>
-  <nav class="fixed flex flex-col h-full bg-hBackground border-r border-hOnBackground max-w-64 px-1">
+  <nav class="container">
     <div class="mt-4 px-4">
       <router-link to="/@hutopy">
         <img src="/images/hutopy-logo.png"
@@ -44,8 +44,7 @@ function toggleLanguage() {
 
     <div class="flex-grow"></div>
 
-
-    <div class="flex flex-col gap-4 p-4">
+    <div class="flex flex-col gap-2 p-4">
 
       <div class="flex items-center justify-start">
         <img :src="userProfileStore.portraitUrl"
@@ -110,16 +109,21 @@ function toggleLanguage() {
 
 <style scoped>
 
+.container {
+  @apply fixed flex flex-col h-full max-w-64;
+  @apply border-r;
+  @apply bg-hBackground border-[#3d3d3d] text-hOnBackground;
+}
+
 .profile {
-  @apply ml-4 text-lg font-sans capitalize text-hOnBackground;
+  @apply ml-4 text-lg font-sans capitalize;
   @apply font-sans font-semibold;
 }
 
 .action {
   @apply w-full flex items-center gap-4 px-4 py-2 rounded;
   @apply capitalize text-base font-sans font-medium;
-  @apply bg-hSecondary text-hOnSecondary;
-  @apply hover:brightness-90;
+  @apply bg-hBackground hover:bg-hSurface; /* FIXME: The hover value is not semantically correct */
 }
 
 </style>
\ No newline at end of file