diff --git a/src/App.vue b/src/App.vue
index a5fa1e81..69d9fd30 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,10 +25,10 @@
 </template>
 
 <script>
-import Navigation from "@/components/Navigation";
+import NavigationBar from "@/components/NavigationBar.vue";
 export default {
     components: {
-        Navigation,
+        NavigationBar,
     },
     mounted() {
         if (window.location.pathname === "/" || window.location.pathname.length == 0)
diff --git a/src/components/Channel.vue b/src/components/ChannelPage.vue
similarity index 100%
rename from src/components/Channel.vue
rename to src/components/ChannelPage.vue
diff --git a/src/components/Comment.vue b/src/components/CommentItem.vue
similarity index 100%
rename from src/components/Comment.vue
rename to src/components/CommentItem.vue
diff --git a/src/components/Navigation.vue b/src/components/NavigationBar.vue
similarity index 100%
rename from src/components/Navigation.vue
rename to src/components/NavigationBar.vue
diff --git a/src/components/Playlist.vue b/src/components/PlaylistPage.vue
similarity index 100%
rename from src/components/Playlist.vue
rename to src/components/PlaylistPage.vue
diff --git a/src/components/Preferences.vue b/src/components/PreferencesPage.vue
similarity index 100%
rename from src/components/Preferences.vue
rename to src/components/PreferencesPage.vue
diff --git a/src/components/Player.vue b/src/components/VideoPlayer.vue
similarity index 100%
rename from src/components/Player.vue
rename to src/components/VideoPlayer.vue
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index c16d05b8..55ed4b62 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="video && isEmbed" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999">
-        <Player
+        <VideoPlayer
             ref="videoPlayer"
             :video="video"
             :sponsors="sponsors"
@@ -14,7 +14,7 @@
         <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
 
         <div v-show="!video.error">
-            <Player
+            <VideoPlayer
                 ref="videoPlayer"
                 :video="video"
                 :video-id="getVideoId()"
@@ -123,7 +123,7 @@
                     class="uk-tile-default uk-align-left uk-width-expand"
                     :style="[{ background: backgroundColor }]"
                 >
-                    <Comment :comment="comment" :uploader="video.uploader" />
+                    <CommentItem :comment="comment" :uploader="video.uploader" />
                 </div>
             </div>
 
@@ -147,18 +147,18 @@
 </template>
 
 <script>
-import Player from "@/components/Player.vue";
+import VideoPlayer from "@/components/VideoPlayer.vue";
 import VideoItem from "@/components/VideoItem.vue";
 import ErrorHandler from "@/components/ErrorHandler.vue";
-import Comment from "@/components/Comment.vue";
+import CommentItem from "@/components/CommentItem.vue";
 
 export default {
     name: "App",
     components: {
-        Player,
+        VideoPlayer,
         VideoItem,
         ErrorHandler,
-        Comment,
+        CommentItem,
     },
     data() {
         const smallViewQuery = window.matchMedia("(max-width: 640px)");
diff --git a/src/router/router.js b/src/router/router.js
index d38300eb..da2a492a 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -9,7 +9,7 @@ const routes = [
     {
         path: "/preferences",
         name: "Preferences",
-        component: () => import("../components/Preferences.vue"),
+        component: () => import("../components/PreferencesPage.vue"),
     },
     {
         path: "/results",
@@ -19,7 +19,7 @@ const routes = [
     {
         path: "/playlist",
         name: "Playlist",
-        component: () => import("../components/Playlist.vue"),
+        component: () => import("../components/PlaylistPage.vue"),
     },
     {
         path: "/:path(v|w|embed|shorts|watch)/:v?",
@@ -29,7 +29,7 @@ const routes = [
     {
         path: "/:path(channel|user|c)/:channelId/:videos?",
         name: "Channel",
-        component: () => import("../components/Channel.vue"),
+        component: () => import("../components/ChannelPage.vue"),
     },
     {
         path: "/login",