diff --git a/css/_base.scss b/css/_base.scss
index 529ed17f1f..6c1287be1d 100644
--- a/css/_base.scss
+++ b/css/_base.scss
@@ -108,14 +108,15 @@ form {
 }
 
 .leftwatermark {
-    left: $defaultToolbarSize;
-    margin-left: 10px;
+    left: 32px;
+    top: 32px;
     background-image: url($defaultWatermarkLink);
     background-position: center left;
 }
 
 .rightwatermark {
-    right: 15;
+    right: 32px;
+    top: 32px;
     background-position: center right;
 }
 
diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index b1907d275b..fc808640ba 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -146,7 +146,6 @@
             background: #B8C7E0;
             border-radius: 2px;
             color: $newToolbarBackgroundColor;
-            font-family: -apple-system, BlinkMacSystemFont, $baseFontFamily;
             font-size: 11px;
             font-weight: bold;
             margin-left: 8px;
diff --git a/css/_variables.scss b/css/_variables.scss
index 8e34df1c7a..342d2cc0da 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -3,7 +3,7 @@
 /**
  * Style variables
  */
-$baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $hangupColor: #bf2117;
 $hangupFontSize: 2em;
 
@@ -144,7 +144,7 @@ $watermarkHeight: 74px;
 /**
  * Welcome page variables.
  */
-$welcomePageDescriptionColor: #fff;
+$welcomePageDescriptionColor: #E6EDFA;
 $welcomePageFontFamily: inherit;
-$welcomePageHeaderBackground: linear-gradient(#165ecc, #44A5FF);
+$welcomePageHeaderBackground: #1D69D4;
 $welcomePageTitleColor: #fff;
diff --git a/css/_welcome_page.scss b/css/_welcome_page.scss
index cc326a4171..f704ec5ae5 100644
--- a/css/_welcome_page.scss
+++ b/css/_welcome_page.scss
@@ -4,15 +4,19 @@ body.welcome-page {
 }
 
 .welcome {
+    background-color: $welcomePageHeaderBackground;
+    display: flex;
+    flex-direction: column;
     font-family: $welcomePageFontFamily;
-    height: 100%;
+    justify-content: space-between;
+    min-height: 100vh;
     position: relative;
 
     .header {
         align-items: center;
-        background: $welcomePageHeaderBackground;
         display: flex;
         flex-direction: column;
+        min-height: fit-content;
         overflow: hidden;
         position: relative;
         text-align: center;
@@ -20,49 +24,42 @@ body.welcome-page {
         .header-text {
             display: flex;
             flex-direction: column;
-            justify-content: space-around;
-            margin-top: 120px;
-            margin-bottom: 20px;
+            margin-top: $watermarkHeight + 80;
+            margin-bottom: 36px;
             max-width: calc(100% - 40px);
-            min-height: 286px;
-            width: 645px;
+            width: 650px;
+            z-index: $zindex2;
         }
 
         .header-text-title {
             color: $welcomePageTitleColor;
-            font-size: 48px;
-            letter-spacing: -1px;
-            line-height: 58px;
-            margin-bottom: 20px;
+            font-size: 2.5rem;
+            font-weight: 500;
+            letter-spacing: 0;
+            line-height: 1.18;
+            margin-bottom: 16px;
         }
 
         .header-text-description {
             color: $welcomePageDescriptionColor;
-            font-size: 20px;
-            line-height: 28px;
-            opacity: 0.8;
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 24px;
         }
 
-        .header-image {
-            background-image: url(../images/welcome_page/curves.png);
-            background-size: contain;
-            height: 209px;
-            position: absolute;
-            width: 1070px;
-        }
-
-        #new_enter_room {
+        #enter_room {
             align-items: center;
             display: flex;
-            margin-bottom: 20px;
             max-width: calc(100% - 40px);
+            margin-bottom: 20px;
             position: relative;
-            z-index: 2;
+            width: 650px;
+            z-index: $zindex2;
 
             .enter-room-input {
                 display: inline-block;
-                margin-right: 15px;
-                width: 350px;
+                margin-right: 8px;
+                width: 100%;
             }
         }
     }
@@ -70,24 +67,10 @@ body.welcome-page {
     .welcome-page-button {
         font-size: 16px;
     }
-}
 
-.welcome.with-content {
-    .header {
-        min-height: 552px;
-    }
-    .header-image {
-        left: -61px;
-        top: 401px;
-    }
-}
-
-.welcome.without-content {
-    .header {
+    .welcome-watermark {
+        position: absolute;
+        width: 100%;
         height: 100%;
     }
-    .header-image {
-        bottom: -20px;
-        left: 0;
-    }
 }
diff --git a/css/modals/video-quality/_video-quality.scss b/css/modals/video-quality/_video-quality.scss
index 0051684db2..e5255c7452 100644
--- a/css/modals/video-quality/_video-quality.scss
+++ b/css/modals/video-quality/_video-quality.scss
@@ -155,7 +155,6 @@
 
     .circular-label {
         color: white;
-        font-family: -apple-system, BlinkMacSystemFont, $baseFontFamily;
         font-weight: bold;
         margin-left: 8px;
         opacity: 0.8;
diff --git a/images/welcome_page/curves.png b/images/welcome_page/curves.png
deleted file mode 100644
index a625b1b6e6..0000000000
Binary files a/images/welcome_page/curves.png and /dev/null differ
diff --git a/lang/main.json b/lang/main.json
index 370ffebef5..d8fef9abb0 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -64,7 +64,7 @@
         "roomnameHint": "Enter the name or URL of the room you want to join. You may make a name up, just let the people you are meeting know it so that they enter the same name.",
         "sendFeedback": "Send feedback",
         "terms": "Terms",
-        "title": "More secure, more flexible, and completely free video conferencing"
+        "title": "More secure, more flexible, and completely free video conferencing."
     },
     "startupoverlay": {
         "policyText": " ",
diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js
index b38ff1c42b..315a702afb 100644
--- a/react/features/welcome/components/WelcomePage.web.js
+++ b/react/features/welcome/components/WelcomePage.web.js
@@ -35,7 +35,7 @@ class WelcomePage extends AbstractWelcomePage {
 
         /**
          * The HTML Element used as the container for additional content. Used
-         * for directly appending the additional content template to the dom
+         * for directly appending the additional content template to the dom.
          *
          * @private
          * @type {HTMLTemplateElement|null}
@@ -107,10 +107,12 @@ class WelcomePage extends AbstractWelcomePage {
                 <div
                     className = { `welcome ${showAdditionalContent
                         ? 'with-content' : 'without-content'}` }
-                    id = 'new_welcome_page'>
+                    id = 'welcome_page'>
+                    <div className = 'welcome-watermark'>
+                        <Watermarks />
+                    </div>
                     <div className = 'header'>
                         <div className = 'header-image' />
-                        <Watermarks />
                         <div className = 'header-text'>
                             <h1 className = 'header-text-title'>
                                 { t('welcomepage.title') }
@@ -120,7 +122,7 @@ class WelcomePage extends AbstractWelcomePage {
                                     { app: APP_NAME }) }
                             </p>
                         </div>
-                        <div id = 'new_enter_room'>
+                        <div id = 'enter_room'>
                             <form
                                 className = 'enter-room-input'
                                 onSubmit = { this._onFormSubmit }>
@@ -156,7 +158,7 @@ class WelcomePage extends AbstractWelcomePage {
     }
 
     /**
-     * Prevents submission of the form and delagates join logic.
+     * Prevents submission of the form and delegates join logic.
      *
      * @param {Event} event - The HTML Event which details the form submission.
      * @private
@@ -196,7 +198,7 @@ class WelcomePage extends AbstractWelcomePage {
     }
 
     /**
-     * Returns whether or not additional content should be displayed belowed
+     * Returns whether or not additional content should be displayed below
      * the welcome page's header for entering a room name.
      *
      * @private