diff --git a/src/app/App.vue b/src/app/App.vue
index 5d0a869..a04290e 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,4 +1,6 @@
-<script setup lang="ts" />
+<script setup lang="ts">
+// Navbar is intentionally simple — authentication is not handled here.
+</script>
 
 <template>
 	<div>
@@ -6,18 +8,24 @@
 			<div class="brand">
 				<router-link to="/">Agentic Trainers</router-link>
 			</div>
+
 			<ul class="navlinks">
 				<li><router-link to="/">Home</router-link></li>
+				<li><router-link to="/about">About</router-link></li>
 				<li><router-link to="/onboarding">Onboarding</router-link></li>
 				<li><router-link to="/training">Training</router-link></li>
-				<li><router-link to="/agents">Agents</router-link></li>
 				<li><router-link to="/roles">Roles</router-link></li>
-				<li><router-link to="/progress">Progress</router-link></li>
+				<li><router-link to="/agents">Agents</router-link></li>
 				<li>
 					<router-link to="/assessments">Assessments</router-link>
 				</li>
 				<li><router-link to="/resources">Resources</router-link></li>
-				<li><router-link to="/about">About</router-link></li>
+				<li><router-link to="/progress">Progress</router-link></li>
+			</ul>
+
+			<ul class="navlinks">
+				<li><router-link to="/login">Login</router-link></li>
+				<li><router-link to="/register">Register</router-link></li>
 			</ul>
 		</nav>
 
@@ -47,6 +55,7 @@
 	gap: 0.75rem;
 	margin: 0;
 	padding: 0;
+	align-items: center;
 }
 .navlinks a {
 	color: #4b5563;
@@ -57,6 +66,17 @@
 	color: #4f46e5;
 	font-weight: 600;
 }
+.user {
+	margin-left: 0.5rem;
+	color: #374151;
+}
+.link-logout {
+	background: none;
+	border: none;
+	color: #ef4444;
+	cursor: pointer;
+	margin-left: 0.5rem;
+}
 main {
 	padding: 1rem;
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 0890355..06e4305 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,6 +13,16 @@ const router = createRouter({
       name: 'about',
       component: () => import('../views/AboutView.vue'),
     },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('../views/LoginView.vue'),
+    },
+    {
+      path: '/register',
+      name: 'register',
+      component: () => import('../views/RegisterView.vue'),
+    },
     {
       path: '/onboarding',
       name: 'onboarding',
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index c728bfc..0e1c6ab 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,6 +1,53 @@
 <template>
 	<div class="about">
-		<h1>This is an about page</h1>
+		<h1>About Agentic Trainers</h1>
+		<p>
+			Agentic Trainers is a lightweight platform for onboarding, training,
+			and assessing employees using modular training content and
+			agent-driven workflows. This repo contains a demo front-end and
+			example pipelines for role-based experiences.
+		</p>
+
+		<h2>Role pathways</h2>
+		<ul>
+			<li>
+				<strong>Admin</strong>: full access to system settings, user
+				management, and reporting. Admins can invite or deactivate
+				managers and view overall progress.
+			</li>
+			<li>
+				<strong>Manager</strong>: responsible for company-level tasks:
+				create onboarding flows, assign employees to roles, and monitor
+				team progress.
+			</li>
+			<li>
+				<strong>Employee</strong>: follows onboarding and training
+				modules, completes assessments, and views personal progress on
+				the dashboard.
+			</li>
+		</ul>
+
+		<h2>Getting started</h2>
+		<ol>
+			<li>
+				Register or login from the top-right to choose your role (demo
+				only).
+			</li>
+			<li>
+				Use the <em>Onboarding</em> and <em>Training</em> links to
+				begin.
+			</li>
+			<li>
+				Managers can create roles and assign employees via the
+				<em>Roles</em> page.
+			</li>
+		</ol>
+
+		<p>
+			This is a demo implementation — authentication and permissions are
+			local-storage based for example purposes. For production-grade apps
+			integrate a backend auth provider and persistent user store.
+		</p>
 	</div>
 </template>
 
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
new file mode 100644
index 0000000..e71ecb3
--- /dev/null
+++ b/src/views/LoginView.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const name = ref('');
+const role = ref<'admin' | 'manager' | 'employee'>('employee');
+
+function submit() {
+	router.push('/');
+}
+</script>
+
+<template>
+	<div class="auth">
+		<h1>Login (demo)</h1>
+		<div>
+			<label>Name</label>
+			<input v-model="name" placeholder="Your name" />
+		</div>
+
+		<div>
+			<label>Role</label>
+			<select v-model="role">
+				<option value="employee">Employee</option>
+				<option value="manager">Manager</option>
+				<option value="admin">Admin</option>
+			</select>
+		</div>
+
+		<button class="cta-button" @click="submit">Login</button>
+	</div>
+</template>
+
+<style scoped>
+.auth {
+	max-width: 480px;
+	margin: 0 auto;
+}
+label {
+	display: block;
+	margin-top: 0.5rem;
+}
+input,
+select {
+	width: 100%;
+	padding: 0.5rem;
+	margin-top: 0.25rem;
+}
+.cta-button {
+	margin-top: 1rem;
+}
+</style>
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
new file mode 100644
index 0000000..d358242
--- /dev/null
+++ b/src/views/RegisterView.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const name = ref('');
+const role = ref<'admin' | 'manager' | 'employee'>('employee');
+
+function submit() {
+	router.push('/');
+}
+</script>
+
+<template>
+	<div class="auth">
+		<h1>Register (demo)</h1>
+		<div>
+			<label>Name</label>
+			<input v-model="name" placeholder="Your name" />
+		</div>
+
+		<div>
+			<label>Role</label>
+			<select v-model="role">
+				<option value="employee">Employee</option>
+				<option value="manager">Manager</option>
+			</select>
+		</div>
+
+		<button class="cta-button" @click="submit">Register</button>
+	</div>
+</template>
+
+<style scoped>
+.auth {
+	max-width: 480px;
+	margin: 0 auto;
+}
+label {
+	display: block;
+	margin-top: 0.5rem;
+}
+input,
+select {
+	width: 100%;
+	padding: 0.5rem;
+	margin-top: 0.25rem;
+}
+.cta-button {
+	margin-top: 1rem;
+}
+</style>