diff --git a/frontend/src/app/heatmap/heatmap.component.ts b/frontend/src/app/heatmap/heatmap.component.ts
index 123ddfd..1bb03e9 100644
--- a/frontend/src/app/heatmap/heatmap.component.ts
+++ b/frontend/src/app/heatmap/heatmap.component.ts
@@ -249,11 +249,9 @@ export class HeatmapComponent implements AfterViewInit, OnInit {
       }
     });
 
-    dialogRef.afterClosed().subscribe(result => {
-      if (result === true) {
-        // Reload the heatmap data after weights successfully updated
+    dialogRef.afterClosed().subscribe(() => {
+        // Reload the heatmap data after weights successfully updated or canceled
         this.loadHeatmapData();
-      }
     });
   }
 }
diff --git a/frontend/src/app/weight-dialog/weight-dialog.component.css b/frontend/src/app/weight-dialog/weight-dialog.component.css
index 950b2f6..e4855df 100644
--- a/frontend/src/app/weight-dialog/weight-dialog.component.css
+++ b/frontend/src/app/weight-dialog/weight-dialog.component.css
@@ -1,5 +1,6 @@
 .dialog-container {
   padding: 15px;
+  max-height: 90vh;
 }
 
 .dialog-title {
@@ -20,9 +21,17 @@
   }
 }
 
-.input-container {
+.weight-form-container {
   width: 60%;
   margin: auto;
+  padding-top: 10px;
+  overflow-y: auto;
+}
+
+.weight-form-section {
+  width: 90%;
+  margin: auto;
+  max-height: 70vh;
 }
 
 .mat-mdc-form-field {
diff --git a/frontend/src/app/weight-dialog/weight-dialog.component.html b/frontend/src/app/weight-dialog/weight-dialog.component.html
index 9f587d9..0350c39 100644
--- a/frontend/src/app/weight-dialog/weight-dialog.component.html
+++ b/frontend/src/app/weight-dialog/weight-dialog.component.html
@@ -4,16 +4,18 @@ <h2 mat-dialog-title>
             {{ data.title }}
         </h2>
     </div>
-    <div class="input-container">
-        <form>
-            <div *ngFor="let attack of attackNames">
-                <mat-form-field appearance="outline" class="form-field">
-                    <mat-label>{{ attack }}</mat-label>
-                    <input matInput type="number" min="0" step="1" [(ngModel)]="currentWeights[attack]"
-                        name="{{ attack }}" />
-                </mat-form-field>
-            </div>
-        </form>
+    <div class="weight-form-container">
+        <div class="weight-form-section">
+            <form>
+                <div *ngFor="let attack of attackNames">
+                    <mat-form-field appearance="outline" class="form-field">
+                        <mat-label>{{ attack }}</mat-label>
+                        <input matInput type="number" min="0" step="1" [(ngModel)]="currentWeights[attack]"
+                            name="{{ attack }}" />
+                    </mat-form-field>
+                </div>
+            </form>
+        </div>
     </div>
     <div mat-dialog-actions align="end" class="dialog-actions">
         <button mat-stroked-button color="warn" (click)="dialogRef.close()">