diff --git a/src/app/core/components/navigation-bar/navigation-bar.html b/src/app/core/components/navigation-bar/navigation-bar.html
index 212230e..a7967e9 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.html
+++ b/src/app/core/components/navigation-bar/navigation-bar.html
@@ -62,9 +62,15 @@
         }
     </div>
     <div class="options flex flex-row gap-[10px]">
-        <div class="dark-mode size-[50px]">
-            <fa-icon [icon]="faMoon"/>
-        </div>
+        @if (themeSwitchService.darkMode()) {
+            <div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToLight()">
+                <fa-icon [icon]="faMoon"/>
+            </div>
+        } @else {
+            <div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToDark()">
+                <fa-icon [icon]="faSun"/>
+            </div>
+        }
         <div class="language size-[50px]">EN</div>
     </div>
 </nav>
diff --git a/src/app/core/service/theme-switch.service.ts b/src/app/core/service/theme-switch.service.ts
index 2ba7dd3..d63f402 100644
--- a/src/app/core/service/theme-switch.service.ts
+++ b/src/app/core/service/theme-switch.service.ts
@@ -52,4 +52,12 @@ export class ThemeSwitchService {
     console.info(`switching to theme: ${theme.name}`);
     this.theme.set(theme);
   }
+
+  switchToDark() {
+    this.switchToTheme(Theme.THEMES.find(t => t.code === 'dark')!);
+  }
+
+  switchToLight() {
+    this.switchToTheme(Theme.THEMES.find(t => t.code === 'light')!);
+  }
 }