diff --git a/web/src/app/assistants/mine/AssistantsList.tsx b/web/src/app/assistants/mine/AssistantsList.tsx
index e79a0bd2b..59bf98cd0 100644
--- a/web/src/app/assistants/mine/AssistantsList.tsx
+++ b/web/src/app/assistants/mine/AssistantsList.tsx
@@ -52,7 +52,9 @@ function DraggableAssistantListItem(props: any) {
   } = useSortable({ id: props.assistant.id.toString() });
 
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: transform
+      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+      : undefined,
     transition,
     opacity: isDragging ? 0.9 : 1,
     zIndex: isDragging ? 1000 : "auto",
diff --git a/web/src/components/assistants/AssistantCards.tsx b/web/src/components/assistants/AssistantCards.tsx
index 586d9fe11..ec71e5951 100644
--- a/web/src/components/assistants/AssistantCards.tsx
+++ b/web/src/components/assistants/AssistantCards.tsx
@@ -94,7 +94,9 @@ export function DraggableAssistantCard(props: {
   } = useSortable({ id: props.assistant.id.toString() });
 
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: transform
+      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+      : undefined,
     transition,
     opacity: isDragging ? 0.9 : 1,
   };