diff --git a/src/App.vue b/src/App.vue
index 475c3cf..9d46699 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 import { RouterView } from 'vue-router'
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import Navigation from "@/components/Navigation.vue";
 import OverlayBadge from 'primevue/overlaybadge';
 
 const route = useRoute();
@@ -19,44 +20,7 @@ watch(() => route.meta, (newVal, oldVal) => {
         <div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
           Designer
         </div>
-        <nav class="mt-4">
-          <ul class="list-none p-4 m-0">
-            <li>
-              <RouterLink
-                class="nav-item"
-                to="/">
-                <i class="pi pi-home nav-icon" />
-                <span>Home</span>
-              </RouterLink>
-            </li>
-            <li>
-              <RouterLink class="nav-item" to="/sticker">
-                <i class="pi pi-image nav-icon" />
-                <span>Sticker</span>
-              </RouterLink>
-            </li>
-            <li>
-              <a class="nav-item">
-                <i class="pi pi-users nav-icon" />
-                <span>Team</span>
-              </a>
-            </li>
-            <li>
-              <a class="nav-item">
-                <i class="pi pi-calendar nav-icon" />
-                <span>Events</span>
-              </a>
-            </li>
-            <li>
-              <RouterLink
-                class="nav-item"
-                to="/about">
-                <i class="pi pi-info-circle nav-icon" />
-                <span>About</span>
-              </RouterLink>
-            </li>
-          </ul>
-        </nav>
+        <Navigation></Navigation>
         <div class="mt-auto">
           <hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
           <a class="m-4 nav-item">
@@ -140,15 +104,6 @@ watch(() => route.meta, (newVal, oldVal) => {
 </template>
 
 <style scoped lang="scss">
-.nav-icon {
-  @apply mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg;
-}
-.nav-item {
-  @apply flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
-  span {
-    @apply font-medium inline text-base lg:text-xs lg:block;
-  }
-}
 .title {
   font-size: 160%;
 }
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
new file mode 100644
index 0000000..5f64d8d
--- /dev/null
+++ b/src/components/Navigation.vue
@@ -0,0 +1,51 @@
+<template>
+  <nav class="mt-4">
+    <ul class="list-none p-4 m-0">
+      <li>
+        <RouterLink
+          class="nav-item"
+          to="/">
+          <i class="pi pi-home nav-icon" />
+          <span>Home</span>
+        </RouterLink>
+      </li>
+      <li>
+        <RouterLink class="nav-item" to="/sticker">
+          <i class="pi pi-image nav-icon" />
+          <span>Sticker</span>
+        </RouterLink>
+      </li>
+      <li>
+        <a class="nav-item">
+          <i class="pi pi-users nav-icon" />
+          <span>Team</span>
+        </a>
+      </li>
+      <li>
+        <a class="nav-item">
+          <i class="pi pi-calendar nav-icon" />
+          <span>Events</span>
+        </a>
+      </li>
+      <li>
+        <RouterLink
+          class="nav-item"
+          to="/about">
+          <i class="pi pi-info-circle nav-icon" />
+          <span>About</span>
+        </RouterLink>
+      </li>
+    </ul>
+  </nav>
+</template>
+<style scoped>
+.nav-icon {
+  @apply mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg;
+}
+.nav-item {
+  @apply flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
+  span {
+    @apply font-medium inline text-base lg:text-xs lg:block;
+  }
+}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..e69de29