diff --git a/README.md b/README.md
index 9b27432f..4b0f5124 100644
--- a/README.md
+++ b/README.md
@@ -70,3 +70,7 @@ Tags, colors and clusters help to retain the overview.
 <a href="https://opencollective.com/utopia-project">
     <img width="300" src="https://opencollective.com/utopia-project/donate/button@2x.png?color=blue" />
 </a>
+
+---
+
+This project is tested with BrowserStack
diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 00000000..43eb75f0
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,32 @@
+# Examples
+Here is a collection of executable examples. Building on each other, they show the features available in the Utipia-ui library.
+You can run them and try them out locally in the browser.
+
+## Running the examples
+
+These examples depend on the `/dist` of the root project. You have to run `npm run build` in the root project before you can run the examples:
+
+Using the example [3 - Tags](./3-tags):
+
+```sh
+# in root directory install and build the library
+npm install
+npm run build
+
+# change to specific example directory
+cd ./examples/3-tags
+
+# install and run the example code
+npm install && npm run dev
+
+# call up the running example in the browser at http://localhost:5173/
+
+## Roadmap
+
+- [x] Basic Map
+- [x] Static Layers
+- [x] Tags Custom Views & Forms
+- [ ] APIs Integration
+- [ ] Permissions
+- [ ] Custom Views & Forms
+- [ ] AppShell
diff --git a/package-lock.json b/package-lock.json
index e29a1502..58adfdeb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.79",
+  "version": "3.0.81",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "3.0.79",
+      "version": "3.0.81",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
diff --git a/package.json b/package.json
index 9fcdfe93..eca1866c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.79",
+  "version": "3.0.81",
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage": "https://utopia-os.org/",
@@ -24,6 +24,7 @@
     "test:component": "cypress run --component --browser electron",
     "test:unit": "npm run test:unit:dev -- run --coverage",
     "test:unit:dev": "vitest",
+    "test:unit:update": "npm run test:unit:dev -- run --coverage -u",
     "docs:generate": "typedoc --includeVersion --navigation.includeCategories true --plugin typedoc-plugin-missing-exports --plugin typedoc-plugin-coverage src/index.tsx",
     "update": "npx npm-check-updates"
   },
diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx
index 24c7099f..7c2c482e 100644
--- a/src/Components/AppShell/AppShell.tsx
+++ b/src/Components/AppShell/AppShell.tsx
@@ -13,15 +13,17 @@ export function AppShell({
   appName,
   children,
   assetsApi,
+  embedded,
 }: {
   appName: string
   children: React.ReactNode
   assetsApi: AssetsApi
+  embedded?: boolean
 }) {
   return (
     <ContextWrapper>
       <div className='tw-flex tw-flex-col tw-h-full'>
-        <SetAppState assetsApi={assetsApi} />
+        <SetAppState assetsApi={assetsApi} embedded={embedded} />
         <NavBar appName={appName}></NavBar>
         <div id='app-content' className='tw-flex'>
           {children}
diff --git a/src/Components/AppShell/Content.tsx b/src/Components/AppShell/Content.tsx
index ace72351..f6d49fd9 100644
--- a/src/Components/AppShell/Content.tsx
+++ b/src/Components/AppShell/Content.tsx
@@ -12,7 +12,7 @@ export function Content({ children }: ContentProps) {
 
   return (
     <div
-      className={`${appState.sideBarOpen && !appState.sideBarSlim ? 'tw-ml-48' : appState.sideBarOpen && appState.sideBarSlim ? 'tw-ml-14' : ''} tw-flex tw-flex-col tw-w-full tw-h-full tw-bg-base-200 tw-relative tw-transition-all tw-duration-300`}
+      className={`${appState.sideBarOpen && !appState.sideBarSlim ? 'tw-ml-48' : appState.sideBarOpen && appState.sideBarSlim ? 'tw-ml-14' : ''} tw-w-full tw-h-full tw-bg-base-100 tw-relative tw-transition-all tw-duration-300`}
     >
       {children}
     </div>
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx
index 593f6d39..c8d30de6 100644
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@@ -2,7 +2,7 @@ import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon'
 import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon'
 import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
 import { useEffect, useRef, useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
 
 import { useAuth } from '#components/Auth/useAuth'
@@ -35,18 +35,10 @@ export default function NavBar({ appName }: { appName: string }) {
 
   const nameRef = useRef<HTMLHeadingElement>(null)
   const [nameWidth, setNameWidth] = useState<number>(0)
-  const location = useLocation()
-  const [showNav, setShowNav] = useState<boolean>(false)
 
   useEffect(() => {
-    showNav && nameRef.current && setNameWidth(nameRef.current.scrollWidth)
-  }, [nameRef, appName, showNav])
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search)
-    const embedded = params.get('embedded')
-    embedded !== 'true' && setShowNav(true)
-  }, [location])
+    !appState.embedded && nameRef.current && setNameWidth(nameRef.current.scrollWidth)
+  }, [nameRef, appName, appState.embedded])
 
   const onLogout = async () => {
     await toast.promise(logout(), {
@@ -66,7 +58,7 @@ export default function NavBar({ appName }: { appName: string }) {
     })
   }
 
-  if (showNav) {
+  if (!appState.embedded) {
     return (
       <>
         <div className='tw-navbar tw-bg-base-100 tw-z-[9998] tw-shadow-xl tw-relative'>
diff --git a/src/Components/AppShell/SetAppState.tsx b/src/Components/AppShell/SetAppState.tsx
index ac52faea..055bc561 100644
--- a/src/Components/AppShell/SetAppState.tsx
+++ b/src/Components/AppShell/SetAppState.tsx
@@ -4,13 +4,22 @@ import { useSetAppState } from './hooks/useAppState'
 
 import type { AssetsApi } from '#types/AssetsApi'
 
-export const SetAppState = ({ assetsApi }: { assetsApi: AssetsApi }) => {
+export const SetAppState = ({
+  assetsApi,
+  embedded,
+}: {
+  assetsApi: AssetsApi
+  embedded?: boolean
+}) => {
   const setAppState = useSetAppState()
 
   useEffect(() => {
     setAppState({ assetsApi })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [assetsApi])
+  }, [assetsApi, setAppState])
+
+  useEffect(() => {
+    setAppState({ embedded })
+  }, [embedded, setAppState])
 
   return <></>
 }
diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
index 4ea07200..409aea71 100644
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@@ -1,5 +1,4 @@
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon'
-import { useState, useEffect } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 
 import { useAppState, useSetAppState } from './hooks/useAppState'
@@ -19,14 +18,6 @@ export interface Route {
 export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoutes?: Route[] }) {
   const location = useLocation()
 
-  const [embedded, setEmbedded] = useState<boolean>(true)
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search)
-    const embedded = params.get('embedded')
-    embedded !== 'true' && setEmbedded(false)
-  }, [location])
-
   const params = new URLSearchParams(window.location.search)
 
   const appState = useAppState()
@@ -45,12 +36,12 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
       id='sidenav'
       className={`${appState.sideBarOpen ? 'tw-translate-x-0' : '-tw-translate-x-full'}
           ${appState.sideBarSlim ? 'tw-w-14' : 'tw-w-48'}
-          ${embedded ? 'tw-mt-0 tw-h-[100dvh]' : 'tw-mt-16 tw-h-[calc(100dvh-64px)]'}
+          ${appState.embedded ? 'tw-mt-0 tw-h-[100dvh]' : 'tw-mt-16 tw-h-[calc(100dvh-64px)]'}
           tw-fixed tw-left-0 tw-transition-all tw-duration-300 tw-top-0 tw-z-[10035] 
           tw-overflow-hidden tw-shadow-xl dark:tw-bg-zinc-800`}
     >
       <div
-        className={`tw-flex tw-flex-col  ${embedded ? 'tw-h-full' : 'tw-h-[calc(100dvh-64px)]'}`}
+        className={`tw-flex tw-flex-col  ${appState.embedded ? 'tw-h-full' : 'tw-h-[calc(100dvh-64px)]'}`}
       >
         <ul
           className='tw-menu tw-w-full tw-bg-base-100 tw-text-base-content tw-p-0'
diff --git a/src/Components/AppShell/hooks/useAppState.tsx b/src/Components/AppShell/hooks/useAppState.tsx
index bdd94859..794fe700 100644
--- a/src/Components/AppShell/hooks/useAppState.tsx
+++ b/src/Components/AppShell/hooks/useAppState.tsx
@@ -8,6 +8,7 @@ interface AppState {
   assetsApi: AssetsApi
   sideBarOpen: boolean
   sideBarSlim: boolean
+  embedded: boolean
 }
 
 type UseAppManagerResult = ReturnType<typeof useAppManager>
@@ -16,6 +17,7 @@ const initialAppState: AppState = {
   assetsApi: {} as AssetsApi,
   sideBarOpen: false,
   sideBarSlim: false,
+  embedded: false,
 }
 
 const AppContext = createContext<UseAppManagerResult>({
diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
index 8b785784..42ea7c56 100644
--- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@@ -14,11 +14,12 @@ import FlagIcon from '@heroicons/react/24/outline/FlagIcon'
 import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon'
 import axios from 'axios'
 import { LatLng, LatLngBounds, marker } from 'leaflet'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import SVG from 'react-inlinesvg'
 import { useMap, useMapEvents } from 'react-leaflet'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
+import { useAppState } from '#components/AppShell/hooks/useAppState'
 import { useDebounce } from '#components/Map/hooks/useDebounce'
 import { useAddFilterTag } from '#components/Map/hooks/useFilter'
 import { useItems } from '#components/Map/hooks/useItems'
@@ -48,6 +49,7 @@ export const SearchControl = () => {
   const items = useItems()
   const leafletRefs = useLeafletRefs()
   const addFilterTag = useAddFilterTag()
+  const appState = useAppState()
 
   useMapEvents({
     popupopen: () => {
@@ -97,21 +99,13 @@ export const SearchControl = () => {
   }
 
   const searchInput = useRef<HTMLInputElement>(null)
-  const [embedded, setEmbedded] = useState<boolean>(true)
-
-  const location = useLocation()
-  useEffect(() => {
-    const params = new URLSearchParams(location.search)
-    const embedded = params.get('embedded')
-    embedded !== 'true' && setEmbedded(false)
-  }, [location])
 
   return (
     <>
       {!(windowDimensions.height < 500 && popupOpen && hideSuggestions) && (
         <div className='tw-w-[calc(100vw-2rem)] tw-max-w-[22rem] '>
           <div className='tw-flex tw-flex-row'>
-            {embedded && <SidebarControl />}
+            {appState.embedded && <SidebarControl />}
             <div className='tw-relative'>
               <input
                 type='text'
diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx
index 0ae8fc43..4a7f15ac 100644
--- a/src/Components/Map/UtopiaMapInner.tsx
+++ b/src/Components/Map/UtopiaMapInner.tsx
@@ -181,9 +181,7 @@ export function UtopiaMapInner({
   }
 
   return (
-    <div
-      className={`tw-h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : undefined}`}
-    >
+    <div className={`tw-h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`}>
       <Outlet />
       <Control position='topLeft' zIndex='1000' absolute>
         <SearchControl />
diff --git a/tsconfig.json b/tsconfig.json
index ff453fb4..50c23024 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,7 @@
       "module": "esnext",
       "target": "ESNext",
       "lib": ["es6", "dom","es2015", "es2016", "es2017", "es2020"],
-      "sourceMap": true,
+      "sourceMap": false,
       "allowJs": false,
       "jsx": "react-jsx",
       "moduleResolution": "node",