diff --git a/src/App.js b/src/App.js
index ab6e762..1a41271 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,8 @@ import logo from './logo.svg';
 import './App.css';
 import Timer from './Timer';
 import './Timer.css';
+import List from './List';
+import './List.css';
 
 function App() {
   return (
@@ -11,6 +13,7 @@ function App() {
       </header>
       <main className="App-content">
         <Timer />
+        <List />
       </main>
     </div>
   );
diff --git a/src/List.css b/src/List.css
new file mode 100644
index 0000000..9d7365e
--- /dev/null
+++ b/src/List.css
@@ -0,0 +1,15 @@
+.list {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+  flex: 1;
+}
+
+.timings ul {
+  list-style-type: none;
+  padding: 0;
+}
diff --git a/src/List.js b/src/List.js
new file mode 100644
index 0000000..2b2b98e
--- /dev/null
+++ b/src/List.js
@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+
+const List = () => {
+  let list = [];
+  if (list.length === 0) {
+    list.push('No times saved');
+  }
+
+  function clear() {
+    list = [];
+  }
+
+  return (
+    <div className="list">
+        <div className="timings">
+          <ul>
+            {list.map((item, index) => (
+            <li key={index}>{item}</li>
+            ))}
+          </ul>
+        </div>
+        <button className="button" onClick={clear}>
+        Clear list
+        </button>
+    </div>
+  );
+};
+
+export default List;