diff --git a/frontend/app/components/quiz/questions/Ordering.tsx b/frontend/app/components/quiz/questions/Ordering.tsx
index 43c2350..5c5fc90 100644
--- a/frontend/app/components/quiz/questions/Ordering.tsx
+++ b/frontend/app/components/quiz/questions/Ordering.tsx
@@ -1,5 +1,22 @@
 'use client';
 
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { GripVertical } from 'lucide-react';
 import { useState } from 'react';
 
@@ -19,6 +36,69 @@ interface OrderingProps {
   onSubmit?: (order: number[]) => void;
 }
 
+interface OrderedItem {
+  text: string;
+  origIdx: number;
+}
+
+function SortableRow({
+  item,
+  position,
+}: {
+  item: OrderedItem;
+  position: number;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: item.origIdx });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn(
+        'flex w-full items-center gap-3 rounded-2xl px-4 py-3.5',
+        isDragging
+          ? 'relative z-10 border-2 border-[var(--selected-border)] bg-[var(--selected-bg)] shadow-[0_4px_12px_rgba(246,162,0,0.25)]'
+          : 'border-[1.5px] border-[var(--border)] bg-[var(--card-bg)]',
+      )}
+    >
+      <button
+        ref={setActivatorNodeRef}
+        type="button"
+        aria-label="Przeciągnij, aby zmienić kolejność"
+        className="flex cursor-grab touch-none items-center active:cursor-grabbing"
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical
+          size={18}
+          className={cn(
+            isDragging ? 'text-[var(--orange)]' : 'text-[var(--text-muted)]',
+          )}
+        />
+      </button>
+      <span className="flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--orange)] text-xs font-bold text-white">
+        {position}
+      </span>
+      <span
+        className={cn(
+          'text-sm text-[var(--text-dark)]',
+          isDragging ? 'font-semibold' : 'font-medium',
+        )}
+      >
+        {item.text}
+      </span>
+    </div>
+  );
+}
+
 export default function Ordering({
   questionNumber,
   totalQuestions,
@@ -28,16 +108,25 @@ export default function Ordering({
   items,
   onSubmit,
 }: OrderingProps) {
-  const [ordered, setOrdered] = useState(() =>
+  const [ordered, setOrdered] = useState<OrderedItem[]>(() =>
     items.map((text, origIdx) => ({ text, origIdx })),
   );
-  const [dragging, setDragging] = useState<number | null>(null);
 
-  const moveItem = (from: number, to: number) => {
-    const next = [...ordered];
-    const [item] = next.splice(from, 1);
-    next.splice(to, 0, item);
-    setOrdered(next);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragEnd = ({ active, over }: DragEndEvent) => {
+    if (over && active.id !== over.id) {
+      setOrdered((prev) => {
+        const oldIndex = prev.findIndex((o) => o.origIdx === active.id);
+        const newIndex = prev.findIndex((o) => o.origIdx === over.id);
+        return arrayMove(prev, oldIndex, newIndex);
+      });
+    }
   };
 
   return (
@@ -48,52 +137,22 @@ export default function Ordering({
     >
       <QuestionCard question={question} hint={hint} />
 
-      <div className="flex flex-col gap-2.5">
-        {ordered.map(({ text, origIdx }, i) => {
-          const isDragging = dragging === i;
-          return (
-            <div
-              key={origIdx}
-              draggable
-              onDragStart={() => setDragging(i)}
-              onDragOver={(e) => {
-                e.preventDefault();
-                if (dragging !== null && dragging !== i) {
-                  moveItem(dragging, i);
-                  setDragging(i);
-                }
-              }}
-              onDragEnd={() => setDragging(null)}
-              className={cn(
-                'flex w-full cursor-grab items-center gap-3 rounded-2xl px-4 py-3.5 transition-all',
-                isDragging
-                  ? 'border-2 border-[var(--selected-border)] bg-[var(--selected-bg)] shadow-[0_4px_12px_rgba(246,162,0,0.25)]'
-                  : 'border-[1.5px] border-[var(--border)] bg-[var(--card-bg)]',
-              )}
-            >
-              <GripVertical
-                size={18}
-                className={cn(
-                  isDragging
-                    ? 'text-[var(--orange)]'
-                    : 'text-[var(--text-muted)]',
-                )}
-              />
-              <span className="flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--orange)] text-xs font-bold text-white">
-                {i + 1}
-              </span>
-              <span
-                className={cn(
-                  'text-sm text-[var(--text-dark)]',
-                  isDragging ? 'font-semibold' : 'font-medium',
-                )}
-              >
-                {text}
-              </span>
-            </div>
-          );
-        })}
-      </div>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={ordered.map((o) => o.origIdx)}
+          strategy={verticalListSortingStrategy}
+        >
+          <div className="flex flex-col gap-2.5">
+            {ordered.map((item, i) => (
+              <SortableRow key={item.origIdx} item={item} position={i + 1} />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
 
       <SubmitButton
         label="Zatwierdź kolejność"
diff --git a/frontend/package.json b/frontend/package.json
index d2d9d56..10bbcaa 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,9 @@
     "test": "pnpm exec tsx --test \"lib/**/*.{test,spec}.{ts,tsx}\" \"app/**/*.{test,spec}.{ts,tsx}\" \"components/**/*.{test,spec}.{ts,tsx}\" \"hooks/**/*.{test,spec}.{ts,tsx}\""
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d416420..3124ece 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,15 @@ importers:
 
   frontend:
     dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.2.3)
       '@hookform/resolvers':
         specifier: ^5.2.2
         version: 5.2.2(react-hook-form@7.72.1(react@19.2.3))
@@ -284,6 +293,28 @@ packages:
   '@date-fns/tz@1.5.0':
     resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
 
+  '@dnd-kit/accessibility@3.1.1':
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
   '@emnapi/core@1.9.0':
     resolution: {integrity: sha512-0DQ98G9ZQZOxfUcQn1waV2yS8aWdZ6kJMbYCJB3oUBecjWYO1fqJ+a1DRfPF3O5JEkwqwP1A9QEN/9mYm2Yd0w==}
 
@@ -3232,6 +3263,31 @@ snapshots:
 
   '@date-fns/tz@1.5.0': {}
 
+  '@dnd-kit/accessibility@3.1.1(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.2.3)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.3)
+      react: 19.2.3
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+      tslib: 2.8.1
+
   '@emnapi/core@1.9.0':
     dependencies:
       '@emnapi/wasi-threads': 1.2.0