diff --git a/src/app/core/mock-data/file-object.data.ts b/src/app/core/mock-data/file-object.data.ts
index 8655f0fd8f..b6f37c79d9 100644
--- a/src/app/core/mock-data/file-object.data.ts
+++ b/src/app/core/mock-data/file-object.data.ts
@@ -78,10 +78,9 @@ export const fileObjectData5: FileObject = {
   purpose: '',
 };
 
-export const thumbnailUrlMockData: FileObject[] = [
+export const fileUrlMockData: FileObject[] = [
   {
     id: 'fiwJ0nQTBpYH',
-    purpose: 'THUMBNAILx200x200',
     url: 'mock-url-1',
   },
 ];
diff --git a/src/app/core/services/file.service.spec.ts b/src/app/core/services/file.service.spec.ts
index 15cf211c74..11d50a46de 100644
--- a/src/app/core/services/file.service.spec.ts
+++ b/src/app/core/services/file.service.spec.ts
@@ -1,12 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { of } from 'rxjs';
-import {
-  fileObjectAdv,
-  fileObjectAdv1,
-  fileObjectData,
-  fileObjectData4,
-  thumbnailUrlMockData,
-} from '../mock-data/file-object.data';
+import { fileObjectAdv, fileObjectAdv1, fileObjectData, fileObjectData4 } from '../mock-data/file-object.data';
 import { ApiService } from './api.service';
 import { DateService } from './date.service';
 
@@ -42,39 +36,6 @@ describe('FileService', () => {
     expect(fileService).toBeTruthy();
   });
 
-  it('downloadThumbnailUrl(): should return the file obj with thumbnail url', (done) => {
-    apiService.post.and.returnValue(of(thumbnailUrlMockData));
-
-    const fileId = 'fiwJ0nQTBpYH';
-    fileService.downloadThumbnailUrl(fileId).subscribe((res) => {
-      expect(res).toEqual(thumbnailUrlMockData);
-      expect(apiService.post).toHaveBeenCalledOnceWith('/files/download_urls', [
-        {
-          id: fileId,
-          purpose: 'THUMBNAILx200x200',
-        },
-      ]);
-      done();
-    });
-  });
-
-  it('getFilesWithThumbnail(): should return files with thumbnail for the given txn ID', (done) => {
-    apiService.get.and.returnValue(of([fileObjectData]));
-
-    const txnId = 'txdzGV1TZEg3';
-    fileService.getFilesWithThumbnail(txnId).subscribe((res) => {
-      expect(res).toEqual([fileObjectData]);
-      expect(apiService.get).toHaveBeenCalledOnceWith('/files', {
-        params: {
-          transaction_id: txnId,
-          skip_html: 'true',
-          purpose: 'THUMBNAILx200x200',
-        },
-      });
-      done();
-    });
-  });
-
   it('base64Download(): should return the base64 encoded file content', (done) => {
     apiService.get.and.returnValue(of({ content: 'base64encodedcontent' }));
 
diff --git a/src/app/core/services/file.service.ts b/src/app/core/services/file.service.ts
index 937437af53..225c8c7d80 100644
--- a/src/app/core/services/file.service.ts
+++ b/src/app/core/services/file.service.ts
@@ -12,34 +12,12 @@ import { DateService } from './date.service';
   providedIn: 'root',
 })
 export class FileService {
-  constructor(
-    private apiService: ApiService,
-    private dateService: DateService,
-  ) {}
+  constructor(private apiService: ApiService, private dateService: DateService) {}
 
   downloadUrl(fileId: string): Observable<string> {
     return this.apiService.post<File>('/files/' + fileId + '/download_url').pipe(map((res) => res.url));
   }
 
-  downloadThumbnailUrl(fileId: string): Observable<FileObject[]> {
-    return this.apiService.post('/files/download_urls', [
-      {
-        id: fileId,
-        purpose: 'THUMBNAILx200x200',
-      },
-    ]);
-  }
-
-  getFilesWithThumbnail(txnId: string): Observable<FileObject[]> {
-    return this.apiService.get('/files', {
-      params: {
-        transaction_id: txnId,
-        skip_html: 'true',
-        purpose: 'THUMBNAILx200x200',
-      },
-    });
-  }
-
   base64Download(fileId: string): Observable<{ content: string }> {
     return this.apiService.get('/files/' + fileId + '/download_b64');
   }
@@ -51,7 +29,7 @@ export class FileService {
           advance_request_id: advanceRequestId,
           skip_html: 'true',
         },
-      }),
+      })
     ).pipe(
       map((files) => {
         files.map((file) => {
@@ -59,7 +37,7 @@ export class FileService {
           this.setFileType(file as FileObject);
         });
         return files as unknown as FileObject[];
-      }),
+      })
     );
   }
 
diff --git a/src/app/fyle/split-expense/split-expense.page.spec.ts b/src/app/fyle/split-expense/split-expense.page.spec.ts
index 492730b5f3..e7ac7feaef 100644
--- a/src/app/fyle/split-expense/split-expense.page.spec.ts
+++ b/src/app/fyle/split-expense/split-expense.page.spec.ts
@@ -84,7 +84,7 @@ import {
   splitExpFile2,
   splitExpFile3,
   splitExpFileObj,
-  thumbnailUrlMockData,
+  fileUrlMockData,
   fileObjectData1,
 } from 'src/app/core/mock-data/file-object.data';
 import {
@@ -632,7 +632,7 @@ describe('SplitExpensePage', () => {
 
     it('should return the attached files when the transaction id is specified', (done) => {
       spyOn(component, 'getAttachedFiles').and.returnValue(of(fileObject8));
-      const FileObject9: FileObject[] = thumbnailUrlMockData.map((fileObject) => ({
+      const FileObject9: FileObject[] = fileUrlMockData.map((fileObject) => ({
         ...fileObject,
         id: 'fizBwnXhyZTp',
       }));
diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.html b/src/app/shared/components/expense-card-lite/expense-card-lite.component.html
index ae9a29ff24..afce935eb9 100644
--- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.html
+++ b/src/app/shared/components/expense-card-lite/expense-card-lite.component.html
@@ -1,6 +1,6 @@
 <div class="expenses-card--body">
   <div class="d-flex">
-    <ng-container *ngIf="!receiptThumbnail">
+    <ng-container *ngIf="!isReceiptPresent">
       <div class="expenses-card--receipt-container">
         <ion-icon
           class="expenses-card--receipt-icon expenses-card--receipt-icon__pdf"
@@ -9,13 +9,9 @@
       </div>
     </ng-container>
 
-    <div
-      class="expenses-card--receipt-thumbnail-container expenses-card--with-image"
-      [ngStyle]="{
-        'background-image': 'url(' + receiptThumbnail + ')'
-      }"
-      *ngIf="receiptThumbnail"
-    ></div>
+    <div *ngIf="isReceiptPresent" class="expenses-card--receipt-image-container expenses-card--with-image">
+      <img class="expenses-card--receipt-image" [src]="'../../../../assets/images/pdf-receipt-placeholder.png'" />
+    </div>
     <div class="d-flex expenses-card--deatils-block">
       <div class="expenses-card--category-vendor-project-container">
         <div class="d-flex expenses-card--category-icon-container">
@@ -29,7 +25,7 @@
         </div>
 
         <div>
-          {{ expense.txn_dt | date: 'MMM dd, YYYY' }}
+          {{ expense.txn_dt | date : 'MMM dd, YYYY' }}
         </div>
       </div>
 
diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss b/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss
index 6a59195d44..75507b99af 100644
--- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss
+++ b/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss
@@ -28,7 +28,7 @@
     padding: 15px;
   }
 
-  &--receipt-thumbnail-container {
+  &--receipt-image-container {
     background-color: $light-grey;
     border-radius: 8px;
     height: 64px;
@@ -38,6 +38,11 @@
     align-items: center;
   }
 
+  &--receipt-image {
+    height: 60px;
+    width: 80px;
+  }
+
   &--with-image {
     background-size: cover;
     background-repeat: no-repeat;
diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts b/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts
index 009a8fbe0f..bcb7a45cd2 100644
--- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts
+++ b/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts
@@ -1,22 +1,13 @@
-import { ComponentFixture, TestBed, async, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FileService } from 'src/app/core/services/file.service';
 import { ExpenseCardLiteComponent } from './expense-card-lite.component';
 import { IonicModule } from '@ionic/angular';
 import { MatIconModule } from '@angular/material/icon';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { CurrencySymbolPipe } from '../../pipes/currency-symbol.pipe';
-import { fileObjectData1 } from 'src/app/core/mock-data/file-object.data';
-import { of } from 'rxjs';
 import { getElementBySelector, getTextContent } from 'src/app/core/dom-helpers';
-import { FileObject } from 'src/app/core/models/file-obj.model';
-
-const thumbnailUrlMockData1: FileObject[] = [
-  {
-    id: 'fiwJ0nQTBpYH',
-    purpose: 'THUMBNAILx200x200',
-    url: '/assets/images/add-to-list.png',
-  },
-];
+import { of } from 'rxjs';
+import { fileObjectData } from 'src/app/core/mock-data/file-object.data';
 
 describe('ExpenseCardLiteComponent', () => {
   let expenseCardLiteComponent: ExpenseCardLiteComponent;
@@ -24,9 +15,7 @@ describe('ExpenseCardLiteComponent', () => {
   let fileService: jasmine.SpyObj<FileService>;
 
   beforeEach(waitForAsync(() => {
-    const fileServiceSpy = jasmine.createSpyObj('FileService', ['getFilesWithThumbnail', 'downloadThumbnailUrl']);
-    fileServiceSpy.getFilesWithThumbnail.and.returnValue(of(fileObjectData1));
-    fileServiceSpy.downloadThumbnailUrl.and.returnValue(of(thumbnailUrlMockData1));
+    const fileServiceSpy = jasmine.createSpyObj('FileService', ['findByTransactionId']);
 
     TestBed.configureTestingModule({
       declarations: [ExpenseCardLiteComponent, CurrencySymbolPipe],
@@ -42,58 +31,48 @@ describe('ExpenseCardLiteComponent', () => {
 
     fixture = TestBed.createComponent(ExpenseCardLiteComponent);
     expenseCardLiteComponent = fixture.componentInstance;
-    const expense = { id: 'txn1234' };
-    expenseCardLiteComponent.expense = expense;
-    fixture.detectChanges();
   }));
 
   it('should create', () => {
     expect(expenseCardLiteComponent).toBeTruthy();
   });
 
-  it('should call getReceipt on initialization', () => {
-    spyOn(expenseCardLiteComponent, 'getReceipt');
-    expenseCardLiteComponent.ngOnInit();
-    expect(expenseCardLiteComponent.getReceipt).toHaveBeenCalledTimes(1);
-  });
+  const initialSetup = (fileData) => {
+    fileService.findByTransactionId.and.returnValue(of(fileData));
+    expenseCardLiteComponent.expense = { id: 'txn1234' };
+    fixture.detectChanges();
+  };
 
   describe('getReceipt():', () => {
-    it('should set receiptThumbnail if there is at least one thumbnail file', () => {
-      fixture.detectChanges();
-      expect(fileService.getFilesWithThumbnail).toHaveBeenCalledOnceWith(expenseCardLiteComponent.expense.id);
-      expect(fileService.downloadThumbnailUrl).toHaveBeenCalledOnceWith(fileObjectData1[0].id);
-      expect(expenseCardLiteComponent.receiptThumbnail).toEqual(thumbnailUrlMockData1[0].url);
+    it('should set isReceiptPresent to true when files are present', () => {
+      initialSetup([fileObjectData]);
+      expect(fileService.findByTransactionId).toHaveBeenCalledWith('txn1234');
+      expect(expenseCardLiteComponent.isReceiptPresent).toBeTruthy();
     });
 
-    it('should return an empty array if there are no thumbnail files', () => {
-      fileService.getFilesWithThumbnail.and.returnValue(of([]));
-      fixture.detectChanges();
-      expenseCardLiteComponent.getReceipt();
-      expect(fileService.getFilesWithThumbnail).toHaveBeenCalledWith(expenseCardLiteComponent.expense.id);
-      expect(expenseCardLiteComponent.receiptThumbnail).toEqual(thumbnailUrlMockData1[0].url);
+    it('should set isReceiptPresent to false when no files are present', () => {
+      initialSetup([]);
+      expect(fileService.findByTransactionId).toHaveBeenCalledWith('txn1234');
+      expect(expenseCardLiteComponent.isReceiptPresent).toBeFalsy();
     });
   });
 
-  it('should display the thumbnail when available', () => {
-    fixture.detectChanges();
+  it('should display the receipt when available', () => {
+    initialSetup([fileObjectData]);
     const element = fixture.nativeElement;
-    const thumbnailContainer = element.querySelector('.expenses-card--receipt-thumbnail-container');
-    const backgroundImage = thumbnailContainer.style.backgroundImage;
-    expect(thumbnailContainer).toBeTruthy();
-    expect(backgroundImage).toContain(expenseCardLiteComponent.receiptThumbnail);
+    const receiptContainer = element.querySelector('.expenses-card--receipt-image-container');
+    expect(receiptContainer).toBeTruthy();
   });
 
-  it('should display a default icon when no thumbnail available', () => {
-    expenseCardLiteComponent.receiptThumbnail = null;
-    fixture.detectChanges();
-
+  it('should display a default icon when no receipt available', () => {
+    initialSetup([]);
     const element = fixture.nativeElement;
     const icon = element.querySelector('.expenses-card--receipt-icon');
     expect(icon).toBeTruthy();
   });
 
   it('should display "Unspecified" if purpose is not present', () => {
-    fixture.detectChanges();
+    initialSetup([]);
     const purpose = getElementBySelector(fixture, '.expenses-card--category');
     expect(getTextContent(purpose)).toEqual('Unspecified');
   });
diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.ts b/src/app/shared/components/expense-card-lite/expense-card-lite.component.ts
index d24e3763e8..22500e4ec2 100644
--- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.ts
+++ b/src/app/shared/components/expense-card-lite/expense-card-lite.component.ts
@@ -1,6 +1,4 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { noop } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
 import { FileObject } from 'src/app/core/models/file-obj.model';
 import { FileService } from 'src/app/core/services/file.service';
 
@@ -12,7 +10,7 @@ import { FileService } from 'src/app/core/services/file.service';
 export class ExpenseCardLiteComponent implements OnInit {
   @Input() expense;
 
-  receiptThumbnail: string;
+  isReceiptPresent: boolean;
 
   constructor(private fileService: FileService) {}
 
@@ -21,19 +19,8 @@ export class ExpenseCardLiteComponent implements OnInit {
   }
 
   getReceipt() {
-    this.fileService
-      .getFilesWithThumbnail(this.expense.id)
-      .pipe(
-        switchMap((ThumbFiles: FileObject[]) => {
-          if (ThumbFiles.length > 0) {
-            return this.fileService.downloadThumbnailUrl(ThumbFiles[0].id);
-          } else {
-            return [];
-          }
-        })
-      )
-      .subscribe((downloadUrl: FileObject[]) => {
-        this.receiptThumbnail = downloadUrl[0].url;
-      });
+    this.fileService.findByTransactionId(this.expense.id).subscribe((files: FileObject[]) => {
+      this.isReceiptPresent = files.length > 0;
+    });
   }
 }
diff --git a/src/app/shared/components/expenses-card/expenses-card.component.html b/src/app/shared/components/expenses-card/expenses-card.component.html
index 99c560f7f0..28bc75e0b3 100644
--- a/src/app/shared/components/expenses-card/expenses-card.component.html
+++ b/src/app/shared/components/expenses-card/expenses-card.component.html
@@ -26,7 +26,7 @@
         <mat-checkbox class="custom-mat-checkbox expenses-card--checkbox" [checked]="isSelected" disabled>
         </mat-checkbox>
       </div>
-      <ng-container *ngIf="!receiptThumbnail && !attachmentUploadInProgress">
+      <ng-container *ngIf="!isReceiptPresent && !attachmentUploadInProgress">
         <div
           class="expenses-card--receipt-container"
           *ngIf="!isOutboxExpense; else outboxExpenseDisplay"
@@ -49,12 +49,13 @@
       </ng-container>
 
       <div
-        class="expenses-card--receipt-thumbnail-container expenses-card--with-image"
+        class="expenses-card--receipt-image-container expenses-card--with-image"
         [ngStyle]="{
-          'background-image': (isScanInProgress ? imageTransperencyOverlay : '') + 'url(' + receiptThumbnail + ')'
+          'background-image': isScanInProgress ? imageTransperencyOverlay : ''
         }"
-        *ngIf="receiptThumbnail"
+        *ngIf="isReceiptPresent"
       >
+        <img class="expenses-card--receipt-image" [src]="'../../../../assets/images/pdf-receipt-placeholder.png'" />
         <ion-icon *ngIf="isScanInProgress" class="expenses-card--scanning-icon" src="assets/svg/fy-scan.svg"></ion-icon>
       </div>
 
@@ -62,7 +63,9 @@
         class="expenses-card--receipt-container expenses-card--with-image"
         *ngIf="attachmentUploadInProgress"
         [ngStyle]="{
-          'background-image': inlineReceiptDataUrl && imageTransperencyOverlay + 'url(' + inlineReceiptDataUrl + ')'
+          'background-image':
+            inlineReceiptDataUrl &&
+            imageTransperencyOverlay + 'url(' + '../../../../assets/images/pdf-receipt-placeholder.png' + ')'
         }"
       >
         <div class="expenses-card--spinner-placeholder">
@@ -77,7 +80,7 @@
             [ngStyle]="{
               'background-image':
                 expense.tx_dataUrls?.length > 0 &&
-                imageTransperencyOverlay + 'url(' + this.expense.tx_dataUrls[0].thumbnail + ')'
+                imageTransperencyOverlay + 'url(' + '../../../../assets/images/pdf-receipt-placeholder.png' + ')'
             }"
           >
             <div class="expenses-card--spinner-placeholder">
@@ -91,7 +94,7 @@
             [ngStyle]="{
               'background-image':
                 expense.tx_dataUrls?.length > 0 &&
-                imageTransperencyOverlay + 'url(' + this.expense.tx_dataUrls[0].thumbnail + ')'
+                imageTransperencyOverlay + 'url(' + '../../../../assets/images/pdf-receipt-placeholder.png' + ')'
             }"
           >
             <ion-icon
diff --git a/src/app/shared/components/expenses-card/expenses-card.component.scss b/src/app/shared/components/expenses-card/expenses-card.component.scss
index 27ba981d0d..43875b45d9 100644
--- a/src/app/shared/components/expenses-card/expenses-card.component.scss
+++ b/src/app/shared/components/expenses-card/expenses-card.component.scss
@@ -109,7 +109,7 @@
     min-width: 74px;
   }
 
-  &--receipt-thumbnail-container {
+  &--receipt-image-container {
     background-color: $light-grey;
     border-radius: 8px;
     height: 74px;
@@ -119,6 +119,11 @@
     align-items: center;
   }
 
+  &--receipt-image {
+    height: 70px;
+    width: 80px;
+  }
+
   &--with-image {
     background-size: cover;
     background-repeat: no-repeat;
diff --git a/src/app/shared/components/expenses-card/expenses-card.component.spec.ts b/src/app/shared/components/expenses-card/expenses-card.component.spec.ts
index 3bd0d5bc8f..ea3b2f686b 100644
--- a/src/app/shared/components/expenses-card/expenses-card.component.spec.ts
+++ b/src/app/shared/components/expenses-card/expenses-card.component.spec.ts
@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed, fakeAsync, flush, tick, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 import { TransactionService } from 'src/app/core/services/transaction.service';
 import { FileService } from 'src/app/core/services/file.service';
@@ -20,22 +20,16 @@ import { FormsModule } from '@angular/forms';
 import { ExpenseState } from '../../pipes/expense-state.pipe';
 import { orgSettingsGetData } from 'src/app/core/test-data/org-settings.service.spec.data';
 import { of, take } from 'rxjs';
-import { expenseData1, expenseList, expenseList2 } from 'src/app/core/mock-data/expense.data';
+import { expenseData1 } from 'src/app/core/mock-data/expense.data';
 import { apiExpenseRes } from 'src/app/core/mock-data/expense.data';
 import { expenseFieldsMapResponse2 } from 'src/app/core/mock-data/expense-fields-map.data';
 import { orgData1 } from 'src/app/core/mock-data/org.data';
 import { DateFormatPipe } from 'src/app/shared/pipes/date-format.pipe';
 import { FileObject } from 'src/app/core/models/file-obj.model';
-import {
-  fileObjectAdv,
-  fileObjectAdv1,
-  fileObjectData,
-  fileObjectData1,
-} from 'src/app/core/mock-data/file-object.data';
+import { fileObjectAdv, fileObjectData } from 'src/app/core/mock-data/file-object.data';
 import { unflattenedTxnData } from 'src/app/core/mock-data/unflattened-txn.data';
 import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe';
-import { fileData1 } from 'src/app/core/mock-data/file.data';
-import { cloneDeep, stubFalse } from 'lodash';
+import { cloneDeep } from 'lodash';
 import * as dayjs from 'dayjs';
 import { orgUserSettingsData } from 'src/app/core/mock-data/org-user-settings.data';
 import { CameraOptionsPopupComponent } from 'src/app/fyle/add-edit-expense/camera-options-popup/camera-options-popup.component';
@@ -43,14 +37,6 @@ import { CaptureReceiptComponent } from 'src/app/shared/components/capture-recei
 import { ToastMessageComponent } from '../toast-message/toast-message.component';
 import { DebugElement, EventEmitter } from '@angular/core';
 
-const thumbnailUrlMockData1: FileObject[] = [
-  {
-    id: 'fiwJ0nQTBpYH',
-    purpose: 'THUMBNAILx200x200',
-    url: '/assets/images/add-to-list.png',
-  },
-];
-
 describe('ExpensesCardComponent', () => {
   let component: ExpensesCardComponent;
   let fixture: ComponentFixture<ExpensesCardComponent>;
@@ -79,8 +65,6 @@ describe('ExpensesCardComponent', () => {
     ]);
     const orgUserSettingsServiceSpy = jasmine.createSpyObj('OrgUserSettingsService', ['get']);
     const fileServiceSpy = jasmine.createSpyObj('FileService', [
-      'getFilesWithThumbnail',
-      'downloadThumbnailUrl',
       'downloadUrl',
       'getReceiptDetails',
       'readFile',
@@ -89,8 +73,6 @@ describe('ExpensesCardComponent', () => {
       'post',
     ]);
 
-    fileServiceSpy.getFilesWithThumbnail.and.returnValue(of(fileObjectData1));
-    fileServiceSpy.downloadThumbnailUrl.and.returnValue(of(thumbnailUrlMockData1));
     fileServiceSpy.downloadUrl.and.returnValue(of('/assets/images/add-to-list.png'));
     const popoverControllerSpy = jasmine.createSpyObj('PopoverController', ['create']);
     const networkServiceSpy = jasmine.createSpyObj('NetworkService', ['connectivityWatcher', 'isOnline']);
@@ -174,7 +156,6 @@ describe('ExpensesCardComponent', () => {
     component.isConnected$ = of(true);
     component.isSycing$ = of(true);
     component.isPerDiem = true;
-    component.receiptThumbnail = 'assets/svg/pdf.svg';
     component.isSelectionModeEnabled = false;
     component.etxnIndex = 1;
     componentElement = fixture.debugElement;
@@ -224,69 +205,6 @@ describe('ExpensesCardComponent', () => {
   });
 
   describe('getReceipt', () => {
-    it('should get the receipts when the file ids are present and the length of the thumbnail files array is greater that 0', fakeAsync(() => {
-      fileService.getFilesWithThumbnail.and.returnValue(of([fileObjectData]));
-      fileService.downloadThumbnailUrl.and.returnValue(of(thumbnailUrlMockData1));
-      component.expense = {
-        ...expenseData1,
-        tx_file_ids: ['fiGLwwPtYD8X'],
-      };
-      component.getReceipt();
-      fixture.detectChanges();
-      tick(500);
-      expect(component.receiptThumbnail).toEqual(thumbnailUrlMockData1[0].url);
-      expect(fileService.getFilesWithThumbnail).toHaveBeenCalledOnceWith(component.expense.tx_id);
-      expect(fileService.downloadThumbnailUrl).toHaveBeenCalledOnceWith('fiHPZUiichAS');
-    }));
-
-    it('should get the receipts when the file ids are present and there are no thumbnail files and set the icon to fy-expense when type is not pdf', fakeAsync(() => {
-      const mockDownloadUrl = {
-        url: 'mock-url',
-      };
-      fileService.getFilesWithThumbnail.and.returnValue(of([]));
-      fileService.downloadUrl.and.returnValue(of(mockDownloadUrl.url));
-      fileService.getReceiptDetails.and.returnValue('mock-url');
-
-      component.expense = {
-        ...expenseData1,
-        tx_file_ids: ['fiGLwwPtYD8X'],
-      };
-      component.getReceipt();
-      fixture.detectChanges();
-      tick(500);
-      expect(fileService.getFilesWithThumbnail).toHaveBeenCalledOnceWith(component.expense.tx_id);
-      expect(fileService.downloadUrl).toHaveBeenCalledOnceWith('fiGLwwPtYD8X');
-      expect(fileService.getReceiptDetails).toHaveBeenCalledOnceWith('mock-url');
-      expect(component.receiptIcon).toEqual('assets/svg/fy-expense.svg');
-    }));
-
-    it('should get the receipts when the file ids are present and there are no thumbnail files and set the icon to fy-pdf when type is pdf', fakeAsync(() => {
-      const mockDownloadUrl = {
-        url: 'mock-url',
-      };
-
-      const thumbnailUrlMockRes = {
-        ...thumbnailUrlMockData1,
-        url: '/assets/mock-url.pdf',
-      };
-      fileService.getFilesWithThumbnail.and.returnValue(of([]));
-      fileService.downloadThumbnailUrl.and.returnValue(of(thumbnailUrlMockRes));
-      fileService.downloadUrl.and.returnValue(of(mockDownloadUrl.url));
-      fileService.getReceiptDetails.and.returnValue('pdf');
-
-      component.expense = {
-        ...expenseData1,
-        tx_file_ids: ['fiGLwwPtYD8Y'],
-      };
-      component.getReceipt();
-      fixture.detectChanges();
-      tick(500);
-      expect(fileService.getFilesWithThumbnail).toHaveBeenCalledOnceWith(component.expense.tx_id);
-      expect(fileService.downloadUrl).toHaveBeenCalledOnceWith('fiGLwwPtYD8Y');
-      expect(fileService.getReceiptDetails).toHaveBeenCalledOnceWith('mock-url');
-      expect(component.receiptIcon).toEqual('assets/svg/pdf.svg');
-    }));
-
     it('should set the receipt icon to fy-mileage when the fyle catergory is mileage', () => {
       component.expense = {
         ...expenseData1,
@@ -742,7 +660,6 @@ describe('ExpensesCardComponent', () => {
       fileService.post.and.returnValue(of(fileObjectData));
 
       spyOn(component, 'matchReceiptWithEtxn').and.callThrough();
-      spyOn(component, 'setThumbnail').and.callThrough();
 
       component.attachReceipt(receiptDetailsaRes);
       tick(500);
@@ -751,7 +668,6 @@ describe('ExpensesCardComponent', () => {
       expect(transactionsOutboxService.fileUpload).toHaveBeenCalledOnceWith(dataUrl, attachmentType);
       expect(component.matchReceiptWithEtxn).toHaveBeenCalledOnceWith(fileObj);
       expect(fileService.post).toHaveBeenCalledOnceWith(fileObj);
-      expect(component.setThumbnail).toHaveBeenCalledOnceWith(fileObjectData.id, attachmentType);
       expect(component.attachmentUploadInProgress).toBeFalse();
       tick(500);
     }));
@@ -896,32 +812,6 @@ describe('ExpensesCardComponent', () => {
     }));
   });
 
-  describe('setThumbnail():', () => {
-    it('should set the thumbnail', fakeAsync(() => {
-      const fileObjid = fileObjectData.id;
-      const attachmentType = 'pdf';
-      fileService.downloadUrl.and.returnValue(of('mock-url'));
-      component.setThumbnail(fileObjid, attachmentType);
-      fixture.detectChanges();
-      tick(500);
-      expect(component.receiptIcon).toEqual('assets/svg/pdf.svg');
-      expect(fileService.downloadUrl).toHaveBeenCalledOnceWith(fileObjid);
-    }));
-
-    it('should set the receipt thumbnail to download url when the attatchment tyoe is not pdf', fakeAsync(() => {
-      component.receiptIcon = undefined;
-      const fileObjid = fileObjectData.id;
-      const attachmentType = 'png';
-      fileService.downloadUrl.and.returnValue(of('/assets/images/add-to-list.png'));
-      component.setThumbnail(fileObjid, attachmentType);
-      fixture.detectChanges();
-      tick(500);
-      expect(component.receiptThumbnail).toEqual(thumbnailUrlMockData1[0].url);
-      expect(component.receiptIcon).toBeUndefined();
-      expect(fileService.downloadUrl).toHaveBeenCalledOnceWith(fileObjid);
-    }));
-  });
-
   it('setupNetworkWatcher(): should setup the network watcher', fakeAsync(() => {
     networkService.isOnline.and.returnValue(of(true));
     const eventEmitterMock = new EventEmitter<boolean>();
diff --git a/src/app/shared/components/expenses-card/expenses-card.component.ts b/src/app/shared/components/expenses-card/expenses-card.component.ts
index 64789dd34e..141c41bebc 100644
--- a/src/app/shared/components/expenses-card/expenses-card.component.ts
+++ b/src/app/shared/components/expenses-card/expenses-card.component.ts
@@ -101,7 +101,7 @@ export class ExpensesCardComponent implements OnInit {
 
   attachmentUploadInProgress = false;
 
-  receiptThumbnail: string = null;
+  isReceiptPresent: boolean;
 
   isConnected$: Observable<boolean>;
 
@@ -135,7 +135,7 @@ export class ExpensesCardComponent implements OnInit {
     private trackingService: TrackingService,
     private currencyService: CurrencyService,
     private expenseFieldsService: ExpenseFieldsService,
-    private orgSettingsService: OrgSettingsService,
+    private orgSettingsService: OrgSettingsService
   ) {}
 
   get isSelected(): boolean {
@@ -167,36 +167,7 @@ export class ExpensesCardComponent implements OnInit {
           this.receiptIcon = 'assets/svg/fy-expense.svg';
         }
       } else {
-        this.fileService
-          .getFilesWithThumbnail(this.expense.tx_id)
-          .pipe(
-            map((ThumbFiles: FileObject[]) => {
-              if (ThumbFiles.length > 0) {
-                this.fileService
-                  .downloadThumbnailUrl(ThumbFiles[0].id)
-                  .pipe(
-                    map((downloadUrl: FileObject[]) => {
-                      this.receiptThumbnail = downloadUrl[0].url;
-                    }),
-                  )
-                  .subscribe(noop);
-              } else {
-                this.fileService
-                  .downloadUrl(this.expense.tx_file_ids[0])
-                  .pipe(
-                    map((downloadUrl: string) => {
-                      if (this.fileService.getReceiptDetails(downloadUrl) === 'pdf') {
-                        this.receiptIcon = 'assets/svg/pdf.svg';
-                      } else {
-                        this.receiptIcon = 'assets/svg/fy-expense.svg';
-                      }
-                    }),
-                  )
-                  .subscribe(noop);
-              }
-            }),
-          )
-          .subscribe(noop);
+        this.isReceiptPresent = true;
       }
     }
   }
@@ -281,7 +252,7 @@ export class ExpensesCardComponent implements OnInit {
     const orgSettings$ = this.orgSettingsService.get().pipe(shareReplay(1));
 
     this.isSycing$ = this.isConnected$.pipe(
-      map((isConnected) => isConnected && this.transactionOutboxService.isSyncInProgress() && this.isOutboxExpense),
+      map((isConnected) => isConnected && this.transactionOutboxService.isSyncInProgress() && this.isOutboxExpense)
     );
 
     this.isMileageExpense = this.expense.tx_org_category && this.expense.tx_org_category?.toLowerCase() === 'mileage';
@@ -301,13 +272,13 @@ export class ExpensesCardComponent implements OnInit {
       .pipe(
         map((homeCurrency) => {
           this.homeCurrency = homeCurrency;
-        }),
+        })
       )
       .subscribe(noop);
 
     this.isProjectEnabled$ = orgSettings$.pipe(
       map((orgSettings) => orgSettings.projects && orgSettings.projects.allowed && orgSettings.projects.enabled),
-      shareReplay(1),
+      shareReplay(1)
     );
 
     if (!this.expense.tx_id) {
@@ -315,7 +286,7 @@ export class ExpensesCardComponent implements OnInit {
     } else if (this.previousExpenseTxnDate || this.previousExpenseCreatedAt) {
       const currentDate = this.expense && new Date(this.expense.tx_txn_dt || this.expense.tx_created_at).toDateString();
       const previousDate = new Date(
-        (this.previousExpenseTxnDate || this.previousExpenseCreatedAt) as string,
+        (this.previousExpenseTxnDate || this.previousExpenseCreatedAt) as string
       ).toDateString();
       this.showDt = currentDate !== previousDate;
     }
@@ -453,16 +424,6 @@ export class ExpensesCardComponent implements OnInit {
     }
   }
 
-  setThumbnail(fileObjId: string, attachmentType: string): void {
-    this.fileService.downloadUrl(fileObjId).subscribe((downloadUrl) => {
-      if (attachmentType === 'pdf') {
-        this.receiptIcon = 'assets/svg/pdf.svg';
-      } else {
-        this.receiptThumbnail = downloadUrl;
-      }
-    });
-  }
-
   matchReceiptWithEtxn(fileObj: FileObject): void {
     this.expense.tx_file_ids = [];
     this.expense.tx_file_ids.push(fileObj.id);
@@ -482,17 +443,17 @@ export class ExpensesCardComponent implements OnInit {
         }),
         finalize(() => {
           this.attachmentUploadInProgress = false;
-        }),
+        })
       )
-      .subscribe((fileObj: FileObject) => {
-        this.setThumbnail(fileObj.id, attachmentType);
+      .subscribe(() => {
+        this.isReceiptPresent = true;
       });
   }
 
   setupNetworkWatcher(): void {
     const networkWatcherEmitter = this.networkService.connectivityWatcher(new EventEmitter<boolean>());
     this.isConnected$ = concat(this.networkService.isOnline(), networkWatcherEmitter.asObservable()).pipe(
-      startWith(true),
+      startWith(true)
     );
   }
 
diff --git a/src/assets/images/pdf-receipt-placeholder.png b/src/assets/images/pdf-receipt-placeholder.png
new file mode 100644
index 0000000000..619061247b
Binary files /dev/null and b/src/assets/images/pdf-receipt-placeholder.png differ