diff --git a/components/theme-selector.tsx b/components/theme-selector.tsx
index 18af9f29..6adb7b84 100644
--- a/components/theme-selector.tsx
+++ b/components/theme-selector.tsx
@@ -2,6 +2,7 @@
 import { Box, Button } from "@material-ui/core";
 import { useGlobal } from "../context/global-context";
 import useStyles from "../styles/theme-selector.style";
+import { themes } from "../theme/theme";
 
 export default function ThemeSelector() {
   const classes = useStyles()
@@ -9,14 +10,9 @@ export default function ThemeSelector() {
 
   return (
     <Box className={classes.themeContainer}>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'blueGreenTheme' })}>BlueGreen</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'tealTheme' })}>Teal</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'cyanTheme' })}>Cyan</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'beeTheme' })}>Bee</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'beeLightTheme' })}>BeeLight</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'woodTheme' })}>Wood</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'honeyTheme' })}>Honey</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'earthTheme' })}>Earth</Button>
+      {themes.map((t, i) => 
+        <Button key={i} size="small" onClick={() => dispatch({ type: 'setTheme', payload: t.name })}>{t.name}</Button>
+      )}
     </Box>
   )
 } 
\ No newline at end of file
diff --git a/context/global-context.tsx b/context/global-context.tsx
index fdf62f57..8e2f6131 100644
--- a/context/global-context.tsx
+++ b/context/global-context.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import ThemeSelector from "../components/theme-selector"
 import { useLocalStorageReducer } from '../hooks/useLocalStorageReducer'
 import { State, Dispatch, initialState, reducer } from '../reducers/global-reducer'
-import { beeLightTheme, beeTheme, blueGreenTheme, cyanTheme, earthTheme, honeyTheme, tealTheme, woodTheme } from '../theme/theme'
+import { theme, themes, CustomTheme } from "../theme/theme";
 
 const GlobalContext = React.createContext<{state: State, dispatch: Dispatch} | undefined>(undefined)
 
@@ -11,27 +11,9 @@ function GlobalStateProvider({children}) {
     const [state, dispatch] = useLocalStorageReducer(reducer, initialState, 'global')
 
     const loadTheme = (): Theme => {
-        switch(state.theme) {
-            case "blueGreenTheme":
-                return {...blueGreenTheme}
-            case "tealTheme":
-                return {...tealTheme}
-            case "cyanTheme":
-                return {...cyanTheme}
-            case "beeTheme":
-                return {...beeTheme}
-            case "beeLightTheme":
-                return {...beeLightTheme}
-            case "woodTheme":
-                return {...woodTheme}
-            case "honeyTheme":
-                return {...honeyTheme}
-            case "earthTheme":
-                return {...earthTheme}
-            default:
-                return {...blueGreenTheme}
-        }
-      }
+        const themeToLoad: CustomTheme | undefined = themes.find(t => t.name === state.theme)
+        return themeToLoad ? {...themeToLoad.theme} : {...theme}
+    }
 
     return ( 
         <GlobalContext.Provider value={{state, dispatch}}>
diff --git a/reducers/global-reducer.test.ts b/reducers/global-reducer.test.ts
index 715eb67b..672ad6f6 100644
--- a/reducers/global-reducer.test.ts
+++ b/reducers/global-reducer.test.ts
@@ -5,7 +5,7 @@ const initState: State = {
   debug: false,
   useLocalStorage: true,
   experimentsInLocalStorage: [],
-  theme: 'blueGreenTheme'
+  theme: 'BlueGreen'
 }
 
 describe("storeExperimentId", () => {
@@ -37,7 +37,7 @@ describe("deleteExperimentId", () => {
 
 describe("setTheme", () => {
   it("should set theme", async () => {
-    const payload: ThemeName = 'beeTheme'
+    const payload: ThemeName = 'Bee'
     expect(
       reducer(initState, { type: 'setTheme', payload }))
       .toEqual({...initState, theme: payload})
diff --git a/reducers/global-reducer.ts b/reducers/global-reducer.ts
index cbfe2f21..648cbcdc 100644
--- a/reducers/global-reducer.ts
+++ b/reducers/global-reducer.ts
@@ -34,7 +34,7 @@ export const initialState: State = {
     useLocalStorage: true,
     debug: false,
     experimentsInLocalStorage: [],
-    theme: "blueGreenTheme"
+    theme: "BlueGreen"
 }
 
 export const reducer = (state: State, action: Action) => {
diff --git a/reducers/reducers.test.ts b/reducers/reducers.test.ts
index 7ad1f03a..15b68393 100644
--- a/reducers/reducers.test.ts
+++ b/reducers/reducers.test.ts
@@ -8,6 +8,7 @@ describe("experiment reducer", () => {
     experiment:{
       id: "1234",
       info: {
+        swVersion: "",
         name: "Cake",
         description: "Yummy",
       },
@@ -43,6 +44,7 @@ describe("experiment reducer", () => {
     const payload: ExperimentType = {
       id: "5678",
       info: {
+        swVersion: "",
         name: "Not cake",
         description: "Not yummy",
       },
diff --git a/styles/home.style.tsx b/styles/home.style.tsx
index dc66a71b..16998896 100644
--- a/styles/home.style.tsx
+++ b/styles/home.style.tsx
@@ -27,7 +27,7 @@ export const useStyles = makeStyles(theme => ({
   },
   uploadIcon: {
     position: 'absolute',
-    fontSize: '13rem',
+    fontSize: '13rem !important',
     opacity: .35
   }
 }));
diff --git a/theme/theme.ts b/theme/theme.ts
index fe3eb32e..1221bbd6 100644
--- a/theme/theme.ts
+++ b/theme/theme.ts
@@ -208,23 +208,28 @@ const earth: CustomColours = {
 }
 
 export type ThemeName =
-    'tealTheme'
-  | 'cyanTheme'
-  | 'beeTheme'
-  | 'beeLightTheme'
-  | 'woodTheme'
-  | 'blueGreenTheme'
-  | 'honeyTheme'
-  | 'earthTheme'
-
-export const tealTheme: Theme = createCustomTheme(teals)
-export const cyanTheme: Theme = createCustomTheme(cyans)
-export const beeTheme: Theme = createCustomTheme(bee)
-export const beeLightTheme: Theme = createCustomTheme(beeLight)
-export const woodTheme: Theme = createCustomTheme(wood)
-export const blueGreenTheme: Theme = createCustomTheme(blueGreen)
-export const honeyTheme: Theme = createCustomTheme(honey)
-export const earthTheme: Theme = createCustomTheme(earth)
-
-export const theme: Theme = blueGreenTheme
+    'Teal'
+  | 'Cyan'
+  | 'Bee'
+  | 'BeeLight'
+  | 'Wood'
+  | 'BlueGreen'
+  | 'Honey'
+  | 'Earth'
+
+export type CustomTheme = {
+  name: ThemeName
+  theme: Theme
+}
 
+export const themes: CustomTheme[] = [
+  { name: 'Teal', theme: createCustomTheme(teals) },
+  { name: 'Cyan', theme: createCustomTheme(cyans) },
+  { name: 'Bee', theme: createCustomTheme(bee) },
+  { name: 'BeeLight', theme: createCustomTheme(beeLight) },
+  { name: 'BlueGreen', theme: createCustomTheme(blueGreen) },
+  { name: 'Honey', theme: createCustomTheme(honey) },
+  { name: 'Earth', theme: createCustomTheme(earth) },
+]
+
+export const theme: Theme = createCustomTheme(blueGreen)
\ No newline at end of file