diff --git a/.gitignore b/.gitignore
index eff17c1..cc1774d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -133,3 +133,6 @@ dist
 .idea
 
 storybook-static
+
+# test results
+test-results
diff --git a/.npmrc b/.npmrc
index 9f7113e..1dbd4f5 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1 @@
-//npm.pkg.github.com/:_authToken=${GH_NPM_TOKEN}
 @hivemq:registry=https://npm.pkg.github.com
diff --git a/package.json b/package.json
index 0603c66..c2c1f80 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hivemq/ui-library",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -8,7 +8,9 @@
     "types": "./dist/index.d.ts",
     "module": "./dist/index.es.js"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "engines": {
     "node": "20",
     "pnpm": "9"
diff --git a/src/modules/Header/HeaderDivider.tsx b/src/modules/Header/HeaderDivider.tsx
index f67d0dc..384e3b5 100644
--- a/src/modules/Header/HeaderDivider.tsx
+++ b/src/modules/Header/HeaderDivider.tsx
@@ -24,7 +24,7 @@ export function HeaderDivider({ ...props }: HeaderDividerProps) {
       orientation="vertical"
       height="auto"
       borderLeft="2px solid"
-      borderColor="surface.400"
+      borderColor="neutrals.700"
       margin={4}
       {...props}
     />
diff --git a/src/modules/Header/HeaderLogo.tsx b/src/modules/Header/HeaderLogo.tsx
index 4000182..3462a4c 100644
--- a/src/modules/Header/HeaderLogo.tsx
+++ b/src/modules/Header/HeaderLogo.tsx
@@ -48,7 +48,7 @@ export const HeaderLogo = forwardRef<HeaderLogoProps, 'button'>(
         pl={2}
         pr={4}
         _hover={{
-          backgroundColor: 'surface.800',
+          backgroundColor: 'neutrals.800',
         }}
         as={as}
         ref={ref}
@@ -56,7 +56,7 @@ export const HeaderLogo = forwardRef<HeaderLogoProps, 'button'>(
       >
         <Image src={src} alt={alt} />
         {showHiveMQText && (
-          <Text as="span" color="white" fontSize="1.2rem">
+          <Text as="span" color="white" fontWeight={700} fontSize="1.2rem">
             HiveMQ
           </Text>
         )}
diff --git a/src/modules/Header/HeaderMenuButton.tsx b/src/modules/Header/HeaderMenuButton.tsx
index 7bf7d6e..7c337a0 100644
--- a/src/modules/Header/HeaderMenuButton.tsx
+++ b/src/modules/Header/HeaderMenuButton.tsx
@@ -37,17 +37,17 @@ export const HeaderMenuButton = forwardRef<HeaderMenuButtonProps, 'button'>((pro
   return (
     <MenuButton
       _hover={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       _focusVisible={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       lineHeight={1}
       sx={{
         width: containerSize,
         height: containerSize,
         border: `${BORDER_WIDTH_IN_PIXEL}px solid`,
-        borderColor: isOpen ? 'surface.400' : 'transparent',
+        borderColor: isOpen ? 'neutrals.400' : 'transparent',
         margin: isOpen ? `${OPEN_MARGIN_IN_PIXEL}px` : '0px',
         borderRadius: '2px',
       }}
diff --git a/src/modules/Header/HeaderMenuContentDetails.tsx b/src/modules/Header/HeaderMenuContentDetails.tsx
index 4c945c2..dd2034a 100644
--- a/src/modules/Header/HeaderMenuContentDetails.tsx
+++ b/src/modules/Header/HeaderMenuContentDetails.tsx
@@ -24,7 +24,7 @@ export function HeaderMenuContentDetails({ children, ...props }: HeaderMenuConte
       <Box backgroundColor="black" px={3} py={2} {...props}>
         {children}
       </Box>
-      <MenuDivider borderColor="surface.500" />
+      <MenuDivider borderColor="neutrals.600" />
     </>
   )
 }
diff --git a/src/modules/Header/HeaderMenuContentItem.tsx b/src/modules/Header/HeaderMenuContentItem.tsx
index 2a7d4be..fe484f7 100644
--- a/src/modules/Header/HeaderMenuContentItem.tsx
+++ b/src/modules/Header/HeaderMenuContentItem.tsx
@@ -24,10 +24,10 @@ export const HeaderMenuContentItem = forwardRef<HeaderMenuContentItemProps, 'but
       <MenuItem
         backgroundColor="black"
         _hover={{
-          backgroundColor: 'surface.800',
+          backgroundColor: 'neutrals.800',
         }}
         _focusVisible={{
-          backgroundColor: 'surface.800',
+          backgroundColor: 'neutrals.800',
         }}
         ref={ref}
         {...props}
diff --git a/src/modules/Header/HeaderNavigationItem.tsx b/src/modules/Header/HeaderNavigationItem.tsx
index 28a89fc..1804f3e 100644
--- a/src/modules/Header/HeaderNavigationItem.tsx
+++ b/src/modules/Header/HeaderNavigationItem.tsx
@@ -33,12 +33,12 @@ export function HeaderNavigationItem({ children, isActive, ...props }: HeaderNav
       borderBottom="4px solid"
       px={4}
       pt="4px"
-      borderColor={isActive ? 'primary.500' : 'transparent'}
+      borderColor={isActive ? 'border.border-brand' : 'transparent'}
       _hover={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       _focusVisible={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       fontSize="1.1rem"
       fontWeight={500}
diff --git a/src/modules/Header/HeaderSidebarToggle.tsx b/src/modules/Header/HeaderSidebarToggle.tsx
index 611d7fb..55543fb 100644
--- a/src/modules/Header/HeaderSidebarToggle.tsx
+++ b/src/modules/Header/HeaderSidebarToggle.tsx
@@ -29,10 +29,10 @@ export function HeaderSidebarToggle({ onClick, ...props }: HeaderSidebarTogglePr
   return (
     <Box
       _hover={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       _focusVisible={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       type="button"
       as="button"
diff --git a/src/modules/Sidebar/SidebarGroup.tsx b/src/modules/Sidebar/SidebarGroup.tsx
index 4256299..6432ea2 100644
--- a/src/modules/Sidebar/SidebarGroup.tsx
+++ b/src/modules/Sidebar/SidebarGroup.tsx
@@ -31,7 +31,7 @@ export function SidebarGroup({ Title, children, ...props }: SidebarGroupProps) {
         mb={1}
         fontWeight={700}
         textTransform="uppercase"
-        color="surface.600"
+        color="text.text-subtle"
         fontSize="sm"
       >
         {Title}
diff --git a/src/modules/Sidebar/SidebarListItem.tsx b/src/modules/Sidebar/SidebarListItem.tsx
index f636f62..e2a2666 100644
--- a/src/modules/Sidebar/SidebarListItem.tsx
+++ b/src/modules/Sidebar/SidebarListItem.tsx
@@ -31,16 +31,17 @@ export const SidebarListItem = forwardRef<SidebarListItemProps, 'button'>(
           as="button"
           type="button"
           borderLeft="6px solid"
-          borderColor={isActive ? 'primary.400' : 'transparent'}
+          borderColor={isActive ? 'border.border-brand' : 'transparent'}
+          fontWeight={isActive ? 'border.border-brand' : 'transparent'}
           textAlign="left"
-          backgroundColor={isActive ? 'surface.100' : 'transparent'}
+          backgroundColor={isActive ? 'background.bg-active-hover' : 'transparent'}
           p={2}
           pl={4}
           _hover={{
-            backgroundColor: 'surface.200',
+            backgroundColor: 'background.bg-active-hover',
           }}
           _focusVisible={{
-            backgroundColor: 'surface.200',
+            backgroundColor: 'background.bg-active-hover',
           }}
           display="block"
           w="100%"
diff --git a/src/modules/Sidebar/SidebarRoot.tsx b/src/modules/Sidebar/SidebarRoot.tsx
index 633274b..02aa7e6 100644
--- a/src/modules/Sidebar/SidebarRoot.tsx
+++ b/src/modules/Sidebar/SidebarRoot.tsx
@@ -31,9 +31,9 @@ export function SidebarRoot({ children, ...props }: React.PropsWithChildren<Side
         width="100%"
         top="0"
         left="0"
-        backgroundColor="white"
+        backgroundColor="background.bg-base"
         borderRight="1px solid"
-        borderColor="surface.200"
+        borderColor="border.border-subtle"
         gridArea="sidebar"
         display="flex"
         flexDirection="column"
diff --git a/test-results/junit.xml b/test-results/junit.xml
deleted file mode 100644
index e69de29..0000000