diff --git a/apps/design-system/stories/button.stories.tsx b/apps/design-system/stories/button.stories.tsx
index 78dedc3..d275007 100644
--- a/apps/design-system/stories/button.stories.tsx
+++ b/apps/design-system/stories/button.stories.tsx
@@ -1,17 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from "@repo/design-system/button";
-import ButtonInFavour from "@repo/design-system/buttonInFavour";
-import ButtonAgainst from "@repo/design-system/buttonAgainst";
-import ButtonNeutral from "@repo/design-system/buttonNeutral";
-import { ArrowIcon } from "@repo/design-system/arrowIcon";
+import { Button } from "@repo/design-system/ui";
+import { ButtonInFavour } from "@repo/design-system/ui";
+import { ButtonAgainst } from "@repo/design-system/ui";
+import { ButtonNeutral } from "@repo/design-system/ui";
+import { ArrowIconRight, ArrowIconLeft } from "@repo/design-system/demo";
 
 const meta: Meta<typeof Button> = {
   title: "Components/Button",
   component: Button,
+  tags: ["autodocs"],
   argTypes: {
     kind: {
-      options: ["default", "filled", "outline"],
+      options: ["filled", "inverse", "outline", "link"],
       control: { type: "radio" },
     },
     size: {
@@ -19,8 +20,7 @@ const meta: Meta<typeof Button> = {
       control: { type: "radio" },
     },
     hasIcon: {
-      options: ["true", "false"],
-      control: { type: "radio" },
+      control: { type: "boolean" },
     },
     iconPosition: {
       options: ["left", "right"],
@@ -31,8 +31,10 @@ const meta: Meta<typeof Button> = {
       control: { type: "radio" },
     },
     wider: {
-      options: ["true", "false"],
-      control: { type: "radio" },
+      control: { type: "boolean" },
+    },
+    compactable: {
+      control: { type: "boolean" },
     },
   },
   decorators: [
@@ -50,9 +52,9 @@ const meta: Meta<typeof Button> = {
       >
         <div
           style={{
-            height: "50%",
-            width: "50%",
-            backgroundColor: "yellow",
+            height: "75vh",
+            width: "75vw",
+            backgroundColor: "lightyellow",
             display: "flex",
             gap: "1rem",
             flexDirection: "column",
@@ -77,8 +79,8 @@ export const Filled: ButtonStory = {
   render: (args) => {
     return (
       <>
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="left" />
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="right" />
+        <Button icon={ArrowIconLeft} {...args} hasIcon iconPosition="left" />
+        <Button icon={ArrowIconRight} {...args} hasIcon iconPosition="right" />
         <Button {...args} fitContent />
       </>
     );
@@ -95,8 +97,8 @@ export const Outline: ButtonStory = {
   render: (args) => {
     return (
       <>
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="left" />
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="right" />
+        <Button icon={ArrowIconLeft} {...args} hasIcon iconPosition="left" />
+        <Button icon={ArrowIconRight} {...args} hasIcon iconPosition="right" />
         <Button {...args} fitContent />
       </>
     );
@@ -113,8 +115,8 @@ export const Link: ButtonStory = {
   render: (args) => {
     return (
       <>
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="left" />
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="right" />
+        <Button icon={ArrowIconLeft} {...args} hasIcon iconPosition="left" />
+        <Button icon={ArrowIconRight} {...args} hasIcon iconPosition="right" />
         <Button {...args} fitContent />
       </>
     );
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index cfb2f25..14e6eb4 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -11,15 +11,11 @@
     "./tailwind": "./tailwind.config.ts",
     "./demo": "./src/index.ts",
     "./progressBar": "./src/progressBar.tsx",
-    "./button": "./src/button.tsx",
     "./arrowIcon": "./src/arrowIcon.tsx",
     "./starIcon": "./src/starIcon.tsx",
     "./yesIcon": "./src/yesIcon.tsx",
     "./noIcon": "./src/noIcon.tsx",
-    "./neutralIcon": "./src/neutralIcon.tsx",
-    "./buttonInFavour": "./src/buttonInFavour.tsx",
-    "./buttonAgainst": "./src/buttonAgainst.tsx",
-    "./buttonNeutral": "./src/buttonNeutral.tsx"
+    "./neutralIcon": "./src/neutralIcon.tsx"
   },
   "scripts": {
     "build": "npm run fonts && npm run tailwind",
diff --git a/packages/design-system/src/icons/arrowIconLeft.tsx b/packages/design-system/src/icons/arrowIconLeft.tsx
new file mode 100644
index 0000000..0236261
--- /dev/null
+++ b/packages/design-system/src/icons/arrowIconLeft.tsx
@@ -0,0 +1,18 @@
+export function ArrowIconLeft(
+  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      {props.children}
+      <path
+        d="M12 19.625L4.375 12L12 4.375L13.075 5.45L7.25 11.25H19.625V12.75H7.25L13.075 18.55L12 19.625Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/design-system/src/arrowIcon.tsx b/packages/design-system/src/icons/arrowIconRight.tsx
similarity index 92%
rename from packages/design-system/src/arrowIcon.tsx
rename to packages/design-system/src/icons/arrowIconRight.tsx
index ba18967..1ff024e 100644
--- a/packages/design-system/src/arrowIcon.tsx
+++ b/packages/design-system/src/icons/arrowIconRight.tsx
@@ -1,4 +1,4 @@
-export function ArrowIcon(
+export function ArrowIconRight(
   props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
 ) {
   return (
diff --git a/packages/design-system/src/neutralIcon.tsx b/packages/design-system/src/icons/neutralIcon.tsx
similarity index 100%
rename from packages/design-system/src/neutralIcon.tsx
rename to packages/design-system/src/icons/neutralIcon.tsx
diff --git a/packages/design-system/src/noIcon.tsx b/packages/design-system/src/icons/noIcon.tsx
similarity index 100%
rename from packages/design-system/src/noIcon.tsx
rename to packages/design-system/src/icons/noIcon.tsx
diff --git a/packages/design-system/src/starIcon.tsx b/packages/design-system/src/icons/starIcon.tsx
similarity index 100%
rename from packages/design-system/src/starIcon.tsx
rename to packages/design-system/src/icons/starIcon.tsx
diff --git a/packages/design-system/src/yesIcon.tsx b/packages/design-system/src/icons/yesIcon.tsx
similarity index 100%
rename from packages/design-system/src/yesIcon.tsx
rename to packages/design-system/src/icons/yesIcon.tsx
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index c85c270..4d96f6b 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -6,3 +6,9 @@ export * from "./icons/ClearIcon";
 export * from "./icons/SearchIcon";
 export * from "./icons/HomeIcon";
 export * from "./icons/ErrorIcon";
+export * from "./icons/arrowIconLeft";
+export * from "./icons/arrowIconRight";
+export * from "./icons/neutralIcon";
+export * from "./icons/noIcon";
+export * from "./icons/starIcon";
+export * from "./icons/yesIcon";
diff --git a/packages/design-system/src/button.tsx b/packages/design-system/src/ui/button/button.tsx
similarity index 97%
rename from packages/design-system/src/button.tsx
rename to packages/design-system/src/ui/button/button.tsx
index 7103f13..098855d 100644
--- a/packages/design-system/src/button.tsx
+++ b/packages/design-system/src/ui/button/button.tsx
@@ -7,8 +7,9 @@ const buttonVariants = cva(
     "k1-inline-flex k1-items-center k1-min-w-fit",
     "data-[hover]:k1-cursor-pointer k1-text-nowrap data-[disabled]:k1-pointer-events-none",
     "k1-uppercase k1-font-bold",
-    "k1-rounded-l k1-rounded-br",
+    "k1-rounded-l-[16px] k1-rounded-br-[16px]",
     "k1-select-none",
+    "k1-gap-2",
   ],
   {
     variants: {
@@ -129,7 +130,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
 
     return (
       <HeadlessUIButton
-        className={`${buttonVariants({ kind, size, wider, fitContent, hasIcon, iconPosition, color })} ${className || ""}`}
+        className={`${buttonVariants({ kind, size, wider, fitContent, hasIcon, iconPosition, color })}`}
         ref={ref}
         {...props}
       >
diff --git a/packages/design-system/src/buttonAgainst.tsx b/packages/design-system/src/ui/button/buttonAgainst.tsx
similarity index 70%
rename from packages/design-system/src/buttonAgainst.tsx
rename to packages/design-system/src/ui/button/buttonAgainst.tsx
index fc52f9f..14064fe 100644
--- a/packages/design-system/src/buttonAgainst.tsx
+++ b/packages/design-system/src/ui/button/buttonAgainst.tsx
@@ -1,11 +1,11 @@
-import { Button, buttonVariants } from "@repo/design-system/button";
-import { NoIcon } from "@repo/design-system/noIcon";
+import { Button, buttonVariants } from "@repo/design-system/ui";
+import { NoIcon } from "../../icons/noIcon";
 import { VariantProps } from "class-variance-authority";
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants>;
 
-export default function ButtonAgainst(props: Props) {
+export function ButtonAgainst(props: Props) {
   return (
     <Button
       kind="inverse"
diff --git a/packages/design-system/src/buttonInFavour.tsx b/packages/design-system/src/ui/button/buttonInFavour.tsx
similarity index 69%
rename from packages/design-system/src/buttonInFavour.tsx
rename to packages/design-system/src/ui/button/buttonInFavour.tsx
index 8813f9d..892ee60 100644
--- a/packages/design-system/src/buttonInFavour.tsx
+++ b/packages/design-system/src/ui/button/buttonInFavour.tsx
@@ -1,11 +1,11 @@
-import { Button, buttonVariants } from "@repo/design-system/button";
-import { YesIcon } from "@repo/design-system/yesIcon";
+import { Button, buttonVariants } from "@repo/design-system/ui";
+import { YesIcon } from "../../icons/yesIcon";
 import { VariantProps } from "class-variance-authority";
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants>;
 
-export default function ButtonInFavour(props: Props) {
+export function ButtonInFavour(props: Props) {
   return (
     <Button
       kind="inverse"
diff --git a/packages/design-system/src/buttonNeutral.tsx b/packages/design-system/src/ui/button/buttonNeutral.tsx
similarity index 69%
rename from packages/design-system/src/buttonNeutral.tsx
rename to packages/design-system/src/ui/button/buttonNeutral.tsx
index cdf87ae..36099df 100644
--- a/packages/design-system/src/buttonNeutral.tsx
+++ b/packages/design-system/src/ui/button/buttonNeutral.tsx
@@ -1,11 +1,11 @@
-import { Button, buttonVariants } from "@repo/design-system/button";
-import { NeutralIcon } from "@repo/design-system/neutralIcon";
+import { Button, buttonVariants } from "@repo/design-system/ui";
+import { NeutralIcon } from "../../icons/neutralIcon";
 import { VariantProps } from "class-variance-authority";
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants>;
 
-export default function ButtonNeutral(props: Props) {
+export function ButtonNeutral(props: Props) {
   return (
     <Button
       kind="inverse"
diff --git a/packages/design-system/src/ui/button/index.ts b/packages/design-system/src/ui/button/index.ts
new file mode 100644
index 0000000..16fb217
--- /dev/null
+++ b/packages/design-system/src/ui/button/index.ts
@@ -0,0 +1,5 @@
+export * from "./button";
+
+export * from "./buttonInFavour";
+export * from "./buttonAgainst";
+export * from "./buttonNeutral";
diff --git a/packages/design-system/src/ui/index.ts b/packages/design-system/src/ui/index.ts
index b80f626..c2c8c66 100644
--- a/packages/design-system/src/ui/index.ts
+++ b/packages/design-system/src/ui/index.ts
@@ -1 +1,2 @@
 export * from "./input/index";
+export * from "./button/index";