diff --git a/.gitignore b/.gitignore
index 4d29575..5221c19 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+TODO.md
+
+.vercel
\ No newline at end of file
diff --git a/src/index.css b/src/App.css
similarity index 100%
rename from src/index.css
rename to src/App.css
diff --git a/src/App.jsx b/src/App.jsx
index 5ae922d..ba3ce92 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -49,12 +49,12 @@ const App = () => {
   }, [addAndRoll]);
 
   //Rolls pool and resets to 0 if it hits 6 or more
-  // useEffect(() => {
-  //   if (currentPool >= 6 && currentPool != 0) {
-  //     rollHelper(currentPool);
-  //     setCurrentPool(0);
-  //   }
-  // }, [currentPool]);
+  useEffect(() => {
+    if (currentPool >= 6) {
+      rollHelper(currentPool);
+      setCurrentPool(0);
+    }
+  }, [currentPool]);
 
   return (
     <div className='ui container my-container'>
diff --git a/src/RollHistory.js b/src/Components/RollHistory.js
similarity index 100%
rename from src/RollHistory.js
rename to src/Components/RollHistory.js
diff --git a/src/TensionButton/TensionButton.js b/src/Components/TensionButton/TensionButton.jsx
similarity index 100%
rename from src/TensionButton/TensionButton.js
rename to src/Components/TensionButton/TensionButton.jsx
diff --git a/src/TensionCard/TensionCard.css b/src/Components/TensionCard/TensionCard.css
similarity index 100%
rename from src/TensionCard/TensionCard.css
rename to src/Components/TensionCard/TensionCard.css
diff --git a/src/TensionCard/TensionCard.js b/src/Components/TensionCard/TensionCard.jsx
similarity index 87%
rename from src/TensionCard/TensionCard.js
rename to src/Components/TensionCard/TensionCard.jsx
index 9834dd9..f423108 100644
--- a/src/TensionCard/TensionCard.js
+++ b/src/Components/TensionCard/TensionCard.jsx
@@ -12,8 +12,4 @@ const TensionCard = ({ label, value }) => {
   );
 };
 
-TensionCard.defaultProps = {
-  value: 5,
-};
-
 export default TensionCard;
diff --git a/src/Usage.css b/src/Components/Usage/Usage.css
similarity index 100%
rename from src/Usage.css
rename to src/Components/Usage/Usage.css
diff --git a/src/Usage.js b/src/Components/Usage/Usage.jsx
similarity index 100%
rename from src/Usage.js
rename to src/Components/Usage/Usage.jsx
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index d6b38f1..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import './index.css';
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import TensionButton from './TensionButton/TensionButton';
-import TensionCard from './TensionCard/TensionCard';
-// import RollHistory from './RollHistory';
-import Usage from './Usage';
-
-class App extends React.Component {
-  state = { currentPool: 0, rollResults: [] };
-
-  //Adds one to state of currentPool
-  incrementPool = () => {
-    //setState(state => {...}) is used to force a state change and render immediately rather than waiting for next batch
-    this.setState(state => {
-      return { currentPool: state.currentPool + 1 };
-    });
-  };
-
-  //Increments and rolls
-  incrementPoolAndRoll = () => {
-    this.incrementPool();
-    this.rollAndKeep();
-  };
-
-  //ALWAYS ROLL ONE DIE, even if the current pool has no dice in it
-  //If currentPool === 0, sets currentPool = 1, calls rollHelper, then sets back to 0
-  //If currentPool > 0, calls rollHelper
-  rollAndKeep = () => {
-    if (this.state.currentPool === 0) {
-      this.setState(() => {
-        return {
-          currentPool: 1,
-        };
-      });
-      this.rollHelper();
-      this.setState(() => {
-        return {
-          currentPool: 0,
-        };
-      });
-    } else {
-      this.rollHelper();
-    }
-  };
-
-  //Sets state of rollResults to array of length this.state.currentPool filled with random values between 1 and 6
-  rollHelper = () => {
-    //Forced state change repeated from above
-    this.setState(state => {
-      return {
-        //Creates an array of length = state.currentPool by defining an object { length: state.currentPool }
-        //Fills array with random numbers 1-6
-        //Concats array values and returns as string seperated by ', ' to be readable
-        rollResults: Array.from({ length: state.currentPool }, () =>
-          Math.ceil(Math.random() * 6)
-        ),
-      };
-    });
-  };
-
-  render() {
-    return (
-      <div className='ui container my-container'>
-        <div className='card-container'>
-          <TensionCard
-            label='Current Tension Pool'
-            value={this.state.currentPool}
-          />
-          <TensionCard
-            label='Tension Roll Results'
-            value={this.state.rollResults.join(', ')}
-          />
-        </div>
-        <div className='button-container'>
-          <TensionButton
-            buttonName='Add One Die'
-            onClick={this.incrementPool}
-          />
-          <TensionButton
-            buttonName='Add One Die, Roll'
-            onClick={this.incrementPoolAndRoll}
-          />
-          <TensionButton
-            buttonName='Roll and Keep'
-            onClick={this.rollAndKeep}
-          />
-        </div>
-        <div>
-          {/*TODO implement rollResults history logging. Requires redux?*/}
-          {/* Cant get this to work. Will need to revisit at later date. */}
-          {/* <RollHistory history={this.state.rollResults} /> */}
-        </div>
-        <div className='usage-container'>
-          <Usage />
-        </div>
-      </div>
-    );
-  }
-
-  componentDidUpdate() {
-    if (this.state.currentPool >= 6) {
-      this.rollHelper();
-      this.setState({ currentPool: 0 });
-    }
-  }
-}
-
-ReactDOM.render(<App />, document.querySelector('#root'));
diff --git a/src/index.jsx b/src/index.jsx
new file mode 100644
index 0000000..f1d1376
--- /dev/null
+++ b/src/index.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.querySelector('#root'));