diff --git a/ui/public/index.html b/ui/public/index.html
index 03393e0..f5dcffe 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -1,19 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+</head>
+<body>
+<noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
 </html>
diff --git a/ui/src/App.vue b/ui/src/App.vue
index f241043..31bc61d 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -7,8 +7,26 @@
   </v-app>
 </template>
 <style>
-.troploGradient {
-  font-weight: 500;background: -webkit-radial-gradient(#0179f3, #0190ea);-webkit-background-clip: text;-webkit-text-fill-color: transparent
+.troplo-header {
+  -webkit-font-smoothing: antialiased !important;
+  background: -webkit-radial-gradient(#0179f3, #0190ea) !important;
+}
+.troplo-header-title {
+  -webkit-font-smoothing: antialiased !important;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 450;
+  elevation: 0 !important;
+  font-size: 15rem;
+  font-style: italic;
+  text-shadow: none !important;
+  color: -webkit-radial-gradient(#0179f3, #0190ea) !important;
+  -webkit-background-clip: text
+}
+.troplo-title {
+  font-weight: 500;
+  background: -webkit-radial-gradient(#0179f3, #0190ea);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent
 }
 .theme--dark.v-sheet {
   background-color: #151515 !important;
diff --git a/ui/src/assets/images/kaverti.png b/ui/src/assets/images/kaverti.png
new file mode 100644
index 0000000..d5159f9
Binary files /dev/null and b/ui/src/assets/images/kaverti.png differ
diff --git a/ui/src/assets/images/troplo-plex.png b/ui/src/assets/images/troplo-plex.png
new file mode 100644
index 0000000..b09c54f
Binary files /dev/null and b/ui/src/assets/images/troplo-plex.png differ
diff --git a/ui/src/assets/images/troplo-website.png b/ui/src/assets/images/troplo-website.png
new file mode 100644
index 0000000..bfc9893
Binary files /dev/null and b/ui/src/assets/images/troplo-website.png differ
diff --git a/ui/src/components/Header.vue b/ui/src/components/Header.vue
index 09fa99b..4003759 100644
--- a/ui/src/components/Header.vue
+++ b/ui/src/components/Header.vue
@@ -1,35 +1,63 @@
 <template>
   <div id="header">
-    <v-app-bar color="dark" floating app dense>
-      <v-app-bar-nav-icon v-if="$vuetify.breakpoint.mobile && $store.state.user.username" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
-      <v-toolbar-title>{{$store.state.site.route}}<v-app-bar-nav-icon disabled v-if="$store.state.site.release !== 'prod'">{{$store.state.site.release}}</v-app-bar-nav-icon></v-toolbar-title>
+    <v-toolbar
+        dark
+    >
+      <v-app-bar-nav-icon @click.stop="sidebar = !sidebar" v-if="$vuetify.breakpoint.mobile"></v-app-bar-nav-icon>
+      <v-toolbar-title class="troplo-title" @click="$router.push('/')" style="cursor: pointer">Troplo</v-toolbar-title>
       <v-spacer></v-spacer>
-    </v-app-bar>
+      <v-list v-if="!$vuetify.breakpoint.mobile">
+        <v-btn
+            text
+            v-for="(item) in items"
+            :key="item.id"
+            :to="item.path"
+            :disabled="item.disabled"
+        >
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-btn>
+        <v-btn
+            v-if="false"
+            text
+            @click="$vuetify.theme.dark = !$vuetify.theme.dark"
+        >
+          <v-list-item-title>
+            <v-icon>{{ $vuetify.theme.dark ? 'mdi-lightbulb-on' : 'mdi-lightbulb-outline' }}</v-icon>
+          </v-list-item-title>
+        </v-btn>
+      </v-list>
+    </v-toolbar>
     <v-navigation-drawer
         floating
         color="dark"
         app
+        v-model="sidebar"
+        v-if="$vuetify.breakpoint.mobile"
         expand>
       <v-divider></v-divider>
       <v-list nav dense>
-        <v-list>
-          <v-list>
-            <v-list-item
-                v-for="item in items"
-                :key="item.id"
-                link
-                :to="item.path"
-            >
-              <v-list-item-icon>
-                <v-icon>{{ item.icon }}</v-icon>
-              </v-list-item-icon>
+        <v-list-item
+            v-for="item in items"
+            :key="item.id"
+            link
+            :to="item.path"
+        >
+          <v-list-item-icon>
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-icon>
 
-              <v-list-item-content>
-                <v-list-item-title>{{ item.title }}</v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </v-list>
-        </v-list>
+          <v-list-item-content>
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item
+            link
+            @click="$vuetify.theme.dark = !$vuetify.theme.dark"
+        >
+          <v-list-item-icon>
+            <v-icon>{{ $vuetify.theme.dark ? 'mdi-lightbulb-on' : 'mdi-lightbulb-outline' }}</v-icon>
+          </v-list-item-icon>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
   </div>
@@ -40,10 +68,11 @@ export default {
   name: "Header",
   data() {
     return {
+      sidebar: false,
       items: [
         {id: 1, title: "Home", icon: "mdi-home", path: "/"},
         {id: 2, title: "Projects", icon: "mdi-text-box-multiple", path: "/projects"},
-        {id: 3, title: "Contact", icon: "mdi-email", path: "/contact"}
+        {id: 3, title: "Contact", icon: "mdi-email", path: "/contact"},
       ]
     }
   },
diff --git a/ui/src/main.js b/ui/src/main.js
index 7f7af44..f7e8fee 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -4,7 +4,6 @@ import './registerServiceWorker'
 import router from './router'
 import vuetify from './plugins/vuetify'
 import store from './store'
-
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/ui/src/store/index.js b/ui/src/store/index.js
index 583da42..1ccdb87 100644
--- a/ui/src/store/index.js
+++ b/ui/src/store/index.js
@@ -6,8 +6,8 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     site: {
-      name: 'Troplo\'s Website',
-      route: ''
+      name: "Troplo's Website",
+      route: "Home"
     }
   },
   mutations: {
diff --git a/ui/src/views/Contact.vue b/ui/src/views/Contact.vue
index d1f343f..345d535 100644
--- a/ui/src/views/Contact.vue
+++ b/ui/src/views/Contact.vue
@@ -4,7 +4,9 @@
       <p class="text-h4">Contact</p>
       <v-row>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-email</v-icon>
             <v-card-title class="justify-center">Email</v-card-title>
 
             <v-card-text>
@@ -13,7 +15,9 @@
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-matrix</v-icon>
             <v-card-title class="justify-center">Matrix</v-card-title>
 
             <v-card-text>
@@ -22,16 +26,22 @@
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-discord</v-icon>
             <v-card-title class="justify-center">Discord</v-card-title>
 
             <v-card-text>
-              Troplo#8495
+              <a href="https://discord.com/users/692259321907773460">
+                Troplo#8495
+              </a>
             </v-card-text>
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-twitter</v-icon>
             <v-card-title class="justify-center">Twitter</v-card-title>
 
             <v-card-text>
@@ -40,7 +50,9 @@
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-send</v-icon>
             <v-card-title class="justify-center">Telegram</v-card-title>
 
             <v-card-text>
@@ -49,7 +61,9 @@
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-github</v-icon>
             <v-card-title class="justify-center">GitHub</v-card-title>
 
             <v-card-text>
@@ -58,7 +72,9 @@
           </v-card>
         </v-col>
         <v-col md="3">
-          <v-card>
+          <v-card class="rounded-xl" elevation="8">
+            <br>
+            <v-icon>mdi-tea</v-icon>
             <v-card-title class="justify-center">Gitea</v-card-title>
 
             <v-card-text>
diff --git a/ui/src/views/Home.vue b/ui/src/views/Home.vue
index 974b073..aaacecb 100644
--- a/ui/src/views/Home.vue
+++ b/ui/src/views/Home.vue
@@ -1,31 +1,18 @@
 <template>
   <div id="home">
     <v-container class="text-center">
-      <v-card elevation="12">
+      <v-card elevation="8" class="troplo-header rounded-xl">
         <v-container>
-          <p class="troploGradient">Troplo</p>
-          <p class="text-h4">Full-stack web developer.</p>
+          <div v-if="!$vuetify.breakpoint.mobile" class="troplo-header-title">Troplo</div>
+          <div v-if="$vuetify.breakpoint.mobile" class="troplo-header-title" style="background: -webkit-radial-gradient(#0179f3, #0190ea);">T</div>
         </v-container>
       </v-card>
     </v-container>
   </div>
 </template>
 
-<style>
-.troploGradient{
-  font-size: 300px;
-  font-style: italic;
-  background:-webkit-radial-gradient(#0179f3, #0190ea);
-  -webkit-background-clip:text
-}
-
-.normal {
-  font-color: #ffffff
-}
-</style>
-
 <script>
-  export default {
-    name: 'Home',
-  }
+export default {
+  name: 'Home',
+}
 </script>
\ No newline at end of file
diff --git a/ui/src/views/Projects.vue b/ui/src/views/Projects.vue
index a34718a..500e862 100644
--- a/ui/src/views/Projects.vue
+++ b/ui/src/views/Projects.vue
@@ -4,7 +4,7 @@
       <p class="justify-center text-center text-h4">Projects</p>
       <v-row>
         <v-col md="3" v-for="(project, index) in getVisible" :key="index">
-          <v-card elevation="8">
+          <v-card class="rounded-xl" elevation="8">
             <v-img
                 :src="getImage(project.internalName)"
             ></v-img>
@@ -55,39 +55,6 @@
   </div>
 </template>
 
-<style>
-.blob {
-  border-radius: 50%;
-  margin: 6px;
-  height: 20px;
-  width: 20px;
-  transform: scale(1);
-}
-
-.blob.green {
-  background: rgba(51, 217, 178, 1);
-  box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
-  animation: pulse-green 1.3s infinite;
-}
-
-@keyframes pulse-green {
-  0% {
-    transform: scale(1);
-    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
-  }
-
-  70% {
-    transform: scale(1);
-    box-shadow: 0 0 0 5px rgba(51, 217, 178, 0);
-  }
-
-  100% {
-    transform: scale(1);
-    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
-  }
-}
-</style>
-
 <script>
 export default {
   name: "Projects",
@@ -294,6 +261,12 @@ export default {
           name: "Website",
           internalName: "troplo-website",
           tags: [
+            {
+              internalName: "active",
+              name: "Active",
+              icon: "mdi-check-circle",
+              color: "success"
+            },
             {
               internalName: "openSource",
               name: "Open Source",
@@ -308,7 +281,7 @@ export default {
             },
           ],
           description: "If you want the source code to this website for whatever reason, it is available.",
-          visible: false,
+          visible: true,
           links: [
             {
               name: "Git Repository",
@@ -320,6 +293,68 @@ export default {
             },
           ],
         },
+        {
+          id: 8,
+          name: "Pinnoto Psittacus",
+          internalName: "psittacus",
+          tags: [
+            {
+              internalName: "development",
+              name: "In Development",
+              icon: "mdi-information",
+              color: "info"
+            },
+            {
+              internalName: "vue",
+              name: "Vue",
+              icon: "mdi-vuejs",
+              color: "#42b883",
+              link: "https://vuejs.org"
+            },
+            {
+              internalName: "tauri",
+              name: "Tauri",
+              icon: "mdi-infinity",
+              color: "#24c8db",
+              link: "https://tauri.studio"
+            },
+          ],
+          description: "IDE. Coming soon.",
+          visible: true,
+          links: []
+        },
+        {
+          id: 9,
+          name: "TroploPlex",
+          internalName: "troplo-plex",
+          tags: [
+            {
+              internalName: "active",
+              name: "Active",
+              icon: "mdi-check-circle",
+              color: "success"
+            },
+            {
+              internalName: "openSource",
+              name: "Open Source",
+              icon: "mdi-git"
+            },
+            {
+              internalName: "express",
+              name: "Express",
+              icon: "mdi-nodejs",
+              link: "https://expresjs.com"
+            },
+          ],
+          description: "TroploPlex is a reimplementation of the myPlex API.",
+          visible: true,
+          links: [
+            {
+              name: "Git Repository",
+              link: "https://git.troplo.com/Troplo/Plex"
+            }
+          ],
+        },
       ]
     }
   },
@@ -338,8 +373,4 @@ export default {
     }
   }
 }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
