diff --git a/fittrackee_client/src/App.vue b/fittrackee_client/src/App.vue
index 113b6b81..ca385d78 100644
--- a/fittrackee_client/src/App.vue
+++ b/fittrackee_client/src/App.vue
@@ -1,11 +1,20 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
+  <NavBar />
   <router-view />
 </template>
 
+<script lang="ts">
+import { defineComponent } from "vue";
+import NavBar from "@/components/NavBar.vue";
+
+export default defineComponent({
+  name: "App",
+  components: {
+    NavBar,
+  },
+});
+</script>
+
 <style lang="scss">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
new file mode 100644
index 00000000..9870edc1
--- /dev/null
+++ b/fittrackee_client/src/components/NavBar.vue
@@ -0,0 +1,16 @@
+<template>
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "NavBar",
+});
+</script>
+
+<style scoped></style>