diff --git a/ui/package.json b/ui/package.json
index b9af80ab..1d38aa04 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -23,7 +23,7 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "lodash": "^4.17.21",
     "mapbox-gl-style-switcher": "^1.0.11",
-    "maplibre-gl": "^2.4.0",
+    "maplibre-gl": "4.5.2",
     "react": "^18.3.1",
     "react-autocomplete-hint": "^2.0.0",
     "react-color": "^2.19.3",
@@ -70,7 +70,6 @@
     "@types/hat": "^0.0.4",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.7",
-    "@types/mapbox-gl": "^2.7.21",
     "@types/mapbox__mapbox-gl-draw": "~1.4.6",
     "@types/node": "^20.16.1",
     "@types/react": "^18.3.4",
diff --git a/ui/src/App.scss b/ui/src/App.scss
index c2bf3aaa..2778dbf2 100644
--- a/ui/src/App.scss
+++ b/ui/src/App.scss
@@ -13,8 +13,7 @@ $grey-lighter: hsl(221, 14%, 86%);
 $grey-lightest: hsl(221, 14%, 93%);
 
 // Override global Sass variables from the /utilities folder
-@use "bulma/sass/utilities" with (
-  $family-primary: '"B612",sans-serif',
+@use "bulma/sass/utilities" with ($family-primary: '"B612",sans-serif',
   $family-monospace: '"B612 Mono", monospace',
   $primary: $orange,
   $warning: $yellow,
@@ -32,8 +31,7 @@ $grey-lightest: hsl(221, 14%, 93%);
   $grey: $grey,
   $grey-light: $grey-light,
   $grey-lighter: $grey-lighter,
-  $grey-lightest: $grey-lightest
-);
+  $grey-lightest: $grey-lightest);
 
 // Import the components we need
 @forward "bulma/sass/base";
@@ -43,20 +41,12 @@ $grey-lightest: hsl(221, 14%, 93%);
 @forward "bulma/sass/components/breadcrumb";
 @forward "bulma/sass/components/card";
 @forward "bulma/sass/components/dropdown";
-@use "bulma/sass/components/message" with (
-  $message-body-padding: 1em 1.5em 0em 1em
-);
-@use "bulma/sass/components/modal" with (
-  $modal-content-width: 80rem
-);
-@use "bulma/sass/components/navbar" with (
-  $navbar-height: $navbar-height
-);
+@use "bulma/sass/components/message" with ($message-body-padding: 1em 1.5em 0em 1em);
+@use "bulma/sass/components/modal" with ($modal-content-width: 80rem);
+@use "bulma/sass/components/navbar" with ($navbar-height: $navbar-height);
 @forward "bulma/sass/components/tabs";
 
-@use "bulma/sass/form" with (
-  $input-shadow: none
-);
+@use "bulma/sass/form" with ($input-shadow: none);
 
 // Import the bulma elements we need
 @forward "bulma/sass/elements/box";
@@ -69,9 +59,7 @@ $grey-lightest: hsl(221, 14%, 93%);
 @forward "bulma/sass/elements/tag";
 @forward "bulma/sass/elements/title";
 
-@use "bulma/sass/layout/footer" with (
-  $footer-padding: 2rem 1.5rem 2rem
-);
+@use "bulma/sass/layout/footer" with ($footer-padding: 2rem 1.5rem 2rem);
 @forward "bulma/sass/layout/hero";
 @forward "bulma/sass/layout/section";
 @forward "bulma/sass/layout/level";
@@ -84,6 +72,8 @@ $grey-lightest: hsl(221, 14%, 93%);
 @import url("assets/b612-mono/b612-mono.css");
 @import url("assets/b612/b612.css");
 
+@import "maplibre-gl/dist/maplibre-gl";
+
 // Other customizations
 section {
   &.is-fullheight-with-navbar {
@@ -123,8 +113,7 @@ section {
   }
 
   .tbody {
-    tr {
-    }
+    tr {}
   }
 }
 
@@ -142,10 +131,23 @@ section {
   border-color: $red;
 }
 
-.mapboxgl-map {
+.maplibregl-map {
   min-height: 79vh;
 }
 
+.maplibregl-ctrl-bottom-right .maplibregl-ctrl {
+  float: right;
+  margin: 0 10px px 30px 0;
+}
+
+.mapboxgl-ctrl-group {
+  @extend .maplibregl-ctrl-group !optional;
+}
+
+.mapboxgl-ctrl {
+  @extend .maplibregl-ctrl !optional;
+}
+
 @media screen {
   .is-print {
     display: none !important;
@@ -218,4 +220,4 @@ section {
       font-size: 11px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/src/views/map/Map.tsx b/ui/src/views/map/Map.tsx
index 0a29a4a4..38ef971f 100644
--- a/ui/src/views/map/Map.tsx
+++ b/ui/src/views/map/Map.tsx
@@ -1,6 +1,5 @@
 
 import './control-panel.css';
-import 'maplibre-gl/dist/maplibre-gl.css';
 import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
 import { AddFeatureToLayer, DeleteFeature, GetLayers, ModifyFeature } from './graphql';
 import { AddFeatureVars, DeleteFeatureVars, GetLayersData, GetLayersVars, Layer, ModifyFeatureVars } from 'types/layer';
@@ -10,7 +9,7 @@ import { CleanFeature, FilterActiveFeatures, LayerToFeatureCollection } from './
 import { displayStyle, drawStyle } from './style';
 import { Feature, Geometry, GeoJsonProperties, FeatureCollection } from "geojson";
 import { first } from 'lodash';
-import { FullscreenControl, Map, MapProvider, MapRef, NavigationControl, ScaleControl, Source, useMap, Layer as MapLayer } from 'react-map-gl/maplibre';
+import { FullscreenControl, Map, MapProvider, MapRef, NavigationControl, ScaleControl, Source, useMap, Layer as MapLayer, AttributionControl } from 'react-map-gl/maplibre';
 import { LayerContext, LayersProvider } from './LayerContext';
 import { StyleController, selectedStyle } from './controls/StyleController';
 import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
@@ -64,26 +63,29 @@ function MapView() {
     return (
         <>
             <h3 className="title is-size-3 is-capitalized">Lage</h3>
-            <div className='mapbox container-flex'>
+            <div className='maplibre container-flex'>
                 <MapProvider>
                     <Map
                         ref={mapRef}
                         mapLib={maplibregl}
                         onLoad={onMapLoad}
-                        attributionControl={true}
+                        attributionControl={false}
                         minZoom={8}
                         maxZoom={19}
                         {...viewState}
                         onMove={e => setViewState(e.viewState)}
                         mapStyle={mapStyle.uri}
+                        touchPitch={true}
+                        touchZoomRotate={true}
+                        scrollZoom={true}
                     >
 
+                        <AttributionControl position='bottom-left' compact={true} />
                         {/* All Map Controls */}
                         <FullscreenControl position={'top-left'} />
                         <NavigationControl position={'top-left'} visualizePitch={true} />
-                        <StyleController />
                         <ScaleControl unit={"metric"} position={'bottom-left'} />
-                        <ExportControl />
+                        <ExportControl position="bottom-left" />
                         {/* Layersprovider and Draw */}
                         <Layers />
                     </Map>
@@ -99,7 +101,10 @@ function Layers() {
     return (
         <LayersProvider >
             <LayerFetcher />
-            <LayerControl />
+            <div className="maplibregl-ctrl-bottom-right" >
+                <LayerControl />
+                <StyleController />
+            </div>
 
             {/* Active Layer */}
             <ActiveLayer />
diff --git a/ui/src/views/map/controls/BabsIconController.scss b/ui/src/views/map/controls/BabsIconController.scss
index f8beafee..8830de0b 100644
--- a/ui/src/views/map/controls/BabsIconController.scss
+++ b/ui/src/views/map/controls/BabsIconController.scss
@@ -1,4 +1,3 @@
-.mapboxgl-ctrl-group,
 .maplibregl-ctrl-group {
     button {
         width: 35px;
diff --git a/ui/src/views/map/controls/BabsIconController.tsx b/ui/src/views/map/controls/BabsIconController.tsx
index 88c5057b..f9c91f03 100644
--- a/ui/src/views/map/controls/BabsIconController.tsx
+++ b/ui/src/views/map/controls/BabsIconController.tsx
@@ -73,7 +73,7 @@ function IconController(props: BabsIconControllerProps) {
     }
 
     return (
-        <div className="maplibregl-ctrl-top-right mapboxgl-ctrl-top-right" style={iconControllerStyle}>
+        <div className="maplibregl-ctrl-top-right" style={iconControllerStyle}>
             {Object.keys(IconGroups).map((group) => <IconGroupMenu key={group} name={group} iconGroup={IconGroups[group]} onUpdate={onUpdate} feature={selectedFeature} />)}
             <div className="maplibregl-ctrl maplibregl-ctrl-group" style={{ display: "flex", flexFlow: "column wrap", flexGrow: 2, flexShrink: 4, flexBasis: 0, justifyContent: 'flex-end', alignSelf: 'baseline', marginTop: "5px" }}>
                 <button type="button" className='maplibregl-ctrl-icon' title={rotationLock ? "Fixierte Signatur lösen" : "Signatur fixieren"} onClick={() => { onRotateClick(!rotationLock) }}>
@@ -171,7 +171,7 @@ function LineController(props: BabsIconControllerProps) {
 
 
     return (
-        <div className="maplibregl-ctrl-top-right mapboxgl-ctrl-top-right" style={iconControllerStyle}>
+        <div className="maplibregl-ctrl-top-right" style={iconControllerStyle}>
             <div className="maplibregl-ctrl maplibregl-ctrl-group" style={iconControllerFlexboxStyleColumn}>
                 {Object.values(LineTypes).map((t) =>
                     (<button key={t.name} title={t.description} onClick={() => onClickIcon(t)} ><img src={t.icon.src} alt={icon.name} /></button>)
@@ -211,7 +211,7 @@ function ZoneController(props: BabsIconControllerProps) {
 
 
     return (
-        <div className="maplibregl-ctrl-top-right mapboxgl-ctrl-top-right" style={iconControllerStyle}>
+        <div className="maplibregl-ctrl-top-right" style={iconControllerStyle}>
             <div className="maplibregl-ctrl maplibregl-ctrl-group" style={iconControllerFlexboxStyleColumn}>
                 {Object.values(ZoneTypes).map((t) =>
                     (<button key={t.name} title={t.description} onClick={() => onClickIcon(t)} ><img src={t.icon.src} alt={icon.name} /></button>)
@@ -393,8 +393,8 @@ function FeatureDetailControlPanel(props: BabsIconControllerProps) {
 
     if (!active) {
         return (
-            <div className="maplibregl-ctrl-top-right mapboxgl-ctrl-top-right" style={{ marginRight: "45px" }}>
-                <div className='mapboxgl-ctrl mapboxgl-ctrl-group' >
+            <div className="maplibregl-ctrl-top-right" style={{ marginRight: "45px" }}>
+                <div className='maplibregl-ctrl maplibregl-ctrl-group' >
                     <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faHeading} size="lg" /></button>
                 </div>
             </div >
diff --git a/ui/src/views/map/controls/ExportControl.tsx b/ui/src/views/map/controls/ExportControl.tsx
index 814088bf..1ef7e70c 100644
--- a/ui/src/views/map/controls/ExportControl.tsx
+++ b/ui/src/views/map/controls/ExportControl.tsx
@@ -50,8 +50,5 @@ function ExportControl(props: ExportControlProps): null {
 
     return null;
 }
-ExportControl.defaultProps = {
-    position: 'bottom-left'
-};
 
 export default ExportControl;
\ No newline at end of file
diff --git a/ui/src/views/map/controls/LayerControl.tsx b/ui/src/views/map/controls/LayerControl.tsx
index 0acb423c..ce255d74 100644
--- a/ui/src/views/map/controls/LayerControl.tsx
+++ b/ui/src/views/map/controls/LayerControl.tsx
@@ -30,13 +30,11 @@ function LayerPanel() {
     }, [dispatch]);
 
     return (
-        <div className="maplibregl-ctrl-bottom-right mapboxgl-ctrl-bottom-right" style={{ paddingBottom: "65px" }}>
-            <div className='mapboxgl-ctrl mapboxgl-ctrl-group' >
-                <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faLayerGroup} size="lg" /></button>
-                <div className={switcherClass}>
-                    {state.layers.map((l) => { return <button type="button" className={classNames({ "button": true, "active": state.activeLayer === l.id })} key={l.id} onClick={() => onClick(l)}>{l.name}</button> })}
-                </div >
-            </div>
+        <div className='maplibregl-ctrl maplibregl-ctrl-group' >
+            <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faLayerGroup} size="lg" /></button>
+            < div className={switcherClass} >
+                {state.layers.map((l) => { return <button type="button" className={classNames({ "button": true, "active": state.activeLayer === l.id })} key={l.id} onClick={() => onClick(l)}>{l.name}</button> })}
+            </div >
         </div >
     );
 }
diff --git a/ui/src/views/map/controls/StyleController.scss b/ui/src/views/map/controls/StyleController.scss
index 9981748a..d27cd2a8 100644
--- a/ui/src/views/map/controls/StyleController.scss
+++ b/ui/src/views/map/controls/StyleController.scss
@@ -10,6 +10,7 @@
     height: auto;
     block-size: fit-content;
     width: fit-content;
+    margin-right: 50px;
 
     button.active {
         font-weight: bold;
diff --git a/ui/src/views/map/controls/StyleController.tsx b/ui/src/views/map/controls/StyleController.tsx
index b1428a34..d2823ca8 100644
--- a/ui/src/views/map/controls/StyleController.tsx
+++ b/ui/src/views/map/controls/StyleController.tsx
@@ -50,14 +50,12 @@ function StyleController() {
     }, [setActive]);
 
     return (
-        <div className="maplibregl-ctrl-bottom-right mapboxgl-ctrl-bottom-right" style={{ paddingBottom: "15px" }}>
-            <div className='mapboxgl-ctrl mapboxgl-ctrl-group' >
-                <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faMap} size="lg" /></button>
-                <div className={switcherClass}>
-                    {MapStyles.map((s) => { return <button type="button" className={classNames({ "button": true, "active": style.name === s.name })} key={s.name} onClick={() => onClick(s)}>{s.name}</button> })}
-                </div >
-            </div>
-        </div >
+        <div className='maplibregl-ctrl maplibregl-ctrl-group' >
+            <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faMap} size="lg" /></button>
+            <div className={switcherClass}>
+                {MapStyles.map((s) => { return <button type="button" className={classNames({ "button": true, "active": style.name === s.name })} key={s.name} onClick={() => onClick(s)}>{s.name}</button> })}
+            </div >
+        </div>
     );
 }
 
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 26d70755..b0596175 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -3046,13 +3046,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mapbox/mapbox-gl-supported@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "@mapbox/mapbox-gl-supported@npm:2.0.1"
-  checksum: 10/36877eb32510e43ad524152fc95bb29e04e3ba7129d0f81ccb3704a71badac7e53e6ef0a203d3ae6d4fd289844fb6229e7ec31c9e66934c4a74b33ee1a7fde0f
-  languageName: node
-  linkType: hard
-
 "@mapbox/point-geometry@npm:0.1.0, @mapbox/point-geometry@npm:^0.1.0, @mapbox/point-geometry@npm:~0.1.0":
   version: 0.1.0
   resolution: "@mapbox/point-geometry@npm:0.1.0"
@@ -3067,7 +3060,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mapbox/tiny-sdf@npm:^2.0.5, @mapbox/tiny-sdf@npm:^2.0.6":
+"@mapbox/tiny-sdf@npm:^2.0.6":
   version: 2.0.6
   resolution: "@mapbox/tiny-sdf@npm:2.0.6"
   checksum: 10/61da9df5fea197137bb76c07cbf12336382d0e6fa84426558b05bffc53f27f6a6465cd09e6af7b50a7b0b7283b7b68f0dcc7f7dd05ef4d88658dc325163f422c
@@ -4075,15 +4068,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mapbox-gl@npm:^2.7.21":
-  version: 2.7.21
-  resolution: "@types/mapbox-gl@npm:2.7.21"
-  dependencies:
-    "@types/geojson": "npm:*"
-  checksum: 10/95ad2c0c135b090dfef9a5fc8e66a0f2ac70d44617c23e10984288fe268c49e9c72c3e801461a680ad60981c6b2fdd03a4f0df5ccc2bfa24f4b00c5ef6c66df4
-  languageName: node
-  linkType: hard
-
 "@types/mapbox__mapbox-gl-draw@npm:~1.4.6":
   version: 1.4.6
   resolution: "@types/mapbox__mapbox-gl-draw@npm:1.4.6"
@@ -4094,7 +4078,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mapbox__point-geometry@npm:*, @types/mapbox__point-geometry@npm:^0.1.2":
+"@types/mapbox__point-geometry@npm:*":
   version: 0.1.2
   resolution: "@types/mapbox__point-geometry@npm:0.1.2"
   checksum: 10/6e495e5d7e1fae986ab28ee26b5443b9e6ba54ad97c9df051832ab6e2aafc65fe63d4dd80101c922372fa01423b6947fdcfd253f298b3154418c17e7d3a8aa47
@@ -4108,17 +4092,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mapbox__vector-tile@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "@types/mapbox__vector-tile@npm:1.3.0"
-  dependencies:
-    "@types/geojson": "npm:*"
-    "@types/mapbox__point-geometry": "npm:*"
-    "@types/pbf": "npm:*"
-  checksum: 10/42fbeba625b6cb3bad47ea79b947aea2a1e32d0620b2f2e17a45cc075ca3be2990697115dd4896d84f11df7c0a9a3533ee76414745b8fd29cb311677b1c6832f
-  languageName: node
-  linkType: hard
-
 "@types/mapbox__vector-tile@npm:^1.3.4":
   version: 1.3.4
   resolution: "@types/mapbox__vector-tile@npm:1.3.4"
@@ -4162,7 +4135,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/pbf@npm:*, @types/pbf@npm:^3.0.2":
+"@types/pbf@npm:*":
   version: 3.0.2
   resolution: "@types/pbf@npm:3.0.2"
   checksum: 10/1d4bde918511761bb00bfe5f705d79c3ab6b56a8400fd6434b643defe3f1cc211d5f2b7b4a2cde374cb73614099f7d1a3c6d0a95b669a058c80baa095861909e
@@ -6203,7 +6176,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"earcut@npm:^2.2.2, earcut@npm:^2.2.4":
+"earcut@npm:^2.2.2":
   version: 2.2.4
   resolution: "earcut@npm:2.2.4"
   checksum: 10/ca8b24714cc2fa67f98fbca6ddcf64bb42ee8d75d0b4f1a81486b3282b0f7f1bf9ec49ad4d02149985886a0c8a03a173463f2acb1f51fa0bb7ba2e1d4aa1254d
@@ -9832,39 +9805,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"maplibre-gl@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "maplibre-gl@npm:2.4.0"
-  dependencies:
-    "@mapbox/geojson-rewind": "npm:^0.5.2"
-    "@mapbox/jsonlint-lines-primitives": "npm:^2.0.2"
-    "@mapbox/mapbox-gl-supported": "npm:^2.0.1"
-    "@mapbox/point-geometry": "npm:^0.1.0"
-    "@mapbox/tiny-sdf": "npm:^2.0.5"
-    "@mapbox/unitbezier": "npm:^0.0.1"
-    "@mapbox/vector-tile": "npm:^1.3.1"
-    "@mapbox/whoots-js": "npm:^3.1.0"
-    "@types/geojson": "npm:^7946.0.10"
-    "@types/mapbox__point-geometry": "npm:^0.1.2"
-    "@types/mapbox__vector-tile": "npm:^1.3.0"
-    "@types/pbf": "npm:^3.0.2"
-    csscolorparser: "npm:~1.0.3"
-    earcut: "npm:^2.2.4"
-    geojson-vt: "npm:^3.2.1"
-    gl-matrix: "npm:^3.4.3"
-    global-prefix: "npm:^3.0.0"
-    murmurhash-js: "npm:^1.0.0"
-    pbf: "npm:^3.2.1"
-    potpack: "npm:^1.0.2"
-    quickselect: "npm:^2.0.0"
-    supercluster: "npm:^7.1.5"
-    tinyqueue: "npm:^2.0.3"
-    vt-pbf: "npm:^3.1.3"
-  checksum: 10/30231781713a9d75e02a4f584cff8a41489dc28286ae950e035442e5874c51ef2bba9c2836ae010903e19d3e74f24100bb507d66cfbf624fbd084a6d81b34d9a
-  languageName: node
-  linkType: hard
-
-"maplibre-gl@npm:^4.1.0":
+"maplibre-gl@npm:4.5.2, maplibre-gl@npm:^4.1.0":
   version: 4.5.2
   resolution: "maplibre-gl@npm:4.5.2"
   dependencies:
@@ -11108,7 +11049,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"potpack@npm:^1.0.1, potpack@npm:^1.0.2":
+"potpack@npm:^1.0.1":
   version: 1.0.2
   resolution: "potpack@npm:1.0.2"
   checksum: 10/9dfdbbce012ce80842249abcdd89e20222eb8ae96beba8d578b7e41e78feefc7e33b5c72d46fb8dd3a1e382cb4da9c34574764d88aa8849ab36f542fd2088b42
@@ -12388,7 +12329,6 @@ __metadata:
     "@types/hat": "npm:^0.0.4"
     "@types/jest": "npm:^29.5.12"
     "@types/lodash": "npm:^4.17.7"
-    "@types/mapbox-gl": "npm:^2.7.21"
     "@types/mapbox__mapbox-gl-draw": "npm:~1.4.6"
     "@types/node": "npm:^20.16.1"
     "@types/react": "npm:^18.3.4"
@@ -12419,7 +12359,7 @@ __metadata:
     lint-staged: "npm:^15.2.9"
     lodash: "npm:^4.17.21"
     mapbox-gl-style-switcher: "npm:^1.0.11"
-    maplibre-gl: "npm:^2.4.0"
+    maplibre-gl: "npm:4.5.2"
     prettier: "npm:^3.3.3"
     react: "npm:^18.3.1"
     react-autocomplete-hint: "npm:^2.0.0"
@@ -12983,7 +12923,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supercluster@npm:^7.1.0, supercluster@npm:^7.1.5":
+"supercluster@npm:^7.1.0":
   version: 7.1.5
   resolution: "supercluster@npm:7.1.5"
   dependencies: