diff --git a/src/components/column/card.tsx b/src/components/column/card.tsx
index 9274292..94b20ca 100644
--- a/src/components/column/card.tsx
+++ b/src/components/column/card.tsx
@@ -140,10 +140,10 @@ function NewsCard({ id, setHandleRef }: NewsCardProps) {
             className={$("btn", isFocused ? "i-ph:star-fill" : "i-ph:star-duotone")}
             onClick={toggleFocus}
           />
+          {/* firefox cannot drag a button */}
           {setHandleRef && (
-            <button
+            <div
               ref={setHandleRef}
-              type="button"
               className={$("btn", "i-ph:dots-six-vertical-duotone", "cursor-grab")}
             />
           )}
diff --git a/src/components/common/dnd/useSortable.ts b/src/components/common/dnd/useSortable.ts
index 79fe311..7ce5fcb 100644
--- a/src/components/common/dnd/useSortable.ts
+++ b/src/components/common/dnd/useSortable.ts
@@ -37,10 +37,8 @@ export function useSortable(props: SortableProps) {
     if (handleRef && nodeRef) {
       const cleanup = combine(
         draggable({
-        // use custom drag preview
-          element: handleRef,
-          // element: ref,
-          // dragHandle: handleRef,
+          element: nodeRef,
+          dragHandle: handleRef,
           getInitialData: () => ({ id: props.id, instanceId }),
           onGenerateDragPreview({ nativeSetDragImage, location }) {
             setCustomNativeDragPreview({