From 84cb231c518ac6c6d0c9a56b85bbeefef6d0d31c Mon Sep 17 00:00:00 2001
From: Arjun Singh Yadav <arjun@opencraft.com>
Date: Tue, 6 Apr 2021 04:11:08 +0530
Subject: [PATCH] [BB-3966] Fix UX issues (#761)

* BB-3966 Header: Expand to screen width.

* BB-3966 Update Redeployment toolbar.

* BB-3966: Align console content to header

* BB-3966 Fix footer at bottom
---
 .../ConsoleContainer/ConsoleContainer.tsx     |   2 +-
 .../ConsoleContainer.spec.tsx.snap            |   2 +-
 .../__snapshots__/ConsolePage.spec.tsx.snap   |   8 +-
 .../components/ConsolePage/styles.scss        |   3 +-
 .../__snapshots__/CoursesManage.spec.tsx.snap |  52 ++----
 .../Hero/__snapshots__/Hero.spec.tsx.snap     |   4 +-
 .../InstanceSettings.spec.tsx.snap            |   4 +-
 .../Logos/__snapshots__/Logos.spec.tsx.snap   |   4 +-
 .../__snapshots__/NoticeBoard.spec.tsx.snap   |   4 +-
 .../RedeploymentToolbar.tsx                   |  11 +-
 .../RedeploymentToolbar.spec.tsx.snap         |  24 +--
 .../RedeploymentToolbar/styles.scss           |  14 +-
 .../__snapshots__/ThemeButtons.spec.tsx.snap  |   4 +-
 .../ThemeNavigation.spec.tsx.snap             |   4 +-
 .../ThemePreviewAndColors.spec.tsx.snap       |   4 +-
 .../ButtonsCustomizationPage.spec.tsx.snap    |   8 +-
 .../ColorsComponent.spec.tsx.snap             |   8 +-
 .../__snapshots__/ConsoleHome.spec.tsx.snap   |  52 ++----
 .../components/PreviewBox/style.scss          |   4 +-
 .../ThemeNavigationPage.spec.tsx.snap         |   8 +-
 .../components/newConsolePage/ConsolePage.tsx |  18 +-
 .../__snapshots__/ConsolePage.spec.tsx.snap   | 164 +++++++-----------
 .../components/newConsolePage/styles.scss     |  15 +-
 .../CustomizationSideMenu.tsx                 |  35 ++--
 .../CustomizationSideMenu.spec.tsx.snap       |  40 ++---
 .../newCustomizationSideMenu/styles.scss      |   6 +-
 .../ThemeFooterSideBar.spec.tsx.snap          |   8 +-
 .../components/newFooter/styles.scss          |  22 +--
 .../App/__snapshots__/App.spec.tsx.snap       |   2 +-
 .../ui/components/ColorInputField/styles.scss |   9 +
 .../CustomStatusPill/displayMessages.ts       |   2 +-
 .../components/CustomStatusPill/styles.scss   |   2 +-
 frontend/src/ui/components/Header/Header.tsx  |   9 +-
 .../Header/__snapshots__/Header.spec.tsx.snap |   2 +-
 frontend/src/ui/components/Header/styles.scss |  17 +-
 35 files changed, 217 insertions(+), 358 deletions(-)

diff --git a/frontend/src/console/components/ConsoleContainer/ConsoleContainer.tsx b/frontend/src/console/components/ConsoleContainer/ConsoleContainer.tsx
index bdecbfef3..905491750 100644
--- a/frontend/src/console/components/ConsoleContainer/ConsoleContainer.tsx
+++ b/frontend/src/console/components/ConsoleContainer/ConsoleContainer.tsx
@@ -4,7 +4,7 @@ import { ConsoleRoutes } from 'routes/console';
 import './styles.scss';
 
 export const ConsoleContainer: React.FC = () => (
-  <Col className="console-container">
+  <Col className="console-container p-0">
     <ConsoleRoutes />
   </Col>
 );
diff --git a/frontend/src/console/components/ConsoleContainer/__snapshots__/ConsoleContainer.spec.tsx.snap b/frontend/src/console/components/ConsoleContainer/__snapshots__/ConsoleContainer.spec.tsx.snap
index 06d3d63c9..0b7178635 100644
--- a/frontend/src/console/components/ConsoleContainer/__snapshots__/ConsoleContainer.spec.tsx.snap
+++ b/frontend/src/console/components/ConsoleContainer/__snapshots__/ConsoleContainer.spec.tsx.snap
@@ -2,6 +2,6 @@
 
 exports[`renders without crashing 1`] = `
 <div
-  className="console-container col"
+  className="console-container p-0 col"
 />
 `;
diff --git a/frontend/src/console/components/ConsolePage/__snapshots__/ConsolePage.spec.tsx.snap b/frontend/src/console/components/ConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
index 2fa02ba3a..b542b83d4 100644
--- a/frontend/src/console/components/ConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
+++ b/frontend/src/console/components/ConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`Console Page Correctly renders loading page 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
@@ -318,10 +318,10 @@ exports[`Console Page Correctly renders page with data 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
diff --git a/frontend/src/console/components/ConsolePage/styles.scss b/frontend/src/console/components/ConsolePage/styles.scss
index fa1eb7d40..a4aeb2c89 100644
--- a/frontend/src/console/components/ConsolePage/styles.scss
+++ b/frontend/src/console/components/ConsolePage/styles.scss
@@ -38,8 +38,7 @@
 
   .console-page-container {
     background-color: #fff;
-    padding: 3rem 1rem;
-    margin: 0 -15px;
+    padding: 3rem 0;
     flex: 1;
 
     .console-page-content {
diff --git a/frontend/src/console/components/CoursesManage/__snapshots__/CoursesManage.spec.tsx.snap b/frontend/src/console/components/CoursesManage/__snapshots__/CoursesManage.spec.tsx.snap
index bd605c0aa..6d585ca38 100644
--- a/frontend/src/console/components/CoursesManage/__snapshots__/CoursesManage.spec.tsx.snap
+++ b/frontend/src/console/components/CoursesManage/__snapshots__/CoursesManage.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
@@ -55,13 +55,13 @@ exports[`renders without crashing 1`] = `
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 col-md-3"
           >
             <div
               className="new-customization-menu accordion"
@@ -71,14 +71,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Theme
-                  </div>
+                  Theme
                 </div>
                 <div
                   aria-expanded={null}
@@ -142,14 +138,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Custom Pages
-                  </div>
+                  Custom Pages
                 </div>
                 <div
                   aria-expanded={null}
@@ -213,14 +205,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Instance Settings
-                  </div>
+                  Instance Settings
                 </div>
                 <div
                   aria-expanded={null}
@@ -258,14 +246,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Courses (Studio)
-                  </div>
+                  Courses (Studio)
                 </div>
                 <div
                   aria-expanded={null}
@@ -292,7 +276,7 @@ exports[`renders without crashing 1`] = `
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <div
               className="customization-form"
diff --git a/frontend/src/console/components/Hero/__snapshots__/Hero.spec.tsx.snap b/frontend/src/console/components/Hero/__snapshots__/Hero.spec.tsx.snap
index 7c71a359a..3b586135b 100644
--- a/frontend/src/console/components/Hero/__snapshots__/Hero.spec.tsx.snap
+++ b/frontend/src/console/components/Hero/__snapshots__/Hero.spec.tsx.snap
@@ -1157,10 +1157,10 @@ exports[`Hero customization page renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
diff --git a/frontend/src/console/components/InstanceSettings/__snapshots__/InstanceSettings.spec.tsx.snap b/frontend/src/console/components/InstanceSettings/__snapshots__/InstanceSettings.spec.tsx.snap
index 837c9b33e..8d34e3839 100644
--- a/frontend/src/console/components/InstanceSettings/__snapshots__/InstanceSettings.spec.tsx.snap
+++ b/frontend/src/console/components/InstanceSettings/__snapshots__/InstanceSettings.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
diff --git a/frontend/src/console/components/Logos/__snapshots__/Logos.spec.tsx.snap b/frontend/src/console/components/Logos/__snapshots__/Logos.spec.tsx.snap
index 837c9b33e..8d34e3839 100644
--- a/frontend/src/console/components/Logos/__snapshots__/Logos.spec.tsx.snap
+++ b/frontend/src/console/components/Logos/__snapshots__/Logos.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
diff --git a/frontend/src/console/components/NoticeBoard/__snapshots__/NoticeBoard.spec.tsx.snap b/frontend/src/console/components/NoticeBoard/__snapshots__/NoticeBoard.spec.tsx.snap
index 3c1239800..dce440d5f 100644
--- a/frontend/src/console/components/NoticeBoard/__snapshots__/NoticeBoard.spec.tsx.snap
+++ b/frontend/src/console/components/NoticeBoard/__snapshots__/NoticeBoard.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`NoticeBoard tests Renders all notification types without crashing 1`] =
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
diff --git a/frontend/src/console/components/RedeploymentToolbar/RedeploymentToolbar.tsx b/frontend/src/console/components/RedeploymentToolbar/RedeploymentToolbar.tsx
index 72c382b8e..531eacc06 100644
--- a/frontend/src/console/components/RedeploymentToolbar/RedeploymentToolbar.tsx
+++ b/frontend/src/console/components/RedeploymentToolbar/RedeploymentToolbar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMatomo } from '@datapunt/matomo-tracker-react';
 import { WrappedMessage } from 'utils/intl';
-import { Button, Modal } from 'react-bootstrap';
+import { Button, Container, Modal } from 'react-bootstrap';
 import {
   CustomStatusPill,
   NotificationToast,
@@ -93,8 +93,11 @@ export const RedeploymentToolbar: React.FC<Props> = ({
     : handleShowModal;
 
   return (
-    <div className="d-flex justify-content-center align-middle redeployment-toolbar">
-      <div className="redeployment-nav">
+    <Container
+      fluid
+      className="d-flex justify-content-between redeployment-toolbar px-4 py-3"
+    >
+      <div className="d-flex flex-row justify-content-between w-100">
         <CustomStatusPill
           loading={loading}
           redeploymentStatus={deploymentStatus}
@@ -159,6 +162,6 @@ export const RedeploymentToolbar: React.FC<Props> = ({
         closeMessage={messages.notificationHelp.defaultMessage}
         messages={messages}
       />
-    </div>
+    </Container>
   );
 };
diff --git a/frontend/src/console/components/RedeploymentToolbar/__snapshots__/RedeploymentToolbar.spec.tsx.snap b/frontend/src/console/components/RedeploymentToolbar/__snapshots__/RedeploymentToolbar.spec.tsx.snap
index 957006623..a5ca3d359 100644
--- a/frontend/src/console/components/RedeploymentToolbar/__snapshots__/RedeploymentToolbar.spec.tsx.snap
+++ b/frontend/src/console/components/RedeploymentToolbar/__snapshots__/RedeploymentToolbar.spec.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when deployment info isn't there 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
@@ -49,10 +49,10 @@ exports[`RedeploymentToolbar Component Correctly renders redeployment bar when d
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when deployment is by admin 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
@@ -103,10 +103,10 @@ exports[`RedeploymentToolbar Component Correctly renders redeployment bar when d
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when instance has pending changes 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
@@ -157,10 +157,10 @@ exports[`RedeploymentToolbar Component Correctly renders redeployment bar when i
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when instance is being deployed by user 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
@@ -204,10 +204,10 @@ exports[`RedeploymentToolbar Component Correctly renders redeployment bar when i
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when instance is being prepared 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
@@ -251,10 +251,10 @@ exports[`RedeploymentToolbar Component Correctly renders redeployment bar when i
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when instance is up-to-date 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
diff --git a/frontend/src/console/components/RedeploymentToolbar/styles.scss b/frontend/src/console/components/RedeploymentToolbar/styles.scss
index f18e21b25..a08531d56 100644
--- a/frontend/src/console/components/RedeploymentToolbar/styles.scss
+++ b/frontend/src/console/components/RedeploymentToolbar/styles.scss
@@ -2,18 +2,8 @@
 
 
 .redeployment-toolbar {
-  background-color: $light-blue;
-  padding: 15px;
-  margin: 0 -15px;
-
-  display: flex;
-  align-items: center;
-
-  .redeployment-nav {
-    display: inline-block;
-    width: 100%;
-    max-width: 1100px;
-  }
+  background-color: white;
+  box-shadow: 0 2px 8px 0 rgba(15, 31, 36, 0.3);
 }
 
 .tooltip {
diff --git a/frontend/src/console/components/ThemeButtons/__snapshots__/ThemeButtons.spec.tsx.snap b/frontend/src/console/components/ThemeButtons/__snapshots__/ThemeButtons.spec.tsx.snap
index 837c9b33e..8d34e3839 100644
--- a/frontend/src/console/components/ThemeButtons/__snapshots__/ThemeButtons.spec.tsx.snap
+++ b/frontend/src/console/components/ThemeButtons/__snapshots__/ThemeButtons.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
diff --git a/frontend/src/console/components/ThemeNavigation/__snapshots__/ThemeNavigation.spec.tsx.snap b/frontend/src/console/components/ThemeNavigation/__snapshots__/ThemeNavigation.spec.tsx.snap
index 837c9b33e..8d34e3839 100644
--- a/frontend/src/console/components/ThemeNavigation/__snapshots__/ThemeNavigation.spec.tsx.snap
+++ b/frontend/src/console/components/ThemeNavigation/__snapshots__/ThemeNavigation.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
diff --git a/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap b/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap
index 0d9992497..c5fd69d7e 100644
--- a/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap
+++ b/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap
@@ -1894,10 +1894,10 @@ exports[`Theme preview and colors page renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
diff --git a/frontend/src/newConsole/components/ButtonsCustomizationPage/__snapshots__/ButtonsCustomizationPage.spec.tsx.snap b/frontend/src/newConsole/components/ButtonsCustomizationPage/__snapshots__/ButtonsCustomizationPage.spec.tsx.snap
index 99a36dd96..cc8d056f7 100644
--- a/frontend/src/newConsole/components/ButtonsCustomizationPage/__snapshots__/ButtonsCustomizationPage.spec.tsx.snap
+++ b/frontend/src/newConsole/components/ButtonsCustomizationPage/__snapshots__/ButtonsCustomizationPage.spec.tsx.snap
@@ -19,13 +19,13 @@ exports[`renders without crashing 1`] = `
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 pl-4 col-md-3"
           >
             <button
               className="back-button btn btn-link btn-sm"
@@ -1785,7 +1785,7 @@ exports[`renders without crashing 1`] = `
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <div
               className="preview-box card"
diff --git a/frontend/src/newConsole/components/ColorsComponent/__snapshots__/ColorsComponent.spec.tsx.snap b/frontend/src/newConsole/components/ColorsComponent/__snapshots__/ColorsComponent.spec.tsx.snap
index 68d2af7b0..78a54fb01 100644
--- a/frontend/src/newConsole/components/ColorsComponent/__snapshots__/ColorsComponent.spec.tsx.snap
+++ b/frontend/src/newConsole/components/ColorsComponent/__snapshots__/ColorsComponent.spec.tsx.snap
@@ -19,13 +19,13 @@ exports[`renders without crashing 1`] = `
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 pl-4 col-md-3"
           >
             <button
               className="back-button btn btn-link btn-sm"
@@ -164,7 +164,7 @@ exports[`renders without crashing 1`] = `
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <div
               className="preview-box card"
diff --git a/frontend/src/newConsole/components/ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap b/frontend/src/newConsole/components/ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap
index bd605c0aa..6d585ca38 100644
--- a/frontend/src/newConsole/components/ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap
+++ b/frontend/src/newConsole/components/ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
@@ -55,13 +55,13 @@ exports[`renders without crashing 1`] = `
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 col-md-3"
           >
             <div
               className="new-customization-menu accordion"
@@ -71,14 +71,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Theme
-                  </div>
+                  Theme
                 </div>
                 <div
                   aria-expanded={null}
@@ -142,14 +138,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Custom Pages
-                  </div>
+                  Custom Pages
                 </div>
                 <div
                   aria-expanded={null}
@@ -213,14 +205,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Instance Settings
-                  </div>
+                  Instance Settings
                 </div>
                 <div
                   aria-expanded={null}
@@ -258,14 +246,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Courses (Studio)
-                  </div>
+                  Courses (Studio)
                 </div>
                 <div
                   aria-expanded={null}
@@ -292,7 +276,7 @@ exports[`renders without crashing 1`] = `
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <div
               className="customization-form"
diff --git a/frontend/src/newConsole/components/PreviewBox/style.scss b/frontend/src/newConsole/components/PreviewBox/style.scss
index 5ed8ca81d..cf81f94c9 100644
--- a/frontend/src/newConsole/components/PreviewBox/style.scss
+++ b/frontend/src/newConsole/components/PreviewBox/style.scss
@@ -1,8 +1,8 @@
 .preview-box {
     height: 100%;
     box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
-    width: 95%;
-    max-height: 650px;
+    max-height: 610px;
+    width: 100%;
 
     .custom-footer {
         margin-bottom: 0;
diff --git a/frontend/src/newConsole/components/ThemeNavigationPage/__snapshots__/ThemeNavigationPage.spec.tsx.snap b/frontend/src/newConsole/components/ThemeNavigationPage/__snapshots__/ThemeNavigationPage.spec.tsx.snap
index 247cf61f4..71613598c 100644
--- a/frontend/src/newConsole/components/ThemeNavigationPage/__snapshots__/ThemeNavigationPage.spec.tsx.snap
+++ b/frontend/src/newConsole/components/ThemeNavigationPage/__snapshots__/ThemeNavigationPage.spec.tsx.snap
@@ -19,13 +19,13 @@ exports[`renders without crashing 1`] = `
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 pl-4 col-md-3"
           >
             <button
               className="back-button btn btn-link btn-sm"
@@ -323,7 +323,7 @@ exports[`renders without crashing 1`] = `
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <div
               className="preview-box card"
diff --git a/frontend/src/newConsole/components/newConsolePage/ConsolePage.tsx b/frontend/src/newConsole/components/newConsolePage/ConsolePage.tsx
index 055110592..084ff4d75 100644
--- a/frontend/src/newConsole/components/newConsolePage/ConsolePage.tsx
+++ b/frontend/src/newConsole/components/newConsolePage/ConsolePage.tsx
@@ -119,24 +119,26 @@ export class ConsolePageComponent extends React.PureComponent<Props> {
 
       if (this.props.showSidebar && !this.props.showSideBarEditComponent) {
         innerContent = (
-          <Row className="justify-content-center console-page-inner-content">
-            <Col md="3">
+          <Row className="justify-content-center m-0">
+            <Col md="3" className="p-0 m-0">
               <CustomizationSideMenu />
             </Col>
-            <Col md="7">{innerContent}</Col>
+            <Col md="9" className="pr-0">
+              {innerContent}
+            </Col>
           </Row>
         );
       }
 
       if (this.props.showSidebar && this.props.showSideBarEditComponent) {
         innerContent = (
-          <Row className="justify-content-center console-page-inner-content">
-            <Col md="3">
+          <Row className="justify-content-center m-0">
+            <Col md="3" className="p-0 m-0 pl-4">
               {renderBackButton(this.props.goBack!)}
               {innerContent}
             </Col>
             {/* This is where the preview page component will be redered */}
-            <Col md="7">
+            <Col md="9" className="pr-0">
               <PreviewBox>
                 <CourseOutlinePreview />
               </PreviewBox>
@@ -199,7 +201,9 @@ export class ConsolePageComponent extends React.PureComponent<Props> {
 
         <div className="new-console-page-container">
           <Row className="new-console-page-content">
-            <Container fluid>{content()}</Container>
+            <Container fluid className="pr-4 pl-0">
+              {content()}
+            </Container>
           </Row>
         </div>
       </div>
diff --git a/frontend/src/newConsole/components/newConsolePage/__snapshots__/ConsolePage.spec.tsx.snap b/frontend/src/newConsole/components/newConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
index 27a895445..ec465cbfa 100644
--- a/frontend/src/newConsole/components/newConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
+++ b/frontend/src/newConsole/components/newConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`Console Page Console Page with Edit component Correctly renders loading
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
@@ -55,13 +55,13 @@ exports[`Console Page Console Page with Edit component Correctly renders loading
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 pl-4 col-md-3"
           >
             <button
               className="back-button btn btn-link btn-sm"
@@ -92,7 +92,7 @@ exports[`Console Page Console Page with Edit component Correctly renders loading
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <div
               className="preview-box card"
@@ -110,10 +110,10 @@ exports[`Console Page Correctly renders loading page 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
@@ -160,13 +160,13 @@ exports[`Console Page Correctly renders loading page 1`] = `
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 col-md-3"
           >
             <div
               className="new-customization-menu accordion"
@@ -176,14 +176,10 @@ exports[`Console Page Correctly renders loading page 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Theme
-                  </div>
+                  Theme
                 </div>
                 <div
                   aria-expanded={null}
@@ -247,14 +243,10 @@ exports[`Console Page Correctly renders loading page 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Custom Pages
-                  </div>
+                  Custom Pages
                 </div>
                 <div
                   aria-expanded={null}
@@ -318,14 +310,10 @@ exports[`Console Page Correctly renders loading page 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Instance Settings
-                  </div>
+                  Instance Settings
                 </div>
                 <div
                   aria-expanded={null}
@@ -363,14 +351,10 @@ exports[`Console Page Correctly renders loading page 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Courses (Studio)
-                  </div>
+                  Courses (Studio)
                 </div>
                 <div
                   aria-expanded={null}
@@ -397,7 +381,7 @@ exports[`Console Page Correctly renders loading page 1`] = `
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <div
               className="customization-form"
@@ -423,10 +407,10 @@ exports[`Console Page Correctly renders page with data 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
@@ -473,13 +457,13 @@ exports[`Console Page Correctly renders page with data 1`] = `
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 col-md-3"
           >
             <div
               className="new-customization-menu accordion"
@@ -489,14 +473,10 @@ exports[`Console Page Correctly renders page with data 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Theme
-                  </div>
+                  Theme
                 </div>
                 <div
                   aria-expanded={null}
@@ -560,14 +540,10 @@ exports[`Console Page Correctly renders page with data 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Custom Pages
-                  </div>
+                  Custom Pages
                 </div>
                 <div
                   aria-expanded={null}
@@ -631,14 +607,10 @@ exports[`Console Page Correctly renders page with data 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Instance Settings
-                  </div>
+                  Instance Settings
                 </div>
                 <div
                   aria-expanded={null}
@@ -676,14 +648,10 @@ exports[`Console Page Correctly renders page with data 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Courses (Studio)
-                  </div>
+                  Courses (Studio)
                 </div>
                 <div
                   aria-expanded={null}
@@ -710,7 +678,7 @@ exports[`Console Page Correctly renders page with data 1`] = `
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <span>
                Test! 
@@ -742,13 +710,13 @@ exports[`Console Page Correctly renders page with email not verified alert 1`] =
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 col-md-3"
           >
             <div
               className="new-customization-menu accordion"
@@ -758,14 +726,10 @@ exports[`Console Page Correctly renders page with email not verified alert 1`] =
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Theme
-                  </div>
+                  Theme
                 </div>
                 <div
                   aria-expanded={null}
@@ -829,14 +793,10 @@ exports[`Console Page Correctly renders page with email not verified alert 1`] =
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Custom Pages
-                  </div>
+                  Custom Pages
                 </div>
                 <div
                   aria-expanded={null}
@@ -900,14 +860,10 @@ exports[`Console Page Correctly renders page with email not verified alert 1`] =
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Instance Settings
-                  </div>
+                  Instance Settings
                 </div>
                 <div
                   aria-expanded={null}
@@ -945,14 +901,10 @@ exports[`Console Page Correctly renders page with email not verified alert 1`] =
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Courses (Studio)
-                  </div>
+                  Courses (Studio)
                 </div>
                 <div
                   aria-expanded={null}
@@ -979,7 +931,7 @@ exports[`Console Page Correctly renders page with email not verified alert 1`] =
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <span>
                Test! 
diff --git a/frontend/src/newConsole/components/newConsolePage/styles.scss b/frontend/src/newConsole/components/newConsolePage/styles.scss
index 5e2b72f52..4a75b5008 100644
--- a/frontend/src/newConsole/components/newConsolePage/styles.scss
+++ b/frontend/src/newConsole/components/newConsolePage/styles.scss
@@ -6,28 +6,15 @@
   flex-direction: column;
   height: 100% ;
   .new-console-page-container {
-    padding: 3rem 1rem;
-    margin: 0 -15px;
+    padding: 3rem 0;
     flex: 1;
 
     .new-console-page-content {
-      height: 100%;
-
-      .console-page-inner-content {
-        height: 100%;
-      }
-    }
-
-    .console-page-content {
       margin: 0 auto;
-      max-width: 1100px;
       justify-content: center;
       flex-grow: 1;
 
       .customization-form {
-        background-color: #f0f5f7;
-        padding: 32px;
-        margin-bottom: 16px;
 
         .loading {
           text-align: center;
diff --git a/frontend/src/newConsole/components/newCustomizationSideMenu/CustomizationSideMenu.tsx b/frontend/src/newConsole/components/newCustomizationSideMenu/CustomizationSideMenu.tsx
index 530cc4524..3fe451110 100644
--- a/frontend/src/newConsole/components/newCustomizationSideMenu/CustomizationSideMenu.tsx
+++ b/frontend/src/newConsole/components/newCustomizationSideMenu/CustomizationSideMenu.tsx
@@ -41,11 +41,9 @@ export const CustomizationSideMenu: React.FC = () => {
       className="new-customization-menu"
     >
       <Card>
-        <Card.Header>
-          <Accordion.Toggle as={Card.Header} variant="link" eventKey="0">
-            <WrappedMessage messages={messages} id="accordionTheme" />
-          </Accordion.Toggle>
-        </Card.Header>
+        <Accordion.Toggle as={Card.Header} variant="link" eventKey="0">
+          <WrappedMessage messages={messages} id="accordionTheme" />
+        </Accordion.Toggle>
         <Accordion.Collapse eventKey="0">
           <Card.Body>
             <Nav className="flex-column">
@@ -72,11 +70,9 @@ export const CustomizationSideMenu: React.FC = () => {
         </Accordion.Collapse>
       </Card>
       <Card>
-        <Card.Header>
-          <Accordion.Toggle as={Card.Header} variant="link" eventKey="1">
-            <WrappedMessage messages={messages} id="accordionCustomPages" />
-          </Accordion.Toggle>
-        </Card.Header>
+        <Accordion.Toggle as={Card.Header} variant="link" eventKey="1">
+          <WrappedMessage messages={messages} id="accordionCustomPages" />
+        </Accordion.Toggle>
         <Accordion.Collapse eventKey="1">
           <Card.Body>
             <Nav className="flex-column">
@@ -88,14 +84,9 @@ export const CustomizationSideMenu: React.FC = () => {
         </Accordion.Collapse>
       </Card>
       <Card>
-        <Card.Header>
-          <Accordion.Toggle as={Card.Header} variant="link" eventKey="2">
-            <WrappedMessage
-              messages={messages}
-              id="accordionInstanceSettings"
-            />
-          </Accordion.Toggle>
-        </Card.Header>
+        <Accordion.Toggle as={Card.Header} variant="link" eventKey="2">
+          <WrappedMessage messages={messages} id="accordionInstanceSettings" />
+        </Accordion.Toggle>
         <Accordion.Collapse eventKey="2">
           <Card.Body>
             <Nav defaultActiveKey="/home" className="flex-column">
@@ -117,11 +108,9 @@ export const CustomizationSideMenu: React.FC = () => {
         </Accordion.Collapse>
       </Card>
       <Card>
-        <Card.Header>
-          <Accordion.Toggle as={Card.Header} variant="link" eventKey="3">
-            <WrappedMessage messages={messages} id="accordionCourses" />
-          </Accordion.Toggle>
-        </Card.Header>
+        <Accordion.Toggle as={Card.Header} variant="link" eventKey="3">
+          <WrappedMessage messages={messages} id="accordionCourses" />
+        </Accordion.Toggle>
         <Accordion.Collapse eventKey="3">
           <Card.Body>
             <Nav className="flex-column">
diff --git a/frontend/src/newConsole/components/newCustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap b/frontend/src/newConsole/components/newCustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap
index ad647ce42..64dc63cad 100644
--- a/frontend/src/newConsole/components/newCustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap
+++ b/frontend/src/newConsole/components/newCustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap
@@ -9,14 +9,10 @@ exports[`Custom Side Menu Page Renders with correct accordion expanded, and with
   >
     <div
       className="card-header"
+      onClick={[Function]}
+      variant="link"
     >
-      <div
-        className="card-header"
-        onClick={[Function]}
-        variant="link"
-      >
-        Theme
-      </div>
+      Theme
     </div>
     <div
       aria-expanded={null}
@@ -80,14 +76,10 @@ exports[`Custom Side Menu Page Renders with correct accordion expanded, and with
   >
     <div
       className="card-header"
+      onClick={[Function]}
+      variant="link"
     >
-      <div
-        className="card-header"
-        onClick={[Function]}
-        variant="link"
-      >
-        Custom Pages
-      </div>
+      Custom Pages
     </div>
     <div
       aria-expanded={null}
@@ -151,14 +143,10 @@ exports[`Custom Side Menu Page Renders with correct accordion expanded, and with
   >
     <div
       className="card-header"
+      onClick={[Function]}
+      variant="link"
     >
-      <div
-        className="card-header"
-        onClick={[Function]}
-        variant="link"
-      >
-        Instance Settings
-      </div>
+      Instance Settings
     </div>
     <div
       aria-expanded={null}
@@ -196,14 +184,10 @@ exports[`Custom Side Menu Page Renders with correct accordion expanded, and with
   >
     <div
       className="card-header"
+      onClick={[Function]}
+      variant="link"
     >
-      <div
-        className="card-header"
-        onClick={[Function]}
-        variant="link"
-      >
-        Courses (Studio)
-      </div>
+      Courses (Studio)
     </div>
     <div
       aria-expanded={null}
diff --git a/frontend/src/newConsole/components/newCustomizationSideMenu/styles.scss b/frontend/src/newConsole/components/newCustomizationSideMenu/styles.scss
index e47dc6a70..1d22b7ee6 100644
--- a/frontend/src/newConsole/components/newCustomizationSideMenu/styles.scss
+++ b/frontend/src/newConsole/components/newCustomizationSideMenu/styles.scss
@@ -11,7 +11,7 @@
     .card-header {
       background-color: transparent;
       border: none;
-      padding: 5px 15px 5px;
+      padding: 5px 1.25rem;
       font-family: PlayfairDisplay;
       font-weight: bold;
       font-size: 28px;
@@ -28,11 +28,11 @@
     }
 
     .card-body {
-      padding: 0 15px 0;
+      padding: 0 0px 0;
       background-color: transparent;
 
       a {
-        padding: 10px 15px;
+        padding: 10px 1.25rem;
         border-top: none;
         font-family: $chivo-font;
         font-size: 20px;
diff --git a/frontend/src/newConsole/components/newFooter/__snapshots__/ThemeFooterSideBar.spec.tsx.snap b/frontend/src/newConsole/components/newFooter/__snapshots__/ThemeFooterSideBar.spec.tsx.snap
index 90520df79..91625227a 100644
--- a/frontend/src/newConsole/components/newFooter/__snapshots__/ThemeFooterSideBar.spec.tsx.snap
+++ b/frontend/src/newConsole/components/newFooter/__snapshots__/ThemeFooterSideBar.spec.tsx.snap
@@ -19,13 +19,13 @@ exports[`Theme footer sidebar tests renders without crashing 1`] = `
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 pl-4 col-md-3"
           >
             <button
               className="back-button btn btn-link btn-sm"
@@ -247,7 +247,7 @@ exports[`Theme footer sidebar tests renders without crashing 1`] = `
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <div
               className="preview-box card"
diff --git a/frontend/src/newConsole/components/newFooter/styles.scss b/frontend/src/newConsole/components/newFooter/styles.scss
index 78c17e5b7..5aa5962c5 100644
--- a/frontend/src/newConsole/components/newFooter/styles.scss
+++ b/frontend/src/newConsole/components/newFooter/styles.scss
@@ -11,6 +11,10 @@
 
 .footer-settings {
 
+  .customization-form{
+    color: transparent;
+  }
+
   h2 {
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -21,22 +25,4 @@
     font-family: $playfair-font;
     font-weight: bold;
   }
-
-  .color-input {
-    margin: auto;
-
-    .row {
-      width: 100%;
-      padding: 15px;
-      box-sizing: border-box;
-      padding-top: 0;
-    }
-
-    .form-label {
-      font-size: 20px !important;
-      font-family: $playfair-font !important;
-      font-weight: bold;
-      color: #0f1f24;
-    }
-  }
 }
diff --git a/frontend/src/ui/components/App/__snapshots__/App.spec.tsx.snap b/frontend/src/ui/components/App/__snapshots__/App.spec.tsx.snap
index eaf1053d9..8eb4b1941 100644
--- a/frontend/src/ui/components/App/__snapshots__/App.spec.tsx.snap
+++ b/frontend/src/ui/components/App/__snapshots__/App.spec.tsx.snap
@@ -8,7 +8,7 @@ exports[`renders without crashing 1`] = `
     className="navbar navbar-expand-md navbar-dark"
   >
     <div
-      className="nav-container"
+      className="d-flex flex-wrap align-items-center justify-content-between px-4 py-3 container-fluid"
     >
       <span
         className="logo-container mr-auto order-0 navbar-brand"
diff --git a/frontend/src/ui/components/ColorInputField/styles.scss b/frontend/src/ui/components/ColorInputField/styles.scss
index b55dd3976..35f2611cf 100644
--- a/frontend/src/ui/components/ColorInputField/styles.scss
+++ b/frontend/src/ui/components/ColorInputField/styles.scss
@@ -1,3 +1,5 @@
+@import '~styles/theme';
+
 .color-input {
   min-width: 150px;
 
@@ -7,6 +9,13 @@
     padding: 0 15px;
   }
 
+  .form-label {
+    font-size: 20px !important;
+    font-family: $playfair-font !important;
+    font-weight: bold;
+    color: #0f1f24;
+  }
+
   .color-input-field {
     width: 75%;
   }
diff --git a/frontend/src/ui/components/CustomStatusPill/displayMessages.ts b/frontend/src/ui/components/CustomStatusPill/displayMessages.ts
index 16da25a8b..1f4150b8a 100644
--- a/frontend/src/ui/components/CustomStatusPill/displayMessages.ts
+++ b/frontend/src/ui/components/CustomStatusPill/displayMessages.ts
@@ -37,7 +37,7 @@ const messages = {
   },
   preparingInstanceTooltip: {
     defaultMessage:
-      'Your updates are publishing to your live site (LMS). This can take 2-3 hours',
+      'Your instance is being setup. Come back in few hours to customize it.',
     description: 'Redeployment status tooltip text.'
   },
   pendingChanges: {
diff --git a/frontend/src/ui/components/CustomStatusPill/styles.scss b/frontend/src/ui/components/CustomStatusPill/styles.scss
index b2c944bef..f761a0b86 100644
--- a/frontend/src/ui/components/CustomStatusPill/styles.scss
+++ b/frontend/src/ui/components/CustomStatusPill/styles.scss
@@ -3,7 +3,7 @@
 .status-pill {
   background-color: $primary-2;
   border-radius: 39px;
-  margin: 10px 8px;
+  margin: 10px 0px;
   padding: 6px 7px;
   display: inline-flex;
 
diff --git a/frontend/src/ui/components/Header/Header.tsx b/frontend/src/ui/components/Header/Header.tsx
index 27d04cb95..a012d821c 100644
--- a/frontend/src/ui/components/Header/Header.tsx
+++ b/frontend/src/ui/components/Header/Header.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Nav, Navbar, NavDropdown } from 'react-bootstrap';
+import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap';
 import { FAQ_PAGE_LINK, ROUTES } from 'global/constants';
 import { NavLink, Route } from 'react-router-dom';
 import { InstancesModel } from 'console/models';
@@ -41,7 +41,10 @@ export const HeaderComponent: React.FC<Props> = (props: Props) => {
 
   return (
     <Navbar expand="md" variant="dark">
-      <div className="nav-container">
+      <Container
+        fluid
+        className="d-flex flex-wrap align-items-center justify-content-between px-4 py-3"
+      >
         <Navbar.Brand className="logo-container mr-auto order-0">
           <NavLink className="navbar-brand-link" to={ROUTES.Console.HOME}>
             <svg className="site-logo">
@@ -149,7 +152,7 @@ export const HeaderComponent: React.FC<Props> = (props: Props) => {
             </NavDropdown>
           </Route>
         </Nav>
-      </div>
+      </Container>
     </Navbar>
   );
 };
diff --git a/frontend/src/ui/components/Header/__snapshots__/Header.spec.tsx.snap b/frontend/src/ui/components/Header/__snapshots__/Header.spec.tsx.snap
index 5efb85870..12d21c6d9 100644
--- a/frontend/src/ui/components/Header/__snapshots__/Header.spec.tsx.snap
+++ b/frontend/src/ui/components/Header/__snapshots__/Header.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`renders without crashing 1`] = `
   className="navbar navbar-expand-md navbar-dark"
 >
   <div
-    className="nav-container"
+    className="d-flex flex-wrap align-items-center justify-content-between px-4 py-3 container-fluid"
   >
     <span
       className="logo-container mr-auto order-0 navbar-brand"
diff --git a/frontend/src/ui/components/Header/styles.scss b/frontend/src/ui/components/Header/styles.scss
index a084e1112..e330a26c0 100644
--- a/frontend/src/ui/components/Header/styles.scss
+++ b/frontend/src/ui/components/Header/styles.scss
@@ -23,22 +23,6 @@
     border: none;
   }
 
-  .navbar-brand {
-    padding: 20px;
-  }
-
-  .nav-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    max-width: 1100px;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   .navbar-nav .nav-link {
     font-family: $chivo-font;
     font-size: 20px;
@@ -65,6 +49,7 @@
     .dropdown-toggle {
       border-bottom: 0;
       display: flex;
+      margin: 0 !important;
 
       &:hover {
         border-bottom: 0;