diff --git a/scripts/preview/Figma.stories.tsx b/scripts/preview/Figma.stories.tsx
index f40dbb3..380eff2 100644
--- a/scripts/preview/Figma.stories.tsx
+++ b/scripts/preview/Figma.stories.tsx
@@ -127,8 +127,8 @@ export const ButtonStory: StoryObj<typeof Button> = {
   args: {
     children: "Hello!",
     isDisabled: false,
-    size: "md",
-    variant: "default",
+    size: "medium",
+    variant: "primary",
   },
   argTypes: {
     children: {
@@ -136,11 +136,11 @@ export const ButtonStory: StoryObj<typeof Button> = {
     },
     size: {
       control: { type: "select" },
-      options: ["sm", "md"],
+      options: ["small", "medium"],
     },
     variant: {
       control: { type: "select" },
-      options: ["default", "secondary", "stroke", "subtle"],
+      options: ["primary", "neutral", "subtle"],
     },
   },
   render: ({ children, ...props }) => (
@@ -289,17 +289,17 @@ export const FieldStory: StoryObj<{
 export const IconButtonStory: StoryObj<typeof IconButton> = {
   args: {
     isDisabled: false,
-    size: "md",
-    variant: "default",
+    size: "medium",
+    variant: "primary",
   },
   argTypes: {
     size: {
       control: { type: "select" },
-      options: ["sm", "md"],
+      options: ["small", "medium"],
     },
     variant: {
       control: { type: "select" },
-      options: ["default", "secondary", "stroke", "subtle"],
+      options: ["primary", "neutral", "subtle"],
     },
   },
   render: ({ children, ...props }) => (
diff --git a/src/stories/ui/components/Cards.stories.tsx b/src/stories/ui/components/Cards.stories.tsx
index b2f4ca4..8aa9a68 100644
--- a/src/stories/ui/components/Cards.stories.tsx
+++ b/src/stories/ui/components/Cards.stories.tsx
@@ -73,7 +73,7 @@ export const Default: StoryObj<
         paragraph, or even in a list.
       </Text>
       <ButtonGroup align="start">
-        <Button variant="secondary">Hello there!</Button>
+        <Button variant="neutral">Hello there!</Button>
       </ButtonGroup>
     </Card>
   ),
diff --git a/src/stories/ui/primitives/Table.stories.tsx b/src/stories/ui/primitives/Table.stories.tsx
index 631a3b7..6e18b89 100644
--- a/src/stories/ui/primitives/Table.stories.tsx
+++ b/src/stories/ui/primitives/Table.stories.tsx
@@ -97,10 +97,10 @@ export const Other: Story = {
               </TableCell>
               <TableCell>
                 <Flex alignPrimary="end" alignSecondary="center">
-                  <Button size="sm" variant="stroke">
+                  <Button size="small" variant="neutral">
                     View
                   </Button>
-                  <IconButton size="sm" aria-label="Trash icon">
+                  <IconButton size="small" aria-label="Trash icon">
                     <IconTrash />
                   </IconButton>
                 </Flex>
diff --git a/src/ui/components/Cards/Cards.tsx b/src/ui/components/Cards/Cards.tsx
index f2e90ba..eea8ddb 100644
--- a/src/ui/components/Cards/Cards.tsx
+++ b/src/ui/components/Cards/Cards.tsx
@@ -163,7 +163,7 @@ export function ProductInfoCard({
       <TextHeading>{heading}</TextHeading>
       <TextTitlePage>${price}</TextTitlePage>
       <ButtonGroup align="start">
-        <Button variant="secondary" onPress={onAction}>
+        <Button variant="neutral" onPress={onAction}>
           {action}
         </Button>
       </ButtonGroup>
diff --git a/src/ui/components/Headers/Headers.tsx b/src/ui/components/Headers/Headers.tsx
index 8a11d33..9353522 100644
--- a/src/ui/components/Headers/Headers.tsx
+++ b/src/ui/components/Headers/Headers.tsx
@@ -34,8 +34,8 @@ export function HeaderAuth() {
   const userButtons = (
     <>
       <Button
-        variant="secondary"
-        size="sm"
+        variant="subtle"
+        size="small"
         onPress={() =>
           login({
             avatar: "https://picsum.photos/300",
@@ -47,7 +47,7 @@ export function HeaderAuth() {
         Log in
       </Button>
       <Button
-        size="sm"
+        size="small"
         onPress={() =>
           login({
             avatar: "https://picsum.photos/300",
@@ -149,7 +149,7 @@ export function HeaderAuth() {
                 </FlexItem>
                 <FlexItem>
                   <Flex alignPrimary="center">
-                    <Button variant="subtle" size="sm" onPress={logout}>
+                    <Button variant="subtle" size="small" onPress={logout}>
                       Log out
                     </Button>
                   </Flex>
diff --git a/src/ui/components/Headers/headers.css b/src/ui/components/Headers/headers.css
index 6291c5d..f6add9f 100644
--- a/src/ui/components/Headers/headers.css
+++ b/src/ui/components/Headers/headers.css
@@ -41,7 +41,7 @@
   }
 }
 
-.header .navigation-dialog {
+.navigation-dialog {
   border: none;
   border-radius: var(--sds-size-radius-none);
   display: flex;
@@ -62,7 +62,7 @@
   }
 }
 
-.header .navigation-dialog-close {
+.navigation-dialog-close {
   position: absolute;
   right: var(--sds-size-padding-md);
   top: var(--sds-size-padding-md);
diff --git a/src/ui/primitives/Pagination/Pagination.tsx b/src/ui/primitives/Pagination/Pagination.tsx
index 8c3cd5d..4719e6d 100644
--- a/src/ui/primitives/Pagination/Pagination.tsx
+++ b/src/ui/primitives/Pagination/Pagination.tsx
@@ -70,7 +70,7 @@ export function PaginationPage({
       href={href}
       aria-label={`Page ${children}`}
       aria-current={current ? "page" : undefined}
-      variant={current ? "default" : "subtle"}
+      variant={current ? "primary" : "subtle"}
       className={clsx()}
     >
       <span className="">{children}</span>