diff --git a/src/admin/pages/InvoiceCreate.tsx b/src/admin/pages/InvoiceCreate.tsx
index a64b976..6451886 100644
--- a/src/admin/pages/InvoiceCreate.tsx
+++ b/src/admin/pages/InvoiceCreate.tsx
@@ -576,18 +576,19 @@ export default function InvoiceCreate() {
         </motion.div>
 
         {/* Items */}
-        <motion.div className="offers-editor-section" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
-          <div className="flex-between mb-4">
+        <motion.div className="admin-card" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
+          <div className="admin-card-body">
+          <div className="admin-card-header flex-between">
             <div>
-              <h3 className="admin-card-title" style={{ margin: 0 }}>Položky</h3>
+              <h3 className="admin-card-title">Položky</h3>
               {errors.items && <span className="admin-form-error">{errors.items}</span>}
             </div>
-            <button type="button" onClick={addItem} className="admin-btn admin-btn-primary admin-btn-sm">+ Přidat položku</button>
+            <button type="button" onClick={addItem} className="admin-btn admin-btn-secondary admin-btn-sm">+ Přidat položku</button>
           </div>
 
           <DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleDragEnd}>
             <SortableContext items={items.map(i => i._key)} strategy={verticalListSortingStrategy}>
-              <div className="offers-items-table">
+              <div className="admin-table-responsive">
                 <table className="admin-table">
                   <thead>
                     <tr>
@@ -638,6 +639,7 @@ export default function InvoiceCreate() {
               <span>{formatCurrency(totals.total, form.currency)}</span>
             </div>
           </div>
+          </div>
         </motion.div>
 
         {/* Notes */}
diff --git a/src/admin/pages/InvoiceDetail.tsx b/src/admin/pages/InvoiceDetail.tsx
index 0c4f547..553d6bf 100644
--- a/src/admin/pages/InvoiceDetail.tsx
+++ b/src/admin/pages/InvoiceDetail.tsx
@@ -472,9 +472,10 @@ export default function InvoiceDetail() {
       </motion.div>
 
       {/* Items */}
-      <motion.div className="offers-editor-section" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
-        <div className="flex-between mb-4">
-          <h3 className="admin-card-title" style={{ margin: 0 }}>Položky</h3>
+      <motion.div className="admin-card" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
+        <div className="admin-card-body">
+        <div className="admin-card-header flex-between">
+          <h3 className="admin-card-title">Položky</h3>
           {isDraft && hasPermission('invoices.edit') && (
             editingItems ? (
               <div className="flex-row gap-2">
@@ -491,7 +492,7 @@ export default function InvoiceDetail() {
         {editingItems ? (
           <DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleDragEnd}>
             <SortableContext items={editItems.map(i => i._key)} strategy={verticalListSortingStrategy}>
-              <div className="offers-items-table">
+              <div className="admin-table-responsive">
                 <table className="admin-table">
                   <thead>
                     <tr>
@@ -525,7 +526,7 @@ export default function InvoiceDetail() {
         ) : (
           <>
             {invoice.items?.length > 0 ? (
-              <div className="offers-items-table">
+              <div className="admin-table-responsive">
                 <table className="admin-table">
                   <thead>
                     <tr>
@@ -579,6 +580,7 @@ export default function InvoiceDetail() {
             <span>{formatCurrency(totals.total, invoice.currency)}</span>
           </div>
         </div>
+        </div>
       </motion.div>
 
       {/* Notes */}