diff --git a/_codux/boards/hero-flex.board.css b/_codux/boards/hero-flex.board.css
deleted file mode 100644
index e69de29..0000000
diff --git a/_codux/boards/hero-flex.board.tsx b/_codux/boards/hero-flex.board.tsx
deleted file mode 100644
index 540a3e0..0000000
--- a/_codux/boards/hero-flex.board.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { createBoard } from '@wixc3/react-board';
-import './hero-flex.board.css';
-
-export default createBoard({
-    name: 'HeroFlex',
-    Board: () => (
-        <div className="hero">
-            <img
-                className="heroImage"
-                src="https://static.wixstatic.com/media/8586f3_c98b193548784753bb357eeb03615da5~mv2.jpg/v1/fill/w_1728,h_1378/Image%20by%20Johannes%20Plenio.jpg"
-                alt=""
-            />
-            <div className="heroContent">
-                <h1 className="heroTitle">Write a Title Here</h1>
-                <p className="heroText">
-                    This is a space to welcome visitors to the site. Grab their attention with copy
-                    that clearly states what the site is about, and add an engaging image or video.
-                </p>
-                <button className="heroButton">Explore</button>
-            </div>
-        </div>
-    ),
-    environmentProps: {
-        windowWidth: 430,
-    },
-});
diff --git a/_codux/boards/hero-image.board.css b/_codux/boards/hero-image.board.css
new file mode 100644
index 0000000..4dfb775
--- /dev/null
+++ b/_codux/boards/hero-image.board.css
@@ -0,0 +1,54 @@
+.root {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    font-family: Arial, sans-serif;
+}
+
+.imgBox {
+    flex: 1 1 300px;
+}
+
+.img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.contentBox {
+    flex: 1 1 300px;
+    padding: clamp(15px, 3vw, 30px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: clamp(10px, 2vw, 20px);
+}
+
+.title {
+    font-size: calc(5rem + ((1vw - 20px) * 3));
+}
+
+.description {
+    font-size: clamp(14px, 2vw, 18px);
+    line-height: 1.5;
+    text-wrap: pretty;
+}
+
+.exploreButton {
+    padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px);
+    background-color: #000000;
+    border-radius: 30px;
+    font-size: clamp(14px, 2vw, 18px);
+    cursor: pointer;
+    transition: background-color 0.3s ease-out;
+    align-self: flex-start;
+    color: #ffffff;
+}
+
+.addToCartButton:hover {
+    background-color: #848484;
+    color: #ffffff;
+}
diff --git a/_codux/boards/hero-image.board.tsx b/_codux/boards/hero-image.board.tsx
new file mode 100644
index 0000000..6fb961b
--- /dev/null
+++ b/_codux/boards/hero-image.board.tsx
@@ -0,0 +1,29 @@
+import './hero-image.board.css';
+import { createBoard } from '@wixc3/react-board';
+
+export default createBoard({
+    name: 'Hero Image',
+    Board: () => (
+        <div className="root">
+            <div className="imgBox">
+                <img
+                    src="https://static.wixstatic.com/media/8586f3_f6d2538ac6374f71b6dc29511c5cd1a3~mv2.png/v1/fill/w_860,h_800/Frame%206.png"
+                    alt="Delicious Margherita Pizza"
+                    className="img"
+                />
+            </div>
+            <div className="contentBox">
+                <h1 className="title">Write a Title Here</h1>
+                <p className="description">
+                    This is a space to welcome visitors to the site. Grab their attention with copy
+                    that clearly states what the site is about, and add an engaging image or video.
+                </p>
+                <button className="exploreButton">Explore</button>
+            </div>
+        </div>
+    ),
+    environmentProps: {
+        windowWidth: 1269,
+        windowHeight: 760,
+    },
+});