diff --git a/client/components/NftPage/Modal.js b/client/components/NftPage/Modal.js
deleted file mode 100644
index ec1f38e..0000000
--- a/client/components/NftPage/Modal.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const Modal = ({ active, setActive }) => {
-  return (
-    <div
-      className={`h-full w-full bg-black opacity-80 fixed top-0 left-0 flex items-center justify-center ${
-        active ? `scale-100` : `scale-0`
-      } `}
-      onClick={() => setActive(false)}
-    >
-      <div
-        className="p-5 rounded-md bg-white w-auto h-auto opacity-100 text-black"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div>Image</div>
-        <div className="flex justify-between">
-          <div>NAME</div>
-          <div>PRICE</div>
-        </div>
-        <div>DESCRIPTION</div>
-      </div>
-    </div>
-  )
-}
-
-export default Modal
diff --git a/client/components/NftPage/NFTItem.js b/client/components/NftPage/NFTItem.js
index 76f154d..3377989 100644
--- a/client/components/NftPage/NFTItem.js
+++ b/client/components/NftPage/NFTItem.js
@@ -1,4 +1,4 @@
-const NFTItem = ({ image, name }) => {
+const NFTItem = ({ image, name, desc }) => {
   return (
     <div className=" w-96 md:w-auto m-7 rounded-xl box-border overflow-hidden">
       <div className="flex xl:flex-col">
@@ -6,6 +6,7 @@ const NFTItem = ({ image, name }) => {
           <img
             src={image}
             alt={name}
+            desc={desc}
             className="w-96 h-72 xl:w-64 2xl:w-72 rounded-md"
           />
         </div>
diff --git a/client/components/NftPage/NFTListContainer.js b/client/components/NftPage/NFTListContainer.js
index fd22661..c850391 100644
--- a/client/components/NftPage/NFTListContainer.js
+++ b/client/components/NftPage/NFTListContainer.js
@@ -1,23 +1,33 @@
 import { useState } from 'react'
-import { useAllTokens } from '../../queries'
-import Modal from './Modal'
+import Modal from '../modals/Modal'
 import NFTsList from './NFTsList'
+import { useAllTokens } from '../../queries'
 
 const NFTListContainer = () => {
   const [modalActive, setModalActive] = useState(false)
   const { data } = useAllTokens()
+  const [elementId, setElementId] = useState(null)
+
+  const dataWithId =
+    data?.map((el) => ({ ...el, id: el.image, desc: el.description })) || []
+
+  const elInModal = dataWithId.find((el) => el.id === elementId)
+
+  const setToggleModal = (id) => {
+    setElementId(id)
+    setModalActive(true)
+  }
+
   return (
     <>
-      <div
-        className="flex flex-wrap w-full"
-        onClick={() => setModalActive(true)}
-      >
-        {data?.map(({ image, name }) => (
-          <NFTsList image={image} name={name} active={modalActive} />
-        ))}
+      <div className="flex flex-wrap w-full">
+        <NFTsList data={dataWithId} setToggleModal={setToggleModal} />
       </div>
       <div>
-        <Modal active={modalActive} setActive={setModalActive} />
+        <Modal active={modalActive} setActive={setModalActive}>
+          <h2>{elInModal?.name}</h2>
+          <p>{elInModal?.description}</p>
+        </Modal>
       </div>
     </>
   )
diff --git a/client/components/NftPage/NFTsList.js b/client/components/NftPage/NFTsList.js
index 6e89244..2a91881 100644
--- a/client/components/NftPage/NFTsList.js
+++ b/client/components/NftPage/NFTsList.js
@@ -1,9 +1,19 @@
 import NFTItem from './NFTItem'
 
-const NFTsList = (props) => {
+const NFTsList = ({ data, setToggleModal }) => {
+  const handleItemClick = (identifier) => {
+    return () => {
+      setToggleModal(identifier)
+    }
+  }
+
   return (
     <div>
-      <NFTItem image={props.image} name={props.name} />
+      {data?.map(({ image, name, desc, id }) => (
+        <span onClick={handleItemClick(id)} key={id} className="cursor-pointer">
+          <NFTItem image={image} name={name} desc={desc} />
+        </span>
+      )) || []}
     </div>
   )
 }
diff --git a/client/components/modals/Modal.js b/client/components/modals/Modal.js
new file mode 100644
index 0000000..439c68e
--- /dev/null
+++ b/client/components/modals/Modal.js
@@ -0,0 +1,25 @@
+const Modal = ({ active, setActive, children }) => {
+  const handleToggleClick = () => {
+    setActive()
+  }
+  const handleStopPropag = (e) => {
+    e.stopPropagation()
+  }
+  return active ? (
+    <div
+      className="h-full w-full bg-black opacity-80 fixed top-0 left-0 flex items-center justify-center"
+      onClick={handleToggleClick}
+    >
+      <div
+        className="p-5 rounded-md bg-white w-auto h-auto opacity-100 text-black"
+        onClick={handleStopPropag}
+      >
+        <div className="flex justify-between" onClick={handleToggleClick}>
+          <div>{children}</div>
+        </div>
+      </div>
+    </div>
+  ) : null
+}
+
+export default Modal
diff --git a/client/package-lock.json b/client/package-lock.json
index 6be29a2..86f4228 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -5205,8 +5205,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -5832,8 +5831,7 @@
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
       "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-import-resolver-node": {
       "version": "0.3.6",
@@ -6015,8 +6013,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
       "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-scope": {
       "version": "7.1.1",
@@ -7393,8 +7390,7 @@
     "styled-jsx": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz",
-      "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==",
-      "requires": {}
+      "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ=="
     },
     "supports-color": {
       "version": "7.2.0",
@@ -7541,8 +7537,7 @@
     "use-error-boundary": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/use-error-boundary/-/use-error-boundary-2.0.6.tgz",
-      "integrity": "sha512-AWCVKSAanLe6R/on/ZkHYtGKfXs8BQX6z/TUGYqtvkajLqQyrGKJJscbahtq8OyN8L3LqTRjJWx4gCOLmfIObw==",
-      "requires": {}
+      "integrity": "sha512-AWCVKSAanLe6R/on/ZkHYtGKfXs8BQX6z/TUGYqtvkajLqQyrGKJJscbahtq8OyN8L3LqTRjJWx4gCOLmfIObw=="
     },
     "util-deprecate": {
       "version": "1.0.2",
@@ -7592,8 +7587,7 @@
     "ws": {
       "version": "7.4.6",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
-      "requires": {}
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
     },
     "xtend": {
       "version": "4.0.2",