something I dont know

package.json

@@ -18,8 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-rnd": "^10.4.1",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^6.23.0"
-    "utopia-ui": "^3.0.0-alpha.257"
   },
   "devDependencies": {
     "@types/react": "^18.2.79",

src/App.css

@@ -3,7 +3,7 @@
   height: 100dvh;
 }
 
-#app-content  {
+#app-content {
   height: calc(100dvh - 64px);
 }
 
@@ -22,10 +22,12 @@
 }
 
 .move-out-right {
-  transform: translateX(100vw); /* Verschiebt das Div um die Breite des Viewports */
+  transform: translateX(100vw);
+  /* Verschiebt das Div um die Breite des Viewports */
 }
 
 
 .move-out-left {
-  transform: translateX(-100vw); /* Verschiebt das Div um die Breite des Viewports */
+  transform: translateX(-100vw);
+  /* Verschiebt das Div um die Breite des Viewports */
 }

src/App.tsx

@@ -41,8 +41,8 @@ function App() {
   const getMap = async () => {
     const map = await mapApiInstance?.getItems();
     map && setMap(map);
-    map && map!="null" && setLayersApiInstance(new layersApi(map.id));
+    map && map != "null" && setLayersApiInstance(new layersApi(map.id));
-    map && map!="null" && map.own_tag_space ? setTagsApi(new itemsApi<Tag>('tags', undefined, map.id)) : setTagsApi(new itemsApi<Tag>('tags'));
+    map && map != "null" && map.own_tag_space ? setTagsApi(new itemsApi<Tag>('tags', undefined, map.id)) : setTagsApi(new itemsApi<Tag>('tags'));
   }
 
   useEffect(() => {
@@ -103,13 +103,13 @@ function App() {
                 <Route path='reset-password' element={<RequestPasswordPage reset_url={map.url + "/set-new-password/"} />} />
                 <Route path='set-new-password' element={<SetNewPasswordPage />} />
                 <Route path="item/*" element={<ProfileView userType={map.user_type.name} />} />
-                <Route path="edit-item/*" element={<ProfileForm userType={map.user_type.name}/>} />
+                <Route path="edit-item/*" element={<ProfileForm userType={map.user_type.name} />} />
                 <Route path="user-settings" element={<UserSettings />} />
                 <Route path="moon-calendar" element={<MoonCalendar />} />
                 <Route path="landingpage" element={<Landingpage />} />
                 {
                   layers.map((l: any) =>
-                    <Route key={l.id} path={l.name} element={<OverlayItemsIndexPage plusButton={l.index_plus_button} layerName={l.name} url={'/item/'} parameterField={'id'}  />} />
+                    <Route key={l.id} path={l.name} element={<OverlayItemsIndexPage plusButton={l.index_plus_button} layerName={l.name} url={'/item/'} parameterField={'id'} />} />
                   )
                 }
               </Route>
@@ -121,11 +121,11 @@ function App() {
   )
   else if (map == "null" && !loading) return (
 
-        <div className="flex items-center justify-center h-screen">
+    <div className="flex items-center justify-center h-screen">
-        <div>
+      <div>
-          <p className='text-xl font-semibold'>This map does not exist</p>
+        <p className='text-xl font-semibold'>This map does not exist</p>
-        </div>
       </div>
+    </div>
   )
 
   else return (

src/ModalContent.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { TextView } from 'utopia-ui'
 
 type ChapterProps = {
     clickAction1?: () => void
@@ -10,7 +11,11 @@ type ChapterProps = {
 
 export function Welcome1({ clickAction1, map }: ChapterProps) {
     return (
-        <>
+        <>{map.custom_text? 
+            <>
+            <TextView item={map} itemTextField={'custom_text'}></TextView>
+            </> : 
+            <>
             <h3 className="font-bold text-lg">Welcome to {map?.name || "Utopia Map"}</h3>
             <img className="float-right w-32 m-2" src={"https://api.utopia-lab.org/assets/"+map.logo}></img>
             <p className="py-3">
@@ -25,6 +30,7 @@ export function Welcome1({ clickAction1, map }: ChapterProps) {
             <div className="grid">
                 <label className="btn place-self-end mt-4" onClick={() => clickAction1!()}>Close</label>
             </div>
+            </>}
         </>
     )
 }

src/pages/MapContainer.tsx

@@ -37,7 +37,7 @@ function MapContainer({ layers, map }: { layers: Array<LayerProps>, map: any })
 
   return (
 
-    <UtopiaMap geo={map.geo} zoom={map.zoom || 5} center={map.center ? [map.center?.coordinates[1], map.center?.coordinates[0]] : [50.6, 9.5]} height='100%' width="100%" showFilterControl={map.show_filter_control} showLayerControl={map.show_layer_control} >
+    <UtopiaMap geo={map.geo} zoom={map.zoom || 5} center={map.center ? [map.center?.coordinates[1], map.center?.coordinates[0]] : [50.6, 9.5]} height='100%' width="100%" showFilterControl={map.show_filter_control} showLayerControl={map.show_layer_control} showGratitudeControl={map.show_gratitude_control} >
       {layers && apis &&
         layers.map(layer =>
           <Layer