diff --git a/ui/src/App.vue b/ui/src/App.vue
index e71df04..a5e7772 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,18 +1,18 @@
 <template>
   <div id="app">
     <img class="logo" alt="Lenaistenlogo" src="./assets/logo.png" />
-    <BDay />
+    <Gratulation />
   </div>
 </template>
 
 <script>
-import BDay from "./components/BDay.vue";
+import Gratulation from "./components/Gratulation.vue";
 
 export default {
   name: "App",
 
   components: {
-    BDay,
+    Gratulation,
   },
 
   computed: {
diff --git a/ui/src/components/BDay.vue b/ui/src/components/Gratulation.vue
similarity index 95%
rename from ui/src/components/BDay.vue
rename to ui/src/components/Gratulation.vue
index 4413ed6..518eb19 100644
--- a/ui/src/components/BDay.vue
+++ b/ui/src/components/Gratulation.vue
@@ -29,7 +29,7 @@
 
 <script>
 export default {
-  name: "BDay",
+  name: "Gratulation",
 
   data: () => ({
     videoQueue: ["part1", "part2"],
@@ -69,7 +69,7 @@ export default {
       return source;
     },
 
-    videoTimeUpdated: function () {
+    videoTimeUpdated() {
       // show play button after 3 seconds, then disable this event
       if (this.player.currentTime > 3) {
         this.playVisible = true;
@@ -77,21 +77,21 @@ export default {
       }
     },
 
-    videoLoaded: function () {
+    videoLoaded() {
       this.placePlay();
       if (this.currentVideo >= 0) {
         this.player.play();
       }
     },
 
-    playClicked: function () {
+    playClicked() {
       this.playVisible = false;
 
       this.currentVideo += 1;
       this.player.source = this.getVideoSource(this.currentVideo);
     },
 
-    placePlay: function () {
+    placePlay() {
       let top = (this.$refs.plyrContainer.offsetHeight - 100) / 2;
       let left = (this.$refs.plyrContainer.offsetWidth - 100) / 2;