diff --git a/lib/src/Components/Map/Subcomponents/AddButton.tsx b/lib/src/Components/Map/Subcomponents/AddButton.tsx
index 320f5352..374c4adf 100644
--- a/lib/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/lib/src/Components/Map/Subcomponents/AddButton.tsx
@@ -1,11 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { useState } from 'react'
 import SVG from 'react-inlinesvg'
 
 import PlusSVG from '#assets/plus.svg'
 import { useAppState } from '#components/AppShell/hooks/useAppState'
 import { useLayers } from '#components/Map/hooks/useLayers'
 import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
+import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
 
 export default function AddButton({
   triggerAction,
@@ -15,6 +17,9 @@ export default function AddButton({
   const layers = useLayers()
   const hasUserPermission = useHasUserPermission()
   const appState = useAppState()
+  const { width } = useWindowDimensions()
+  const isMobile = width < 768
+  const [isOpen, setIsOpen] = useState(false)
 
   const canAddItems = () => {
     let canAdd = false
@@ -33,10 +38,17 @@ export default function AddButton({
   return (
     <>
       {canAddItems() ? (
-        <div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'>
+        <div
+          className={`tw:dropdown tw:dropdown-top tw:dropdown-end ${!isMobile ? 'tw:dropdown-hover' : ''} tw:z-500 tw:absolute tw:right-4 tw:bottom-4 ${isOpen ? 'tw:dropdown-open' : ''}`}
+        >
           <label
             tabIndex={0}
             className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg  tw:shadow tw:bg-base-100'
+            onClick={() => {
+              if (isMobile) {
+                setIsOpen(!isOpen)
+              }
+            }}
           >
             <SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
           </label>
@@ -48,16 +60,21 @@ export default function AddButton({
                 layer.listed && (
                   <li key={layer.name}>
                     <a>
-                      <div className='tw:tooltip tw:tooltip-left' data-tip={layer.menuText}>
+                      <div
+                        className={`tw:tooltip tw:tooltip-left ${isMobile ? 'tw:tooltip-open' : ''}`}
+                        data-tip={layer.menuText}
+                      >
                         <button
                           tabIndex={0}
                           className='tw:z-500 tw:border-0 tw:p-0 tw:mb-3 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' }}
                           onClick={() => {
                             triggerAction(layer)
+                            setIsOpen(false)
                           }}
                           onTouchEnd={(e) => {
                             triggerAction(layer)
+                            setIsOpen(false)
                             e.preventDefault()
                           }}
                         >