From 73dd25ebdfc2531b11afaaba128620a76d65f3b4 Mon Sep 17 00:00:00 2001
From: Jose Alberto Hernandez <alberto@black-box.local>
Date: Sun, 20 Jul 2025 16:21:21 -0500
Subject: [PATCH] WEB-262: Move the form steppers to vertical orientation

---
 .../clients/create-client/create-client.component.html |  4 ++--
 .../create-fixed-deposit-account.component.html        | 10 ++++++++--
 .../edit-fixed-deposit-account.component.html          | 10 ++++++++--
 .../create-recurring-deposits-account.component.html   | 10 ++++++++--
 .../edit-recurring-deposit-account.component.html      | 10 ++++++++--
 .../create-loans-account.component.html                | 10 ++++++++--
 .../edit-loans-account.component.html                  | 10 ++++++++--
 .../create-glim-account.component.html                 | 10 ++++++++--
 .../create-campaign/create-campaign.component.html     | 10 ++++++++--
 .../edit-campaign/edit-campaign.component.html         | 10 ++++++++--
 .../create-fixed-deposit-product.component.html        | 10 ++++++++--
 .../edit-fixed-deposit-product.component.html          | 10 ++++++++--
 .../create-loan-product.component.html                 | 10 ++++++++--
 .../edit-loan-product/edit-loan-product.component.html | 10 ++++++++--
 .../create-recurring-deposit-product.component.html    | 10 ++++++++--
 .../edit-recurring-deposit-product.component.html      | 10 ++++++++--
 .../create-saving-product.component.html               | 10 ++++++++--
 .../edit-saving-product.component.html                 | 10 ++++++++--
 .../create-share-product.component.html                | 10 ++++++++--
 .../edit-share-product.component.html                  | 10 ++++++++--
 .../create-savings-account.component.html              | 10 ++++++++--
 .../edit-savings-account.component.html                | 10 ++++++++--
 .../create-gsim-account.component.html                 | 10 ++++++++--
 .../stepper-buttons/stepper-buttons.component.html     | 10 ++++------
 .../stepper-buttons/stepper-buttons.component.ts       |  4 +---
 .../create-shares-account.component.html               | 10 ++++++++--
 .../edit-shares-account.component.html                 | 10 ++++++++--
 src/assets/translations/en-US.json                     |  2 +-
 src/assets/translations/es-MX.json                     |  2 +-
 29 files changed, 201 insertions(+), 61 deletions(-)

diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html
index b1622d8aa..8385fbc64 100644
--- a/src/app/clients/create-client/create-client.component.html
+++ b/src/app/clients/create-client/create-client.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #clientStepper>
+  <mat-stepper orientation="vertical" [linear]="false" class="mat-elevation-z8" labelPosition="bottom" #clientStepper>
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -66,5 +66,5 @@
       >
       </mifosx-client-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html b/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html
index e50e5a8c6..f2d177d4c 100644
--- a/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html
+++ b/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositAccountStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #fixedDepositAccountStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -82,5 +88,5 @@
       >
       </mifosx-fixed-deposit-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html b/src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html
index e1d8960fd..56706a19c 100644
--- a/src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html
+++ b/src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositAccountStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #fixedDepositAccountStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -82,5 +88,5 @@
       >
       </mifosx-fixed-deposit-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html
index 3840567b3..1cf0a39f2 100644
--- a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositAccountStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #recurringDepositAccountStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -82,5 +88,5 @@
       >
       </mifosx-recurring-deposits-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html
index 6150550e9..57186365d 100644
--- a/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html
+++ b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositAccountStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #recurringDepositAccountStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -83,5 +89,5 @@
       >
       </mifosx-recurring-deposits-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/loans/create-loans-account/create-loans-account.component.html b/src/app/loans/create-loans-account/create-loans-account.component.html
index 8ac136e89..782a87d86 100644
--- a/src/app/loans/create-loans-account/create-loans-account.component.html
+++ b/src/app/loans/create-loans-account/create-loans-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loansAccountStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #loansAccountStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -88,5 +94,5 @@
       >
       </mifosx-loans-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/loans/edit-loans-account/edit-loans-account.component.html b/src/app/loans/edit-loans-account/edit-loans-account.component.html
index 3956f4ca5..2ab2eb89d 100644
--- a/src/app/loans/edit-loans-account/edit-loans-account.component.html
+++ b/src/app/loans/edit-loans-account/edit-loans-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loansAccountStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #loansAccountStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -75,5 +81,5 @@
       >
       </mifosx-loans-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html b/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html
index efa63325b..d33f57f06 100644
--- a/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html
+++ b/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loansAccountStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #loansAccountStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -96,5 +102,5 @@
       >
       </mifosx-loans-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/organization/sms-campaigns/create-campaign/create-campaign.component.html b/src/app/organization/sms-campaigns/create-campaign/create-campaign.component.html
index 4e7413e70..d04abeef6 100644
--- a/src/app/organization/sms-campaigns/create-campaign/create-campaign.component.html
+++ b/src/app/organization/sms-campaigns/create-campaign/create-campaign.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #smsCampaignStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #smsCampaignStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -50,5 +56,5 @@
       >
       </mifosx-campaign-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.html b/src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.html
index 8c81e5840..139def663 100644
--- a/src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.html
+++ b/src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #smsCampaignStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #smsCampaignStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -52,5 +58,5 @@
       >
       </mifosx-campaign-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.html b/src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.html
index 4603a7b42..895db4a93 100644
--- a/src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.html
+++ b/src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #fixedDepositProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -91,5 +97,5 @@
       >
       </mifosx-fixed-deposit-product-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.html b/src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.html
index 2c1af0dc5..f741c0d77 100644
--- a/src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.html
+++ b/src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #fixedDepositProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -90,5 +96,5 @@
       >
       </mifosx-fixed-deposit-product-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/products/loan-products/create-loan-product/create-loan-product.component.html b/src/app/products/loan-products/create-loan-product/create-loan-product.component.html
index 0277bbfaa..e291b16ec 100644
--- a/src/app/products/loan-products/create-loan-product/create-loan-product.component.html
+++ b/src/app/products/loan-products/create-loan-product/create-loan-product.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loanProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #loanProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -135,5 +141,5 @@
       >
       </mifosx-loan-product-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/products/loan-products/edit-loan-product/edit-loan-product.component.html b/src/app/products/loan-products/edit-loan-product/edit-loan-product.component.html
index 0219f6b69..676ce2eee 100644
--- a/src/app/products/loan-products/edit-loan-product/edit-loan-product.component.html
+++ b/src/app/products/loan-products/edit-loan-product/edit-loan-product.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loanProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #loanProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -135,5 +141,5 @@
       >
       </mifosx-loan-product-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.html b/src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.html
index f60ca9dad..a7fc8c94e 100644
--- a/src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.html
+++ b/src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #recurringDepositProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -98,5 +104,5 @@
       >
       </mifosx-recurring-deposit-product-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.html b/src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.html
index 6ddd0e3a6..e5fddebd3 100644
--- a/src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.html
+++ b/src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #recurringDepositProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -98,5 +104,5 @@
       >
       </mifosx-recurring-deposit-product-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/products/saving-products/create-saving-product/create-saving-product.component.html b/src/app/products/saving-products/create-saving-product/create-saving-product.component.html
index 044dae725..652832b25 100644
--- a/src/app/products/saving-products/create-saving-product/create-saving-product.component.html
+++ b/src/app/products/saving-products/create-saving-product/create-saving-product.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #savingProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -84,5 +90,5 @@
       >
       </mifosx-saving-product-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/products/saving-products/edit-saving-product/edit-saving-product.component.html b/src/app/products/saving-products/edit-saving-product/edit-saving-product.component.html
index 70cbd1e46..36856ad95 100644
--- a/src/app/products/saving-products/edit-saving-product/edit-saving-product.component.html
+++ b/src/app/products/saving-products/edit-saving-product/edit-saving-product.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #savingProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -86,5 +92,5 @@
       >
       </mifosx-saving-product-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/products/share-products/create-share-product/create-share-product.component.html b/src/app/products/share-products/create-share-product/create-share-product.component.html
index 9a8fc8f52..a8d79daa0 100644
--- a/src/app/products/share-products/create-share-product/create-share-product.component.html
+++ b/src/app/products/share-products/create-share-product/create-share-product.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #shareProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #shareProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -87,5 +93,5 @@
       >
       </mifosx-share-product-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/products/share-products/edit-share-product/edit-share-product.component.html b/src/app/products/share-products/edit-share-product/edit-share-product.component.html
index 8e633f4f2..2e0de9f4e 100644
--- a/src/app/products/share-products/edit-share-product/edit-share-product.component.html
+++ b/src/app/products/share-products/edit-share-product/edit-share-product.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #shareProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #shareProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -93,5 +99,5 @@
       >
       </mifosx-share-product-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/savings/create-savings-account/create-savings-account.component.html b/src/app/savings/create-savings-account/create-savings-account.component.html
index 38e833e36..cd98bc558 100644
--- a/src/app/savings/create-savings-account/create-savings-account.component.html
+++ b/src/app/savings/create-savings-account/create-savings-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #savingProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -61,5 +67,5 @@
       >
       </mifosx-savings-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/savings/edit-savings-account/edit-savings-account.component.html b/src/app/savings/edit-savings-account/edit-savings-account.component.html
index 043ec1e9a..2eaff20c6 100644
--- a/src/app/savings/edit-savings-account/edit-savings-account.component.html
+++ b/src/app/savings/edit-savings-account/edit-savings-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #savingProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -62,5 +68,5 @@
       >
       </mifosx-savings-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html b/src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html
index fa4dc3aa1..9e101818c 100644
--- a/src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html
+++ b/src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #savingProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -70,5 +76,5 @@
       >
       </mifosx-savings-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.html b/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.html
index 880b4950b..d986e819a 100644
--- a/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.html
+++ b/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.html
@@ -1,10 +1,8 @@
 <div class="flex-fill layout-row layout-align-center margin-t gap-2percent layout-xs-column">
-  <button mat-raised-button matStepperPrevious [disabled]="disablePrevious">
-    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+  <button matButton="elevated" matStepperPrevious [disabled]="disablePrevious">
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
-  <button mat-raised-button matStepperNext [disabled]="disableNext">
-    Next
-    <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+  <button matButton="elevated" matStepperNext [disabled]="disableNext">
+    {{ 'labels.buttons.Next' | translate }}
   </button>
 </div>
diff --git a/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.ts b/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.ts
index dd1017d2b..3a32074e9 100644
--- a/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.ts
+++ b/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.ts
@@ -1,6 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
@@ -10,7 +9,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     MatStepperPrevious,
-    FaIconComponent,
     MatStepperNext
   ]
 })
diff --git a/src/app/shares/create-shares-account/create-shares-account.component.html b/src/app/shares/create-shares-account/create-shares-account.component.html
index c1cafb2b9..01c452c90 100644
--- a/src/app/shares/create-shares-account/create-shares-account.component.html
+++ b/src/app/shares/create-shares-account/create-shares-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #shareProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #shareProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -61,5 +67,5 @@
       >
       </mifosx-shares-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/app/shares/edit-shares-account/edit-shares-account.component.html b/src/app/shares/edit-shares-account/edit-shares-account.component.html
index ac1a0a7ae..61131f7d7 100644
--- a/src/app/shares/edit-shares-account/edit-shares-account.component.html
+++ b/src/app/shares/edit-shares-account/edit-shares-account.component.html
@@ -1,5 +1,11 @@
 <div class="container">
-  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #shareProductStepper>
+  <mat-stepper
+    orientation="vertical"
+    [linear]="false"
+    class="mat-elevation-z8"
+    labelPosition="bottom"
+    #shareProductStepper
+  >
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -63,5 +69,5 @@
       >
       </mifosx-shares-account-preview-step>
     </mat-step>
-  </mat-horizontal-stepper>
+  </mat-stepper>
 </div>
diff --git a/src/assets/translations/en-US.json b/src/assets/translations/en-US.json
index c433544f3..b2f95c7d0 100644
--- a/src/assets/translations/en-US.json
+++ b/src/assets/translations/en-US.json
@@ -2488,7 +2488,7 @@
       "Income capitalization calculation type": "Income capitalization calculation type",
       "Income capitalization strategy": "Income capitalization strategy",
       "Income capitalization type": "Income capitalization type",
-      "DEFERRED INCOME RECOGNITION": "Deferred income recognition",
+      "DEFERRED INCOME RECOGNITION": "DEFERRED INCOME RECOGNITION",
       "Enable Buy down fee": "Enable Buy down fee",
       "Buy down fee calculation type": "Buy down fee calculation type",
       "Buy down fee strategy": "Buy down fee strategy",
diff --git a/src/assets/translations/es-MX.json b/src/assets/translations/es-MX.json
index 9cba389f6..0c9b8412e 100644
--- a/src/assets/translations/es-MX.json
+++ b/src/assets/translations/es-MX.json
@@ -2481,7 +2481,7 @@
       "Income capitalization calculation type": "Tipo de cálculo de capitalización de ingresos",
       "Income capitalization strategy": "Estrategia de capitalización de ingresos",
       "Income capitalization type": "Tipo de capitalización de ingresos",
-      "DEFERRED INCOME RECOGNITION": "Reconocimiento de ingresos diferidos",
+      "DEFERRED INCOME RECOGNITION": "INGRESOS DIFERIDOS",
       "Enable Buy down fee": "Habilitar comisión de compra anticipada",
       "Buy down fee calculation type": "Tipo de cálculo de comisión de compra anticipada",
       "Buy down fee strategy": "Estrategia de comisión de compra anticipada",