diff --git a/src/renderer/src/components/AppTopBar.vue b/src/renderer/src/components/AppTopBar.vue
index a374be1..e0a9d1b 100644
--- a/src/renderer/src/components/AppTopBar.vue
+++ b/src/renderer/src/components/AppTopBar.vue
@@ -1,13 +1,7 @@
 <template>
   <v-system-bar class="position-fixed">
     <v-icon icon="mdi-window-close" @click="ipcHandleExit"></v-icon>
-    <span class="ms-2">{{
-      new Date().toLocaleTimeString('en-US', {
-        hour: 'numeric',
-        minute: 'numeric',
-        hour12: false
-      })
-    }}</span>
+    <span class="ms-2">{{ currentTime }}</span>
   </v-system-bar>
   <v-app-bar :elevation="2" class="position-fixed">
     <v-app-bar-title>{{ profileStore.appHeader }}</v-app-bar-title>
@@ -21,12 +15,32 @@
 </template>
 
 <script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useProfileStore } from '../stores/app';
 
 const profileStore = useProfileStore();
+const router = useRouter();
+const currentTime = ref(
+  new Date().toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false
+  })
+);
+
+const updateTime = () => {
+  currentTime.value = new Date().toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false
+  });
+};
+
+onMounted(() => {
+  const interval = setInterval(updateTime, 1000);
+  onUnmounted(() => clearInterval(interval));
+});
 
 const ipcHandleExit = () => window.electron.ipcRenderer.send('prog:exit');
-
-const router = useRouter();
 </script>