diff --git a/v2/ui/dialog/dialog.component.ts b/v2/ui/dialog/dialog.component.ts
index 82b0c15..6abf2f8 100644
--- a/v2/ui/dialog/dialog.component.ts
+++ b/v2/ui/dialog/dialog.component.ts
@@ -116,17 +116,7 @@ export class ZardDialogOptions<T, U> {
     </main>
 
     @if (!config.zHideFooter) {
-      <footer class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-0 sm:space-x-2">
-        @if (config.zCancelText !== null) {
-          <button type="button" data-testid="z-cancel-button" z-button zType="outline" (click)="onCloseClick()">
-            @if (config.zCancelIcon) {
-              <ng-icon [svg]="config.zCancelIcon" class="size-4!" />
-            }
-
-            {{ config.zCancelText ?? 'Cancel' }}
-          </button>
-        }
-
+      <footer class="flex flex-col gap-2 sm:flex-row sm:justify-center sm:gap-3">
         @if (config.zOkText !== null) {
           <button
             type="button"
@@ -143,6 +133,16 @@ export class ZardDialogOptions<T, U> {
             {{ config.zOkText ?? 'OK' }}
           </button>
         }
+
+        @if (config.zCancelText !== null) {
+          <button type="button" data-testid="z-cancel-button" z-button zType="outline" (click)="onCloseClick()">
+            @if (config.zCancelIcon) {
+              <ng-icon [svg]="config.zCancelIcon" class="size-4!" />
+            }
+
+            {{ config.zCancelText ?? 'Cancel' }}
+          </button>
+        }
       </footer>
     }
   `,