diff --git a/.storybook/chakraTheme.ts b/.storybook/chakraTheme.ts
index ab4edd3..9b0cfc1 100644
--- a/.storybook/chakraTheme.ts
+++ b/.storybook/chakraTheme.ts
@@ -1,11 +1,6 @@
 // Theming with Chakra UI is based on the Styled System Theme Specification
 // Extend the theme to include custom colors, fonts, etc
-import { extendTheme } from "@chakra-ui/react";
-import { colors, components, fonts, styles } from "@hivemq/ui-theme";
+import { extendTheme } from "@chakra-ui/react"
+import theme from "@hivemq/ui-theme"
 
-export const chakraTheme = extendTheme({
-  styles,
-  fonts,
-  colors,
-  components,
-});
+export const chakraTheme = extendTheme(theme)
diff --git a/package.json b/package.json
index 22ad3fe..13e1e25 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.12.0",
     "@fontsource/raleway": "^5.0.19",
     "@fontsource/roboto": "^5.0.13",
-    "@hivemq/ui-theme": "^0.2.1",
+    "@hivemq/ui-theme": "^0.4.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@storybook/addon-a11y": "^8.2.6",
     "@storybook/addon-essentials": "^8.2.4",
@@ -87,7 +87,7 @@
     "@chakra-ui/styled-system": "^2.9.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@hivemq/ui-theme": "^0.5.0",
+    "@hivemq/ui-theme": "^0.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fbc1ea5..badad33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ devDependencies:
     specifier: ^5.0.13
     version: 5.0.13
   '@hivemq/ui-theme':
-    specifier: ^0.2.1
-    version: 0.2.1(@chakra-ui/anatomy@2.2.2)(@chakra-ui/react@2.8.2)(@chakra-ui/theme-tools@2.1.2)
+    specifier: ^0.4.2
+    version: 0.4.2(@chakra-ui/anatomy@2.2.2)(@chakra-ui/react@2.8.2)(@chakra-ui/theme-tools@2.1.2)
   '@radix-ui/react-slot':
     specifier: ^1.1.0
     version: 1.1.0(@types/react@18.3.3)(react@18.3.1)
@@ -3456,8 +3456,9 @@ packages:
     resolution: {integrity: sha512-j61DHjsdUCKMXSdNLTOxcG701FWnF0jcqNNQi2iPCDxU8seN/sMxeh62dC++UiagCWq9ghTypX+Pcy7kX+QOeQ==}
     dev: true
 
-  /@hivemq/ui-theme@0.2.1(@chakra-ui/anatomy@2.2.2)(@chakra-ui/react@2.8.2)(@chakra-ui/theme-tools@2.1.2):
-    resolution: {integrity: sha512-Oai9a8JO6nZnmGydJAJuNJIQ4RonoDvXYw5bdfBkjae8niqAYtZmYquDxeM9EaBUfpeR+0CM8UbMoJwjkhF97w==, tarball: https://npm.pkg.github.com/download/@hivemq/ui-theme/0.2.1/ad62f77a935a8ee485ff3d26541b1b094c735b2e}
+  /@hivemq/ui-theme@0.4.2(@chakra-ui/anatomy@2.2.2)(@chakra-ui/react@2.8.2)(@chakra-ui/theme-tools@2.1.2):
+    resolution: {integrity: sha512-DFhzVM+t+Csq7SN+ti7badnPVkxIYjxdlpQPrpthqNbH2wYUyH3+SOGGADuruGLKaQa12PTTYzlagfXydNqMKg==, tarball: https://npm.pkg.github.com/download/@hivemq/ui-theme/0.4.2/69e2a17e3aa693d4379d9e35c71903a8decd74ce}
+    engines: {node: '20', pnpm: '9'}
     peerDependencies:
       '@chakra-ui/anatomy': ^2.2.2
       '@chakra-ui/react': ^2.8.2
diff --git a/src/docs/cookbook/FullDemo.tsx b/src/docs/cookbook/FullDemo.tsx
index 5de5f7d..ce8891e 100644
--- a/src/docs/cookbook/FullDemo.tsx
+++ b/src/docs/cookbook/FullDemo.tsx
@@ -122,7 +122,7 @@ export function FullDemo() {
         ))}
         <Box flexGrow="2" textAlign="right">
           <Header.Menu overlayId="profile">
-            <Header.MenuButton icon={UserIcon} ariaLabel="Profile" />
+            <Header.MenuButton icon={UserIcon} aria-label="Profile" />
             <Header.MenuContent>
               <Header.MenuContentDetails textAlign="center">
                 <b>Hello Batman 👋</b>
@@ -135,7 +135,7 @@ export function FullDemo() {
             </Header.MenuContent>
           </Header.Menu>
           <Header.Menu overlayId="support">
-            <Header.MenuButton icon={InfoIcon} ariaLabel="Support" />
+            <Header.MenuButton icon={InfoIcon} aria-label="Support" />
             <Header.MenuContent>
               <Header.MenuContentDetails>Hi, How can we help you? 💁‍♀️</Header.MenuContentDetails>
               <Header.MenuContentItem>Test</Header.MenuContentItem>
diff --git a/src/modules/Header/Header.stories.tsx b/src/modules/Header/Header.stories.tsx
index 2ea9e71..021ad42 100644
--- a/src/modules/Header/Header.stories.tsx
+++ b/src/modules/Header/Header.stories.tsx
@@ -52,7 +52,7 @@ export const WithSidebarNavigationToggle: Story = {
           <Header.Divider />
           <Box alignSelf="end">
             <Header.Menu overlayId="test">
-              <Header.MenuButton icon={UserIcon} ariaLabel="Profile" />
+              <Header.MenuButton icon={UserIcon} aria-label="Profile" />
               <Header.MenuContent>
                 <Header.MenuContentDetails textAlign="center">
                   <b>Hello Batman 👋</b>
@@ -65,7 +65,7 @@ export const WithSidebarNavigationToggle: Story = {
               </Header.MenuContent>
             </Header.Menu>
             <Header.Menu overlayId="other">
-              <Header.MenuButton icon={InfoIcon} ariaLabel="Support" />
+              <Header.MenuButton icon={InfoIcon} aria-label="Support" />
               <Header.MenuContent>
                 <Header.MenuContentDetails>Hi, How can we help you? 💁‍♀️</Header.MenuContentDetails>
                 <Header.MenuContentItem>Test</Header.MenuContentItem>
diff --git a/src/modules/Header/HeaderMenuButton.tsx b/src/modules/Header/HeaderMenuButton.tsx
index 91ed0bb..7bf7d6e 100644
--- a/src/modules/Header/HeaderMenuButton.tsx
+++ b/src/modules/Header/HeaderMenuButton.tsx
@@ -19,7 +19,7 @@ import { type LucideIcon, XIcon } from 'lucide-react'
 export type HeaderMenuButtonProps = {
   icon: LucideIcon
   closeIcon?: LucideIcon
-  ariaLabel: string
+  'aria-label': string
 }
 
 const OPEN_MARGIN_IN_PIXEL = 4
@@ -27,7 +27,7 @@ const BORDER_WIDTH_IN_PIXEL = 2
 const MAX_CONTAINER_SIZE_IN_PIXEL = 56
 
 export const HeaderMenuButton = forwardRef<HeaderMenuButtonProps, 'button'>((props, ref) => {
-  const { ariaLabel, as, icon, closeIcon = XIcon } = props
+  const { 'aria-label': _ariaLabel, as, icon, closeIcon = XIcon } = props
   const { isOpen } = useMenuContext()
 
   const containerSize = isOpen
@@ -36,7 +36,6 @@ export const HeaderMenuButton = forwardRef<HeaderMenuButtonProps, 'button'>((pro
 
   return (
     <MenuButton
-      aria-label={ariaLabel}
       _hover={{
         backgroundColor: 'surface.800',
       }}