diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index a02808cd3..c971ce5ad 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -57,6 +57,13 @@ export const routes: Routes = [
             (mod) => mod.PrivacyPolicyComponent,
           ),
       },
+      {
+        path: 'settings',
+        loadChildren: () =>
+          import('./features/settings/settings.routes').then(
+            (mod) => mod.settingsRoutes,
+          ),
+      },
     ],
   },
 ];
diff --git a/src/app/core/components/breadcrumb/breadcrumb.component.html b/src/app/core/components/breadcrumb/breadcrumb.component.html
new file mode 100644
index 000000000..958fa3790
--- /dev/null
+++ b/src/app/core/components/breadcrumb/breadcrumb.component.html
@@ -0,0 +1,8 @@
+<div class="breadcrumbs">
+  @for (url of parsedUrl(); track url; let l = $last) {
+    {{ url }}
+    @if (!l) {
+      /
+    }
+  }
+</div>
diff --git a/src/app/core/components/breadcrumb/breadcrumb.component.scss b/src/app/core/components/breadcrumb/breadcrumb.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/core/components/breadcrumb/breadcrumb.component.spec.ts b/src/app/core/components/breadcrumb/breadcrumb.component.spec.ts
new file mode 100644
index 000000000..17a43e75d
--- /dev/null
+++ b/src/app/core/components/breadcrumb/breadcrumb.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BreadcrumbComponent } from './breadcrumb.component';
+
+describe('BreadcrumbComponent', () => {
+  let component: BreadcrumbComponent;
+  let fixture: ComponentFixture<BreadcrumbComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BreadcrumbComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BreadcrumbComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/components/breadcrumb/breadcrumb.component.ts b/src/app/core/components/breadcrumb/breadcrumb.component.ts
new file mode 100644
index 000000000..06af64b2d
--- /dev/null
+++ b/src/app/core/components/breadcrumb/breadcrumb.component.ts
@@ -0,0 +1,16 @@
+import { Component, computed, inject, signal } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'osf-breadcrumb',
+  imports: [],
+  templateUrl: './breadcrumb.component.html',
+  styleUrl: './breadcrumb.component.scss',
+})
+export class BreadcrumbComponent {
+  #router = inject(Router);
+  protected readonly url = signal(this.#router.url);
+  protected readonly parsedUrl = computed(() => {
+    return this.url().split('/').filter(Boolean);
+  });
+}
diff --git a/src/app/core/components/settings-header/settings-header.component.html b/src/app/core/components/settings-header/settings-header.component.html
new file mode 100644
index 000000000..44f642b8b
--- /dev/null
+++ b/src/app/core/components/settings-header/settings-header.component.html
@@ -0,0 +1 @@
+<osf-breadcrumb />
diff --git a/src/app/core/components/settings-header/settings-header.component.scss b/src/app/core/components/settings-header/settings-header.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/core/components/settings-header/settings-header.component.spec.ts b/src/app/core/components/settings-header/settings-header.component.spec.ts
new file mode 100644
index 000000000..d46a1acd2
--- /dev/null
+++ b/src/app/core/components/settings-header/settings-header.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsHeaderComponent } from './settings-header.component';
+
+describe('SettingsHeaderComponent', () => {
+  let component: SettingsHeaderComponent;
+  let fixture: ComponentFixture<SettingsHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsHeaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/components/settings-header/settings-header.component.ts b/src/app/core/components/settings-header/settings-header.component.ts
new file mode 100644
index 000000000..9ce46fe36
--- /dev/null
+++ b/src/app/core/components/settings-header/settings-header.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component';
+
+@Component({
+  selector: 'osf-settings-header',
+  imports: [BreadcrumbComponent],
+  templateUrl: './settings-header.component.html',
+  styleUrl: './settings-header.component.scss',
+})
+export class SettingsHeaderComponent {}
diff --git a/src/app/features/settings/account-settings/account-settings.component.html b/src/app/features/settings/account-settings/account-settings.component.html
new file mode 100644
index 000000000..17efe8421
--- /dev/null
+++ b/src/app/features/settings/account-settings/account-settings.component.html
@@ -0,0 +1 @@
+<p>account-settings works!</p>
diff --git a/src/app/features/settings/account-settings/account-settings.component.scss b/src/app/features/settings/account-settings/account-settings.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/settings/account-settings/account-settings.component.spec.ts b/src/app/features/settings/account-settings/account-settings.component.spec.ts
new file mode 100644
index 000000000..d340f8560
--- /dev/null
+++ b/src/app/features/settings/account-settings/account-settings.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountSettingsComponent } from './account-settings.component';
+
+describe('AccountSettingsComponent', () => {
+  let component: AccountSettingsComponent;
+  let fixture: ComponentFixture<AccountSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccountSettingsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AccountSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/settings/account-settings/account-settings.component.ts b/src/app/features/settings/account-settings/account-settings.component.ts
new file mode 100644
index 000000000..3d790183e
--- /dev/null
+++ b/src/app/features/settings/account-settings/account-settings.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-account-settings',
+  imports: [],
+  templateUrl: './account-settings.component.html',
+  styleUrl: './account-settings.component.scss',
+})
+export class AccountSettingsComponent {}
diff --git a/src/app/features/settings/account-settings/account-settings.route.ts b/src/app/features/settings/account-settings/account-settings.route.ts
new file mode 100644
index 000000000..c9de1f6f8
--- /dev/null
+++ b/src/app/features/settings/account-settings/account-settings.route.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const accountSettingsRoute: Routes[] = [];
diff --git a/src/app/features/settings/index.ts b/src/app/features/settings/index.ts
new file mode 100644
index 000000000..76665df0c
--- /dev/null
+++ b/src/app/features/settings/index.ts
@@ -0,0 +1,4 @@
+export * from './account-settings/account-settings.route';
+export * from './account-settings/account-settings.component';
+
+export * from './profile-settings/profile-settings.component';
diff --git a/src/app/features/settings/profile-settings/profile-settings.component.html b/src/app/features/settings/profile-settings/profile-settings.component.html
new file mode 100644
index 000000000..0cc443e06
--- /dev/null
+++ b/src/app/features/settings/profile-settings/profile-settings.component.html
@@ -0,0 +1 @@
+<p>profile-settings works!</p>
diff --git a/src/app/features/settings/profile-settings/profile-settings.component.scss b/src/app/features/settings/profile-settings/profile-settings.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/settings/profile-settings/profile-settings.component.spec.ts b/src/app/features/settings/profile-settings/profile-settings.component.spec.ts
new file mode 100644
index 000000000..9ed3a6147
--- /dev/null
+++ b/src/app/features/settings/profile-settings/profile-settings.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileSettingsComponent } from './profile-settings.component';
+
+describe('ProfileSettingsComponent', () => {
+  let component: ProfileSettingsComponent;
+  let fixture: ComponentFixture<ProfileSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProfileSettingsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProfileSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/settings/profile-settings/profile-settings.component.ts b/src/app/features/settings/profile-settings/profile-settings.component.ts
new file mode 100644
index 000000000..8169ed395
--- /dev/null
+++ b/src/app/features/settings/profile-settings/profile-settings.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-profile-settings',
+  imports: [],
+  templateUrl: './profile-settings.component.html',
+  styleUrl: './profile-settings.component.scss',
+})
+export class ProfileSettingsComponent {}
diff --git a/src/app/features/settings/settings-container.component.html b/src/app/features/settings/settings-container.component.html
new file mode 100644
index 000000000..c0ae60e9d
--- /dev/null
+++ b/src/app/features/settings/settings-container.component.html
@@ -0,0 +1,3 @@
+<osf-settings-header />
+
+<router-outlet />
diff --git a/src/app/features/settings/settings-container.component.scss b/src/app/features/settings/settings-container.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/settings/settings-container.component.spec.ts b/src/app/features/settings/settings-container.component.spec.ts
new file mode 100644
index 000000000..9c6223478
--- /dev/null
+++ b/src/app/features/settings/settings-container.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsContainerComponent } from './settings-container.component';
+
+describe('SettingsContainerComponent', () => {
+  let component: SettingsContainerComponent;
+  let fixture: ComponentFixture<SettingsContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsContainerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/settings/settings-container.component.ts b/src/app/features/settings/settings-container.component.ts
new file mode 100644
index 000000000..48a3feccb
--- /dev/null
+++ b/src/app/features/settings/settings-container.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { SettingsHeaderComponent } from '@core/components/settings-header/settings-header.component';
+
+@Component({
+  selector: 'osf-settings-container',
+  imports: [RouterOutlet, SettingsHeaderComponent],
+  templateUrl: './settings-container.component.html',
+  styleUrl: './settings-container.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsContainerComponent {}
diff --git a/src/app/features/settings/settings.routes.ts b/src/app/features/settings/settings.routes.ts
new file mode 100644
index 000000000..1cce867df
--- /dev/null
+++ b/src/app/features/settings/settings.routes.ts
@@ -0,0 +1,25 @@
+import { Routes } from '@angular/router';
+import { SettingsContainerComponent } from '@osf/features/settings/settings-container.component';
+
+export const settingsRoutes: Routes = [
+  {
+    path: '',
+    component: SettingsContainerComponent,
+    children: [
+      {
+        path: 'profile-settings',
+        loadComponent: () =>
+          import('./profile-settings/profile-settings.component').then(
+            (c) => c.ProfileSettingsComponent,
+          ),
+      },
+      {
+        path: 'account-settings',
+        loadComponent: () =>
+          import('./account-settings/account-settings.component').then(
+            (c) => c.AccountSettingsComponent,
+          ),
+      },
+    ],
+  },
+];