diff --git a/.changeset/strong-kiwis-check.md b/.changeset/strong-kiwis-check.md
new file mode 100644
index 0000000000..038377b5d3
--- /dev/null
+++ b/.changeset/strong-kiwis-check.md
@@ -0,0 +1,7 @@
+---
+"@marigold/storybook-config": patch
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+feat: add className to MarigoldProvider
diff --git a/config/storybook/.storybook/preview.tsx b/config/storybook/.storybook/preview.tsx
index c5670c38bf..c2011a09c8 100644
--- a/config/storybook/.storybook/preview.tsx
+++ b/config/storybook/.storybook/preview.tsx
@@ -59,7 +59,10 @@ export const decorators: any = [
             {Object.keys(THEME).map(key => (
               <OverlayContainerProvider value={`portalContainer-${key}`}>
                 <Frame key={key} id={key} title={`Theme "${key}"`}>
-                  <MarigoldProvider theme={THEME[key as ThemeNames]}>
+                  <MarigoldProvider
+                    theme={THEME[key as ThemeNames]}
+                    className="bg-bg-surface"
+                  >
                     <div className="p-4" data-theme={key}>
                       {Story()}
                     </div>
@@ -72,7 +75,10 @@ export const decorators: any = [
       }
       case 'core': {
         return (
-          <MarigoldProvider theme={THEME[theme as ThemeNames]}>
+          <MarigoldProvider
+            theme={THEME[theme as ThemeNames]}
+            className="bg-bg-surface"
+          >
             <div className="h-screen p-6">
               <FieldGroup labelWidth="200px">{Story()}</FieldGroup>
             </div>
@@ -81,7 +87,10 @@ export const decorators: any = [
       }
       default: {
         return (
-          <MarigoldProvider theme={THEME[theme as ThemeNames]}>
+          <MarigoldProvider
+            theme={THEME[theme as ThemeNames]}
+            className="bg-bg-surface"
+          >
             <div className="h-screen p-6">{Story()}</div>
           </MarigoldProvider>
         );
diff --git a/docs/content/components/application/provider/provider.mdx b/docs/content/components/application/provider/provider.mdx
index 4c03acac35..18daedcad3 100644
--- a/docs/content/components/application/provider/provider.mdx
+++ b/docs/content/components/application/provider/provider.mdx
@@ -39,6 +39,12 @@ import { MarigoldProvider } from '@marigold/components';
       default: 'none',
       description: 'The use that should be used within the provider context.',
     },
+    {
+      property: 'className',
+      type: 'string',
+      default: 'none',
+      description: 'Set a className to the outer div from your app.',
+    },
 
 ]}
 />
diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx
index eac4fdd65c..5156dfc535 100644
--- a/docs/ui/ComponentDemo.tsx
+++ b/docs/ui/ComponentDemo.tsx
@@ -63,8 +63,11 @@ export const ComponentDemo = ({ name, children }: ComponentDemoProps) => {
             >
               <div id="portalContainer" className="not-prose" />
               <OverlayContainerProvider value="portalContainer">
-                <MarigoldProvider theme={(current && themes[current]) as Theme}>
-                  <div className="not-prose w-full overflow-x-auto p-4">
+                <MarigoldProvider
+                  theme={(current && themes[current]) as Theme}
+                  className="bg-bg-surface"
+                >
+                  <div className="not-prose size-full overflow-x-auto p-4">
                     <Wrapper>
                       <Demo />
                     </Wrapper>
diff --git a/packages/components/src/Provider/MarigoldProvider.test.tsx b/packages/components/src/Provider/MarigoldProvider.test.tsx
index ea6da5d2f6..2db31275b4 100644
--- a/packages/components/src/Provider/MarigoldProvider.test.tsx
+++ b/packages/components/src/Provider/MarigoldProvider.test.tsx
@@ -119,3 +119,25 @@ test('cascading without a selector is allowed when inner theme has not root styl
     )
   ).not.toThrowError();
 });
+
+test('using classname prop', () => {
+  const outerTheme = {
+    name: 'outer',
+    colors: {
+      primary: 'coral',
+    },
+    components: {
+      Button: cva(),
+    },
+  };
+
+  render(
+    <MarigoldProvider theme={outerTheme} className="bg-slate-400">
+      child
+    </MarigoldProvider>
+  );
+  const theme = screen.getByText('child');
+
+  console.log(theme?.className);
+  expect(theme?.className).toMatchInlineSnapshot(`"bg-slate-400"`);
+});
diff --git a/packages/components/src/Provider/MarigoldProvider.tsx b/packages/components/src/Provider/MarigoldProvider.tsx
index cb6558d484..98e9426dc3 100644
--- a/packages/components/src/Provider/MarigoldProvider.tsx
+++ b/packages/components/src/Provider/MarigoldProvider.tsx
@@ -9,7 +9,12 @@ export interface MarigoldProviderProps<T extends Theme>
 // ---------------
 export function MarigoldProvider<T extends Theme>({
   children,
+  className,
   theme,
 }: MarigoldProviderProps<T>) {
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <ThemeProvider theme={theme} className={className}>
+      {children}
+    </ThemeProvider>
+  );
 }