diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 0c8a05bd67..91d2c50da5 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -37,6 +37,12 @@ jobs:
       - name: Run eslint
         run: npx ng lint
 
+      - name: Run stylelint
+        run: npx stylelint "src/**/*.scss"
+
+      - name: Run prettier
+        run: npx prettier . --check
+
       - name: Run build
         run: npm run build:prod
 
diff --git a/README.md b/README.md
index a66bf99c58..7231116009 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Mifos X Web App ![build](https://github.com/openMF/web-app/actions/workflows/build.yml/badge.svg) [Slack](https://app.slack.com/client/T0F5GHE8Y/CJJGJLN10) 
+# Mifos X Web App ![build](https://github.com/openMF/web-app/actions/workflows/build.yml/badge.svg) [Slack](https://app.slack.com/client/T0F5GHE8Y/CJJGJLN10)
 
 Mifos X Web App is the revamped version of the Mifos X Community App, an effective financial inclusion solution and the default web application built on top of the Mifos X platform for the Mifos User Community.
 
@@ -16,7 +16,7 @@ The latest code is continuously deployed at https://openmf.github.io/web-app/ wh
 
    [`nodeJs`](https://nodejs.org/en/download/)
 
-3. Install [angular-cli](https://github.com/angular/angular-cli) globally.
+2. Install [angular-cli](https://github.com/angular/angular-cli) globally.
 
 ```
 npm install -g @angular/cli@16.0.2
diff --git a/docker-compose.yml b/docker-compose.yml
index ec8553398e..fc3e14a8fd 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -24,4 +24,3 @@ services:
       - MIFOS_SUPPORTED_LANGUAGES=cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT,sw-SW
       - MIFOS_SESSION_IDLE_TIMEOUT=300000
       - MIFOS_OAUTH_SERVER_ENABLED=false
- 
\ No newline at end of file
diff --git a/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.html b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.html
index 5fcbc771e9..1bec0af779 100644
--- a/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.html
@@ -1,47 +1,60 @@
 <div class="container mat-elevation-z8">
-    <mat-card>
-        <div class="m-b-20" fxLayout="column" *ngIf="maturityDate">
-            <span class="m-r-10">{{'Maturity Date' | translateKey:'inputs'}} : {{ maturityDate | dateFormat}}</span>
-        </div>
-        <form [formGroup]="interestPauseLoanForm" (ngSubmit)="submit()">
-            <mat-card-content>
-                <div fxLayout="column">
-                    <mat-form-field (click)="startDatePicker.open()">
-                        <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
-                        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker"
-                            required formControlName="startDate" />
-                        <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
-                        <mat-datepicker #startDatePicker></mat-datepicker>
-                        <mat-error *ngIf="interestPauseLoanForm.controls.startDate.hasError('required')">
-                            {{ 'labels.inputs.Start Date' | translate
-                            }}<strong>{{ 'labels.commons.required' | translate }}</strong>
-                        </mat-error>
-                    </mat-form-field>
-                    
-                    <mat-form-field (click)="endDatePicker.open()">
-                        <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
-                        <input matInput [min]="interestPauseLoanForm.value.startDate" [max]="maxDate" [matDatepicker]="endDatePicker"
-                            required formControlName="endDate" />
-                        <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
-                        <mat-datepicker #endDatePicker></mat-datepicker>
-                        <mat-error *ngIf="interestPauseLoanForm.controls.endDate.hasError('required')">
-                            {{ 'labels.inputs.End Date' | translate
-                            }}<strong>{{ 'labels.commons.required' | translate }}</strong>
-                        </mat-error>
-                    </mat-form-field>
+  <mat-card>
+    <div class="m-b-20" fxLayout="column" *ngIf="maturityDate">
+      <span class="m-r-10">{{ 'Maturity Date' | translateKey: 'inputs' }} : {{ maturityDate | dateFormat }}</span>
+    </div>
+    <form [formGroup]="interestPauseLoanForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div fxLayout="column">
+          <mat-form-field (click)="startDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #startDatePicker></mat-datepicker>
+            <mat-error *ngIf="interestPauseLoanForm.controls.startDate.hasError('required')">
+              {{ 'labels.inputs.Start Date' | translate }}<strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-                </div>
+          <mat-form-field (click)="endDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="interestPauseLoanForm.value.startDate"
+              [max]="maxDate"
+              [matDatepicker]="endDatePicker"
+              required
+              formControlName="endDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #endDatePicker></mat-datepicker>
+            <mat-error *ngIf="interestPauseLoanForm.controls.endDate.hasError('required')">
+              {{ 'labels.inputs.End Date' | translate }}<strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+        </div>
 
-                <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-                    <button type="button" mat-raised-button [routerLink]="['../../general']">
-                        {{ 'labels.buttons.Cancel' | translate }}
-                    </button>
-                    <button mat-raised-button color="primary" [disabled]="!interestPauseLoanForm.valid"
-                        *mifosxHasPermission="'DISBURSE_LOAN'">
-                        {{ 'labels.buttons.Submit' | translate }}
-                    </button>
-                </mat-card-actions>
-            </mat-card-content>
-        </form>
-    </mat-card>
-</div>
\ No newline at end of file
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!interestPauseLoanForm.valid"
+            *mifosxHasPermission="'DISBURSE_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
+        </mat-card-actions>
+      </mat-card-content>
+    </form>
+  </mat-card>
+</div>
diff --git a/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.scss b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.scss
index d9fcadfce1..f6b89f7e9f 100644
--- a/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.scss
+++ b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.scss
@@ -1,8 +1,7 @@
 .expandcollapsebutton {
-    margin-top: -7px;
-  }
-  
-  .container {
-    max-width: 37rem;
-  }
-  
\ No newline at end of file
+  margin-top: -7px;
+}
+
+.container {
+  max-width: 37rem;
+}
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
index 2ea093c316..c2e19b9e5c 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
@@ -57,4 +57,7 @@
 <mifosx-asset-transfer-loan *ngIf="actions['Sell Loan'] || actions['Buy Back Loan']"></mifosx-asset-transfer-loan>
 <mifosx-loan-reaging [dataObject]="actionButtonData" *ngIf="actions['Re-Age']"></mifosx-loan-reaging>
 <mifosx-loan-reamortize [dataObject]="actionButtonData" *ngIf="actions['Re-Amortize']"></mifosx-loan-reamortize>
-<mifosx-add-interest-pause [dataObject]="navigationData" *ngIf="actions['Add Interest Pause']"></mifosx-add-interest-pause>
+<mifosx-add-interest-pause
+  [dataObject]="navigationData"
+  *ngIf="actions['Add Interest Pause']"
+></mifosx-add-interest-pause>
diff --git a/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html b/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html
index 9831ad7292..867f0433a9 100644
--- a/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html
+++ b/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html
@@ -1,26 +1,26 @@
 <div class="container">
   <h3>{{ 'labels.heading.Term Variations' | translate }}</h3>
-  <table mat-table [dataSource]="loanTermVariationsData" *ngIf="loanTermVariationsData.length>0">
+  <table mat-table [dataSource]="loanTermVariationsData" *ngIf="loanTermVariationsData.length > 0">
     <ng-container matColumnDef="termType">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
       <td mat-cell *matCellDef="let item">{{ item.termType.value | translate }}</td>
     </ng-container>
 
     <ng-container matColumnDef="applicableFrom">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Added On" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Added On' | translate }}</th>
       <td mat-cell *matCellDef="let item">{{ item.termVariationApplicableFrom | dateFormat }}</td>
     </ng-container>
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Value' | translate }}</th>
       <td mat-cell *matCellDef="let item">{{ item.decimalValue | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="specificToInstallment">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Specific to Installment" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Specific to Installment' | translate }}</th>
       <td mat-cell *matCellDef="let item">{{ item.isSpecificToInstallment | yesNo }}</td>
     </ng-container>
     <tr mat-header-row *matHeaderRowDef="loanDTermVariationsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: loanDTermVariationsColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanDTermVariationsColumns"></tr>
   </table>
 
   <h3 class="m-t-20" *ngIf="interestPausesData?.length > 0">{{ 'labels.heading.Interest Pauses' | translate }}</h3>
@@ -48,16 +48,26 @@ <h3 class="m-t-20" *ngIf="interestPausesData?.length > 0">{{ 'labels.heading.Int
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let item">
-        <button class="button" mat-icon-button color="primary"
-          matTooltip="{{ 'tooltips.Edit' | translate }}" matTooltipPosition="right"
-          (click)="manageRequest(item, 'Edit')">
+        <button
+          class="button"
+          mat-icon-button
+          color="primary"
+          matTooltip="{{ 'tooltips.Edit' | translate }}"
+          matTooltipPosition="right"
+          (click)="manageRequest(item, 'Edit')"
+        >
           <fa-icon icon="edit" size="lg"></fa-icon>
         </button>
-        <button class="button" mat-icon-button color="warn"
-        matTooltip="{{ 'tooltips.Delete' | translate }}" matTooltipPosition="left"
-        (click)="manageRequest(item, 'Delete')">
-        <fa-icon icon="trash" size="lg"></fa-icon>
-      </button>
+        <button
+          class="button"
+          mat-icon-button
+          color="warn"
+          matTooltip="{{ 'tooltips.Delete' | translate }}"
+          matTooltipPosition="left"
+          (click)="manageRequest(item, 'Delete')"
+        >
+          <fa-icon icon="trash" size="lg"></fa-icon>
+        </button>
       </td>
     </ng-container>
 
@@ -71,4 +81,4 @@ <h3 class="m-t-20" *ngIf="interestPausesData?.length > 0">{{ 'labels.heading.Int
       {{ 'labels.text.No data found' | translate }}
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
index 00ffe51155..ad99a60cd9 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
@@ -302,7 +302,11 @@ <h4 fxFlex="33%" class="mat-h4">
               >
                 <fa-icon icon="edit"></fa-icon>
               </button>
-              <button mat-icon-button color="warn" (click)="delete('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
+              <button
+                mat-icon-button
+                color="warn"
+                (click)="delete('PaymentFundSource', paymentChannelToFundSourceMappings, i)"
+              >
                 <fa-icon icon="trash"></fa-icon>
               </button>
             </td>
@@ -467,7 +471,11 @@ <h4 fxFlex="33%" class="mat-h4">
               >
                 <fa-icon icon="edit"></fa-icon>
               </button>
-              <button mat-icon-button color="warn" (click)="delete('ChargeOffReasonExpense', chargeOffReasonToExpenseAccountMappings, i)">
+              <button
+                mat-icon-button
+                color="warn"
+                (click)="delete('ChargeOffReasonExpense', chargeOffReasonToExpenseAccountMappings, i)"
+              >
                 <fa-icon icon="trash"></fa-icon>
               </button>
             </td>
diff --git a/src/app/shared/long-text/long-text.component.html b/src/app/shared/long-text/long-text.component.html
index a8de75c1d3..47ff2f21b4 100644
--- a/src/app/shared/long-text/long-text.component.html
+++ b/src/app/shared/long-text/long-text.component.html
@@ -1,5 +1,7 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()" *ngIf="!emptyValue">
-  <span class="m-l-3" *ngIf="isLongValue()" (click)="showValue()"><fa-icon icon="eye" size="sm" [title]="textValue"></fa-icon></span>
+  <span class="m-l-3" *ngIf="isLongValue()" (click)="showValue()"
+    ><fa-icon icon="eye" size="sm" [title]="textValue"></fa-icon
+  ></span>
   <span class="m-l-5" *ngIf="isLongValue()" (click)="showValue()">{{ textValue | truncateText: printChars }}...</span>
   <span class="m-l-5" *ngIf="!isLongValue()" (click)="showValue()">{{ textValue }}</span>
 </span>
diff --git a/src/assets/env.template.js b/src/assets/env.template.js
index 26d31b70f3..36c9e8b80a 100644
--- a/src/assets/env.template.js
+++ b/src/assets/env.template.js
@@ -35,13 +35,12 @@
   // Time in milliseconds for Session idle timeout, default 300000 seconds
   window['env']['sessionIdleTimeout'] = '$MIFOS_SESSION_IDLE_TIMEOUT';
 
-  // OAuth Server Enabled  
+  // OAuth Server Enabled
   window['env']['oauthServerEnabled'] = '$MIFOS_OAUTH_SERVER_ENABLED';
 
-  // OAuth Server URL  
+  // OAuth Server URL
   window['env']['oauthServerUrl'] = '$MIFOS_OAUTH_SERVER_URL';
 
-  // OAuth Client Id  
+  // OAuth Client Id
   window['env']['oauthAppId'] = '$MIFOS_OAUTH_CLIENT_ID';
-
 })(this);