diff --git a/src/App.js b/src/App.js
index 00c7ea9d..acb5b2c6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,7 +9,8 @@ class App extends Component {
       { id: 2, value: 0 },
       { id: 3, value: 0 },
       { id: 4, value: 0 }
-    ]
+    ],
+    total: 0
   };
 
   handleIncrement = counter => {
@@ -17,7 +18,9 @@ class App extends Component {
     const index = counters.indexOf(counter);
     counters[index] = { ...counters[index] };
     counters[index].value++;
-    this.setState({ counters });
+    let total = this.state.total;
+    total++;
+    this.setState({ counters, total });
   };
 
   handleDecrement = counter => {
@@ -25,7 +28,9 @@ class App extends Component {
     const index = counters.indexOf(counter);
     counters[index] = { ...counters[index] };
     counters[index].value--;
-    this.setState({ counters });
+    let total = this.state.total;
+    total--;
+    this.setState({ counters, total });
   };
 
   handleReset = () => {
@@ -33,12 +38,17 @@ class App extends Component {
       c.value = 0;
       return c;
     });
-    this.setState({ counters });
+    let total = 0;
+    this.setState({ counters, total });
   };
 
   handleDelete = counterId => {
     const counters = this.state.counters.filter(c => c.id !== counterId);
-    this.setState({ counters });
+    let total = 0;
+    counters.forEach(c => {
+      total = total + c.value;
+    })
+    this.setState({ counters, total });
   };
 
   handleRestart = () => {
@@ -54,6 +64,7 @@ class App extends Component {
         <main className="container">
           <Counters
             counters={this.state.counters}
+            total={this.state.total}
             onReset={this.handleReset}
             onIncrement={this.handleIncrement}
             onDecrement={this.handleDecrement}
diff --git a/src/components/counters.jsx b/src/components/counters.jsx
index edaccf3b..71782f47 100644
--- a/src/components/counters.jsx
+++ b/src/components/counters.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import Counter from "./counter";
+import Total from "./total";
 
 class Counters extends Component {
   render() {
@@ -9,6 +10,7 @@ class Counters extends Component {
       onDelete,
       onDecrement,
       counters,
+      total,
       onRestart
     } = this.props;
     return (
@@ -36,6 +38,9 @@ class Counters extends Component {
             onDelete={onDelete}
           />
         ))}
+        <Total
+          value={total}
+        />
       </div>
     );
   }
diff --git a/src/components/total.jsx b/src/components/total.jsx
new file mode 100644
index 00000000..797f3658
--- /dev/null
+++ b/src/components/total.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Total = ({value}) => (
+  <div className="row">
+    <div className="col-md-1">
+      <span style={{ fontSize: 24 }} className="badge m-2 badge-">
+        Total
+      </span>
+    </div>
+    <div className="col-md-1">
+      <span style={{ fontSize: 24 }} className="badge m-2 badge-">
+        {value}
+      </span>
+    </div>
+  </div>
+);
+
+export default Total;