diff --git a/packages/core/src/lib/ui-header/ui-header.module.css b/packages/core/src/lib/ui-header/ui-header.module.css
new file mode 100644
index 0000000..6b46067
--- /dev/null
+++ b/packages/core/src/lib/ui-header/ui-header.module.css
@@ -0,0 +1,32 @@
+.header {
+  height: rem(56px);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
+  padding-left: var(--mantine-spacing-md);
+  padding-right: var(--mantine-spacing-md);
+}
+
+.inner {
+  height: rem(56px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.link {
+  display: block;
+  line-height: 1;
+  padding: rem(8px) rem(12px);
+  border-radius: var(--mantine-radius-sm);
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+}
+.linkActive {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));
+}
diff --git a/packages/core/src/lib/ui-header/ui-header.tsx b/packages/core/src/lib/ui-header/ui-header.tsx
index 84bf0d4..b83003d 100644
--- a/packages/core/src/lib/ui-header/ui-header.tsx
+++ b/packages/core/src/lib/ui-header/ui-header.tsx
@@ -1,8 +1,10 @@
-import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core'
+import { Anchor, Burger, Group } from '@mantine/core'
 import { ReactNode } from 'react'
+import cx from 'clsx'
 import { Link, useLocation } from 'react-router-dom'
 import { UiLogo, UiLogoType } from '../ui-logo'
-import { useUiColorScheme } from '../ui-theme'
+
+import classes from './ui-header.module.css'
 
 export interface UiHeaderProps {
   base?: string
@@ -19,41 +21,23 @@ export interface UiHeaderLink {
 }
 
 export function UiHeader({ base, links = [], logo, logoSmall, opened, profile, toggle }: UiHeaderProps) {
-  const { colorScheme } = useUiColorScheme()
-  const isDark = colorScheme === 'dark'
   const { pathname } = useLocation()
-  const items = links.map((link) => {
-    const active = pathname.startsWith(link.link)
-    const linkColor = isDark ? 'gray.4' : 'dark.8'
-    const activeLinkColor = isDark ? 'brand.6' : 'brand.4'
-
-    return (
-      <Anchor
-        component={Link}
-        key={link.label}
-        to={link.link}
-        display="block"
-        bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}
-        c={active ? activeLinkColor : linkColor}
-        fw={500}
-        fz={rem(14)}
-        lh={1}
-        p={`${rem(8)} ${rem(12)}`}
-        style={{
-          borderRadius: rem(4),
-          textDecoration: 'none',
-        }}
-      >
-        {link.label}
-      </Anchor>
-    )
-  })
+  const items = links.map((link) => (
+    <Anchor
+      component={Link}
+      key={link.label}
+      to={link.link}
+      className={cx(classes.link, { [classes.linkActive]: pathname.startsWith(link.link) })}
+    >
+      {link.label}
+    </Anchor>
+  ))
 
   const burger = toggle ? <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" /> : null
 
   return (
-    <Box component="header" px="md" h={rem(56)} bg={isDark ? 'dark.9' : 'white'}>
-      <Flex justify="space-between" align="center" style={{ height: rem(56) }}>
+    <header className={classes.header}>
+      <div className={classes.inner}>
         <Group>
           <Group>
             {burger}
@@ -62,13 +46,13 @@ export function UiHeader({ base, links = [], logo, logoSmall, opened, profile, t
               <Group visibleFrom="md">{logo ?? <UiLogoType height={28} />}</Group>
             </Anchor>
           </Group>
-          <Group gap={5} visibleFrom="md">
+          <Group gap={5} className={classes.links} visibleFrom="md">
             {items}
           </Group>
         </Group>
 
         <Group>{profile}</Group>
-      </Flex>
-    </Box>
+      </div>
+    </header>
   )
 }
diff --git a/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap b/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
index d85f02a..8e67cd4 100644
--- a/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
+++ b/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
@@ -1328,13 +1328,58 @@ exports[`component generator should create files for header 1`] = `
         "isBinary": false,
         "path": "./test/index.ts",
       },
+      "ui-header.module.css": {
+        "content": [
+          ".header {",
+          "height: rem(56px);",
+          "background-color: light-dark(",
+          "var(--mantine-color-white),",
+          "var(--mantine-color-dark-9)",
+          ");",
+          "padding-left: var(--mantine-spacing-md);",
+          "padding-right: var(--mantine-spacing-md);",
+          "}",
+          ".inner {",
+          "height: rem(56px);",
+          "display: flex;",
+          "justify-content: space-between;",
+          "align-items: center;",
+          "}",
+          ".link {",
+          "display: block;",
+          "line-height: 1;",
+          "padding: rem(8px) rem(12px);",
+          "border-radius: var(--mantine-radius-sm);",
+          "text-decoration: none;",
+          "color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));",
+          "font-size: var(--mantine-font-size-sm);",
+          "font-weight: 500;",
+          "@mixin hover {",
+          "background-color: light-dark(",
+          "var(--mantine-color-gray-0),",
+          "var(--mantine-color-dark-6)",
+          ");",
+          "}",
+          "}",
+          ".linkActive {",
+          "background-color: light-dark(",
+          "var(--mantine-color-gray-0),",
+          "var(--mantine-color-dark-6)",
+          ");",
+          "color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));",
+          "}",
+        ],
+        "isBinary": false,
+        "path": "./test/ui-header.module.css",
+      },
       "ui-header.tsx": {
         "content": [
-          "import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core';",
+          "import { Anchor, Burger, Group } from '@mantine/core';",
           "import { ReactNode } from 'react';",
+          "import cx from 'clsx';",
           "import { Link, useLocation } from 'react-router-dom';",
-          "import { UiLogo, UiLogoType } from '../-logo';",
-          "import { useUiColorScheme } from '../-theme';",
+          "import { UiLogo, UiLogoType } from '../ui-logo';",
+          "import classes from './ui-header.module.css';",
           "export interface UiHeaderProps {",
           "base?: string;",
           "logo?: ReactNode;",
@@ -1357,45 +1402,25 @@ exports[`component generator should create files for header 1`] = `
           "profile,",
           "toggle,",
           "}: UiHeaderProps) {",
-          "const { colorScheme } = useUiColorScheme();",
-          "const isDark = colorScheme === 'dark';",
           "const { pathname } = useLocation();",
-          "const items = links.map((link) => {",
-          "const active = pathname.startsWith(link.link);",
-          "const linkColor = isDark ? 'gray.4' : 'dark.8';",
-          "const activeLinkColor = isDark ? 'brand.6' : 'brand.4';",
-          "return (",
+          "const items = links.map((link) => (",
           "<Anchor",
           "component={Link}",
           "key={link.label}",
           "to={link.link}",
-          "display="block"",
-          "bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}",
-          "c={active ? activeLinkColor : linkColor}",
-          "fw={500}",
-          "fz={rem(14)}",
-          "lh={1}",
-          "p={\`\${rem(8)} \${rem(12)}\`}",
-          "style={{",
-          "borderRadius: rem(4),",
-          "textDecoration: 'none',",
-          "}}",
+          "className={cx(classes.link, {",
+          "[classes.linkActive]: pathname.startsWith(link.link),",
+          "})}",
           ">",
           "{link.label}",
           "</Anchor>",
-          ");",
-          "});",
+          "));",
           "const burger = toggle ? (",
           "<Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" />",
           ") : null;",
           "return (",
-          "<Box",
-          "component="header"",
-          "px="md"",
-          "h={rem(56)}",
-          "bg={isDark ? 'dark.9' : 'white'}",
-          ">",
-          "<Flex justify="space-between" align="center" style={{ height: rem(56) }}>",
+          "<header className={classes.header}>",
+          "<div className={classes.inner}>",
           "<Group>",
           "<Group>",
           "{burger}",
@@ -1408,13 +1433,13 @@ exports[`component generator should create files for header 1`] = `
           "</Group>",
           "</Anchor>",
           "</Group>",
-          "<Group gap={5} visibleFrom="md">",
+          "<Group gap={5} className={classes.links} visibleFrom="md">",
           "{items}",
           "</Group>",
           "</Group>",
           "<Group>{profile}</Group>",
-          "</Flex>",
-          "</Box>",
+          "</div>",
+          "</header>",
           ");",
           "}",
         ],
diff --git a/packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template b/packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template
new file mode 100644
index 0000000..6b46067
--- /dev/null
+++ b/packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template
@@ -0,0 +1,32 @@
+.header {
+  height: rem(56px);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
+  padding-left: var(--mantine-spacing-md);
+  padding-right: var(--mantine-spacing-md);
+}
+
+.inner {
+  height: rem(56px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.link {
+  display: block;
+  line-height: 1;
+  padding: rem(8px) rem(12px);
+  border-radius: var(--mantine-radius-sm);
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+}
+.linkActive {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));
+}
diff --git a/packages/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template b/packages/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template
index 84acf4b..718a536 100644
--- a/packages/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template
+++ b/packages/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template
@@ -1,8 +1,10 @@
-import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core'
+import { Anchor, Burger, Group } from '@mantine/core'
 import { ReactNode } from 'react'
+import cx from 'clsx'
 import { Link, useLocation } from 'react-router-dom'
-import { <%= prefix.className %>Logo, <%= prefix.className %>LogoType } from '../<%= prefix.filenameName %>-logo'
-import { use<%= prefix.className %>ColorScheme } from '../<%= prefix.filenameName %>-theme'
+import { <%= prefix.className %>Logo, <%= prefix.className %>LogoType } from '../<%= prefix.fileName %>-logo'
+
+import classes from './<%= prefix.fileName %>-header.module.css'
 
 export interface <%= prefix.className %>HeaderProps {
   base?: string
@@ -19,41 +21,23 @@ export interface <%= prefix.className %>HeaderLink {
 }
 
 export function <%= prefix.className %>Header({ base, links = [], logo, logoSmall, opened, profile, toggle }: <%= prefix.className %>HeaderProps) {
-  const { colorScheme } = use<%= prefix.className %>ColorScheme()
-  const isDark = colorScheme === 'dark'
   const { pathname } = useLocation()
-  const items = links.map((link) => {
-    const active = pathname.startsWith(link.link)
-    const linkColor = isDark ? 'gray.4' : 'dark.8'
-    const activeLinkColor = isDark ? 'brand.6' : 'brand.4'
-
-    return (
-      <Anchor
-        component={Link}
-        key={link.label}
-        to={link.link}
-        display="block"
-        bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}
-        c={active ? activeLinkColor : linkColor}
-        fw={500}
-        fz={rem(14)}
-        lh={1}
-        p={`${rem(8)} ${rem(12)}`}
-        style={{
-          borderRadius: rem(4),
-          textDecoration: 'none',
-        }}
-      >
-        {link.label}
-      </Anchor>
-    )
-  })
+  const items = links.map((link) => (
+    <Anchor
+      component={Link}
+      key={link.label}
+      to={link.link}
+      className={cx(classes.link, { [classes.linkActive]: pathname.startsWith(link.link) })}
+    >
+      {link.label}
+    </Anchor>
+  ))
 
   const burger = toggle ? <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" /> : null
 
   return (
-    <Box component="header" px="md" h={rem(56)} bg={isDark ? 'dark.9' : 'white'}>
-      <Flex justify="space-between" align="center" style={{ height: rem(56) }}>
+    <header className={classes.header}>
+      <div className={classes.inner}>
         <Group>
           <Group>
             {burger}
@@ -62,13 +46,13 @@ export function <%= prefix.className %>Header({ base, links = [], logo, logoSmal
               <Group visibleFrom="md">{logo ?? <<%= prefix.className %>LogoType height={28} />}</Group>
             </Anchor>
           </Group>
-          <Group gap={5} visibleFrom="md">
+          <Group gap={5} className={classes.links} visibleFrom="md">
             {items}
           </Group>
         </Group>
 
         <Group>{profile}</Group>
-      </Flex>
-    </Box>
+      </div>
+    </header>
   )
 }
diff --git a/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap b/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap
index 7327d5e..d656b6c 100644
--- a/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap
+++ b/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap
@@ -927,13 +927,58 @@ exports[`components generator should run successfully 1`] = `
             "isBinary": false,
             "path": "./test/ui-header/index.ts",
           },
+          "ui-header.module.css": {
+            "content": [
+              ".header {",
+              "height: rem(56px);",
+              "background-color: light-dark(",
+              "var(--mantine-color-white),",
+              "var(--mantine-color-dark-9)",
+              ");",
+              "padding-left: var(--mantine-spacing-md);",
+              "padding-right: var(--mantine-spacing-md);",
+              "}",
+              ".inner {",
+              "height: rem(56px);",
+              "display: flex;",
+              "justify-content: space-between;",
+              "align-items: center;",
+              "}",
+              ".link {",
+              "display: block;",
+              "line-height: 1;",
+              "padding: rem(8px) rem(12px);",
+              "border-radius: var(--mantine-radius-sm);",
+              "text-decoration: none;",
+              "color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));",
+              "font-size: var(--mantine-font-size-sm);",
+              "font-weight: 500;",
+              "@mixin hover {",
+              "background-color: light-dark(",
+              "var(--mantine-color-gray-0),",
+              "var(--mantine-color-dark-6)",
+              ");",
+              "}",
+              "}",
+              ".linkActive {",
+              "background-color: light-dark(",
+              "var(--mantine-color-gray-0),",
+              "var(--mantine-color-dark-6)",
+              ");",
+              "color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));",
+              "}",
+            ],
+            "isBinary": false,
+            "path": "./test/ui-header/ui-header.module.css",
+          },
           "ui-header.tsx": {
             "content": [
-              "import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core';",
+              "import { Anchor, Burger, Group } from '@mantine/core';",
               "import { ReactNode } from 'react';",
+              "import cx from 'clsx';",
               "import { Link, useLocation } from 'react-router-dom';",
-              "import { UiLogo, UiLogoType } from '../-logo';",
-              "import { useUiColorScheme } from '../-theme';",
+              "import { UiLogo, UiLogoType } from '../ui-logo';",
+              "import classes from './ui-header.module.css';",
               "export interface UiHeaderProps {",
               "base?: string;",
               "logo?: ReactNode;",
@@ -956,45 +1001,25 @@ exports[`components generator should run successfully 1`] = `
               "profile,",
               "toggle,",
               "}: UiHeaderProps) {",
-              "const { colorScheme } = useUiColorScheme();",
-              "const isDark = colorScheme === 'dark';",
               "const { pathname } = useLocation();",
-              "const items = links.map((link) => {",
-              "const active = pathname.startsWith(link.link);",
-              "const linkColor = isDark ? 'gray.4' : 'dark.8';",
-              "const activeLinkColor = isDark ? 'brand.6' : 'brand.4';",
-              "return (",
+              "const items = links.map((link) => (",
               "<Anchor",
               "component={Link}",
               "key={link.label}",
               "to={link.link}",
-              "display="block"",
-              "bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}",
-              "c={active ? activeLinkColor : linkColor}",
-              "fw={500}",
-              "fz={rem(14)}",
-              "lh={1}",
-              "p={\`\${rem(8)} \${rem(12)}\`}",
-              "style={{",
-              "borderRadius: rem(4),",
-              "textDecoration: 'none',",
-              "}}",
+              "className={cx(classes.link, {",
+              "[classes.linkActive]: pathname.startsWith(link.link),",
+              "})}",
               ">",
               "{link.label}",
               "</Anchor>",
-              ");",
-              "});",
+              "));",
               "const burger = toggle ? (",
               "<Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" />",
               ") : null;",
               "return (",
-              "<Box",
-              "component="header"",
-              "px="md"",
-              "h={rem(56)}",
-              "bg={isDark ? 'dark.9' : 'white'}",
-              ">",
-              "<Flex justify="space-between" align="center" style={{ height: rem(56) }}>",
+              "<header className={classes.header}>",
+              "<div className={classes.inner}>",
               "<Group>",
               "<Group>",
               "{burger}",
@@ -1007,13 +1032,13 @@ exports[`components generator should run successfully 1`] = `
               "</Group>",
               "</Anchor>",
               "</Group>",
-              "<Group gap={5} visibleFrom="md">",
+              "<Group gap={5} className={classes.links} visibleFrom="md">",
               "{items}",
               "</Group>",
               "</Group>",
               "<Group>{profile}</Group>",
-              "</Flex>",
-              "</Box>",
+              "</div>",
+              "</header>",
               ");",
               "}",
             ],
diff --git a/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap b/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap
index aee6cdf..4114dd5 100644
--- a/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap
+++ b/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap
@@ -1096,13 +1096,58 @@ exports[`theme generator should run successfully 1`] = `
                         "isBinary": false,
                         "path": "./test-target/src/app/ui/ui-header/index.ts",
                       },
+                      "ui-header.module.css": {
+                        "content": [
+                          ".header {",
+                          "height: rem(56px);",
+                          "background-color: light-dark(",
+                          "var(--mantine-color-white),",
+                          "var(--mantine-color-dark-9)",
+                          ");",
+                          "padding-left: var(--mantine-spacing-md);",
+                          "padding-right: var(--mantine-spacing-md);",
+                          "}",
+                          ".inner {",
+                          "height: rem(56px);",
+                          "display: flex;",
+                          "justify-content: space-between;",
+                          "align-items: center;",
+                          "}",
+                          ".link {",
+                          "display: block;",
+                          "line-height: 1;",
+                          "padding: rem(8px) rem(12px);",
+                          "border-radius: var(--mantine-radius-sm);",
+                          "text-decoration: none;",
+                          "color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));",
+                          "font-size: var(--mantine-font-size-sm);",
+                          "font-weight: 500;",
+                          "@mixin hover {",
+                          "background-color: light-dark(",
+                          "var(--mantine-color-gray-0),",
+                          "var(--mantine-color-dark-6)",
+                          ");",
+                          "}",
+                          "}",
+                          ".linkActive {",
+                          "background-color: light-dark(",
+                          "var(--mantine-color-gray-0),",
+                          "var(--mantine-color-dark-6)",
+                          ");",
+                          "color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));",
+                          "}",
+                        ],
+                        "isBinary": false,
+                        "path": "./test-target/src/app/ui/ui-header/ui-header.module.css",
+                      },
                       "ui-header.tsx": {
                         "content": [
-                          "import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core';",
+                          "import { Anchor, Burger, Group } from '@mantine/core';",
                           "import { ReactNode } from 'react';",
+                          "import cx from 'clsx';",
                           "import { Link, useLocation } from 'react-router-dom';",
-                          "import { UiLogo, UiLogoType } from '../-logo';",
-                          "import { useUiColorScheme } from '../-theme';",
+                          "import { UiLogo, UiLogoType } from '../ui-logo';",
+                          "import classes from './ui-header.module.css';",
                           "export interface UiHeaderProps {",
                           "base?: string;",
                           "logo?: ReactNode;",
@@ -1125,45 +1170,25 @@ exports[`theme generator should run successfully 1`] = `
                           "profile,",
                           "toggle,",
                           "}: UiHeaderProps) {",
-                          "const { colorScheme } = useUiColorScheme();",
-                          "const isDark = colorScheme === 'dark';",
                           "const { pathname } = useLocation();",
-                          "const items = links.map((link) => {",
-                          "const active = pathname.startsWith(link.link);",
-                          "const linkColor = isDark ? 'gray.4' : 'dark.8';",
-                          "const activeLinkColor = isDark ? 'brand.6' : 'brand.4';",
-                          "return (",
+                          "const items = links.map((link) => (",
                           "<Anchor",
                           "component={Link}",
                           "key={link.label}",
                           "to={link.link}",
-                          "display="block"",
-                          "bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}",
-                          "c={active ? activeLinkColor : linkColor}",
-                          "fw={500}",
-                          "fz={rem(14)}",
-                          "lh={1}",
-                          "p={\`\${rem(8)} \${rem(12)}\`}",
-                          "style={{",
-                          "borderRadius: rem(4),",
-                          "textDecoration: 'none',",
-                          "}}",
+                          "className={cx(classes.link, {",
+                          "[classes.linkActive]: pathname.startsWith(link.link),",
+                          "})}",
                           ">",
                           "{link.label}",
                           "</Anchor>",
-                          ");",
-                          "});",
+                          "));",
                           "const burger = toggle ? (",
                           "<Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" />",
                           ") : null;",
                           "return (",
-                          "<Box",
-                          "component="header"",
-                          "px="md"",
-                          "h={rem(56)}",
-                          "bg={isDark ? 'dark.9' : 'white'}",
-                          ">",
-                          "<Flex justify="space-between" align="center" style={{ height: rem(56) }}>",
+                          "<header className={classes.header}>",
+                          "<div className={classes.inner}>",
                           "<Group>",
                           "<Group>",
                           "{burger}",
@@ -1176,13 +1201,13 @@ exports[`theme generator should run successfully 1`] = `
                           "</Group>",
                           "</Anchor>",
                           "</Group>",
-                          "<Group gap={5} visibleFrom="md">",
+                          "<Group gap={5} className={classes.links} visibleFrom="md">",
                           "{items}",
                           "</Group>",
                           "</Group>",
                           "<Group>{profile}</Group>",
-                          "</Flex>",
-                          "</Box>",
+                          "</div>",
+                          "</header>",
                           ");",
                           "}",
                         ],