diff --git a/docs/DEPLOYMENT_SETUP.md b/docs/DEPLOYMENT_SETUP.md
index ffa33d004d..6fd821164e 100644
--- a/docs/DEPLOYMENT_SETUP.md
+++ b/docs/DEPLOYMENT_SETUP.md
@@ -130,6 +130,45 @@ The following env variables are set in Travis:
 
 #### Banners
 
+These environment variables allow us to set notification banners in the
+application without a full redeployment of the application. Note the hierarchy
+of the banner content.
+
+In addition, you can change the color of the banner by adding a type encoding in
+the environment variable string. The default banner type will be `info` if no encoding is
+provided.
+
+The possible banner type prefixes are: `info:`, `warn:`, and `error:`. Other
+prefixes will not work and the invalid prefixes will be shown in the banner
+text.
+
+Examples:
+
+```
+SITE_BANNER_CONTENT=info:This is an info banner. You can also add links in the text like https://example.com. There is also a dismiss button to the right of the text.
+```
+
+![Info banner
+example](https://user-images.githubusercontent.com/22133008/93852946-8a867780-fce5-11ea-929f-a0ce1c6796b9.png)
+
+```
+SITE_BANNER_CONTENT=warn:This is a warning banner. You can also add links in the text like https://example.com
+```
+
+![Warning banner example](https://user-images.githubusercontent.com/22133008/93852559-cec54800-fce4-11ea-9376-9b2802e8ac62.png)
+
+```
+SITE_BANNER_CONTENT=error:This is an error banner. You can also add links in the text like https://example.com
+```
+
+![Error banner example](https://user-images.githubusercontent.com/22133008/93852689-1055f300-fce5-11ea-956d-d5966cbe86d8.png)
+
+```
+SITE_BANNER_CONTENT=hello:This is an invalid banner type, and the full text will be shown. The default banner type of `info` will used.
+```
+
+![Invalid banner default example](https://user-images.githubusercontent.com/22133008/93853306-392ab800-fce6-11ea-9891-f752bdad236e.png)
+
 | Variable                 | Description                                                                                                                                                                                                   |
 | :----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `SITE_BANNER_CONTENT`    | If set, displays a banner message on both private routes that `ADMIN_BANNER_CONTENT` covers **and** public form routes that `IS_GENERAL_MAINTENANCE` covers. Overrides all other banner environment variables |
diff --git a/src/public/main.css b/src/public/main.css
index d0ad4fefe1..bf28a358e8 100644
--- a/src/public/main.css
+++ b/src/public/main.css
@@ -18,6 +18,7 @@
 @import './modules/core/css/admin-form-header.css';
 @import './modules/core/css/sg-govt-banner.css';
 @import './modules/core/css/landing.css';
+@import './modules/core/css/banner.css';
 @import './modules/core/css/how-it-works.css';
 @import './modules/forms/admin/css/pop-up-modal.css';
 @import './modules/forms/admin/css/edit-form.css';
diff --git a/src/public/main.js b/src/public/main.js
index d5fc80ce9a..1388055d79 100644
--- a/src/public/main.js
+++ b/src/public/main.js
@@ -192,7 +192,6 @@ require('./modules/forms/admin/directives/configure-form.client.directive.js')
 require('./modules/forms/admin/directives/configure-mobile.client.directive.js')
 require('./modules/forms/admin/directives/verify-secret-key.client.directive.js')
 require('./modules/forms/admin/directives/daterangepicker.client.directive.js')
-require('./modules/forms/admin/directives/scroll-to-id.client.directive.js')
 require('./modules/forms/admin/directives/edit-captcha.client.directive.js')
 require('./modules/forms/admin/controllers/create-form-template-modal.client.controller.js')
 require('./modules/forms/admin/controllers/collaborator-modal.client.controller.js')
diff --git a/src/public/modules/core/componentViews/banner.html b/src/public/modules/core/componentViews/banner.html
index decb9e1a3b..09c2f8dfc4 100644
--- a/src/public/modules/core/componentViews/banner.html
+++ b/src/public/modules/core/componentViews/banner.html
@@ -1,8 +1,16 @@
-<div class="banner-container" ng-if="!vm.bannerHidden">
+<div
+  id="notification-banner"
+  class="banner-container banner-container-{{vm.bannerType}}"
+  ng-if="!vm.bannerHidden"
+>
   <div>
-    <span ng-bind-html="vm.message"></span>
+    <span ng-bind-html="vm.bannerMessage"></span>
   </div>
-  <div id="dismiss" ng-click="vm.dismissBanner()">
+  <div
+    ng-if="vm.bannerType === vm.BANNER_TYPES.info"
+    id="dismiss"
+    ng-click="vm.dismissBanner()"
+  >
     <i class="bx bx-x bx-md"></i>
   </div>
 </div>
diff --git a/src/public/modules/core/components/banner.client.component.js b/src/public/modules/core/components/banner.client.component.js
index 80d174e99d..1d00c1b696 100644
--- a/src/public/modules/core/components/banner.client.component.js
+++ b/src/public/modules/core/components/banner.client.component.js
@@ -12,10 +12,17 @@ angular.module('core').component('bannerComponent', {
 function bannerController() {
   const vm = this
 
+  vm.BANNER_TYPES = {
+    info: 'info',
+    warn: 'warn',
+    error: 'error',
+  }
+
   vm.$onInit = () => {
     if (!vm.message) {
       vm.bannerHidden = true
     } else {
+      processBannerMessage()
       vm.bannerHidden = false
     }
   }
@@ -26,4 +33,21 @@ function bannerController() {
       vm.bannerHidden = true
     })
   }
+
+  const processBannerMessage = () => {
+    // Retrieve banner type from message, but it is possible that no types
+    // exist.
+    const vmMessage = vm.message || ''
+    const type = vmMessage.split(':').shift().trim().toLowerCase()
+    const retrievedType = vm.BANNER_TYPES[type]
+
+    vm.bannerType = retrievedType || vm.BANNER_TYPES.info
+
+    // If there is a type retrieved from message, remove the type encoding in
+    // the message.
+    // The + 1 is to also remove the semicolon from the encoding
+    vm.bannerMessage = retrievedType
+      ? vmMessage.substring(vmMessage.indexOf(':') + 1).trim()
+      : vmMessage
+  }
 }
diff --git a/src/public/modules/core/css/admin-form-header.css b/src/public/modules/core/css/admin-form-header.css
index 5155cc5edd..e1234087df 100644
--- a/src/public/modules/core/css/admin-form-header.css
+++ b/src/public/modules/core/css/admin-form-header.css
@@ -1,8 +1,21 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 /* Form header */
 
 #admin-form .vcenter {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -10,6 +23,9 @@
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: white;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
 }
 
 #admin-form #form-header #header-myforms {
@@ -26,8 +42,14 @@
 
 #admin-form #form-header .right-spacer {
   margin-right: 15px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
   justify-content: flex-end;
 }
 
@@ -48,6 +70,7 @@
 
 #admin-form #form-header #header-myforms a:hover {
   color: #2f60ce;
+  -webkit-text-decoration-line: none;
   text-decoration-line: none;
 }
 
@@ -61,6 +84,7 @@
   margin-bottom: 0;
   white-space: nowrap;
   overflow: hidden;
+  -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
 
@@ -205,6 +229,8 @@
     width: 700px;
     top: 125px;
     left: 50%;
+    -webkit-transform: translate(-50%);
+    -ms-transform: translate(-50%);
     transform: translate(-50%);
   }
 
@@ -379,6 +405,7 @@
   margin-bottom: 10px;
   white-space: nowrap;
   overflow: hidden;
+  -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
 
@@ -396,9 +423,15 @@
   cursor: pointer;
   height: 20px;
   width: 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
   font-size: 30px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
   color: #979797;
   margin-left: 20px;
diff --git a/src/public/modules/core/css/avatar-dropdown.css b/src/public/modules/core/css/avatar-dropdown.css
index e1bb64c6e1..fbffccc786 100644
--- a/src/public/modules/core/css/avatar-dropdown.css
+++ b/src/public/modules/core/css/avatar-dropdown.css
@@ -1,3 +1,10 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 .navbar__avatar {
   position: relative;
   display: -webkit-inline-box;
@@ -14,7 +21,9 @@
 }
 
 .navbar__avatar__avatar {
-  display: block;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   color: #fff;
   text-transform: uppercase;
   border: 2px solid #484848;
@@ -26,6 +35,12 @@
   font-size: 16px;
   cursor: pointer;
   position: relative;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 @media not all and (min-width: 768px) {
diff --git a/src/public/modules/core/css/banner.css b/src/public/modules/core/css/banner.css
new file mode 100644
index 0000000000..b342f9fe22
--- /dev/null
+++ b/src/public/modules/core/css/banner.css
@@ -0,0 +1,92 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
+/* BANNER COMPONENT */
+
+banner-component {
+  -webkit-box-flex: 0;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+}
+
+.banner-container {
+  position: sticky;
+  top: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 12px 20px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 20px;
+  font-weight: normal;
+  overflow: hidden;
+  font-size: 16px;
+  z-index: 999;
+  width: 100%;
+}
+
+.banner-container-info {
+  /* Additional padding as opposed to the rest to accomodate dismiss button */
+  padding: 12px 50px 12px 20px;
+  background-color: #1e3e84;
+  color: #f0f4f6;
+}
+
+.banner-container-info a {
+  color: #f0f4f6;
+}
+
+.banner-container a {
+  text-decoration: underline;
+  cursor: pointer;
+  font-weight: normal;
+}
+
+.banner-container-warn {
+  background-color: #ffe47a;
+  color: #323232;
+}
+
+.banner-container-warn a {
+  color: #323232;
+}
+
+.banner-container-error {
+  background-color: #a94442;
+  color: #fff;
+}
+
+.banner-container-error a {
+  color: #fff;
+}
+
+.banner-container div {
+  display: inline-block;
+}
+
+.banner-container #dismiss {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 50px;
+  cursor: pointer;
+}
diff --git a/src/public/modules/core/css/core.css b/src/public/modules/core/css/core.css
index 38e7a2287e..612671eacb 100755
--- a/src/public/modules/core/css/core.css
+++ b/src/public/modules/core/css/core.css
@@ -1,3 +1,10 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 /* Global Variables */
 
 a {
@@ -12,8 +19,13 @@ input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 30px white inset !important;
 }
 
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
 body {
-  overflow-x: hidden;
   font-family: 'Muli', sans-serif;
   font-size: 16px;
   overscroll-behavior-y: none;
@@ -25,6 +37,17 @@ body {
   float: none;
 }
 
+.page-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  height: 100vh;
+}
+
 /* ====================================================== */
 
 /* Custom CSS for Buttons */
@@ -132,6 +155,7 @@ textarea.input-custom {
 
 .input-custom:focus {
   border: solid 2px #2f60ce;
+  -webkit-box-shadow: none;
   box-shadow: none;
   outline: none;
 }
@@ -141,20 +165,34 @@ textarea.input-custom {
   border: solid 1px #ccc;
 }
 
-.input-custom::placeholder {
+.input-custom::-webkit-input-placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #b8b8b8;
+  opacity: 1; /* Firefox */
+}
+
+.input-custom::-moz-placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #b8b8b8;
   opacity: 1; /* Firefox */
 }
 
 .input-custom:-ms-input-placeholder {
-  /* Internet Explorer 10-11 */
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #b8b8b8;
+  opacity: 1; /* Firefox */
 }
 
 .input-custom::-ms-input-placeholder {
-  /* Microsoft Edge */
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #b8b8b8;
+  opacity: 1; /* Firefox */
+}
+
+.input-custom::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #b8b8b8;
+  opacity: 1; /* Firefox */
 }
 
 /* ====================================================== */
@@ -302,6 +340,8 @@ button.btn-delete > .bx-trash {
   padding: 2px;
   border-radius: 23px;
   background-color: #dcdcdc;
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   margin-bottom: 0;
 }
@@ -316,9 +356,17 @@ button.btn-delete > .bx-trash {
   width: 30px;
   background-color: white;
   border-radius: 50%;
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
   border: solid 1px #b8b8b8;
   color: #b8b8b8;
@@ -344,6 +392,8 @@ button.btn-delete > .bx-trash {
 }
 
 .toggle-selector-on .toggle-selector-switch {
+  -webkit-transform: translateX(101%);
+  -ms-transform: translateX(101%);
   transform: translateX(101%);
   border: solid 1px #07926e;
   color: #07926e;
@@ -546,6 +596,7 @@ body #toast-container > div {
 }
 
 body #toast-container > div:hover {
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
@@ -574,7 +625,11 @@ body #toast-container .toast .toast-message .toast-custom-icon {
   left: 10px;
   font-size: 35px;
   height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -646,8 +701,14 @@ i.glyphicon-question-sign {
   width: 100%;
   background-color: rgba(255, 255, 255, 0.7);
   z-index: 1000;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
 }
 
diff --git a/src/public/modules/core/css/landing.css b/src/public/modules/core/css/landing.css
index e59110d2cd..a9f79cb519 100644
--- a/src/public/modules/core/css/landing.css
+++ b/src/public/modules/core/css/landing.css
@@ -802,49 +802,3 @@
 #landing #landing-footer #footer-links span {
   float: right;
 }
-
-/* BANNER COMPONENT */
-
-banner-component {
-  position: fixed;
-  font-size: 16px;
-  z-index: 10;
-  width: 100%;
-  bottom: 0;
-}
-
-.banner-container {
-  display: flex;
-  padding: 12px 50px 12px 20px;
-  background-color: #1e3e84;
-  align-items: center;
-  justify-content: center;
-  color: #f0f4f6;
-  line-height: 20px;
-  font-weight: 100;
-  width: 100%;
-  overflow: hidden;
-}
-
-.banner-container div {
-  display: inline-block;
-}
-
-.banner-container #dismiss {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  right: 0;
-  top: 0;
-  height: 100%;
-  width: 50px;
-  cursor: pointer;
-}
-
-.banner-container a {
-  color: #f0f4f6;
-  text-decoration: underline;
-  cursor: pointer;
-  font-weight: normal;
-}
diff --git a/src/public/modules/forms/admin/controllers/list-forms.client.controller.js b/src/public/modules/forms/admin/controllers/list-forms.client.controller.js
index 253be9a92e..b0e17f4fe2 100644
--- a/src/public/modules/forms/admin/controllers/list-forms.client.controller.js
+++ b/src/public/modules/forms/admin/controllers/list-forms.client.controller.js
@@ -152,12 +152,6 @@ function ListFormsController(
     vm.showFormBtns[formId] = true
   }
 
-  // Hide form buttons if area
-  // outside form buttons is clicked
-  vm.closeListFormModal = () => {
-    vm.clearFormBtns()
-  }
-
   vm.clearFormBtns = () => {
     vm.showFormBtns = []
   }
diff --git a/src/public/modules/forms/admin/controllers/view-responses.client.controller.js b/src/public/modules/forms/admin/controllers/view-responses.client.controller.js
index eceab09d5d..ee240516b3 100644
--- a/src/public/modules/forms/admin/controllers/view-responses.client.controller.js
+++ b/src/public/modules/forms/admin/controllers/view-responses.client.controller.js
@@ -16,6 +16,8 @@ angular
     'Toastr',
     '$uibModal',
     '$timeout',
+    '$location',
+    '$anchorScroll',
     'moment',
     'FormSgSdk',
     ViewResponsesController,
@@ -29,6 +31,8 @@ function ViewResponsesController(
   Toastr,
   $uibModal,
   $timeout,
+  $location,
+  $anchorScroll,
   moment,
   FormSgSdk,
 ) {
@@ -100,6 +104,18 @@ function ViewResponsesController(
     },
   }
 
+  // Function to use $anchorScroll to scroll to top of responses.
+  vm.scrollToTop = function () {
+    // set the location.hash
+    $location.hash('responses-tab')
+
+    $anchorScroll()
+
+    // Remove hash
+    $location.hash('')
+    $location.replace()
+  }
+
   // Trigger for export CSV
   vm.exportCsv = function () {
     let params = {
@@ -261,6 +277,7 @@ function ViewResponsesController(
   }
 
   vm.nextRespondent = function () {
+    vm.scrollToTop()
     if (vm.currentResponse.number <= 1) {
       // This is the last response
     } else if (vm.currentResponse.index >= vm.tableParams.data.length - 1) {
@@ -281,6 +298,7 @@ function ViewResponsesController(
   }
 
   vm.previousRespondent = function () {
+    vm.scrollToTop()
     if (vm.currentResponse.number >= vm.responsesCount) {
       // This is the first response
     } else if (vm.currentResponse.index <= 0) {
diff --git a/src/public/modules/forms/admin/css/edit-form.css b/src/public/modules/forms/admin/css/edit-form.css
index 1f1ef33a27..efd11156d8 100644
--- a/src/public/modules/forms/admin/css/edit-form.css
+++ b/src/public/modules/forms/admin/css/edit-form.css
@@ -1,3 +1,10 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 .modal-body {
   overflow-x: hidden;
 }
@@ -7,6 +14,44 @@
   margin: auto;
 }
 
+#admin-form .admin-form-content .tab-content .tab-pane .logic-container,
+#admin-form .admin-form-content .tab-content .tab-pane .settings-container,
+#admin-form .admin-form-content .tab-content .tab-pane .share-container,
+#admin-form .admin-form-content .tab-content .tab-pane .results-container,
+#admin-form .admin-form-content .tab-content .tab-pane .build-container {
+  overflow: auto;
+  height: 100%;
+}
+
+#admin-form .admin-form-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: column;
+  flex-flow: column;
+
+  /* Height of header and navbar */
+  height: calc(100% - 135px);
+}
+
+#admin-form .admin-form-content .nav-pills {
+  -webkit-box-flex: 0;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+}
+
+#admin-form .admin-form-content .tab-content {
+  height: 100%;
+
+  /* overflow: hidden; */
+}
+
+#admin-form .admin-form-content .tab-content .tab-pane {
+  height: 100%;
+}
+
 /* Left/bottom side of edit form: Add field icons */
 
 @media not all and (min-width: 768px) {
@@ -22,9 +67,9 @@
 
 @media all and (min-width: 768px) {
   #admin-form #current-fields {
-    height: calc(100vh - 135px);
-    overflow-y: scroll;
     padding: 45px 10% 45px 10%;
+    overflow: auto;
+    height: 100%;
   }
 
   #admin-form #current-fields .current-field-item .current-field-title {
@@ -37,9 +82,9 @@
 #admin-form #add-field {
   float: left;
   width: 270px;
-  height: calc(100vh - 135px);
   overflow-y: scroll;
   background-color: #f0f4f6;
+  height: 100%;
 }
 
 #admin-form #add-field #myinfo-disable-screen .myinfo-storage-overlay {
@@ -53,7 +98,6 @@
   background-color: rgba(77, 104, 117, 0.9);
   color: white;
   padding: 168px 40px 168px 40px;
-  margin: -20px -11px -20px -11px;
 }
 
 #admin-form #add-field #myinfo-disable-screen a {
@@ -67,16 +111,18 @@
 #admin-form #add-field .myinfo-category {
   font-size: 13px;
   margin-left: 5px;
-  margin-bottom: 15px;
+  margin-bottom: 13px;
 }
 
 #admin-form #add-field hr {
   border: solid 1px #dee7eb;
-  margin-left: 5px;
+  margin: 0 13px;
 }
 
 #admin-form #add-field .nav-tabs {
   width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -109,13 +155,10 @@
   border-bottom: 3px solid white;
 }
 
-#admin-form #add-field .tab-content {
-  padding: 20px 8px;
-}
-
 #admin-form #add-field .tab-content .tab-pane .row {
   margin-left: 0;
   margin-right: 0;
+  padding: 20px 8px;
 }
 
 #admin-form #add-field .add-field-panel {
@@ -202,8 +245,14 @@
 #admin-form #add-field-mobile #add-field-btn {
   position: fixed;
   z-index: 50;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
   bottom: 10px;
@@ -242,6 +291,8 @@
 
 #add-field-modal .nav-tabs {
   width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -278,8 +329,13 @@
 }
 
 #add-field-modal .add-field-modal-panel {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
 }
 
@@ -323,8 +379,14 @@
   bottom: 30px;
   left: calc(50% - 25px);
   z-index: 2000;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
   color: #fff;
   font-size: 25px;
@@ -371,7 +433,11 @@
 
 #admin-form #current-fields .start-end-item {
   text-align: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
   font-size: 18px;
   line-height: 1.22;
@@ -379,11 +445,19 @@
 }
 
 #admin-form #current-fields .current-field-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
   flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
   height: 60px;
   border: solid 1px #23489b;
+  -webkit-box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.1);
   padding: 0 17px 0 17px;
   background-color: #fff;
@@ -427,6 +501,8 @@
   .current-field-item
   .current-field-icon
   *:first-child {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -435,6 +511,7 @@
   line-height: 1.22;
   color: #4a4a4a;
   overflow: hidden;
+  -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -442,7 +519,11 @@
 #admin-form #current-fields .current-field-item .current-field-options,
 #admin-form #current-fields .current-field-item .current-field-opt-icon-group {
   margin-left: auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -454,8 +535,14 @@
   background: none;
   border: none;
   outline: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
 }
 
@@ -467,8 +554,14 @@
   font-size: 10px;
   color: #767676;
   background-color: #f0f0f0;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -517,6 +610,7 @@
 
 #admin-form #current-fields .current-field-hidden {
   border: 1px solid #dcdcdc;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
@@ -529,6 +623,7 @@
 
 #admin-form #edit-form {
   background-color: #fff;
+  height: 100%;
 }
 
 .edit-modal-window .modal-dialog {
@@ -547,7 +642,11 @@
 }
 
 .full-page-modal .modal-header > .modal-title {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -572,6 +671,7 @@
   border: none;
   border-radius: 0;
   overflow: auto;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
@@ -606,7 +706,11 @@
   > .modal-content
   > .modal-body
   .preview-field-panel {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
   background-color: white;
   padding-top: 50px;
@@ -696,6 +800,8 @@
 }
 
 .edit-modal-window .modal-body > .row {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -840,6 +946,8 @@
   position: absolute;
   bottom: 0;
   left: 0;
+  -webkit-transform: translate(-10px, 7px);
+  -ms-transform: translate(-10px, 7px);
   transform: translate(-10px, 7px);
 }
 
@@ -945,7 +1053,11 @@
 }
 
 .edit-modal-window .edit-panel .table-column-title {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
   padding-bottom: 10px;
 }
@@ -1002,7 +1114,10 @@
 /* Color options on Edit Start Page modal */
 
 .color-field {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -ms-flex-pack: distribute;
   justify-content: space-around;
 }
 
@@ -1032,6 +1147,8 @@
 }
 
 .color-field .selected-color-field {
+  -webkit-transform: scale(1.2);
+  -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
@@ -1169,7 +1286,11 @@ a.modal-cancel-btn:hover {
 /* Components */
 
 .toggle-option {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -1201,15 +1322,27 @@ a.modal-cancel-btn:hover {
 /* Image */
 
 #upload-image {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
   flex-direction: row;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
   justify-content: space-between;
   border: solid 1px #b8b8b8;
   background-color: #fff;
 }
 
 #image-details {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
   flex-direction: column;
   padding: 14px 0 14px 20px;
 }
@@ -1225,7 +1358,11 @@ a.modal-cancel-btn:hover {
 }
 
 #upload-button-footer {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 4px;
   margin-bottom: 8px;
@@ -1244,7 +1381,11 @@ a.modal-cancel-btn:hover {
 }
 
 #remove-image {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
   padding: 0 20px;
 }
diff --git a/src/public/modules/forms/admin/css/list-forms.css b/src/public/modules/forms/admin/css/list-forms.css
index 799684d78d..414f1eb099 100644
--- a/src/public/modules/forms/admin/css/list-forms.css
+++ b/src/public/modules/forms/admin/css/list-forms.css
@@ -1,22 +1,34 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 /* List forms */
 
 #list-tab {
-  min-height: 100vh;
   width: 100%;
+  height: 100%;
   background-color: #f0f4f6;
   overflow-x: hidden;
 }
 
 #list-form #list-form-exist #list-form-overlay {
   position: absolute;
-  width: 90%;
-  height: 90%;
+
+  /* Huge width in addition to negative left positioning allows for both sides
+  of the form to be covered */
+  width: 150vw;
+  left: -50%;
+  height: 100%;
   z-index: 0;
 }
 
 #list-form {
   z-index: 100;
   padding-bottom: 50px;
+  position: relative;
 }
 
 /* Welcome message */
@@ -43,6 +55,7 @@
 #list-form #list-form-exist .form-item {
   text-align: center;
   background-color: #fff;
+  -webkit-box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.1);
 
   /* Transparent border so content is not
@@ -74,6 +87,8 @@
 
 /* Mouseover behavior */
 #list-form #list-form-exist .form-item#create-new:hover {
+  -webkit-transition: all 0.2s;
+  -o-transition: all 0.2s;
   transition: all 0.2s;
   background-color: #82a0e2;
   cursor: pointer;
@@ -87,6 +102,8 @@
 #list-form #list-form-exist .form-item:not(#create-new).active {
   background-color: #04aa80;
   cursor: pointer;
+  -webkit-transition: all 0.5s;
+  -o-transition: all 0.5s;
   transition: all 0.5s;
   opacity: 1;
   border: solid 3px #07926e;
@@ -118,6 +135,7 @@
   color: #323232;
   padding: 0 15px 10px 15px;
   overflow: hidden;
+  -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
 
@@ -250,8 +268,15 @@
 /* Small screen sizes */
 @media not all and (min-width: 768px) {
   #list-form #list-form-exist {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
     justify-content: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
   }
 
diff --git a/src/public/modules/forms/admin/directiveViews/edit-form.client.view.html b/src/public/modules/forms/admin/directiveViews/edit-form.client.view.html
index f4059c7a3b..19c9bf13fa 100644
--- a/src/public/modules/forms/admin/directiveViews/edit-form.client.view.html
+++ b/src/public/modules/forms/admin/directiveViews/edit-form.client.view.html
@@ -38,8 +38,8 @@
         <uib-tab-heading> MyInfo </uib-tab-heading>
         <!-- Only show fields if form type is not storage form -->
         <div ng-if="myform.authType==='SP' && !isStorageForm">
-          <div class="myinfo-category">PERSONAL</div>
           <div class="row">
+            <div class="myinfo-category">PERSONAL</div>
             <div
               class="col-sm-6 col-md-6 col-lg-6 col-xl-6 add-field-panel"
               ng-repeat="type in addField.myInfoTypes | filter: { category: 'personal'}"
@@ -62,8 +62,8 @@
 
           <hr />
 
-          <div class="myinfo-category">CONTACT</div>
           <div class="row">
+            <div class="myinfo-category">CONTACT</div>
             <div
               class="col-sm-6 col-md-6 col-lg-6 col-xl-6 add-field-panel"
               ng-repeat="type in addField.myInfoTypes | filter: { category: 'contact'}"
@@ -84,8 +84,8 @@
 
           <hr />
 
-          <div class="myinfo-category">EMPLOYMENT & EDUCATION</div>
           <div class="row">
+            <div class="myinfo-category">EMPLOYMENT & EDUCATION</div>
             <div
               class="col-sm-6 col-md-6 col-lg-6 col-xl-6 add-field-panel"
               ng-repeat="type in addField.myInfoTypes | filter: { category: 'employment_education'}"
@@ -106,8 +106,8 @@
 
           <hr />
 
-          <div class="myinfo-category">FAMILY</div>
           <div class="row">
+            <div class="myinfo-category">FAMILY</div>
             <div
               class="col-sm-6 col-md-6 col-lg-6 col-xl-6 add-field-panel"
               ng-repeat="type in addField.myInfoTypes | filter: { category: 'family'}"
diff --git a/src/public/modules/forms/admin/directives/scroll-to-id.client.directive.js b/src/public/modules/forms/admin/directives/scroll-to-id.client.directive.js
deleted file mode 100644
index 5d2ed5e22a..0000000000
--- a/src/public/modules/forms/admin/directives/scroll-to-id.client.directive.js
+++ /dev/null
@@ -1,18 +0,0 @@
-angular.module('forms').directive('scrollToId', scrollToId)
-
-function scrollToId() {
-  return {
-    restrict: 'A',
-    scope: {
-      scrollTo: '@',
-    },
-    link: function (scope, $elm, _attr) {
-      $elm.on('click', function () {
-        $('html,body').animate(
-          { scrollTop: $(scope.scrollTo).offset().top },
-          'fast',
-        )
-      })
-    },
-  }
-}
diff --git a/src/public/modules/forms/admin/views/admin-form.client.view.html b/src/public/modules/forms/admin/views/admin-form.client.view.html
index 39d19f2283..545202e871 100644
--- a/src/public/modules/forms/admin/views/admin-form.client.view.html
+++ b/src/public/modules/forms/admin/views/admin-form.client.view.html
@@ -1,55 +1,59 @@
-<banner-component message="bannerContent | linky"></banner-component>
-<section id="admin-form" class="container" ng-if="user">
-  <!-- Header -->
-  <div id="form-header" class="vcenter">
-    <div id="header-myforms" class="col-md-2 col-sm-3 col-xs-4">
-      <a ui-sref="listForms" class="left-spacer">
-        <i class="bx bx-arrow-back bx-lg icon-spacing back-arrow"></i>
-        <span id="myforms-text" class="hidden-xs">My Forms</span>
-      </a>
-    </div>
-    <div class="col-md-8 col-sm-6 col-xs-4">
-      <p id="header-title">{{myform.title}}</p>
-      <p id="header-last-saved">Saved at {{lastModifiedString}}</p>
-    </div>
-    <div id="header-addcollab" class="col-md-2 col-sm-3 col-xs-4">
-      <div class="right-spacer">
-        <button
-          id="collab-circle-plus"
-          class="pull-right"
-          ng-click="toggleCollabModal()"
-          ng-if="user !== undefined"
-        >
-          <i class="bx bxs-user-plus bx-lg hidden-xs"></i>
-          <i
-            class="bx bxs-user-plus bx-md hidden-sm hidden-md hidden-lg hidden-xl"
-          ></i>
-        </button>
-        <avatar-dropdown-component></avatar-dropdown-component>
+<div class="page-container">
+  <banner-component message="bannerContent | linky"></banner-component>
+  <section id="admin-form" class="container" ng-if="user">
+    <!-- Header -->
+    <div id="form-header" class="vcenter">
+      <div id="header-myforms" class="col-md-2 col-sm-3 col-xs-4">
+        <a ui-sref="listForms" class="left-spacer">
+          <i class="bx bx-arrow-back bx-lg icon-spacing back-arrow"></i>
+          <span id="myforms-text" class="hidden-xs">My Forms</span>
+        </a>
       </div>
-    </div>
-  </div>
-  <script></script>
-
-  <!-- Main window with tabs -->
-  <uib-tabset type="pills">
-    <div id="admin-tab-bar">
-      <div id="admin-tabs-container" drag-scroll="true">
-        <uib-tab ng-repeat="viewTab in viewTabs" heading="{{viewTab.title}}">
-          <div ui-view="{{viewTab.route}}"></div>
-        </uib-tab>
+      <div class="col-md-8 col-sm-6 col-xs-4">
+        <p id="header-title">{{myform.title}}</p>
+        <p id="header-last-saved">Saved at {{lastModifiedString}}</p>
       </div>
-      <!-- Preview button -->
-      <div id="preview-admin-tabs">
-        <a
-          id="preview-form-btn"
-          ui-sref="previewForm({ formId: myform._id })"
-          target="_blank"
-        >
-          <i id="preview-form-eye" class="bx bx-show"></i>
-          <span id="preview-form-text" class="hidden-xs">Preview</span>
-        </a>
+      <div id="header-addcollab" class="col-md-2 col-sm-3 col-xs-4">
+        <div class="right-spacer">
+          <button
+            id="collab-circle-plus"
+            class="pull-right"
+            ng-click="toggleCollabModal()"
+            ng-if="user !== undefined"
+          >
+            <i class="bx bxs-user-plus bx-lg hidden-xs"></i>
+            <i
+              class="bx bxs-user-plus bx-md hidden-sm hidden-md hidden-lg hidden-xl"
+            ></i>
+          </button>
+          <avatar-dropdown-component></avatar-dropdown-component>
+        </div>
       </div>
     </div>
-  </uib-tabset>
-</section>
+
+    <!-- Main window with tabs -->
+    <uib-tabset class="admin-form-content" type="pills">
+      <div id="admin-tab-bar">
+        <div id="admin-tabs-container" drag-scroll="true">
+          <uib-tab ng-repeat="viewTab in viewTabs" heading="{{viewTab.title}}">
+            <div
+              class="{{viewTab.route}}-container"
+              ui-view="{{viewTab.route}}"
+            ></div>
+          </uib-tab>
+        </div>
+        <!-- Preview button -->
+        <div id="preview-admin-tabs">
+          <a
+            id="preview-form-btn"
+            ui-sref="previewForm({ formId: myform._id })"
+            target="_blank"
+          >
+            <i id="preview-form-eye" class="bx bx-show"></i>
+            <span id="preview-form-text" class="hidden-xs">Preview</span>
+          </a>
+        </div>
+      </div>
+    </uib-tabset>
+  </section>
+</div>
diff --git a/src/public/modules/forms/admin/views/list-forms.client.view.html b/src/public/modules/forms/admin/views/list-forms.client.view.html
index a8f2ebaa90..0bf7be60b9 100644
--- a/src/public/modules/forms/admin/views/list-forms.client.view.html
+++ b/src/public/modules/forms/admin/views/list-forms.client.view.html
@@ -1,119 +1,125 @@
-<banner-component message="vm.bannerContent | linky"></banner-component>
-<navbar-component></navbar-component>
+<div class="page-container">
+  <banner-component message="vm.bannerContent | linky"></banner-component>
+  <navbar-component></navbar-component>
 
-<div id="list-tab">
-  <section data-ng-init="vm.listForms()" class="container">
-    <div id="list-form" class="row" ng-if="vm.user">
-      <!-- When forms have already been created -->
-      <div id="list-form-exist" ng-if="vm.myforms.length > 0">
-        <div
-          id="list-form-overlay"
-          ng-click="vm.closeListFormModal()"
-          ng-aria-disable
-        ></div>
-        <!-- Welcome message -->
-        <div id="welcome" class="row">Welcome back, {{vm.userName}}</div>
+  <div id="list-tab">
+    <section data-ng-init="vm.listForms()">
+      <div id="list-form" class="container" ng-if="vm.user">
+        <!-- When forms have already been created -->
+        <div id="list-form-exist" ng-if="vm.myforms.length > 0">
+          <div
+            id="list-form-overlay"
+            ng-click="vm.clearFormBtns()"
+            ng-aria-disable
+          ></div>
 
-        <!-- Form item for Create New Form -->
-        <div
-          ng-click="vm.openCreateModal(); vm.clearFormBtns()"
-          id="create-new"
-          class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-1 col-md-3 col-md-offset-1 form-item"
-        >
-          <span id="create-plus" class="bx bx-plus"></span>
-          <span id="create-plus-text">Create new form</span>
-        </div>
+          <!-- Welcome message -->
+          <div id="welcome" class="row">Welcome back, {{vm.userName}}</div>
 
-        <!-- List of forms  -->
-        <div
-          ng-repeat="form in vm.myforms"
-          data-formid="{{form._id}}"
-          class="col-xs-10 col-sm-4 col-sm-offset-1 col-md-3 col-md-offset-1 form-item"
-          ng-class="{'inactive': form.status!=='PUBLIC', 'active': vm.showFormBtns[form._id], 'duplicated': vm.duplicatedForms[form._id]}"
-          ng-click="vm.editForm(form)"
-        >
-          <!-- Top part of form item with text -->
-          <div class="form-text">
-            <div class="form-name" id="content-desktop">
-              {{form.title | limitTo: 24}}{{form.title.length > 24 ? '...' :
-              ''}}
-            </div>
-            <div class="form-name" id="content-mobile">{{form.title}}</div>
-            <div class="form-lastupdated">{{form.lastModifiedString}}</div>
-            <div class="form-islive" ng-if="form.status==='PUBLIC'">
-              Published
-            </div>
-            <div class="form-islive" ng-if="form.status==='PRIVATE'">
-              Inactive
-            </div>
+          <!-- Form item for Create New Form -->
+          <div
+            ng-click="vm.openCreateModal(); vm.clearFormBtns()"
+            id="create-new"
+            class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-1 col-md-3 col-md-offset-1 form-item"
+          >
+            <span id="create-plus" class="bx bx-plus"></span>
+            <span id="create-plus-text">Create new form</span>
           </div>
-          <!-- Bottom part of form item with buttons -->
+
+          <!-- List of forms  -->
           <div
-            class="form-btns"
-            ng-click="vm.viewFormBtns(form._id); $event.stopPropagation()"
+            ng-repeat="form in vm.myforms"
+            data-formid="{{form._id}}"
+            class="col-xs-10 col-sm-4 col-sm-offset-1 col-md-3 col-md-offset-1 form-item"
+            ng-class="{'inactive': form.status!=='PUBLIC', 'active': vm.showFormBtns[form._id], 'duplicated': vm.duplicatedForms[form._id]}"
+            ng-click="vm.editForm(form)"
           >
-            <!-- Hidden buttons that appear only after more is clicked -->
-            <div ng-hide="!vm.showFormBtns[form._id]" class="form-btns-hidden">
-              <i
-                class="bx bx-trash form-btn-trash"
-                ng-click="vm.openDeleteModal($index)"
-                ng-hide="vm.user._id !== form.admin._id"
-                uib-tooltip="DELETE"
-                tooltip-trigger="'click mouseenter'"
-              ></i>
+            <!-- Top part of form item with text -->
+            <div class="form-text">
+              <div class="form-name" id="content-desktop">
+                {{form.title | limitTo: 24}}{{form.title.length > 24 ? '...' :
+                ''}}
+              </div>
+              <div class="form-name" id="content-mobile">{{form.title}}</div>
+              <div class="form-lastupdated">{{form.lastModifiedString}}</div>
+              <div class="form-islive" ng-if="form.status==='PUBLIC'">
+                Published
+              </div>
+              <div class="form-islive" ng-if="form.status==='PRIVATE'">
+                Inactive
+              </div>
+            </div>
+            <!-- Bottom part of form item with buttons -->
+            <div
+              class="form-btns"
+              ng-click="vm.viewFormBtns(form._id); $event.stopPropagation()"
+            >
+              <!-- Hidden buttons that appear only after more is clicked -->
+              <div
+                ng-hide="!vm.showFormBtns[form._id]"
+                class="form-btns-hidden"
+              >
+                <i
+                  class="bx bx-trash form-btn-trash"
+                  ng-click="vm.openDeleteModal($index)"
+                  ng-hide="vm.user._id !== form.admin._id"
+                  uib-tooltip="DELETE"
+                  tooltip-trigger="'click mouseenter'"
+                ></i>
+                <i
+                  class="bx bx-duplicate form-btn-copy"
+                  ng-click="vm.duplicateForm($index)"
+                  uib-tooltip="DUPLICATE"
+                  tooltip-trigger="'click mouseenter'"
+                ></i>
+                <a ui-sref="viewForm({formId: form._id})"
+                  ><i
+                    class="bx bx-pencil form-btn-edit"
+                    uib-tooltip="EDIT"
+                    tooltip-trigger="'click mouseenter'"
+                  ></i
+                ></a>
+              </div>
+              <!-- More button to open hidden buttons and make form item active -->
               <i
-                class="bx bx-duplicate form-btn-copy"
-                ng-click="vm.duplicateForm($index)"
-                uib-tooltip="DUPLICATE"
-                tooltip-trigger="'click mouseenter'"
+                ng-if="!vm.showFormBtns[form._id]"
+                class="bx bx-dots-horizontal-rounded form-btn-more"
               ></i>
-              <a ui-sref="viewForm({formId: form._id})"
-                ><i
-                  class="bx bx-pencil form-btn-edit"
-                  uib-tooltip="EDIT"
-                  tooltip-trigger="'click mouseenter'"
-                ></i
-              ></a>
             </div>
-            <!-- More button to open hidden buttons and make form item active -->
-            <i
-              ng-if="!vm.showFormBtns[form._id]"
-              class="bx bx-dots-horizontal-rounded form-btn-more"
-            ></i>
           </div>
         </div>
-      </div>
 
-      <!-- When there are no forms yet -->
-      <div ng-if="vm.myforms.length === 0" id="welcome-placeholder">
-        <div class="row">
-          <div class="col-sm-6 col-xs-12">
-            <div id="welcome">Welcome {{vm.userName}}</div>
+        <!-- When there are no forms yet -->
+        <div ng-if="vm.myforms.length === 0" id="welcome-placeholder">
+          <div class="row">
+            <div class="col-sm-6 col-xs-12">
+              <div id="welcome">Welcome {{vm.userName}}</div>
+              <img
+                id="welcome-image"
+                class="hidden-sm hidden-md hidden-lg"
+                src="/public/modules/core/img/build-illustration.svg"
+              />
+              <div id="welcome-message">
+                Your dashboard seems empty. Start creating a new form or view
+                some examples below.
+              </div>
+              <button
+                id="welcome-btn"
+                ng-click="vm.openCreateModal()"
+                class="btn-custom btn-medium"
+              >
+                Create New Form
+              </button>
+            </div>
             <img
               id="welcome-image"
-              class="hidden-sm hidden-md hidden-lg"
+              class="col-sm-6 hidden-xs"
               src="/public/modules/core/img/build-illustration.svg"
             />
-            <div id="welcome-message">
-              Your dashboard seems empty. Start creating a new form or view some
-              examples below.
-            </div>
-            <button
-              id="welcome-btn"
-              ng-click="vm.openCreateModal()"
-              class="btn-custom btn-medium"
-            >
-              Create New Form
-            </button>
           </div>
-          <img
-            id="welcome-image"
-            class="col-sm-6 hidden-xs"
-            src="/public/modules/core/img/build-illustration.svg"
-          />
+          <div id="divider"></div>
         </div>
-        <div id="divider"></div>
       </div>
-    </div>
-  </section>
+    </section>
+  </div>
 </div>
diff --git a/src/public/modules/forms/admin/views/view-responses.client.view.html b/src/public/modules/forms/admin/views/view-responses.client.view.html
index 5e9671e07c..8a1c4676b5 100644
--- a/src/public/modules/forms/admin/views/view-responses.client.view.html
+++ b/src/public/modules/forms/admin/views/view-responses.client.view.html
@@ -125,8 +125,6 @@
           </div>
           <div id="next-previous">
             <button
-              scroll-to-id
-              scroll-to="#responses-tab"
               class="btn-custom btn-small btn-respondent"
               ng-click="vm.previousRespondent()"
               ng-disabled="vm.currentResponse.number >= vm.responsesCount"
@@ -134,8 +132,6 @@
               <i class="bx bx-chevron-left bx-lg"></i>
             </button>
             <button
-              scroll-to-id
-              scroll-to="#responses-tab"
               class="btn-custom btn-small btn-respondent"
               ng-click="vm.nextRespondent()"
               ng-disabled="vm.currentResponse.number <= 1"
diff --git a/src/public/modules/forms/base/components/start-page.client.component.js b/src/public/modules/forms/base/components/start-page.client.component.js
index c484976e8f..02336e4589 100644
--- a/src/public/modules/forms/base/components/start-page.client.component.js
+++ b/src/public/modules/forms/base/components/start-page.client.component.js
@@ -58,7 +58,7 @@ function startPageController(SpcpSession, Toastr) {
     if ($('#start-page-container').length) {
       let elementTop = $('#start-page-container').offset().top
       let elementBottom =
-        elementTop + $('#start-page-container').outerHeight() - 110
+        elementTop + $('#start-page-container').outerHeight() - 80
       let viewportTop = $(window).scrollTop()
       let viewportBottom = viewportTop + $(window).height()
       return elementBottom > viewportTop && elementTop < viewportBottom
@@ -75,6 +75,11 @@ function startPageController(SpcpSession, Toastr) {
       return
     }
 
+    const banner = document.getElementById('notification-banner')
+    const bannerHeight = banner ? `${banner.offsetHeight + 20}px` : '0px'
+    // Update height of header
+    header.style.paddingTop = bannerHeight
+
     if (isInViewport()) {
       header.style.visibility = 'hidden'
     } else {
diff --git a/src/public/modules/forms/base/css/base-form.css b/src/public/modules/forms/base/css/base-form.css
index 2bc565b60c..be6929756e 100644
--- a/src/public/modules/forms/base/css/base-form.css
+++ b/src/public/modules/forms/base/css/base-form.css
@@ -1,3 +1,10 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 /* Standardised padding */
 
 #admin-form #edit-logic,
@@ -20,7 +27,11 @@
   background-color: #2f60ce;
   white-space: nowrap;
   height: 53px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
   justify-content: flex-end;
 }
 
@@ -73,6 +84,8 @@
 }
 
 #preview-admin-tabs #preview-form-btn {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
   float: right;
   white-space: nowrap;
@@ -80,6 +93,7 @@
   background-color: #82a0e2;
   border: none;
   color: white;
+  -webkit-text-decoration-line: none;
   text-decoration-line: none;
   font-weight: bold;
   text-transform: uppercase;
@@ -145,9 +159,20 @@
 /* Datepicker styles */
 
 div[uib-datepicker] {
+  -webkit-animation: datepicker-fade-in 0.4s ease;
   animation: datepicker-fade-in 0.4s ease;
 }
 
+@-webkit-keyframes datepicker-fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes datepicker-fade-in {
   0% {
     opacity: 0;
@@ -216,6 +241,7 @@ ul.dropdown-menu[uib-datepicker-popup-wrap] {
   background-position: right 8px center;
   border: 1px solid #ccc;
   border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
 }
 
@@ -234,14 +260,21 @@ ul.dropdown-menu[uib-datepicker-popup-wrap] {
   border-width: 1px 0;
 }
 
-#admin-form {
-  min-height: 100vh;
-}
-
 #admin-form.container {
-  margin: 0;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   width: 100%;
   padding: 0;
+  overflow-y: hidden;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  height: 100vh;
 }
 
 #admin-form .form-controls .row {
@@ -345,12 +378,18 @@ ul.dropdown-menu[uib-datepicker-popup-wrap] {
   font-size: 0.9em;
   height: 42px;
   color: #a94442;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 
 @media not all and (min-width: 1200px) {
   .save-changes-err {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
     justify-content: center;
     margin-top: 10px;
     text-align: center;
diff --git a/src/public/modules/forms/base/css/start-end-page.css b/src/public/modules/forms/base/css/start-end-page.css
index c830e66b09..33476ca2d5 100644
--- a/src/public/modules/forms/base/css/start-end-page.css
+++ b/src/public/modules/forms/base/css/start-end-page.css
@@ -126,12 +126,11 @@
 /* Page Header */
 
 #start-page-header {
+  padding: 20px 0;
   position: fixed;
   z-index: 99;
   top: 0;
   width: 100%;
-  height: 70px;
-  max-height: 20vh;
   display: flex;
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
diff --git a/src/public/modules/users/css/billing.css b/src/public/modules/users/css/billing.css
index 30c8e48dfc..e0d544bffa 100644
--- a/src/public/modules/users/css/billing.css
+++ b/src/public/modules/users/css/billing.css
@@ -1,6 +1,6 @@
 #billing-tab {
-  min-height: 100vh;
   width: 100%;
+  height: 100%;
   background-color: #f0f4f6;
   overflow-x: hidden;
 }
diff --git a/src/public/modules/users/css/examples-list.css b/src/public/modules/users/css/examples-list.css
index 549751365f..2233fed995 100644
--- a/src/public/modules/users/css/examples-list.css
+++ b/src/public/modules/users/css/examples-list.css
@@ -1,6 +1,6 @@
 #examples-tab {
-  min-height: 100vh;
   width: 100%;
+  height: 100%;
   background-color: #f0f4f6;
   overflow-x: hidden;
 }
diff --git a/src/public/modules/users/css/sign-in.css b/src/public/modules/users/css/sign-in.css
index a70e78705e..3fb1c4018c 100755
--- a/src/public/modules/users/css/sign-in.css
+++ b/src/public/modules/users/css/sign-in.css
@@ -1,19 +1,51 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 #sign-in {
+  height: 100vh;
   background-color: #fff;
 }
 
 /* CSS shared by Email and OTP section */
 
 #sign-in .input-box {
-  height: 100vh;
-  width: 100vw;
+  min-height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+  position: relative;
 }
 
 #sign-in .input-container {
-  max-width: 100%;
-  padding-left: 10px;
-  padding-right: 20px;
+  height: 100%;
+  width: 60%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+#sign-in .input-container .input-wrapper {
+  max-width: 80%;
+  padding: 40px;
 }
 
 #sign-in .input-banner {
@@ -35,6 +67,8 @@
 
 @media not all and (max-width: 992px) {
   #sign-in .input-box {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
   }
 
@@ -53,9 +87,25 @@
   }
 }
 
+@media (max-width: 992px) {
+  #sign-in .input-container {
+    width: initial;
+    max-width: 100%;
+  }
+
+  #sign-in .input-container .input-wrapper {
+    max-width: 100%;
+    padding: 0;
+  }
+}
+
 @media (min-width: 768px) and (max-width: 992px) {
   #sign-in .input-box {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
     justify-content: center;
+    -webkit-box-align: normal;
+    -ms-flex-align: normal;
     align-items: normal;
     padding-top: 448px;
   }
@@ -73,15 +123,15 @@
     max-height: 283px;
     max-width: 430px;
   }
-
-  #sign-in .input-container {
-    padding-right: 10px;
-  }
 }
 
 @media not all and (min-width: 768px) {
   #sign-in .input-box {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
     justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
   }
 
@@ -94,7 +144,7 @@
   }
 
   #sign-in .input-container {
-    padding-right: 10px;
+    padding: 20px;
   }
 }
 
diff --git a/src/public/modules/users/views/authentication/signin.client.view.html b/src/public/modules/users/views/authentication/signin.client.view.html
index 5cf3b762b5..b7c7342a73 100755
--- a/src/public/modules/users/views/authentication/signin.client.view.html
+++ b/src/public/modules/users/views/authentication/signin.client.view.html
@@ -7,49 +7,51 @@
       class="input-overlay"
       src="/public/modules/core/img/sign-in-illustration.svg"
     />
-    <div class="col-md-offset-7 input-container">
-      <img
-        class="logo"
-        src="/public/modules/core/img/logo-horizontal-color.svg"
-      />
-      <div id="tagline">Build government forms in minutes</div>
-      <div class="input-label">Login</div>
-      <div class="input-sublabel">
-        Singapore Public Service official email addresses only
-      </div>
-      <input
-        id="email-input"
-        class="input-custom input-large"
-        placeholder="e.g. john@moe.gov.sg"
-        ng-keyup="vm.handleEmailKeyUp($event)"
-        type="email"
-        data-ng-model="vm.credentials.email"
-        autofocus
-      />
-      <div
-        ng-if="vm.signInMsg.isMsg && vm.signInMsg.isError"
-        class="alert-custom alert-error"
-      >
-        <i class="bx bx-exclamation bx-md icon-spacing"></i>
-        <span
-          class="alert-msg"
-          ng-bind-html="vm.signInMsg.msg | linky:'_blank'"
-        ></span>
-      </div>
-      <div class="btn-grp">
-        <button
-          class="btn-custom btn-medium"
-          ng-click="vm.checkEmail()"
-          ng-disabled="vm.buttonClicked || vm.isSubmitEmailDisabled"
-        >
-          Get Started
-        </button>
-        <a
-          translate-attr="{ href: 'LINKS.GUIDE.ROOT' }"
-          target="_blank"
-          class="btn-qn"
-          >Have a question?</a
+    <div class="input-container">
+      <div class="input-wrapper">
+        <img
+          class="logo"
+          src="/public/modules/core/img/logo-horizontal-color.svg"
+        />
+        <div id="tagline">Build government forms in minutes</div>
+        <div class="input-label">Login</div>
+        <div class="input-sublabel">
+          Singapore Public Service official email addresses only
+        </div>
+        <input
+          id="email-input"
+          class="input-custom input-large"
+          placeholder="e.g. john@moe.gov.sg"
+          ng-keyup="vm.handleEmailKeyUp($event)"
+          type="email"
+          data-ng-model="vm.credentials.email"
+          autofocus
+        />
+        <div
+          ng-if="vm.signInMsg.isMsg && vm.signInMsg.isError"
+          class="alert-custom alert-error"
         >
+          <i class="bx bx-exclamation bx-md icon-spacing"></i>
+          <span
+            class="alert-msg"
+            ng-bind-html="vm.signInMsg.msg | linky:'_blank'"
+          ></span>
+        </div>
+        <div class="btn-grp">
+          <button
+            class="btn-custom btn-medium"
+            ng-click="vm.checkEmail()"
+            ng-disabled="vm.buttonClicked || vm.isSubmitEmailDisabled"
+          >
+            Get Started
+          </button>
+          <a
+            translate-attr="{ href: 'LINKS.GUIDE.ROOT' }"
+            target="_blank"
+            class="btn-qn"
+            >Have a question?</a
+          >
+        </div>
       </div>
     </div>
   </div>
@@ -60,54 +62,56 @@
       class="input-overlay"
       src="/public/modules/core/img/sign-in-illustration.svg"
     />
-    <div class="col-md-offset-7 input-container">
-      <img
-        class="logo"
-        src="/public/modules/core/img/logo-horizontal-color.svg"
-      />
-      <div class="input-label">One-Time Password</div>
-      <input
-        id="otp-input"
-        class="input-custom input-large"
-        placeholder="Enter OTP sent to your email"
-        type="tel"
-        maxlength="6"
-        autocomplete="off"
-        ng-model="vm.credentials.otp"
-        ng-required="false"
-        ng-keydown="vm.signInMsg.isMsg = false; vm.manageOtp($event)"
-        ng-keyup="$event.keyCode == 13 && vm.credentials.otp.length === 6 && vm.verifyOtp()"
-      />
-      <div
-        ng-if="vm.signInMsg.isMsg"
-        ng-class="vm.signInMsg.isError ? 'alert-error' : 'alert-success'"
-        class="alert-custom"
-      >
-        <i
-          ng-class="vm.signInMsg.isError ? 'bx bx-exclamation bx-md' : 'bx bx-check bx-md'"
-          class="icon-spacing"
-        ></i>
-        <span class="alert-msg">{{vm.signInMsg.msg}}</span>
-      </div>
-      <div ng-if="vm.isOtpSending" class="alert-custom alert-info">
-        <i class="bx bx-loader bx-spin bx-md icon-spacing"></i>
-        <span class="alert-msg">Sending OTP...</span>
-      </div>
-      <div class="btn-grp">
-        <button
-          class="btn-custom btn-medium"
-          ng-disabled="vm.buttonClicked || vm.credentials.otp.length !== 6"
-          ng-click="vm.verifyOtp()"
-        >
-          Sign In
-        </button>
-        <a
-          class="btn-qn"
-          href=""
-          ng-click="vm.sendOtp()"
-          ng-class="vm.isOtpSending ? 'otp-disable' : ''"
-          >Resend OTP?</a
+    <div class="input-container">
+      <div class="input-wrapper">
+        <img
+          class="logo"
+          src="/public/modules/core/img/logo-horizontal-color.svg"
+        />
+        <div class="input-label">One-Time Password</div>
+        <input
+          id="otp-input"
+          class="input-custom input-large"
+          placeholder="Enter OTP sent to your email"
+          type="tel"
+          maxlength="6"
+          autocomplete="off"
+          ng-model="vm.credentials.otp"
+          ng-required="false"
+          ng-keydown="vm.signInMsg.isMsg = false; vm.manageOtp($event)"
+          ng-keyup="$event.keyCode == 13 && vm.credentials.otp.length === 6 && vm.verifyOtp()"
+        />
+        <div
+          ng-if="vm.signInMsg.isMsg"
+          ng-class="vm.signInMsg.isError ? 'alert-error' : 'alert-success'"
+          class="alert-custom"
         >
+          <i
+            ng-class="vm.signInMsg.isError ? 'bx bx-exclamation bx-md' : 'bx bx-check bx-md'"
+            class="icon-spacing"
+          ></i>
+          <span class="alert-msg">{{vm.signInMsg.msg}}</span>
+        </div>
+        <div ng-if="vm.isOtpSending" class="alert-custom alert-info">
+          <i class="bx bx-loader bx-spin bx-md icon-spacing"></i>
+          <span class="alert-msg">Sending OTP...</span>
+        </div>
+        <div class="btn-grp">
+          <button
+            class="btn-custom btn-medium"
+            ng-disabled="vm.buttonClicked || vm.credentials.otp.length !== 6"
+            ng-click="vm.verifyOtp()"
+          >
+            Sign In
+          </button>
+          <a
+            class="btn-qn"
+            href=""
+            ng-click="vm.sendOtp()"
+            ng-class="vm.isOtpSending ? 'otp-disable' : ''"
+            >Resend OTP?</a
+          >
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/public/modules/users/views/billing.client.view.html b/src/public/modules/users/views/billing.client.view.html
index 4453b875bb..c7aa4c0d8e 100644
--- a/src/public/modules/users/views/billing.client.view.html
+++ b/src/public/modules/users/views/billing.client.view.html
@@ -1,182 +1,188 @@
-<navbar-component></navbar-component>
+<div class="page-container">
+  <navbar-component></navbar-component>
 
-<div id="billing-tab" ng-init="vm.generateTimePeriods()" ng-if="vm.user">
-  <section class="container" ng-if="!vm.searchState.intro">
-    <div id="title">Billing</div>
-    <div id="title-grp">
-      <div
-        id="sub-title"
-        ng-class="vm.searchState.hide ? '' : 'subtitle-hidden'"
-      >
-        Export monthly bill charges
-      </div>
-      <i
-        id="search-icon"
-        class="bx bx-search"
-        ng-click="vm.openSearch()"
-        ng-if="vm.searchState.hide"
-      ></i>
-      <div id="search-input" ng-if="!vm.searchState.hide">
-        <i class="bx bx-search"></i>
-        <input
-          id="search-bar"
-          class="input-custom input-medium"
-          ng-model="vm.searchState.input"
-          ng-keyup="$event.keyCode === 13 && vm.searchBillingRecords()"
-          placeholder="Search for e-service ID"
-        />
-        <i class="bx bx-x" ng-click="vm.closeSearch()"></i>
-      </div>
-    </div>
-    <div id="divider"></div>
-    <div id="stats-options-grp">
-      <div id="stats-grp">
-        <div ng-if="!vm.loading">
-          <span class="stat-text">{{vm.sumTotal}}</span> login(s) for
-          <span class="stat-text">{{vm.esrvcId}}</span>
+  <div id="billing-tab" ng-init="vm.generateTimePeriods()" ng-if="vm.user">
+    <section class="container" ng-if="!vm.searchState.intro">
+      <div id="title">Billing</div>
+      <div id="title-grp">
+        <div
+          id="sub-title"
+          ng-class="vm.searchState.hide ? '' : 'subtitle-hidden'"
+        >
+          Export monthly bill charges
+        </div>
+        <i
+          id="search-icon"
+          class="bx bx-search"
+          ng-click="vm.openSearch()"
+          ng-if="vm.searchState.hide"
+        ></i>
+        <div id="search-input" ng-if="!vm.searchState.hide">
+          <i class="bx bx-search"></i>
+          <input
+            id="search-bar"
+            class="input-custom input-medium"
+            ng-model="vm.searchState.input"
+            ng-keyup="$event.keyCode === 13 && vm.searchBillingRecords()"
+            placeholder="Search for e-service ID"
+          />
+          <i class="bx bx-x" ng-click="vm.closeSearch()"></i>
         </div>
       </div>
-      <div id="options-grp">
-        <div class="row">
-          <div class="col-sm-6 col-xs-8">
-            <ui-select
-              theme="selectize"
-              search-enabled="true"
-              ng-model="vm.selectedTimePeriod"
-              ng-change="vm.getBillingForTimePeriod($select.selected, null)"
-            >
-              <ui-select-match>{{$select.selected.name}}</ui-select-match>
-              <ui-select-choices
-                repeat="option in vm.timePeriods | filter: $select.search"
-              >
-                <span ng-bind="option.name"></span>
-              </ui-select-choices>
-            </ui-select>
+      <div id="divider"></div>
+      <div id="stats-options-grp">
+        <div id="stats-grp">
+          <div ng-if="!vm.loading">
+            <span class="stat-text">{{vm.sumTotal}}</span> login(s) for
+            <span class="stat-text">{{vm.esrvcId}}</span>
           </div>
-          <div class="col-sm-6 col-xs-4">
-            <export-button-component
-              on-click="vm.downloadBilling()"
-              is-disabled="vm.sumTotal===0 || vm.loading"
-              is-full-width="true"
-            ></export-button-component>
+        </div>
+        <div id="options-grp">
+          <div class="row">
+            <div class="col-sm-6 col-xs-8">
+              <ui-select
+                theme="selectize"
+                search-enabled="true"
+                ng-model="vm.selectedTimePeriod"
+                ng-change="vm.getBillingForTimePeriod($select.selected, null)"
+              >
+                <ui-select-match>{{$select.selected.name}}</ui-select-match>
+                <ui-select-choices
+                  repeat="option in vm.timePeriods | filter: $select.search"
+                >
+                  <span ng-bind="option.name"></span>
+                </ui-select-choices>
+              </ui-select>
+            </div>
+            <div class="col-sm-6 col-xs-4">
+              <export-button-component
+                on-click="vm.downloadBilling()"
+                is-disabled="vm.sumTotal===0 || vm.loading"
+                is-full-width="true"
+              ></export-button-component>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div id="table-loader-grp">
-      <div class="loader" ng-if="vm.loading">
-        <i class="bx bx-loader bx-spin"></i>
-      </div>
-      <div
-        ng-if="vm.searchError"
-        class="search-error"
-        ng-class="vm.loading ? 'background-blur' : ''"
-      >
-        <img ng-src="/public/modules/core/img/error-illustration.svg" />
-        <div id="msg-1">An error occurred.</div>
-        <div id="msg-2">Note that e-service IDs are case-sensitive.</div>
-      </div>
-      <div ng-if="!vm.searchError">
-        <div ng-if="vm.sumTotal > 0">
-          <table
-            class="table"
-            ng-table="vm.tableParams"
-            show-filter="false"
-            ng-class="vm.loading ? 'background-blur' : ''"
-          >
-            <tr ng-repeat="row in $data">
-              <td
-                title="'Title'"
-                sortable="'formName'"
-                class="title-col"
-                header-class="'title-col'"
-              >
-                <a ui-sref="submitForm({ formId: row.formId })" target="_blank"
-                  >{{row.formName}}</a
-                >
-              </td>
-              <td
-                title="'Owner'"
-                sortable="'adminEmail'"
-                class="email-col"
-                header-class="'email-col'"
-              >
-                {{row.adminEmail}}
-              </td>
-              <td
-                title="'Authentication'"
-                sortable="'authType'"
-                class="auth-col auth-col-desktop"
-                header-class="'auth-col auth-col-desktop'"
-              >
-                {{row.authType === 'SP' ? 'SingPass' : 'CorpPass' }}
-              </td>
-              <td
-                title="'Auth'"
-                sortable="'authType'"
-                class="auth-col auth-col-mobile"
-                header-class="'auth-col auth-col-mobile'"
-              >
-                {{row.authType}}
-              </td>
-              <td
-                title="'#'"
-                sortable="'total'"
-                class="total-col"
-                header-class="'total-col'"
-              >
-                {{row.total}}
-              </td>
-            </tr>
-          </table>
+      <div id="table-loader-grp">
+        <div class="loader" ng-if="vm.loading">
+          <i class="bx bx-loader bx-spin"></i>
         </div>
         <div
-          ng-if="vm.sumTotal === 0"
+          ng-if="vm.searchError"
           class="search-error"
           ng-class="vm.loading ? 'background-blur' : ''"
         >
           <img ng-src="/public/modules/core/img/error-illustration.svg" />
-          <div id="msg-1">No results found</div>
+          <div id="msg-1">An error occurred.</div>
           <div id="msg-2">Note that e-service IDs are case-sensitive.</div>
         </div>
-      </div>
-    </div>
-  </section>
-  <section
-    class="container"
-    ng-if="vm.searchState.intro"
-    id="intro-container"
-    ng-init="vm.focusOnBilling()"
-  >
-    <img id="intro-img" ng-src="/public/modules/core/img/billing.svg" />
-    <div id="intro-title">Bill charges</div>
-    <div id="intro-sub-title">
-      To view your billing, enter your e-service ID below.
-    </div>
-    <div class="label-custom label-large label-bottom">e-service ID</div>
-    <form name="idForm">
-      <input
-        class="input-custom input-medium"
-        ng-model="vm.searchState.input"
-        required
-      />
-      <div class="row" id="btn-search">
-        <div class="col-sm-6 col-xs-12">
-          <button
-            class="btn-custom btn-medium"
-            ng-click="vm.searchBillingRecords()"
-            ng-disabled="idForm.$invalid"
-          >
-            Submit
-          </button>
-        </div>
-        <div id="faq-link" class="col-sm-6 col-xs-12">
-          <a translate-attr="{ href: 'LINKS.ESERVICE_ID_FAQ' }" target="_blank"
-            >What's an e-service id?</a
+        <div ng-if="!vm.searchError">
+          <div ng-if="vm.sumTotal > 0">
+            <table
+              class="table"
+              ng-table="vm.tableParams"
+              show-filter="false"
+              ng-class="vm.loading ? 'background-blur' : ''"
+            >
+              <tr ng-repeat="row in $data">
+                <td
+                  title="'Title'"
+                  sortable="'formName'"
+                  class="title-col"
+                  header-class="'title-col'"
+                >
+                  <a
+                    ui-sref="submitForm({ formId: row.formId })"
+                    target="_blank"
+                    >{{row.formName}}</a
+                  >
+                </td>
+                <td
+                  title="'Owner'"
+                  sortable="'adminEmail'"
+                  class="email-col"
+                  header-class="'email-col'"
+                >
+                  {{row.adminEmail}}
+                </td>
+                <td
+                  title="'Authentication'"
+                  sortable="'authType'"
+                  class="auth-col auth-col-desktop"
+                  header-class="'auth-col auth-col-desktop'"
+                >
+                  {{row.authType === 'SP' ? 'SingPass' : 'CorpPass' }}
+                </td>
+                <td
+                  title="'Auth'"
+                  sortable="'authType'"
+                  class="auth-col auth-col-mobile"
+                  header-class="'auth-col auth-col-mobile'"
+                >
+                  {{row.authType}}
+                </td>
+                <td
+                  title="'#'"
+                  sortable="'total'"
+                  class="total-col"
+                  header-class="'total-col'"
+                >
+                  {{row.total}}
+                </td>
+              </tr>
+            </table>
+          </div>
+          <div
+            ng-if="vm.sumTotal === 0"
+            class="search-error"
+            ng-class="vm.loading ? 'background-blur' : ''"
           >
+            <img ng-src="/public/modules/core/img/error-illustration.svg" />
+            <div id="msg-1">No results found</div>
+            <div id="msg-2">Note that e-service IDs are case-sensitive.</div>
+          </div>
         </div>
       </div>
-    </form>
-  </section>
+    </section>
+    <section
+      class="container"
+      ng-if="vm.searchState.intro"
+      id="intro-container"
+      ng-init="vm.focusOnBilling()"
+    >
+      <img id="intro-img" ng-src="/public/modules/core/img/billing.svg" />
+      <div id="intro-title">Bill charges</div>
+      <div id="intro-sub-title">
+        To view your billing, enter your e-service ID below.
+      </div>
+      <div class="label-custom label-large label-bottom">e-service ID</div>
+      <form name="idForm">
+        <input
+          class="input-custom input-medium"
+          ng-model="vm.searchState.input"
+          required
+        />
+        <div class="row" id="btn-search">
+          <div class="col-sm-6 col-xs-12">
+            <button
+              class="btn-custom btn-medium"
+              ng-click="vm.searchBillingRecords()"
+              ng-disabled="idForm.$invalid"
+            >
+              Submit
+            </button>
+          </div>
+          <div id="faq-link" class="col-sm-6 col-xs-12">
+            <a
+              translate-attr="{ href: 'LINKS.ESERVICE_ID_FAQ' }"
+              target="_blank"
+              >What's an e-service id?</a
+            >
+          </div>
+        </div>
+      </form>
+    </section>
+  </div>
 </div>
diff --git a/src/public/modules/users/views/examples-list.client.view.html b/src/public/modules/users/views/examples-list.client.view.html
index e31fabbfa8..6dea69969a 100644
--- a/src/public/modules/users/views/examples-list.client.view.html
+++ b/src/public/modules/users/views/examples-list.client.view.html
@@ -1,106 +1,108 @@
-<navbar-component></navbar-component>
+<div class="page-container">
+  <navbar-component></navbar-component>
 
-<div id="examples-tab">
-  <section class="container" ng-if="vm.user" ng-init="vm.loadNextPage()">
-    <div id="title">Form examples</div>
-    <div class="row" id="title-grp">
-      <div id="sub-title" class="col-md-6">
-        <span ng-if="vm.searchParams.searchTerm">
-          <span id="searchResults"
-            ><b>{{vm.uiState.totalNumResults}}</b> form(s) matching
-            ‘{{vm.searchParams.searchTerm}}’ in ‘{{
-            vm.searchParams.filterByAgency ? 'Your agency' : 'All agencies'
-            }}’</span
-          >
-          <a href="" ng-click="vm.resetSearch()">Reset</a>
-        </span>
-        <span ng-if="!vm.searchParams.searchTerm">
-          Explore forms and use as a template
-        </span>
-      </div>
-      <div id="search-grp" class="col-md-6">
-        <div id="dropdown" class="dropdown" uib-dropdown>
-          <span
-            class="dropdown-toggle"
-            id="dropdown-selection"
-            type="button"
-            uib-dropdown-toggle
-            ng-disabled="disabled"
-          >
-            {{ vm.searchParams.filterByAgency ? 'Your agency' : 'All agencies'
-            }}
-            <span class="caret"></span>
+  <div id="examples-tab">
+    <section class="container" ng-if="vm.user" ng-init="vm.loadNextPage()">
+      <div id="title">Form examples</div>
+      <div class="row" id="title-grp">
+        <div id="sub-title" class="col-md-6">
+          <span ng-if="vm.searchParams.searchTerm">
+            <span id="searchResults"
+              ><b>{{vm.uiState.totalNumResults}}</b> form(s) matching
+              ‘{{vm.searchParams.searchTerm}}’ in ‘{{
+              vm.searchParams.filterByAgency ? 'Your agency' : 'All agencies'
+              }}’</span
+            >
+            <a href="" ng-click="vm.resetSearch()">Reset</a>
+          </span>
+          <span ng-if="!vm.searchParams.searchTerm">
+            Explore forms and use as a template
           </span>
-          <ul
-            class="dropdown-menu"
-            id="dropdown-options"
-            uib-dropdown-menu
-            role="menu"
-            aria-labelledby="dropdown-selection"
-          >
-            <li role="menuitem">
-              <a href="" ng-click="vm.updateSelection(false)">All agencies</a>
-            </li>
-            <li role="menuitem">
-              <a href="" ng-click="vm.updateSelection(true)">Your agency</a>
-            </li>
-          </ul>
         </div>
+        <div id="search-grp" class="col-md-6">
+          <div id="dropdown" class="dropdown" uib-dropdown>
+            <span
+              class="dropdown-toggle"
+              id="dropdown-selection"
+              type="button"
+              uib-dropdown-toggle
+              ng-disabled="disabled"
+            >
+              {{ vm.searchParams.filterByAgency ? 'Your agency' : 'All agencies'
+              }}
+              <span class="caret"></span>
+            </span>
+            <ul
+              class="dropdown-menu"
+              id="dropdown-options"
+              uib-dropdown-menu
+              role="menu"
+              aria-labelledby="dropdown-selection"
+            >
+              <li role="menuitem">
+                <a href="" ng-click="vm.updateSelection(false)">All agencies</a>
+              </li>
+              <li role="menuitem">
+                <a href="" ng-click="vm.updateSelection(true)">Your agency</a>
+              </li>
+            </ul>
+          </div>
 
-        <i
-          id="search-icon"
-          class="bx bx-search"
-          ng-click="vm.openSearch()"
-          ng-if="vm.uiState.hideSearchBar"
-        ></i>
-        <div id="search-input" ng-if="!vm.uiState.hideSearchBar">
-          <i class="bx bx-search"></i>
-          <input
-            id="search-bar"
-            class="input-custom input-medium"
-            ng-model="vm.uiState.searchInput"
-            ng-keyup="$event.keyCode == 13 && vm.searchForms($event)"
-          />
-          <i class="bx bx-x" ng-click="vm.closeSearch()"></i>
+          <i
+            id="search-icon"
+            class="bx bx-search"
+            ng-click="vm.openSearch()"
+            ng-if="vm.uiState.hideSearchBar"
+          ></i>
+          <div id="search-input" ng-if="!vm.uiState.hideSearchBar">
+            <i class="bx bx-search"></i>
+            <input
+              id="search-bar"
+              class="input-custom input-medium"
+              ng-model="vm.uiState.searchInput"
+              ng-keyup="$event.keyCode == 13 && vm.searchForms($event)"
+            />
+            <i class="bx bx-x" ng-click="vm.closeSearch()"></i>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div
-      id="forms-list"
-      class="examples-container"
-      infinite-scroll="vm.loadNextPage()"
-      infinite-scroll-disabled="vm.uiState.loadingState!=='free'"
-      infinite-scroll-distance="1"
-    >
-      <!-- if user landed on :formId/use-template, the first card will be that specified templateForm -->
-      <examples-card
-        ng-repeat="form in vm.uiState.forms"
-        form="form"
-      ></examples-card>
-    </div>
-    <div ng-if="vm.uiState.loadingState==='busy'" class="loader">
-      <i class="bx bx-loader bx-spin"></i>
-    </div>
-    <div
-      class="search-error"
-      ng-if="vm.uiState.numResultsLoadedSoFar === 0 && vm.uiState.loadingState !== 'busy'"
-    >
-      <img ng-src="/public/modules/core/img/error-illustration.svg" />
-      <div id="msg-1">No results found</div>
-      <div id="msg-2" ng-if="vm.searchParams.searchTerm">
-        Try other keywords such as <i>survey</i>, <i>feedback</i> or
-        <i>registration</i>.
+      <div
+        id="forms-list"
+        class="examples-container"
+        infinite-scroll="vm.loadNextPage()"
+        infinite-scroll-disabled="vm.uiState.loadingState!=='free'"
+        infinite-scroll-distance="1"
+      >
+        <!-- if user landed on :formId/use-template, the first card will be that specified templateForm -->
+        <examples-card
+          ng-repeat="form in vm.uiState.forms"
+          form="form"
+        ></examples-card>
+      </div>
+      <div ng-if="vm.uiState.loadingState==='busy'" class="loader">
+        <i class="bx bx-loader bx-spin"></i>
+      </div>
+      <div
+        class="search-error"
+        ng-if="vm.uiState.numResultsLoadedSoFar === 0 && vm.uiState.loadingState !== 'busy'"
+      >
+        <img ng-src="/public/modules/core/img/error-illustration.svg" />
+        <div id="msg-1">No results found</div>
+        <div id="msg-2" ng-if="vm.searchParams.searchTerm">
+          Try other keywords such as <i>survey</i>, <i>feedback</i> or
+          <i>registration</i>.
+        </div>
+      </div>
+      <!-- This card will not be displayed, as examples-card will not show if hasSpecifiedTemplate -->
+      <div>
+        <examples-card
+          ng-if="!!vm.templateForm"
+          form="vm.templateForm"
+          auto-open-modal="!!vm.templateForm"
+        ></examples-card>
       </div>
-    </div>
-    <!-- This card will not be displayed, as examples-card will not show if hasSpecifiedTemplate -->
-    <div>
-      <examples-card
-        ng-if="!!vm.templateForm"
-        form="vm.templateForm"
-        auto-open-modal="!!vm.templateForm"
-      ></examples-card>
-    </div>
-  </section>
+    </section>
+  </div>
+  <!-- End Examples search enabled for beta users -->
 </div>
-<!-- End Examples search enabled for beta users -->