diff --git a/packages/storyteller-home/public/index.html b/packages/storyteller-home/public/index.html
index 34e3fb8ccd..6f859a9510 100644
--- a/packages/storyteller-home/public/index.html
+++ b/packages/storyteller-home/public/index.html
@@ -22,7 +22,7 @@
     />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#209cee" />
+    <meta name="theme-color" content="#212137" />
     <meta name="description" content="Storyteller supercharges your stream" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
diff --git a/packages/storyteller-home/src/App.scss b/packages/storyteller-home/src/App.scss
index 083093e963..8e17d9fb37 100644
--- a/packages/storyteller-home/src/App.scss
+++ b/packages/storyteller-home/src/App.scss
@@ -74,9 +74,7 @@ p {
     rgba(34, 34, 56, 1) 0%,
     rgba(23, 23, 37, 1) 100%
   );
-  height: 110vh;
-  min-height: 1060px;
-  max-height: 1060px;
+  height: 1200px;
   overflow: hidden;
   position: relative;
 }
@@ -308,7 +306,7 @@ p {
 
 .shape-1-container {
   position: absolute;
-  bottom: 43%;
+  bottom: 48%;
   left: 18%;
 }
 .shape-1 {
@@ -336,8 +334,8 @@ p {
 
 .shape-3-container {
   position: absolute;
-  bottom: 32%;
-  right: 28%;
+  bottom: 40%;
+  right: 26%;
 }
 
 .shape-3 {
@@ -352,7 +350,7 @@ p {
 
 .shape-4-container {
   position: absolute;
-  bottom: 22%;
+  bottom: 30%;
   left: 32%;
 }
 
@@ -380,16 +378,14 @@ p {
 
 .hero-img {
   position: absolute;
-  bottom: 0px;
+  bottom: 0;
   z-index: 10;
   pointer-events: none;
   max-height: 680px;
-  display: flex;
-  justify-content: center;
 
   &.roko {
-    margin-left: -450px;
-    margin-bottom: 120px;
+    margin-left: -470px;
+    margin-bottom: 250px;
     position: absolute;
     max-height: 600px;
     height: 100%;
@@ -397,30 +393,27 @@ p {
 
   &.basilisk {
     margin-right: -420px;
-    margin-bottom: 60px;
+    margin-bottom: 190px;
     position: absolute;
     max-height: 640px;
     height: 100%;
   }
 
   &.pascal {
-    margin-bottom: 10px;
+    margin-bottom: 120px;
     position: absolute;
     height: 100%;
   }
-
-  img {
-    image-rendering: auto;
-  }
 }
 
 .bg-floor {
   position: absolute;
   bottom: 0;
+  z-index: 2;
   background-color: #2f2f4a;
   width: 100%;
-  height: 180px;
-  border-radius: 360px 360px 0 0;
+  height: 25%;
+  border-radius: 80px 80px 0 0;
 }
 
 .bg-light {
@@ -1024,28 +1017,28 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
 
 @media (max-width: 1199.98px) {
   .hero-img {
-    padding-top: 100px;
+    transform: scale(0.85) !important;
 
     &.roko {
       margin: 0;
-      margin-bottom: 60px;
-      margin-left: -310px;
+      margin-bottom: 160px;
+      margin-left: -410px;
       height: 100%;
     }
     &.basilisk {
       margin: 0;
-      margin-bottom: 30px;
-      margin-right: -300px;
+      margin-bottom: 140px;
+      margin-right: -400px;
       height: 100%;
     }
     &.pascal {
-      // margin-bottom: 40px;
+      margin-bottom: 100px;
       height: 100%;
     }
   }
 
   .bg-floor {
-    height: 130px;
+    height: 220px;
     border-radius: 0 0 0 0;
   }
 
@@ -1108,21 +1101,31 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
 
 @media (max-width: 767.98px) {
   .hero-img {
-    padding-top: 60px;
+    padding-top: 0px;
+    transform: scale(0.7) !important;
 
     &.roko {
       margin: 0;
-      margin-bottom: 60px;
+      margin-bottom: 70px;
       margin-left: -310px;
     }
     &.basilisk {
       margin: 0;
-      margin-bottom: 30px;
+      margin-bottom: 50px;
       margin-right: -300px;
     }
-    // &.pascal {
-    //   margin-bottom: 40px;
-    // }
+    &.pascal {
+      margin-bottom: 0px;
+    }
+  }
+
+  .bg-floor {
+    height: 180px;
+  }
+
+  .bg-hero {
+    min-height: 1020px;
+    max-height: 1020px;
   }
 
   .hero-title {