diff --git a/app/Http/Controllers/Admin/MonsterCrudController.php b/app/Http/Controllers/Admin/MonsterCrudController.php
index c4610358..8243dfa4 100644
--- a/app/Http/Controllers/Admin/MonsterCrudController.php
+++ b/app/Http/Controllers/Admin/MonsterCrudController.php
@@ -132,10 +132,10 @@ public function setupListOperation()
                     'element' => 'span',
                     'class'   => function ($crud, $column, $entry, $related_key) {
                         if ($column['text'] == 'Yes') {
-                            return 'badge rounded-pill bg-success';
+                            return 'badge rounded-pill bg-success text-white';
                         }
 
-                        return 'badge rounded-pill bg-danger';
+                        return 'badge rounded-pill bg-danger text-white';
                     },
                 ],
             ],
diff --git a/app/Http/Controllers/Admin/PetShop/InvoiceCrudController.php b/app/Http/Controllers/Admin/PetShop/InvoiceCrudController.php
index 1390a27f..12138a52 100644
--- a/app/Http/Controllers/Admin/PetShop/InvoiceCrudController.php
+++ b/app/Http/Controllers/Admin/PetShop/InvoiceCrudController.php
@@ -21,6 +21,8 @@ class InvoiceCrudController extends CrudController
     use \Backpack\CRUD\app\Http\Controllers\Operations\FetchOperation;
     use \Backpack\Pro\Http\Controllers\Operations\TrashOperation;
     use \Backpack\Pro\Http\Controllers\Operations\CustomViewOperation;
+    use \Backpack\DataformModal\Http\Controllers\Operations\CreateInModalOperation;
+    use \Backpack\DataformModal\Http\Controllers\Operations\UpdateInModalOperation;
 
     /**
      * Configure the CrudPanel object. Apply settings to all operations.
diff --git a/app/helpers.php b/app/helpers.php
index 986f8c6d..04a7f581 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -10,7 +10,7 @@
      */
     function backpack_pro_badge(string $string = 'PRO')
     {
-        return '<a href="https://backpackforlaravel.com/pricing" target="_blank" class="badge badge-pill bg-primary mx-2" tabindex="-1">'.$string.'</a>';
+        return '<a href="https://backpackforlaravel.com/pricing" target="_blank" class="badge badge-pill badge-sm bg-primary bg-primary-lt mx-2" tabindex="-1">'.$string.'</a>';
     }
 }
 
@@ -24,7 +24,7 @@ function backpack_pro_badge(string $string = 'PRO')
      */
     function backpack_new_badge(string $string = 'NEW')
     {
-        return '<span class="badge badge-pill bg-warning mx-2">'.$string.'</span>';
+        return '<span class="badge badge-pill badge-sm bg-warning bg-warning-lt mx-2">'.$string.'</span>';
     }
 }
 
@@ -38,6 +38,6 @@ function backpack_new_badge(string $string = 'NEW')
      */
     function backpack_free_badge(string $string = 'FREE')
     {
-        return '<span class="badge badge-pill bg-success mx-2">'.$string.'</span>';
+        return '<span class="badge badge-pill badge-sm bg-success bg-success-lt mx-2">'.$string.'</span>';
     }
 }
diff --git a/composer.json b/composer.json
index 8ee79b02..d2bc37a9 100644
--- a/composer.json
+++ b/composer.json
@@ -43,7 +43,8 @@
         "mews/purifier": "^3.4",
         "spatie/laravel-ignition": "^2.0",
         "spatie/laravel-translatable": "^6.0",
-        "backpack/pan-panel": "dev-next as 3.99.99"
+        "backpack/pan-panel": "dev-next as 3.99.99",
+        "backpack/dataform-modal": "dev-main as 1.0.0"
     },
     "require-dev": {
         "fakerphp/faker": "~1.4",
@@ -58,6 +59,10 @@
         {
             "type": "composer",
             "url": "https://repo.backpackforlaravel.com/"
+        },
+        {
+            "type": "vcs",
+            "url": "https://github.com/Laravel-Backpack/dataform-modal.git"
         }
     ],
     "autoload": {
diff --git a/composer.lock b/composer.lock
index 9bbcf6c8..42fe42b1 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "60fc375cc18a735a6894822b7a517b75",
+    "content-hash": "d9beb26af042aa078739aab43616808a",
     "packages": [
         {
             "name": "aws/aws-crt-php",
@@ -576,6 +576,48 @@
             },
             "time": "2025-08-26T14:17:10+00:00"
         },
+        {
+            "name": "backpack/dataform-modal",
+            "version": "dev-main",
+            "source": {
+                "type": "git",
+                "url": "git@github.com:Laravel-Backpack/dataform-modal.git",
+                "reference": "2124237ade0b1fb7c79ccd03984fffbb751beb12"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Laravel-Backpack/dataform-modal/zipball/2124237ade0b1fb7c79ccd03984fffbb751beb12",
+                "reference": "2124237ade0b1fb7c79ccd03984fffbb751beb12",
+                "shasum": ""
+            },
+            "require": {
+                "backpack/crud": "^7.0.0-beta"
+            },
+            "default-branch": true,
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Backpack\\DataformModal\\BackpackDataformModalProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Backpack\\DataformModal\\": "src/"
+                }
+            },
+            "description": "Dataform modal for Backpack",
+            "keywords": [
+                "backpack",
+                "laravel"
+            ],
+            "support": {
+                "source": "https://github.com/Laravel-Backpack/dataform-modal/tree/main",
+                "issues": "https://github.com/Laravel-Backpack/dataform-modal/issues"
+            },
+            "time": "2025-10-28T16:56:55+00:00"
+        },
         {
             "name": "backpack/editable-columns",
             "version": "dev-next",
@@ -13040,6 +13082,12 @@
             "alias": "1.0.0",
             "alias_normalized": "1.0.0.0"
         },
+        {
+            "package": "backpack/dataform-modal",
+            "version": "dev-main",
+            "alias": "1.0.0",
+            "alias_normalized": "1.0.0.0"
+        },
         {
             "package": "backpack/editable-columns",
             "version": "dev-next",
@@ -13155,6 +13203,7 @@
         "backpack/backupmanager": 20,
         "backpack/calendar-operation": 20,
         "backpack/ckeditor-field": 20,
+        "backpack/dataform-modal": 20,
         "backpack/editable-columns": 20,
         "backpack/filemanager": 20,
         "backpack/generators": 20,
diff --git a/resources/views/admin/new-in-v7.blade.php b/resources/views/admin/new-in-v7.blade.php
index 22495a82..c47221c6 100644
--- a/resources/views/admin/new-in-v7.blade.php
+++ b/resources/views/admin/new-in-v7.blade.php
@@ -12,7 +12,7 @@
                     'class' => 'col-md-12 mt-3',
                 ],
                 'controller' => \App\Http\Controllers\Admin\PetShop\SkillCrudController::class,
-                'operation' => 'update',
+                'formOperation' => 'update',
                 'entry' => \App\Models\PetShop\Skill::find(1),
                 'content' => [
                     'header' => 'Edit Skill', // optional
diff --git a/resources/views/admin/partials/dataform-examples.blade.php b/resources/views/admin/partials/dataform-examples.blade.php
index b812cbdd..794a97c3 100644
--- a/resources/views/admin/partials/dataform-examples.blade.php
+++ b/resources/views/admin/partials/dataform-examples.blade.php
@@ -47,12 +47,12 @@ class="icon icon-1">
                     Quick Add Tag
                 </h3>
             </div>
-            <div class="card-body bg-light">
+            <div class="card-body">
 
                 <x-backpack::dataform
-                    id="quickAddTag"
+                    formId="quickAddTag"
                     :controller="\Backpack\NewsCRUD\app\Http\Controllers\Admin\TagCrudController::class"
-                    operation="create"
+                    formOperation="create"
                     :setup="function($crud, $entry)  {
                         $crud->field('custom_test_field')->type('text');
                     }"
@@ -68,12 +68,12 @@ class="icon icon-1">
                     Quick Edit Tag
                 </h3>
             </div>
-            <div class="card-body bg-light">
+            <div class="card-body">
 
                 <x-backpack::dataform
-                    id="quickEditTag"
+                    formId="quickEditTag"
                     :controller="\Backpack\NewsCRUD\app\Http\Controllers\Admin\TagCrudController::class"
-                    operation="update"
+                    formOperation="update"
                     :entry="\Backpack\NewsCRUD\app\Models\Tag::find(1)"
                 />
 
@@ -82,3 +82,58 @@ class="icon icon-1">
     </div>
 
 </div>
+
+<div class="row">
+    <div class="col-md-6">
+        <div class="card mt-3">
+            <div class="card-header">
+                <h3 class="card-title">
+                    Quick Add Invoice in a Modal
+                </h3>
+            </div>
+            <div class="card-body">
+
+                <button
+                    type="button"
+                    class="btn btn-primary"
+                    data-bs-toggle="modal"
+                    data-bs-target="#create_invoice"
+                    bp-button="create"
+                    data-style="zoom-in"
+                >
+                    <i class="la la-plus"></i> <span>Create Invoice</span>
+                </button>
+                <x-bp-dataform-modal formId="create_invoice" :controller='\App\Http\Controllers\Admin\PetShop\InvoiceCrudController::class' />
+
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6">
+        <div class="card mt-3">
+            <div class="card-header">
+                <h3 class="card-title">
+                    Quick Edit Invoice in a Modal
+                </h3>
+            </div>
+            <div class="card-body">
+                <button
+                    type="button"
+                    class="btn btn-primary"
+                    data-bs-toggle="modal"
+                    data-bs-target="#edit_invoice"
+                    bp-button="create"
+                    data-style="zoom-in"
+                >
+                    <i class="la la-plus"></i> <span>Edit Invoice</span>
+                </button>
+                <x-bp-dataform-modal
+                    formId="edit_invoice"
+                    :controller="\App\Http\Controllers\Admin\PetShop\InvoiceCrudController::class"
+                    formOperation="updateInModal"
+                    :entry="\App\Models\PetShop\Invoice::find(1)"
+                />
+
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/admin/partials/datagrid-examples.blade.php b/resources/views/admin/partials/datagrid-examples.blade.php
index b14626e8..773dbce6 100644
--- a/resources/views/admin/partials/datagrid-examples.blade.php
+++ b/resources/views/admin/partials/datagrid-examples.blade.php
@@ -23,7 +23,7 @@
                                 <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                             </svg>
                         </a>
-                        <div class="dropdown-menu dropdown-menu-end" style="">
+                        <div class="dropdown-menu dropdown-menu-end">
                             <a class="dropdown-item" href="#">See demo code</a> <!-- TODO: link to demo code -->
                             <a class="dropdown-item" href="#">See docs</a> <!-- TODO: link to final docs -->
                         </div>
diff --git a/resources/views/vendor/backpack/theme-tabler/dashboard.blade.php b/resources/views/vendor/backpack/theme-tabler/dashboard.blade.php
index fa831033..7f6eeb79 100644
--- a/resources/views/vendor/backpack/theme-tabler/dashboard.blade.php
+++ b/resources/views/vendor/backpack/theme-tabler/dashboard.blade.php
@@ -186,7 +186,7 @@
 
             [
                 'type' => 'chart',
-                'wrapperClass' => 'col-md-4 mb-3',
+                'wrapperClass' => 'col-md-4 mt-3 mb-3',
                 // 'class' => 'col-md-6',
                 'controller' => \App\Http\Controllers\Admin\Charts\Pies\ChartjsPieController::class,
                 'content' => [
@@ -196,7 +196,7 @@
             ],
             [
                 'type' => 'chart',
-                'wrapperClass' => 'col-md-4 mb-3',
+                'wrapperClass' => 'col-md-4 mt-3 mb-3',
                 // 'class' => 'col-md-6',
                 'controller' => \App\Http\Controllers\Admin\Charts\Pies\EchartsPieController::class,
                 'content' => [
@@ -206,7 +206,7 @@
             ],
             [
                 'type' => 'chart',
-                'wrapperClass' => 'col-md-4 mb-3',
+                'wrapperClass' => 'col-md-4 mt-3 mb-3',
                 // 'class' => 'col-md-6',
                 'controller' => \App\Http\Controllers\Admin\Charts\Pies\HighchartsPieController::class,
                 'content' => [