diff --git a/MusicPlayerV2-GUI/index.html b/MusicPlayerV2-GUI/index.html
index e3d1ef2..7f5fb40 100644
--- a/MusicPlayerV2-GUI/index.html
+++ b/MusicPlayerV2-GUI/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
-    <title>Vite App</title>
+    <title>MusicPlayer</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/MusicPlayerV2-GUI/src/App.vue b/MusicPlayerV2-GUI/src/App.vue
index 7588c8c..5358c04 100644
--- a/MusicPlayerV2-GUI/src/App.vue
+++ b/MusicPlayerV2-GUI/src/App.vue
@@ -134,6 +134,46 @@
     .clr-open {
         border: black solid 1px !important;
     }
+
+    #themeSelector {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        background: none;
+        border: none;
+        color: var( --primary-color );
+        cursor: pointer;
+    }
+</style>
+
+<style>
+    .fancy-button {
+        text-decoration: none;
+        color: white;
+        padding: 20px;
+        border-radius: 20px;
+        border: none;
+        background: linear-gradient( 45deg, rgb(0, 33, 139), rgb(151, 0, 0) );
+        font-size: larger;
+        transition: all 0.5s;
+        background-size: 150%;
+        cursor: pointer;
+    }
+
+    .fancy-button:hover {
+        border-radius: 5px;
+        background-position: 50%;
+    }
+
+    .fancy-button-inactive {
+        background: linear-gradient( 45deg, rgba(0, 33, 139, 0.6), rgba(151, 0, 0, 0.6) );
+        cursor: not-allowed;
+    }
+
+    .fancy-button-inactive:hover {
+        border-radius: 20px;
+        background-position: 0px;
+    }
 </style>
 
 <script setup lang="ts">
diff --git a/MusicPlayerV2-GUI/src/router/index.ts b/MusicPlayerV2-GUI/src/router/index.ts
index 19683b7..4d63763 100644
--- a/MusicPlayerV2-GUI/src/router/index.ts
+++ b/MusicPlayerV2-GUI/src/router/index.ts
@@ -7,9 +7,69 @@ const router = createRouter( {
         {
             path: '/',
             name: 'home',
-            component: HomeView
+            component: HomeView,
+            meta: {
+                'authRequired': false,
+                'title': 'Login'
+            }
+        },
+        {
+            path: '/app',
+            name: 'app',
+            component: () => import( '../views/AppView.vue' ),
+            meta: {
+                'authRequired': false,
+                'title': 'App'
+            }
+        },
+        { 
+            path: '/:pathMatch(.*)*', 
+            name: 'NotFound', 
+            component: () => import( '../views/404View.vue' ),
+            meta: {
+                title: '404 :: Page not found',
+                transition: 'scale',
+            }
         },
     ]
 } );
 
+// router.beforeResolve( ( to, _from, next ) => {
+//     if ( to.name ) {
+//         NProgress.start();
+//     }
+//     next();
+// } );
+
+// router.beforeEach( ( to ) => {
+//     const userStore = useUserStore();
+//     const isUserAuthenticated = userStore.getUserAuthenticated;
+//     const isAdminAuthenticated = userStore.getAdminAuthenticated;
+
+//     if ( to.meta.adminAuthRequired && !isAdminAuthenticated ) {
+//         return { name: 'adminLogin' };
+//     } else if ( to.name === 'adminLogin' && isAdminAuthenticated ) {
+//         return { name: 'admin' };
+//     } 
+//     // else if ( isUserAuthenticated && to.name === 'login' ) {       
+//     //     return { name: 'account' };
+//     // } 
+//     else if ( !isUserAuthenticated && to.name === 'checkout' ) {
+//         localStorage.setItem( 'redirect', '/checkout' );
+//         return { name: 'login' };
+//     } else if ( !isUserAuthenticated && to.meta.authRequired ) {
+//         localStorage.setItem( 'redirect', to.fullPath );
+//         return { name: 'login' };
+//     }
+
+//     // TODO: Make titles adapt to languages as well
+//     // TODO: Make multi-lang
+// } );
+
+router.afterEach( ( to ) => {
+    window.scrollTo( { top: 0, behavior: 'smooth' } );
+    document.title = to.meta.title ? to.meta.title + ' - MusicPlayer' : 'MusicPlayer';
+    // NProgress.done();
+} );
+
 export default router;
diff --git a/MusicPlayerV2-GUI/src/views/404View.vue b/MusicPlayerV2-GUI/src/views/404View.vue
new file mode 100644
index 0000000..ba6bde7
--- /dev/null
+++ b/MusicPlayerV2-GUI/src/views/404View.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="home-view">
+        <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo">
+        <h1>404</h1>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+    .home-view {
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .logo {
+        height: 50vh;
+    }
+</style>
\ No newline at end of file
diff --git a/MusicPlayerV2-GUI/src/views/AppView.vue b/MusicPlayerV2-GUI/src/views/AppView.vue
new file mode 100644
index 0000000..5f8b046
--- /dev/null
+++ b/MusicPlayerV2-GUI/src/views/AppView.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="home-view">
+        <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo">
+        <h1>MusicPlayer</h1>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+    .home-view {
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .logo {
+        height: 50vh;
+    }
+</style>
\ No newline at end of file
diff --git a/MusicPlayerV2-GUI/src/views/HomeView.vue b/MusicPlayerV2-GUI/src/views/HomeView.vue
index a5d1a33..aec8502 100644
--- a/MusicPlayerV2-GUI/src/views/HomeView.vue
+++ b/MusicPlayerV2-GUI/src/views/HomeView.vue
@@ -1,10 +1,32 @@
 <template>
-    <div>
-        <h1>Hello World</h1>
-        <div class="player-panel-link"></div>
+    <div class="home-view">
+        <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo">
+        <h1>MusicPlayer</h1>
+        <button @click="login()" class="fancy-button">Log in</button>
     </div>
 </template>
 
 <script setup lang="ts">
+import router from '@/router';
 
-</script>
\ No newline at end of file
+    const login = () => {
+        alert( 'Logging in...' );
+        // TODO: Actually implement with sdk, then check if user has subscription for product, if so, have them proceed to /app
+        // else: proceed to /purchase where they get linked to https://store.janishutz.com/product/com.janishutz.MusicPlayer
+        router.push( '/app' );
+    }
+</script>
+
+<style scoped>
+    .home-view {
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .logo {
+        height: 50vh;
+    }
+</style>
\ No newline at end of file
diff --git a/MusicPlayerV2-GUI/src/views/ShowcaseView.vue b/MusicPlayerV2-GUI/src/views/ShowcaseView.vue
new file mode 100644
index 0000000..e69de29
diff --git a/README.md b/README.md
index 3fad315..1afdaed 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,8 @@
 A music player, specifically created for displaying song information from a CSV or JSON file on multiple different displays that are connected
 to the same network, just from the browser. 
 
+The [hosted version](https://music.janishutz.com) of this MusicPlayer, which is fully set up for you will be subscription-based and can be paid for on my [store](https://store.janishutz.com/product/com.janishutz.MusicPlayer). Not available yet though!
+
 # Features
 - Electron App that runs on all major Desktop OS (Linux, MacOS & Windows)
 - Show all song information over the local network on any amount of client displays
