diff --git a/packages/admin-ui/src/DataTable/DataTable.stories.tsx b/packages/admin-ui/src/DataTable/DataTable.stories.tsx
index 8620a3e4d7..4df3d1bf3e 100644
--- a/packages/admin-ui/src/DataTable/DataTable.stories.tsx
+++ b/packages/admin-ui/src/DataTable/DataTable.stories.tsx
@@ -136,7 +136,7 @@ export const WithCustomCellRenderer: Story<Entry> = {
                 ...columns.name,
                 cell: (entry: Entry) => {
                     return (
-                        <div className={"flex items-center gap-sm-extra"}>
+                        <div className={"wby-flex wby-items-center wby-gap-sm-extra"}>
                             <Avatar
                                 image={
                                     <Avatar.Image
@@ -150,13 +150,13 @@ export const WithCustomCellRenderer: Story<Entry> = {
                             <div>
                                 <Text
                                     text={entry.name}
-                                    className={"text-neutral-primary font-semibold"}
+                                    className={"wby-text-neutral-primary wby-font-semibold"}
                                     as={"div"}
                                 />
                                 <Text
                                     text={`Last updated: ${entry.lastModified}`}
                                     size={"sm"}
-                                    className={"text-neutral-strong"}
+                                    className={"wby-text-neutral-strong"}
                                     as={"div"}
                                 />
                             </div>
@@ -188,11 +188,11 @@ export const WithCustomColumnClassName: Story<Entry> = {
             ...columns,
             lastModified: {
                 ...columns.lastModified,
-                className: "bg-primary-subtle"
+                className: "wby-bg-primary-subtle"
             },
             status: {
                 ...columns.status,
-                className: "text-right"
+                className: "wby-text-right"
             }
         }
     }
diff --git a/packages/admin-ui/src/DataTable/DataTable.tsx b/packages/admin-ui/src/DataTable/DataTable.tsx
index 3d7009e195..7c9dd91e84 100644
--- a/packages/admin-ui/src/DataTable/DataTable.tsx
+++ b/packages/admin-ui/src/DataTable/DataTable.tsx
@@ -205,7 +205,7 @@ const defineColumns = <T,>(
                     accessorKey: firstColumn.id as string,
                     header: props => {
                         return (
-                            <div className={"flex items-center gap-xl"}>
+                            <div className={"wby-flex wby-items-center wby-gap-xl"}>
                                 <CheckboxPrimitive
                                     indeterminate={props.table.getIsSomeRowsSelected()}
                                     checked={props.table.getIsAllRowsSelected()}
@@ -222,13 +222,13 @@ const defineColumns = <T,>(
                     },
                     cell: props => {
                         return (
-                            <div className={"flex items-center gap-xl"}>
+                            <div className={"wby-flex wby-items-center wby-gap-xl"}>
                                 <CheckboxPrimitive
                                     checked={props.row.getIsSelected()}
                                     onCheckedChange={value => props.row.toggleSelected(!!value)}
                                     disabled={!props.row.getCanSelect()}
                                     aria-label="Select row"
-                                    className={cn(!props.row.getCanSelect() ? "invisible" : "")}
+                                    className={cn(!props.row.getCanSelect() ? "wby-invisible" : "")}
                                 />
                                 {firstColumn.cell
                                     ? React.createElement(firstColumn.cell, props)
@@ -245,7 +245,7 @@ const defineColumns = <T,>(
             if (loading) {
                 return {
                     ...column,
-                    cell: () => <Skeleton className={"w-full h-md"} />
+                    cell: () => <Skeleton className={"wby-w-full wby-h-md"} />
                 };
             }
 
@@ -448,7 +448,7 @@ const DataTable = <T extends Record<string, any> & DataTableDefaultData>({
                                                 onClick={header.column.getToggleSortingHandler()}
                                                 sortable={header.column.getCanSort()}
                                             >
-                                                <div className="w-full overflow-hidden whitespace-nowrap truncate">
+                                                <div className="wby-w-full wby-overflow-hidden wby-whitespace-nowrap wby-truncate">
                                                     {flexRender(
                                                         header.column.columnDef.header,
                                                         header.getContext()
diff --git a/packages/admin-ui/src/DataTable/components/ColumnSorter.tsx b/packages/admin-ui/src/DataTable/components/ColumnSorter.tsx
index 6f7395dbc5..cd372d6e14 100644
--- a/packages/admin-ui/src/DataTable/components/ColumnSorter.tsx
+++ b/packages/admin-ui/src/DataTable/components/ColumnSorter.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { cn, cva, VariantProps } from "~/utils";
 
-const columnSorterVariants = cva("flex items-center gap-xxs cursor-auto", {
+const columnSorterVariants = cva("wby-flex wby-items-center wby-gap-xxs wby-cursor-auto", {
     variants: {
         sortable: {
-            true: "cursor-pointer"
+            true: "wby-cursor-pointer"
         }
     }
 });