diff --git a/apps/web/src/scss/base.scss b/apps/web/src/scss/base.scss
index a17fc5c5438..369077f2e25 100644
--- a/apps/web/src/scss/base.scss
+++ b/apps/web/src/scss/base.scss
@@ -78,11 +78,11 @@ img.logo {
   height: 43px;
   margin: 0 auto;
   width: 284px;
+}
 
-  &.logo-themed {
-    @include themify($themes) {
-      content: url("../images/logo-" + themed("logoSuffix") + "@2x.png");
-    }
+img.logo-themed {
+  @include themify($themes) {
+    content: url("../images/logo-" + themed("logoSuffix") + "@2x.png");
   }
 }
 
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 380a5b8870c..a944f9dd672 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -1,4 +1,10 @@
 /* eslint-disable no-undef, @typescript-eslint/no-var-requires */
 const config = require("../../libs/components/tailwind.config.base");
 
+config.content = [
+  "./src/**/*.{html,ts}",
+  "../../libs/components/src/**/*.{html,ts}",
+  "../../bitwarden_license/bit-web/src/**/*.{html,ts}",
+];
+
 module.exports = config;
diff --git a/bitwarden_license/bit-web/src/app/app-routing.module.ts b/bitwarden_license/bit-web/src/app/app-routing.module.ts
index 1ae195d6dd7..c61367ccdce 100644
--- a/bitwarden_license/bit-web/src/app/app-routing.module.ts
+++ b/bitwarden_license/bit-web/src/app/app-routing.module.ts
@@ -8,6 +8,10 @@ const routes: Routes = [
     path: "providers",
     loadChildren: () => ProvidersModule,
   },
+  {
+    path: "sm",
+    loadChildren: async () => (await import("./sm/sm.module")).SecretsManagerModule,
+  },
 ];
 
 @NgModule({
diff --git a/bitwarden_license/bit-web/src/app/sm/layout/layout.component.html b/bitwarden_license/bit-web/src/app/sm/layout/layout.component.html
new file mode 100644
index 00000000000..00f8fc2ce84
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/layout/layout.component.html
@@ -0,0 +1,8 @@
+<div class="tw-flex tw-w-full">
+  <aside class="tw-w-60 tw-bg-background tw-min-h-screen">
+    <router-outlet name="sidebar"></router-outlet>
+  </aside>
+  <main class="tw-flex-1 tw-bg-background-alt tw-min-h-screen tw-px-6 tw-pt-3">
+    <router-outlet></router-outlet>
+  </main>
+</div>
diff --git a/bitwarden_license/bit-web/src/app/sm/layout/layout.component.ts b/bitwarden_license/bit-web/src/app/sm/layout/layout.component.ts
new file mode 100644
index 00000000000..6a90eb2a78f
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/layout/layout.component.ts
@@ -0,0 +1,11 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "sm-layout",
+  templateUrl: "./layout.component.html",
+})
+export class LayoutComponent implements OnInit {
+  ngOnInit() {
+    document.body.classList.remove("layout_frontend");
+  }
+}
diff --git a/bitwarden_license/bit-web/src/app/sm/layout/navigation.component.html b/bitwarden_license/bit-web/src/app/sm/layout/navigation.component.html
new file mode 100644
index 00000000000..b664d4fcaaf
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/layout/navigation.component.html
@@ -0,0 +1,13 @@
+<img alt="Bitwarden" class="logo-themed tw-box-border tw-block tw-w-full tw-py-5 tw-px-3" />
+
+<div class="card mb-4 tw-m-2">
+  <div class="list-group list-group-flush">
+    <a routerLink="projects" class="list-group-item" routerLinkActive="active"> Projects </a>
+    <a routerLink="secrets" class="list-group-item" routerLinkActive="active"> Secrets </a>
+    <a routerLink="serviceAccounts" class="list-group-item" routerLinkActive="active">
+      Service Accounts
+    </a>
+    <a routerLink="trash" class="list-group-item" routerLinkActive="active"> Trash </a>
+    <a routerLink="settings" class="list-group-item" routerLinkActive="active"> Settings </a>
+  </div>
+</div>
diff --git a/bitwarden_license/bit-web/src/app/sm/layout/navigation.component.ts b/bitwarden_license/bit-web/src/app/sm/layout/navigation.component.ts
new file mode 100644
index 00000000000..8814d8490da
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/layout/navigation.component.ts
@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "sm-navigation",
+  templateUrl: "./navigation.component.html",
+})
+export class NavigationComponent {}
diff --git a/bitwarden_license/bit-web/src/app/sm/secrets/secrets-routing.module.ts b/bitwarden_license/bit-web/src/app/sm/secrets/secrets-routing.module.ts
new file mode 100644
index 00000000000..9f76f921030
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/secrets/secrets-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { SecretsComponent } from "./secrets.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: SecretsComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SecretsRoutingModule {}
diff --git a/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.html b/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.html
new file mode 100644
index 00000000000..e17c4fdbc1c
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.html
@@ -0,0 +1 @@
+<h1 class="tw-text-3x tw-font-semibold">Secrets</h1>
diff --git a/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.ts b/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.ts
new file mode 100644
index 00000000000..9b12584e527
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.ts
@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "sm-secrets",
+  templateUrl: "./secrets.component.html",
+})
+export class SecretsComponent {}
diff --git a/bitwarden_license/bit-web/src/app/sm/secrets/secrets.module.ts b/bitwarden_license/bit-web/src/app/sm/secrets/secrets.module.ts
new file mode 100644
index 00000000000..b98e2a8f7f9
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/secrets/secrets.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { SecretsRoutingModule } from "./secrets-routing.module";
+import { SecretsComponent } from "./secrets.component";
+
+@NgModule({
+  imports: [CommonModule, SecretsRoutingModule],
+  declarations: [SecretsComponent],
+  providers: [],
+})
+export class SecretsModule {}
diff --git a/bitwarden_license/bit-web/src/app/sm/sm-routing.module.ts b/bitwarden_license/bit-web/src/app/sm/sm-routing.module.ts
new file mode 100644
index 00000000000..8e936761bc3
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/sm-routing.module.ts
@@ -0,0 +1,36 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { LayoutComponent } from "./layout/layout.component";
+import { NavigationComponent } from "./layout/navigation.component";
+import { SecretsModule } from "./secrets/secrets.module";
+import { SMGuard } from "./sm.guard";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: LayoutComponent,
+    canActivate: [SMGuard],
+    children: [
+      {
+        path: "",
+        component: NavigationComponent,
+        outlet: "sidebar",
+      },
+      {
+        path: "secrets",
+        loadChildren: () => SecretsModule,
+      },
+      {
+        path: "",
+        redirectTo: "secrets",
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SecretsManagerRoutingModule {}
diff --git a/bitwarden_license/bit-web/src/app/sm/sm.guard.ts b/bitwarden_license/bit-web/src/app/sm/sm.guard.ts
new file mode 100644
index 00000000000..f9bc86f12b3
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/sm.guard.ts
@@ -0,0 +1,13 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate } from "@angular/router";
+
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+
+@Injectable()
+export class SMGuard implements CanActivate {
+  constructor(private platformUtilsService: PlatformUtilsService) {}
+
+  async canActivate(route: ActivatedRouteSnapshot) {
+    return this.platformUtilsService.isDev();
+  }
+}
diff --git a/bitwarden_license/bit-web/src/app/sm/sm.module.ts b/bitwarden_license/bit-web/src/app/sm/sm.module.ts
new file mode 100644
index 00000000000..acefe817153
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/sm/sm.module.ts
@@ -0,0 +1,19 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+
+import { OssModule } from "src/app/oss.module";
+
+import { LayoutComponent } from "./layout/layout.component";
+import { NavigationComponent } from "./layout/navigation.component";
+import { SecretsManagerRoutingModule } from "./sm-routing.module";
+import { SMGuard } from "./sm.guard";
+
+@NgModule({
+  imports: [CommonModule, FormsModule, OssModule, JslibModule, SecretsManagerRoutingModule],
+  declarations: [LayoutComponent, NavigationComponent],
+  providers: [SMGuard],
+})
+export class SecretsManagerModule {}