diff --git a/src/App.jsx b/src/App.jsx
index f14d5bc..115ad74 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -28,6 +28,7 @@ function App() {
 			<p className="read-the-docs">
 				Click on the Vite and React logos to learn more
 			</p>
+			
 		</>
 	)
 }
diff --git a/src/components/FeetCards/FeatCards.css b/src/components/FeetCards/FeatCards.css
new file mode 100644
index 0000000..61790ea
--- /dev/null
+++ b/src/components/FeetCards/FeatCards.css
@@ -0,0 +1,55 @@
+.feat-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background-color: #081c2c; /* Ensure the background color is set */
+    padding: 20px; /* Increase dimensions by adding padding */
+  }
+  
+  .card {
+    position: relative;
+    background-size: cover;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 10px;
+    color: white;
+    box-sizing: border-box;
+    
+  }
+  
+  .card-content {
+    max-width: 60%;
+  }
+  
+  .features {
+    display: flex;
+    gap: 10px;
+    margin: 10px 0;
+  }
+  
+  .feature {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 5px 10px;
+    border-radius: 5px;
+  }
+  
+  .explore-button {
+    background-color: #007bff;
+    border: none;
+    padding: 10px 20px;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .person-image {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: 104%;
+    border-radius: 10px;
+  }
+  
\ No newline at end of file
diff --git a/src/components/FeetCards/FeatCards.jsx b/src/components/FeetCards/FeatCards.jsx
new file mode 100644
index 0000000..3a77c02
--- /dev/null
+++ b/src/components/FeetCards/FeatCards.jsx
@@ -0,0 +1,72 @@
+import './FeatCards.css';
+import back1 from './back1.png';
+import back2 from './back2.png';
+import c1_1 from './c1-1.png';
+import c1_2 from './c1-2.png';
+import c1_3 from './c1-3.png';
+import c1_4 from './c1-4.png';
+import c2_1 from './c2-1.png';
+import c2_2 from './c2-2.png';
+import c2_3 from './c2-3.png';
+import c2_4 from './c2-4.png';
+import p1 from './p-1.png';
+import p2 from './p-2.png';
+
+const FeatCards = () => {
+  return (
+    <div className="feat-cards" style={{ backgroundColor: '#081c2c' }}>
+      <div className="card" style={{ backgroundImage: `url(${back1})` }}>
+        <div className="card-content">
+          <h2>Thousands of thrilling games.<br />Thousands of ways to win big.</h2>
+          <div className="features">
+            <div className="feature">
+              <img src={c1_1} alt="New Releases" />
+              New Releases
+            </div>
+            <div className="feature">
+              <img src={c1_2} alt="Slots" />
+              Slots
+            </div>
+            <div className="feature">
+              <img src={c1_3} alt="Live Casino" />
+              Live Casino
+            </div>
+            <div className="feature">
+              <img src={c1_4} alt="Table Games" />
+              Table Games
+            </div>
+          </div>
+          <button className="explore-button">Explore Casino</button>
+        </div>
+        <img src={p1} alt="Person" className="person-image" />
+      </div>
+      <div className="card" style={{ backgroundImage: `url(${back2})` }}>
+        <div className="card-content">
+          <h2>Watch and bet on the biggest events across sports and beyond</h2>
+          <div className="features">
+            <div className="feature">
+              <img src={c2_1} alt="Sports" />
+              Sports
+            </div>
+            <div className="feature">
+              <img src={c2_2} alt="Esports" />
+              Esports
+            </div>
+            <div className="feature">
+              <img src={c2_3} alt="Horse Racing" />
+              Horse Racing
+            </div>
+            <div className="feature">
+              <img src={c2_4} alt="Live Streams" />
+              Live Streams
+            </div>
+          </div>
+          <button className="explore-button">Explore Sports</button>
+        </div>
+        <img src={p2} alt="Person" className="person-image" />
+      </div>
+    </div>
+  );
+};
+
+export default FeatCards;
\ No newline at end of file
diff --git a/src/components/FeetCards/back1.png b/src/components/FeetCards/back1.png
new file mode 100644
index 0000000..34ce656
Binary files /dev/null and b/src/components/FeetCards/back1.png differ
diff --git a/src/components/FeetCards/back2.png b/src/components/FeetCards/back2.png
new file mode 100644
index 0000000..4dc53f9
Binary files /dev/null and b/src/components/FeetCards/back2.png differ
diff --git a/src/components/FeetCards/c1-1.png b/src/components/FeetCards/c1-1.png
new file mode 100644
index 0000000..b35fbaa
Binary files /dev/null and b/src/components/FeetCards/c1-1.png differ
diff --git a/src/components/FeetCards/c1-2.png b/src/components/FeetCards/c1-2.png
new file mode 100644
index 0000000..bdbc518
Binary files /dev/null and b/src/components/FeetCards/c1-2.png differ
diff --git a/src/components/FeetCards/c1-3.png b/src/components/FeetCards/c1-3.png
new file mode 100644
index 0000000..e826523
Binary files /dev/null and b/src/components/FeetCards/c1-3.png differ
diff --git a/src/components/FeetCards/c1-4.png b/src/components/FeetCards/c1-4.png
new file mode 100644
index 0000000..31d3930
Binary files /dev/null and b/src/components/FeetCards/c1-4.png differ
diff --git a/src/components/FeetCards/c2-1.png b/src/components/FeetCards/c2-1.png
new file mode 100644
index 0000000..5a0dd03
Binary files /dev/null and b/src/components/FeetCards/c2-1.png differ
diff --git a/src/components/FeetCards/c2-2.png b/src/components/FeetCards/c2-2.png
new file mode 100644
index 0000000..fc30d54
Binary files /dev/null and b/src/components/FeetCards/c2-2.png differ
diff --git a/src/components/FeetCards/c2-3.png b/src/components/FeetCards/c2-3.png
new file mode 100644
index 0000000..06c3dff
Binary files /dev/null and b/src/components/FeetCards/c2-3.png differ
diff --git a/src/components/FeetCards/c2-4.png b/src/components/FeetCards/c2-4.png
new file mode 100644
index 0000000..3ce752e
Binary files /dev/null and b/src/components/FeetCards/c2-4.png differ
diff --git a/src/components/FeetCards/output.png b/src/components/FeetCards/output.png
new file mode 100644
index 0000000..4526877
Binary files /dev/null and b/src/components/FeetCards/output.png differ
diff --git a/src/components/FeetCards/p-1.png b/src/components/FeetCards/p-1.png
new file mode 100644
index 0000000..465939d
Binary files /dev/null and b/src/components/FeetCards/p-1.png differ
diff --git a/src/components/FeetCards/p-2.png b/src/components/FeetCards/p-2.png
new file mode 100644
index 0000000..fc91f37
Binary files /dev/null and b/src/components/FeetCards/p-2.png differ