diff --git a/kolibri/core/assets/src/composables/useNow.js b/kolibri/core/assets/src/composables/useNow.js
new file mode 100644
index 00000000000..be83cafde13
--- /dev/null
+++ b/kolibri/core/assets/src/composables/useNow.js
@@ -0,0 +1,21 @@
+import { now as getNow } from 'kolibri.utils.serverClock';
+
+import { ref, onMounted, onUnmounted } from 'kolibri.lib.vueCompositionApi';
+
+export default function useNow(interval = 10000) {
+  const now = ref(getNow());
+
+  let timer;
+
+  onMounted(() => {
+    timer = setInterval(() => {
+      now.value = getNow();
+    }, interval);
+  });
+
+  onUnmounted(() => {
+    clearInterval(timer);
+  });
+
+  return { now };
+}
diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index d17dad1d196..d47b176d336 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -106,6 +106,7 @@ import NotificationsRoot from '../views/NotificationsRoot';
 import useMinimumKolibriVersion from '../composables/useMinimumKolibriVersion';
 import useUserSyncStatus from '../composables/useUserSyncStatus';
 import useUser from '../composables/useUser';
+import useNow from '../composables/useNow';
 
 // webpack optimization
 import CoreInfoIcon from '../views/CoreInfoIcon';
@@ -230,6 +231,7 @@ export default {
       useKResponsiveWindow,
       useKShow,
       useMinimumKolibriVersion,
+      useNow,
       useUser,
       useUserSyncStatus,
     },
diff --git a/kolibri/core/assets/src/views/SyncStatusDisplay.vue b/kolibri/core/assets/src/views/SyncStatusDisplay.vue
index 364817fcf9e..c40e290aa29 100644
--- a/kolibri/core/assets/src/views/SyncStatusDisplay.vue
+++ b/kolibri/core/assets/src/views/SyncStatusDisplay.vue
@@ -21,11 +21,15 @@
 
 <script>
 
-  import { now } from 'kolibri.utils.serverClock';
+  import useNow from 'kolibri.coreVue.composables.useNow';
   import { SyncStatus } from 'kolibri.coreVue.vuex.constants';
 
   export default {
     name: 'SyncStatusDisplay',
+    setup() {
+      const { now } = useNow();
+      return { now };
+    },
     props: {
       syncStatus: {
         type: String,
@@ -43,11 +47,6 @@
         },
       },
     },
-    data() {
-      return {
-        now: now(),
-      };
-    },
     computed: {
       syncTextDisplayMap() {
         const statusTranslations = {