diff --git a/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.html b/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.html
index 5a8846243d..5c4f67ebe8 100644
--- a/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.html
+++ b/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.html
@@ -1,4 +1,4 @@
-<button class="theme-mode-toggle" (click)="toggleThemeMode()">
-  <span class="material-icons" *ngIf="!isDarkMode"> light_mode </span>
-  <span class="material-icons" *ngIf="isDarkMode"> dark_mode </span>
+<button class="theme-mode-toggle">
+  <span class="material-icons" *ngIf="!isDarkMode" (click)="toggleThemeMode()"> light_mode </span>
+  <span class="material-icons" *ngIf="isDarkMode" (click)="toggleThemeMode()"> dark_mode </span>
 </button>
diff --git a/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss b/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss
index bf6d02ed2c..3fdb2704c8 100644
--- a/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss
+++ b/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss
@@ -23,16 +23,13 @@
   align-items: center;
   justify-content: center;
   margin-left: 15px;
-  cursor: pointer;
   color: #fff;
   padding-left: 15px;
   position: relative;
-  &:hover {
-    color: var(--primary);
-  }
 
   .material-icons {
     font-size: 20px;
+    cursor: pointer;
 
     &::before {
       content: '';
@@ -44,5 +41,9 @@
       bottom: 0;
       width: 2px;
     }
+
+    &:hover {
+      color: var(--primary);
+    }  
   }
 }