diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..4f6bd6ce
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#102F4B",
+        "titleBar.activeBackground": "#164269",
+        "titleBar.activeForeground": "#FAFCFE"
+    }
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 462abb74..1c3f10d6 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,18 @@
 
 This project allows you to practice the concepts and techniques learned in this module and apply them in a concrete project. This module explored Form management in React. You learned what stateful logic is, how to build custom hooks, and how to compose multiple hooks together. In your project you will demonstrate proficiency of these subjects and principles by creating an application using each of these.
 
+- [Module Project: Composing Stateful Logic - Dark Mode](#module-project-composing-stateful-logic---dark-mode)
+  - [Instructions](#instructions)
+    - [Commits](#commits)
+    - [Description](#description)
+  - [Project Set Up](#project-set-up)
+  - [Minimum Viable Product](#minimum-viable-product)
+  - [STEP 1 - useLocalStorage](#step-1---uselocalstorage)
+  - [STEP 2 - useDarkMode](#step-2---usedarkmode)
+  - [STEP 3 - Using the hook in a component](#step-3---using-the-hook-in-a-component)
+  - [Stretch Problems](#stretch-problems)
+  - [Submission Format](#submission-format)
+  - [Rick Mansfield's Pull Req Link](#rick-mansfields-pull-req-link)
 ## Instructions
 
 **Read these instructions carefully. Understand exactly what is expected _before_ starting this project.**
@@ -130,3 +142,7 @@ After finishing your required elements, you can push your work further. These go
 - [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into `main` (student's Repository). **Please don't merge your own pull request**
 - [ ] From the home page of your repo, make sure you have your branch selected
 - [ ] Copy the URL and paste it into Canvas to submit your project
+
+## Rick Mansfield's Pull Req Link
+
+- [Link for Convenience](https://github.com/LambdaSchool/web-module-project-custom-hook/pull/75)
\ No newline at end of file
diff --git a/src/components/hooks/useDarkMode.js b/src/components/hooks/useDarkMode.js
new file mode 100644
index 00000000..451e0899
--- /dev/null
+++ b/src/components/hooks/useDarkMode.js
@@ -0,0 +1,7 @@
+import { useLocalStorage } from './useLocalStorage';
+
+export const useDarkMode = (key) => {
+    const [value, setValue] = useLocalStorage(key)
+
+    return([value, setValue])
+}
\ No newline at end of file
diff --git a/src/components/hooks/useLocalStorage.js b/src/components/hooks/useLocalStorage.js
new file mode 100644
index 00000000..e887c6c0
--- /dev/null
+++ b/src/components/hooks/useLocalStorage.js
@@ -0,0 +1,34 @@
+// import { useState } from "react";
+
+// const useLocalStorage = (key, initialValue) => {
+
+//     const [value, setValue] = useState(() => {
+//         if (localStorage.getItem(key)) {
+//             return (JSON.parse(localStorage.getItem(key)));
+//         } else {
+//             localStorage.setItem(key, JSON.stringify(initialValue));
+//             return initialValue;
+//         }
+//     });
+//     const setStoredValue = (value) => {
+//         localStorage.setItem(key, JSON.stringify(value));
+//         setValue(value);
+//     }
+
+//     return ([value, setStoredValue]);
+// }
+// export default useLocalStorage;
+
+import { useState } from 'react';
+
+export const useLocalStorage = (key, initialValue) => {
+    const [storedValue, setStoredValue] = useState(() => {
+        const item = window.localStorage.getItem(key);
+        return item ? JSON.parse(item) : initialValue;
+    })
+    const setValue = value => {
+        setStoredValue(value);
+        window.localStorage.setItem(key, JSON.stringify(value))
+    }
+    return([storedValue, setValue])
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 956fe3a7..1f3cf664 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import ReactDOM from "react-dom";
 import axios from "axios";
+import { useDarkMode } from "./hooks/useDarkMode";
 
 import Charts from "./components/Charts";
 import Navbar from "./components/Navbar";
@@ -10,7 +11,7 @@ import "./styles.scss";
 
 const App = () => {
   const [coinData, setCoinData] = useState([]);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useDarkMode(false);
 
   useEffect(() => {
     axios
@@ -21,7 +22,7 @@ const App = () => {
       .catch(err => console.log(err));
   }, []);
   return (
-    <div className={darkMode ? "dark-mode App" : "App"}>
+    <div className={darkMode? "dark-mode App" : "App"}>
       <Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
       <Charts coinData={coinData} />
     </div>
diff --git a/src/index1.js b/src/index1.js
new file mode 100644
index 00000000..956fe3a7
--- /dev/null
+++ b/src/index1.js
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+import axios from "axios";
+
+import Charts from "./components/Charts";
+import Navbar from "./components/Navbar";
+
+
+import "./styles.scss";
+
+const App = () => {
+  const [coinData, setCoinData] = useState([]);
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    axios
+      .get(
+        "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=true"
+      )
+      .then(res => setCoinData(res.data))
+      .catch(err => console.log(err));
+  }, []);
+  return (
+    <div className={darkMode ? "dark-mode App" : "App"}>
+      <Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
+      <Charts coinData={coinData} />
+    </div>
+  );
+};
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);