diff --git a/src/App.js b/src/App.js
index 993d922..3f8312a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,28 @@
 import React, { Component } from "react";
 
 import FunctionalComponent from "./components/FunctionalComponent";
-import ClassComponent from "./components/ClassComponent";
+import Addition from "./components/Addition";
+import Subtraction from "./components/Subtraction";
+import Multiply from "./components/Multiply";
+import Divide from "./components/Divide";
 
 import "./css/App.css";
 
 class App extends Component {
   render() {
+
+  
+
+
     return (
       <div className="App">
         <FunctionalComponent />
-        <ClassComponent />
+        <Addition />
+        <Subtraction />
+        <Multiply />
+        <Divide />
       </div>
+      
     );
   }
 }
diff --git a/src/components/Addition.js b/src/components/Addition.js
new file mode 100644
index 0000000..7ee5ebe
--- /dev/null
+++ b/src/components/Addition.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react'
+
+class Addition extends Component {
+
+    state={
+        total:0,
+        num1:0, 
+        num2:0
+    }
+    setNum=(e, num)=>{
+        console.log(e.target.value)
+        this.setState({
+            [num]: e.target.value
+        })
+    }
+    getTotal=()=>{
+        const grandTotal = parseInt(this.state.num1)+parseInt(this.state.num2)
+       
+    
+    this.setState({
+        // sets numbers in textbox back to zero
+        total: grandTotal,
+        num1:0, 
+        num2:0,
+        })
+    }
+
+
+
+    render() {
+        return (
+<div className="container">
+    <h1>Add with React!</h1>
+
+  <div className="add">
+  <input type="number"
+  name="num1"
+  placeholder="Enter your first number"
+  value={this.state.num1}
+  onChange={ (e) => this.setNum(e, 'num1') }
+/>
+
+    <span>+</span>
+    <input type="number"
+  name="num2"
+  placeholder="Enter your first number"
+  value={this.state.num2}
+  onChange={ (e) => this.setNum(e, 'num2') }
+/>
+    
+    <button onClick={this.getTotal}>=</button>
+    <h3>Addition results go here!</h3>
+    <p>{this.state.total}</p>
+  </div>
+</div>
+
+
+       )
+    }
+}
+
+
+
+
+
+
+export default Addition
diff --git a/src/components/ClassComponent.js b/src/components/ClassComponent.js
deleted file mode 100644
index fdf0e4f..0000000
--- a/src/components/ClassComponent.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Component } from 'react'
-
-class ClassComponent extends Component {
-    render() {
-        return (
-            <div>
-                Class Component
-            </div>
-        )
-    }
-}
-
-export default ClassComponent
diff --git a/src/components/Divide.js b/src/components/Divide.js
new file mode 100644
index 0000000..1256650
--- /dev/null
+++ b/src/components/Divide.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+
+class Divide extends Component {
+
+    state={
+        total:0,
+        num1:0, 
+        num2:0
+    }
+    setNum=(e, num)=>{
+        console.log(e.target.value)
+        this.setState({
+            [num]: e.target.value
+        })
+    }
+    getTotal=()=>{
+        const grandTotal = parseInt(this.state.num1)/parseInt(this.state.num2)
+       
+    
+    this.setState({
+        // sets numbers in textbox back to zero
+        total: grandTotal,
+        num1:0, 
+        num2:0,
+        })
+    }
+
+
+
+    render() {
+        return (
+<div className="container">
+    <h1>Divide with React!</h1>
+
+  <div className="subtract">
+  <input type="number"
+  name="num1"
+  placeholder="Enter your first number"
+  value={this.state.num1}
+  onChange={ (e) => this.setNum(e, 'num1') }
+/>
+
+    <span>/</span>
+    <input type="number"
+  name="num2"
+  placeholder="Enter your first number"
+  value={this.state.num2}
+  onChange={ (e) => this.setNum(e, 'num2') }
+/>
+    
+    <button onClick={this.getTotal}>=</button>
+    <h3>Divide results go here!</h3>
+    <p>{this.state.total}</p>
+  </div>
+</div>
+
+
+       )
+    }
+}
+
+export default Divide
\ No newline at end of file
diff --git a/src/components/Multiply.js b/src/components/Multiply.js
new file mode 100644
index 0000000..fbd7c94
--- /dev/null
+++ b/src/components/Multiply.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+
+class Multiply extends Component {
+
+    state={
+        total:0,
+        num1:0, 
+        num2:0
+    }
+    setNum=(e, num)=>{
+        console.log(e.target.value)
+        this.setState({
+            [num]: e.target.value
+        })
+    }
+    getTotal=()=>{
+        const grandTotal = parseInt(this.state.num1)*parseInt(this.state.num2)
+       
+    
+    this.setState({
+        // sets numbers in textbox back to zero
+        total: grandTotal,
+        num1:0, 
+        num2:0,
+        })
+    }
+
+
+
+    render() {
+        return (
+<div className="container">
+    <h1>Multiply with React!</h1>
+
+  <div className="subtract">
+  <input type="number"
+  name="num1"
+  placeholder="Enter your first number"
+  value={this.state.num1}
+  onChange={ (e) => this.setNum(e, 'num1') }
+/>
+
+    <span>*</span>
+    <input type="number"
+  name="num2"
+  placeholder="Enter your first number"
+  value={this.state.num2}
+  onChange={ (e) => this.setNum(e, 'num2') }
+/>
+    
+    <button onClick={this.getTotal}>=</button>
+    <h3>Multiply results go here!</h3>
+    <p>{this.state.total}</p>
+  </div>
+</div>
+
+
+       )
+    }
+}
+
+export default Multiply
\ No newline at end of file
diff --git a/src/components/Subtraction.js b/src/components/Subtraction.js
new file mode 100644
index 0000000..ad14e6c
--- /dev/null
+++ b/src/components/Subtraction.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+
+class Subtraction extends Component {
+
+    state={
+        total:0,
+        num1:0, 
+        num2:0
+    }
+    setNum=(e, num)=>{
+        console.log(e.target.value)
+        this.setState({
+            [num]: e.target.value
+        })
+    }
+    getTotal=()=>{
+        const grandTotal = parseInt(this.state.num1)-parseInt(this.state.num2)
+       
+    
+    this.setState({
+        // sets numbers in textbox back to zero
+        total: grandTotal,
+        num1:0, 
+        num2:0,
+        })
+    }
+    render() {
+        return (
+<div className="container">
+    <h1>Subtract with React!</h1>
+
+  <div className="subtract">
+  <input type="number"
+  name="num1"
+  placeholder="Enter your first number"
+  value={this.state.num1}
+  onChange={ (e) => this.setNum(e, 'num1') }
+/>
+
+    <span>-</span>
+    <input type="number"
+  name="num2"
+  placeholder="Enter your first number"
+  value={this.state.num2}
+  onChange={ (e) => this.setNum(e, 'num2') }
+/>
+    
+    <button onClick={this.getTotal}>=</button>
+    <h3>Subtraction results go here!</h3>
+    <p>{this.state.total}</p>
+  </div>
+</div>
+
+
+       )
+    }
+}
+
+export default Subtraction
\ No newline at end of file