diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
index 4ccd0af..9d305c4 100644
--- a/src/components/Modal/Modal.js
+++ b/src/components/Modal/Modal.js
@@ -1,9 +1,8 @@
 import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
-// import PropTypes from 'prop-types';
 import { StyledlModal, Overlay, ModalImg, ModalText } from './Modal.styled';
 
-const Modal = ({ image, onClose }) => {
+export const Modal = ({ image, onClose }) => {
   useEffect(() => {
     const onKeyDown = event => {
       if (event.code === 'Escape') {
@@ -25,12 +24,10 @@ const Modal = ({ image, onClose }) => {
   return createPortal(
     <Overlay onClick={onOverlay}>
       <StyledlModal>
-        <ModalImg src={image.largeUrl} alt={image.targetAlt} />
-        <ModalText>{image.targetAlt}</ModalText>
+        <ModalImg src={image.largeUrl} alt={image.tags} />
+        <ModalText>{image.tags}</ModalText>
       </StyledlModal>
     </Overlay>,
     document.querySelector('#modalRoot')
   );
 };
-
-export default Modal;
diff --git a/src/components/Unsplash/UnImages/UnImage.js b/src/components/Unsplash/UnImages/UnImage.js
index c110a7a..193ac0a 100644
--- a/src/components/Unsplash/UnImages/UnImage.js
+++ b/src/components/Unsplash/UnImages/UnImage.js
@@ -1,21 +1,26 @@
 // import { Image } from './UnImage.styled';
 
-// export const UnImage = ({ data }) => {
+// export const UnImage = ({ tags, smallImage, largeImage, openModal }) => {
 //   return (
-//     <div>
-//       <a href={data.urls.regular} target="_blank" rel="noreferrer">
-//         <Image src={data.urls.small} alt={data.alt_description} />
-//       </a>
+//     <div onClick={() => openModal({ largeUrl: largeImage, targetAlt: tags })}>
+//       <Image
+//         src={smallImage}
+//         alt={tags}
+//         loading="lazy"
+//         width={480}
+//         height={260}
+//       />
 //     </div>
 //   );
 // };
+
 import { Image } from './UnImage.styled';
 
-export const UnImage = ({ tags, smallImage }) => {
+export const UnImage = ({ tags, largeImage, openModal }) => {
   return (
-    <div>
+    <div onClick={() => openModal({ largeUrl: largeImage, tags })}>
       <Image
-        src={smallImage}
+        src={largeImage}
         alt={tags}
         loading="lazy"
         width={480}
diff --git a/src/components/Unsplash/UnImages/UnImages.js b/src/components/Unsplash/UnImages/UnImages.js
index 82c8814..f40322b 100644
--- a/src/components/Unsplash/UnImages/UnImages.js
+++ b/src/components/Unsplash/UnImages/UnImages.js
@@ -1,12 +1,13 @@
 import { ImageGallery, ImageGalleryWrap } from './UnImages.styled';
 import { UnImage } from './UnImage';
 
-export const Images = ({ images }) => {
+export const Images = ({ images, openModal }) => {
   return (
     <ImageGalleryWrap>
       <ImageGallery>
         {images.map(image => (
           <UnImage
+            openModal={openModal}
             key={image.id}
             tags={image.tags}
             smallImage={image.smallImage}
diff --git a/src/components/Unsplash/UnsplashGallery/UnsplashGallery.js b/src/components/Unsplash/UnsplashGallery/UnsplashGallery.js
index 4f8540c..cfbe926 100644
--- a/src/components/Unsplash/UnsplashGallery/UnsplashGallery.js
+++ b/src/components/Unsplash/UnsplashGallery/UnsplashGallery.js
@@ -9,7 +9,7 @@ import { Button } from '../UnButton/UnButton';
 import { Searchbar } from '../UnSearch/UnSearchbar';
 import { Images } from '../UnImages/UnImages';
 import { Dna } from 'react-loader-spinner';
-// import { Modal } from './Modal/Modal';
+import { Modal } from '../../Modal/Modal';
 
 import { Title } from 'components/App.styled';
 
@@ -19,8 +19,8 @@ export const UnsplashGallery = () => {
   const [page, setPage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
   const [totalPages, setTotalPages] = useState(0);
-  // const [showModal, setShowModal] = useState(false);
-  // const [activeImage, setActiveImage] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+  const [activeImage, setActiveImage] = useState(null);
 
   useEffect(() => {
     if (!query) return;
@@ -64,26 +64,29 @@ export const UnsplashGallery = () => {
     setPage(prevPage => prevPage + 1);
   };
 
-  // const onImageClick = activeImage => {
-  //   setActiveImage(activeImage);
-  //   setShowModal(true);
-  // };
+  const onImageClick = activeImage => {
+    setActiveImage(activeImage);
+    setShowModal(true);
+  };
 
-  // const closeModal = () => {
-  //   setShowModal(false);
-  //   setActiveImage(null);
-  // };
+  const closeModal = () => {
+    setShowModal(false);
+    setActiveImage(null);
+  };
 
   return (
     <>
       <GalleryStyled>
         <Title>Unsplash Gallery</Title>
         <Searchbar onSubmit={submitHandler} />
-        <Images images={images} />
+        <Images images={images} openModal={onImageClick} />
         {totalPages > images.length && !isLoading && (
           <Button onLoadMoreButton={onLoadMoreButton} />
         )}
         {isLoading && <Dna wrapperStyle={{ margin: '0 auto' }} />}
+        {showModal && activeImage && (
+          <Modal image={activeImage} onClose={closeModal}></Modal>
+        )}
         <ToastContainer />
       </GalleryStyled>
     </>