diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index a9e3794b65..b78823a0ef 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -14,6 +14,9 @@ import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 
+import { AccountComponent } from './settings/account.component';
+import { SettingsComponent } from './settings/settings.component';
+
 import { ExportComponent } from './tools/export.component';
 import { ImportComponent } from './tools/import.component';
 import { PasswordGeneratorComponent } from './tools/password-generator.component';
@@ -42,6 +45,14 @@ const routes: Routes = [
         component: UserLayoutComponent,
         children: [
             { path: 'vault', component: VaultComponent, canActivate: [AuthGuardService] },
+            {
+                path: 'settings',
+                component: SettingsComponent,
+                children: [
+                    { path: '', pathMatch: 'full', redirectTo: 'account' },
+                    { path: 'account', component: AccountComponent, canActivate: [AuthGuardService] },
+                ],
+            },
             {
                 path: 'tools',
                 component: ToolsComponent,
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index eb6ed514f9..907dc16d2e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -29,6 +29,9 @@ import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 
+import { AccountComponent } from './settings/account.component';
+import { SettingsComponent } from './settings/settings.component';
+
 import { ExportComponent } from './tools/export.component';
 import { ImportComponent } from './tools/import.component';
 import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component';
@@ -78,6 +81,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         ToasterModule,
     ],
     declarations: [
+        AccountComponent,
         AddEditComponent,
         ApiActionDirective,
         AppComponent,
@@ -111,6 +115,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         PasswordGeneratorHistoryComponent,
         RegisterComponent,
         SearchCiphersPipe,
+        SettingsComponent,
         ShareComponent,
         StopClickDirective,
         StopPropDirective,
diff --git a/src/app/settings/account.component.html b/src/app/settings/account.component.html
new file mode 100644
index 0000000000..5d9b17dd1d
--- /dev/null
+++ b/src/app/settings/account.component.html
@@ -0,0 +1,3 @@
+<div class="page-header">
+    <h1>My Account</h1>
+</div>
diff --git a/src/app/settings/account.component.ts b/src/app/settings/account.component.ts
new file mode 100644
index 0000000000..df1efb9d99
--- /dev/null
+++ b/src/app/settings/account.component.ts
@@ -0,0 +1,9 @@
+import {
+    Component,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-account',
+    templateUrl: 'account.component.html',
+})
+export class AccountComponent { }
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
new file mode 100644
index 0000000000..2a08cd0a3d
--- /dev/null
+++ b/src/app/settings/settings.component.html
@@ -0,0 +1,32 @@
+<div class="container page-content">
+    <div class="row">
+        <div class="col-3">
+            <div class="card">
+                <div class="card-header">Settings</div>
+                <div class="list-group list-group-flush">
+                    <a routerLink="account" class="list-group-item" routerLinkActive="active">
+                        My Account
+                    </a>
+                    <a routerLink="options" class="list-group-item" routerLinkActive="active">
+                        Options
+                    </a>
+                    <a routerLink="organizations" class="list-group-item" routerLinkActive="active">
+                        Organizations
+                    </a>
+                    <a routerLink="billing" class="list-group-item" routerLinkActive="active">
+                        Billing &amp; Licensing
+                    </a>
+                    <a routerLink="two-step" class="list-group-item" routerLinkActive="active">
+                        Two-step Login
+                    </a>
+                    <a routerLink="domain-rules" class="list-group-item" routerLinkActive="active">
+                        Domain Rules
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-9">
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
new file mode 100644
index 0000000000..3c4405ad4a
--- /dev/null
+++ b/src/app/settings/settings.component.ts
@@ -0,0 +1,9 @@
+import {
+    Component,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: 'settings.component.html',
+})
+export class SettingsComponent { }