diff --git a/src/app/core/components/navigation-bar/navigation-bar.html b/src/app/core/components/navigation-bar/navigation-bar.html
index 7989f1f..95d2f43 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.html
+++ b/src/app/core/components/navigation-bar/navigation-bar.html
@@ -16,7 +16,7 @@
             </ul>
         </p-card>
     </div>
-    <div class="options flex flex-row gap-[10px]">
+    <div class="options flex flex-row gap-[10px] items-center">
         @if (themeSwitchService.darkMode()) {
             <div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToLight()">
                 <fa-icon [icon]="faMoon"/>
diff --git a/src/app/core/components/navigation-bar/navigation-bar.scss b/src/app/core/components/navigation-bar/navigation-bar.scss
index 08ba449..7dd6fc2 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.scss
+++ b/src/app/core/components/navigation-bar/navigation-bar.scss
@@ -8,11 +8,11 @@ nav {
         transition: border .5s ease;
 
         &:hover {
-            border-color: var(--surface-100);
+            border-color: var(--content-hover-background);
         }
 
         &:active {
-            border-color: var(--surface-500);
+            border-color: var(--content-border-color);
         }
     }