diff --git a/.changeset/large-geckos-serve.md b/.changeset/large-geckos-serve.md
new file mode 100644
index 0000000000..c98cd61986
--- /dev/null
+++ b/.changeset/large-geckos-serve.md
@@ -0,0 +1,9 @@
+---
+"docs": patch
+"@marigold/components": patch
+"@marigold/system": patch
+"@marigold/theme-b2b": patch
+"@marigold/theme-unicorn": patch
+---
+
+feat: add GlobalStyles via theme
diff --git a/docs/content/foundation/themes-variants.mdx b/docs/content/foundation/themes-variants.mdx
index ba264d6aa5..63ae424319 100644
--- a/docs/content/foundation/themes-variants.mdx
+++ b/docs/content/foundation/themes-variants.mdx
@@ -11,7 +11,7 @@ Marigold uses a theme for its base styles.
 ## Theme Object
 
 Theming is based on a `theme object` that builds on the [System UI Theme Specification](https://system-ui.com/theme/).
-The theme object defines your application's spacings, colors, fonts and component styles.
+The theme object defines your application's spacings, colors, fonts and component styles. In the theme, you can define root styles that are applied globally.
 
 ### Spacings
 
@@ -142,11 +142,19 @@ const classNames = useStyles({
 ### Create a Theme
 
 Create a file, e.g. `index.ts` in your theme folder and define your theme object.
+Define the overall applied root styles in the theme aswell.
 Import and use the theme in the `<ThemeProvider>`.
 See a working example base theme here:
 
 ```tsx code
 const theme: BaseTheme = {
+  styles: {
+    root: {
+      fontFamily: 'body',
+      margin: 0,
+      padding: 0,
+    },
+  },
   breakpoints: ['768', '1200'],
   space: {
     none: 0,
@@ -200,6 +208,7 @@ See the theme object keys and the corresponding CSS properties in the following
 
 | Theme Key     | CSS Properties                                                                                                                                                                                     |
 | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styles.root` | CSSObject                                                                                                                                                                                          |
 | `space`       | `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, `grid-gap`, `grid-column-gap`, `grid-row-gap` |
 | `breakpoints` | `min-width` (media query)                                                                                                                                                                          |
 | `fonts`       | `font-family `                                                                                                                                                                                     |
diff --git a/packages/components/src/Provider/MarigoldProvider.test.tsx b/packages/components/src/Provider/MarigoldProvider.test.tsx
index 022a53a0bb..25a71e8752 100644
--- a/packages/components/src/Provider/MarigoldProvider.test.tsx
+++ b/packages/components/src/Provider/MarigoldProvider.test.tsx
@@ -80,3 +80,47 @@ test('OverlayProvider is present and supports useModal hook', () => {
   const childComp = screen.getByText('Test');
   expect(childComp).toBeDefined();
 });
+
+test('renders global styles for body and html based on root in theme', () => {
+  const root = render(
+    <MarigoldProvider
+      theme={{
+        fonts: {
+          body: 'Inter',
+          html: 'Roboto',
+        },
+        lineHeights: {
+          body: 1.5,
+          html: 1,
+        },
+        fontWeights: {
+          body: 500,
+          html: 700,
+        },
+        root: {
+          body: {
+            fontFamily: 'body',
+            lineHeight: 'body',
+            fontWeight: 'body',
+          },
+          html: {
+            fontFamily: 'html',
+            lineHeight: 'html',
+            fontWeight: 'html',
+          }
+        },
+      }}
+    >
+      <h1 title="h1">Hello</h1>
+    </MarigoldProvider>
+  );
+
+  const html = window.getComputedStyle(root.baseElement.parentElement!);
+  expect(html.fontFamily).toBe('Roboto');
+  expect(html.fontWeight).toBe('700');
+  expect(html.lineHeight).toBe('1');
+  const body = window.getComputedStyle(root.baseElement); 
+  expect(body.fontFamily).toBe('Inter');
+  expect(body.fontWeight).toBe('500');
+  expect(body.lineHeight).toBe('1.5');
+});
diff --git a/packages/components/src/Provider/MarigoldProvider.tsx b/packages/components/src/Provider/MarigoldProvider.tsx
index 491ba9ccd4..4297181e89 100644
--- a/packages/components/src/Provider/MarigoldProvider.tsx
+++ b/packages/components/src/Provider/MarigoldProvider.tsx
@@ -1,15 +1,29 @@
 import React from 'react';
 import { OverlayProvider } from '@react-aria/overlays';
-import { ThemeProvider, ThemeProviderProps } from '@marigold/system';
+import { ThemeProvider, ThemeProviderProps, useTheme } from '@marigold/system';
+import { Global } from '@emotion/react';
+import { css } from '@theme-ui/css';
 
+const GlobalStyles = () => {
+  const theme = useTheme();
+  const styles = css({
+    body: { variant: 'root.body' },
+    html: { variant: 'root.html' },
+  })(theme);
+
+  return <Global styles={styles} />;
+};
 // a merge of the ThemeProvider and the react-aria OverlayProvider
 export const MarigoldProvider: React.FC<ThemeProviderProps> = ({
   theme,
   children,
-}) => {
+}) => { 
   return (
     <ThemeProvider theme={theme}>
-      <OverlayProvider>{children}</OverlayProvider>
+      <OverlayProvider>
+        <GlobalStyles />
+        {children}
+      </OverlayProvider>
     </ThemeProvider>
   );
 };
diff --git a/packages/system/src/index.ts b/packages/system/src/index.ts
index 33b5d06a5c..3236bf37ae 100644
--- a/packages/system/src/index.ts
+++ b/packages/system/src/index.ts
@@ -2,4 +2,4 @@ export * from './cache';
 export * from './types';
 export * from './useClassname';
 export * from './useStyles';
-export * from './useTheme';
+export * from './useTheme';
\ No newline at end of file
diff --git a/themes/theme-b2b/src/index.ts b/themes/theme-b2b/src/index.ts
index ab588e138d..195943fd6a 100644
--- a/themes/theme-b2b/src/index.ts
+++ b/themes/theme-b2b/src/index.ts
@@ -217,6 +217,13 @@ const theme: BaseTheme = {
     info: colors.blue70,
     success: colors.green70,
   },
+  root: {
+    body: {
+      margin: 0,
+      padding: 0,
+      fontFamily: 'body',
+    },
+  },
   alerts: {
     error: {
       borderStyle: 'solid',
diff --git a/themes/theme-unicorn/src/index.ts b/themes/theme-unicorn/src/index.ts
index 89f29fa9c2..ea2df83651 100644
--- a/themes/theme-unicorn/src/index.ts
+++ b/themes/theme-unicorn/src/index.ts
@@ -217,6 +217,13 @@ const theme: BaseTheme = {
     info: '#a2edff',
     success: '#bcffbc',
   },
+  root: {
+    body: {
+      margin: 0,
+      padding: 0,
+      fontFamily: 'body',
+    },
+  },
   alerts: {
     error: {
       borderStyle: 'solid',