diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.html
index e91ede1277..ce53d58e0f 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.html
@@ -15,72 +15,69 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="add()">
-  <mat-toolbar color="primary">
-    <h2>{{ 'api-key.generate-title' | translate }}</h2>
-    <span class="flex-1"></span>
-    <div tb-help="apiKeys"></div>
-    <button mat-icon-button
-            (click)="close()"
-            type="button">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
-  </mat-toolbar>
-  @if (isLoading$ | async) {
-    <mat-progress-bar color="warn" mode="indeterminate"></mat-progress-bar>
-  } @else {
-    <div style="height: 4px;"></div>
-  }
-  <div mat-dialog-content>
-    <section class="tb-form-panel no-border no-padding" [formGroup]="apiKeyForm">
-      <div class="api-key-text">
-        <span translate>api-key.generate-text</span>
-      </div>
-      <mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
-        <mat-label translate>api-key.description</mat-label>
-        <textarea #input cdkTextareaAutosize matInput formControlName="description" rows="2" maxLength="255"></textarea>
+<mat-toolbar color="primary">
+  <h2>{{ 'api-key.generate-title' | translate }}</h2>
+  <span class="flex-1"></span>
+  <div tb-help="apiKeys"></div>
+  <button mat-icon-button
+          (click)="close()"
+          type="button">
+    <mat-icon class="material-icons">close</mat-icon>
+  </button>
+</mat-toolbar>
+@if (isLoading$ | async) {
+  <mat-progress-bar color="warn" mode="indeterminate"></mat-progress-bar>
+}
+<div mat-dialog-content>
+  <section class="tb-form-panel no-border no-padding" [formGroup]="apiKeyForm">
+    <div class="api-key-text">
+      <span translate>api-key.generate-text</span>
+    </div>
+    <mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
+      <mat-label translate>api-key.description</mat-label>
+      <textarea #input cdkTextareaAutosize matInput formControlName="description" rows="2" maxLength="255"></textarea>
+    </mat-form-field>
+    <mat-slide-toggle class="mat-slide" formControlName="enabled">
+      {{ 'api-key.enable' | translate }}
+    </mat-slide-toggle>
+    <section class="flex gap-3">
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="flex-1">
+        <mat-select formControlName="expirationTime" aria-label="Expiration date selector" (selectionChange)="onExpirationDateChange()">
+          @for (value of expirationTimeOptions; track value) {
+            <mat-option [value]="value">
+              {{ value | dateExpiration }}
+            </mat-option>
+          }
+          <mat-option value="never">{{'api-key.expiration-time-never' | translate}}</mat-option>
+          <mat-option value="custom">{{'api-key.expiration-time-custom' | translate}}</mat-option>
+        </mat-select>
       </mat-form-field>
-      <mat-slide-toggle class="mat-slide" formControlName="enabled">
-        {{ 'api-key.enable' | translate }}
-      </mat-slide-toggle>
-      <section class="flex gap-3">
-        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="flex-1">
-          <mat-select formControlName="expirationTime" aria-label="Expiration date selector" (selectionChange)="onExpirationDateChange()">
-            @for (value of expirationTimeOptions; track value) {
-              <mat-option [value]="value">
-                {{ value | dateExpiration }}
-              </mat-option>
-            }
-            <mat-option value="never">{{'api-key.expiration-time-never' | translate}}</mat-option>
-            <mat-option value="custom">{{'api-key.expiration-time-custom' | translate}}</mat-option>
-          </mat-select>
+      @if (isCustomExpirationTime()) {
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+          <mat-label translate>api-key.date</mat-label>
+          <mat-datetimepicker-toggle [for]="datePicker" matSuffix></mat-datetimepicker-toggle>
+          <mat-datetimepicker #datePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
+          <input matInput required formControlName="customExpirationTime"
+                 [matDatetimepicker]="datePicker"
+                 [min]="startDate"/>
         </mat-form-field>
-        @if (isCustomExpirationTime()) {
-          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-            <mat-label translate>api-key.date</mat-label>
-            <mat-datetimepicker-toggle [for]="datePicker" matSuffix></mat-datetimepicker-toggle>
-            <mat-datetimepicker #datePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-            <input matInput required formControlName="customExpirationTime"
-                   [matDatetimepicker]="datePicker"
-                   [min]="startDate"/>
-          </mat-form-field>
-        }
-      </section>
+      }
     </section>
-  </div>
-  <div mat-dialog-actions class="flex items-center justify-end">
-    <button mat-button color="primary"
-            type="button"
-            cdkFocusInitial
-            [disabled]="(isLoading$ | async)"
-            (click)="close()">
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || apiKeyForm?.invalid">
-      {{ 'api-key.generate' | translate }}
-    </button>
-  </div>
-</form>
+  </section>
+</div>
+<div mat-dialog-actions class="flex items-center justify-end">
+  <button mat-button color="primary"
+          type="button"
+          cdkFocusInitial
+          [disabled]="(isLoading$ | async)"
+          (click)="close()">
+    {{ 'action.cancel' | translate }}
+  </button>
+  <button mat-raised-button color="primary"
+          type="submit"
+          (click)="add()"
+          [disabled]="(isLoading$ | async) || apiKeyForm?.invalid">
+    {{ 'api-key.generate' | translate }}
+  </button>
+</div>
 
diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.scss b/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.scss
index cbed02a70e..c61a69e729 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.scss
@@ -15,9 +15,19 @@
  */
 @import '../../src/scss/constants';
 
-:host{
-  form {
-    width: 700px;
+:host {
+  display: grid;
+  width: 700px;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100vh;
+  grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;
+
+  .mat-mdc-dialog-content {
+    grid-row: 3;
+  }
+  .mat-mdc-dialog-actions {
+    grid-row: 4;
   }
   .api-key-text {
     position: relative;