diff --git a/app/src/frontend/map/map-button.css b/app/src/frontend/map/map-button.css
index 277c49a7..2e451173 100644
--- a/app/src/frontend/map/map-button.css
+++ b/app/src/frontend/map/map-button.css
@@ -73,14 +73,14 @@
 }
 
 .theme-switcher {
-    top: 77px;
+    top: 87px;
 }
 .theme-switcher .btn {
     min-width: 340px;
 }
 
 .data-switcher {
-    top: 117px;
+    top: 127px;
 }
 .data-switcher .btn {
     min-width: 340px;
diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx
index 4c8762d4..56a51e97 100644
--- a/app/src/frontend/map/map.tsx
+++ b/app/src/frontend/map/map.tsx
@@ -149,7 +149,10 @@ export const ColouringMap: FC<ColouringMapProps> = ({
             mapColourScale={mapColourScale}
             onMapColourScale={onMapColourScale}
           />
-
+          <ThemeSwitcher
+            onSubmit={darkLightThemeSwitch}
+            currentTheme={darkLightTheme}
+          />
           <DataLayerSwitcher />
           {showLayerSelection == "enabled" ? (
             <>