diff --git a/src/admin/pages/InvoiceCreate.jsx b/src/admin/pages/InvoiceCreate.jsx
index db6f82f..21397d9 100644
--- a/src/admin/pages/InvoiceCreate.jsx
+++ b/src/admin/pages/InvoiceCreate.jsx
@@ -6,6 +6,11 @@ import Forbidden from '../components/Forbidden'
 import FormField from '../components/FormField'
 import AdminDatePicker from '../components/AdminDatePicker'
 import { motion } from 'framer-motion'
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
+import SortableRow, { DragHandle } from '../components/SortableRow'
+import useSortableList from '../hooks/useSortableList'
 import apiFetch from '../utils/api'
 import { formatCurrency } from '../utils/formatters'
 
@@ -315,15 +320,12 @@ export default function InvoiceCreate() {
     setItems(prev => prev.filter((_, i) => i !== index))
   }
 
-  const moveItem = (index, direction) => {
-    setItems(prev => {
-      const newItems = [...prev]
-      const target = index + direction
-      if (target < 0 || target >= newItems.length) return prev
-      ;[newItems[index], newItems[target]] = [newItems[target], newItems[index]]
-      return newItems
-    })
-  }
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 5 } }),
+    useSensor(KeyboardSensor)
+  )
+  const { handleDragEnd } = useSortableList(setItems, '_key')
 
   // Totals
   const totals = useMemo(() => {
@@ -651,105 +653,114 @@ export default function InvoiceCreate() {
           </div>
 
           <div className="offers-items-table">
-            <table className="admin-table">
-              <thead>
-                <tr>
-                  <th style={{ width: '2.5rem', textAlign: 'center' }}>#</th>
-                  <th>Popis</th>
-                  <th style={{ width: '5.5rem', textAlign: 'center' }}>Množství</th>
-                  <th style={{ width: '5.5rem', textAlign: 'center' }}>Jednotka</th>
-                  <th style={{ width: '5.5rem', textAlign: 'center' }}>Jedn. cena</th>
-                  {form.apply_vat ? <th style={{ width: '5rem', textAlign: 'center' }}>DPH</th> : null}
-                  <th style={{ width: '8rem', textAlign: 'right' }}>Celkem</th>
-                  <th style={{ width: '5.5rem', textAlign: 'center' }}></th>
-                </tr>
-              </thead>
-              <tbody>
-                {items.map((item, index) => {
-                  const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0)
-                  return (
-                    <tr key={item._key || index}>
-                      <td className="text-tertiary" style={{ textAlign: 'center', fontWeight: 500 }}>{index + 1}</td>
-                      <td>
-                        <input
-                          type="text"
-                          value={item.description}
-                          onChange={(e) => updateItem(index, 'description', e.target.value)}
-                          className="admin-form-input"
-                          placeholder="Popis položky..."
-                          style={{ fontWeight: 500 }}
-                        />
-                      </td>
-                      <td>
-                        <input
-                          type="number"
-                          value={item.quantity}
-                          onChange={(e) => updateItem(index, 'quantity', e.target.value)}
-                          className="admin-form-input"
-                          min="0"
-                          step="any"
-                          style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
-                        />
-                      </td>
-                      <td>
-                        <input
-                          type="text"
-                          value={item.unit}
-                          onChange={(e) => updateItem(index, 'unit', e.target.value)}
-                          className="admin-form-input"
-                          placeholder="ks"
-                          style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
-                        />
-                      </td>
-                      <td>
-                        <input
-                          type="number"
-                          value={item.unit_price}
-                          onChange={(e) => updateItem(index, 'unit_price', e.target.value)}
-                          className="admin-form-input"
-                          step="any"
-                          style={{ textAlign: 'right', height: '2.25rem', padding: '0.375rem 0.5rem' }}
-                        />
-                      </td>
-                      {form.apply_vat ? (
-                        <td>
-                          <select
-                            value={item.vat_rate}
-                            onChange={(e) => updateItem(index, 'vat_rate', Number(e.target.value))}
-                            className="admin-form-input"
-                            style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
-                          >
-                            {VAT_OPTIONS.map(o => (
-                              <option key={o.value} value={o.value}>{o.label}</option>
-                            ))}
-                          </select>
-                        </td>
-                      ) : null}
-                      <td style={{ textAlign: 'right', fontWeight: 600, whiteSpace: 'nowrap' }}>
-                        {formatCurrency(lineTotal, form.currency)}
-                      </td>
-                      <td>
-                        <div style={{ display: 'flex', gap: '0.125rem', justifyContent: 'center' }}>
-                          <button type="button" onClick={() => moveItem(index, -1)} disabled={index === 0} className="admin-btn-icon" title="Nahoru" aria-label="Nahoru">
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 15l-6-6-6 6" /></svg>
-                          </button>
-                          <button type="button" onClick={() => moveItem(index, 1)} disabled={index === items.length - 1} className="admin-btn-icon" title="Dolů" aria-label="Dolů">
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6" /></svg>
-                          </button>
-                          {items.length > 1 && (
-                            <button type="button" onClick={() => removeItem(index)} className="admin-btn-icon danger" title="Odebrat" aria-label="Odebrat">
-                              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                                <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
-                              </svg>
-                            </button>
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              modifiers={[restrictToVerticalAxis]}
+              onDragEnd={handleDragEnd}
+            >
+              <table className="admin-table">
+                <thead>
+                  <tr>
+                    <th style={{ width: '2rem' }}></th>
+                    <th style={{ width: '2rem', textAlign: 'center' }}>#</th>
+                    <th>Popis</th>
+                    <th style={{ width: '5.5rem', textAlign: 'center' }}>Množství</th>
+                    <th style={{ width: '5.5rem', textAlign: 'center' }}>Jednotka</th>
+                    <th style={{ width: '5.5rem', textAlign: 'center' }}>Jedn. cena</th>
+                    {form.apply_vat ? <th style={{ width: '5rem', textAlign: 'center' }}>DPH</th> : null}
+                    <th style={{ width: '8rem', textAlign: 'right' }}>Celkem</th>
+                    <th style={{ width: '2.5rem' }}></th>
+                  </tr>
+                </thead>
+                <SortableContext items={items.map(i => String(i._key))} strategy={verticalListSortingStrategy}>
+                  <tbody>
+                    {items.map((item, index) => {
+                      const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0)
+                      return (
+                        <SortableRow key={item._key} id={String(item._key)}>
+                          {({ attributes, listeners }) => (
+                            <>
+                              <td style={{ width: '2rem' }}>
+                                <DragHandle listeners={listeners} attributes={attributes} />
+                              </td>
+                              <td className="text-tertiary" style={{ textAlign: 'center', fontWeight: 500 }}>{index + 1}</td>
+                              <td>
+                                <input
+                                  type="text"
+                                  value={item.description}
+                                  onChange={(e) => updateItem(index, 'description', e.target.value)}
+                                  className="admin-form-input"
+                                  placeholder="Popis položky..."
+                                  style={{ fontWeight: 500 }}
+                                />
+                              </td>
+                              <td>
+                                <input
+                                  type="number"
+                                  value={item.quantity}
+                                  onChange={(e) => updateItem(index, 'quantity', e.target.value)}
+                                  className="admin-form-input"
+                                  min="0"
+                                  step="any"
+                                  style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
+                                />
+                              </td>
+                              <td>
+                                <input
+                                  type="text"
+                                  value={item.unit}
+                                  onChange={(e) => updateItem(index, 'unit', e.target.value)}
+                                  className="admin-form-input"
+                                  placeholder="ks"
+                                  style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
+                                />
+                              </td>
+                              <td>
+                                <input
+                                  type="number"
+                                  value={item.unit_price}
+                                  onChange={(e) => updateItem(index, 'unit_price', e.target.value)}
+                                  className="admin-form-input"
+                                  step="any"
+                                  style={{ textAlign: 'right', height: '2.25rem', padding: '0.375rem 0.5rem' }}
+                                />
+                              </td>
+                              {form.apply_vat ? (
+                                <td>
+                                  <select
+                                    value={item.vat_rate}
+                                    onChange={(e) => updateItem(index, 'vat_rate', Number(e.target.value))}
+                                    className="admin-form-input"
+                                    style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
+                                  >
+                                    {VAT_OPTIONS.map(o => (
+                                      <option key={o.value} value={o.value}>{o.label}</option>
+                                    ))}
+                                  </select>
+                                </td>
+                              ) : null}
+                              <td style={{ textAlign: 'right', fontWeight: 600, whiteSpace: 'nowrap' }}>
+                                {formatCurrency(lineTotal, form.currency)}
+                              </td>
+                              <td>
+                                {items.length > 1 && (
+                                  <button type="button" onClick={() => removeItem(index)} className="admin-btn-icon danger" title="Odebrat" aria-label="Odebrat">
+                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                      <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                                    </svg>
+                                  </button>
+                                )}
+                              </td>
+                            </>
                           )}
-                        </div>
-                      </td>
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
+                        </SortableRow>
+                      )
+                    })}
+                  </tbody>
+                </SortableContext>
+              </table>
+            </DndContext>
           </div>
 
           {/* Soucty */}