diff --git a/libs/ui-toolkit/src/components/dialog/index.tsx b/libs/ui-toolkit/src/components/dialog/index.tsx
index d2a05bb09..acc5b11b9 100644
--- a/libs/ui-toolkit/src/components/dialog/index.tsx
+++ b/libs/ui-toolkit/src/components/dialog/index.tsx
@@ -11,26 +11,8 @@ export function Dialog({ children, open, setOpen }: DialogProps) {
   return (
     <DialogPrimitives.Root open={open} onOpenChange={(x) => setOpen(x)}>
       <DialogPrimitives.Portal>
-        <DialogPrimitives.Overlay
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            background: 'rgba(0,0,0,0.3)',
-          }}
-        />
-        <DialogPrimitives.Content
-          style={{
-            position: 'fixed',
-            width: 300,
-            background: 'white',
-            top: 40,
-            left: 'calc(50% - 150px)',
-            padding: 20,
-          }}
-        >
+        <DialogPrimitives.Overlay className="fixed inset-0 bg-black opacity-20" />
+        <DialogPrimitives.Content className="fixed w-[300px] w-px bg-white top-40 p-12 left-[calc(50%-150px)]">
           {children}
         </DialogPrimitives.Content>
       </DialogPrimitives.Portal>