diff --git a/ui/src/components/ClockDisplay.vue b/ui/src/components/Clock.vue
similarity index 62%
rename from ui/src/components/ClockDisplay.vue
rename to ui/src/components/Clock.vue
index e9a0e7b..a0e3611 100644
--- a/ui/src/components/ClockDisplay.vue
+++ b/ui/src/components/Clock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>{{ clock }}</div>
+  <div>{{ formatted }}</div>
 </template>
 
 <script lang="ts">
@@ -7,23 +7,22 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 import { DateTime } from "luxon";
 
 @Component
-export default class ClockDisplay extends Vue {
-  private clock = "";
+export default class Clock extends Vue {
+  private formatted = "";
   private interval?: number;
 
   @Prop()
-  format!: string;
+  public format!: string;
 
-  private created(): void {
+  public created(): void {
     this.interval = setInterval((): void => {
-      this.clock = DateTime.now()
+      this.formatted = DateTime.now()
         .setLocale(navigator.language)
         .toFormat(this.format);
     }, 1000);
   }
 
-  private beforeDestroy(): void {
-    // prevent memory leak
+  public beforeDestroy(): void {
     clearInterval(this.interval);
   }
 }
diff --git a/ui/src/components/TitleBar.vue b/ui/src/components/TitleBar.vue
index a7ffb05..a010fd5 100644
--- a/ui/src/components/TitleBar.vue
+++ b/ui/src/components/TitleBar.vue
@@ -3,19 +3,19 @@
     <v-spacer />
 
     <v-col>
-      <ClockDisplay format="DDD" />
-      <ClockDisplay format="T" />
+      <Clock format="DDD" />
+      <Clock format="T" />
     </v-col>
   </v-toolbar>
 </template>
 
 <script>
 import { Component, Vue } from "vue-property-decorator";
-import ClockDisplay from "./ClockDisplay.vue";
+import Clock from "./Clock.vue";
 
 @Component({
   components: {
-    ClockDisplay,
+    Clock,
   },
 })
 export default class TitleBar extends Vue {}