diff --git a/src/app/account-transfers/view-account-transfer/view-account-transfer.component-theme.scss b/src/app/account-transfers/view-account-transfer/view-account-transfer.component-theme.scss
new file mode 100644
index 000000000..f5f591486
--- /dev/null
+++ b/src/app/account-transfers/view-account-transfer/view-account-transfer.component-theme.scss
@@ -0,0 +1,40 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin view-account-transfer-component-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+  $foreground: map.get($theme, foreground);
+  $primary: map.get($theme, primary);
+
+  mifosx-view-account-transfer {
+    .section-title {
+      color: mat.m2-get-color-from-palette($foreground, text);
+    }
+
+    .info-label {
+      color: mat.m2-get-color-from-palette($foreground, secondary-text);
+    }
+
+    .info-value {
+      color: mat.m2-get-color-from-palette($foreground, text);
+
+      a {
+        color: mat.m2-get-color-from-palette($primary, 500);
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .status-indicator {
+      &.active {
+        background-color: #4caf50;
+      }
+
+      &.undo {
+        background-color: #f44336;
+      }
+    }
+  }
+}
diff --git a/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html
index f81869acd..c1f130ae3 100644
--- a/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html
+++ b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html
@@ -11,88 +11,98 @@
 
   <mat-card>
     <mat-card-content>
-      <div class="layout-row-wrap responsive-column">
-        <div class="flex-100" [ngClass]="transactionColor()"></div>
+      <div class="transfer-container">
+        <div class="status-indicator" [ngClass]="transactionColor()"></div>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transaction Details' | translate }}</h3>
+        <!-- Transaction Details Section -->
+        <section class="transfer-section">
+          <h3 class="section-title">{{ 'labels.heading.Transaction Details' | translate }}</h3>
+          <mat-divider></mat-divider>
 
-        <mat-divider [inset]="true"></mat-divider>
+          <div class="info-grid">
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Transaction Amount' | translate }}:</span>
+              <span class="info-value">
+                {{ viewAccountTransferData.currency?.displaySymbol }}
+                {{ viewAccountTransferData.transferAmount | formatNumber }} ({{
+                  viewAccountTransferData.currency?.code
+                }})
+              </span>
+            </div>
 
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Transaction Amount' | translate }}:</span>
-          <span class="flex-60"
-            >{{ viewAccountTransferData.currency.displaySymbol }}
-            {{ viewAccountTransferData.transferAmount | formatNumber }} ({{
-              viewAccountTransferData.currency.code
-            }})</span
-          >
-        </div>
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Transaction Date' | translate }}:</span>
+              <span class="info-value">{{ viewAccountTransferData.transferDate | dateFormat }}</span>
+            </div>
 
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Transaction Date' | translate }}:</span>
-          <span class="flex-60">{{ viewAccountTransferData.transferDate | dateFormat }}</span>
-        </div>
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Destination' | translate }}:</span>
+              <span class="info-value">{{ viewAccountTransferData.transferDescription }}</span>
+            </div>
+          </div>
+        </section>
 
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Destination' | translate }}:</span>
-          <span class="flex-60">{{ viewAccountTransferData.transferDescription }}</span>
-        </div>
+        <section class="transfer-section">
+          <h3 class="section-title">{{ 'labels.heading.Transferred From' | translate }}</h3>
+          <mat-divider></mat-divider>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transferred From' | translate }}</h3>
+          <div class="info-grid">
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Office' | translate }}:</span>
+              <span class="info-value">{{ viewAccountTransferData.fromOffice?.name }}</span>
+            </div>
 
-        <mat-divider [inset]="true"></mat-divider>
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Client' | translate }}:</span>
+              <span class="info-value">{{ viewAccountTransferData.fromClient?.displayName }}</span>
+            </div>
 
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
-          <span class="flex-60">{{ viewAccountTransferData.fromOffice.name }}</span>
-        </div>
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Account Type' | translate }}:</span>
+              <span class="info-value">{{ viewAccountTransferData.fromAccountType?.value }}</span>
+            </div>
 
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Client' | translate }}:</span>
-          <span class="flex-60">{{ viewAccountTransferData.fromClient.displayName }}</span>
-        </div>
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Account No' | translate }}:</span>
+              <span class="info-value">{{ viewAccountTransferData.fromAccount?.accountNo }}</span>
+            </div>
+          </div>
+        </section>
 
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Account Type' | translate }}:</span>
-          <span class="flex-60">{{ viewAccountTransferData.fromAccountType.value }}</span>
-        </div>
+        <section class="transfer-section">
+          <h3 class="section-title">{{ 'labels.heading.Transferred To' | translate }}</h3>
+          <mat-divider></mat-divider>
 
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Account No' | translate }}:</span>
-          <span class="flex-60">{{ viewAccountTransferData.fromAccount.accountNo }}</span>
-        </div>
+          <div class="info-grid">
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Office' | translate }}:</span>
+              <span class="info-value">{{ viewAccountTransferData.toOffice?.name }}</span>
+            </div>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transferred To' | translate }}</h3>
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Client' | translate }}:</span>
+              <span class="info-value">
+                <a [href]="transferToClient(viewAccountTransferData.toClient)">
+                  {{ viewAccountTransferData.toClient?.displayName }}
+                </a>
+              </span>
+            </div>
 
-        <mat-divider [inset]="true"></mat-divider>
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Account Type' | translate }}:</span>
+              <span class="info-value">{{ viewAccountTransferData.toAccountType?.value }}</span>
+            </div>
 
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
-          <span class="flex-60">{{ viewAccountTransferData.toOffice.name }}</span>
-        </div>
-
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Client' | translate }}:</span>
-          <span class="flex-60"
-            ><a [href]="transferToClient(viewAccountTransferData.toClient)">
-              {{ viewAccountTransferData.toClient.displayName }}</a
-            >
-          </span>
-        </div>
-
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Account Type' | translate }}:</span>
-          <span class="flex-60">{{ viewAccountTransferData.toAccountType.value }}</span>
-        </div>
-
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Account No' | translate }}:</span>
-          <span class="flex-60"
-            ><a [href]="transferToAccount(viewAccountTransferData.toClient, viewAccountTransferData.toAccount)">
-              {{ viewAccountTransferData.toAccount.accountNo }}</a
-            >
-          </span>
-        </div>
+            <div class="info-row">
+              <span class="info-label">{{ 'labels.inputs.Account No' | translate }}:</span>
+              <span class="info-value">
+                <a [href]="transferToAccount(viewAccountTransferData.toClient, viewAccountTransferData.toAccount)">
+                  {{ viewAccountTransferData.toAccount?.accountNo }}
+                </a>
+              </span>
+            </div>
+          </div>
+        </section>
       </div>
     </mat-card-content>
 
diff --git a/src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss
index def907a14..caec643ce 100644
--- a/src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss
+++ b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss
@@ -1,12 +1,65 @@
-h3 {
+.transfer-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  position: relative;
+  padding-left: 20px;
+}
+
+.status-indicator {
+  position: absolute;
+  top: 0;
+  left: -16px;
+  width: 4px;
+  height: 100%;
+  border-radius: 2px;
+}
+
+.transfer-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.section-title {
   margin: 0;
+  font-size: 1.125rem;
   font-weight: 500;
 }
 
-span {
-  margin: 0.5em 0;
+mat-divider {
+  margin-bottom: 0.5rem;
 }
 
-mat-divider {
-  margin: 0 0 0.5em;
+.info-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.info-row {
+  display: grid;
+  grid-template-columns: minmax(150px, 200px) auto;
+  gap: 1rem;
+  align-items: start;
+
+  @media (width <= 768px) {
+    grid-template-columns: 100%;
+    gap: 0.25rem;
+  }
+}
+
+.info-label {
+  font-weight: 500;
+
+  @media (width <= 768px) {
+    font-size: 0.875rem;
+  }
+}
+
+.info-value {
+  word-break: break-word;
+
+  a {
+    text-decoration: none;
+  }
 }
diff --git a/src/theme/mifosx-theme.scss b/src/theme/mifosx-theme.scss
index 794167581..1165967e3 100644
--- a/src/theme/mifosx-theme.scss
+++ b/src/theme/mifosx-theme.scss
@@ -8,6 +8,7 @@
 @use '../app/centers/centers-view/centers-view.component-theme.scss' as *;
 @use '../app/home/dashboard/dashboard.component-theme.scss' as *;
 @use '../app/shares/shares-account-view/shares-account-view.component-theme.scss' as *;
+@use '../app/account-transfers/view-account-transfer/view-account-transfer.component-theme.scss' as *;
 @use 'content' as *;
 @use 'dark_content' as *;
 
@@ -61,6 +62,7 @@ $mifosx-app-theme: mat.m2-define-light-theme(
 @include dashboard-component-theme($mifosx-app-theme);
 @include shares-account-view-component-theme($mifosx-app-theme);
 @include account-view-component-theme($mifosx-app-theme);
+@include view-account-transfer-component-theme($mifosx-app-theme);
 
 /* ################################## Dark theme ################################### */
 
@@ -83,4 +85,5 @@ $mifosx-app-dark-theme: mat.m2-define-dark-theme(
   @include dashboard-component-theme($mifosx-app-dark-theme);
   @include shares-account-view-component-theme($mifosx-app-dark-theme);
   @include account-view-component-dark-theme($mifosx-app-dark-theme);
+  @include view-account-transfer-component-theme($mifosx-app-dark-theme);
 }