diff --git a/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html b/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html
index 84b4f9a9e..49fbbf15a 100644
--- a/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html
+++ b/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html
@@ -2,18 +2,20 @@
 
   <mat-card>
 
-    <div fxLayout="row" fxLayout.lt-md="column">
+    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
 
       <div fxFlex="50%">
 
         <mat-nav-list>
 
-          <mat-list-item [routerLink]="['ranges']" *mifosxHasPermission="'READ_DELINQUENCY_RANGE'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_RANGE'">
+            <mat-icon matListIcon [routerLink]="['ranges']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Manage Delinquency Ranges' | translate}}</h4>
-            <p matLine>{{'labels.text.Define delinquency day ranges' | translate}}</p>
+            <h4 matLine [routerLink]="['ranges']">{{'labels.heading.Manage Delinquency Ranges' | translate}}</h4>
+            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
+            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['ranges']">{{'labels.text.Define delinquency day ranges' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -24,12 +26,14 @@
 
         <mat-nav-list>
 
-          <mat-list-item [routerLink]="['buckets']" *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
+            <mat-icon matListIcon [routerLink]="['buckets']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Manage Delinquency Buckets' | translate}}</h4>
-            <p matLine>{{'labels.text.Define delinquency bucket as set of ranges' | translate}}</p>
+            <h4 matLine [routerLink]="['buckets']">{{'labels.heading.Manage Delinquency Buckets' | translate}}</h4>
+            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
+            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
+            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['buckets']">{{'labels.text.Define delinquency bucket as set of ranges' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
diff --git a/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.ts b/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.ts
index 02cc93b72..5a0851834 100644
--- a/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.ts
+++ b/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.ts
@@ -6,10 +6,22 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./manage-delinquency-buckets.component.scss']
 })
 export class ManageDelinquencyBucketsComponent implements OnInit {
+  // Initialize an array of 2 boolean values, all set to false
+  arrowBooleans: boolean[] = new Array(2).fill(false);
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  /**
+   * Popover function
+   * @param arrowNumber - The index of the boolean value to toggle.
+   */
+
+  arrowBooleansToggle(arrowNumber:number) {
+    // Toggle the boolean value at the given index
+    this.arrowBooleans[arrowNumber] = !this.arrowBooleans[arrowNumber];
+  }
+
 }
diff --git a/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html b/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html
index b4a859657..df88c44e7 100644
--- a/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html
+++ b/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html
@@ -2,18 +2,20 @@
 
   <mat-card>
 
-    <div fxLayout="row" fxLayout.lt-md="column">
+    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
 
       <div fxFlex="50%">
 
         <mat-nav-list>
 
-          <mat-list-item [routerLink]="['tax-components']" *mifosxHasPermission="'READ_TAXCOMPONENT'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_TAXCOMPONENT'">
+            <mat-icon matListIcon [routerLink]="['tax-components']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Manage Tax Components' | translate}}</h4>
-            <p matLine>{{'labels.heading.Define Tax Components' | translate}}</p>
+            <h4 matLine [routerLink]="['tax-components']">{{'labels.heading.Manage Tax Components' | translate}}</h4>
+            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
+            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['tax-components']">{{'labels.heading.Define Tax Components' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -24,12 +26,14 @@
 
         <mat-nav-list>
 
-          <mat-list-item [routerLink]="['tax-groups']" *mifosxHasPermission="'READ_TAXGROUP'">
-            <mat-icon matListIcon>
+          <mat-list-item *mifosxHasPermission="'READ_TAXGROUP'">
+            <mat-icon matListIcon [routerLink]="['tax-groups']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Manage Tax Groups' | translate}}</h4>
-            <p matLine>{{'labels.heading.Define Tax Groups' | translate}}</p>
+            <h4 matLine [routerLink]="['tax-groups']">{{'labels.heading.Manage Tax Groups' | translate}}</h4>
+            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
+            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
+            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['tax-groups']">{{'labels.heading.Define Tax Groups' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
diff --git a/src/app/products/manage-tax-configurations/manage-tax-configurations.component.ts b/src/app/products/manage-tax-configurations/manage-tax-configurations.component.ts
index 731495139..6bb0f5538 100644
--- a/src/app/products/manage-tax-configurations/manage-tax-configurations.component.ts
+++ b/src/app/products/manage-tax-configurations/manage-tax-configurations.component.ts
@@ -9,10 +9,22 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './manage-tax-configurations.component.html',
 })
 export class ManageTaxConfigurationsComponent implements OnInit {
+  // Initialize an array of 2 boolean values, all set to false
+  arrowBooleans: boolean[] = new Array(2).fill(false);
 
   constructor() { }
 
   ngOnInit() {
   }
 
+  /**
+   * Popover function
+   * @param arrowNumber - The index of the boolean value to toggle.
+   */
+
+  arrowBooleansToggle(arrowNumber:number) {
+    // Toggle the boolean value at the given index
+    this.arrowBooleans[arrowNumber] = !this.arrowBooleans[arrowNumber];
+  }
+
 }
diff --git a/src/app/system/external-services/external-services.component.html b/src/app/system/external-services/external-services.component.html
index c70977654..f90f13433 100644
--- a/src/app/system/external-services/external-services.component.html
+++ b/src/app/system/external-services/external-services.component.html
@@ -2,26 +2,30 @@
 
   <mat-card>
 
-    <div fxLayout="row" fxLayout.lt-md="column">
+    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
 
       <div fxFlex="50%">
 
         <mat-nav-list>
 
-          <mat-list-item [routerLink]="['amazon-s3']">
-            <mat-icon matListIcon>
+          <mat-list-item>
+            <mat-icon matListIcon [routerLink]="['amazon-s3']">
               <fa-icon icon="cloud" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.S3 Amazon External Service' | translate}}</h4>
-            <p matLine>{{'labels.text.S3 Amazon Service Configuration' | translate}}</p>
+            <h4 matLine [routerLink]="['amazon-s3']">{{'labels.heading.S3 Amazon External Service' | translate}}</h4>
+            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
+            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+            <p matLine [routerLink]="['amazon-s3']" *ngIf="arrowBooleans[0]">{{'labels.text.S3 Amazon Service Configuration' | translate}}</p>
           </mat-list-item>
 
-          <mat-list-item [routerLink]="['sms']">
-            <mat-icon matListIcon>
+          <mat-list-item>
+            <mat-icon matListIcon [routerLink]="['sms']">
               <fa-icon icon="comment-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.SMS External Service' | translate}}</h4>
-            <p matLine>{{'labels.text.SMS Service Configuration' | translate}}</p>
+            <h4 matLine [routerLink]="['sms']">{{'labels.heading.SMS External Service' | translate}}</h4>
+            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
+            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
+            <p matLine [routerLink]="['sms']" *ngIf="arrowBooleans[1]">{{'labels.text.SMS Service Configuration' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -32,20 +36,24 @@
 
         <mat-nav-list>
 
-          <mat-list-item [routerLink]="['email']">
-            <mat-icon matListIcon>
+          <mat-list-item>
+            <mat-icon matListIcon [routerLink]="['email']">
               <fa-icon icon="envelope" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Email External Service' | translate}}</h4>
-            <p matLine>{{'labels.text.Email Service Configuration' | translate}}</p>
+            <h4 matLine [routerLink]="['email']">{{'labels.heading.Email External Service' | translate}}</h4>
+            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
+            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
+            <p matLine [routerLink]="['email']" *ngIf="arrowBooleans[2]">{{'labels.text.Email Service Configuration' | translate}}</p>
           </mat-list-item>
 
-          <mat-list-item [routerLink]="['notification']">
-            <mat-icon matListIcon>
+          <mat-list-item>
+            <mat-icon matListIcon [routerLink]="['notification']">
               <fa-icon icon="bell" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine> {{'labels.heading.Notification External Service' | translate}}</h4>
-            <p matLine>{{'labels.text.Notification Service Configuration' | translate}}</p>
+            <h4 matLine [routerLink]="['notification']"> {{'labels.heading.Notification External Service' | translate}}</h4>
+            <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
+            <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
+            <p matLine [routerLink]="['notification']" *ngIf="arrowBooleans[3]">{{'labels.text.Notification Service Configuration' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
diff --git a/src/app/system/external-services/external-services.component.ts b/src/app/system/external-services/external-services.component.ts
index 2110c294a..88e761542 100644
--- a/src/app/system/external-services/external-services.component.ts
+++ b/src/app/system/external-services/external-services.component.ts
@@ -9,10 +9,22 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './external-services.component.html',
 })
 export class ExternalServicesComponent implements OnInit {
+  // Initialize an array of 4 boolean values, all set to false
+  arrowBooleans: boolean[] = new Array(4).fill(false);
 
   constructor() { }
 
   ngOnInit() {
   }
 
+  /**
+   * Popover function
+   * @param arrowNumber - The index of the boolean value to toggle.
+   */
+
+  arrowBooleansToggle(arrowNumber:number) {
+    // Toggle the boolean value at the given index
+    this.arrowBooleans[arrowNumber] = !this.arrowBooleans[arrowNumber];
+  }
+
 }