diff --git a/apps/web/src/app/auth/anon-layout-wrapper.component.html b/libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.html
similarity index 100%
rename from apps/web/src/app/auth/anon-layout-wrapper.component.html
rename to libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.html
diff --git a/apps/web/src/app/auth/anon-layout-wrapper.component.ts b/libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts
similarity index 89%
rename from apps/web/src/app/auth/anon-layout-wrapper.component.ts
rename to libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts
index c89b05a3c6..a9ba1054ab 100644
--- a/apps/web/src/app/auth/anon-layout-wrapper.component.ts
+++ b/libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts
@@ -5,6 +5,12 @@ import { AnonLayoutComponent } from "@bitwarden/auth/angular";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { Icon } from "@bitwarden/components";
 
+export interface AnonLayoutWrapperData {
+  pageTitle: string;
+  pageSubtitle: string;
+  pageIcon: Icon;
+}
+
 @Component({
   standalone: true,
   templateUrl: "anon-layout-wrapper.component.html",
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.html b/libs/auth/src/angular/anon-layout/anon-layout.component.html
index 6483048a23..1152d2efbb 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.component.html
+++ b/libs/auth/src/angular/anon-layout/anon-layout.component.html
@@ -13,7 +13,7 @@
     </h1>
     <p *ngIf="subtitle" bitTypography="body1">{{ subtitle }}</p>
   </div>
-  <div class="tw-mb-auto tw-mx-auto tw-flex tw-flex-col tw-items-center">
+  <div class="tw-mb-auto tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center">
     <div
       class="tw-rounded-xl tw-mb-9 tw-mx-auto sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
     >
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.mdx b/libs/auth/src/angular/anon-layout/anon-layout.mdx
index c604c02f03..b98523bba1 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.mdx
+++ b/libs/auth/src/angular/anon-layout/anon-layout.mdx
@@ -31,14 +31,13 @@ writing:
 Instead the AnonLayoutComponent is implemented solely in the router via routable composition, which
 gives us the advantages of nested routes in Angular.
 
-To allow for routable composition, Auth will also provide a wrapper component in each client, called
-AnonLayout**Wrapper**Component.
+To allow for routable composition, Auth also provides an AnonLayout**Wrapper**Component which embeds
+the AnonLayoutComponent.
 
 For clarity:
 
-- AnonLayoutComponent = the Auth-owned library component - `<auth-anon-layout>`
-- AnonLayout**Wrapper**Component = the client-specific wrapper component to be used in a client
-  routing module
+- AnonLayoutComponent = the base, Auth-owned library component - `<auth-anon-layout>`
+- AnonLayout**Wrapper**Component = the wrapper to be used in client routing modules
 
 The AnonLayout**Wrapper**Component embeds the AnonLayoutComponent along with the router outlets:
 
@@ -79,7 +78,7 @@ example) to construct the page via routable composition:
           pageTitle: "logIn", // example of a translation key from messages.json
           pageSubtitle: "loginWithMasterPassword", // example of a translation key from messages.json
           pageIcon: LockIcon, // example of an icon to pass in
-        },
+        } satisfies AnonLayoutWrapperData,
       },
     ],
   },
@@ -99,7 +98,7 @@ In the `oss-routing.module.ts` example above, notice the data properties being p
 All 3 of these properties are optional.
 
 ```javascript
-import { LockIcon } from "@bitwarden/auth/angular";
+import { AnonLayoutWrapperData, LockIcon } from "@bitwarden/auth/angular";
 
 // ...
 
@@ -109,7 +108,7 @@ import { LockIcon } from "@bitwarden/auth/angular";
     pageTitle: "logIn",
     pageSubtitle: "loginWithMasterPassword",
     pageIcon: LockIcon,
-  },
+  } satisfies AnonLayoutWrapperData,
 }
 ```
 
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.stories.ts b/libs/auth/src/angular/anon-layout/anon-layout.stories.ts
index 61a395b155..103098349a 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.stories.ts
+++ b/libs/auth/src/angular/anon-layout/anon-layout.stories.ts
@@ -41,7 +41,7 @@ export const WithPrimaryContent: Story = {
       // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
       `
       <auth-anon-layout [title]="title" [subtitle]="subtitle">
-        <div class="tw-max-w-md">
+        <div>
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
         </div>
@@ -58,12 +58,12 @@ export const WithSecondaryContent: Story = {
       // Notice that slot="secondary" is requred to project any secondary content.
       `
       <auth-anon-layout [title]="title" [subtitle]="subtitle">
-        <div class="tw-max-w-md">
+        <div>
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
         </div>
 
-        <div slot="secondary" class="text-center tw-max-w-md">
+        <div slot="secondary" class="text-center">
           <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
           <button bitButton>Perform Action</button>
         </div>
@@ -79,12 +79,12 @@ export const WithLongContent: Story = {
       // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
       `
       <auth-anon-layout title="Page Title lorem ipsum dolor consectetur sit amet expedita quod est" subtitle="Subtitle here Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, quod est?">
-        <div class="tw-max-w-md">
+        <div>
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
         </div>
 
-        <div slot="secondary" class="text-center tw-max-w-md">
+        <div slot="secondary" class="text-center">
           <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Expedita, quod est?          </p>
           <button bitButton>Perform Action</button>
@@ -101,7 +101,7 @@ export const WithIcon: Story = {
       // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
       `
       <auth-anon-layout [title]="title" [subtitle]="subtitle" [icon]="icon">
-        <div class="tw-max-w-md">
+        <div>
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
         </div>
diff --git a/libs/auth/src/angular/index.ts b/libs/auth/src/angular/index.ts
index 067ed63b8e..474ef17d93 100644
--- a/libs/auth/src/angular/index.ts
+++ b/libs/auth/src/angular/index.ts
@@ -6,6 +6,7 @@
 export * from "./icons";
 
 export * from "./anon-layout/anon-layout.component";
+export * from "./anon-layout/anon-layout-wrapper.component";
 export * from "./fingerprint-dialog/fingerprint-dialog.component";
 export * from "./password-callout/password-callout.component";