diff --git a/.changeset/tasty-boats-turn.md b/.changeset/tasty-boats-turn.md
new file mode 100644
index 000000000..9092ac05a
--- /dev/null
+++ b/.changeset/tasty-boats-turn.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": minor
+---
+
+Add mt-vertical-stack component
diff --git a/packages/component-library/src/components/form/mt-switch/mt-switch.vue b/packages/component-library/src/components/form/mt-switch/mt-switch.vue
index 091b32f45..9b2441707 100644
--- a/packages/component-library/src/components/form/mt-switch/mt-switch.vue
+++ b/packages/component-library/src/components/form/mt-switch/mt-switch.vue
@@ -105,6 +105,7 @@ defineEmits<{
 
 .mt-switch--not-bordered {
   min-height: var(--scale-size-48);
+  display: flex;
 }
 
 .mt-switch--no-top-margin {
diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.mdx b/packages/component-library/src/components/layout/mt-grid/mt-grid.mdx
new file mode 100644
index 000000000..750745c18
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.mdx
@@ -0,0 +1,39 @@
+import { Primary, Meta } from "@storybook/blocks";
+import * as MtGrid from "./mt-grid.stories.ts";
+
+<Meta of={MtGrid} />
+
+# Grid
+
+> **Note:** The `mt-grid` is completely different from the old `sw-grid`.
+> If you're looking for a replacement for the `sw-grid` take a look at the
+> `mt-data-table` component.
+
+---
+
+The `mt-grid-component` can be used to create simple grid layouts. The most
+common use case for this component is to use it inside a `mt-card`.
+
+For more complex layouts you should create grids with CSS.
+
+## Usage
+
+```vue
+<template>
+  <mt-card>
+    <mt-grid :columns="3">
+      <mt-text-field />
+      <mt-text-field />
+      <mt-switch />
+      <mt-text-field />
+      <mt-text-field />
+      <mt-text-field />
+    </mt-grid>
+  </mt-card>
+</template>
+```
+
+<Primary />
+
+> **Note:** The `mt-grid` component is responsive by default. You don't need
+> to care about adding media or container queries to make it responsive
diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
new file mode 100644
index 000000000..d0cbebb57
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
@@ -0,0 +1,40 @@
+import type { StoryObj } from "@storybook/vue3";
+import MtGrid from "./mt-grid.vue";
+import type { SlottedMeta } from "@/_internal/story-helper";
+import MtTextField from "@/components/form/mt-text-field/mt-text-field.vue";
+import MtCard from "../mt-card/mt-card.vue";
+import MtFutureFlag from "@/components/theme/mt-future-flag.vue";
+import MtSwitch from "@/components/form/mt-switch/mt-switch.vue";
+
+type MtGridMeta = SlottedMeta<typeof MtGrid, "default">;
+
+export default {
+  title: "Components/Layout/mt-grid",
+  component: MtGrid,
+  render(args) {
+    return {
+      setup: () => ({ args }),
+      components: { MtGrid, MtTextField, MtCard, MtFutureFlag, MtSwitch },
+      template: `
+<mt-future-flag remove-default-margin>
+  <mt-card title="Grid inside a card">
+    <mt-grid v-bind="args">
+      <MtTextField label="Delivery time" />
+      <MtTextField label="Restock time in days" />
+      <MtSwitch label="Free shipping" />
+      <MtTextField label="Min. order quantity" />
+      <MtTextField label="Purchase steps" />
+      <MtTextField label="Max. order quantity" />
+    </mt-grid>
+  </mt-card>
+</mt-future-flag>
+`,
+    };
+  },
+} satisfies MtGridMeta;
+
+export const Default: StoryObj<MtGridMeta> = {
+  args: {
+    columns: 3,
+  },
+};
diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.vue b/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
new file mode 100644
index 000000000..1099281a1
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="mt-grid" :style="{ '--_mt-grid-columns': `calc(100% / ${columns})` }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineSlots } from "vue";
+
+defineProps<{
+  columns: number;
+}>();
+
+defineSlots<{
+  default(): any;
+}>();
+</script>
+
+<style>
+.mt-grid {
+  --_mt-grid-gap: 32px;
+  --_mt-grid-columns-without-gap: calc(var(--_mt-grid-columns) - var(--_mt-grid-gap));
+
+  gap: var(--_mt-grid-gap);
+  align-items: end;
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(max(var(--_mt-grid-columns-without-gap), 200px), 1fr)
+  );
+}
+</style>
diff --git a/packages/component-library/src/components/layout/mt-vertical-stack/mt-stack.stories.ts b/packages/component-library/src/components/layout/mt-vertical-stack/mt-stack.stories.ts
new file mode 100644
index 000000000..6be3afaac
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-vertical-stack/mt-stack.stories.ts
@@ -0,0 +1,33 @@
+import type { SlottedMeta } from "@/_internal/story-helper";
+import type { StoryObj } from "@storybook/vue3";
+import MtVerticalStack from "./mt-vertical-stack.vue";
+
+type MtStackMeta = SlottedMeta<typeof MtVerticalStack, "default">;
+
+export default {
+  title: "Components/Layout/mt-vertical-stack",
+  component: MtVerticalStack,
+  render(args) {
+    return {
+      setup: () => ({ args }),
+      components: { MtVerticalStack },
+      template: `
+<mt-vertical-stack v-bind="args">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+</mt-vertical-stack>`,
+    };
+  },
+  args: {
+    size: "32px",
+  },
+} satisfies MtStackMeta;
+
+export const Default: StoryObj<typeof MtVerticalStack> = {};
+
+export const WithToken: StoryObj<typeof MtVerticalStack> = {
+  args: {
+    size: "scale-size-24",
+  },
+};
diff --git a/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.mdx b/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.mdx
new file mode 100644
index 000000000..a835942b1
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.mdx
@@ -0,0 +1,39 @@
+# Vertical Stack
+
+The `mt-vertical-stack` component can be used to align and add spacing
+between elements. Common use cases are adding multiple cards below each other
+or adding multiple rows of input fields.
+
+## Usage
+
+```vue
+<template>
+  <mt-vertical-stack>
+    <mt-card><!-- Your card content --></mt-card>
+    <mt-card><!-- Your card content --></mt-card>
+    <mt-card><!-- Your card content --></mt-card>
+  </mt-vertical-stack>
+</template>
+
+<script setup>
+import { MtVerticalStack } from "@shopware-ag/meteor-component-library";
+</script>
+```
+
+## Controlling the spacing
+
+To control the spacing between the elements, you can use the `size`
+property.
+
+To control the spacing you need to use a spacing tokens.
+The always start with `scale-size-` followed by a number. You can see
+a list of all available tokens in the [spacing documentation](https://github.com/shopware/meteor/blob/main/packages/tokens/deliverables/foundation/primitives.css#L149).
+
+```vue
+<template>
+  <mt-vertical-stack size="scale-size-4">
+    <div>Element 1</div>
+    <div>Element 2</div>
+  </mt-vertical-stack>
+</template>
+```
diff --git a/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.vue b/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.vue
new file mode 100644
index 000000000..1d7d49d5c
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="mt-stack" :style="{ gap }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  size: string;
+}>();
+
+const gap = computed(() => {
+  if (props.size.startsWith("scale-size-")) {
+    return `var(--${props.size})`;
+  }
+
+  return props.size;
+});
+</script>
+
+<style scoped>
+.mt-stack {
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/packages/component-library/src/components/theme/mt-future-flag.spec.ts b/packages/component-library/src/components/theme/mt-future-flag.spec.ts
new file mode 100644
index 000000000..5e1f1e791
--- /dev/null
+++ b/packages/component-library/src/components/theme/mt-future-flag.spec.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/vue";
+import MtFutureFlag from "./mt-future-flag.vue";
+import { defineComponent } from "vue";
+import { useFutureFlags } from "@/composables/useFutureFlags";
+
+describe("mt-future-flag", () => {
+  it("can enable a future flag", () => {
+    // ARRANGE
+    const Child = defineComponent({
+      template: "<div>No default margin: {{futureFlags.removeDefaultMargin.toString()}}</div>",
+      setup() {
+        const futureFlags = useFutureFlags();
+
+        return { futureFlags };
+      },
+    });
+
+    const Component = defineComponent({
+      components: { MtFutureFlag, Child },
+      template: "<mt-future-flag remove-default-margin><Child /></mt-future-flag>",
+    });
+
+    render(Component);
+
+    // ASSERT
+    expect(screen.getByText("No default margin: true")).toBeVisible();
+  });
+
+  it("future flag is disabled by default", () => {
+    // ARRANGE
+    const Child = defineComponent({
+      template: "<div>No default margin: {{futureFlags.removeDefaultMargin.toString()}}</div>",
+      setup() {
+        const futureFlags = useFutureFlags();
+
+        return { futureFlags };
+      },
+    });
+
+    const Component = defineComponent({
+      components: { MtFutureFlag, Child },
+      template: "<mt-future-flag><Child /></mt-future-flag>",
+    });
+
+    render(Component);
+
+    // ASSERT
+    expect(screen.getByText("No default margin: false")).toBeVisible();
+  });
+});
diff --git a/packages/component-library/src/components/theme/mt-future-flag.vue b/packages/component-library/src/components/theme/mt-future-flag.vue
new file mode 100644
index 000000000..eed74ac9e
--- /dev/null
+++ b/packages/component-library/src/components/theme/mt-future-flag.vue
@@ -0,0 +1,25 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import { provideFutureFlags } from "../../composables/useFutureFlags";
+
+const props = withDefaults(
+  defineProps<{
+    removeDefaultMargin?: boolean;
+  }>(),
+  {
+    removeDefaultMargin: false,
+  },
+);
+
+defineSlots<{
+  default(): any;
+}>();
+
+provideFutureFlags({
+  removeDefaultMargin: props.removeDefaultMargin,
+  removeCardWidth: false,
+});
+</script>
diff --git a/packages/component-library/src/index.ts b/packages/component-library/src/index.ts
index f4956d4b2..6cede892f 100644
--- a/packages/component-library/src/index.ts
+++ b/packages/component-library/src/index.ts
@@ -41,6 +41,9 @@ import MtTextEditor from "./components/form/mt-text-editor/mt-text-editor.vue";
 import MtTextEditorToolbarButton from "./components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button.vue";
 import MtSearch from "./components/navigation/mt-search/mt-search.vue";
 import MtUrlField from "./components/form/mt-url-field/mt-url-field.vue";
+import MtFutureFlag from "./components/theme/mt-future-flag.vue";
+import MtGrid from "./components/layout/mt-grid/mt-grid.vue";
+import MtVerticalStack from "./components/layout/mt-vertical-stack/mt-vertical-stack.vue";
 
 // Import SCSS for styling
 import "./components/assets/scss/all.scss";
@@ -93,6 +96,9 @@ export {
   MtSearch,
   MtUrlField,
   MtThemeProvider,
+  MtFutureFlag,
+  MtGrid,
+  MtVerticalStack,
   TooltipDirective,
   DeviceHelperPlugin,
   // @deprecated