diff --git a/dark-mode/src/index.js b/dark-mode/src/index.js
index 9d6ac6cea..a320edce8 100644
--- a/dark-mode/src/index.js
+++ b/dark-mode/src/index.js
@@ -3,10 +3,13 @@ import ReactDOM from 'react-dom';
 import AppContainer from './common/containers/App';
 import './styles/_main.scss';
 import Routes from './routes';
+import {ThemeProvider} from "./routes/App/contexts/theme";
 
 ReactDOM.render(
   <AppContainer>
-    <Routes />
+    <ThemeProvider>
+      <Routes />
+    </ThemeProvider>
   </AppContainer>,
   document.getElementById('root')
 );
diff --git a/dark-mode/src/routes/App/components/App.js b/dark-mode/src/routes/App/components/App.js
index f69fd1260..b61c7947d 100644
--- a/dark-mode/src/routes/App/components/App.js
+++ b/dark-mode/src/routes/App/components/App.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faMoon } from '@fortawesome/free-solid-svg-icons';
 import '../styles/_app.scss';
+import { ThemeContext } from '../contexts/theme';
 
 function App() {
+  const [{theme}, toggleTheme] = useContext(ThemeContext);
   return (
     <div className="app">
       <div className="level">
@@ -12,8 +13,8 @@ function App() {
         </div>
 
         {/* --The button that should toggle dark mode-- */}
-        <button className="app__dark-mode-btn icon level-right">
-          <FontAwesomeIcon icon={faMoon} />
+        <button className="app__dark-mode-btn icon level-right" onClick={toggleTheme}>
+          <FontAwesomeIcon icon={theme.icon} color={theme.iconColor} />
         </button>
 
       </div>
diff --git a/dark-mode/src/routes/App/contexts/theme.js b/dark-mode/src/routes/App/contexts/theme.js
new file mode 100644
index 000000000..dea3f2c31
--- /dev/null
+++ b/dark-mode/src/routes/App/contexts/theme.js
@@ -0,0 +1,43 @@
+import { createContext, useEffect, useState } from "react";
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
+
+const themes = {
+  dark: {
+    icon: faSun,
+    iconColor: "#FFA500"
+  },
+  light: {
+    icon: faMoon,
+    iconColor: "#121212"
+  }
+}
+
+export const ThemeContext = createContext();
+
+export const ThemeProvider = ({children}) => {
+  const [isDark, setIsDark] = useState(false);
+  const theme = isDark ? themes.dark : themes.light;
+
+  if (isDark) {
+    document.getElementById('root').classList.add('dark-mode');
+  }
+  else {
+    document.getElementById('root').classList.remove('dark-mode');
+  }
+
+  const toggleTheme = () => {
+    localStorage.setItem('isDark', JSON.stringify(!isDark));
+    setIsDark(!isDark);
+  }
+
+  useEffect(() =>{
+    const isDark = localStorage.getItem("isDark") === "true";
+    setIsDark(isDark);
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={[{theme, isDark}, toggleTheme]}>
+      {children}
+    </ThemeContext.Provider>
+  )
+};
\ No newline at end of file