diff --git a/app/src/gui/fields/maps/MapWrapper.tsx b/app/src/gui/fields/maps/MapWrapper.tsx
index 58a8a782a..e08ca7747 100644
--- a/app/src/gui/fields/maps/MapWrapper.tsx
+++ b/app/src/gui/fields/maps/MapWrapper.tsx
@@ -36,6 +36,7 @@ import {register} from 'ol/proj/proj4';
 import Button, {ButtonProps} from '@mui/material/Button';
 import CloseIcon from '@mui/icons-material/Close';
 import GeoJSON from 'ol/format/GeoJSON';
+import Zoom from 'ol/control/Zoom';
 
 // define some EPSG codes - these are for two sample images
 // TODO: we need to have a better way to include a useful set or allow
@@ -131,7 +132,7 @@ function MapWrapper(props: MapProps) {
         target: element,
         layers: [tileLayer],
         view: view,
-        controls: [],
+        controls: [new Zoom()],
       });
 
       theMap.getView().setCenter(center);
diff --git a/app/src/index.css b/app/src/index.css
index ec2585e8c..feb591879 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -11,3 +11,31 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.ol-zoom {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  background-color: white;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+}
+
+.ol-zoom-in {
+  font-size: 24px;
+  background-color: rgb(23 23 23);
+  color: white;
+  font-weight: bold;
+  border-radius: 6px;
+}
+
+.ol-zoom-out {
+  font-size: 24px;
+  background-color: rgb(23 23 23);
+  color: white;
+  font-weight: bold;
+  border-radius: 6px;
+}
\ No newline at end of file