diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
new file mode 100644
index 00000000..506cfb5f
--- /dev/null
+++ b/src/components/Footer/Footer.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import './footer.css';
+
+export const Footer = () => {
+    return (
+        <footer>
+            <div>2021 © Outstaffing</div>
+        </footer>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Footer/footer.css b/src/components/Footer/footer.css
new file mode 100644
index 00000000..3ac9641b
--- /dev/null
+++ b/src/components/Footer/footer.css
@@ -0,0 +1,11 @@
+footer {
+    padding: 0 5rem;
+  }
+  
+footer>div {
+    border-top: 2px solid #73c141;
+    padding: 1rem;
+    font-family: 'Muller';
+    font-weight: 300;
+    font-size: 1.2em;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index f37a6ba1..802f4aa6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,14 +22,3 @@ h1 {
   display: none;
 }
 
-footer {
-  padding: 0 5rem;
-}
-
-footer>div {
-  border-top: 2px solid #73c141;
-  padding: 1rem;
-  font-family: 'Muller';
-  font-weight: 300;
-  font-size: 1.2em;
-}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index ce785e70..fc995a6e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { store } from './store/store';
 import { Provider } from 'react-redux';
 import App from './App';
+import { Footer } from './components/Footer/Footer';
 
 import './index.css';
 
@@ -10,9 +11,7 @@ ReactDOM.render(
   <Provider store={store}>
     <>
     <App />
-    <footer>
-      <div>2021 © Outstaffing</div>
-    </footer>
+    <Footer />
     </>
   </Provider>,
   document.getElementById('root')