diff --git a/src/app/fyle/my-reports/my-reports.page.html b/src/app/fyle/my-reports/my-reports.page.html
index bda5d9237f..bef8ea5ec1 100644
--- a/src/app/fyle/my-reports/my-reports.page.html
+++ b/src/app/fyle/my-reports/my-reports.page.html
@@ -72,7 +72,7 @@
     </ng-container>
 
     <ng-template #loading>
-      <app-fy-loading-screen class="my-reports--shimmers"></app-fy-loading-screen>
+      <app-fy-loading-screen [isNewLoaderEnabled]="true" class="my-reports--shimmers"></app-fy-loading-screen>
     </ng-template>
     <div *ngIf="(count$ | async) === 0" class="my-reports--zero-state">
       <app-fy-zero-state
diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html
index 4d1afaac6f..aceca01f89 100644
--- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html
+++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html
@@ -5,8 +5,10 @@
       <div *ngIf="selectedElements?.length === 0" class="report-list--title text-center">Add Expenses</div>
       <div *ngIf="selectedElements?.length > 0" class="add-expenses-to-report--title-container text-center">
         <div class="add-expenses-to-report--title">
-          {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }} -
-          {{ selectedTotalAmount || 0 | humanizeCurrency : homeCurrency }}
+          {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }}
+        </div>
+        <div class="add-expenses-to-report--total-amount">
+          {{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}
         </div>
       </div>
     </ion-title>
diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss
index aa08f632b9..f5d7ea983a 100644
--- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss
+++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss
@@ -7,14 +7,18 @@
   }
 
   &--title-container {
-    color: $black;
+    color: $blue-black;
     font-weight: 500;
-    margin-left: -10%;
   }
 
   &--title {
-    font-size: 20px;
-    line-height: 26px;
+    font-size: 14px;
+    margin-bottom: 4px;
+  }
+
+  &--total-amount {
+    font-size: 12px;
+    font-weight: 400;
   }
 
   &--close {
diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts
index 9a0d19a7cb..48ab48325e 100644
--- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts
+++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts
@@ -8,6 +8,7 @@ import { click, getElementBySelector, getTextContent } from 'src/app/core/dom-he
 import { CurrencyService } from 'src/app/core/services/currency.service';
 import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe';
 import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe';
+import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe';
 import { AddExpensesToReportComponent } from './add-expenses-to-report.component';
 import { expenseData } from 'src/app/core/mock-data/platform/v1/expense.data';
 
@@ -28,7 +29,7 @@ describe('AddExpensesToReportComponent', () => {
     const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
 
     TestBed.configureTestingModule({
-      declarations: [AddExpensesToReportComponent, HumanizeCurrencyPipe],
+      declarations: [AddExpensesToReportComponent, HumanizeCurrencyPipe, ExactCurrencyPipe],
       imports: [IonicModule.forRoot()],
       providers: [
         FyCurrencyPipe,
@@ -194,13 +195,18 @@ describe('AddExpensesToReportComponent', () => {
     expect(getTextContent(getElementBySelector(fixture, '.report-list--title'))).toEqual('Add Expenses');
   });
 
-  it('should show number of expenses and total amount', () => {
+  it('should show number of expenses', () => {
     component.selectedElements = [expense1, expense2];
     fixture.detectChanges();
 
-    expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toEqual(
-      '2 Expenses - $500.00'
-    );
+    expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toEqual('2 Expenses');
+  });
+
+  it('should show total amount', () => {
+    component.selectedElements = [expense1, expense2];
+    fixture.detectChanges();
+
+    expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--total-amount'))).toEqual('$500.00');
   });
 
   it('should zero state message if no unreported expense exist', () => {
diff --git a/src/app/fyle/my-view-report/my-view-report.page.html b/src/app/fyle/my-view-report/my-view-report.page.html
index 9345133e70..a61b6d084f 100644
--- a/src/app/fyle/my-view-report/my-view-report.page.html
+++ b/src/app/fyle/my-view-report/my-view-report.page.html
@@ -29,11 +29,11 @@
     <div class="view-reports--wrapper">
       <div class="view-reports--card">
         <ion-grid>
-          <ion-row>
-            <ion-col size="8">
+          <ion-row class="view-reports--purpose-state">
+            <ion-col size="8.5">
               <div class="view-reports--purpose-amount-block">
                 <div class="view-reports--purpose-amount-block__purpose">
-                  {{report.purpose | ellipsis: 15}}
+                  {{report.purpose | ellipsis: 25}}
                   <ion-icon
                     *ngIf="(canEdit$|async) && report && (report.state === 'DRAFT' || report.state === 'APPROVER_INQUIRY' || report.state === 'APPROVER_PENDING')"
                     [src]="'../../../../assets/svg/edit.svg'"
@@ -44,19 +44,7 @@
                 </div>
               </div>
             </ion-col>
-            <ion-col size="4">
-              <div class="view-reports--amount ion-text-nowrap">
-                <span class="view-reports--purpose-amount-block__currency">{{ reportCurrencySymbol }}</span>
-                <span class="view-reports--purpose-amount-block__amount">
-                  {{ report.amount || 0 | humanizeCurrency: report.currency:true }}
-                </span>
-              </div>
-            </ion-col>
-          </ion-row>
-
-          <ion-row>
-            <ion-col size="5"> </ion-col>
-            <ion-col size="7">
+            <ion-col size="3.5">
               <ng-container *ngIf="(simplifyReportsSettings$ | async) as simplifyReportsSettings">
                 <div class="view-reports--report-state-pill state-pill state-{{report.state | reportState}}">
                   {{report.state | reportState : simplifyReportsSettings.enabled | snakeCaseToSpaceCase}}
@@ -65,6 +53,17 @@
             </ion-col>
           </ion-row>
 
+          <ion-row>
+            <ion-col size="8">
+              <div class="view-reports--amount ion-text-nowrap">
+                <span class="view-reports--purpose-amount-block__currency">{{ reportCurrencySymbol }}</span>
+                <span class="view-reports--purpose-amount-block__amount">
+                  {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }}
+                </span>
+              </div>
+            </ion-col>
+          </ion-row>
+
           <ion-row class="view-reports--date-info-block">
             <ion-col size="8">
               <div>
diff --git a/src/app/fyle/my-view-report/my-view-report.page.scss b/src/app/fyle/my-view-report/my-view-report.page.scss
index 8969457693..97dd17f96a 100644
--- a/src/app/fyle/my-view-report/my-view-report.page.scss
+++ b/src/app/fyle/my-view-report/my-view-report.page.scss
@@ -100,7 +100,13 @@
 
   &--amount {
     color: $white;
-    float: right;
+    font-size: 18px;
+  }
+
+  &--purpose-state {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   &--purpose-amount-block {
@@ -109,14 +115,14 @@
     color: $pure-white;
 
     &__purpose {
-      font-size: 16px;
+      font-size: 14px;
       line-height: 18px;
       font-weight: 500;
-      max-width: 85%;
+      max-width: 100%;
     }
 
     &__amount {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: 500;
     }
   }
diff --git a/src/app/fyle/my-view-report/my-view-report.page.spec.ts b/src/app/fyle/my-view-report/my-view-report.page.spec.ts
index add7003fe6..e15e4d0eab 100644
--- a/src/app/fyle/my-view-report/my-view-report.page.spec.ts
+++ b/src/app/fyle/my-view-report/my-view-report.page.spec.ts
@@ -33,6 +33,7 @@ import { ToastMessageComponent } from 'src/app/shared/components/toast-message/t
 import { EllipsisPipe } from 'src/app/shared/pipes/ellipses.pipe';
 import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe';
 import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe';
+import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe';
 import { ReportState } from 'src/app/shared/pipes/report-state.pipe';
 import { SnakeCaseToSpaceCase } from 'src/app/shared/pipes/snake-case-to-space-case.pipe';
 import { NetworkService } from '../../core/services/network.service';
@@ -124,6 +125,7 @@ describe('MyViewReportPage', () => {
         MyViewReportPage,
         EllipsisPipe,
         HumanizeCurrencyPipe,
+        ExactCurrencyPipe,
         ReportState,
         SnakeCaseToSpaceCase,
         AsyncPipe,
diff --git a/src/app/shared/components/reports-card/reports-card.component.html b/src/app/shared/components/reports-card/reports-card.component.html
index b1dfa73f81..c197cf080f 100644
--- a/src/app/shared/components/reports-card/reports-card.component.html
+++ b/src/app/shared/components/reports-card/reports-card.component.html
@@ -1,6 +1,9 @@
+<!-- Report Date -->
 <div *ngIf="showDate" class="reports-card--date">
   {{ report.created_at | date : 'MMM dd, YYYY' }}
 </div>
+
+<!-- Report cards -->
 <div
   class="reports-card"
   [ngClass]="{ 'reports-card__with-border': !showDate }"
@@ -8,28 +11,39 @@
   *ngIf="!actionOpened"
   matRipple
 >
-  <div class="reports-card--divider" *ngIf="!showDate"></div>
-  <div class="reports-card--main-info">
-    <div class="reports-card--purpose-amount-block">
-      <div class="reports-card--purpose">
-        <span>{{ report.purpose | ellipsis : 40 }}</span>
-      </div>
-      <div class="reports-card--amount-block ion-text-nowrap">
-        <span class="reports-card--currency">{{ reportCurrencySymbol }}</span>
-        <span class="reports-card--amount">
-          {{ report.amount || 0 | humanizeCurrency : report.currency : true }}
-        </span>
+  <div class="reports-card--container">
+    <div class="reports-card--main-info">
+      <!-- Icon -->
+      <mat-icon class="reports-card--list-icon" svgIcon="list"></mat-icon>
+
+      <div class="reports-card--purpose-num-amount-block">
+        <!-- Report name  -->
+        <div class="reports-card--purpose">
+          <span>{{ report.purpose | ellipsis : 40 }}</span>
+        </div>
+
+        <!-- Number of expenses -->
+        <div class="reports-card--no-transactions">
+          <span>{{ report.num_expenses }} </span>
+          <span>{{ report.num_expenses === 1 ? 'Expense' : 'Expenses' }}</span>
+        </div>
+
+        <!-- Total amount -->
+        <div class="reports-card--amount-block ion-text-nowrap">
+          <span class="reports-card--currency">{{ reportCurrencySymbol }}</span>
+          <span class="reports-card--amount">
+            {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }}
+          </span>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="reports-card--secondary-info">
-    <div class="reports-card--secondary-info-block">
-      <div class="reports-card--no-transactions">
-        <span>{{ report.num_expenses }} </span>
-        <span>{{ report.num_expenses === 1 ? 'Expense' : 'Expenses' }}</span>
-      </div>
-      <div class="state-pill state-{{ report.state | reportState }}">
-        {{ report.state | reportState : simplifyReportsEnabled | snakeCaseToSpaceCase }}
+
+    <!-- Report status -->
+    <div class="reports-card--secondary-info">
+      <div class="reports-card--secondary-info-block">
+        <div class="state-pill state-{{ report.state | reportState }}">
+          {{ report.state | reportState : simplifyReportsEnabled | snakeCaseToSpaceCase }}
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/app/shared/components/reports-card/reports-card.component.scss b/src/app/shared/components/reports-card/reports-card.component.scss
index 6e239503e5..722fb24654 100644
--- a/src/app/shared/components/reports-card/reports-card.component.scss
+++ b/src/app/shared/components/reports-card/reports-card.component.scss
@@ -1,26 +1,22 @@
 @import '../../../../theme/colors.scss';
 
 .reports-card {
-  padding: 16px;
+  padding: 12px;
+  margin-bottom: 6px;
   background-color: $pure-white;
 
-  &__with-border {
-    padding-top: 0;
-  }
-
   &__no-top-margin {
     margin-top: 0;
   }
 
   &--divider {
-    border-bottom: 1px solid $grey-lighter;
     margin-bottom: 16px;
   }
 
   &--date {
-    color: $grey-light;
+    color: $black-light;
     font-size: 14px;
-    padding: 16px 0 12px 16px;
+    padding: 24px 14px 16px 14px;
     background-color: $white;
     font-weight: 500;
   }
@@ -31,8 +27,23 @@
     margin-right: 20px;
   }
 
+  &--container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
   &--main-info {
+    display: flex;
+    gap: 8px;
     margin-bottom: 6px;
+    width: 80%;
+  }
+
+  &--list-icon {
+    width: 16px;
+    height: 16px;
+    padding-top: 2px;
   }
 
   &--icon-policy-violation {
@@ -47,9 +58,10 @@
     justify-content: space-between;
   }
 
-  &--purpose-amount-block {
+  &--purpose-num-amount-block {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    width: 100%;
   }
 
   &--currency {
@@ -60,26 +72,31 @@
     margin-right: -2px;
   }
 
+  &--amount-block {
+    margin-top: 10px;
+  }
+
   &--amount {
     color: $black;
-    font-size: 20px;
+    font-size: 16px;
     line-height: 1.3;
-    margin-right: 6px;
     font-weight: 500;
   }
 
   &--purpose {
-    line-height: 23px;
     color: $black-2;
-    font-size: 18px;
+    font-size: 14px;
     font-weight: 500;
-    max-width: 60%;
+    max-width: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &--no-transactions {
-    font-size: 14px;
+    font-size: 12px;
     line-height: 18px;
-    color: $blue-black;
+    color: $dark-grey;
   }
 }
 
diff --git a/src/app/shared/components/reports-card/reports-card.component.spec.ts b/src/app/shared/components/reports-card/reports-card.component.spec.ts
index e580853140..e344c1c636 100644
--- a/src/app/shared/components/reports-card/reports-card.component.spec.ts
+++ b/src/app/shared/components/reports-card/reports-card.component.spec.ts
@@ -5,6 +5,7 @@ import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { EllipsisPipe } from '../../pipes/ellipses.pipe';
 import { HumanizeCurrencyPipe } from '../../pipes/humanize-currency.pipe';
+import { ExactCurrencyPipe } from '../../pipes/exact-currency.pipe';
 import { FyCurrencyPipe } from '../../pipes/fy-currency.pipe';
 import { CurrencyPipe } from '@angular/common';
 import { ReportState } from '../../pipes/report-state.pipe';
@@ -18,7 +19,14 @@ describe('ReportsCardComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ReportsCardComponent, EllipsisPipe, HumanizeCurrencyPipe, ReportState, SnakeCaseToSpaceCase],
+      declarations: [
+        ReportsCardComponent,
+        EllipsisPipe,
+        HumanizeCurrencyPipe,
+        ExactCurrencyPipe,
+        ReportState,
+        SnakeCaseToSpaceCase,
+      ],
       imports: [IonicModule.forRoot(), MatIconTestingModule, MatIconModule],
       providers: [FyCurrencyPipe, CurrencyPipe],
     }).compileComponents();