diff --git a/package-lock.json b/package-lock.json
index 59908e7d..85c764a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@typescript-eslint/eslint-plugin": "^5.38.1",
         "@typescript-eslint/parser": "^5.38.1",
         "autoprefixer": "^10.4.14",
-        "daisyui": "^2.51.5",
+        "daisyui": "^3.3.1",
         "eslint": "^8.24.0",
         "eslint-plugin-react": "^7.31.8",
         "eslint-plugin-react-hooks": "^4.6.0",
@@ -864,19 +864,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -894,16 +881,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/colord": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
@@ -1127,23 +1104,23 @@
       "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
     },
     "node_modules/daisyui": {
-      "version": "2.51.5",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-2.51.5.tgz",
-      "integrity": "sha512-L05dRw0tasmz2Ha+10LhftEGLq4kaA8vRR/T0wDaXfHwqcgsf81jfXDJ6NlZ63Z7Rl1k3rj7UHs0l0p7CM3aYA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.3.1.tgz",
+      "integrity": "sha512-0PVNl+0r2Ie+FRkDNQABYcv8qLc0bt0lhUfSf8PxGocqpDsCB6cNQ5k8jOlnZIjUhc1EXMIDPU9r0pVrfRGftw==",
       "dev": true,
       "dependencies": {
-        "color": "^4.2",
-        "css-selector-tokenizer": "^0.8.0",
-        "postcss-js": "^4.0.0",
+        "colord": "^2.9",
+        "css-selector-tokenizer": "^0.8",
+        "postcss": "^8",
+        "postcss-js": "^4",
         "tailwindcss": "^3"
       },
+      "engines": {
+        "node": ">=16.9.0"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/daisyui"
-      },
-      "peerDependencies": {
-        "autoprefixer": "^10.0.2",
-        "postcss": "^8.1.6"
       }
     },
     "node_modules/debug": {
@@ -2270,12 +2247,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "dev": true
-    },
     "node_modules/is-bigint": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
@@ -4213,15 +4184,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dev": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
diff --git a/package.json b/package.json
index c0b3ac52..a2da520c 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
     "autoprefixer": "^10.4.14",
-    "daisyui": "^2.51.5",
+    "daisyui": "^3.3.1",
     "eslint": "^8.24.0",
     "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.6.0",
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx
index f5a99bca..18257f94 100644
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@@ -38,9 +38,10 @@ export default function NavBar({name, useAuth} : {name: string, useAuth : any})
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="tw-inline-block tw-w-5 tw-h-5 tw-stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
         </button>
         <div className="tw-flex-1 tw-mr-2">
-        <div className="tw-flex-1 tw-truncate  tw-grid tw-grid-flow-col tw-max-w-72">
+        <div className="tw-flex-1 tw-truncate  tw-grid tw-grid-flow-col tw-max-w-52">
           <Link className="tw-btn tw-btn-ghost tw-px-2 tw-normal-case tw-text-xl tw-flex-1 tw-truncate" to={"/"}><p className="tw-truncate">{name}</p></Link>
-          <label htmlFor="my-modal" className="tw-cursor-pointer"><div className="tw-btn tw-px-2  tw-btn-ghost "><QuestionMarkIcon className="tw-h-5 tw-w-5"/></div></label>
+          <button className="tw-btn tw-px-2  tw-btn-ghost" onClick={() => window.my_modal_3.showModal()}><QuestionMarkIcon className="tw-h-5 tw-w-5"/></button>
+
         </div>
         </div>
 
diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
index 278324b8..bd333c53 100644
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@@ -61,7 +61,7 @@ export function SideBar({routes} : {routes : route[]}) {
       data-te-sidenav-slim-width ="56"
       data-te-sidenav-width ="160">
         <div className='tw-flex tw-flex-col tw-h-full' style={{height: "calc(100vh - 64px)"}}>
-      <ul className="tw-menu tw-w-full tw-bg-base-100 tw-text-base-content" data-te-sidenav-menu-ref>
+      <ul className="tw-menu tw-w-full tw-bg-base-100 tw-text-base-content tw-p-0" data-te-sidenav-menu-ref>
         {
           routes.map((route, k) => {
             return (
@@ -72,7 +72,7 @@ export function SideBar({routes} : {routes : route[]}) {
                     (<NavLink
                       end
                       to={route.path}
-                      className={({ isActive }) => `${isActive ? 'tw-font-semibold  tw-bg-base-200 ' : 'tw-font-normal'}`} onClick={ () => {if(screen.width < 640 && !slim) instance.toggle();
+                      className={({ isActive }) => `${isActive ? 'tw-font-semibold  tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`} onClick={ () => {if(screen.width < 640 && !slim) instance.toggle();
                       }}>
                       {route.icon}<span className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:tw-hidden" data-te-sidenav-slim="false">{route.name}</span>
                       {
diff --git a/src/Components/Gaming/Modal.tsx b/src/Components/Gaming/Modal.tsx
index e6dc9f21..9b5a7299 100644
--- a/src/Components/Gaming/Modal.tsx
+++ b/src/Components/Gaming/Modal.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react"
 import * as React from "react"
 
-type ModalProps = {
-    clickAction: () => void
+type ChapterProps = {
+    clickAction?: () => void
 }
 
-export function Welcome1({ clickAction }: ModalProps) {
+
+export function Welcome1({ clickAction }: ChapterProps) {
     return (
         <>
             <h3 className="tw-font-bold tw-text-lg">Herzlich Willkommen, schön dass du da bist! </h3>
@@ -16,13 +17,13 @@ export function Welcome1({ clickAction }: ModalProps) {
                 <br /><br />
                 <b>Hast du Lust mitzumachen?</b></p>
             <div className="tw-modal-action">
-                <label className="tw-btn" onClick={() => clickAction()}>Bin dabei</label>
+                <label className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>Bin dabei</label>
             </div>
         </>
     )
 }
 
-export function Welcome2({ clickAction }: ModalProps) {
+export function Welcome2({ clickAction }: ChapterProps) {
     return (
         <>
             <h3 className="tw-font-bold tw-text-lg">Veränderung passiert im echten Leben</h3>
@@ -31,13 +32,13 @@ export function Welcome2({ clickAction }: ModalProps) {
                 <br /><br />
                 Darum tauchen wir wieder in das echte Leben ein und nutzen digitale Medien nur dort, wo sie uns wirklich helfen in echt zusammen zu kommen</p>
             <div className="tw-modal-action">
-                <label className="tw-btn" onClick={() => clickAction()}>Alles klar</label>
+                <label className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>Alles klar</label>
             </div>
         </>
     )
 }
 
-export function Welcome3({ clickAction }: ModalProps) {
+export function Welcome3({ clickAction }: ChapterProps) {
     return (
         <>
             <h3 className="tw-font-bold tw-text-lg"> Gemeinsam erschaffen wir Strukturen </h3>
@@ -49,7 +50,7 @@ export function Welcome3({ clickAction }: ModalProps) {
                 <li>🚐 Mobilität</li>
             </ul>
             <div className="tw-modal-action">
-                <label htmlFor="tw-my-modal" onClick={() => clickAction()} className="tw-btn">Ich mach mit</label>
+                <button className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>Ich mach mit</button>
             </div>
         </>
     )
@@ -61,10 +62,7 @@ export function Modal() {
     const [chapter, setChapter] = useState<number>(1);
 
     const close = () => {
-        if (document.getElementById('my-modal')) {
-            const el = document.getElementById('my-modal') as HTMLInputElement
-            el.checked = false;
-        }
+        window.my_modal_3.close();
     }
 
     const ActiveChapter = () => {
@@ -72,12 +70,11 @@ export function Modal() {
             case 1:
                 return <Welcome1 clickAction={() => { setChapter(2) }} />
             case 2:
-                return <Welcome2 clickAction={() => setChapter(3)} />
+                return <Welcome2 clickAction={() => { setChapter(3) }} />
             case 3:
                 return <Welcome3 clickAction={() => {
-                    close()
-                    setChapter(1)
-
+                    setChapter(1);
+                    close();
                 }} />
             default: return <></>
         };
@@ -85,14 +82,17 @@ export function Modal() {
 
     return (
         <>
-            {/* Put this part before </body> tag */}
-            <input type="checkbox" id="my-modal" className="tw-modal-toggle" />
-            <div className="tw-modal">
-                <label className="tw-modal-box tw-relative" htmlFor="">
-                <label htmlFor="my-modal" className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2">✕</label>
+
+            {/* You can open the modal using ID.showModal() method */}
+            <dialog id="my_modal_3" className="tw-modal">
+                <form method="dialog" className="tw-modal-box">
+                    <button className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2">✕</button>
                     <ActiveChapter />
-                </label>
-            </div>
+                </form>
+                <form method="dialog" className="tw-modal-backdrop">
+                    <button>close</button>
+                </form>
+            </dialog>
         </>
     )
 }
diff --git a/src/Components/Gaming/Quests.tsx b/src/Components/Gaming/Quests.tsx
index 392f21ff..ad9b01e1 100644
--- a/src/Components/Gaming/Quests.tsx
+++ b/src/Components/Gaming/Quests.tsx
@@ -6,8 +6,6 @@ export function Quests() {
 
     if (open) return (
         <>
-            <input type="checkbox" id="quests" className="tw-modal-toggle" />
-
             <div className="tw-card tw-w-48 tw-bg-base-100 tw-shadow-xl tw-absolute tw-bottom-4 tw-left-4 tw-z-1000">
                 <div className="tw-card-body tw-p-4 tw-pt-0">
                     <div className="tw-card-actions tw-justify-end">
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index bf5f2ae7..2aa2eec9 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -28,10 +28,16 @@ function MapEventListener(props: MapEventListenerProps) {
                 props.setItemFormPopup({ layer: props.selectMode, position: e.latlng })
                 props.setSelectMode(null)
             }
+        },
+        resize: () => {
+            console.log("resize");
+            
         }
     })
     return null
 }
+// for refreshing map on resize (needs to be implemented)
+const mapDivRef = React.createRef();
 
 /** This is a description of the foo function. */
 function UtopiaMap({
@@ -52,7 +58,7 @@ function UtopiaMap({
             <TagsProvider initialTags={[]}>
                 <ItemsProvider initialItems={[]}>
                     <div className={(selectMode != null ? "crosshair-cursor-enabled" : undefined)}>
-                        <MapContainer style={{ height: height, width: width }} center={center} zoom={zoom}>
+                        <MapContainer         ref={mapDivRef} style={{ height: height, width: width }} center={center} zoom={zoom}>
                             <TileLayer
                                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                                 url="https://tile.osmand.net/hd/{z}/{x}/{y}.png" />
diff --git a/src/index.tsx b/src/index.tsx
index 38bac5cd..796364ae 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,3 +4,9 @@ export {AuthProviderDirectus, useAuthDirectus} from "./Components/Auth"
 export {Settings} from './Components/Profile'
 export {Quests, Modal} from './Components/Gaming'
 import "./index.css"
+
+declare global {
+    interface Window {
+      my_modal_3: any;
+    }
+  }
\ No newline at end of file