diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html
index 9cd74d5ef2..462c15311a 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html
@@ -1,10 +1,4 @@
-
-
-
-
-
-
+
+
+
+
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts
index fe4ff31b50..750c947d74 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts
@@ -1,6 +1,6 @@
import { NgModule } from "@angular/core";
-import { NavigationModule } from "@bitwarden/components";
+import { LayoutComponent as BitLayoutComponent, NavigationModule } from "@bitwarden/components";
import { SharedModule } from "@bitwarden/web-vault/app/shared/shared.module";
import { LayoutComponent } from "./layout.component";
@@ -8,7 +8,7 @@ import { NavigationComponent } from "./navigation.component";
import { OrgSwitcherComponent } from "./org-switcher.component";
@NgModule({
- imports: [SharedModule, NavigationModule],
+ imports: [SharedModule, NavigationModule, BitLayoutComponent],
declarations: [LayoutComponent, NavigationComponent, OrgSwitcherComponent],
})
export class LayoutModule {}
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.stories.ts b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.stories.ts
deleted file mode 100644
index 3eeac62b7f..0000000000
--- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.stories.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Component, importProvidersFrom } from "@angular/core";
-import { RouterModule } from "@angular/router";
-import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
-import { BehaviorSubject } from "rxjs";
-
-import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
-import { IconModule } from "@bitwarden/components";
-import { PreloadedEnglishI18nModule } from "@bitwarden/web-vault/app/core/tests";
-
-import { LayoutComponent } from "./layout.component";
-import { LayoutModule } from "./layout.module";
-import { NavigationComponent } from "./navigation.component";
-
-class MockOrganizationService implements Partial {
- private static _orgs = new BehaviorSubject([]);
- organizations$ = MockOrganizationService._orgs; // eslint-disable-line rxjs/no-exposed-subjects
-}
-
-@Component({
- selector: "story-content",
- template: ` Content
`,
-})
-class StoryContentComponent {}
-
-export default {
- title: "Web/Layout",
- component: LayoutComponent,
- decorators: [
- moduleMetadata({
- imports: [RouterModule, LayoutModule, IconModule],
- declarations: [StoryContentComponent],
- providers: [{ provide: OrganizationService, useClass: MockOrganizationService }],
- }),
- applicationConfig({
- providers: [
- importProvidersFrom(
- RouterModule.forRoot(
- [
- {
- path: "",
- component: LayoutComponent,
- children: [
- {
- path: "",
- redirectTo: "secrets",
- pathMatch: "full",
- },
- {
- path: "secrets",
- component: StoryContentComponent,
- data: {
- title: "secrets",
- searchTitle: "searchSecrets",
- },
- },
- {
- outlet: "sidebar",
- path: "",
- component: NavigationComponent,
- },
- ],
- },
- ],
- { useHash: true }
- )
- ),
- importProvidersFrom(PreloadedEnglishI18nModule),
- ],
- }),
- ],
-} as Meta;
-
-const Template: Story = (args) => ({
- props: args,
- template: `
-
- `,
-});
-
-export const Default = Template.bind({});
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html
index 3b058077b2..97e96bed37 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html
@@ -1,22 +1,24 @@
-
-
-
+
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index dbc4f0b494..d4fdda08a2 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -13,6 +13,7 @@ export * from "./form-field";
export * from "./icon-button";
export * from "./icon";
export * from "./input";
+export * from "./layout";
export * from "./link";
export * from "./menu";
export * from "./multi-select";
diff --git a/libs/components/src/layout/index.ts b/libs/components/src/layout/index.ts
new file mode 100644
index 0000000000..6994a4f639
--- /dev/null
+++ b/libs/components/src/layout/index.ts
@@ -0,0 +1 @@
+export * from "./layout.component";
diff --git a/libs/components/src/layout/layout.component.html b/libs/components/src/layout/layout.component.html
new file mode 100644
index 0000000000..addbede7b4
--- /dev/null
+++ b/libs/components/src/layout/layout.component.html
@@ -0,0 +1,10 @@
+
diff --git a/libs/components/src/layout/layout.component.ts b/libs/components/src/layout/layout.component.ts
new file mode 100644
index 0000000000..337cbf080b
--- /dev/null
+++ b/libs/components/src/layout/layout.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+ selector: "bit-layout",
+ templateUrl: "layout.component.html",
+ standalone: true,
+ imports: [],
+})
+export class LayoutComponent {}
diff --git a/libs/components/src/layout/layout.stories.ts b/libs/components/src/layout/layout.stories.ts
new file mode 100644
index 0000000000..7ac986aa72
--- /dev/null
+++ b/libs/components/src/layout/layout.stories.ts
@@ -0,0 +1,64 @@
+import { RouterTestingModule } from "@angular/router/testing";
+import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { CalloutModule } from "../callout";
+import { NavigationModule } from "../navigation";
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { LayoutComponent } from "./layout.component";
+
+export default {
+ title: "Component Library/Layout",
+ component: LayoutComponent,
+ decorators: [
+ componentWrapperDecorator(
+ /**
+ * Applying a CSS transform makes a `position: fixed` element act like it is `position: relative`
+ * https://github.com/storybookjs/storybook/issues/8011#issue-490251969
+ */
+ (story) => /* HTML */ `
+ ${story}
+
`
+ ),
+ moduleMetadata({
+ imports: [NavigationModule, RouterTestingModule, CalloutModule],
+ providers: [
+ {
+ provide: I18nService,
+ useFactory: () => {
+ return new I18nMockService({});
+ },
+ },
+ ],
+ }),
+ ],
+} as Meta;
+
+type Story = StoryObj;
+
+export const Empty: Story = {
+ render: (args) => ({
+ props: args,
+ template: /* HTML */ ``,
+ }),
+};
+
+export const WithContent: Story = {
+ render: (args) => ({
+ props: args,
+ template: /* HTML */ `
+
+
+ Hello world!
+
+ `,
+ }),
+};