diff --git a/package-lock.json b/package-lock.json
index eeeffbbc..aed2d654 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,8 @@
         "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",
@@ -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": [
         {
@@ -7531,6 +7532,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 2a350d55..1af11483 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,8 @@
     "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/Profile/Subcomponents/GalleryView.tsx b/src/Components/Profile/Subcomponents/GalleryView.tsx
new file mode 100644
index 00000000..81888c89
--- /dev/null
+++ b/src/Components/Profile/Subcomponents/GalleryView.tsx
@@ -0,0 +1,23 @@
+import { useState } from 'react'
+import Lightbox from 'yet-another-react-lightbox/*'
+
+import type { Item } from '#types/Item'
+
+export const GalleryView = ({ item }: { item: Item }) => {
+  const [open, setOpen] = useState(false)
+  // eslint-disable-next-line no-console
+  console.log(item)
+  return (
+    <>
+      <button type='button' onClick={() => setOpen(true)}>
+        Open Lightbox
+      </button>
+
+      <Lightbox
+        open={open}
+        close={() => setOpen(false)}
+        slides={[{ src: '/image1.jpg' }, { src: '/image2.jpg' }, { src: '/image3.jpg' }]}
+      />
+    </>
+  )
+}