diff --git a/webapp/src/app/app.html b/webapp/src/app/app.html
index edcc264..852a964 100644
--- a/webapp/src/app/app.html
+++ b/webapp/src/app/app.html
@@ -1,4 +1,6 @@
-<app-nav-rail></app-nav-rail>
+@if ($showNavRail()) {
+    <app-nav-rail></app-nav-rail>
+}
 <main>
     <router-outlet></router-outlet>
 </main>
diff --git a/webapp/src/app/app.routes.ts b/webapp/src/app/app.routes.ts
index 553db35..55f767b 100644
--- a/webapp/src/app/app.routes.ts
+++ b/webapp/src/app/app.routes.ts
@@ -1,14 +1,19 @@
 import { Routes } from '@angular/router';
 import { Plan } from './routes/plan/plan';
+import { Login } from './routes/login/login';
 
 export const routes: Routes = [
-    {
-        path: '',
-        pathMatch: 'full',
-        redirectTo: '/plan'
-    },
-    {
-        path: 'plan',
-        component: Plan
-    },
+	{
+		path: 'login',
+		component: Login,
+	},
+	{
+		path: 'plan',
+		component: Plan,
+	},
+	{
+		path: '',
+		pathMatch: 'full',
+		redirectTo: '/login',
+	},
 ];
diff --git a/webapp/src/app/app.scss b/webapp/src/app/app.scss
index abe538e..6677532 100644
--- a/webapp/src/app/app.scss
+++ b/webapp/src/app/app.scss
@@ -1,5 +1,10 @@
 :host {
-    display: grid;
-    grid-template-columns: min-content auto;
-    min-height: 100vh;
+	display: grid;
+	grid-template-areas: 'nav' 'main';
+	grid-template-columns: min-content auto;
+	min-height: 100vh;
+}
+
+main {
+	grid-area: main;
 }
diff --git a/webapp/src/app/app.ts b/webapp/src/app/app.ts
index 51ee9c2..210acd0 100644
--- a/webapp/src/app/app.ts
+++ b/webapp/src/app/app.ts
@@ -1,11 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { NavRail } from './components/nav-rail/nav-rail';
 
+const ROUTES_THAT_HIDE_NAV_RAIL = /^\/login$/;
+
 @Component({
 	selector: 'app-root',
 	imports: [RouterOutlet, NavRail],
 	styleUrl: './app.scss',
 	templateUrl: './app.html',
 })
-export class App {}
+export class App {
+	private readonly $_pathname = signal(location.pathname);
+	readonly $showNavRail = computed(() => {
+		const pathname = this.$_pathname();
+		return pathname.length > 0 && !ROUTES_THAT_HIDE_NAV_RAIL.test(pathname);
+	});
+}
diff --git a/webapp/src/app/routes/login/login.html b/webapp/src/app/routes/login/login.html
new file mode 100644
index 0000000..147cfc4
--- /dev/null
+++ b/webapp/src/app/routes/login/login.html
@@ -0,0 +1 @@
+<p>login works!</p>
diff --git a/webapp/src/app/routes/login/login.scss b/webapp/src/app/routes/login/login.scss
new file mode 100644
index 0000000..b5a1c47
--- /dev/null
+++ b/webapp/src/app/routes/login/login.scss
@@ -0,0 +1,5 @@
+:host {
+	display: grid;
+	height: 100%;
+	width: 100%;
+}
diff --git a/webapp/src/app/routes/login/login.spec.ts b/webapp/src/app/routes/login/login.spec.ts
new file mode 100644
index 0000000..dd8bbb3
--- /dev/null
+++ b/webapp/src/app/routes/login/login.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Login } from './login';
+
+describe('Login', () => {
+  let component: Login;
+  let fixture: ComponentFixture<Login>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Login]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Login);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/webapp/src/app/routes/login/login.ts b/webapp/src/app/routes/login/login.ts
new file mode 100644
index 0000000..a9e4eee
--- /dev/null
+++ b/webapp/src/app/routes/login/login.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  imports: [],
+  templateUrl: './login.html',
+  styleUrl: './login.scss'
+})
+export class Login {
+
+}