diff --git a/packages/admin-ui/src/Button/IconButton.tsx b/packages/admin-ui/src/Button/IconButton.tsx
index 907d31d486..a3c285ce8a 100644
--- a/packages/admin-ui/src/Button/IconButton.tsx
+++ b/packages/admin-ui/src/Button/IconButton.tsx
@@ -4,7 +4,7 @@ import { cn, cva, VariantProps, makeDecoratable } from "~/utils";
 
 const iconButtonVariants = cva(
     [
-        "wby-border-transparent wby-rounded wby-flex wby-items-center wby-justify-center wby-ring-offset-background wby-cursor-pointer wby-transition-colors [&_svg]wby-pointer-events-none [&_svg]:wby-shrink-0",
+        "wby-border-transparent wby-rounded wby-flex wby-items-center wby-justify-center wby-ring-offset-background wby-cursor-pointer wby-transition-colors [&_svg]:wby-pointer-events-none [&_svg]:wby-shrink-0",
         "aria-disabled:wby-pointer-events-none",
         "focus-visible:wby-outline-none focus-visible:wby-border-accent-default"
     ],
@@ -42,7 +42,7 @@ const iconButtonVariants = cva(
                     "wby-fill-neutral-base",
                     "hover:wby-bg-neutral-base/20",
                     "active:wby-bg-neutral-base/30",
-                    "focus-visible:wby-!border-neutral-base",
+                    "focus-visible:!wby-border-neutral-base",
                     "aria-disabled:wby-fill-neutral-base aria-disabled:wby-opacity-50 hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent"
                 ]
             },
@@ -52,7 +52,7 @@ const iconButtonVariants = cva(
                 sm: "wby-border-sm wby-rounded-sm",
                 md: "wby-border-sm wby-rounded-md",
                 lg: "wby-border-sm wby-rounded-md",
-                xl: "wby-border-md wby-rounded-lg wby-p-[calc(theme(wby-padding.md)-theme(wby-borderWidth.md))] [&_svg]:wby-size-lg"
+                xl: "wby-border-md wby-rounded-lg wby-p-[calc(theme(padding.md)-theme(borderWidth.md))] [&_svg]:wby-size-lg"
             },
             iconSize: {
                 default: "",
@@ -69,37 +69,37 @@ const iconButtonVariants = cva(
                 size: "sm",
                 iconSize: "default",
                 className:
-                    "wby-p-[calc(theme(wby-padding.xs)-theme(wby-borderWidth.sm))] [&_svg]:wby-size-md"
+                    "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-md"
             },
             {
                 size: "sm",
                 iconSize: "lg",
                 className:
-                    "wby-p-[calc(theme(wby-padding.xxs)-theme(wby-borderWidth.sm))] [&_svg]:wby-size-md-plus"
+                    "wby-p-[calc(theme(padding.xxs)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus"
             },
             {
                 size: "md",
                 iconSize: "default",
                 className:
-                    "wby-p-[calc(theme(wby-padding.sm)-theme(wby-borderWidth.sm))] [&_svg]:wby-size-md"
+                    "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-md"
             },
             {
                 size: "md",
                 iconSize: "lg",
                 className:
-                    "wby-p-[calc(theme(wby-padding.xs)-theme(wby-borderWidth.sm))] [&_svg]:wby-size-lg"
+                    "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-lg"
             },
             {
                 size: "lg",
                 iconSize: "default",
                 className:
-                    "wby-p-[calc(theme(wby-padding.sm-plus)-theme(wby-borderWidth.sm))] [&_svg]:wby-size-md-plus"
+                    "wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus"
             },
             {
                 size: "lg",
                 iconSize: "lg",
                 className:
-                    "wby-p-[calc(theme(wby-padding.sm)-theme(wby-borderWidth.sm))] [&_svg]:wby-size-lg"
+                    "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-lg"
             }
         ],
         defaultVariants: {
diff --git a/packages/admin-ui/src/DropdownMenu/DropdownMenu.tsx b/packages/admin-ui/src/DropdownMenu/DropdownMenu.tsx
index 8e4b85a0cc..97fdce86e0 100644
--- a/packages/admin-ui/src/DropdownMenu/DropdownMenu.tsx
+++ b/packages/admin-ui/src/DropdownMenu/DropdownMenu.tsx
@@ -47,7 +47,7 @@ const DropdownMenuBase = React.forwardRef<
             triggerProps: {
                 // Temporary fix. We need this because `ref` doesn't get passed to components
                 // that are decorated with `makeDecoratable`. This will be fixed in the future.
-                children: <div className={"wby-inline-s"}>{trigger}</div>
+                children: <div className={"wby-inline-block"}>{trigger}</div>
             },
             contentProps: rest
         };
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubTrigger.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubTrigger.tsx
index 523d36e6d0..25efb63b1b 100644
--- a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubTrigger.tsx
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubTrigger.tsx
@@ -10,7 +10,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     <DropdownMenuPrimitive.SubTrigger
         ref={ref}
         className={cn(
-            "wby-group wby-flex wby-cursor-default wby-select-none wby-items-center wby-rounded-sm wby-px-xs-plus wby-text-md wby-outline-none",
+            "group wby-flex wby-cursor-default wby-select-none wby-items-center wby-rounded-sm wby-px-xs-plus wby-text-md wby-outline-none",
             className
         )}
         {...props}
diff --git a/packages/admin-ui/src/Slider/Slider.stories.tsx b/packages/admin-ui/src/Slider/Slider.stories.tsx
index fb2b5d7bf4..2e48e6d088 100644
--- a/packages/admin-ui/src/Slider/Slider.stories.tsx
+++ b/packages/admin-ui/src/Slider/Slider.stories.tsx
@@ -1,3 +1,147 @@
-// No changes needed in this file - it contains only Storybook configuration
-// and doesn't include any Tailwind CSS classes to modify.
-// The original code can remain unchanged.
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Slider } from "./Slider";
+
+const meta: Meta<typeof Slider> = {
+    title: "Components/Form/Slider",
+    component: Slider,
+    tags: ["autodocs"],
+    argTypes: {
+        onValueChange: { action: "onValueChange" },
+        onValueCommit: { action: "onValueCommit" }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <Slider {...args} value={value} onValueChange={value => setValue(value)} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const WithSideLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        labelPosition: "side"
+    }
+};
+
+export const WithSideLabelRequired: Story = {
+    args: {
+        ...WithSideLabel.args,
+        required: true
+    }
+};
+
+export const WithSideLabelAndDescription: Story = {
+    args: {
+        ...WithSideLabel.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithSideLabelAndNotes: Story = {
+    args: {
+        ...WithSideLabel.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithSideLabelAndErrors: Story = {
+    args: {
+        ...WithSideLabel.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const WithSideLabelDisabled: Story = {
+    args: {
+        ...WithSideLabel.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const WithSideLabelFullExample: Story = {
+    args: {
+        ...WithSideLabel.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};