diff --git a/src/containers/Footer.js b/src/containers/Footer.js
new file mode 100644
index 0000000..4f1e2af
--- /dev/null
+++ b/src/containers/Footer.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import footerStyles from '../styles/footerStyles';
+
+export default function Footer() {
+    const classes = footerStyles();
+    return (
+        <div className={classes.container}>
+            
+        </div>
+    )
+}
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 63cd8b2..fe096ba 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import HomeHeader from '../containers/HomeHeader';
 import Auth from '../containers/Auth';
+import Footer from '../containers/Footer';
 import homeStyles from '../styles/homeStyles';
 
 export default function HomePage() {
@@ -13,6 +14,7 @@ export default function HomePage() {
 
             <Auth /> 
 
+            <Footer />
 
         </div>
     )
diff --git a/src/styles/colorThemes.js b/src/styles/colorThemes.js
index 730ed07..c629b51 100644
--- a/src/styles/colorThemes.js
+++ b/src/styles/colorThemes.js
@@ -3,6 +3,7 @@ export const holisticTheme = {
     // Root
     bgRoot: "#5C4E75",
     textRoot: '#EFEFEF',
+    bgDark: "#2d2639",
     // Container
     bgContainer: '#A395B8',
     // Font
diff --git a/src/styles/footerStyles.js b/src/styles/footerStyles.js
new file mode 100644
index 0000000..300654f
--- /dev/null
+++ b/src/styles/footerStyles.js
@@ -0,0 +1,11 @@
+import { makeStyles } from '@material-ui/core/styles';
+import { holisticTheme } from './colorThemes'; 
+
+const footerStyles = makeStyles(() => ({
+    container: {
+        height: '25vh',
+        backgroundColor: holisticTheme.bgDark,
+    }
+}));
+
+export default footerStyles;
\ No newline at end of file