diff --git a/src/app/Logo.vue b/src/app/Logo.vue
new file mode 100644
index 0000000..9a3e7eb
--- /dev/null
+++ b/src/app/Logo.vue
@@ -0,0 +1,23 @@
+<template functional>
+  <svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="5.74 31.24 123.89 72.89">
+    <g transform="matrix(1.0344 0 0 1.0869 -2.068 -181.521)">
+      <rect width="5.994" height="23.366" x="9.929" y="224.55" rx="2.997" ry="2.997" />
+      <rect width="5.994" height="41.989" x="19.849" y="215.2" rx="2.997" ry="2.819" />
+      <rect width="5.994" height="49.213" x="29.768" y="211.49" rx="2.997" ry="2.997" />
+      <rect width="5.994" height="58.69" x="39.688" y="202.01" rx="2.997" ry="3.038" />
+      <rect width="5.994" height="62.402" x="49.607" y="198.3" rx="2.997" ry="2.997" />
+      <rect width="5.994" height="62.733" x="59.526" y="197.97" rx="2.997" ry="2.997" />
+      <rect width="5.994" height="58.889" x="69.446" y="201.81" rx="2.997" ry="2.997" />
+      <rect width="5.994" height="49.412" x="79.365" y="211.29" rx="2.997" ry="2.997" />
+      <rect width="5.994" height="48.948" x="89.285" y="211.75" rx="2.997" ry="2.997" />
+      <rect width="5.994" height="44.176" x="99.204" y="216.53" rx="2.997" ry="2.997" />
+      <rect width="5.994" height="36.886" x="109.12" y="223.55" rx="2.997" ry="2.997" />
+      <rect width="5.994" height="22.372" x="119.04" y="230.78" rx="2.997" ry="2.997" />
+    </g>
+  </svg>
+</template>
+<style scoped>
+  svg {
+    fill: var(--primary);
+  }
+</style>
\ No newline at end of file
diff --git a/src/app/Nav.vue b/src/app/Nav.vue
index 59a378b..d6cef94 100644
--- a/src/app/Nav.vue
+++ b/src/app/Nav.vue
@@ -2,7 +2,7 @@
   <div class="text-truncate">
     <nav class="nav flex-column">
       <router-link class="nav-link logo" :to="{name: 'home'}">
-        <img src="@/app/logo.png" class="img-fluid">
+        <Logo/>
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'home'}">
@@ -41,7 +41,7 @@
 </template>
 <style lang="scss" scoped>
   .logo {
-    max-width: 200px;
+    height: 48px;
   }
   .nav-link {
     width: 220px;
@@ -52,11 +52,13 @@
 </style>
 <script lang="ts">
 import Vue from "vue";
+import Logo from "./Logo.vue";
 import PlaylistNav from "@/playlist/PlaylistNav.vue";
 import { mapState } from 'vuex';
 
 export default Vue.extend({
   components: {
+    Logo,
     PlaylistNav,
   },
   methods: {
diff --git a/src/app/logo.png b/src/app/logo.png
deleted file mode 100644
index c013faa..0000000
Binary files a/src/app/logo.png and /dev/null differ
diff --git a/src/app/logo.svg b/src/app/logo.svg
deleted file mode 100644
index 145b6d1..0000000
--- a/src/app/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>