diff --git a/src/main/front/package-lock.json b/src/main/front/package-lock.json
index 1822343..9f70161 100644
--- a/src/main/front/package-lock.json
+++ b/src/main/front/package-lock.json
@@ -16,6 +16,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-infinite-scroller": "^1.2.6",
+        "react-photoswipe-gallery": "^3.0.2",
         "react-router-dom": "^6.26.2",
         "react-show-more-text": "github:junglesub/react-show-more-text",
         "recoil": "^0.7.7"
@@ -4133,6 +4134,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/photoswipe": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.4.tgz",
+      "integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -4252,6 +4263,17 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-photoswipe-gallery": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-3.0.2.tgz",
+      "integrity": "sha512-TLkpzp2BSUUL/4GPRU5SQWXfJ8xuUBKgS8qUaHyhsT1co6CStr1mVCl4oQrSSFbWxAKhB5fHbr12l1R+TkqFcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "photoswipe": ">= 5.2.2",
+        "prop-types": ">= 15.7.0",
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
diff --git a/src/main/front/package.json b/src/main/front/package.json
index 8b9d8c8..dbe4a31 100644
--- a/src/main/front/package.json
+++ b/src/main/front/package.json
@@ -18,6 +18,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-infinite-scroller": "^1.2.6",
+    "react-photoswipe-gallery": "^3.0.2",
     "react-router-dom": "^6.26.2",
     "react-show-more-text": "github:junglesub/react-show-more-text",
     "recoil": "^0.7.7"
diff --git a/src/main/front/src/components/FeedCardGallery.jsx b/src/main/front/src/components/FeedCardGallery.jsx
index 2fc58e7..300092c 100644
--- a/src/main/front/src/components/FeedCardGallery.jsx
+++ b/src/main/front/src/components/FeedCardGallery.jsx
@@ -1,33 +1,69 @@
 import "./FeedCardGallery.css";
+import { Gallery, useGallery } from "react-photoswipe-gallery";
 import { getExtensionFromUrl, isImage, isVideo } from "../tools/tools";
 
+import "photoswipe/dist/photoswipe.css";
+import FeedCardImageItem from "./FeedCardImageItem";
+
 const FeedCardGallery = ({ images = [] }) => {
   const filteredImages = images.filter((url) => isImage(url) || isVideo(url));
   if (filteredImages.length === 0) return <></>;
   return (
     <div className="FeedCardGallery">
-      <div className={`post-images images-${filteredImages.length}`}>
-        {filteredImages.slice(0, 3).map((url, index) =>
-          isImage(url) ? (
-            <img key={index} src={url} alt={`${index + 1}`} loading="lazy" />
-          ) : isVideo(url) ? (
-            <video key={index} controls>
-              <source src={url} type={`video/${getExtensionFromUrl(url)}`} />
-              Your browser does not support the video tag.
-            </video>
-          ) : (
-            <>Unknown Data</>
-          )
-        )}
-        {filteredImages.length >= 4 && (
-          <div className="more-images-overlay">
-            {filteredImages.length > 5 && <span>+{images.length - 4}</span>}
-            <img key={1} src={images[3]} alt={`4`} loading="lazy" />
-          </div>
-        )}
-      </div>
+      <Gallery withDownloadButton>
+        <FeedCardGalleryContent
+          images={images}
+          filteredImages={filteredImages}
+        />
+      </Gallery>
     </div>
   );
 };
 
 export default FeedCardGallery;
+
+const FeedCardGalleryContent = ({ filteredImages, images }) => {
+  const { open } = useGallery();
+
+  return (
+    <div className={`post-images images-${filteredImages.length}`}>
+      {filteredImages.slice(0, 3).map((url, index) =>
+        isImage(url) ? (
+          <FeedCardImageItem key={index} url={url} index={index} />
+        ) : // <img key={index} src={url} alt={`${index + 1}`} loading="lazy" />
+        isVideo(url) ? (
+          <video key={index} controls>
+            <source src={url} type={`video/${getExtensionFromUrl(url)}`} />
+            Your browser does not support the video tag.
+          </video>
+        ) : (
+          <>Unknown Data</>
+        )
+      )}
+      {filteredImages.length >= 4 && (
+        <div className="more-images-overlay">
+          {filteredImages.length > 5 && (
+            <span
+              onClick={() => {
+                open(3);
+              }}
+            >
+              +{images.length - 4}
+            </span>
+          )}
+          <FeedCardImageItem url={images[3]} index={3} />
+          {filteredImages.slice(4).map((url, index) => (
+            <FeedCardImageItem
+              key={index + 4}
+              url={url}
+              index={index + 4}
+              hidden={true}
+            />
+          ))}
+
+          {/* <img key={1} src={images[3]} alt={`4`} loading="lazy" /> */}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/main/front/src/components/FeedCardImageItem.jsx b/src/main/front/src/components/FeedCardImageItem.jsx
new file mode 100644
index 0000000..b63e9d3
--- /dev/null
+++ b/src/main/front/src/components/FeedCardImageItem.jsx
@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { Item } from "react-photoswipe-gallery";
+
+function FeedCardImageItem({ url, index, hidden }) {
+  const [dimensions, setDimensions] = useState({ width: 300, height: 300 });
+
+  useEffect(() => {
+    const loadDimensions = async () => {
+      try {
+        const { width, height } = await preloadImage(url);
+        setDimensions({ width, height });
+      } catch (error) {
+        console.error("Failed to load image dimensions", error);
+      }
+    };
+
+    loadDimensions();
+  }, [url]);
+
+  return (
+    <Item
+      original={url}
+      thumbnail={url}
+      width={dimensions.width}
+      height={dimensions.height}
+    >
+      {({ ref, open }) => (
+        <img
+          ref={ref}
+          onClick={open}
+          src={url}
+          alt={`image-${index}`}
+          className="thumbnail"
+          loading="lazy"
+          style={
+            { display: hidden ? "none" : "block" }
+            // { display: "block" }
+          }
+        />
+      )}
+    </Item>
+  );
+}
+
+export default FeedCardImageItem;
+
+const preloadImage = (src) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => resolve({ width: img.width, height: img.height });
+    img.onerror = reject;
+  });
+};
diff --git a/src/main/front/src/components/modals/PWAInstallModal.jsx b/src/main/front/src/components/modals/PWAInstallModal.jsx
index 0e77cab..e3bd9dc 100644
--- a/src/main/front/src/components/modals/PWAInstallModal.jsx
+++ b/src/main/front/src/components/modals/PWAInstallModal.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Modal, Box, Typography, Button } from "@mui/material";
 import useDownloadPWA from "../../hooks/useDownloadPWA";
 import { getDateString } from "../../tools/tools";