diff --git a/package-lock.json b/package-lock.json
index 258c4f5..98a67e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,8 @@
         "bootstrap": "^5.3.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-icons": "^4.11.0"
+        "react-icons": "^4.11.0",
+        "react-modal-image": "^2.6.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
@@ -3465,6 +3466,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-modal-image": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-modal-image/-/react-modal-image-2.6.0.tgz",
+      "integrity": "sha512-NNc1xPKzFAn0VsNMdJ8NXt6c54aL/z0fcoYmw9qn4SBUONdGl+8LOQ0sTfo0wtdzcjLiby/ncloHcAL+UI+wIA=="
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/package.json b/package.json
index 7690dd2..d8bdb30 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "bootstrap": "^5.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.11.0"
+    "react-icons": "^4.11.0",
+    "react-modal-image": "^2.6.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/src/components/Gallery/Gallery.css b/src/components/Gallery/Gallery.css
index eab4af2..5d40484 100644
--- a/src/components/Gallery/Gallery.css
+++ b/src/components/Gallery/Gallery.css
@@ -57,6 +57,7 @@ h1 {
   cursor: pointer;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
+  object-fit: contain;
 }
 
 .modal-img,
diff --git a/src/components/Gallery/Gallery.jsx b/src/components/Gallery/Gallery.jsx
index 428322a..dc29bed 100644
--- a/src/components/Gallery/Gallery.jsx
+++ b/src/components/Gallery/Gallery.jsx
@@ -1,5 +1,6 @@
-import React from "react";
-import "./Gallery.css";
+import React from "react"
+import ModalImage from "react-modal-image"
+import "./Gallery.css"
 import {
   img1,
   img2,
@@ -13,7 +14,7 @@ import {
   img10,
   img11,
   img12,
-} from "./assets";
+} from "./assets"
 
 const Gallery = () => {
   return (
@@ -21,29 +22,25 @@ const Gallery = () => {
       <h1 className="heading-tag-line">Gallery</h1>
       <hr className="heading-underline" />
       <div id="gallery" className="container-fluid">
-        <img src={img1} className="img-responsive" alt="ig 1" />
-        <img src={img2} className="img-responsive" alt="ig 2" />
-        <img src={img3} className="img-responsive" alt="ig 3" />
-        <img src={img4} className="img-responsive" alt="ig 4" />
-        <img src={img5} className="img-responsive" alt="ig 5" />
-        <img src={img6} className="img-responsive" alt="ig 6" />
-        <img src={img7} className="card img-responsive" alt="ig 7" />
-        <img src={img8} className="img-responsive" alt="ig 8" />
-        <img src={img9} className="img-responsive" alt="ig 9" />
-        <img src={img10} className="img-responsive" alt="ig 10" />
-        <img src={img11} className="img-responsive" alt="ig 11" />
-        <img src={img12} className="img-responsive" alt="ig 12" />
+        <ModalImage small={img1} large={img1} className="img-responsive" alt="ig 1"/>
+         <ModalImage small={img2} large={img2} className="img-responsive" alt="ig 2"/>
+         <ModalImage small={img3} large={img3} className="img-responsive" alt="ig 3"/>
+         <ModalImage small={img4} large={img4} className="img-responsive" alt="ig 4"/>
+         <ModalImage small={img5} large={img5} className="img-responsive" alt="ig 5"/>
+         <ModalImage small={img6} large={img6} className="img-responsive" alt="ig 6"/>
+         <ModalImage small={img7} large={img7} className="img-responsive" alt="ig 7"/>
+        <ModalImage small={img8} large={img8} className="img-responsive" alt="ig 8"/>
+        <ModalImage small={img9} large={img9} className="img-responsive" alt="ig 9"/>
+        <ModalImage small={img10} large={img10} className="img-responsive" alt="ig 10"/>
+        <ModalImage small={img11} large={img11} className="img-responsive" alt="ig 11"/>
+        <ModalImage small={img12} large={img12}  className="img-responsive" alt="ig 12"/>
       </div>
-
       <div id="myModal" className="modal fade" role="dialog">
-        <div className="modal-dialog">
-          <div className="modal-content">
-            <div className="modal-body">{/* Modal content goes here */}</div>
-          </div>
+        <div className="modal-dialog"> <div className="modal-content">   <div className="modal-body">{/* Modal content goes here */}</div> </div>
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Gallery;
+export default Gallery