diff --git a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html
index 8da31cda7a..3c2512f8e2 100644
--- a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html
+++ b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html
@@ -1,5 +1,6 @@
 <ion-header>
   <div class="report-list--header">
+    <mat-icon class="fy-modal-top-bar report-list--header--handle-bar-icon" svgIcon="notch"></mat-icon>
     <ion-grid>
       <ion-row>
         <ion-col size="1" class="report-list--header--row-icon-container">
@@ -9,7 +10,7 @@
             class="report-list--header--row-icon"
           ></ion-icon>
         </ion-col>
-        <ion-col size="10" class="text-center">Add to Report</ion-col>
+        <ion-col size="10" class="report-list--header--title text-center">Add to Report</ion-col>
         <ion-col size="1" class="report-list--header--row-icon-container">
           <ion-icon
             data-testid="addIcon"
@@ -28,20 +29,23 @@
       <div data-testid="report" mat-ripple (click)="addTransactionToReport(report)">
         <div *ngIf="i > 0" class="report-list--divider"></div>
         <ion-grid class="ion-no-padding">
-          <ion-row>
-            <ion-col size="8.5" class="ion-no-padding">
+          <ion-row class="report-list--report-card">
+            <ion-col size="0.75">
+              <mat-icon class="report-list--list-icon" svgIcon="list"></mat-icon>
+            </ion-col>
+            <ion-col size="8.25" class="ion-no-padding">
               <div class="report-list--purpose">{{ report.purpose }}</div>
               <div class="report-list--count">
                 {{ report.num_expenses }} Expense{{ report.num_expenses > 1 ? 's' : '' }}
               </div>
-            </ion-col>
-            <ion-col size="3.5" class="ion-no-padding ion-text-right">
               <div class="report-list--currency-amount-container">
                 <span class="report-list--currency">{{ reportCurrencySymbol }}</span>
-                <span class="report-list--amount">{{
-                  report.amount || 0 | humanizeCurrency : report.currency : true
-                }}</span>
+                <span class="report-list--amount">
+                  {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }}
+                </span>
               </div>
+            </ion-col>
+            <ion-col size="2.75" class="ion-no-padding ion-text-right">
               <div class="ion-text-right">
                 <div class="text-center report-list--state state-pill state-{{ report.state | reportState }}">
                   {{ report.state | reportState : data.isNewReportsFlowEnabled | snakeCaseToSpaceCase | titlecase }}
diff --git a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss
index 54c7dc3ebe..24234fd847 100644
--- a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss
+++ b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss
@@ -3,16 +3,21 @@ $reports_sent_back_color: #da1e28;
 
 .report-list {
   &--header {
-    font-size: 24px;
+    font-size: 18px;
     line-height: 1.3;
     color: $black;
-    margin-bottom: 24px;
     font-weight: 500;
+    border-bottom: 1px solid $grey;
 
     &--row-icon-container {
       display: flex;
       align-items: center;
       justify-content: center;
+      font-size: 20px;
+    }
+
+    &--handle-bar-icon {
+      margin: 0 0 2px 0;
     }
   }
 
@@ -20,21 +25,26 @@ $reports_sent_back_color: #da1e28;
     margin-top: 10px;
   }
 
+  &--list-icon {
+    width: 16px;
+    height: 16px;
+  }
+
   &--currency-amount-container {
-    margin-bottom: 4px;
+    margin: 10px 0 4px 0;
   }
 
   &--currency {
     color: $black-light;
     font-weight: 500;
-    font-size: 14px;
+    font-size: 16px;
     line-height: 1.3;
     margin-right: 2px;
   }
 
   &--amount {
     color: $black;
-    font-size: 20px;
+    font-size: 16px;
     line-height: 1.3;
     font-weight: 500;
   }
@@ -42,19 +52,24 @@ $reports_sent_back_color: #da1e28;
   &--purpose {
     font-weight: 500;
     color: $black;
-    font-size: 18px;
+    font-size: 14px;
     line-height: 1.3;
   }
 
   &--count {
-    color: $blue-black;
+    color: $dark-grey;
+    font-size: 12px;
     line-height: 1.3;
     margin-top: 2px;
   }
 
+  &--report-card {
+    padding-top: 6px;
+  }
+
   &--divider {
     border-bottom: 1px solid $grey-lighter;
-    margin-bottom: 14px;
+    margin-bottom: 6px;
   }
 
   &--state {
diff --git a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.spec.ts b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.spec.ts
index 0ea0386428..ae603ad8a6 100644
--- a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.spec.ts
+++ b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.spec.ts
@@ -15,6 +15,7 @@ import { ReportState } from 'src/app/shared/pipes/report-state.pipe';
 import { SnakeCaseToSpaceCase } from 'src/app/shared/pipes/snake-case-to-space-case.pipe';
 import { AddTxnToReportDialogComponent } from './add-txn-to-report-dialog.component';
 import { expectedReportsSinglePage } from 'src/app/core/mock-data/platform-report.data';
+import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe';
 
 describe('AddTxnToReportDialogComponent', () => {
   let component: AddTxnToReportDialogComponent;
@@ -32,6 +33,7 @@ describe('AddTxnToReportDialogComponent', () => {
         AddTxnToReportDialogComponent,
         FyZeroStateComponent,
         HumanizeCurrencyPipe,
+        ExactCurrencyPipe,
         ReportState,
         SnakeCaseToSpaceCase,
       ],
diff --git a/src/app/fyle/my-expenses/my-expenses.page.html b/src/app/fyle/my-expenses/my-expenses.page.html
index c30ce4e4c5..407b4556d3 100644
--- a/src/app/fyle/my-expenses/my-expenses.page.html
+++ b/src/app/fyle/my-expenses/my-expenses.page.html
@@ -65,12 +65,12 @@
   <ng-container multiselect>
     <ng-container *ngIf="homeCurrency$ | async as homeCurrency">
       <ng-container *ngIf="allExpensesStats$ | async as allExpensesStats">
-        <ion-title class="my-expenses--multiselect-title page-title">
-          {{allExpensesStats?.count}} {{(allExpensesStats?.count > 1) ? 'expenses' : 'expense'}}
+        <div class="my-expenses--multiselect-title page-title">
+          <span>{{allExpensesStats?.count}} {{(allExpensesStats?.count > 1) ? 'expenses' : 'expense'}}</span>
           <span class="my-expenses--multiselect-amount">
-            ({{(allExpensesStats.amount || 0) | humanizeCurrency: homeCurrency }})
+            ({{ { value: allExpensesStats.amount || 0, currencyCode: homeCurrency } | exactCurrency }})
           </span>
-        </ion-title>
+        </div>
       </ng-container>
     </ng-container>
     <ion-buttons mode="md" slot="end">
@@ -121,6 +121,7 @@
 
     <app-fy-loading-screen
       *ngIf="isLoading"
+      [isNewLoaderEnabled]="true"
       [isSelectionModeEnabled]="selectionMode"
       class="my-expenses--shimmers"
     ></app-fy-loading-screen>
@@ -212,6 +213,7 @@
     <ng-container *ngIf="isConnected$|async">
       <ng-container *ngIf="isLoadingDataInInfiniteScroll">
         <app-fy-loading-screen
+          [isNewLoaderEnabled]="true"
           [isSelectionModeEnabled]="selectionMode"
           class="my-expenses--shimmers"
         ></app-fy-loading-screen>
diff --git a/src/app/fyle/my-expenses/my-expenses.page.scss b/src/app/fyle/my-expenses/my-expenses.page.scss
index 66f62f5cca..9df0de97cd 100644
--- a/src/app/fyle/my-expenses/my-expenses.page.scss
+++ b/src/app/fyle/my-expenses/my-expenses.page.scss
@@ -37,12 +37,17 @@
   }
 
   &--multiselect-title {
-    padding-left: 12px;
-    padding-right: 0px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    color: $blue-black;
+    padding: 20px 0px 20px 12px;
+    font-size: 18px;
+    gap: 4px;
   }
 
   &--multiselect-amount {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 400;
   }
 
@@ -294,8 +299,9 @@
   &--footer-conatiner {
     display: flex;
     justify-content: space-around;
-    padding: 14px 36px;
+    padding: 16px;
     position: fixed;
+    gap: 16px;
     bottom: 0;
     width: 100%;
     background-color: $pure-white;
@@ -312,10 +318,13 @@
     height: auto;
     background-color: transparent;
     color: $black;
-    font-size: 16px;
+    font-size: 14px;
     line-height: 1.25;
+    border: 1px solid $grey;
+    border-radius: 4px;
+
     &__disabled {
-      opacity: 0.2;
+      opacity: 0.6;
     }
   }
 
@@ -326,7 +335,6 @@
     font-size: 14px;
     line-height: 1.3;
     border-radius: 4px;
-    width: 100%;
 
     &__disabled {
       opacity: 0.8;
diff --git a/src/app/shared/components/create-new-report-v2/create-new-report.component.html b/src/app/shared/components/create-new-report-v2/create-new-report.component.html
index 2777b65f82..b5b3b0cea0 100644
--- a/src/app/shared/components/create-new-report-v2/create-new-report.component.html
+++ b/src/app/shared/components/create-new-report-v2/create-new-report.component.html
@@ -5,8 +5,10 @@
       <div class="create-new-report--title-container text-center">
         <div class="create-new-report--title">Create new report</div>
         <div class="create-new-report--sub-title">
-          {{ selectedElements.length }} {{ selectedElements.length > 1 ? 'Expenses' : 'Expense' }} -
-          {{ selectedTotalAmount || 0 | humanizeCurrency : homeCurrency }}
+          {{ selectedElements.length }} {{ selectedElements.length > 1 ? 'expenses' : 'expense' }}
+        </div>
+        <div class="create-new-report--amount">
+          {{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}
         </div>
       </div>
     </ion-title>
@@ -40,7 +42,7 @@
       <div class="create-new-report--error-message" *ngIf="showReportNameError">Please enter report name.</div>
     </div>
 
-    <div class="create-new-report--heading">EXPENSES</div>
+    <div class="create-new-report--heading">Expenses</div>
     <div class="create-new-report--select-all-checkbox">
       <mat-checkbox
         class="custom-mat-checkbox create-new-report--checkbox"
diff --git a/src/app/shared/components/create-new-report-v2/create-new-report.component.scss b/src/app/shared/components/create-new-report-v2/create-new-report.component.scss
index 5b8bd86520..073ed9dded 100644
--- a/src/app/shared/components/create-new-report-v2/create-new-report.component.scss
+++ b/src/app/shared/components/create-new-report-v2/create-new-report.component.scss
@@ -4,18 +4,27 @@
   &--title-container {
     margin-left: -15%;
     color: $black;
-    padding: 16px;
+    padding: 12px;
   }
 
   &--title {
-    font-size: 20px;
-    line-height: 1.28;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 27px;
   }
 
   &--sub-title {
     font-size: 14px;
-    line-height: 1.28;
     margin-top: 4px;
+    font-weight: 500;
+    color: $blue-black;
+  }
+
+  &--amount {
+    font-size: 12px;
+    margin-top: 4px;
+    font-weight: 400;
+    color: $blue-black;
   }
 
   &--body {
@@ -24,7 +33,7 @@
   }
 
   &--name {
-    padding: 16px;
+    padding: 20px 12px;
     background-color: $pure-white;
   }
 
@@ -69,16 +78,16 @@
   }
 
   &--heading {
-    color: $grey-light;
+    color: $black-light;
     font-size: 14px;
-    padding: 16px 16px;
+    padding: 12px;
     background-color: $white;
     font-weight: 500;
   }
 
   &--select-all-checkbox {
     font-size: 14px;
-    padding: 16px 16px;
+    padding: 12px;
     background-color: $pure-white;
   }
 
@@ -113,11 +122,12 @@
   &--cta-container {
     display: flex;
     justify-content: space-between;
-    padding: 14px 35.5px;
+    gap: 16px;
+    padding: 16px;
     bottom: 0;
     width: 100%;
     background-color: $pure-white;
-    box-shadow: 0 -2px 12px $pink-shadow;
+    box-shadow: 0 2px 10px 0 rgba(44, 48, 78, 0.1);
     z-index: 999;
   }
 
@@ -129,9 +139,12 @@
     height: auto;
     background-color: transparent;
     color: $black;
-    font-size: 16px;
+    font-size: 14px;
     line-height: 1.25;
-    min-width: 40%;
+    flex: auto;
+    border-radius: 4px;
+    padding: 10px 12px;
+    border: 1px solid $grey;
 
     &__disabled {
       opacity: 0.2;
diff --git a/src/app/shared/components/create-new-report-v2/create-new-report.component.spec.ts b/src/app/shared/components/create-new-report-v2/create-new-report.component.spec.ts
index 10a73f0aa8..da5e02ea6a 100644
--- a/src/app/shared/components/create-new-report-v2/create-new-report.component.spec.ts
+++ b/src/app/shared/components/create-new-report-v2/create-new-report.component.spec.ts
@@ -3,6 +3,7 @@ import { IonicModule } from '@ionic/angular';
 import { MatIconModule } from '@angular/material/icon';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { HumanizeCurrencyPipe } from '../../pipes/humanize-currency.pipe';
+import { ExactCurrencyPipe } from '../../pipes/exact-currency.pipe';
 import { ModalController } from '@ionic/angular';
 import { TrackingService } from 'src/app/core/services/tracking.service';
 import { CurrencyService } from 'src/app/core/services/currency.service';
@@ -41,10 +42,11 @@ describe('CreateNewReportComponent', () => {
       'create',
     ]);
     const humanizeCurrencyPipeSpy = jasmine.createSpyObj('HumanizeCurrency', ['transform']);
+    const exactCurrencyPipeSpy = jasmine.createSpyObj('ExactCurrency', ['transform']);
     const fyCurrencyPipeSpy = jasmine.createSpyObj('FyCurrencyPipe', ['transform']);
 
     TestBed.configureTestingModule({
-      declarations: [CreateNewReportComponent, HumanizeCurrencyPipe, FyCurrencyPipe],
+      declarations: [CreateNewReportComponent, HumanizeCurrencyPipe, ExactCurrencyPipe, FyCurrencyPipe],
       imports: [
         IonicModule.forRoot(),
         MatIconModule,
@@ -59,6 +61,7 @@ describe('CreateNewReportComponent', () => {
         { provide: CurrencyService, useValue: currencyService },
         { provide: ExpenseFieldsService, useValue: expenseFieldsService },
         { provide: HumanizeCurrencyPipe, useValue: humanizeCurrencyPipeSpy },
+        { provide: ExactCurrencyPipe, useValue: exactCurrencyPipeSpy },
         { provide: FyCurrencyPipe, useValue: fyCurrencyPipeSpy },
         { provide: SpenderReportsService, useValue: spenderReportsService },
       ],
diff --git a/src/app/shared/components/expenses-card-v2/expenses-card.component.html b/src/app/shared/components/expenses-card-v2/expenses-card.component.html
index 2ef71768af..d61b3dfbf4 100644
--- a/src/app/shared/components/expenses-card-v2/expenses-card.component.html
+++ b/src/app/shared/components/expenses-card-v2/expenses-card.component.html
@@ -22,13 +22,15 @@
   <div class="expenses-card--divider" *ngIf="!showDt"></div>
   <ng-container>
     <div class="d-flex">
+      <!-- Expense select checkbox -->
       <div *ngIf="isSelectionModeEnabled" class="expenses-card--checkbox-container">
         <mat-checkbox class="custom-mat-checkbox expenses-card--checkbox" [checked]="isSelected" disabled>
         </mat-checkbox>
       </div>
+      <!-- Expense Icon -->
       <ng-container *ngIf="!isReceiptPresent && !attachmentUploadInProgress">
         <div
-          class="expenses-card--receipt-container"
+          class="expenses-card--receipt-container d-flex"
           *ngIf="!isOutboxExpense; else outboxExpenseDisplay"
           (click)="addAttachments($event)"
         >
@@ -51,6 +53,7 @@
         </div>
       </ng-container>
 
+      <!-- Expense Receipt -->
       <div
         class="expenses-card--receipt-image-container expenses-card--with-image"
         [ngStyle]="{
@@ -109,6 +112,10 @@
         </ng-template>
       </ng-template>
 
+      <!-- Dashed Divider -->
+      <div class="expenses-card--vertical-dotted-border"></div>
+
+      <!-- Expense sync loader -->
       <div class="d-flex expenses-card--deatils-block">
         <ng-container *ngIf="isConnected$ | async; else expenseCardDefaultView">
           <ng-container *ngIf="isSycing$ | async; else expenseCardScanning">
@@ -134,6 +141,7 @@
           </ng-container>
         </ng-container>
 
+        <!-- Scanning loader -->
         <ng-template #expenseCardScanning>
           <ng-container *ngIf="!isScanCompleted; else expenseCardDefaultView">
             <ng-container *ngIf="isScanInProgress; else scanFailed">
@@ -165,8 +173,10 @@
           </ng-container>
         </ng-template>
 
+        <!-- Expense details -->
         <ng-template #expenseCardDefaultView>
           <div *ngIf="!isDraft" class="expenses-card--category-vendor-project-container">
+            <!-- Category -->
             <div class="d-flex expenses-card--category-icon-container">
               <div
                 class="expenses-card--category"
@@ -197,6 +207,7 @@
               </div>
             </div>
 
+            <!-- Merchant -->
             <div
               class="expenses-card--vendor"
               [ngClass]="{
@@ -206,53 +217,66 @@
             >
               {{ vendorDetails }}
             </div>
-            <div
-              *ngIf="expenseFields && isProjectEnabled$ | async"
-              class="expenses-card--project"
-              [ngClass]="{ 'expenses-card--project__not-filled': !expense.project?.display_name }"
-            >
-              <div *ngIf="expense?.project?.display_name?.length > 0">
-                <span class="text-capitalize"> {{ expenseFields?.project_id[0]?.field_name }}: </span>
-                {{ expense?.project?.display_name ? expense?.project?.display_name : 'Unspecified' }}
+
+            <!-- Amount & Exchange rate -->
+            <div class="expenses-card--currency-amount-exchange-rate-container">
+              <div class="expenses-card--currency-amount-container">
+                <span class="expenses-card--currency">
+                  {{ (expense.currency | currencySymbol : 'wide') || (homeCurrency | currencySymbol : 'wide') }}
+                </span>
+                <span class="expenses-card--amount">
+                  <ng-container *ngIf="expense.currency">
+                    {{ { value: expense.amount, currencyCode: expense.currency, skipSymbol: true } | exactCurrency }}
+                  </ng-container>
+                  <ng-container *ngIf="!expense.currency">
+                    {{ { value: expense.amount, currencyCode: homeCurrency, skipSymbol: true } | exactCurrency }}
+                  </ng-container>
+                </span>
+                <mat-icon *ngIf="showPaymentModeIcon" class="expenses-card--icon" svgIcon="cash"></mat-icon>
+              </div>
+
+              <div *ngIf="expense.foreign_currency && expense.foreign_amount" class="expenses-card--exchange-rate">
+                ({{ expense.foreign_amount | humanizeCurrency : expense.foreign_currency }} at
+                {{ expense.amount / expense.foreign_amount | currency : expense.currency : 'code' }})
               </div>
             </div>
           </div>
+
+          <!-- Expense with missing info -->
           <div
             *ngIf="isDraft"
             class="expenses-card--category-vendor-project-container expenses-card--category-vendor-project-container__align-vertical-center expenses-card--category-vendor-project-container__error"
           >
-            <div>Expense information</div>
-            <div>missing</div>
-          </div>
-          <div class="expenses-card--default-view-container">
-            <div class="expenses-card--currency-amount-container ion-text-right">
-              <span class="expenses-card--currency">
-                {{ (expense.currency | currencySymbol : 'wide') || (homeCurrency | currencySymbol : 'wide') }}
-              </span>
+            <div>Expense information missing</div>
 
-              <span class="expenses-card--amount">
-                <ng-container *ngIf="expense.currency">
-                  {{ expense.amount | humanizeCurrency : expense.currency : true }}
-                </ng-container>
-                <ng-container *ngIf="!expense.currency">
-                  {{ expense.amount | humanizeCurrency : homeCurrency : true }}
-                </ng-container>
-              </span>
-              <mat-icon *ngIf="showPaymentModeIcon" class="expenses-card--icon" svgIcon="cash"></mat-icon>
-            </div>
+            <!-- Amount & Exchange rate -->
+            <div class="expenses-card--currency-amount-exchange-rate-container">
+              <div class="expenses-card--currency-amount-container">
+                <span class="expenses-card--currency">
+                  {{ (expense.currency | currencySymbol : 'wide') || (homeCurrency | currencySymbol : 'wide') }}
+                </span>
 
-            <div
-              *ngIf="expense.foreign_currency && expense.foreign_amount"
-              class="expenses-card--exchange-rate ion-text-right"
-            >
-              ({{ expense.foreign_amount | humanizeCurrency : expense.foreign_currency }} at
-              {{ expense.amount / expense.foreign_amount | currency : expense.currency : 'code' }})
+                <span class="expenses-card--amount">
+                  <ng-container *ngIf="expense.currency">
+                    {{ expense.amount | humanizeCurrency : expense.currency : true }}
+                  </ng-container>
+                  <ng-container *ngIf="!expense.currency">
+                    {{ expense.amount | humanizeCurrency : homeCurrency : true }}
+                  </ng-container>
+                </span>
+                <mat-icon *ngIf="showPaymentModeIcon" class="expenses-card--icon" svgIcon="cash"></mat-icon>
+              </div>
+
+              <div *ngIf="expense.foreign_currency && expense.foreign_amount" class="expenses-card--exchange-rate">
+                ({{ expense.foreign_amount | humanizeCurrency : expense.foreign_currency }} at
+                {{ expense.amount / expense.foreign_amount | currency : expense.currency : 'code' }})
+              </div>
             </div>
+          </div>
 
-            <div
-              *ngIf="!isFromViewReports"
-              class="expenses-card--state-container state-pill state-{{ expense.state | expenseState }}"
-            >
+          <!-- Expense state (Incomplete / Complete) & Critical policy violations-->
+          <div class="expenses-card--default-view-container">
+            <div class="expenses-card--state-container state-pill state-{{ expense.state | expenseState }}">
               <span>
                 {{ expense.state | expenseState | titlecase }}
               </span>
diff --git a/src/app/shared/components/expenses-card-v2/expenses-card.component.scss b/src/app/shared/components/expenses-card-v2/expenses-card.component.scss
index 532908672d..ee3ae5eb83 100644
--- a/src/app/shared/components/expenses-card-v2/expenses-card.component.scss
+++ b/src/app/shared/components/expenses-card-v2/expenses-card.component.scss
@@ -2,7 +2,7 @@
 
 .expenses-card {
   &--date {
-    color: $grey-light;
+    color: $black-light;
     font-size: 14px;
     padding: 12px 0 12px 12px;
     background-color: $white;
@@ -27,12 +27,19 @@
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding: 4px 0;
+  }
+
+  &--vertical-dotted-border {
+    border-left: 2px dashed $border-tertiary;
+    height: auto;
+    margin: 0 8px;
   }
 
   &--checkbox-container {
     margin-top: auto;
     margin-bottom: auto;
-    margin-right: 16px;
+    margin-right: 8px;
   }
 
   &--checkbox {
@@ -104,35 +111,38 @@
   &--receipt-container {
     background-color: $light-grey;
     border-radius: 8px;
-    height: 74px;
     padding: 20px;
-    min-width: 74px;
+    height: 72px;
+    width: 56px;
+    justify-content: center;
+    align-items: center;
   }
 
   &--receipt-image-container {
     background-color: $light-grey;
     border-radius: 8px;
-    height: 74px;
-    min-width: 75px;
+    height: 72px;
+    width: 56px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
   &--receipt-image {
-    height: 70px;
-    width: 80px;
+    height: auto;
+    max-width: 56px;
   }
 
   &--with-image {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
+    width: 56px;
   }
 
   &--receipt-icon {
-    height: 35px;
-    width: 35px;
+    height: 20px;
+    width: 20px;
     color: $black-light;
 
     &__pdf {
@@ -146,20 +156,21 @@
   }
 
   &--receipt-thumbnail {
-    height: 74px;
+    height: 72px;
     margin-left: auto;
     margin-right: auto;
   }
 
   &--category-vendor-project-container {
-    padding: 3px 20px 4px 11px;
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    display: flex;
+    flex-direction: column;
+
     &__align-vertical-center {
       display: flex;
       flex-direction: column;
-      justify-content: center;
     }
 
     &__error {
@@ -171,27 +182,28 @@
   }
 
   &--category-icon-container {
-    max-width: 170px;
     width: 100%;
   }
 
   &--category {
     color: $black;
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 500;
     line-height: 1.3;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: 126px;
+    max-width: 80%;
+    padding-right: 4px;
   }
 
   &--icons {
     display: flex;
     align-items: center;
+    padding-right: 4px;
+    gap: 4px;
 
     &__policy-violated-icon {
-      margin-left: 4px;
       width: 16px;
       height: 16px;
       color: $red;
@@ -199,7 +211,6 @@
     }
 
     &__split-icon {
-      margin-left: 4px;
       width: 16px;
       height: 16px;
       color: $brand-primary-light;
@@ -208,7 +219,6 @@
     &__duplicate-icon {
       width: 16px;
       height: 16px;
-      margin-left: 4px;
       color: $dark-yellow;
     }
   }
@@ -222,8 +232,8 @@
   }
 
   &--vendor {
-    color: $blue-black;
-    font-size: 14px;
+    color: $dark-grey;
+    font-size: 12px;
     line-height: 1.2;
     margin-top: 2px;
     white-space: nowrap;
@@ -254,13 +264,16 @@
     flex-direction: column;
   }
 
-  &--currency-amount-container {
-    width: 100%;
-    white-space: nowrap;
+  &--currency-amount-exchange-rate-container {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 10px;
+    flex-wrap: wrap;
   }
 
   &--currency {
-    color: $black-light;
+    color: $black;
     font-weight: 500;
     font-size: 16px;
     line-height: 1.25;
@@ -269,7 +282,7 @@
 
   &--amount {
     color: $black;
-    font-size: 20px;
+    font-size: 16px;
     line-height: 1.3;
     margin-right: 6px;
     font-weight: 500;
@@ -304,7 +317,6 @@
   }
 
   &--state-container {
-    margin-top: 4px;
     align-self: flex-end;
 
     &__center {
diff --git a/src/assets/svg/notch.svg b/src/assets/svg/notch.svg
index cb688eb262..83b64c0fe1 100755
--- a/src/assets/svg/notch.svg
+++ b/src/assets/svg/notch.svg
@@ -1,3 +1,3 @@
 <svg width="53" height="4" viewBox="0 0 53 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="53" height="4" rx="2" fill="#CCCDD7"/>
-</svg>
+    <rect width="53" height="4" rx="2" fill="#DFDFE2" />
+</svg>
\ No newline at end of file
diff --git a/src/global.scss b/src/global.scss
index 12ce0ea772..1d756ac10e 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -87,7 +87,7 @@ ion-popover.error-popover {
 }
 
 .mat-bottom-sheet-1 {
-  padding: 24px 16px !important;
+  padding: 16px 12px 12px 12px !important;
   border-radius: 16px 16px 0px 0px !important;
 }
 
@@ -528,9 +528,9 @@ mat-checkbox {
   }
 
   .mat-checkbox-label {
-    margin-left: 10px !important;
     font-size: 14px;
-    color: $black;
+    font-weight: 400;
+    color: $blue-black;
   }
 }
 
@@ -1389,13 +1389,14 @@ ion-toggle.toggle-checked::before {
   border: 1px solid $brand-primary;
   border-radius: 14px;
   color: $brand-primary;
-  font-size: 12px;
+  font-size: 10px;
   font-weight: 500;
   display: inline-block;
-  line-height: 1;
-  padding: 5px 12px;
+  line-height: 18px;
+  padding: 2px 10px;
   text-align: center;
   text-transform: uppercase;
+  white-space: nowrap;
   height: max-content;
 
   //get state keys for generating state class