diff --git a/packages/account/src/Components/form-sub-header/__tests__/form-sub-header.spec.js b/packages/account/src/Components/form-sub-header/__tests__/form-sub-header.spec.tsx
similarity index 89%
rename from packages/account/src/Components/form-sub-header/__tests__/form-sub-header.spec.js
rename to packages/account/src/Components/form-sub-header/__tests__/form-sub-header.spec.tsx
index b881b5baff2a..dcce80c2d066 100644
--- a/packages/account/src/Components/form-sub-header/__tests__/form-sub-header.spec.js
+++ b/packages/account/src/Components/form-sub-header/__tests__/form-sub-header.spec.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { FormSubHeader } from '../form-sub-header';
+import { FormSubHeader, TFormSubHeader } from '../form-sub-header';
 
 describe('Testing FormSubHeader component', () => {
     it('should render properties', () => {
-        const props = {
+        const props: TFormSubHeader = {
             title: 'test-title',
             subtitle: 'test-subtitle',
             description: 'lorem ipsum',
diff --git a/packages/account/src/Components/form-sub-header/form-sub-header.jsx b/packages/account/src/Components/form-sub-header/form-sub-header.tsx
similarity index 86%
rename from packages/account/src/Components/form-sub-header/form-sub-header.jsx
rename to packages/account/src/Components/form-sub-header/form-sub-header.tsx
index 5e0a32bc2c8f..747613640a3a 100644
--- a/packages/account/src/Components/form-sub-header/form-sub-header.jsx
+++ b/packages/account/src/Components/form-sub-header/form-sub-header.tsx
@@ -2,7 +2,13 @@ import classNames from 'classnames';
 import React from 'react';
 import { Text } from '@deriv/components';
 
-export const FormSubHeader = ({ title, subtitle, description }) => {
+export type TFormSubHeader = {
+    description?: string;
+    subtitle?: string;
+    title: string;
+};
+
+export const FormSubHeader = ({ description, subtitle, title }: TFormSubHeader) => {
     const title_as_class = title.replace(/\s+/g, '-').toLowerCase();
     return (
         <React.Fragment>
diff --git a/packages/account/src/Components/form-sub-header/index.js b/packages/account/src/Components/form-sub-header/index.js
deleted file mode 100644
index 25b7a78b341a..000000000000
--- a/packages/account/src/Components/form-sub-header/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { FormSubHeader } from './form-sub-header.jsx';
-
-export default FormSubHeader;
diff --git a/packages/account/src/Components/form-sub-header/index.ts b/packages/account/src/Components/form-sub-header/index.ts
new file mode 100644
index 000000000000..48f2cc87eeb4
--- /dev/null
+++ b/packages/account/src/Components/form-sub-header/index.ts
@@ -0,0 +1,3 @@
+import { FormSubHeader } from './form-sub-header';
+
+export default FormSubHeader;
diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx
index 29f7c81e7875..daba24c00a60 100644
--- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx
+++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx
@@ -1084,10 +1084,7 @@ export const PersonalDetailsForm = ({
                                     <>
                                         <div className='account-form__divider' />
                                         <div className='pro-client'>
-                                            <FormSubHeader
-                                                className='account-form__red-header'
-                                                title={localize('Professional Client')}
-                                            />
+                                            <FormSubHeader title={localize('Professional Client')} />
                                             <FormBodySection>
                                                 <fieldset className='account-form__fieldset'>
                                                     <div>