diff --git a/package-lock.json b/package-lock.json
index 35cd232d..ce032247 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.34",
+  "version": "3.0.35",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "3.0.34",
+      "version": "3.0.35",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
@@ -22,12 +22,14 @@
         "react-leaflet": "^4.2.1",
         "react-leaflet-cluster": "^2.1.0",
         "react-markdown": "^9.0.1",
+        "react-photo-album": "^3.0.2",
         "react-router-dom": "^6.16.0",
         "react-string-replace": "^1.1.1",
         "react-toastify": "^9.1.3",
         "remark-breaks": "^4.0.0",
         "tributejs": "^5.1.3",
-        "tw-elements": "^1.0.0"
+        "tw-elements": "^1.0.0",
+        "yet-another-react-lightbox": "^3.21.7"
       },
       "devDependencies": {
         "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
@@ -405,11 +407,10 @@
       }
     },
     "node_modules/@types/geojson": {
-      "version": "7946.0.14",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
-      "dev": true,
-      "license": "MIT"
+      "version": "7946.0.15",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.15.tgz",
+      "integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA==",
+      "dev": true
     },
     "node_modules/@types/hast": {
       "version": "3.0.3",
@@ -1170,9 +1171,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001617",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001617.tgz",
-      "integrity": "sha512-mLyjzNI9I+Pix8zwcrpxEbGlfqOkF9kM3ptzmKNw5tizSyYwMe+nGLTqMK9cO+0E+Bh6TsBxNAaHWEM8xwSsmA==",
+      "version": "1.0.30001686",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
+      "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
       "dev": true,
       "funding": [
         {
@@ -6043,6 +6044,23 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-photo-album": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.0.2.tgz",
+      "integrity": "sha512-w3+8i6aj9l1jRfcubgVbAlBGSdtiXcqWdcwZcH4/Bavc+v7X7h+S3TkQ723pvDABjhaaxS168g9ECEBP6xnKrQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "6.16.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
@@ -7531,6 +7549,18 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yet-another-react-lightbox": {
+      "version": "3.21.7",
+      "resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.21.7.tgz",
+      "integrity": "sha512-dcdokNuCIl92f0Vl+uzeKULnQhztIGpoZFUMvtVNUPmtwsQWpqWufeieDPeg9JtFyVCcbj4vYw3V00DS0QNoWA==",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index caea2868..32e46ec0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.34",
+  "version": "3.0.35",
   "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/",
@@ -69,12 +69,14 @@
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
     "react-markdown": "^9.0.1",
+    "react-photo-album": "^3.0.2",
     "react-router-dom": "^6.16.0",
     "react-string-replace": "^1.1.1",
     "react-toastify": "^9.1.3",
     "remark-breaks": "^4.0.0",
     "tributejs": "^5.1.3",
-    "tw-elements": "^1.0.0"
+    "tw-elements": "^1.0.0",
+    "yet-another-react-lightbox": "^3.21.7"
   },
   "imports": {
     "#components/*": "./src/Components/*",
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx
index 0e627c1f..08971877 100644
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@@ -62,7 +62,7 @@ export default function NavBar({ appName, userType }: { appName: string; userTyp
   if (showNav) {
     return (
       <>
-        <div className='tw-navbar tw-bg-base-100 tw-z-[10000] tw-shadow-xl tw-relative'>
+        <div className='tw-navbar tw-bg-base-100 tw-z-[9998] tw-shadow-xl tw-relative'>
           <button
             className='tw-btn tw-btn-square tw-btn-ghost'
             data-te-sidenav-toggle-ref
diff --git a/src/Components/Profile/Subcomponents/GalleryView.tsx b/src/Components/Profile/Subcomponents/GalleryView.tsx
new file mode 100644
index 00000000..7cf2bc37
--- /dev/null
+++ b/src/Components/Profile/Subcomponents/GalleryView.tsx
@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { useState } from 'react'
+import { RowsPhotoAlbum } from 'react-photo-album'
+import ReactLightbox from 'yet-another-react-lightbox'
+import 'yet-another-react-lightbox/styles.css'
+import 'react-photo-album/rows.css'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+
+import type { Item } from '#types/Item'
+
+export const GalleryView = ({ item }: { item: Item }) => {
+  const [index, setIndex] = useState(-1)
+  const appState = useAppState()
+  const images = item.gallery.map((i, j) => {
+    return {
+      src: appState.assetsApi.url + `${i.directus_files_id.id}.jpg`,
+      width: i.directus_files_id.width,
+      height: i.directus_files_id.height,
+      index: j,
+    }
+  })
+  return (
+    <div className='tw-mx-6 tw-mb-6'>
+      <RowsPhotoAlbum
+        photos={images}
+        targetRowHeight={150}
+        onClick={({ index: current }) => setIndex(current)}
+      />
+
+      <ReactLightbox index={index} slides={images} open={index >= 0} close={() => setIndex(-1)} />
+    </div>
+  )
+}
diff --git a/src/Components/Profile/Templates/FlexView.tsx b/src/Components/Profile/Templates/FlexView.tsx
index 1dea72d6..608b0fdf 100644
--- a/src/Components/Profile/Templates/FlexView.tsx
+++ b/src/Components/Profile/Templates/FlexView.tsx
@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 
 import { ContactInfoView } from '#components/Profile/Subcomponents/ContactInfoView'
+import { GalleryView } from '#components/Profile/Subcomponents/GalleryView'
 import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHeaderView'
 import { ProfileStartEndView } from '#components/Profile/Subcomponents/ProfileStartEndView'
 import { ProfileTextView } from '#components/Profile/Subcomponents/ProfileTextView'
@@ -14,6 +15,7 @@ const componentMap = {
   texts: ProfileTextView,
   contactInfos: ContactInfoView,
   startEnd: ProfileStartEndView,
+  gallery: GalleryView,
   // weitere Komponenten hier
 }