diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-description.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-description.spec.tsx
new file mode 100644
index 000000000000..ccad8a4317c1
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/__tests__/media-description.spec.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MediaDescription } from 'App/Components/Elements/Media';
+
+const test_children = 'Test Children';
+
+describe('MediaDescription', () => {
+    it('should render children inside of proper MediaDescription div container with className', () => {
+        render(<MediaDescription>{test_children}</MediaDescription>);
+        const test_props_children = screen.getByText(test_children);
+
+        expect(test_props_children).toBeInTheDocument();
+        expect(test_props_children).toHaveClass('media__description');
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-heading.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-heading.spec.tsx
new file mode 100644
index 000000000000..acb7f14dab68
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/__tests__/media-heading.spec.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MediaHeading } from 'App/Components/Elements/Media';
+
+const test_children = 'Test Children';
+
+describe('MediaHeading', () => {
+    it('should render children inside of proper MediaHeading div container with className', () => {
+        render(<MediaHeading>{test_children}</MediaHeading>);
+        const test_props_children = screen.getByText(test_children);
+
+        expect(test_props_children).toBeInTheDocument();
+        expect(test_props_children).toHaveClass('media__heading');
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-icon.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-icon.spec.tsx
new file mode 100644
index 000000000000..d87bdfd29a27
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/__tests__/media-icon.spec.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MediaIcon } from 'App/Components/Elements/Media';
+
+const test_disabled = 'Interval Duration Disabled Light Icon';
+const test_enabled = 'Interval Duration Enabled Light Icon';
+const mock_props = {
+    disabled: jest.fn(() => <div>{test_disabled}</div>),
+    enabled: jest.fn(() => <div>{test_enabled}</div>),
+    id: 'test_id',
+    is_enabled: true,
+};
+
+describe('MediaIcon', () => {
+    it('should render MediaIcon component with enabled SVG if is_enabled === true', () => {
+        render(<MediaIcon {...mock_props} />);
+
+        expect(screen.getByText(test_enabled)).toBeInTheDocument();
+    });
+    it('should render MediaIcon component with disabled SVG if is_enabled === false', () => {
+        render(<MediaIcon {...mock_props} is_enabled={false} />);
+
+        expect(screen.getByText(test_disabled)).toBeInTheDocument();
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx
new file mode 100644
index 000000000000..2770cd33fad3
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MediaItem from '../media-item';
+
+const test_children = 'Test Children';
+
+describe('MediaItem', () => {
+    it('should render children inside of proper MediaItem div container with className', () => {
+        render(<MediaItem>{test_children}</MediaItem>);
+        const test_props_children = screen.getByText(test_children);
+
+        expect(test_props_children).toBeInTheDocument();
+        expect(test_props_children).toHaveClass('media');
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/index.js b/packages/trader/src/App/Components/Elements/Media/index.js
deleted file mode 100644
index ce221026b9e0..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import MediaItem from './media-item.jsx';
-
-export * from './media-description.jsx';
-export * from './media-heading.jsx';
-export * from './media-icon.jsx';
-export default MediaItem;
diff --git a/packages/trader/src/App/Components/Elements/Media/index.ts b/packages/trader/src/App/Components/Elements/Media/index.ts
new file mode 100644
index 000000000000..16f58a9fb22e
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/index.ts
@@ -0,0 +1,6 @@
+import MediaItem from './media-item';
+
+export * from './media-description';
+export * from './media-heading';
+export * from './media-icon';
+export default MediaItem;
diff --git a/packages/trader/src/App/Components/Elements/Media/media-description.jsx b/packages/trader/src/App/Components/Elements/Media/media-description.jsx
deleted file mode 100644
index 36c190dd4dd4..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-description.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const MediaDescription = props => <div className='media__description'>{props.children}</div>;
-
-export { MediaDescription };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-description.tsx b/packages/trader/src/App/Components/Elements/Media/media-description.tsx
new file mode 100644
index 000000000000..41b4b6a66644
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/media-description.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const MediaDescription = ({ children }: React.PropsWithChildren) => (
+    <div className='media__description'>{children}</div>
+);
+
+export { MediaDescription };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-heading.jsx b/packages/trader/src/App/Components/Elements/Media/media-heading.jsx
deleted file mode 100644
index 68e63deb8f4d..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-heading.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const MediaHeading = props => <div className='media__heading'>{props.children}</div>;
-
-export { MediaHeading };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-heading.tsx b/packages/trader/src/App/Components/Elements/Media/media-heading.tsx
new file mode 100644
index 000000000000..5105497b3588
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/media-heading.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const MediaHeading = ({ children }: React.PropsWithChildren) => <div className='media__heading'>{children}</div>;
+
+export { MediaHeading };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-icon.jsx b/packages/trader/src/App/Components/Elements/Media/media-icon.jsx
deleted file mode 100644
index 645eeb88256a..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-icon.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const MediaIcon = ({ id, is_enabled, enabled, disabled }) => {
-    const Icon = is_enabled ? enabled : disabled;
-    return <Icon id={id} className='media__icon' />;
-};
-
-MediaIcon.propTypes = {
-    disabled: PropTypes.func,
-    enabled: PropTypes.func,
-    id: PropTypes.string,
-    is_enabled: PropTypes.bool,
-};
-
-export { MediaIcon };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-icon.tsx b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx
new file mode 100644
index 000000000000..a4d7c5c0b4ac
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+type TMediaIcon = {
+    disabled: React.ComponentType<React.SVGAttributes<SVGElement>>;
+    enabled: React.ComponentType<React.SVGAttributes<SVGElement>>;
+    id: string;
+    is_enabled: boolean;
+};
+const MediaIcon = ({ id, is_enabled, enabled, disabled }: TMediaIcon) => {
+    const Icon = is_enabled ? enabled : disabled;
+    return <Icon id={id} className='media__icon' />;
+};
+
+export { MediaIcon };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-item.jsx b/packages/trader/src/App/Components/Elements/Media/media-item.jsx
deleted file mode 100644
index 6347c10d720e..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-item.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const MediaItem = props => <div className='media'>{props.children}</div>;
-
-export default MediaItem;
diff --git a/packages/trader/src/App/Components/Elements/Media/media-item.tsx b/packages/trader/src/App/Components/Elements/Media/media-item.tsx
new file mode 100644
index 000000000000..0d0ded93016b
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/media-item.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const MediaItem = ({ children }: React.PropsWithChildren) => <div className='media'>{children}</div>;
+
+export default MediaItem;