diff --git a/lib/src/Components/Map/Subcomponents/AddButton.tsx b/lib/src/Components/Map/Subcomponents/AddButton.tsx
index 8f7854a1..888d3ed9 100644
--- a/lib/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/lib/src/Components/Map/Subcomponents/AddButton.tsx
@@ -1,7 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { DomEvent } from 'leaflet'
-import { useEffect, useRef, useState } from 'react'
 import SVG from 'react-inlinesvg'
 
 import PlusSVG from '#assets/plus.svg'
@@ -10,8 +8,6 @@ import { useLayers } from '#components/Map/hooks/useLayers'
 import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
 import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
 
-import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react'
-
 export default function AddButton({
   triggerAction,
 }: {
@@ -22,27 +18,6 @@ export default function AddButton({
   const appState = useAppState()
   const { width } = useWindowDimensions()
   const isMobile = width < 768
-  const [isOpen, setIsOpen] = useState(false)
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container) return
-
-    DomEvent.disableClickPropagation(container)
-    DomEvent.disableScrollPropagation(container)
-
-    const handlePointerDown = (event: PointerEvent) => {
-      event.stopPropagation()
-      event.preventDefault()
-    }
-
-    DomEvent.on(container, 'pointerdown', handlePointerDown)
-
-    return () => {
-      DomEvent.off(container, 'pointerdown', handlePointerDown)
-    }
-  }, [])
 
   const canAddItems = () => {
     let canAdd = false
@@ -58,54 +33,16 @@ export default function AddButton({
     return canAdd
   }
 
-  const stopPropagation = (
-    event: ReactMouseEvent<HTMLElement> | ReactTouchEvent<HTMLElement>,
-  ): void => {
-    const shouldPreventDefault = event.type === 'mousedown' || event.type === 'touchstart'
-    if (shouldPreventDefault) {
-      event.preventDefault()
-    }
-    event.stopPropagation()
-    if (
-      'nativeEvent' in event &&
-      typeof event.nativeEvent.stopImmediatePropagation === 'function'
-    ) {
-      event.nativeEvent.stopImmediatePropagation()
-    }
-  }
-
-  const handleLayerSelect = (
-    event: ReactMouseEvent<HTMLButtonElement> | ReactTouchEvent<HTMLButtonElement>,
-    layer: (typeof layers)[number],
-  ) => {
-    stopPropagation(event)
-    triggerAction(layer)
-    setIsOpen(false)
-  }
-
   return (
     <>
       {canAddItems() ? (
-        <div
-          ref={containerRef}
-          className={`tw:dropdown tw:dropdown-top tw:dropdown-end tw:z-500 tw:absolute tw:right-4 tw:bottom-4 ${isOpen ? 'tw:dropdown-open' : ''}`}
-        >
-          <button
-            type='button'
-            className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg tw:shadow tw:bg-base-100'
-            onMouseDown={(event) => {
-              stopPropagation(event)
-            }}
-            onClick={(event) => {
-              stopPropagation(event)
-              setIsOpen((prev) => !prev)
-            }}
-            onTouchStart={(event) => {
-              stopPropagation(event)
-            }}
+        <div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'>
+          <label
+            tabIndex={0}
+            className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg  tw:shadow tw:bg-base-100'
           >
             <SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
-          </button>
+          </label>
           <ul
             tabIndex={0}
             className='tw:dropdown-content tw:pr-1 tw:list-none tw:space-y-3 tw:pb-3'
@@ -125,14 +62,12 @@ export default function AddButton({
                           tabIndex={0}
                           className='tw:z-500 tw:border-0 tw:p-0 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden tw:flex tw:items-center tw:justify-center'
                           style={{ backgroundColor: layer.menuColor || '#777' }}
-                          onMouseDown={(event) => {
-                            stopPropagation(event)
+                          onClick={() => {
+                            triggerAction(layer)
                           }}
-                          onClick={(event) => {
-                            handleLayerSelect(event, layer)
-                          }}
-                          onTouchStart={(event) => {
-                            stopPropagation(event)
+                          onTouchEnd={(e) => {
+                            triggerAction(layer)
+                            e.preventDefault()
                           }}
                         >
                           <img