diff --git a/src/app/navigation/topbar/topbar.component.html b/src/app/navigation/topbar/topbar.component.html
index 2a6438f..76e7974 100644
--- a/src/app/navigation/topbar/topbar.component.html
+++ b/src/app/navigation/topbar/topbar.component.html
@@ -27,4 +27,5 @@
     }
   </div>
   }
+  <theme />
 </mat-toolbar>
\ No newline at end of file
diff --git a/src/app/navigation/topbar/topbar.component.ts b/src/app/navigation/topbar/topbar.component.ts
index 84cf557..816bc12 100644
--- a/src/app/navigation/topbar/topbar.component.ts
+++ b/src/app/navigation/topbar/topbar.component.ts
@@ -9,6 +9,7 @@ import { ImpersonationComponent } from '../../auth/impersonation/impersonation.c
 import { HermesClientService } from '../../hermes-client.service';
 import EventService from '../../shared/services/EventService';
 import { Subscription } from 'rxjs';
+import { ThemeComponent } from "../../theme/theme.component";
 
 @Component({
   selector: 'topbar',
@@ -19,7 +20,8 @@ import { Subscription } from 'rxjs';
     MatButtonModule,
     MatIconModule,
     MatToolbarModule,
-  ],
+    ThemeComponent,
+],
   providers: [AuthVisitorGuard],
   templateUrl: './topbar.component.html',
   styleUrl: './topbar.component.scss'
diff --git a/src/app/theme/theme.component.html b/src/app/theme/theme.component.html
index 24fbdd2..881c0df 100644
--- a/src/app/theme/theme.component.html
+++ b/src/app/theme/theme.component.html
@@ -1,6 +1,5 @@
 <button mat-icon-button
-        class="refresh"
         aria-label="Change theme"
         (click)="toggle()">
-  <mat-icon>refresh</mat-icon>
+  <mat-icon>{{isLightMode ? 'dark_mode' : 'light_mode'}}</mat-icon>
 </button>
\ No newline at end of file