diff --git a/packages/account/src/Components/form-body/__tests__/form-body.spec.js b/packages/account/src/Components/form-body/__tests__/form-body.spec.js
deleted file mode 100644
index 3d3d5214a801..000000000000
--- a/packages/account/src/Components/form-body/__tests__/form-body.spec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { isMobile, isDesktop } from '@deriv/shared';
-import { FormBody } from '../form-body';
-
-jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
-    ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'),
-    isMobile: jest.fn(),
-    isDesktop: jest.fn(() => true),
-}));
-
-describe('<FormBody />', () => {
-    it('should render FormBody component with children in desktop', () => {
-        const { container } = render(
-            <FormBody scroll_offset='100px'>
-                <div>Test children</div>
-            </FormBody>
-        );
-        expect(container.querySelector('account__scrollbars_container--grid-layout')).toBeInTheDocument;
-        expect(screen.getByText('Test children')).toBeInTheDocument();
-    });
-
-    it('should render FormBody component with children in mobile', () => {
-        isMobile.mockReturnValue(true);
-        isDesktop.mockReturnValue(false);
-        const { container } = render(
-            <FormBody>
-                <div>Test children</div>
-            </FormBody>
-        );
-        expect(container.firstChild).toHaveClass('account__scrollbars_container--grid-layout');
-        expect(screen.getByText('Test children')).toBeInTheDocument();
-    });
-});
diff --git a/packages/account/src/Components/form-body/__tests__/form-body.spec.tsx b/packages/account/src/Components/form-body/__tests__/form-body.spec.tsx
new file mode 100644
index 000000000000..851a6d3e89c5
--- /dev/null
+++ b/packages/account/src/Components/form-body/__tests__/form-body.spec.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { isMobile, isDesktop } from '@deriv/shared';
+import { FormBody } from '../form-body';
+
+jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
+    ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'),
+    isMobile: jest.fn(),
+    isDesktop: jest.fn(() => true),
+}));
+
+describe('<FormBody />', () => {
+    it('should render FormBody component with children in desktop', () => {
+        render(
+            <FormBody scroll_offset='100px'>
+                <div>Test children</div>
+            </FormBody>
+        );
+
+        const div_wrapper_sc = screen.getByTestId('dt_scrollbar_container_div');
+        expect(div_wrapper_sc).toBeInTheDocument();
+        expect(div_wrapper_sc).toHaveClass('account__scrollbars_container--grid-layout');
+        expect(screen.getByText('Test children')).toBeInTheDocument();
+        const div_wrapper_ts = screen.getByTestId('dt_themed_scrollbars');
+        expect(div_wrapper_ts).toBeInTheDocument();
+        expect(div_wrapper_ts).toHaveStyle('max-height: calc(100% - 100px)');
+    });
+
+    it('should render FormBody component with children in mobile', () => {
+        (isMobile as jest.Mock).mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
+        render(
+            <FormBody>
+                <div>Test children mobile</div>
+            </FormBody>
+        );
+
+        expect(screen.queryByTestId('dt_scrollbar_container_div')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('dt_themed_scrollbars')).not.toBeInTheDocument();
+        const div_100_vh = screen.getByTestId('dt_div_100_vh');
+        expect(div_100_vh).toBeInTheDocument();
+        expect(div_100_vh).toHaveClass('account__scrollbars_container--grid-layout');
+        expect(screen.getByText('Test children mobile')).toBeInTheDocument();
+    });
+});
diff --git a/packages/account/src/Components/form-body/form-body.jsx b/packages/account/src/Components/form-body/form-body.tsx
similarity index 84%
rename from packages/account/src/Components/form-body/form-body.jsx
rename to packages/account/src/Components/form-body/form-body.tsx
index 22a128f2ce1c..e8a69ec0203b 100644
--- a/packages/account/src/Components/form-body/form-body.jsx
+++ b/packages/account/src/Components/form-body/form-body.tsx
@@ -1,8 +1,12 @@
-import { Div100vhContainer, DesktopWrapper, MobileWrapper } from '@deriv/components';
 import React from 'react';
+import { Div100vhContainer, DesktopWrapper, MobileWrapper } from '@deriv/components';
 import { ScrollbarsContainer } from 'Components/scrollbars-container/scrollbars-container.jsx';
 
-export const FormBody = ({ children, scroll_offset }) => (
+type TFormBody = {
+    scroll_offset?: string;
+};
+
+export const FormBody = ({ children, scroll_offset }: React.PropsWithChildren<TFormBody>) => (
     <React.Fragment>
         <DesktopWrapper>
             <ScrollbarsContainer className='account__scrollbars_container--grid-layout' scroll_offset={scroll_offset}>
diff --git a/packages/account/src/Components/form-body/index.js b/packages/account/src/Components/form-body/index.js
deleted file mode 100644
index 56ff062e3e45..000000000000
--- a/packages/account/src/Components/form-body/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { FormBody } from './form-body.jsx';
-
-export default FormBody;
diff --git a/packages/account/src/Components/form-body/index.ts b/packages/account/src/Components/form-body/index.ts
new file mode 100644
index 000000000000..40f8a2f5613c
--- /dev/null
+++ b/packages/account/src/Components/form-body/index.ts
@@ -0,0 +1,3 @@
+import { FormBody } from './form-body';
+
+export default FormBody;
diff --git a/packages/account/src/Components/scrollbars-container/scrollbars-container.jsx b/packages/account/src/Components/scrollbars-container/scrollbars-container.jsx
index 7b9f6239bfbb..2d477a772be2 100644
--- a/packages/account/src/Components/scrollbars-container/scrollbars-container.jsx
+++ b/packages/account/src/Components/scrollbars-container/scrollbars-container.jsx
@@ -5,6 +5,11 @@ import { isMobile } from '@deriv/shared';
 
 export const ScrollbarsContainer = ({ children, className, scroll_offset }) => (
     <ThemedScrollbars is_bypassed={isMobile()} height={scroll_offset ? `calc(100% - ${scroll_offset})` : '100%'}>
-        <div className={classNames('account__scrollbars_container', className)}>{children}</div>
+        <div
+            className={classNames('account__scrollbars_container', className)}
+            data-testid='dt_scrollbar_container_div'
+        >
+            {children}
+        </div>
     </ThemedScrollbars>
 );
diff --git a/packages/components/src/components/div100vh-container/div100vh-container.tsx b/packages/components/src/components/div100vh-container/div100vh-container.tsx
index 42842be95fc8..062587213525 100644
--- a/packages/components/src/components/div100vh-container/div100vh-container.tsx
+++ b/packages/components/src/components/div100vh-container/div100vh-container.tsx
@@ -40,7 +40,7 @@ const Div100vhContainer = ({
     };
     if (is_bypassed) return children as JSX.Element;
     return (
-        <Div100vh id={id} className={className} style={is_disabled ? {} : height_style}>
+        <Div100vh id={id} className={className} style={is_disabled ? {} : height_style} data-testid='dt_div_100_vh'>
             {children}
         </Div100vh>
     );