diff --git a/package-lock.json b/package-lock.json
index 33cce1c..15ebe0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-modal": "^3.16.1",
         "react-native": "^0.72.6",
         "react-router-dom": "^6.20.0",
         "react-scripts": "5.0.1",
@@ -9777,6 +9778,11 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -17850,6 +17856,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-native": {
       "version": "0.72.6",
       "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.72.6.tgz",
@@ -20996,6 +21025,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 2387eb4..8773162 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-native": "^0.72.6",
     "react-router-dom": "^6.20.0",
     "react-scripts": "5.0.1",
diff --git a/src/Gallery/Gallery.css b/src/Gallery/Gallery.css
new file mode 100644
index 0000000..8d75e33
--- /dev/null
+++ b/src/Gallery/Gallery.css
@@ -0,0 +1,42 @@
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    grid-gap: 10px;
+  }
+  
+  @media screen and (max-width: 767px) {
+    .gallery {
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      grid-gap: 5px;
+    }
+  }
+  
+  .galleryItem {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.2s ease-in-out;
+  }
+  
+  .galleryItem:hover {
+    transform: scale(1.05);
+  }
+
+  .container {
+    position: relative;
+	width: 40%;
+  }
+
+  .modalImage {
+    width: 100%;
+  }
+
+  .modalButton {
+    position: absolute;
+	padding: 16px;
+	background-color: green;
+	border-radius: 16px;
+	bottom: 10px;
+	left: 200px;
+	width: 100px;
+  }
\ No newline at end of file
diff --git a/src/Gallery/Gallery.js b/src/Gallery/Gallery.js
index fd5eb4e..f54e2fe 100644
--- a/src/Gallery/Gallery.js
+++ b/src/Gallery/Gallery.js
@@ -1,5 +1,60 @@
+import Modal from 'react-modal';
+import { useState } from "react";
+import './Gallery.css';
+
+const images = [
+  { src: 'https://i.pinimg.com/736x/70/28/0f/70280f1b75ea956f4fdef7e31336d9f0.jpg', alt: 'Image 1' },
+  { src: 'https://wallpapers.com/images/featured-full/cool-anime-6kbwj9794wpnsfr1.jpg', alt: 'Image 2' },
+  { src: 'https://wallpapers.com/images/featured/cool-anime-pfp-pictures-71urutpksg13vkbk.jpg', alt: 'Image 3' },
+  { src: 'https://i.pinimg.com/236x/ab/dc/52/abdc52db893674a7b5dcb767be8776e5.jpg', alt: 'Image 4' },
+  { src: 'https://qph.cf2.quoracdn.net/main-qimg-a3fdbac7bf9f8db58f147887ffa76d88-lq', alt: 'Image 5' }
+];
+
 export default function Gallery() {
+    const [open, setOpen] = useState(false)
+    const [display, setDisplay] = useState('')
+    
+    const handleClick = (arg) => {
+        console.log("Test")
+        setDisplay(arg)
+        setOpen(true)
+        console.log(open)
+    }
+
     return (
-        <p>Gallery</p>
+        <div>
+            <div className="gallery">
+                {images.map((image, index) => (
+                    <img
+                    key={index}
+                    className="galleryItem"
+                    src={image.src}
+                    alt={image.alt}
+                    onClick={() => handleClick(image.src)}
+                    />
+                ))}
+            </div>
+            <div>
+                    <Modal
+                        isOpen={open}
+                        onRequestClose={() => setOpen(false)}
+                        style={{
+                            overlay: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            },
+                            content: {
+                                position: 'initial'
+                            }
+                        }}
+                    >   
+                        <div className="container">
+                            <button className="modalButton" onClick={() => setOpen(false)}>x</button>
+                            <img className="modalImage" src={display} onClick={() => setOpen(false)} />
+                        </div>
+                    </Modal>
+            </div>
+        </div>
     );
-};
\ No newline at end of file
+}
\ No newline at end of file