diff --git a/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.ts b/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.ts
index d095b00980..7aaaa87aba 100644
--- a/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.ts
+++ b/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.ts
@@ -2,19 +2,17 @@ import { Component } from '@angular/core';
 
 const codeTemplate =
   require('!!raw-loader!../spinner-mini-demo/spinner-mini-demo.component.html').default;
-const spinner = `<div class="position-relative">
-    <div class="spinner-bg">
-        <div class="loading-modal">
-            <div class="loader m-auto"></div>
-        </div>
+const spinner = `<!-- my-parent-element class="position-relative" -->
+<div class="spinner-bg">
+    <div class="loading-modal">
+        <div class="loader m-auto"></div>
     </div>
 </div>`;
-const spinnerSmall = `<div class="position-relative">
-  <div class="spinner-bg">
-      <div class="loading-modal">
-          <div class="loader loader-sm m-auto"></div>
-      </div>
-  </div>
+const spinnerSmall = `<!-- my-parent-element class="position-relative" -->
+<div class="spinner-bg">
+    <div class="loading-modal">
+        <div class="loader loader-sm m-auto"></div>
+    </div>
 </div>`;
 
 @Component({
diff --git a/packages/documentation/public/favicon.svg b/packages/documentation/public/favicon.svg
new file mode 100644
index 0000000000..f4f0328a6b
--- /dev/null
+++ b/packages/documentation/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
+	<g id="Logo">
+		<rect fill="#ffcc00" x="0" y="0" width="72" height="72"/>
+		<polygon fill="#ff0000" points="34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3"/>
+		<path d="M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511
+			C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666
+			c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z"/>
+	</g>
+</svg>
diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
index 778f06bb1b..8a9c49f69f 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.stories.ts
+++ b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
@@ -23,13 +23,13 @@ const meta: Meta = {
       control: {
         type: 'select',
         labels: {
-          ' btn-sm': 'Small',
-          ' btn-rg': 'Regular',
-          ' btn-md': 'Medium',
-          ' btn-lg': 'Large',
+          'btn-sm': 'Small',
+          'btn-rg': 'Regular',
+          'btn-md': 'Medium',
+          'btn-lg': 'Large',
         },
       },
-      options: [' btn-sm', ' btn-rg', ' btn-md', ' btn-lg'],
+      options: ['btn-sm', 'btn-rg', 'btn-md', 'btn-lg'],
       table: {
         category: 'General',
       },
@@ -173,7 +173,7 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
             updateArgs({ selected: isChecked });
           }}"
         />
-        <label class="${`btn ${args.size} btn-secondary`}" for="${id}">${label}</label>
+        <label class="btn ${args.size} btn-secondary" for="${id}">${label}</label>
       `;
     }
     case 'radio': {
@@ -191,18 +191,14 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
             updateArgs({ checked: position });
           }}"
         />
-        <label class="${`btn ${args.size} btn-secondary`}" for="${id}">${label}</label>
+        <label class="btn ${args.size} btn-secondary" for="${id}">${label}</label>
       `;
     }
     case 'link':
-      return html`
-        <a href="#" class="${`btn ${args.size} btn-secondary`}">${label}</a>
-      `;
+      return html` <a href="#" class="btn ${args.size} btn-secondary">${label}</a> `;
     case 'button':
     default:
-      return html`
-        <button type="button" class="${`btn ${args.size} btn-secondary`}">${label}</button>
-      `;
+      return html` <button type="button" class="btn ${args.size} btn-secondary">${label}</button> `;
   }
 }
 
@@ -230,7 +226,7 @@ export const Sizing: Story = {
     },
   },
   args: {
-    size: ' btn-sm',
+    size: 'btn-sm',
   },
 };
 
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
index e947e62f6e..834d03ae4a 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -123,22 +123,12 @@ function render(args: Args, context: StoryContext) {
 
   const useAriaLabel = args.hiddenLabel;
   const label: TemplateResult | null = !useAriaLabel
-    ? html`
-        <label for="${id}" class="form-check-label">${args.label}</label>
-      `
+    ? html` <label for="${id}" class="form-check-label">${args.label}</label> `
     : null;
 
   const contextual: (TemplateResult | null)[] = [
-    args.validation === 'is-valid'
-      ? html`
-          <p class="valid-feedback">Ggranda sukceso!</p>
-        `
-      : null,
-    args.validation === 'is-invalid'
-      ? html`
-          <p class="invalid-feedback">Eraro okazis!</p>
-        `
-      : null,
+    args.validation === 'is-valid' ? html` <p class="valid-feedback">Ggranda sukceso!</p> ` : null,
+    args.validation === 'is-invalid' ? html` <p class="invalid-feedback">Eraro okazis!</p> ` : null,
   ];
 
   const control = html`
@@ -168,7 +158,7 @@ export const Default: Story = {};
 
 export function renderInline(args: Args, context: Partial<StoryContext>) {
   const [_, updateArgs] = useArgs();
-  const baseId = `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRadio`;
+  const baseId = `${context.viewMode}_${context.name?.replace(/\s/g, '-')}_ExampleRadio`;
   const id1 = baseId + '1';
   const id2 = baseId + '2';
   const id3 = baseId + '3';
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 389f96d498..31e3423710 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -160,34 +160,16 @@ function renderTextarea(args: Args, context: StoryContext) {
   });
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
   const label = !useAriaLabel
-    ? html`
-        <label for=${id} class="form-label">
-          ${html`
-            ${args.label}
-          `}
-        </label>
-      `
+    ? html` <label for=${id} class="form-label">${args.label}</label> `
     : null;
-  const contextuals = [
+  const contextual = [
     args.validation === 'is-valid'
-      ? html`
-          <div class="valid-feedback">Ggranda sukceso!</div>
-        `
+      ? html` <div class="valid-feedback">Ggranda sukceso!</div> `
       : null,
     args.validation === 'is-invalid'
-      ? html`
-          <div class="invalid-feedback">Eraro okazis!</div>
-        `
-      : null,
-    args.hint !== ''
-      ? html`
-          <div class="form-text">
-            ${html`
-              ${args.hint}
-            `}
-          </div>
-        `
+      ? html` <div class="invalid-feedback">Eraro okazis!</div> `
       : null,
+    args.hint !== '' ? html` <div class="form-text">${args.hint}</div> ` : null,
   ];
   const control = html`
     <textarea
@@ -206,12 +188,9 @@ ${args.textInside ?? nothing}</textarea
   `;
   if (args.floatingLabel) {
     return html`
-      <div class="form-floating">${[control, label, ...contextuals].filter(el => el !== null)}</div>
-    `;
-  } else
-    return html`
-      ${[label, control, ...contextuals].filter(el => el !== null)}
+      <div class="form-floating">${[control, label, ...contextual].filter(el => el !== null)}</div>
     `;
+  } else return html` ${[label, control, ...contextual].filter(el => el !== null)} `;
 }
 
 export const Default: Story = {};
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
index 0eeacc165d..a33a97a009 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
@@ -34,7 +34,9 @@ export const GridTable = () => (
     <tr>
       <th>Custom gutters</th>
       <td colSpan={SCSS_VARIABLES['breakpoint-count']}>
-        <a href="/?path=/docs/foundations-layout-gutters--docs">yes</a>
+        <a href="#gutters" target="_self">
+          yes
+        </a>
       </td>
     </tr>
     <tr>
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
index 883790de95..a616412af9 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks';
 import { formatAsMap } from '../../../../utils/sass-export';
 import { GridTable, SCSS_VARIABLES } from './grid.blocks';
 import * as GridStories from './grid.stories';
@@ -41,7 +41,7 @@ Breaking it down, here’s how the grid system comes together:
   <Source language="html" dark code={SampleContainer}></Source>
 - **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.
 - **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `.col-4` spans four). Widths are set in percentages so you always have the same relative sizing.
-- **Gutters are also responsive and customizable.** Gutter classes are available across all breakpoints, with all the same sizes as our `margin` and `padding` spacing. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-\*` classes. `.g-0` is also available to remove gutters.
+- **Gutters are also responsive and customizable.** Gutter classes are available across all breakpoints, with all the same sizes as our `margin` and `padding` spacing. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
 - **Sass variables, maps, and mixins power the grid.** If you don’t want to use the predefined grid classes, you can use the grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
 
 ## Grid options
@@ -103,10 +103,18 @@ Use these row columns classes to quickly create basic grid layouts or to control
 
 <Canvas of={GridStories.RowColumns} />
 
+## Gutters
+
+To control the space between your columns, add either `.g-*` (horizontal and vertical) `.gx-*` (horizontal) or `.gy-*` (vertical) classes on the element containing the `.row` class.
+
+<Canvas of={GridStories.Gutters} />
+
 ## Nesting
 
 To nest your content with the default grid, add a new `.row` and set of `.col-*` columns within an existing `.col-*` column. Nested rows should include a set of columns that add up to 12 or fewer.
 
+Note: the style in this example is applied to the column to visually better understand nesting. However, it's recommended to apply the style on a child element of the column.
+
 <Canvas of={GridStories.Nested} />
 
 ## CSS
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
index 34585ac825..c10ab175b0 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryFn, StoryObj, StoryContext } from '@storybook/web-components';
+import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 import { html } from 'lit';
 
@@ -9,7 +9,9 @@ const meta: Meta = {
   },
   decorators: [
     (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="grid-example text-center">${story(args, context)}</div>
+      <div class="grid-example text-center ${args?.additionalDecoratorsClasses}">
+        ${story(args, context)}
+      </div>
     `,
   ],
 };
@@ -22,9 +24,15 @@ export const Basis: Story = {
   render: () => html`
     <div class="container">
       <div class="row">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
     </div>
   `,
@@ -34,11 +42,15 @@ export const SingleColumnOnly: Story = {
   render: () => html`
     <div class="container">
       <div class="row">
-        <div class="col">Don't do this!</div>
+        <div class="col">
+          <div class="my-col-content-style">Don't do this!</div>
+        </div>
       </div>
       <br />
       <div class="row">
-        <div class="col-12">Nor this!</div>
+        <div class="col">
+          <div class="my-col-content-style">Nor this!</div>
+        </div>
       </div>
       <br />
       <p>Instead, your content should go here!</p>
@@ -49,14 +61,24 @@ export const SingleColumnOnly: Story = {
 export const EqualWidth: Story = {
   render: () => html`
     <div class="container">
-      <div class="row">
-        <div class="col">1 of 2</div>
-        <div class="col">2 of 2</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">1 of 2</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">2 of 2</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col">1 of 3</div>
-        <div class="col">2 of 3</div>
-        <div class="col">3 of 3</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">1 of 3</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">2 of 3</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">3 of 3</div>
+        </div>
       </div>
     </div>
   `,
@@ -65,15 +87,27 @@ export const EqualWidth: Story = {
 export const SettingOneColumnWidth: Story = {
   render: () => html`
     <div class="container">
-      <div class="row">
-        <div class="col">1 of 3</div>
-        <div class="col-6">2 of 3 (wider)</div>
-        <div class="col">3 of 3</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">1 of 3</div>
+        </div>
+        <div class="col-6">
+          <div class="my-col-content-style">2 of 3 (wider)</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">3 of 3</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col">1 of 3</div>
-        <div class="col-5">2 of 3 (wider)</div>
-        <div class="col">3 of 3</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">1 of 3</div>
+        </div>
+        <div class="col-5">
+          <div class="my-col-content-style">2 of 3 (wider)</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">3 of 3</div>
+        </div>
       </div>
     </div>
   `,
@@ -82,15 +116,27 @@ export const SettingOneColumnWidth: Story = {
 export const VariableWidthContent: Story = {
   render: () => html`
     <div class="container">
-      <div class="row justify-content-md-center">
-        <div class="col col-lg-2">1 of 3</div>
-        <div class="col-md-auto">Variable width content</div>
-        <div class="col col-lg-2">3 of 3</div>
+      <div class="row g-0 justify-content-md-center">
+        <div class="col col-lg-2">
+          <div class="my-col-content-style">1 of 3</div>
+        </div>
+        <div class="col-md-auto">
+          <div class="my-col-content-style">Variable width content</div>
+        </div>
+        <div class="col col-lg-2">
+          <div class="my-col-content-style">3 of 3</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col">1 of 3</div>
-        <div class="col-md-auto">Variable width content</div>
-        <div class="col col-lg-2">3 of 3</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">1 of 3</div>
+        </div>
+        <div class="col-md-auto">
+          <div class="my-col-content-style">Variable width content</div>
+        </div>
+        <div class="col col-lg-2">
+          <div class="my-col-content-style">3 of 3</div>
+        </div>
       </div>
     </div>
   `,
@@ -99,15 +145,27 @@ export const VariableWidthContent: Story = {
 export const AllBreakpoints: Story = {
   render: () => html`
     <div class="container">
-      <div class="row">
-        <div class="col">col</div>
-        <div class="col">col</div>
-        <div class="col">col</div>
-        <div class="col">col</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">col</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">col</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">col</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">col</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col-8">col-8</div>
-        <div class="col-4">col-4</div>
+      <div class="row g-0">
+        <div class="col-8">
+          <div class="my-col-content-style">col-8</div>
+        </div>
+        <div class="col-4">
+          <div class="my-col-content-style">col-4</div>
+        </div>
       </div>
     </div>
   `,
@@ -116,14 +174,24 @@ export const AllBreakpoints: Story = {
 export const StackedToHorizontal: Story = {
   render: () => html`
     <div class="container">
-      <div class="row">
-        <div class="col-md-8">col-md-8</div>
-        <div class="col-md-4">col-md-4</div>
+      <div class="row g-0">
+        <div class="col-md-8">
+          <div class="my-col-content-style">col-md-8</div>
+        </div>
+        <div class="col-md-4">
+          <div class="my-col-content-style">col-md-4</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col-md">col-md</div>
-        <div class="col-md">col-md</div>
-        <div class="col-md">col-md</div>
+      <div class="row g-0">
+        <div class="col-md">
+          <div class="my-col-content-style">col-md</div>
+        </div>
+        <div class="col-md">
+          <div class="my-col-content-style">col-md</div>
+        </div>
+        <div class="col-md">
+          <div class="my-col-content-style">col-md</div>
+        </div>
       </div>
     </div>
   `,
@@ -133,22 +201,36 @@ export const MixAndMatch: Story = {
   render: () => html`
     <div class="container">
       <!-- Stack the columns on mobile by making one full-width and the other half-width -->
-      <div class="row">
-        <div class="col-md-8">.col-md-8</div>
-        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
+      <div class="row g-0">
+        <div class="col-md-8">
+          <div class="my-col-content-style">.col-md-8</div>
+        </div>
+        <div class="col-6 col-md-4">
+          <div class="my-col-content-style">.col-6 .col-md-4</div>
+        </div>
       </div>
 
       <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
-      <div class="row">
-        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
-        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
-        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
+      <div class="row g-0">
+        <div class="col-6 col-md-4">
+          <div class="my-col-content-style">.col-6 .col-md-4</div>
+        </div>
+        <div class="col-6 col-md-4">
+          <div class="my-col-content-style">.col-6 .col-md-4</div>
+        </div>
+        <div class="col-6 col-md-4">
+          <div class="my-col-content-style">.col-6 .col-md-4</div>
+        </div>
       </div>
 
       <!-- Columns width is always fix, on mobile and desktop -->
-      <div class="row">
-        <div class="col-4">.col-4</div>
-        <div class="col-8">.col-8</div>
+      <div class="row g-0">
+        <div class="col-4">
+          <div class="my-col-content-style">.col-4</div>
+        </div>
+        <div class="col-8">
+          <div class="my-col-content-style">.col-8</div>
+        </div>
       </div>
     </div>
   `,
@@ -157,51 +239,113 @@ export const MixAndMatch: Story = {
 export const RowColumns: Story = {
   render: () => html`
     <div class="container">
-      <div class="row row-cols-2">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+      <div class="row g-0 row-cols-2">
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
       <br />
-      <div class="row row-cols-3">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+      <div class="row g-0 row-cols-3">
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
       <br />
-      <div class="row row-cols-auto">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+      <div class="row g-0 row-cols-auto">
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
       <br />
-      <div class="row row-cols-4">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+      <div class="row g-0 row-cols-4">
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
         <div class="col-6">Column</div>
-        <div class="col">Column</div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
       <br />
-      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+      <div class="row g-0 row-cols-1 row-cols-md-2 row-cols-lg-4">
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+export const Gutters: Story = {
+  render: () => html`
+    <div class="container">
+      <div class="row gx-5 gy-1">
+        <div class="col-6">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col-6">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col-6">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col-6">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
     </div>
   `,
 };
 
 export const Nested: Story = {
+  args: {
+    additionalDecoratorsClasses: 'grid-nested-example',
+  },
   render: () => html`
     <div class="container">
-      <div class="row">
+      <div class="row g-0">
         <div class="col-md-3">Level 1: .col-md-3</div>
         <div class="col-md-9">
-          <div class="row">
+          <div class="row g-0">
             <div class="col-8 col-md-6">Level 2: .col-8 .col-md-6</div>
             <div class="col-4 col-md-6">Level 2: .col-4 .col-md-6</div>
           </div>
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss b/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss
index 8d2a063355..8f1ef67556 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss
@@ -3,8 +3,9 @@
 .grid-example {
   font-size: post.$font-size-sm;
 
-  .row > * {
-    padding-block: 0.75rem;
+  &.grid-nested-example [class^="col"],
+  &:not(.grid-nested-example) .my-col-content-style {
+    padding: 0.75rem;
     background-color: lighten(post.$nightblue-bright, 60%);
     border: 1px solid lighten(post.$nightblue-dark, 60%);
   }
diff --git a/packages/documentation/src/stories/foundation/layout/gutters/gutters.docs.mdx b/packages/documentation/src/stories/foundation/layout/gutters/gutters.docs.mdx
deleted file mode 100644
index a442ba4410..0000000000
--- a/packages/documentation/src/stories/foundation/layout/gutters/gutters.docs.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import * as GuttersStories from './gutters.stories';
-
-<Meta of={GuttersStories} />
-
-# Gutters
-
-<div className="alert alert-info">
-  <h2 className="alert-heading">TODO</h2>
-
-Document differences and link over to bootstrap for the rest
-
-Refer to the Figma Design as well: <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=0%3A1&t=6hjgJzjzxjBbh0AU-1">Figma</a>
-
-</div>
diff --git a/packages/documentation/src/stories/foundation/layout/gutters/gutters.stories.ts b/packages/documentation/src/stories/foundation/layout/gutters/gutters.stories.ts
deleted file mode 100644
index c17defa932..0000000000
--- a/packages/documentation/src/stories/foundation/layout/gutters/gutters.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-import { BADGE } from '../../../../../.storybook/constants';
-
-const meta: Meta = {
-  title: 'Foundations/Layout/Gutters',
-  parameters: {
-    badges: [BADGE.TODO],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts
index 9a29e55d45..c78f405c3d 100644
--- a/packages/documentation/src/stories/utilities/background/background.stories.ts
+++ b/packages/documentation/src/stories/utilities/background/background.stories.ts
@@ -14,9 +14,7 @@ export default meta;
 type Story = StoryObj;
 
 export const ColoredBackground: Story = {
-  render: () => html`
-    <div class="bg-yellow p-3">Content</div>
-  `,
+  render: () => html` <div class="bg-yellow p-3">Content</div> `,
 };
 
 export const NestedBackgrounds: Story = {
diff --git a/packages/internet-header/cypress/e2e/logout.cy.ts b/packages/internet-header/cypress/e2e/logout.cy.ts
index 15c36524a2..4f403c8953 100644
--- a/packages/internet-header/cypress/e2e/logout.cy.ts
+++ b/packages/internet-header/cypress/e2e/logout.cy.ts
@@ -6,25 +6,24 @@ describe('logout', () => {
       it('logout with url from config', () => {
         prepare('Components/Internet Header/Header', 'Default', { loggedIn: true });
         logoutFromMenu();
-
-        const origin = 'https://www.post.ch';
-        // Get redirected location. (Requires cy.origin as it's a cross-domain request)
-        cy.origin(origin, () => {
-          cy.location('pathname').should('eq', '/logout');
-        });
       });
 
       it(`overrides logout url from config`, () => {
         prepare('Components/Internet Header/Header', 'Default', { loggedIn: true });
         cy.changeArg('logoutUrl', 'about:blank');
         logoutFromMenu();
-        cy.location('pathname').should('eq', 'blank');
       });
     });
   });
 });
 
 function logoutFromMenu() {
-  cy.get('post-klp-login-widget').shadow().get('.klp-widget-authenticated-session-link').click();
-  cy.get('post-klp-login-widget').shadow().get('#klp-widget-authenticated-menu-logout').click();
+  cy.get('post-klp-login-widget')
+    .shadow()
+    .get('.klp-widget-authenticated-session-link', { timeout: 10000 })
+    .click();
+  cy.get('post-klp-login-widget')
+    .shadow()
+    .get('#klp-widget-authenticated-menu-logout')
+    .should('be.visible');
 }