diff --git a/src/App.tsx b/src/App.tsx
index 5279e89bd76752473dd481d4087c9d71a3644806..85d6d601470498af53191f831d3af3b2403aa570 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,7 @@ import { ClientContextProvider } from './context';
 import ThemeProvider from './context/ThemeProvider';
 import { UserStateProvider } from './context/UserContext';
 import Routes from './Routes';
-import { darkTheme } from './theme';
+import darkTheme from './styles/darkTheme';
 
 function App(): React.ReactElement {
   return (
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 23bc3e2fab51c1e4464a64ba5d630da394961d41..ff9a53e18f62990c015ec140a6c3b3545c576dd2 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,19 @@
+import { Box, makeStyles } from '@material-ui/core';
 import React from 'react';
 
-const Footer: React.FC = () => <div>Footer</div>;
+const useStyles = makeStyles((theme) => ({
+  footer: {
+    background: theme.footer.background,
+  },
+}));
+
+const Footer: React.FC = () => {
+  const classes = useStyles();
+  return (
+    <Box component="footer" className={classes.footer}>
+      a
+    </Box>
+  );
+};
 
 export default Footer;
diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx
index a32c2249373bd7826f228c0c1251a6631e180453..49bdd30dbe98d2a3ea1e4d71e905e5403efcd952 100644
--- a/src/context/ThemeProvider.tsx
+++ b/src/context/ThemeProvider.tsx
@@ -6,17 +6,16 @@ import {
 } from '@material-ui/core/styles';
 import React, { useMemo } from 'react';
 import { ThemeProvider as SCThemeProvider } from 'styled-components';
-import { theme as defaultTheme } from '../theme';
+import lightTheme from '../styles/lightTheme';
 
 export interface ThemeProviderProps {
   theme?: Theme;
 }
 
 const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme: themeProp, children }) => {
-  const theme = useMemo(
-    () => (themeProp ? createMuiTheme(defaultTheme, themeProp) : defaultTheme),
-    [themeProp],
-  );
+  const theme = useMemo(() => (themeProp ? createMuiTheme(lightTheme, themeProp) : lightTheme), [
+    themeProp,
+  ]);
   return (
     <StylesProvider injectFirst>
       <MUIThemeProvider theme={theme}>
diff --git a/src/theme.ts b/src/styles/darkTheme.ts
similarity index 57%
rename from src/theme.ts
rename to src/styles/darkTheme.ts
index b40cff6a6f63846c622d1abc6dc226dde0fb738f..be08ab4c858e9c0d12bbf296140746f30f03fa3d 100644
--- a/src/theme.ts
+++ b/src/styles/darkTheme.ts
@@ -1,25 +1,9 @@
 import { createMuiTheme } from '@material-ui/core';
 
-// eslint-disable-next-line import/prefer-default-export
-export const theme = createMuiTheme({
-  // TODO: Create default theme
-  /*   palette: {
-    primary: {},
-    secondary: {},
-    error: {},
-    success: {},
-    info: {},
-    warning: {},
-    grey: {},
-
-    text: {},
-  }, */
-  typography: {
-    fontFamily: 'Roboto',
+const darkTheme = createMuiTheme({
+  footer: {
+    background: '#222222',
   },
-});
-
-export const darkTheme = createMuiTheme({
   palette: {
     primary: {
       main: '#1A6B97',
@@ -36,6 +20,7 @@ export const darkTheme = createMuiTheme({
       default: '#2A2A28',
       paper: '#202020',
     },
+
     /* success: {},
     info: {},
     warning: {}, */
@@ -48,3 +33,5 @@ export const darkTheme = createMuiTheme({
     fontFamily: 'Roboto',
   },
 });
+
+export default darkTheme;
diff --git a/src/styles/lightTheme.ts b/src/styles/lightTheme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..157b6cfeb25b2e724111ca3330fc735e65777f1f
--- /dev/null
+++ b/src/styles/lightTheme.ts
@@ -0,0 +1,24 @@
+import { createMuiTheme } from '@material-ui/core';
+
+const lightTheme = createMuiTheme({
+  // TODO: Create default theme
+  /*   palette: {
+      primary: {},
+      secondary: {},
+      error: {},
+      success: {},
+      info: {},
+      warning: {},
+      grey: {},
+  
+      text: {},
+    }, */
+  footer: {
+    background: '#E0E0E0',
+  },
+  typography: {
+    fontFamily: 'Roboto',
+  },
+});
+
+export default lightTheme;
diff --git a/src/styles/material-ui.d.ts b/src/styles/material-ui.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93c7b56235c73cd6cc11933e9de3347372a4b2a3
--- /dev/null
+++ b/src/styles/material-ui.d.ts
@@ -0,0 +1,10 @@
+import '@material-ui/core/styles/createMuiTheme';
+
+declare module '@material-ui/core/styles/createMuiTheme' {
+  interface Theme {
+    footer: {
+      background: React.CSSProperties['background'];
+    };
+  }
+  interface ThemeOptions extends Theme {}
+}
diff --git a/src/styled-components.d.ts b/src/styles/styled-components.d.ts
similarity index 100%
rename from src/styled-components.d.ts
rename to src/styles/styled-components.d.ts