diff --git a/aleksis/apps/alsijil/assets/components/coursebook/CourseBook.vue b/aleksis/apps/alsijil/assets/components/coursebook/CourseBook.vue
index 425e21c6388869419b18ab5f09ac107f50224c9a..f8921271cb26d1293174f9797d1264851730307b 100644
--- a/aleksis/apps/alsijil/assets/components/coursebook/CourseBook.vue
+++ b/aleksis/apps/alsijil/assets/components/coursebook/CourseBook.vue
@@ -37,7 +37,7 @@
 
 <script>
 import {CHANGES, SAVED, UPDATING} from "../../UpdateStatuses.js";
-import UpdateIndicator from "./UpdateIndicator.js";
+import UpdateIndicator from "./UpdateIndicator.vue";
 import LessonDocumentations from "./LessonDocumentations.vue";
 
 export default {
diff --git a/aleksis/apps/alsijil/assets/components/coursebook/UpdateIndicator.js b/aleksis/apps/alsijil/assets/components/coursebook/UpdateIndicator.vue
similarity index 75%
rename from aleksis/apps/alsijil/assets/components/coursebook/UpdateIndicator.js
rename to aleksis/apps/alsijil/assets/components/coursebook/UpdateIndicator.vue
index 50d294fb06ba69d80c53637d490f6868bbf78920..bf330d05ccd3a752b36a761b8a039e6e22df4bbb 100644
--- a/aleksis/apps/alsijil/assets/components/coursebook/UpdateIndicator.js
+++ b/aleksis/apps/alsijil/assets/components/coursebook/UpdateIndicator.vue
@@ -1,3 +1,31 @@
+<template>
+  <v-tooltip bottom>
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn
+        absolute
+        fab
+        right
+        icon
+
+        v-bind="attrs"
+        v-on="on"
+
+        @click="() => {isAbleToClick ? $emit('manual-update') : null}"
+        :loading="status === UPDATING"
+      >
+        <v-icon
+          v-if="status !== UPDATING"
+          :color="color"
+        >
+          {{ icon }}
+        </v-icon>
+      </v-btn>
+    </template>
+    <span>{{ text }}</span>
+  </v-tooltip>
+</template>
+
+<script>
 import {CHANGES, ERROR, SAVED, UPDATING} from "../../UpdateStatuses.js";
 
 export default {
@@ -50,30 +78,5 @@ export default {
             return this.status === CHANGES || this.status === ERROR;
         }
     },
-    template: `
-    <v-tooltip bottom>
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn
-          absolute
-          fab
-          right
-          icon
-
-          v-bind="attrs"
-          v-on="on"
-          
-          @click="() => {isAbleToClick ? $emit('manual-update') : null}"
-          :loading="status === UPDATING"
-        >
-          <v-icon
-            v-if="status !== UPDATING"
-            :color="color"
-          >
-            {{ icon }}
-          </v-icon>
-        </v-btn>
-      </template>
-      <span>{{ text }}</span>
-    </v-tooltip>
-    `,
-}
\ No newline at end of file
+}
+</script>