diff --git a/frontend/assets/ContributorsImages/sampleImage.jpg b/frontend/assets/ContributorsImages/sampleImage.jpg
new file mode 100644
index 0000000..9b6dd4e
Binary files /dev/null and b/frontend/assets/ContributorsImages/sampleImage.jpg differ
diff --git a/frontend/components/Contributors/Contributors.jsx b/frontend/components/Contributors/Contributors.jsx
index 545925f..45257ff 100644
--- a/frontend/components/Contributors/Contributors.jsx
+++ b/frontend/components/Contributors/Contributors.jsx
@@ -1,17 +1,71 @@
 import React from 'react'
 import ContributorsStyle from './Contributors.style'
 import styles from '../../styles/Contributors.module.css'
+import Image from 'next/image'
+import profilepic from 'assets/ContributorsImages/sampleImage.jpg'
+import { GitHub } from '@mui/icons-material'
 export default function Contributors() {
   return (
     <ContributorsStyle>
       <>
         <div className={styles.head}>CONTRIBUTORS</div>
         <div className="contributor-cards">
-          <div className="contributor-card1">
-            <div className="contributor-cardPointer"></div>
-            <div className="contributor-Pic"></div>
-            <div className="contributor-Name"></div>
-            <div className="contributor-GithubUsername"></div>
+          <div className="contributor-card">
+            <div className="contributor-cardPointerStart">
+              <div id="circle"></div>
+            </div>
+            <div id="ImageContainer">
+              <Image
+                src={profilepic}
+                alt="Contributors Profile Picture"
+                width={'100px'}
+                height={'100px'}
+                className="contributor-Pic"
+              />
+            </div>
+            <div className="contributor-Name">Jacob Myers</div>
+            <div className="contributor-GithubUsername">
+              <GitHub />
+              <span id="username">@jacob</span>
+            </div>
+          </div>
+          <div className="contributor-card">
+            <div className="contributor-cardPointerCenter">
+              <div id="circle"></div>
+            </div>
+            <div id="ImageContainer">
+              <Image
+                src={profilepic}
+                alt="Contributors Profile Picture"
+                width={'100px'}
+                height={'100px'}
+                className="contributor-Pic"
+              />
+            </div>
+            <div className="contributor-Name">Jacob Myers</div>
+            <div className="contributor-GithubUsername">
+              <GitHub />
+              <span id="username">@jacob</span>
+            </div>
+          </div>
+          <div className="contributor-card">
+            <div className="contributor-cardPointerEnd">
+              <div id="circle"></div>
+            </div>
+            <div id="ImageContainer">
+              <Image
+                src={profilepic}
+                alt="Contributors Profile Picture"
+                width={'100px'}
+                height={'100px'}
+                className="contributor-Pic"
+              />
+            </div>
+            <div className="contributor-Name">Jacob Myers</div>
+            <div className="contributor-GithubUsername">
+              <GitHub />
+              <span id="username">@jacob</span>
+            </div>
           </div>
         </div>
       </>
diff --git a/frontend/components/Contributors/Contributors.style.js b/frontend/components/Contributors/Contributors.style.js
index df1c682..c130bf8 100644
--- a/frontend/components/Contributors/Contributors.style.js
+++ b/frontend/components/Contributors/Contributors.style.js
@@ -1,6 +1,105 @@
 import styled from 'styled-components'
 export default styled.section`
   display: flex;
-  justify-content: center;
   flex-direction: column;
+  justify-content: center;
+  .contributor-cards {
+    margin-top: -200px;
+    display: flex;
+    justify-content: space-around;
+  }
+  .contributor-card {
+    width: 190px;
+    height: 210px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    background-color: #ffffff;
+    border-radius: 10px;
+  }
+  .contributor-cardPointerStart {
+    width: 180px;
+    display: flex;
+    justify-content: flex-start;
+  }
+  .contributor-cardPointerCenter {
+    width: 180px;
+    display: flex;
+    justify-content: center;
+  }
+  .contributor-cardPointerEnd {
+    width: 180px;
+    display: flex;
+    justify-content: flex-end;
+  }
+  #circle {
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    background-color: green;
+  }
+  .contributor-Pic {
+    border-radius: 50%;
+  }
+  #ImageContainer {
+    border-radius: 50%;
+    border: 3px solid green;
+  }
+  .contributor-Name {
+    color: #00bfff;
+    font-size: 25px;
+    font-weight: bold;
+  }
+  .contributor-GithubUsername {
+    display: flex;
+    justify-content: baseline;
+    font-size: 20px;
+  }
+  #username {
+    color: grey;
+    font-weight: bold;
+  }
+  @media (max-width: 600px) {
+    .contributor-cards {
+      width: 100vw;
+    }
+    .contributor-card {
+      width: 170px;
+      height: 190px;
+    }
+    .contributor-cardPointerEnd {
+      width: 150px;
+    }
+    .contributor-cardPointerStart {
+      width: 150px;
+    }
+    .contributor-Name {
+      font-size: 20px;
+    }
+    .contributor-GithubUsername {
+      font-size: 15px;
+    }
+  }
+  @media (max-width: 400px) {
+    .contributor-cards {
+      width: 100vw;
+    }
+    .contributor-card {
+      width: 130px;
+      height: 190px;
+    }
+    .contributor-cardPointerEnd {
+      width: 120px;
+    }
+    .contributor-cardPointerStart {
+      width: 120px;
+    }
+    .contributor-Name {
+      font-size: 15px;
+    }
+    .contributor-GithubUsername {
+      font-size: 15px;
+    }
+  }
 `
diff --git a/frontend/styles/Contributors.module.css b/frontend/styles/Contributors.module.css
index 871290e..7c9fffe 100644
--- a/frontend/styles/Contributors.module.css
+++ b/frontend/styles/Contributors.module.css
@@ -5,6 +5,12 @@
   line-height: 1.15;
   font-size: 5.5rem;
   font-weight: bold;
-  margin-bottom:300px;
+  margin-bottom: 300px;
   text-align: center;
 }
+@media (max-width: 600px) {
+  .head {
+    font-size: 2.5rem;
+    margin-bottom: 250px;
+  }
+}