diff --git a/services/app/source/01-global/index.css b/services/app/source/01-global/index.css
index 1dcb13ba..866b3886 100644
--- a/services/app/source/01-global/index.css
+++ b/services/app/source/01-global/index.css
@@ -1,6 +1,5 @@
 @layer global {
   @import './normalize/normalize';
   @import './html-elements/index';
-  @import './constrain/constrain';
   @import './icon/icon';
 }
diff --git a/services/app/source/02-layouts/Constrain/Constrain.stories.tsx b/services/app/source/02-layouts/Constrain/Constrain.stories.tsx
new file mode 100644
index 00000000..22549721
--- /dev/null
+++ b/services/app/source/02-layouts/Constrain/Constrain.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import SampleContent from '../../06-utility/storybook/SampleContent';
+import constrainArgs from './constrain.yml';
+import ConstrainLayout from './Constrain';
+
+const meta: Meta<typeof ConstrainLayout> = {
+  title: 'Layouts/Constrain',
+  component: ConstrainLayout,
+};
+
+type Story = StoryObj<typeof ConstrainLayout>;
+
+const Constrain: Story = {
+  render: args => (
+    <ConstrainLayout {...args}>
+      <SampleContent>Constrain Layout Content</SampleContent>
+    </ConstrainLayout>
+  ),
+  args: constrainArgs,
+};
+export default meta;
+export { Constrain };
diff --git a/services/app/source/02-layouts/Constrain/Constrain.tsx b/services/app/source/02-layouts/Constrain/Constrain.tsx
new file mode 100644
index 00000000..be345ad1
--- /dev/null
+++ b/services/app/source/02-layouts/Constrain/Constrain.tsx
@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import { GessoComponent } from 'gesso';
+import { ReactNode } from 'react';
+import styles from './constrain.module.css';
+
+interface ConstrainProps extends GessoComponent {
+  children?: ReactNode;
+  isHidden?: boolean;
+}
+
+function Constrain({
+  children,
+  isHidden = false,
+  modifierClasses,
+}: ConstrainProps): JSX.Element {
+  return isHidden ? (
+    <>{children}</>
+  ) : (
+    <div className={clsx(styles.constrain, modifierClasses)}>{children}</div>
+  );
+}
+
+export default Constrain;
diff --git a/services/app/source/01-global/constrain/constrain.css b/services/app/source/02-layouts/Constrain/constrain.module.css
similarity index 100%
rename from services/app/source/01-global/constrain/constrain.css
rename to services/app/source/02-layouts/Constrain/constrain.module.css
diff --git a/services/app/source/02-layouts/Constrain/constrain.yml b/services/app/source/02-layouts/Constrain/constrain.yml
new file mode 100644
index 00000000..84dc5daa
--- /dev/null
+++ b/services/app/source/02-layouts/Constrain/constrain.yml
@@ -0,0 +1,2 @@
+---
+modifierClasses: ''
diff --git a/services/app/source/02-layouts/Footer/Footer.tsx b/services/app/source/02-layouts/Footer/Footer.tsx
index 35d55231..997bba20 100644
--- a/services/app/source/02-layouts/Footer/Footer.tsx
+++ b/services/app/source/02-layouts/Footer/Footer.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
+import Constrain from '../Constrain/Constrain';
 import { ReactNode } from 'react';
 import styles from './footer.module.css';
 
@@ -18,15 +19,9 @@ function Footer({
       className={clsx(styles.wrapper, modifierClasses)}
       role="contentinfo"
     >
-      <div
-        className={clsx(
-          styles.inner,
-          hasConstrain && 'constrain',
-          constrainClasses,
-        )}
-      >
-        {children}
-      </div>
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
+        <div className={styles.inner}>{children}</div>
+      </Constrain>
     </footer>
   );
 }
diff --git a/services/app/source/02-layouts/Header/Header.tsx b/services/app/source/02-layouts/Header/Header.tsx
index 7ccd5783..e7e1c0e9 100644
--- a/services/app/source/02-layouts/Header/Header.tsx
+++ b/services/app/source/02-layouts/Header/Header.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
+import Constrain from '../Constrain/Constrain';
 import { ReactNode } from 'react';
 import styles from './header.module.css';
 
@@ -15,15 +16,9 @@ function Header({
 }: HeaderProps): JSX.Element {
   return (
     <header role="banner" className={clsx(styles.wrapper, modifierClasses)}>
-      <div
-        className={clsx(
-          styles.inner,
-          hasConstrain && 'constrain',
-          constrainClasses,
-        )}
-      >
-        {children}
-      </div>
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
+        <div className={styles.inner}>{children}</div>
+      </Constrain>
     </header>
   );
 }
diff --git a/services/app/source/02-layouts/Main/Main.tsx b/services/app/source/02-layouts/Main/Main.tsx
index 92565805..e1e307ac 100644
--- a/services/app/source/02-layouts/Main/Main.tsx
+++ b/services/app/source/02-layouts/Main/Main.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
+import Constrain from '../Constrain/Constrain';
 import { ReactNode } from 'react';
 import styles from './main.module.css';
 
@@ -22,9 +23,9 @@ function Main({
       role="main"
       tabIndex={-1}
     >
-      <div className={clsx(hasConstrain && 'constrain', constrainClasses)}>
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
         {children}
-      </div>
+      </Constrain>
     </main>
   );
 }
diff --git a/services/app/source/02-layouts/Section/Section.tsx b/services/app/source/02-layouts/Section/Section.tsx
index b2c7e653..87df27c5 100644
--- a/services/app/source/02-layouts/Section/Section.tsx
+++ b/services/app/source/02-layouts/Section/Section.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
+import Constrain from '../Constrain/Constrain';
 import { ElementType, ReactNode } from 'react';
 import styles from './section.module.css';
 
@@ -19,10 +20,10 @@ function Section({
 }: SectionProps): JSX.Element {
   return (
     <section className={clsx(styles.section, modifierClasses)}>
-      <div className={clsx(hasConstrain && 'constrain', constrainClasses)}>
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
         {title && <TitleElement className={styles.title}>{title}</TitleElement>}
         <div className={styles.content}>{children}</div>
-      </div>
+      </Constrain>
     </section>
   );
 }
diff --git a/services/app/source/03-components/Breadcrumb/Breadcrumb.tsx b/services/app/source/03-components/Breadcrumb/Breadcrumb.tsx
index b8d0a84d..7aaf390e 100644
--- a/services/app/source/03-components/Breadcrumb/Breadcrumb.tsx
+++ b/services/app/source/03-components/Breadcrumb/Breadcrumb.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import Link from 'next/link';
 import { ElementType } from 'react';
 import styles from './breadcrumb.module.css';
@@ -30,7 +31,7 @@ function Breadcrumb({
       aria-labelledby={breadcrumbId}
       className={styles.breadcrumb}
     >
-      <div className="constrain">
+      <Constrain>
         <TitleElement
           id={breadcrumbId}
           className={clsx(styles.title, hideTitle && 'u-visually-hidden')}
@@ -51,7 +52,7 @@ function Breadcrumb({
               </li>
             ))}
         </ol>
-      </div>
+      </Constrain>
     </nav>
   );
 }