diff --git a/public/SocialMedia/Facebook_icon.png b/public/SocialMedia/Facebook_icon.png
new file mode 100644
index 0000000..dcb874c
Binary files /dev/null and b/public/SocialMedia/Facebook_icon.png differ
diff --git a/public/SocialMedia/Twitter_icon.png b/public/SocialMedia/Twitter_icon.png
new file mode 100644
index 0000000..eb76313
Binary files /dev/null and b/public/SocialMedia/Twitter_icon.png differ
diff --git a/public/share_icon.svg b/public/share_icon.svg
new file mode 100644
index 0000000..1ff5edb
--- /dev/null
+++ b/public/share_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px"><path d="M 18 2 C 16.35499 2 15 3.3549904 15 5 C 15 5.1909529 15.021791 5.3771224 15.056641 5.5585938 L 7.921875 9.7207031 C 7.3985399 9.2778539 6.7320771 9 6 9 C 4.3549904 9 3 10.35499 3 12 C 3 13.64501 4.3549904 15 6 15 C 6.7320771 15 7.3985399 14.722146 7.921875 14.279297 L 15.056641 18.439453 C 15.021555 18.621514 15 18.808386 15 19 C 15 20.64501 16.35499 22 18 22 C 19.64501 22 21 20.64501 21 19 C 21 17.35499 19.64501 16 18 16 C 17.26748 16 16.601593 16.279328 16.078125 16.722656 L 8.9433594 12.558594 C 8.9782095 12.377122 9 12.190953 9 12 C 9 11.809047 8.9782095 11.622878 8.9433594 11.441406 L 16.078125 7.2792969 C 16.60146 7.7221461 17.267923 8 18 8 C 19.64501 8 21 6.6450096 21 5 C 21 3.3549904 19.64501 2 18 2 z M 18 4 C 18.564129 4 19 4.4358706 19 5 C 19 5.5641294 18.564129 6 18 6 C 17.435871 6 17 5.5641294 17 5 C 17 4.4358706 17.435871 4 18 4 z M 6 11 C 6.5641294 11 7 11.435871 7 12 C 7 12.564129 6.5641294 13 6 13 C 5.4358706 13 5 12.564129 5 12 C 5 11.435871 5.4358706 11 6 11 z M 18 18 C 18.564129 18 19 18.435871 19 19 C 19 19.564129 18.564129 20 18 20 C 17.435871 20 17 19.564129 17 19 C 17 18.435871 17.435871 18 18 18 z"/></svg>
\ No newline at end of file
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index d659a9f..b2b064d 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -1,8 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 import { motion } from "framer-motion";
+import ShareModal from "./ShareModal";
 
 const Card = ({ title, link, description, i, img }) => {
+
+  const [isModalActive, setIsModalActive] = useState(false)
+
+ function shareHandler(e) {
+  e.preventDefault();
+  setIsModalActive(!isModalActive)
+ }
+
+ function closeModal(){
+  setIsModalActive(!isModalActive)
+ }
+
   return (
+    <>
     <a href={link} target={"_blank"} rel="noreferrer">
       <motion.div
         className="card border-b-2 bg-gradient-to-r from-[#545454] to-[#807f7f]  border-b-[#000000] flex flex-col rounded-lg  gap-4 p-4 shadow-3xl h-[16rem] w-[24rem] hover:shadow-4xl "
@@ -11,9 +25,17 @@ const Card = ({ title, link, description, i, img }) => {
         animate={{ opacity: 1, translateX: 0 }}
         transition={{ duration: 0.2, delay: i * 0.2 }}
       >
-        <div className="img img-container self-center">
+        
+
+        <div className="flex flex-row justify-between">
           {/* src={`'${img}'`} */}
-          <img className="rounded-sm w-40 h-20" src={img} alt="img" />
+          <div className="w-1/4"></div>
+          <div className="w-2/4">
+            <img className="rounded-sm w-40 h-20" src={img} alt="img" />
+          </div>
+          <div className="w-1/4 flex justify-end items-start">
+            <button className="z-10" onClick={ e => shareHandler(e)}><img className="w-[25px] transition-all hover:scale-125 ease-in-out" src="./share_icon.svg" alt="" /></button>
+          </div>
         </div>
 
         <div className="content flex flex-col gap-4 items-center">
@@ -26,7 +48,17 @@ const Card = ({ title, link, description, i, img }) => {
           </p>
         </div>
       </motion.div>
+
     </a>
+    {isModalActive ? 
+      <ShareModal 
+        closeModal={closeModal}
+        link={link}/> 
+    : null }
+
+    
+  </>
+
   );
 };
 
diff --git a/src/components/ShareModal.jsx b/src/components/ShareModal.jsx
new file mode 100644
index 0000000..1a540a4
--- /dev/null
+++ b/src/components/ShareModal.jsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { useState } from 'react'
+import SocialMediaShareBtn from './socialmedia/SocialMediaShareBtn'
+
+const ShareModal = ({closeModal, link}) => {
+
+
+    const [animateClick, setAnimateClick] = useState(false)
+
+    function Clicked(e) {
+        navigator.clipboard.writeText(link)
+        setAnimateClick(true)
+
+        setTimeout ( () => {
+            setAnimateClick(false)
+        },150)
+    }
+
+  return (
+    <div onClick={ () => closeModal()} className='absolute top-0 left-0 w-full h-screen bg-grape-300 bg-opacity-40 flex justify-center items-center z-20 transition-all ease-out'>
+      
+      <div className='relative w-1/4 h-2/6 bg-grape-200 rounded-xl flex flex-col'>
+        <div className='w-full flex justify-between'>
+            <h2 className='text-xl p-4 text-white font-inter'>Share</h2>
+            <button onClick={ () => closeModal()} className='text-2xl px-5 py-0 text-white font-thin'>X</button>
+        </div>
+
+        <div className='p-5 flex flex-row gap-5'>
+        
+            <SocialMediaShareBtn 
+                socialMediaName={"Facebook"}
+                shareTo={`https://www.facebook.com/sharer/sharer.php?u=${link}`}/>
+
+            <SocialMediaShareBtn 
+                socialMediaName={"Twitter"}
+                shareTo={`https://www.twitter.com/intent/tweet?url=${link}&text="Hey guys, I found a cool resource wich can help you in your developer career!"`}/>
+        </div>
+
+
+        <div className='w-5/6 p-5 m-auto rounded-xl bg-grape-50 flex flex-row justify-between items-center'>
+            <p className='text-xs'>{link}</p>
+            <button onClick={ e => Clicked(e)}
+                    className={`bg-gray-800 hover:scale-[1.02] px-4 py-1 rounded-xl transition-all ease-in-out font-roboto text-white ${animateClick ? "animateClick" : ""}`}
+                    >Copy
+            </button>
+        </div>
+      </div>
+
+    </div>
+  )
+}
+
+export default ShareModal
diff --git a/src/components/socialmedia/SocialMediaShareBtn.jsx b/src/components/socialmedia/SocialMediaShareBtn.jsx
new file mode 100644
index 0000000..f3dc3e4
--- /dev/null
+++ b/src/components/socialmedia/SocialMediaShareBtn.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const SocialMediaShareBtn = ({socialMediaName,shareTo}) => {
+  return (
+
+          <figure className='w-[50px] h-[50px] flex flex-col justify-center items-center'>
+              <a href={shareTo} target="_blank">
+                <img className="w-full h-full cursor-pointer" src={`./SocialMedia/${socialMediaName}_icon.png`} alt={`${socialMediaName} icon`} />
+              </a>
+              <figcaption className='text-white text-sm font-light'>{socialMediaName}</figcaption>
+          </figure>
+  )
+}
+
+export default SocialMediaShareBtn
diff --git a/src/index.css b/src/index.css
index ac961a5..484c979 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,4 +22,16 @@
 }
 .img-container img:hover {
     transform: scale(0.7);
+}
+
+.text-white{
+    color:white;
+}
+
+.bg-gray-800{
+    background-color: rgb(70,70,70);
+}
+
+.animateClick {
+    background-color: rgb(130,130,130);
 }
\ No newline at end of file