diff --git a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
index 339dfc4bb..728b7cf77 100644
--- a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
+++ b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
@@ -6,48 +6,67 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<!-- TODO: Responsiveness/design enhancement and reduction in form loading time -->
-<div class="container">
-  <mat-card>
-    <form [formGroup]="openingBalancesForm" (ngSubmit)="submit()">
+<div class="container mob">
+  <form [formGroup]="openingBalancesForm" (ngSubmit)="submit()">
+    <!-- Step 1: pick the branch whose old books are being carried into this GL. -->
+    <mat-card class="mob-card">
       <mat-card-content>
-        <div #searchFormRef class="layout-row-wrap responsive-column gap-2px">
-          <div class="m-r-30 flex-83">
-            <mat-form-field class="flex-96">
-              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-              <mat-select required formControlName="officeId">
-                @for (office of officeData; track office) {
-                  <mat-option [value]="office.id">
-                    {{ office.name }}
-                  </mat-option>
-                }
-              </mat-select>
-              @if (openingBalancesForm.controls.officeId.hasError('required')) {
-                <mat-error>
-                  {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
-              }
-            </mat-form-field>
-          </div>
-
-          <div class="flex-15">
-            <button mat-raised-button color="primary" (click)="retrieveOpeningBalances()">
-              {{ 'labels.buttons.Retrieve' | translate }}
-            </button>
-          </div>
+        <div class="mob-intro">
+          <mat-icon>info</mat-icon>
+          <span>
+            Bring a branch's existing balances into this system's ledger, one time, as a single balanced entry against
+            the Opening Balances Contra account below.
+          </span>
         </div>
+        <div #searchFormRef class="mob-row">
+          <mat-form-field class="mob-office">
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
+            <mat-select required formControlName="officeId">
+              @for (office of officeData; track office) {
+                <mat-option [value]="office.id">
+                  {{ office.name }}
+                </mat-option>
+              }
+            </mat-select>
+            @if (openingBalancesForm.controls.officeId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+          </mat-form-field>
+          <button
+            type="button"
+            mat-raised-button
+            color="primary"
+            [disabled]="!openingBalancesForm.controls.officeId.value"
+            (click)="retrieveOpeningBalances()"
+          >
+            {{ 'labels.buttons.Retrieve' | translate }}
+          </button>
+        </div>
+      </mat-card-content>
+    </mat-card>
 
-        @if (openingBalancesData) {
-          <div class="layout-row-wrap gap-2percent responsive-column">
-            <mifosx-gl-account-display
-              class="flex-100"
-              [accountTitle]="'Opening Balances Contra Account'"
-              [glAccount]="openingBalancesData.contraAccount"
-              [withTitle]="'50%'"
-            >
-            </mifosx-gl-account-display>
-            <mat-form-field class="flex-48">
+    @if (openingBalancesData) {
+      <!-- Step 2: the contra account this entry balances against, plus currency and date. -->
+      <mat-card class="mob-card">
+        <mat-card-content>
+          <div class="mob-contra">
+            <mat-icon>account_balance</mat-icon>
+            <div>
+              <div class="mob-contra__label">Opening Balances Contra Account</div>
+              <div class="mob-contra__value">
+                <mifosx-gl-account-display [glAccount]="openingBalancesData.contraAccount"></mifosx-gl-account-display>
+              </div>
+              <div class="mob-contra__hint">
+                Every debit and credit below posts against this one account, so the whole entry always balances to zero.
+              </div>
+            </div>
+          </div>
+
+          <div class="mob-row">
+            <mat-form-field class="mob-field">
               <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
               <mat-select required formControlName="currencyCode">
                 @for (currency of currencyData; track currency) {
@@ -63,7 +82,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="flex-48" (click)="openingBalancesDatePicker.open()">
+            <mat-form-field class="mob-field" (click)="openingBalancesDatePicker.open()">
               <mat-label>{{ 'labels.inputs.Opening Balances Date' | translate }}</mat-label>
               <input
                 matInput
@@ -82,79 +101,103 @@
                 </mat-error>
               }
             </mat-form-field>
-            <div class="layout-row-wrap gap-2percent responsive-column flex-100 content">
-              <div class="header flex-8">
-                {{ 'labels.inputs.Type' | translate }}
-              </div>
-              <div class="header flex-18">
-                {{ 'labels.inputs.GL Code' | translate }}
-              </div>
-              <div class="header flex-18">
-                {{ 'labels.inputs.GL Name' | translate }}
-                {{ 'labels.inputs.Account' | translate }}
-              </div>
-              <div class="header r-amount flex-18">
-                {{ 'labels.inputs.Total Debit' | translate }}:
-                {{ debitsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
-              </div>
-              <div class="header r-amount flex-23">
-                {{ 'labels.inputs.Total Credit' | translate }}:
-                {{ creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
-              </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+
+      <!-- The one number that matters: does the sheet balance yet. Pinned above the entry grid so it
+           never has to be scrolled to. -->
+      <div class="mob-balance" [class.mob-balance--ok]="debitsSum === creditsSum && debitsSum > 0">
+        <div class="mob-balance__figure">
+          <span class="mob-balance__label">{{ 'labels.inputs.Total Debit' | translate }}</span>
+          <span class="mob-balance__amt mob-balance__amt--dr">{{
+            debitsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+          }}</span>
+        </div>
+        <div class="mob-balance__figure">
+          <span class="mob-balance__label">{{ 'labels.inputs.Total Credit' | translate }}</span>
+          <span class="mob-balance__amt mob-balance__amt--cr">{{
+            creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+          }}</span>
+        </div>
+        <div class="mob-balance__status">
+          @if (debitsSum === creditsSum && debitsSum > 0) {
+            <mat-icon>check_circle</mat-icon>
+            <span>Balanced — ready to submit</span>
+          } @else if (debitsSum === 0 && creditsSum === 0) {
+            <mat-icon>edit_note</mat-icon>
+            <span>Enter each account's opening balance below</span>
+          } @else {
+            <mat-icon>error</mat-icon>
+            <span
+              >Out of balance by {{ debitsSum - creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}</span
+            >
+          }
+        </div>
+      </div>
+
+      <!-- Step 3: one row per GL account, grouped by account type, debit on one side and credit on
+           the other — a debit balance goes in the Debit box, a credit balance in the Credit box,
+           never both. -->
+      <mat-card class="mob-card mob-card--flush">
+        <mat-card-content>
+          <div class="mob-grid mob-grid--head">
+            <div class="mob-grid__code">{{ 'labels.inputs.GL Code' | translate }}</div>
+            <div class="mob-grid__name">
+              {{ 'labels.inputs.GL Name' | translate }} {{ 'labels.inputs.Account' | translate }}
             </div>
-            @for (credit of glAccountEntries.controls; track credit; let i = $index) {
-              <div class="flex-fill layout-row-wrap responsive-column content" formArrayName="glAccountEntries">
-                <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-                  <div class="flex-8">
-                    {{
-                      openingBalancesData.glAccounts[i].glAccountType.value !==
-                      openingBalancesData.glAccounts[i - 1]?.glAccountType.value
-                        ? glAccountTypeLabel(openingBalancesData.glAccounts[i].glAccountType.value)
-                        : ''
-                    }}
-                  </div>
-                  <div class="flex-13">
-                    {{ openingBalancesData.glAccounts[i].glAccountCode }}
-                  </div>
-                  <div class="flex-29">
-                    {{ openingBalancesData.glAccounts[i].glAccountName }}
-                  </div>
-                  <div class="flex-20">
-                    <mat-form-field>
-                      <mat-label>{{ 'labels.inputs.Debit' | translate }}</mat-label>
-                      <input matInput type="number" formControlName="debit" />
-                    </mat-form-field>
-                  </div>
-                  <div class="flex-20">
-                    <mat-form-field>
-                      <mat-label>{{ 'labels.inputs.Credit' | translate }}</mat-label>
-                      <input matInput type="number" formControlName="credit" />
-                    </mat-form-field>
-                  </div>
-                </div>
+            <div class="mob-grid__amt">{{ 'labels.inputs.Debit' | translate }}</div>
+            <div class="mob-grid__amt">{{ 'labels.inputs.Credit' | translate }}</div>
+          </div>
+
+          @for (credit of glAccountEntries.controls; track credit; let i = $index) {
+            @if (
+              openingBalancesData.glAccounts[i].glAccountType.value !==
+              openingBalancesData.glAccounts[i - 1]?.glAccountType.value
+            ) {
+              <div class="mob-grid__section">
+                {{ glAccountTypeLabel(openingBalancesData.glAccounts[i].glAccountType.value) }}
               </div>
             }
-          </div>
-        }
-      </mat-card-content>
+            <div class="mob-grid mob-grid--data" formArrayName="glAccountEntries">
+              <div class="mob-grid__row" [formGroupName]="i">
+                <div class="mob-grid__code">{{ openingBalancesData.glAccounts[i].glAccountCode }}</div>
+                <div class="mob-grid__name">{{ openingBalancesData.glAccounts[i].glAccountName }}</div>
+                <div class="mob-grid__amt">
+                  <mat-form-field class="mob-grid__input">
+                    <input matInput type="number" min="0" formControlName="debit" placeholder="0.00" />
+                  </mat-form-field>
+                </div>
+                <div class="mob-grid__amt">
+                  <mat-form-field class="mob-grid__input">
+                    <input matInput type="number" min="0" formControlName="credit" placeholder="0.00" />
+                  </mat-form-field>
+                </div>
+              </div>
+            </div>
+          }
+        </mat-card-content>
+      </mat-card>
 
-      @if (openingBalancesData) {
-        <mat-card-actions class="layout-row gap-5px align-center responsive-column">
-          <button type="button" mat-raised-button [routerLink]="['../']">
-            {{ 'labels.buttons.Cancel' | translate }}
-          </button>
-          <button
-            mat-raised-button
-            color="primary"
-            [disabled]="!openingBalancesForm.valid"
-            *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'"
-          >
-            {{ 'labels.buttons.Submit' | translate }}
-          </button>
-        </mat-card-actions>
-      }
-    </form>
-  </mat-card>
+      <div class="mob-actions">
+        <button type="button" mat-stroked-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <span class="mob-actions__spacer"></span>
+        @if (!(debitsSum === creditsSum && debitsSum > 0)) {
+          <span class="mob-actions__hint">Total Debit must equal Total Credit before this can be submitted</span>
+        }
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!openingBalancesForm.valid || !(debitsSum === creditsSum && debitsSum > 0)"
+          *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
+      </div>
+    }
+  </form>
 </div>
 
 <ng-template #templateSearchFormRef let-popover="popover">
diff --git a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.scss b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.scss
index f31f93b1e..14cf2ca5a 100644
--- a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.scss
+++ b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.scss
@@ -6,14 +6,299 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-.content {
-  padding-top: 20px;
+.mob {
+  max-width: 960px;
+}
 
-  div {
-    word-wrap: break-word;
+.mob-card {
+  margin-bottom: 14px;
+  border-radius: 8px;
 
-    &.header {
-      font-weight: 500;
+  &--flush mat-card-content {
+    padding: 0;
+  }
+}
+
+.mob-intro {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  color: #1e40af;
+  font-size: 12px;
+  line-height: 1.5;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    flex: none;
+  }
+}
+
+.mob-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.mob-office {
+  flex: 1 1 320px;
+}
+
+.mob-field {
+  flex: 1 1 240px;
+}
+
+.mob-contra {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  margin-bottom: 16px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-left: 4px solid #0ea5e9;
+  border-radius: 8px;
+
+  mat-icon {
+    color: #0ea5e9;
+    margin-top: 2px;
+  }
+
+  &__label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: #64748b;
+  }
+
+  &__value {
+    font-size: 13px;
+    font-weight: 600;
+    color: #0d1b2a;
+    margin: 2px 0 4px;
+  }
+
+  &__hint {
+    font-size: 11px;
+    color: #64748b;
+    line-height: 1.4;
+  }
+}
+
+/* The one figure that decides whether this can be submitted — kept visually separate from the
+   cards around it so it reads as a status, not just another form section. */
+.mob-balance {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+  margin-bottom: 14px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-left: 4px solid #dc2626;
+  border-radius: 8px;
+
+  &--ok {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+    border-left-color: #16a34a;
+  }
+
+  &__figure {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: #64748b;
+  }
+
+  &__amt {
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+    font-size: 16px;
+    white-space: nowrap;
+
+    &--dr {
+      color: #b91c1c;
+    }
+
+    &--cr {
+      color: #15803d;
+    }
+  }
+
+  &__status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    font-size: 13px;
+    font-weight: 600;
+    color: #b91c1c;
+
+    mat-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &--ok &__status {
+    color: #15803d;
+  }
+}
+
+/* Account entry grid: a header row, a section label per account type, then one row per account. */
+.mob-grid {
+  display: grid;
+  grid-template-columns: 90px 1fr 160px 160px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px;
+
+  &--head {
+    padding: 12px 14px;
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: #64748b;
+  }
+
+  &__section {
+    padding: 8px 14px 4px;
+    margin-top: 6px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #0ea5e9;
+    border-top: 1px solid #e2e8f0;
+
+    &:first-of-type {
+      border-top: none;
+      margin-top: 0;
+    }
+  }
+
+  &--data {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid #f1f5f9;
+  }
+
+  &__row {
+    display: contents;
+  }
+
+  &__code {
+    font-variant-numeric: tabular-nums;
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  &__name {
+    font-size: 13px;
+    color: #0d1b2a;
+    word-break: break-word;
+  }
+
+  &__amt {
+    text-align: right;
+  }
+
+  &__input {
+    width: 100%;
+
+    ::ng-deep .mat-mdc-form-field-infix {
+      padding-top: 10px;
+      padding-bottom: 10px;
+      min-height: unset;
+    }
+
+    ::ng-deep .mat-mdc-text-field-wrapper {
+      padding: 0 8px;
+    }
+
+    input {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+}
+
+.mob-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+  padding-bottom: 24px;
+}
+
+.mob-actions__spacer {
+  flex: 1 1 auto;
+}
+
+.mob-actions__hint {
+  font-size: 12px;
+  color: #b91c1c;
+}
+
+@media (width <= 640px) {
+  .mob-grid {
+    grid-template-columns: 70px 1fr;
+    row-gap: 4px;
+
+    &--head {
+      display: none;
+    }
+
+    &__row {
+      display: grid;
+      grid-template-columns: 70px 1fr;
+      grid-template-areas:
+        'code name'
+        'debit debit'
+        'credit credit';
+      gap: 4px;
+      padding: 10px 0;
+      border-bottom: 1px solid #f1f5f9;
+    }
+
+    &__code {
+      grid-area: code;
+    }
+
+    &__name {
+      grid-area: name;
+    }
+
+    &__amt:nth-of-type(1) {
+      grid-area: debit;
+    }
+
+    &__amt:nth-of-type(2) {
+      grid-area: credit;
+    }
+
+    &__amt {
+      text-align: left;
     }
   }
 }
diff --git a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts
index 923463829..b1636d9df 100644
--- a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts
+++ b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts
@@ -16,6 +16,7 @@ import {
   ReactiveFormsModule
 } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
 
 /** Custom Services */
 import { AccountingService } from '../accounting.service';
@@ -41,7 +42,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     GlAccountDisplayComponent,
-    CurrencyPipe
+    CurrencyPipe,
+    MatIconModule
   ]
 })
 export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
diff --git a/src/assets/env.js b/src/assets/env.js
index 8493889f7..f2ee5002a 100644
--- a/src/assets/env.js
+++ b/src/assets/env.js
@@ -17,8 +17,8 @@
   window["env"]["apiVersion"] = '';
   window["env"]["apiActuator"] = '';
 
-  window["env"]["fineractPlatformTenantId"] = '';
-  window["env"]["fineractPlatformTenantIds"] = 'default,socity_bank';
+  window["env"]["fineractPlatformTenantId"] = 'abc_bank';
+  window["env"]["fineractPlatformTenantIds"] = 'abc_bank';
 
   window['env']['tenantLogoUrl'] = '';
   window['env']['tenantLogoUrlDark'] = '';