diff --git a/frontend/.env b/frontend/.env
index 60a2d2a264d628fd76716f27d74f22778ae43b99..966e3bde769933cdf8f4fea7ce7d99c521367dbd 100644
--- a/frontend/.env
+++ b/frontend/.env
@@ -1,2 +1,8 @@
 REACT_APP_VERSION=$npm_package_version
 REACT_APP_NAME=$npm_package_name
+
+REACT_APP_SUPPORT_MAIL=test@example.org
+REACT_APP_INST=None
+REACT_APP_SUPPORT_URL=https://example.org
+
+REACT_APP_THEME=default
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 28d1b701b7647df03ab7d5ae8ab62c01e1e05bff..d7e5050cc47074b53b1edfbc8e80647da2b7b85c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,6 +7,7 @@ import { Button } from './components/button'
 
 import { appTimezone, appVersion, appTheme } from './appConfig'
 import Link from './components/link'
+import Footer from "./Footer";
 
 const App = () => {
   const [apiHealth, setApiHealth] = useState('not yet')
@@ -71,6 +72,7 @@ const App = () => {
           <Link to='test6' external={true} underline={false} noUnderline={true}>External link</Link>
           <Link to='test5' external={false} noUnderline={true}>Another internal link</Link>
       </header>
+      <Footer/>
     </div>
   )
 }
diff --git a/frontend/src/appConfig.ts b/frontend/src/appConfig.ts
index ea76eda4eccb697485a4299896781824d1b78438..6e73596c391350e8d88fc8bb621956aa2a172184 100644
--- a/frontend/src/appConfig.ts
+++ b/frontend/src/appConfig.ts
@@ -20,3 +20,11 @@ export const appName: string = process.env.REACT_APP_NAME as string
 export const appTheme: string = env.REACT_APP_THEME
   ? (env.REACT_APP_THEME as string)
   : 'default'
+
+/* Show warning in the footer about this being a staging/test system */
+export const appStagingWarning: boolean =
+    env.REACT_APP_STAGING_WARNING === 'true';
+
+/* Footer content */
+export const appTechnicalSupportLink: string = env.REACT_APP_SUPPORT_URL as string;
+export const appTechnicalSupportMail: string = env.REACT_APP_SUPPORT_MAIL as string
diff --git a/frontend/src/styled.d.ts b/frontend/src/styled.d.ts
index 974a5848a8bc58c7ef7c89cfc93f7652397e9d88..b412f3b09a8060e02325f2135d46daffb8d308c2 100644
--- a/frontend/src/styled.d.ts
+++ b/frontend/src/styled.d.ts
@@ -7,7 +7,20 @@ declare module 'styled-components' {
       main: string
       secondary: string
     }
+    appMaxWidth: string
+    horizontalPadding: string
     linkExternalColor: string
     linkInternalColor: string
+    footerBackgroundColor: string
+    footerTextColor: string
+    footerJustifyContent: string
+    breakpoints: {
+      lg: string
+      lgQuery: string
+      md: string
+      mdQuery: string
+      sm: string
+      notMobileQuery: string
+    }
   }
 }
diff --git a/frontend/src/themes/color.ts b/frontend/src/themes/color.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d3f818816685ac66d5a3a1ae25316c9245f89fe0
--- /dev/null
+++ b/frontend/src/themes/color.ts
@@ -0,0 +1,7 @@
+
+export module Color {
+    export const white = '#FFFFFF'
+    export const hotPink = '#FF69B4'
+    export const blueish = '#2771bb'
+    export const lightOliveGreen = '#91BD60'
+}
diff --git a/frontend/src/themes/default.ts b/frontend/src/themes/default.ts
index 2ef77f80a662ad7badde657035065ee5f89090d7..7ca42b83354bda579dfb61624574a894c65290ea 100644
--- a/frontend/src/themes/default.ts
+++ b/frontend/src/themes/default.ts
@@ -1,17 +1,28 @@
 import { DefaultTheme } from 'styled-components/macro'
+import {Color} from "./color";
 
-const white = '#FFFFFF'
-const hotPink = '#FF69B4'
-const blueish = '#2771bb'
 
 const defaultTheme: DefaultTheme = {
   borderRadius: '10px',
   colors: {
-    main: hotPink,
-    secondary: white,
+    main: Color.hotPink,
+    secondary: Color.white,
   },
-  linkInternalColor: white,
-  linkExternalColor: blueish,
+  appMaxWidth: '110rem',
+  horizontalPadding: '2rem',
+  linkInternalColor: Color.white,
+  linkExternalColor: Color.blueish,
+  footerBackgroundColor: Color.lightOliveGreen,
+  footerTextColor: Color.white,
+  footerJustifyContent: 'flex-end',
+  breakpoints: {
+    lg: '1140px',
+    lgQuery: '@media (min-width:1140px)',
+    md: '768px',
+    mdQuery: '@media (min-width:768px)',
+    sm: '480px',
+    notMobileQuery: '@media (min-width:480px)',
+  }
 }
 
 export default defaultTheme
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
index 7a47b3c7ff066e8c0b540663a7a0b6cb2b6f6567..37b035c5913f13b0044fb359a2f242fdcde4fb57 100644
--- a/frontend/src/themes/uib.ts
+++ b/frontend/src/themes/uib.ts
@@ -1,17 +1,8 @@
 import { DefaultTheme } from 'styled-components'
+import {Color} from "./color";
+import defaultTheme from "./default";
 
-const white = '#FFFFFF'
-const hotPink = '#FF69B4'
-const blueish = '#2771bb'
-
-const uibTheme: DefaultTheme = {
-  borderRadius: '10px',
-  colors: {
-    main: hotPink,
-    secondary: white,
-  },
-  linkInternalColor: white,
-  linkExternalColor: blueish,
-}
+const uibTheme: DefaultTheme = Object.assign({}, defaultTheme)
+uibTheme.footerBackgroundColor = Color.blueish
 
 export default uibTheme
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
index 1ce42f08608a9605e6b2bed916e1451fcc5fbba1..46d4a3dcfe4a32ed826b2ed95eab9b340cdbe893 100644
--- a/frontend/src/themes/uio.ts
+++ b/frontend/src/themes/uio.ts
@@ -1,17 +1,28 @@
 import { DefaultTheme } from 'styled-components/macro'
+import {Color} from "./color";
 
-const white = '#FFFFFF'
-const hotPink = '#FF69B4'
-const blueish = '#2771bb'
 
 const uioTheme: DefaultTheme = {
   borderRadius: '10px',
   colors: {
-    main: hotPink,
-    secondary: white,
+    main: Color.hotPink,
+    secondary: Color.white,
   },
-  linkInternalColor: white,
-  linkExternalColor: blueish,
+  appMaxWidth: '110rem',
+  horizontalPadding: '2rem',
+  linkInternalColor: Color.white,
+  linkExternalColor: Color.blueish,
+  footerBackgroundColor: Color.lightOliveGreen,
+  footerTextColor: Color.white,
+  footerJustifyContent: 'flex-end',
+  breakpoints: {
+    lg: '1140px',
+    lgQuery: '@media (min-width:1140px)',
+    md: '768px',
+    mdQuery: '@media (min-width:768px)',
+    sm: '480px',
+    notMobileQuery: '@media (min-width:480px)',
+  }
 }
 
 export default uioTheme