diff --git a/src/App.js b/src/App.js
index 4a6f800f..8003ae3f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,19 @@
 import React from "react";
 import logo from "./logo.png";
 import "./App.css";
+import Clock from "../src/Clock";
 
 class App extends React.Component {
+  Clock;
+
   render() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
+          <Clock timeZone="Europe/Stockholm" />
+          <Clock timeZone="America/Los_Angeles" />
+          <Clock timeZone="Asia/Singapore" />
         </header>
       </div>
     );
diff --git a/src/Clock.js b/src/Clock.js
new file mode 100644
index 00000000..3ad545ac
--- /dev/null
+++ b/src/Clock.js
@@ -0,0 +1,34 @@
+import React from "react";
+import logo from "./logo.png";
+import "./App.css";
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { date: new Date() };
+  }
+
+  componentDidMount() {
+    this.timerId = setInterval(() => {
+      this.setState({
+        date: new Date(),
+      });
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerId);
+  }
+
+  render() {
+    return (
+      <p>
+        {`${this.props.timeZone}: ${this.state.date.toLocaleString("en-GB", {
+          timeZone: this.props.timeZone,
+        })}`}
+      </p>
+    );
+  }
+}
+
+export default Clock;