diff --git a/web/components/chat/ChatTextField/ChatTextField.module.scss b/web/components/chat/ChatTextField/ChatTextField.module.scss
index 187da238a..c211c7e34 100644
--- a/web/components/chat/ChatTextField/ChatTextField.module.scss
+++ b/web/components/chat/ChatTextField/ChatTextField.module.scss
@@ -1,3 +1,5 @@
+@import '../../../styles/mixins.scss';
+
 .root {
   position: relative;
   display: flex;
@@ -54,14 +56,14 @@
 }
 
 .sendButton {
+  display: none;
   border: none;
   background: none;
   cursor: pointer;
   padding: 0 1rem;
-  display: none;
 
   // Only show the chat send button on narrow screens to assist in mobile use.
-  @media (max-width: 768px) {
+  @include screen(desktop) {
     display: block;
   }
 }
diff --git a/web/components/common/ContentHeader/ContentHeader.module.scss b/web/components/common/ContentHeader/ContentHeader.module.scss
index d9574a990..8f5c78eba 100644
--- a/web/components/common/ContentHeader/ContentHeader.module.scss
+++ b/web/components/common/ContentHeader/ContentHeader.module.scss
@@ -1,3 +1,5 @@
+@import '../../../styles/mixins.scss';
+
 .root {
   position: relative;
   display: grid;
@@ -10,7 +12,7 @@
 
 .logoTitleSection {
   display: flex;
-  @media (max-width: 768px) {
+  @include screen(desktop) {
     flex-direction: column;
     .logo {
       margin-left: auto;
@@ -29,14 +31,14 @@
   .title {
     font-family: var(--theme-text-display-font-family);
     color: var(--theme-color-palette-0);
-    font-size: 2rem;
+    font-size: 1.7rem;
     font-weight: bold;
     line-height: 30px;
   }
 
   .subtitle {
-    font-size: 1.5rem;
-    font-weight: 300;
+    font-size: 1.2rem;
+    font-weight: 400;
     line-height: 1.3;
     color: var(--theme-color-background-header);
     max-width: 900px;
diff --git a/web/components/layouts/Main.tsx b/web/components/layouts/Main.tsx
index 1a47361de..ebfa0672d 100644
--- a/web/components/layouts/Main.tsx
+++ b/web/components/layouts/Main.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable react/no-unescaped-entities */
 import { Layout } from 'antd';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import Head from 'next/head';
 import { FC, useEffect, useRef } from 'react';
 import {
@@ -9,6 +9,7 @@ import {
   isChatAvailableSelector,
   clientConfigStateAtom,
   fatalErrorStateAtom,
+  isMobileAtom,
 } from '../stores/ClientConfigStore';
 import { Content } from '../ui/Content/Content';
 import { Header } from '../ui/Header/Header';
@@ -21,10 +22,12 @@ import { TitleNotifier } from '../TitleNotifier/TitleNotifier';
 
 // @ts-ignore
 import ServerRenderedMetadata from '../ServerRendered/ServerRenderedMetadata.html';
+import Footer from '../ui/Footer/Footer';
 
 export const Main: FC = () => {
+  const [isMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
-  const { name, title, customStyles } = clientConfig;
+  const { name, title, customStyles, version } = clientConfig;
   const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
   const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom);
 
@@ -90,6 +93,7 @@ export const Main: FC = () => {
         {fatalError && (
           <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
         )}
+        {!isMobile && <Footer version={version} />}
       </Layout>
     </>
   );
diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss
index 9cab9440f..566e5aeb0 100644
--- a/web/components/ui/Content/Content.module.scss
+++ b/web/components/ui/Content/Content.module.scss
@@ -1,10 +1,15 @@
+@import '../../../styles/mixins.scss';
+
 .root {
   display: grid;
   grid-template-columns: 1fr auto;
-  height: 100%;
   width: 100%;
   background-color: var(--theme-color-background-main);
   
+  @include screen(desktop) {
+    height: var(--content-height);
+  }
+
   .mainSection {
     display: flex;
     overflow-y: scroll;
@@ -40,3 +45,4 @@
   height: 100%;
   grid-template-rows: 1fr auto;
 }
+
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 3fea01798..593e22850 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -355,7 +355,7 @@ export const Content: FC = () => {
             {showChat && !isMobile && <Sidebar />}
           </AntContent>
         </Spin>
-        {!isMobile && <Footer version={version} />}
+        {!isMobile && false && <Footer version={version} />}
       </div>
 
       {externalActionToDisplay && (
diff --git a/web/components/ui/CustomPageContent/CustomPageContent.module.scss b/web/components/ui/CustomPageContent/CustomPageContent.module.scss
index e4630c716..2a783600d 100644
--- a/web/components/ui/CustomPageContent/CustomPageContent.module.scss
+++ b/web/components/ui/CustomPageContent/CustomPageContent.module.scss
@@ -5,7 +5,7 @@
 }
 
 .customPageContent {
-  font-size: 1.1rem;
+  font-size: 1rem;
   line-height: 1.6em;
   color: var(--theme-color-palette-0);
   padding: calc(2 * var(--content-padding));
@@ -20,7 +20,7 @@
   }
 
   div.summary {
-    font-size: 1.1rem;
+    font-size: 0.9rem;
   }
 
   p {
diff --git a/web/components/ui/Footer/Footer.module.scss b/web/components/ui/Footer/Footer.module.scss
index 55f723603..5eefc9d2d 100644
--- a/web/components/ui/Footer/Footer.module.scss
+++ b/web/components/ui/Footer/Footer.module.scss
@@ -1,13 +1,15 @@
 .footer {
   display: flex;
+  align-items: center;
+  height: var(--footer-height);
   justify-content: space-between;
   flex-direction: row;
   background-color: var(--theme-color-background-header);
   width: 100%;
   color: var(--theme-color-components-text-on-dark);
   font-family: var(--theme-text-body-font-family);
-
-  padding: 0.6em;
+  
+  padding: 0 .6rem;
   font-size: 0.8rem;
   font-weight: 600;
   border-top: 1px solid rgba(214, 211, 211, 0.5);
diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index 317217240..67047264f 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/web/components/ui/Header/Header.module.scss
@@ -1,6 +1,7 @@
 .header {
   position: sticky;
   top: 0px;
+  height: var(--header-height) !important;
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/web/components/ui/Sidebar/Sidebar.module.scss b/web/components/ui/Sidebar/Sidebar.module.scss
index 885f6bf5b..eb7e1a8f1 100644
--- a/web/components/ui/Sidebar/Sidebar.module.scss
+++ b/web/components/ui/Sidebar/Sidebar.module.scss
@@ -1,14 +1,14 @@
+@import '../../../styles/mixins.scss';
+
 .root {
   background-color: var(--theme-color-background-chat);
   display: none;
-}
-
-@media (min-width: 768px) {
-  .root {
-    position: sticky;
-    display: block;
+  @include screen(desktop) {
+      position: sticky;
+      display: block;
   }
 }
+
 /*
 First div is .ant-layout-sider-children
 Only way to target it apparently
diff --git a/web/components/ui/Statusbar/Statusbar.module.scss b/web/components/ui/Statusbar/Statusbar.module.scss
index 49e32e2ba..5d5bab6d9 100644
--- a/web/components/ui/Statusbar/Statusbar.module.scss
+++ b/web/components/ui/Statusbar/Statusbar.module.scss
@@ -10,8 +10,4 @@
   background-color: var(--component-background);
   font-family: var(--theme-text-display-font-family);
   font-weight: 600;
-  
-  .right {
-    color: red;
-  }
 }
diff --git a/web/components/video/VideoJS/VideoJS.module.scss b/web/components/video/VideoJS/VideoJS.module.scss
index 67906b1b8..360bd80a3 100644
--- a/web/components/video/VideoJS/VideoJS.module.scss
+++ b/web/components/video/VideoJS/VideoJS.module.scss
@@ -1,9 +1,15 @@
+@import '../../../styles/mixins.scss';
+
 .player {
   height: auto !important;
   width: 100%;
   video {
     position: static !important;
   }
+
+  @include screen(desktop) {
+    height: 30vh !important;
+  }
 }
 
 .poster {
@@ -11,8 +17,3 @@
   height: 100%;
 }
 
-@media (max-width: 768px) {
-  .player {
-    height: 30vh !important;
-  }
-}
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index b2bd3613a..1183a6b5c 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -4,10 +4,14 @@
 @import '@fontsource/open-sans/800.css';
 @import '@fontsource/poppins/400.css';
 @import '@fontsource/poppins/600.css';
+@import './mixins.scss';
 
 :root {
   --content-padding: 12px;
   --module-spacing: 12px; // margin size between lines of stuff, if needed
+  --header-height: 4rem; // needed for making main content scrollable;
+  --footer-height: 2.5rem; // needed for making main content scrollable;
+  --content-height: calc(100vh - var(--header-height) - var(--footer-height));
 }
 
 ::selection {
diff --git a/web/styles/mixins.scss b/web/styles/mixins.scss
index d7ff1da49..5edfe1218 100644
--- a/web/styles/mixins.scss
+++ b/web/styles/mixins.scss
@@ -3,3 +3,16 @@
   justify-content: center;
   align-items: center;
 }
+
+@mixin screen ($breakpoint) { 
+    @if $breakpoint == desktop {    
+    @media only screen and (min-width: 768px) {
+      @content;
+    }
+  }
+  @if $breakpoint == mobile {
+    @media only screen and (max-width: 481px) {
+      @content;
+    }
+  }
+}