diff --git a/package.json b/package.json
index 30f9b71..3364728 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "html-loader": "^0.5.0",
     "html-webpack-plugin": "^2.30.1",
     "mkdirp": "^0.5.1",
+    "moment": "^2.18.1",
     "node-sass": "^4.5.3",
     "purify-css": "^1.2.5",
     "purifycss-webpack": "^0.7.0",
diff --git a/src/css/main.scss b/src/css/main.scss
index aec1fa2..55ff594 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -68,10 +68,13 @@ html {
     margin: 0 -5px 15px;
     border-radius: 12px;
 
+    .top-bar {
+        margin-bottom: 0.5rem;
+    }
+
     .rule-name {
         color: $title-color;
         font-size: 1.25rem;
-        margin-bottom: 5px;
     }
 }
 
diff --git a/src/js/components/ScheduleBox.vue b/src/js/components/ScheduleBox.vue
index ae2051e..ab8d474 100644
--- a/src/js/components/ScheduleBox.vue
+++ b/src/js/components/ScheduleBox.vue
@@ -5,7 +5,18 @@
         </h2>
 
         <div class="main-schedule">
-            <div class="rule-name">{{ firstSchedule.rule.name }}</div>
+            <div class="level is-mobile top-bar">
+                <div class="level-left">
+                    <div class="level-item rule-name">{{ firstSchedule.rule.name }}</div>
+                </div>
+                <div class="level-right">
+                    <div class="level-item">
+                        {{ firstSchedule.start_time | time }} &ndash;
+                        {{ firstSchedule.end_time | time }}
+                    </div>
+                </div>
+            </div>
+            <div class="is-clearfix"></div>
             <div class="columns is-mobile">
                 <div class="column"><Stage :stage="firstSchedule.stage_a"></Stage></div>
                 <div class="column"><Stage :stage="firstSchedule.stage_b"></Stage></div>
@@ -24,6 +35,11 @@
                             Soon
                         </div>
                         <div>{{ upcomingSchedule.rule.name }}</div>
+                        <div>in {{ upcomingSchedule.start_time - now | duration }}</div>
+                        <div>
+                            {{ upcomingSchedule.start_time | time }} &ndash;
+                            {{ upcomingSchedule.end_time | time }}
+                        </div>
                     </div>
                     <div class="column is-8">
                         <div class="columns is-mobile">
@@ -39,6 +55,7 @@
 </template>
 
 <script>
+import moment from 'moment';
 import Stage from './Stage.vue';
 
 export default {
@@ -57,6 +74,20 @@ export default {
     watch: {
         firstSchedule(newSchedule, oldSchedule) { if (oldSchedule != newSchedule) this.upcomingScheduleIndex = 0; },
     },
+    filters: {
+        time(value) {
+            return moment.unix(value).local().format('ha');
+        },
+        duration(value) {
+            let duration = moment.duration(value, 'seconds');
+            let hours = Math.floor(duration.asHours());
+            let minutes = ('0' + duration.minutes()).substr(-2);
+            let seconds = ('0' + duration.seconds()).substr(-2);
+            if (hours)
+                return `${hours}h ${minutes}m ${seconds}s`;
+            return `${minutes}m ${seconds}s`;
+        },
+    },
     methods: {
         nextSchedule() {
             this.upcomingScheduleIndex++;
diff --git a/yarn.lock b/yarn.lock
index 3d5b338..74d99ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3357,6 +3357,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
   dependencies:
     minimist "0.0.8"
 
+moment@^2.18.1:
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+
 ms@0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"