diff --git a/src/components/typewriter/style.module.css b/src/components/typewriter/style.module.css
index 1ba9023..cbd79f0 100644
--- a/src/components/typewriter/style.module.css
+++ b/src/components/typewriter/style.module.css
@@ -1,4 +1,6 @@
 .landing_caption {
-    font-size: 1.5rem;
-    max-width: 50%;
-}
\ No newline at end of file
+    position: absolute;
+    top: 80%;
+    max-width: 60%;
+    font-size: 2em;
+}
diff --git a/src/sections/Hero/index.tsx b/src/sections/Hero/index.tsx
index a83bea0..92e2ef9 100644
--- a/src/sections/Hero/index.tsx
+++ b/src/sections/Hero/index.tsx
@@ -29,9 +29,9 @@ const Hero: React.FC = () => {
             delay={60}
           />
         </div>
-        <div className={styles.arrow}>
+        <div className={styles.arrow} role="presentation" onClick={scrollToInfo}>
           <h6 className={styles.scroll_text}>Learn More</h6>
-          <FaChevronDown className={styles.scroll} onClick={scrollToInfo} />
+          <FaChevronDown className={styles.scroll} />
         </div>
       </div>
     </div>
diff --git a/src/sections/Hero/style.module.css b/src/sections/Hero/style.module.css
index 5fe1c8e..e838cae 100644
--- a/src/sections/Hero/style.module.css
+++ b/src/sections/Hero/style.module.css
@@ -1,7 +1,7 @@
 /* Landing Card Background */
 .hero {
     background-color: #f9a857;
-    color: #FFFFFF;
+    color: white;
     overflow: hidden;
 }
 
@@ -11,22 +11,24 @@
     align-items: center;
     text-align: center;
     width: 100%;
+    height: 42em;
     max-height: 100vh;
-    height: 42rem;
     position: relative;
 }
 
 .backdrop_left {
     z-index: 0;
-      overflow: hidden;
-      position: absolute;
+    overflow: hidden;
+    position: absolute;
+    max-width: 35%;
 }
 
 .backdrop_right {
     z-index: 0;
-      right: 0px;
-      overflow: hidden;
-      position: absolute;
+    right: 0px;
+    overflow: hidden;
+    position: absolute;
+    max-width: 35%;
 }
 
 /* Landing Card Text */
@@ -37,37 +39,66 @@
     align-items: center;
     flex-direction: column;
     z-index: 1;
-    margin-left: 20rem;
-    margin-bottom: 5rem;
+    position: relative;
     width: 100vw;
+    margin-left: 20%;
+    margin-bottom: 10%;
 }
 
 .landing_title {
     font-weight: 900;
-    font-size: 5rem;
+    font-size: 5em;
+    margin-bottom: 0.5em;
 }
 
 /* Landing Card Scroll Down */
 
 .arrow {
     position: absolute;
-    bottom: 2rem;
+    left: 46%;
+    bottom: 2vh;
+    margin-top: 2vh;
     text-align: center;
-    font-size: 2.5rem;
+    font-size: 1.5em;
     z-index: 2;
-    left: 45%;
 }
 
-.scroll {
-    margin: auto;
-}
-
-.scroll:hover {
+.arrow:hover {
     opacity: 85%;
     cursor: pointer;
 }
 
+.scroll {
+    margin: auto;
+}
+
 .scroll_text {
     font-weight: 700;
-    font-size: 1.5rem;
-}
\ No newline at end of file
+    font-size: 1em;
+}
+
+/* Font size and layout for mobile*/
+
+@media screen and (max-width: 768px) {
+    .hero {
+        font-size: 5px;
+    }
+    .backdrop {
+        max-height: 25vh;
+    }
+}
+
+/* Font size and layout for tablet*/
+
+@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+    .hero {
+        font-size: 10px;
+    }
+    .backdrop {
+        max-height: 50vh;
+    }
+}
+
+@media (prefers-color-scheme: dark){
+    
+}