diff --git a/step1-02/README.md b/step1-02/demo/README.md
similarity index 79%
rename from step1-02/README.md
rename to step1-02/demo/README.md
index 2b29ba0..2aa4110 100644
--- a/step1-02/README.md
+++ b/step1-02/demo/README.md
@@ -80,16 +80,3 @@ Open up the browser inspector and target our 'all' button. You'll notice that th
> **Specificity** states that regardless of cascade, the selector with the highest specificity wins
To fix this problem we need to either reduce the specificity of our button styles, or increase the specificity of the selected style. In this situation we will add `.filter` in front of the `.selected` selector, because the selected style only applies to the filter anyway.
-
-## Exercise
-
-1. Add an unordered list with class `todos` to the main section
-2. Add 4 list items with class `todo` inside of that list with the following content
- ``
-3. Add a span and a button to your footer
-4. Span content should be `4 items left` and button should say `Clear Completed` and have a class of `submit`
-5. Go into the CSS file and add `display: flex` to the footer. Also add `flex-grow:1` to the span inside of the footer
-
-> Hint: Look back at the CSS demo to see the various ways you can use selectors to target existing HTML
-
-> There are many strategies for creating and organizing class names in a large application. This lesson is focused on using CSS selectors, not the optimized way to scale your CSS.
diff --git a/step1-02/exercise/README.md b/step1-02/exercise/README.md
new file mode 100644
index 0000000..e09495f
--- /dev/null
+++ b/step1-02/exercise/README.md
@@ -0,0 +1,12 @@
+## Exercise
+
+1. Add an unordered list with class `todos` to the main section
+2. Add 4 list items with class `todo` inside of that list with the following content
+ ``
+3. Add a span and a button to your footer
+4. Span content should be `4 items left` and button should say `Clear Completed` and have a class of `submit`
+5. Go into the CSS file and add `display: flex` to the footer. Also add `flex-grow:1` to the span inside of the footer
+
+> Hint: Look back at the CSS demo to see the various ways you can use selectors to target existing HTML
+
+> There are many strategies for creating and organizing class names in a large application. This lesson is focused on using CSS selectors, not the optimized way to scale your CSS.
diff --git a/step1-03/README.md b/step1-03/demo/README.md
similarity index 73%
rename from step1-03/README.md
rename to step1-03/demo/README.md
index fced277..a9a15cf 100644
--- a/step1-03/README.md
+++ b/step1-03/demo/README.md
@@ -39,23 +39,3 @@ document.querySelector('.addTodo .submit').onclick = addTodo;
```
Today we'll use #2, as this is the way it will work in React as well.
-
-## Exercise
-
-### Write updateRemaining function
-
-1. Get a reference to the span with the `remaining` class, and store it in a variable
-2. Use [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos.
-3. Set the `innerText` of the remaining span to the length of those todos.
-4. Add updateRemaining() to addTodo
-
-### Write a clearCompleted function
-
-1. Get a reference to all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
-2. Use a `for (let todo of todos)` loop to iterate over each todo
-3. Inside the for loop write an `if` statement to test if the `input` inside of the todo has a checked value of true
- > Hint: you can use querySelector on any HTML node to find child elements within
-4. Call `todo.remove()` for any todo whos input check is true
-5. After the loop is done, run `updateRemaining()`
-6. Attach this function to the footer button
-7. Test it out!
diff --git a/step1-03/exercise/README.md b/step1-03/exercise/README.md
new file mode 100644
index 0000000..b3736b4
--- /dev/null
+++ b/step1-03/exercise/README.md
@@ -0,0 +1,19 @@
+## Exercise
+
+### Write updateRemaining function
+
+1. Get a reference to the span with the `remaining` class, and store it in a variable
+2. Use [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos.
+3. Set the `innerText` of the remaining span to the length of those todos.
+4. Add updateRemaining() to addTodo
+
+### Write a clearCompleted function
+
+1. Get a reference to all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
+2. Use a `for (let todo of todos)` loop to iterate over each todo
+3. Inside the for loop write an `if` statement to test if the `input` inside of the todo has a checked value of true
+ > Hint: you can use querySelector on any HTML node to find child elements within
+4. Call `todo.remove()` for any todo whos input check is true
+5. After the loop is done, run `updateRemaining()`
+6. Attach this function to the footer button
+7. Test it out!
diff --git a/step1-04/README.md b/step1-04/demo/README.md
similarity index 100%
rename from step1-04/README.md
rename to step1-04/demo/README.md
diff --git a/step1-05/README.md b/step1-05/demo/README.md
similarity index 78%
rename from step1-05/README.md
rename to step1-05/demo/README.md
index 1006f06..5bcbab1 100644
--- a/step1-05/README.md
+++ b/step1-05/demo/README.md
@@ -72,16 +72,3 @@ return (
```
> Note that I've removed the title span as it was only needed to make targeting that text easier
-
-## Exercise
-
-### TodoFooter
-
-1. Update the TodoFooter component, copying over the `