diff --git a/.gitignore b/.gitignore
index a547bf3..16cc96f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Firebase
+.firebase/
\ No newline at end of file
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 08bee34..fdfc54b 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ArrowLeftIcon } from "@heroicons/vue/20/solid";
+
 import TopBar from "@/components/TopBar.vue";
 </script>
 
@@ -8,10 +10,18 @@ import TopBar from "@/components/TopBar.vue";
       <TopBar />
 
       <header class="py-10">
-        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="mx-auto h-20 max-w-7xl px-4 sm:px-6 lg:px-8">
           <h1 class="text-3xl font-bold tracking-tight text-white">
-            Dashboard
+            {{ $route.meta.title }}
           </h1>
+
+          <router-link
+            v-if="$route.meta.showBack"
+            to=".."
+            class="flex items-center gap-1 text-indigo-200 hover:text-indigo-100"
+          >
+            <ArrowLeftIcon class="size-4" /> Back
+          </router-link>
         </div>
       </header>
     </div>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 6091ce6..6bb2a59 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -27,7 +27,7 @@ const signOut = async () => {
       <div
         class="relative flex h-16 items-center justify-between lg:border-b lg:border-indigo-400 lg:border-opacity-25"
       >
-        <div class="flex items-center px-2 lg:px-0">
+        <router-link to="/" class="flex items-center px-2 lg:px-0">
           <div class="flex-shrink-0">
             <img class="block h-8 w-8" src="/icon.svg" alt="Your Company" />
           </div>
@@ -35,7 +35,7 @@ const signOut = async () => {
           <span class="font-sans text-xl font-bold text-white">
             Project Graveyard
           </span>
-        </div>
+        </router-link>
 
         <div class="flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end">
           <div class="w-full max-w-lg lg:max-w-xs">
diff --git a/src/main.ts b/src/main.ts
index edcc391..b19f1ff 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,14 +14,31 @@ const router = createRouter({
       components: {
         default: HomeVue,
       },
+      meta: {
+        title: "Home",
+      },
     },
     {
       path: "/login",
       component: () => import("./views/Login.vue"),
+      meta: {
+        title: "Login",
+      },
     },
     {
       path: "/register",
       component: () => import("./views/Registration.vue"),
+      meta: {
+        title: "Registration",
+      },
+    },
+    {
+      path: "/projects/:id",
+      component: () => import("./views/Project.vue"),
+      meta: {
+        title: "Project",
+        showBack: true,
+      },
     },
   ],
 });
diff --git a/src/views/Project.vue b/src/views/Project.vue
new file mode 100644
index 0000000..103e8a3
--- /dev/null
+++ b/src/views/Project.vue
@@ -0,0 +1 @@
+<template>Welcome to {{ $route.params.id }}</template>