diff --git a/_codux/boards/hero-center.board.css b/_codux/boards/hero-center.board.css
index 7e90ba1..5c00a5d 100644
--- a/_codux/boards/hero-center.board.css
+++ b/_codux/boards/hero-center.board.css
@@ -1,53 +1,41 @@
-.hero {
+.root {
+    font-family: Arial, Helvetica, sans-serif;
     min-height: 100vh;
-    padding: 40px;
+    padding: 6vw;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background: linear-gradient(292deg, #e1e2ff 0%, #ddebff 49.33%, #e3fbf9 98.67%);
-
-    @media (width < 480px) {
-        padding: 10px;
-    }
+    flex-wrap: wrap;
 }
 
 .heroTitle {
     max-width: 15em;
-    font-size: 84px;
+    font-size: calc(6rem + ((1vw - 20px) * 4));
+    min-height: 0vw;
     font-weight: 700;
-    line-height: 88px;
     text-align: center;
-
-    @media (width < 768px) {
-        font-size: 36px;
-        line-height: 48px;
-    }
 }
 
 .heroButtons {
     display: flex;
-    margin-top: 30px;
+    margin-top: 6vh;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 30px;
-
-    @media (width < 768px) {
-        margin-top: 15px;
-        gap: 15px;
-    }
 }
 
-.heroPrimaryButton, .heroSecondaryButton {
-    padding: 10px 30px;
-    font: 16px/1.3 sans-serif;
-    border: 1px solid #000;
-    border-radius: 100px;
+.heroPrimaryButton,
+.heroSecondaryButton {
+    padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px);
+    color: white;
+    border: 1px solid black;
+    border-radius: 30px;
+    font-size: clamp(14px, 2vw, 18px);
     cursor: pointer;
-    white-space: nowrap;
-
-    @media (width < 768px) {
-        padding: 10px 18px;
-        font-size: 12px;
-    }
+    transition: background-color 0.3s ease;
+    align-self: flex-start;
 }
 
 .heroPrimaryButton {
diff --git a/_codux/boards/hero-center.board.tsx b/_codux/boards/hero-center.board.tsx
index 3da8cd2..858ef6a 100644
--- a/_codux/boards/hero-center.board.tsx
+++ b/_codux/boards/hero-center.board.tsx
@@ -4,12 +4,8 @@ import './hero-center.board.css';
 export default createBoard({
     name: 'HeroCenter',
     Board: () => (
-        <div className="hero">
-            <h1 className="heroTitle">
-                Title Goes Here.
-                <br />
-                Click to Edit and Add Your Own Text.
-            </h1>
+        <div className="root">
+            <h1 className="heroTitle">Title Goes Here. Click to Edit and Add Your Own Text.</h1>
             <div className="heroButtons">
                 <a href="#a" className="heroSecondaryButton">
                     Contact Us
@@ -21,7 +17,7 @@ export default createBoard({
         </div>
     ),
     environmentProps: {
-        windowHeight: 400,
-        windowWidth: 600,
+        windowHeight: 932,
+        windowWidth: 532,
     },
 });