diff --git a/src/_style.scss b/src/_style.scss
index 0937a2f4..388eb116 100644
--- a/src/_style.scss
+++ b/src/_style.scss
@@ -402,6 +402,7 @@ select.form-control {
 .medium-screen-container {
   flex-wrap: nowrap;
   max-width: inherit;
+  height: 282px;
 }
 
 .screen-header {
@@ -497,7 +498,7 @@ select.form-control {
   stroke: $accent-b;
   stroke-width: 0.5rem;
   width: 7em;
-  height: 240px;
+  height: 115px;
 }
 
 .small-screen-svg-line {
@@ -519,9 +520,9 @@ select.form-control {
 .medium-heading {
   padding-left: 1rem;
   color: $white;
-  max-width: 24rem;
-  line-height: 78px;
-  font-size: 78px;
+  max-width: 27rem;
+  line-height: 60px;
+  font-size: 60px;
 }
 
 .small-heading {
diff --git a/src/common-components/MediumScreenHeader.jsx b/src/common-components/MediumScreenHeader.jsx
index 18829b26..133375bc 100644
--- a/src/common-components/MediumScreenHeader.jsx
+++ b/src/common-components/MediumScreenHeader.jsx
@@ -10,9 +10,9 @@ const MediumScreenHeader = (props) => {
 
   return (
     <div className="container row p-0 m-0 medium-screen-container">
-      <div className="col-md-10 p-0 screen-header mb-4">
+      <div className="col-md-10 p-0 screen-header">
         <img alt="edx" className="logo" src={getConfig().LOGO_WHITE_URL} />
-        <div className="row mt-4">
+        <div className="row mt-4 justify-content-center">
           <svg className="medium-screen-svg-line pl-5">
             <line x1="50" y1="0" x2="10" y2="215" />
           </svg>
@@ -24,7 +24,7 @@ const MediumScreenHeader = (props) => {
           </h1>
         </div>
       </div>
-      <div className="col-md-2 p-0 screen-polygon mb-4">
+      <div className="col-md-2 p-0 screen-polygon">
         <svg width="100%" height="100%" className="medium-screen-svg" preserveAspectRatio="xMaxYMin meet">
           <g transform="skewX(168)">
             <rect x="0" y="0" height="100%" width="100%" />