diff --git a/src/components/AdvertiserName/AdvertiserNameStats.tsx b/src/components/AdvertiserName/AdvertiserNameStats.tsx
index fb8813dd..5881fe00 100644
--- a/src/components/AdvertiserName/AdvertiserNameStats.tsx
+++ b/src/components/AdvertiserName/AdvertiserNameStats.tsx
@@ -3,7 +3,7 @@ import { DeepPartial, TAdvertiserStats } from 'types';
 import { OnlineStatusIcon, OnlineStatusLabel, StarRating } from '@/components';
 import { getCurrentRoute } from '@/utils';
 import { Text, useDevice } from '@deriv-com/ui';
-import ThumbUpIcon from '../../public/ic-thumb-up.svg';
+import ThumbUpIcon from '../../public/ic-thumb-up.svg?react';
 import BlockedUserOutlineIcon from '../../public/ic-user-blocked-outline.svg?react';
 import './AdvertiserNameStats.scss';
 
diff --git a/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx b/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
index 6c318d16..dd5ebece 100644
--- a/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
+++ b/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { TCurrency } from 'types';
 import { LightDivider } from '@/components';
 import { floatingPointValidator } from '@/utils';
 import { Input, Text, useDevice } from '@deriv-com/ui';
@@ -13,7 +14,7 @@ type TBuySellAmountProps = {
     control: ReturnType<typeof useForm>['control'];
     isBuy: boolean;
     isDisabled: boolean;
-    localCurrency: string;
+    localCurrency: TCurrency;
     maxLimit: string;
     minLimit: string;
 };
diff --git a/src/components/BuySellForm/BuySellFormFooter/__tests__/BuySellFormFooter.spec.tsx b/src/components/BuySellForm/BuySellFormFooter/__tests__/BuySellFormFooter.spec.tsx
index 1e4f594b..10e7d592 100644
--- a/src/components/BuySellForm/BuySellFormFooter/__tests__/BuySellFormFooter.spec.tsx
+++ b/src/components/BuySellForm/BuySellFormFooter/__tests__/BuySellFormFooter.spec.tsx
@@ -5,6 +5,7 @@ import BuySellFormFooter from '../BuySellFormFooter';
 const mockProps = {
     isDisabled: false,
     onClickCancel: jest.fn(),
+    onSubmit: jest.fn(),
 };
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
@@ -27,11 +28,10 @@ describe('BuySellFormFooter', () => {
         expect(mockProps.onClickCancel).toHaveBeenCalled();
     });
     it('should handle onclick for confirm button', () => {
-        const newProps = { mockProps, onSubmit: jest.fn() };
-        render(<BuySellFormFooter {...newProps} />);
+        render(<BuySellFormFooter {...mockProps} />);
         const confirmButton = screen.getByRole('button', { name: 'Confirm' });
         confirmButton.click();
-        expect(newProps.onSubmit).toHaveBeenCalled();
+        expect(mockProps.onSubmit).toHaveBeenCalled();
     });
     it('should render as expected in responsive view as well', () => {
         mockUseDevice.mockReturnValue({
diff --git a/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx b/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx
index c5ec20ef..98bdd778 100644
--- a/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx
+++ b/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx
@@ -5,7 +5,7 @@ import BuySellPaymentSection from '../BuySellPaymentSection';
 const mockProps = {
     availablePaymentMethods: [],
     onSelectPaymentMethodCard: jest.fn(),
-    selectedPaymentMethodIds: ['123'],
+    selectedPaymentMethodIds: [123],
 };
 
 const mockAvailablePaymentMethods = {
diff --git a/src/components/Clipboard/Clipboard.tsx b/src/components/Clipboard/Clipboard.tsx
index 23cfd2cb..64a06f10 100644
--- a/src/components/Clipboard/Clipboard.tsx
+++ b/src/components/Clipboard/Clipboard.tsx
@@ -2,8 +2,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'usehooks-ts';
 import { Tooltip } from '@deriv-com/ui';
-import CheckmarkCircle from '../../public/ic-checkmark-circle.svg';
-import CopyIcon from '../../public/ic-clipboard.svg';
+import CheckmarkCircle from '../../public/ic-checkmark-circle.svg?react';
+import CopyIcon from '../../public/ic-clipboard.svg?react';
 import './Clipboard.scss';
 
 type TClipboardProps = {
diff --git a/src/components/FileUploaderComponent/FileUploaderComponent.tsx b/src/components/FileUploaderComponent/FileUploaderComponent.tsx
index 57e9148a..df9353a6 100644
--- a/src/components/FileUploaderComponent/FileUploaderComponent.tsx
+++ b/src/components/FileUploaderComponent/FileUploaderComponent.tsx
@@ -1,4 +1,5 @@
 import { memo, useCallback } from 'react';
+import { TFile } from '@/utils';
 import { DerivLightIcCloudUploadIcon, StandaloneCircleXmarkBoldIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
 import { FileDropzone } from '../FileDropzone';
@@ -10,8 +11,8 @@ type TFileUploaderComponentProps = {
     maxSize: number;
     multiple?: boolean;
     onClickClose: () => void;
-    onDropAccepted: (files: File[]) => void;
-    onDropRejected: (files: File[]) => void;
+    onDropAccepted: (files: TFile[]) => void;
+    onDropRejected: (files: TFile[]) => void;
     uploadedMessage: string;
     validationErrorMessage: string | null;
     value: (File & { file: Blob })[];
diff --git a/src/components/Modals/FilterModal/__tests__/FilterModal.spec.tsx b/src/components/Modals/FilterModal/__tests__/FilterModal.spec.tsx
index 55a299e3..dca733d7 100644
--- a/src/components/Modals/FilterModal/__tests__/FilterModal.spec.tsx
+++ b/src/components/Modals/FilterModal/__tests__/FilterModal.spec.tsx
@@ -261,7 +261,7 @@ describe('<FilterModal />', () => {
     });
 
     it('should populate the payment methods list with the data from the API', async () => {
-        mockData = undefined;
+        mockData = [];
         const { rerender } = render(<FilterModal {...mockProps} />);
 
         const paymentMethodsText = screen.getByText('Payment methods');
diff --git a/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx b/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx
index d333c0b2..43f6cf5a 100644
--- a/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx
+++ b/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx
@@ -52,12 +52,12 @@ jest.mock('@/providers/AdvertiserInfoStateProvider', () => ({
 
 describe('NicknameModal', () => {
     it('should render title and description correctly', () => {
-        render(<NicknameModal isModalOpen setIsModalOpen={jest.fn()} />);
+        render(<NicknameModal isModalOpen onRequestClose={jest.fn()} />);
         expect(screen.getByText('What’s your nickname?')).toBeVisible();
         expect(screen.getByText('Others will see this on your profile, ads and charts.')).toBeVisible();
     });
     it('should allow users to type and submit nickname', async () => {
-        render(<NicknameModal isModalOpen setIsModalOpen={jest.fn()} />);
+        render(<NicknameModal isModalOpen onRequestClose={jest.fn()} />);
 
         const nicknameInput = screen.getByTestId('dt_nickname_modal_input');
 
@@ -85,7 +85,7 @@ describe('NicknameModal', () => {
         }));
 
         await (() => {
-            render(<NicknameModal isModalOpen setIsModalOpen={jest.fn()} />);
+            render(<NicknameModal isModalOpen onRequestClose={jest.fn()} />);
         });
 
         expect(mockedReset).toBeCalled();
@@ -99,7 +99,7 @@ describe('NicknameModal', () => {
             reset: mockedReset,
         }));
         const mockIsModalOpen = jest.fn();
-        render(<NicknameModal isModalOpen setIsModalOpen={mockIsModalOpen} />);
+        render(<NicknameModal isModalOpen onRequestClose={mockIsModalOpen} />);
 
         const cancelBtn = screen.getByRole('button', {
             name: 'Cancel',
diff --git a/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx b/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx
index bbd2ef68..aa79bb68 100644
--- a/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx
+++ b/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx
@@ -1,8 +1,7 @@
-import { PropsWithChildren } from 'react';
 import { render, screen } from '@testing-library/react';
 import PaymentMethodErrorModal from '../PaymentMethodErrorModal';
 
-const wrapper = ({ children }: PropsWithChildren<unknown>) => <div id='v2_modal_root'>{children}</div>;
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => <div id='v2_modal_root'>{children}</div>;
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
diff --git a/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx b/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx
index a3c9abd2..edb3a9cc 100644
--- a/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx
+++ b/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx
@@ -1,9 +1,8 @@
-import { PropsWithChildren } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PaymentMethodModal from '../PaymentMethodModal';
 
-const wrapper = ({ children }: PropsWithChildren<unknown>) => <div id='v2_modal_root'>{children}</div>;
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => <div id='v2_modal_root'>{children}</div>;
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
diff --git a/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx b/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
index 795b576f..13195360 100644
--- a/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
+++ b/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
@@ -6,9 +6,9 @@ import { api } from '@/hooks';
 import { useCopyToClipboard } from '@/hooks/custom-hooks';
 import { Button, Divider, Modal, Text, useDevice } from '@deriv-com/ui';
 //TODO: replace below icons with the one from quill once available
-import CheckmarkCircle from '../../../public/ic-checkmark-circle.svg';
-import ShareIcon from '../../../public/ic-share.svg';
-import ShareLinkIcon from '../../../public/ic-share-link.svg';
+import CheckmarkCircle from '../../../public/ic-checkmark-circle.svg?react';
+import ShareIcon from '../../../public/ic-share.svg?react';
+import ShareLinkIcon from '../../../public/ic-share-link.svg?react';
 import ShareMyAdsCard from './ShareAdsCard';
 import ShareMyAdsSocials from './ShareAdsSocials';
 import './ShareAdsModal.scss';
diff --git a/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx b/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx
index b65dca1f..2eab274b 100644
--- a/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx
+++ b/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx
@@ -5,7 +5,7 @@ import {
     SocialGoogleBrandIcon,
     SocialTelegramBrandIcon,
 } from '@deriv/quill-icons';
-import WhatsappIcon from '../../../public/ic-whatsapp-filled.svg';
+import WhatsappIcon from '../../../public/ic-whatsapp-filled.svg?react';
 import './ShareAdsSocials.scss';
 
 type TShareMyAdsSocialsProps = {
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
index 7ea65f3e..dd8c36f6 100644
--- a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
+++ b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
@@ -3,9 +3,9 @@ import { THooks } from 'types';
 import { FlyoutMenu } from '@/components';
 import { LabelPairedEllipsisVerticalXlRegularIcon } from '@deriv/quill-icons';
 import { Button, Checkbox } from '@deriv-com/ui';
-import IcCashierBankTransfer from '../../../public/ic-cashier-bank-transfer.svg';
-import IcCashierEwallet from '../../../public/ic-cashier-ewallet.svg';
-import IcCashierOther from '../../../public/ic-cashier-other.svg';
+import IcCashierBankTransfer from '../../../public/ic-cashier-bank-transfer.svg?react';
+import IcCashierEwallet from '../../../public/ic-cashier-ewallet.svg?react';
+import IcCashierOther from '../../../public/ic-cashier-other.svg?react';
 import './PaymentMethodCardHeader.scss';
 
 type TPaymentMethodCardHeaderProps = {
diff --git a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx
index 48e2fcd5..f6aa0783 100644
--- a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx
+++ b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { PaymentMethodCardHeader } from '../PaymentMethodCardHeader';
 
-jest.mock('../../../public/ic-cashier-ewallet.svg', () => 'span');
+jest.mock('../../../public/ic-cashier-ewallet.svg?react', () => 'span');
 
 describe('PaymentMethodCardHeader', () => {
     it('should render the component correctly', () => {
diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/src/components/PaymentMethodForm/PaymentMethodForm.tsx
index 72fcfd1a..1ba24337 100644
--- a/src/components/PaymentMethodForm/PaymentMethodForm.tsx
+++ b/src/components/PaymentMethodForm/PaymentMethodForm.tsx
@@ -28,7 +28,7 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
         reset,
     } = useForm({ mode: 'all' });
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const { actionType, selectedPaymentMethod, title } = rest.formState;
+    const { actionType, selectedPaymentMethod, title = '' } = rest.formState;
     const { data: availablePaymentMethods } = api.paymentMethods.useGet();
     const { create, error: createError, isSuccess: isCreateSuccessful } = api.advertiserPaymentMethods.useCreate();
     const { error: updateError, isSuccess: isUpdateSuccessful, update } = api.advertiserPaymentMethods.useUpdate();
diff --git a/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx b/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
index 6338b296..1f0d4993 100644
--- a/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
+++ b/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
@@ -1,7 +1,7 @@
 import { TFormState, THooks, TSelectedPaymentMethod } from 'types';
 import { Dropdown } from '@/components';
 import { Button, Input, Text } from '@deriv-com/ui';
-import CloseCircle from '../../../public/ic-close-circle.svg';
+import CloseCircle from '../../../public/ic-close-circle.svg?react';
 
 type TPaymentMethodFormAutocompleteProps = {
     actionType: TFormState['actionType'];
diff --git a/src/components/PaymentMethodLabel/PaymentMethodLabel.tsx b/src/components/PaymentMethodLabel/PaymentMethodLabel.tsx
index 65d936f5..5a912083 100644
--- a/src/components/PaymentMethodLabel/PaymentMethodLabel.tsx
+++ b/src/components/PaymentMethodLabel/PaymentMethodLabel.tsx
@@ -1,9 +1,10 @@
+import { TGenericSizes, TTextColors } from '@/utils';
 import { Text } from '@deriv-com/ui';
 
 type TPaymentMethodLabelProps = {
-    color?: string;
+    color?: TTextColors;
     paymentMethodName: string;
-    size?: string;
+    size?: TGenericSizes;
 };
 
 const PaymentMethodLabel = ({ color = 'general', paymentMethodName, size = 'sm' }: TPaymentMethodLabelProps) => {
diff --git a/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx b/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx
index 2899e6bf..6bfdca12 100644
--- a/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx
+++ b/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx
@@ -3,12 +3,12 @@ import clsx from 'clsx';
 import { THooks } from 'types';
 import { TGenericSizes } from '@/utils';
 import { Text } from '@deriv-com/ui';
-import IcCashierBankTransfer from '../../public/ic-cashier-bank-transfer.svg';
-import IcCashierEwallet from '../../public/ic-cashier-ewallet.svg';
-import IcCashierOther from '../../public/ic-cashier-other.svg';
+import IcCashierBankTransfer from '../../public/ic-cashier-bank-transfer.svg?react';
+import IcCashierEwallet from '../../public/ic-cashier-ewallet.svg?react';
+import IcCashierOther from '../../public/ic-cashier-other.svg?react';
 
 type TPaymentMethodWithIconProps = {
-    className: string;
+    className?: string;
     name: string;
     textSize?: TGenericSizes;
     type: THooks.AdvertiserPaymentMethods.Get[number]['type'];
diff --git a/src/components/ProfileContent/ProfileStats/__tests__/ProfileStats.spec.tsx b/src/components/ProfileContent/ProfileStats/__tests__/ProfileStats.spec.tsx
index 3ea84f21..4e14c03e 100644
--- a/src/components/ProfileContent/ProfileStats/__tests__/ProfileStats.spec.tsx
+++ b/src/components/ProfileContent/ProfileStats/__tests__/ProfileStats.spec.tsx
@@ -21,7 +21,7 @@ let mockProps = {
 
 describe('<ProfileStats />', () => {
     it('should render no results if advertiserStats is empty', () => {
-        render(<ProfileStats />);
+        render(<ProfileStats advertiserStats={{}} />);
 
         expect(screen.queryByText('Buy completion 30d')).not.toBeInTheDocument();
         expect(screen.queryByText('Sell completion 30d')).not.toBeInTheDocument();
diff --git a/src/hooks/__tests__/useModalManager.spec.tsx b/src/hooks/__tests__/useModalManager.spec.tsx
index 13087b32..53f0bd75 100644
--- a/src/hooks/__tests__/useModalManager.spec.tsx
+++ b/src/hooks/__tests__/useModalManager.spec.tsx
@@ -45,7 +45,7 @@ describe('useModalManager', () => {
     it('should render and show the correct modal states when showModal is called', async () => {
         const history = createMemoryHistory();
         const originalLocation = window.location;
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -113,7 +113,7 @@ describe('useModalManager', () => {
     });
     it('should hide the modals and show previous modal when current modal hidden', () => {
         const history = createMemoryHistory();
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -193,7 +193,7 @@ describe('useModalManager', () => {
     });
     it('should show the modals when URL is initialized with default modal states', () => {
         const history = createMemoryHistory();
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -223,7 +223,7 @@ describe('useModalManager', () => {
     });
     it('should should not show the modals on navigated back when shouldReinitializeModals is set to false', () => {
         const history = createMemoryHistory();
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -255,7 +255,7 @@ describe('useModalManager', () => {
     });
     it('should should show the modals on navigated back when shouldReinitializeModals is set to true', () => {
         const history = createMemoryHistory();
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -291,7 +291,7 @@ describe('useModalManager', () => {
     });
     it('should should stack the modals in mobile', () => {
         const history = createMemoryHistory();
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -302,7 +302,9 @@ describe('useModalManager', () => {
             search: '?modal=ModalA,ModalB,ModalC',
         }));
         mockedUseDevice.mockImplementation(() => ({
+            isDesktop: false,
             isMobile: true,
+            isTablet: false,
         }));
         mockedUseQueryString.mockImplementationOnce(() => ({
             queryString: {
diff --git a/src/hooks/__tests__/usePoiPoaStatus.spec.tsx b/src/hooks/__tests__/usePoiPoaStatus.spec.tsx
index 7fbaa080..5b3c8379 100644
--- a/src/hooks/__tests__/usePoiPoaStatus.spec.tsx
+++ b/src/hooks/__tests__/usePoiPoaStatus.spec.tsx
@@ -45,8 +45,9 @@ describe('usePoiPoaStatus', () => {
                     identity: {
                         status: 'verified',
                     },
+                    needs_verification: false,
                 },
-                p2p_poa_required: false,
+                p2p_poa_required: 0,
             },
         });
         const { result } = renderHook(() => usePoiPoaStatus());
diff --git a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
index 2e23894e..03aacc47 100644
--- a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
+++ b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
@@ -25,7 +25,9 @@ const Advertiser = () => {
                 hasBorder={isMobile}
                 onClick={() =>
                     history.push(
-                        location.state?.from === 'MyProfile' ? `${MY_PROFILE_URL}?tab=My+counterparties` : BUY_SELL_URL
+                        (location.state as { from: string })?.from === 'MyProfile'
+                            ? `${MY_PROFILE_URL}?tab=My+counterparties`
+                            : BUY_SELL_URL
                     )
                 }
                 pageTitle='Advertiser’s page'
diff --git a/src/pages/advertiser/screens/AdvertiserAdvertsTable/__tests__/AdvertiserAdvertsTable.spec.tsx b/src/pages/advertiser/screens/AdvertiserAdvertsTable/__tests__/AdvertiserAdvertsTable.spec.tsx
index d9a17494..ddbf329c 100644
--- a/src/pages/advertiser/screens/AdvertiserAdvertsTable/__tests__/AdvertiserAdvertsTable.spec.tsx
+++ b/src/pages/advertiser/screens/AdvertiserAdvertsTable/__tests__/AdvertiserAdvertsTable.spec.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import AdvertiserAdvertsTable from '../AdvertiserAdvertsTable';
 
 let mockApiValues = {
+    data: [{}],
     isFetching: false,
     isLoading: true,
     loadMoreAdverts: jest.fn(),
diff --git a/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.tsx b/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.tsx
index 15e3da0d..bf27351a 100644
--- a/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.tsx
+++ b/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.tsx
@@ -26,10 +26,10 @@ const CurrencyDropdown = ({ selectedCurrency, setSelectedCurrency }: TCurrencyDr
     const localCurrencies = useMemo(() => {
         return data?.currency_list
             ? data.currency_list
-                  .sort((a, b) => a.value.localeCompare(b.value))
+                  .sort((a, b) => (a?.value ?? '').localeCompare(b?.value ?? ''))
                   .sort((a, b) => {
-                      if (a.value === selectedCurrency) return -1;
-                      if (b.value === selectedCurrency) return 1;
+                      if (a?.value === selectedCurrency) return -1;
+                      if (b?.value === selectedCurrency) return 1;
                       return 0;
                   })
             : [];
diff --git a/src/pages/buy-sell/components/CurrencyDropdown/__tests__/CurrencyDropdown.spec.tsx b/src/pages/buy-sell/components/CurrencyDropdown/__tests__/CurrencyDropdown.spec.tsx
index 3ae560dd..42b8ef33 100644
--- a/src/pages/buy-sell/components/CurrencyDropdown/__tests__/CurrencyDropdown.spec.tsx
+++ b/src/pages/buy-sell/components/CurrencyDropdown/__tests__/CurrencyDropdown.spec.tsx
@@ -2,7 +2,7 @@ import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import CurrencyDropdown from '../CurrencyDropdown';
 
-const wrapper = ({ children }: { children: JSX.Element }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
     <div>
         <div>Click me</div>
         {children}
diff --git a/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx b/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
index 1df5714c..15fbd8df 100644
--- a/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
+++ b/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
@@ -1,7 +1,7 @@
 import { TSortByValues } from '@/utils';
 import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
 import { Button, Dropdown, useDevice } from '@deriv-com/ui';
-import SortIcon from '../../../../public/ic-cashier-sort.svg';
+import SortIcon from '../../../../public/ic-cashier-sort.svg?react';
 import './SortDropdown.scss';
 
 type TSortDropdownProps = {
diff --git a/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx b/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx
index 390e7e86..8d4d532d 100644
--- a/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx
+++ b/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx
@@ -22,7 +22,7 @@ type TBuySellTableRowRendererProps = {
 };
 
 const BuySellTableRenderer = ({
-    data,
+    data = [],
     isFetching,
     isLoading,
     loadMoreAdverts,
diff --git a/src/pages/my-ads/components/AdConditionContentHeader/__tests__/AdConditionContentHeader.spec.tsx b/src/pages/my-ads/components/AdConditionContentHeader/__tests__/AdConditionContentHeader.spec.tsx
index 040bd9e8..9051b0a1 100644
--- a/src/pages/my-ads/components/AdConditionContentHeader/__tests__/AdConditionContentHeader.spec.tsx
+++ b/src/pages/my-ads/components/AdConditionContentHeader/__tests__/AdConditionContentHeader.spec.tsx
@@ -22,12 +22,12 @@ const mockUseDevice = useDevice as jest.Mock;
 
 describe('AdConditionContentHeader', () => {
     it('should render the component as expected with given type', () => {
-        render(<AdConditionContentHeader type='type' />);
+        render(<AdConditionContentHeader type='completionRates' />);
         expect(screen.getByText('title')).toBeInTheDocument();
     });
     it('should handle clicking the tooltip icon', async () => {
         mockUseDevice.mockReturnValue({ isMobile: true });
-        render(<AdConditionContentHeader type='type' />);
+        render(<AdConditionContentHeader type='completionRates' />);
         await userEvent.click(screen.getByTestId('dt_ad_condition_tooltip_icon'));
         const okButton = screen.getByRole('button', { name: 'OK' });
         expect(okButton).toBeInTheDocument();
diff --git a/src/pages/my-ads/components/AdConditionsSection/__tests__/AdConditionsSection.spec.tsx b/src/pages/my-ads/components/AdConditionsSection/__tests__/AdConditionsSection.spec.tsx
index fbfbe186..d921e1d2 100644
--- a/src/pages/my-ads/components/AdConditionsSection/__tests__/AdConditionsSection.spec.tsx
+++ b/src/pages/my-ads/components/AdConditionsSection/__tests__/AdConditionsSection.spec.tsx
@@ -4,6 +4,7 @@ import AdConditionsSection from '../AdConditionsSection';
 
 const mockProps = {
     currency: 'USD',
+    countryList: [],
     getCurrentStep: jest.fn(),
     getTotalSteps: jest.fn(),
     goToNextStep: jest.fn(),
diff --git a/src/pages/my-ads/components/AdFormInput/__tests__/AdFormInput.spec.tsx b/src/pages/my-ads/components/AdFormInput/__tests__/AdFormInput.spec.tsx
index 63b0721b..0fb6b035 100644
--- a/src/pages/my-ads/components/AdFormInput/__tests__/AdFormInput.spec.tsx
+++ b/src/pages/my-ads/components/AdFormInput/__tests__/AdFormInput.spec.tsx
@@ -29,6 +29,7 @@ const mockProps = {
     currency: 'usd',
     label: 'label',
     name: 'name',
+    rightPlaceholder: '',
     triggerValidationFunction: jest.fn(),
 };
 
diff --git a/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx b/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx
index 27a87a65..c7b6e682 100644
--- a/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx
+++ b/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx
@@ -1,5 +1,6 @@
 import { MouseEventHandler, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { TCurrency } from 'types';
 import { BUY_SELL } from '@/constants';
 import { AdFormController } from '../AdFormController';
 import { AdPaymentSelection } from '../AdPaymentSelection';
@@ -7,12 +8,12 @@ import { AdSummary } from '../AdSummary';
 import { OrderTimeSelection } from '../OrderTimeSelection';
 
 type TAdPaymentDetailsSection = {
-    currency: string;
+    currency: TCurrency;
     getCurrentStep: () => number;
     getTotalSteps: () => number;
     goToNextStep: MouseEventHandler<HTMLButtonElement>;
-    goToPreviousStep: MouseEventHandler<HTMLButtonElement>;
-    localCurrency?: string;
+    goToPreviousStep: () => void;
+    localCurrency?: TCurrency;
     rateType: string;
 };
 
diff --git a/src/pages/my-ads/components/AdPaymentDetailsSection/__tests__/AdPaymentDetailsSection.spec.tsx b/src/pages/my-ads/components/AdPaymentDetailsSection/__tests__/AdPaymentDetailsSection.spec.tsx
index 17014439..12efe7ec 100644
--- a/src/pages/my-ads/components/AdPaymentDetailsSection/__tests__/AdPaymentDetailsSection.spec.tsx
+++ b/src/pages/my-ads/components/AdPaymentDetailsSection/__tests__/AdPaymentDetailsSection.spec.tsx
@@ -14,7 +14,7 @@ jest.mock('react-hook-form', () => ({
     ...jest.requireActual('react-hook-form'),
     useFormContext: () => ({
         formState: { errors: {}, isValid: true },
-        getValues: name => mockGetValues[name],
+        getValues: (name: string) => mockGetValues[name],
         setValue: mockFn,
     }),
 }));
diff --git a/src/pages/my-ads/components/AdSummary/AdSummary.tsx b/src/pages/my-ads/components/AdSummary/AdSummary.tsx
index 1578b93b..f1856108 100644
--- a/src/pages/my-ads/components/AdSummary/AdSummary.tsx
+++ b/src/pages/my-ads/components/AdSummary/AdSummary.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { TExchangeRate } from 'types';
+import { TCurrency, TExchangeRate } from 'types';
 import { AD_ACTION, RATE_TYPE } from '@/constants';
 import { api } from '@/hooks';
 import { useQueryString } from '@/hooks/custom-hooks';
@@ -10,8 +10,8 @@ import { FormatUtils } from '@deriv-com/utils';
 
 type TAdSummaryProps = {
     adRateType?: string; // ratetype for the ad when action is edit
-    currency: string;
-    localCurrency?: string;
+    currency: TCurrency;
+    localCurrency: TCurrency;
     offerAmount: string;
     priceRate: number;
     rateType: string;
@@ -21,7 +21,7 @@ type TAdSummaryProps = {
 const AdSummary = ({
     adRateType = '',
     currency,
-    localCurrency = '',
+    localCurrency,
     offerAmount,
     priceRate,
     rateType,
diff --git a/src/pages/my-ads/components/AdType/AdType.tsx b/src/pages/my-ads/components/AdType/AdType.tsx
index 8760c205..04661052 100644
--- a/src/pages/my-ads/components/AdType/AdType.tsx
+++ b/src/pages/my-ads/components/AdType/AdType.tsx
@@ -1,8 +1,9 @@
+import { TTextColors } from '@/utils';
 import { Text } from '@deriv-com/ui';
 import './AdType.scss';
 
 type TAdTypeProps = {
-    adPauseColor: string;
+    adPauseColor: TTextColors;
     floatRate: string;
 };
 const AdType = ({ adPauseColor, floatRate }: TAdTypeProps) => {
diff --git a/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx b/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
index 01056e6e..a5c61f80 100644
--- a/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
+++ b/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
@@ -15,7 +15,7 @@ type TAdTypeSectionProps = {
     getCurrentStep: () => number;
     getTotalSteps: () => number;
     goToNextStep: MouseEventHandler<HTMLButtonElement>;
-    goToPreviousStep: MouseEventHandler<HTMLButtonElement>;
+    goToPreviousStep: () => void;
     localCurrency?: string;
     onCancel: () => void;
     rateType: string;
diff --git a/src/pages/my-ads/components/AdWizard/AdWizard.tsx b/src/pages/my-ads/components/AdWizard/AdWizard.tsx
index 7d2bed9c..353d881c 100644
--- a/src/pages/my-ads/components/AdWizard/AdWizard.tsx
+++ b/src/pages/my-ads/components/AdWizard/AdWizard.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { TCountryListItem, TStep } from 'types';
+import { TCountryListItem, TCurrency, TStep } from 'types';
 import { FormProgress, Wizard } from '@/components';
 import { LabelPairedXmarkLgBoldIcon } from '@deriv/quill-icons';
 import { Button, Text, useDevice } from '@deriv-com/ui';
@@ -11,8 +11,8 @@ import './AdWizard.scss';
 
 type TAdWizardNav = {
     countryList: TCountryListItem;
-    currency: string;
-    localCurrency?: string;
+    currency: TCurrency;
+    localCurrency?: TCurrency;
     onCancel: () => void;
     rateType: string;
     steps: TStep[];
diff --git a/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx b/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx
index b57cbb03..222bd3db 100644
--- a/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx
+++ b/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx
@@ -1,5 +1,5 @@
 import { Button, Tooltip } from '@deriv-com/ui';
-import AlertIcon from '../../../../public/ic-alert-warning.svg';
+import AlertIcon from '../../../../public/ic-alert-warning.svg?react';
 import './AlertComponent.scss';
 
 type TAlertComponentProps = {
diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx
index f9bcfbdd..d9e1a885 100644
--- a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx
+++ b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx
@@ -68,7 +68,7 @@ const CreateEditAd = () => {
             'min-order': '',
             'order-completion-time': `${orderPaymentPeriod ? (orderPaymentPeriod * 60).toString() : '3600'}`,
             'payment-method': [],
-            'preferred-countries': Object.keys(countryList),
+            'preferred-countries': Object.keys(countryList as object),
             'rate-type-string': rateType,
             'rate-value': rateType === RATE_TYPE.FLOAT ? '-0.01' : '',
         },
@@ -82,8 +82,8 @@ const CreateEditAd = () => {
         setValue,
     } = methods;
     useEffect(() => {
-        if (Object.keys(countryList).length > 0 && getValues('preferred-countries').length === 0) {
-            setValue('preferred-countries', Object.keys(countryList));
+        if (Object.keys(countryList as object).length > 0 && getValues('preferred-countries').length === 0) {
+            setValue('preferred-countries', Object.keys(countryList as object));
         }
     }, [countryList, getValues, setValue]);
 
diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx
index 2bfcc4e9..93132890 100644
--- a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx
+++ b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx
@@ -36,8 +36,8 @@ const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: TMyAdsTableProps
     const { subscribeRates } = useExchangeRates();
 
     const {
-        account_currency: accountCurrency,
-        amount,
+        account_currency: accountCurrency = '',
+        amount = 0,
         amount_display: amountDisplay,
         effective_rate: effectiveRate,
         id,
@@ -50,9 +50,9 @@ const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: TMyAdsTableProps
         onClickIcon,
         payment_method_names: paymentMethodNames,
         price_display: priceDisplay,
-        rate_display: rateDisplay,
+        rate_display: rateDisplay = '',
         rate_type: rateType,
-        remaining_amount: remainingAmount,
+        remaining_amount: remainingAmount = 0,
         remaining_amount_display: remainingAmountDisplay,
         type,
         visibility_status: visibilityStatus = [],
diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRowView.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRowView.tsx
index 345ffa37..4ccf6481 100644
--- a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRowView.tsx
+++ b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRowView.tsx
@@ -28,11 +28,11 @@ const MyAdsTableRowView = ({
     const history = useHistory();
 
     const {
-        account_currency: accountCurrency,
+        account_currency: accountCurrency = '',
         id = '',
         rate_type: rateType,
-        remaining_amount: remainingAmount,
-        type,
+        remaining_amount: remainingAmount = 0,
+        type = '',
         visibility_status: visibilityStatus = [],
     } = rest;
 
diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRow.spec.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRow.spec.tsx
index 5c8a5b82..455eb94e 100644
--- a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRow.spec.tsx
+++ b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRow.spec.tsx
@@ -38,6 +38,7 @@ const mockProps = {
     eligible_countries: ['ID'],
     id: '138',
     is_active: true,
+    is_floating: false,
     is_visible: true,
     isBarred: false,
     isListed: true,
diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRowView.spec.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRowView.spec.tsx
index 7ee97310..36c4de18 100644
--- a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRowView.spec.tsx
+++ b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRowView.spec.tsx
@@ -39,6 +39,7 @@ const mockProps = {
     eligible_countries: ['ID'],
     id: '138',
     is_active: true,
+    is_floating: false,
     is_visible: true,
     isBarred: false,
     isListed: true,
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
index 472470a9..15bddaf6 100644
--- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
+++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
@@ -3,7 +3,7 @@ import { Dropdown, Search } from '@/components';
 import { COUNTERPARTIES_DROPDOWN_LIST } from '@/constants';
 import { useDevice } from '@/hooks/custom-hooks';
 import { Button, Text } from '@deriv-com/ui';
-import SortIcon from '../../../../../public/ic-cashier-sort.svg';
+import SortIcon from '../../../../../public/ic-cashier-sort.svg?react';
 import './MyProfileCounterpartiesHeader.scss';
 
 type MyProfileCounterpartiesHeaderProps = {
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx
index 8e99da38..40e42ff8 100644
--- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx
+++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx
@@ -4,7 +4,7 @@ import MyProfileCounterpartiesTableRow from '../MyProfileCounterpartiesTableRow'
 
 const mockProps = {
     id: 'id1',
-    is_blocked: false,
+    isBlocked: false,
     nickname: 'nickname',
 };
 
diff --git a/src/pages/my-profile/screens/PaymentMethods/__tests__/PaymentMethods.spec.tsx b/src/pages/my-profile/screens/PaymentMethods/__tests__/PaymentMethods.spec.tsx
index dabb4065..ac5c2a33 100644
--- a/src/pages/my-profile/screens/PaymentMethods/__tests__/PaymentMethods.spec.tsx
+++ b/src/pages/my-profile/screens/PaymentMethods/__tests__/PaymentMethods.spec.tsx
@@ -49,7 +49,7 @@ const mockUseGetResponse: ReturnType<typeof mockUseGet> = {
     isRefetching: false,
     isStale: false,
     isSuccess: true,
-    refetch: () => new Promise(() => undefined),
+    refetch: () => new Promise(() => {}),
     remove: () => undefined,
     status: 'success',
 };
diff --git a/src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx b/src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx
index 72f460c2..d17faaf8 100644
--- a/src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx
+++ b/src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx
@@ -1,7 +1,7 @@
 import { MouseEventHandler } from 'react';
 import { Button } from '@deriv-com/ui';
-import AttachmentIcon from '../../../../public/ic-attachment.svg';
-import SendMessageIcon from '../../../../public/ic-send-message.svg';
+import AttachmentIcon from '../../../../public/ic-attachment.svg?react';
+import SendMessageIcon from '../../../../public/ic-send-message.svg?react';
 
 type TChatFooterIconProps = {
     length: number;
diff --git a/src/pages/orders/components/ChatMessageReceipt/ChatMessageReceipt.tsx b/src/pages/orders/components/ChatMessageReceipt/ChatMessageReceipt.tsx
index b62f096c..f22fe786 100644
--- a/src/pages/orders/components/ChatMessageReceipt/ChatMessageReceipt.tsx
+++ b/src/pages/orders/components/ChatMessageReceipt/ChatMessageReceipt.tsx
@@ -1,10 +1,10 @@
 import { ComponentType, SVGAttributes } from 'react';
 import { CHAT_MESSAGE_STATUS } from '@/constants';
 import { useSendbird } from '@/hooks/custom-hooks';
-import MessageDeliveredIcon from '../../../../public/ic-message-delivered.svg';
-import MessageErroredIcon from '../../../../public/ic-message-errored.svg';
-import MessagePendingIcon from '../../../../public/ic-message-pending.svg';
-import MessageSeenIcon from '../../../../public/ic-message-seen.svg';
+import MessageDeliveredIcon from '../../../../public/ic-message-delivered.svg?react';
+import MessageErroredIcon from '../../../../public/ic-message-errored.svg?react';
+import MessagePendingIcon from '../../../../public/ic-message-pending.svg?react';
+import MessageSeenIcon from '../../../../public/ic-message-seen.svg?react';
 
 type TChatMessageReceiptProps = {
     chatChannel: NonNullable<ReturnType<typeof useSendbird>['activeChatChannel']>;
@@ -22,8 +22,12 @@ const ChatMessageReceipt = ({ chatChannel, message, userId }: TChatMessageReceip
     } else {
         const channelUserIds = Object.keys(chatChannel.cachedUnreadMemberState);
         const otherSendbirdUserId = channelUserIds.find(id => id !== userId);
-        // User's last read timestamp is larger than or equal to this message's createdAt.
-        if (chatChannel.cachedUnreadMemberState[otherSendbirdUserId] >= message.createdAt) {
+        if (
+            otherSendbirdUserId &&
+            chatChannel.cachedUnreadMemberState[
+                otherSendbirdUserId as keyof typeof chatChannel.cachedUnreadMemberState
+            ] >= message.createdAt
+        ) {
             Icon = MessageSeenIcon;
         } else {
             Icon = MessageDeliveredIcon;
diff --git a/src/pages/orders/components/ChatMessageText/ChatMessageText.tsx b/src/pages/orders/components/ChatMessageText/ChatMessageText.tsx
index a4b3c111..0640ca64 100644
--- a/src/pages/orders/components/ChatMessageText/ChatMessageText.tsx
+++ b/src/pages/orders/components/ChatMessageText/ChatMessageText.tsx
@@ -1,9 +1,10 @@
 import { memo, PropsWithChildren } from 'react';
+import { TTextColors } from '@/utils';
 import { Text, useDevice } from '@deriv-com/ui';
 import './ChatMessageText.scss';
 
 type TChatMessageTextProps = {
-    color: string;
+    color: TTextColors;
     type?: string;
 };
 
diff --git a/src/pages/orders/components/ChatMessages/ChatMessages.tsx b/src/pages/orders/components/ChatMessages/ChatMessages.tsx
index 29b16206..ca704641 100644
--- a/src/pages/orders/components/ChatMessages/ChatMessages.tsx
+++ b/src/pages/orders/components/ChatMessages/ChatMessages.tsx
@@ -2,9 +2,9 @@ import { Fragment, SyntheticEvent, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { CHAT_FILE_TYPE, CHAT_MESSAGE_TYPE } from '@/constants';
 import { useSendbird } from '@/hooks/custom-hooks';
-import { convertToMB, formatMilliseconds } from '@/utils';
+import { convertToMB, formatMilliseconds, TTextColors } from '@/utils';
 import { Text, useDevice } from '@deriv-com/ui';
-import PDFIcon from '../../../../public/ic-pdf.svg';
+import PDFIcon from '../../../../public/ic-pdf.svg?react';
 import { ChatMessageReceipt } from '../ChatMessageReceipt';
 import { ChatMessageText } from '../ChatMessageText';
 import './ChatMessages.scss';
@@ -26,7 +26,7 @@ const AdminMessage = () => (
     </div>
 );
 
-const ChatMessages = ({ chatChannel, chatMessages = [], userId }: TChatMessagesProps) => {
+const ChatMessages = ({ chatChannel, chatMessages = [], userId = '' }: TChatMessagesProps) => {
     const { isMobile } = useDevice();
     let currentDate = '';
     const scrollRef = useRef<HTMLDivElement>(null);
@@ -38,7 +38,7 @@ const ChatMessages = ({ chatChannel, chatMessages = [], userId }: TChatMessagesP
         }
     }, [chatMessages.length]);
 
-    const getMessageFormat = (chatMessage: TChatMessages[number], messageColor: string) => {
+    const getMessageFormat = (chatMessage: TChatMessages[number], messageColor: TTextColors) => {
         const { fileType = '', name, size = 0, url } = chatMessage ?? {};
         switch (fileType) {
             case CHAT_FILE_TYPE.IMAGE:
diff --git a/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.tsx b/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.tsx
index 7f7e1a1a..0052953e 100644
--- a/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.tsx
+++ b/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.tsx
@@ -62,7 +62,7 @@ const PaymentMethodAccordion = ({
                                         }}
                                     >
                                         <PaymentMethodWithIcon
-                                            name={paymentMethodDetails[key].display_name}
+                                            name={paymentMethodDetails[key].display_name ?? ''}
                                             textSize={bigTextSize}
                                             type={paymentMethodType}
                                         />
diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.tsx b/src/pages/orders/screens/OrderDetails/OrderDetails.tsx
index c3b9151c..710e9eaf 100644
--- a/src/pages/orders/screens/OrderDetails/OrderDetails.tsx
+++ b/src/pages/orders/screens/OrderDetails/OrderDetails.tsx
@@ -6,7 +6,7 @@ import { useExtendedOrderDetails } from '@/hooks/custom-hooks';
 import { OrderDetailsProvider } from '@/providers/OrderDetailsProvider';
 import { useAuthData } from '@deriv-com/api-hooks';
 import { Button, InlineMessage, Loader, Text, useDevice } from '@deriv-com/ui';
-import ChatIcon from '../../../../public/ic-chat.svg';
+import ChatIcon from '../../../../public/ic-chat.svg?react';
 import { OrderDetailsCard } from '../../components/OrderDetailsCard';
 import { OrderDetailsCardFooter } from '../../components/OrderDetailsCard/OrderDetailsCardFooter';
 import { OrdersChatSection } from '../OrdersChatSection';
diff --git a/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx b/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx
index e67c8c22..f405998c 100644
--- a/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx
+++ b/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx
@@ -98,7 +98,7 @@ describe('<OrderDetails />', () => {
             isLoading: false,
         });
 
-        render(<OrderDetails orderId='1' />);
+        render(<OrderDetails />);
 
         expect(screen.getByTestId('dt_derivs-loader')).toBeInTheDocument();
     });
diff --git a/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx b/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
index d3181f4c..2f83331d 100644
--- a/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
+++ b/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
@@ -7,7 +7,7 @@ import { useExtendedOrderDetails, useQueryString } from '@/hooks/custom-hooks';
 import { OrderRatingButton, OrderStatusTag, OrderTimer } from '@/pages/orders/components';
 import { getDistanceToServerTime } from '@/utils';
 import { Button, Text, useDevice } from '@deriv-com/ui';
-import ChatIcon from '../../../../../public/ic-chat.svg';
+import ChatIcon from '../../../../../public/ic-chat.svg?react';
 import './OrdersTableRow.scss';
 
 const OrdersTableRow = ({ ...props }: THooks.Order.GetList[number]) => {
diff --git a/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx b/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx
index 6fea9d00..66b77b14 100644
--- a/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx
+++ b/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx
@@ -5,7 +5,7 @@ describe('useOrderDetails', () => {
     it('should return the orderDetails from context', () => {
         const mockValues = { isErrorOrderInfo: false, orderDetails: 'mockOrderDetails' };
 
-        const wrapper = ({ children }: { children: JSX.Element }) => (
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
             <OrderDetailsProvider value={mockValues}>{children}</OrderDetailsProvider>
         );
 
diff --git a/src/utils/types.ts b/src/utils/types.ts
index bf569cfa..4ca82172 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -12,4 +12,5 @@ export type TTextColors =
     | 'prominent'
     | 'red'
     | 'success'
-    | 'warning';
+    | 'warning'
+    | 'white';
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe2..b1f45c78 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />