diff --git a/__mocks__/svgReactTransformer.cjs b/__mocks__/svgReactTransformer.cjs
deleted file mode 100644
index a6610c3c..00000000
--- a/__mocks__/svgReactTransformer.cjs
+++ /dev/null
@@ -1,7 +0,0 @@
-const React = require('react');
-
-module.exports = {
-    process() {
-        return `module.exports = ${JSON.stringify(React.Component)}`;
-    },
-};
\ No newline at end of file
diff --git a/jest.config.cjs b/jest.config.cjs
index 1bd924a2..ecbe13ff 100644
--- a/jest.config.cjs
+++ b/jest.config.cjs
@@ -1,17 +1,16 @@
 module.exports = {
-    testEnvironment: 'jsdom',
-    transform: {
-        '^.+\\.tsx?$': 'ts-jest',
-        '^.+\\.(js|jsx)$': 'babel-jest',
-        '^.+\\.svg$': '<rootDir>/__mocks__/svgReactTransformer.cjs',
-    },
     moduleNameMapper: {
-        '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
         '@deriv-com/(.*)': '<rootDir>/node_modules/@deriv-com/$1',
-        '^@/assets/(.*)\\.svg\\?react$': '<rootDir>/__mocks__/svgReactTransformer.cjs',
-        '^@/assets/(.*)$': '<rootDir>/src/assets/$1',
+        '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
         '^@/(.*)$': '<rootDir>/src/$1',
+        '^@/assets/(.*)$': '<rootDir>/src/assets/$1',
     },
-    transformIgnorePatterns: ['/node_modules/(?!(@deriv-com/ui|@sendbird/chat)).+\\.js$'],
     setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+    testEnvironment: 'jsdom',
+    transform: {
+        '^.+\\.(js|jsx)$': 'babel-jest',
+        '^.+\\.svg$': 'jest-transform-stub',
+        '^.+\\.tsx?$': 'ts-jest',
+    },
+    transformIgnorePatterns: ['/node_modules/(?!(@deriv-com/ui|@sendbird/chat)).+\\.js$'],
 };
diff --git a/package-lock.json b/package-lock.json
index 8a1db5d9..15793b7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
                 "@deriv/quill-design": "^1.2.24",
                 "@deriv/quill-icons": "^1.18.10",
                 "@sendbird/chat": "^4.11.3",
+                "@svgr/rollup": "^8.1.0",
                 "@tanstack/react-query": "^5.28.14",
                 "@tanstack/react-table": "^8.15.0",
                 "@vitejs/plugin-react": "^4.2.1",
@@ -24,6 +25,7 @@
                 "downshift": "^9.0.0",
                 "history": "^4.10.1",
                 "html2canvas": "^1.4.1",
+                "jest-transform-stub": "^2.0.0",
                 "lodash": "^4.17.21",
                 "moment": "^2.30.1",
                 "qrcode.react": "^3.1.0",
@@ -902,7 +904,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz",
             "integrity": "sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==",
-            "dev": true,
             "dependencies": {
                 "@babel/helper-plugin-utils": "^7.24.0"
             },
@@ -1011,7 +1012,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz",
             "integrity": "sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==",
-            "dev": true,
             "dependencies": {
                 "@babel/helper-plugin-utils": "^7.24.0"
             },
@@ -1601,11 +1601,24 @@
                 "@babel/core": "^7.0.0-0"
             }
         },
+        "node_modules/@babel/plugin-transform-react-constant-elements": {
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.24.1.tgz",
+            "integrity": "sha512-QXp1U9x0R7tkiGB0FOk8o74jhnap0FlZ5gNkRIWdG3eP+SvMFg118e1zaWewDzgABb106QSKpVsD3Wgd8t6ifA==",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.24.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
         "node_modules/@babel/plugin-transform-react-display-name": {
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.1.tgz",
             "integrity": "sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==",
-            "dev": true,
             "dependencies": {
                 "@babel/helper-plugin-utils": "^7.24.0"
             },
@@ -1620,7 +1633,6 @@
             "version": "7.23.4",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz",
             "integrity": "sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==",
-            "dev": true,
             "dependencies": {
                 "@babel/helper-annotate-as-pure": "^7.22.5",
                 "@babel/helper-module-imports": "^7.22.15",
@@ -1639,7 +1651,6 @@
             "version": "7.22.5",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
             "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
-            "dev": true,
             "dependencies": {
                 "@babel/plugin-transform-react-jsx": "^7.22.5"
             },
@@ -1682,7 +1693,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.24.1.tgz",
             "integrity": "sha512-+pWEAaDJvSm9aFvJNpLiM2+ktl2Sn2U5DdyiWdZBxmLc6+xGt88dvFqsHiAiDS+8WqUwbDfkKz9jRxK3M0k+kA==",
-            "dev": true,
             "dependencies": {
                 "@babel/helper-annotate-as-pure": "^7.22.5",
                 "@babel/helper-plugin-utils": "^7.24.0"
@@ -1798,7 +1808,6 @@
             "version": "7.24.4",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.4.tgz",
             "integrity": "sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==",
-            "dev": true,
             "dependencies": {
                 "@babel/helper-annotate-as-pure": "^7.22.5",
                 "@babel/helper-create-class-features-plugin": "^7.24.4",
@@ -1982,7 +1991,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.24.1.tgz",
             "integrity": "sha512-eFa8up2/8cZXLIpkafhaADTXSnl7IsUFCYenRWrARBz0/qZwcT0RBXpys0LJU4+WfPoF2ZG6ew6s2V6izMCwRA==",
-            "dev": true,
             "dependencies": {
                 "@babel/helper-plugin-utils": "^7.24.0",
                 "@babel/helper-validator-option": "^7.23.5",
@@ -2002,7 +2010,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.24.1.tgz",
             "integrity": "sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==",
-            "dev": true,
             "dependencies": {
                 "@babel/helper-plugin-utils": "^7.24.0",
                 "@babel/helper-validator-option": "^7.23.5",
@@ -4695,6 +4702,49 @@
                 "@svgr/core": "*"
             }
         },
+        "node_modules/@svgr/plugin-svgo": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz",
+            "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==",
+            "dependencies": {
+                "cosmiconfig": "^8.1.3",
+                "deepmerge": "^4.3.1",
+                "svgo": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@svgr/core": "*"
+            }
+        },
+        "node_modules/@svgr/rollup": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-8.1.0.tgz",
+            "integrity": "sha512-0XR1poYvPQoPpmfDYLEqUGu5ePAQ4pdgN3VFsZBNAeze7qubVpsIY1o1R6PZpKep/DKu33GSm2NhwpCLkMs2Cw==",
+            "dependencies": {
+                "@babel/core": "^7.21.3",
+                "@babel/plugin-transform-react-constant-elements": "^7.21.3",
+                "@babel/preset-env": "^7.20.2",
+                "@babel/preset-react": "^7.18.6",
+                "@babel/preset-typescript": "^7.21.0",
+                "@rollup/pluginutils": "^5.0.2",
+                "@svgr/core": "8.1.0",
+                "@svgr/plugin-jsx": "8.1.0",
+                "@svgr/plugin-svgo": "8.1.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            }
+        },
         "node_modules/@tanstack/query-core": {
             "version": "5.29.0",
             "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.29.0.tgz",
@@ -5033,6 +5083,14 @@
                 "node": ">= 10"
             }
         },
+        "node_modules/@trysound/sax": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+            "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
         "node_modules/@tsconfig/node10": {
             "version": "1.0.11",
             "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
@@ -6985,6 +7043,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/boolbase": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+        },
         "node_modules/brace-expansion": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -7780,6 +7843,72 @@
                 "xtend": ">=4.0.0 <4.1.0-0"
             }
         },
+        "node_modules/css-select": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+            "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+            "dependencies": {
+                "boolbase": "^1.0.0",
+                "css-what": "^6.1.0",
+                "domhandler": "^5.0.2",
+                "domutils": "^3.0.1",
+                "nth-check": "^2.0.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
+        "node_modules/css-select/node_modules/dom-serializer": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+            "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.2",
+                "entities": "^4.2.0"
+            },
+            "funding": {
+                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+            }
+        },
+        "node_modules/css-select/node_modules/domelementtype": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+            "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ]
+        },
+        "node_modules/css-select/node_modules/domhandler": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+            "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+            "dependencies": {
+                "domelementtype": "^2.3.0"
+            },
+            "engines": {
+                "node": ">= 4"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domhandler?sponsor=1"
+            }
+        },
+        "node_modules/css-select/node_modules/domutils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+            "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+            "dependencies": {
+                "dom-serializer": "^2.0.0",
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domutils?sponsor=1"
+            }
+        },
         "node_modules/css-tokenize": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/css-tokenize/-/css-tokenize-1.0.1.tgz",
@@ -7814,6 +7943,29 @@
             "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
             "dev": true
         },
+        "node_modules/css-tree": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+            "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+            "dependencies": {
+                "mdn-data": "2.0.30",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+            }
+        },
+        "node_modules/css-what": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+            "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+            "engines": {
+                "node": ">= 6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
         "node_modules/css.escape": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -7832,6 +7984,36 @@
                 "node": ">=4"
             }
         },
+        "node_modules/csso": {
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+            "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+            "dependencies": {
+                "css-tree": "~2.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/csso/node_modules/css-tree": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+            "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+            "dependencies": {
+                "mdn-data": "2.0.28",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/csso/node_modules/mdn-data": {
+            "version": "2.0.28",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+            "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+        },
         "node_modules/cssom": {
             "version": "0.5.0",
             "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -8069,7 +8251,6 @@
             "version": "4.3.1",
             "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
             "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -13598,6 +13779,11 @@
             "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
             "dev": true
         },
+        "node_modules/jest-transform-stub": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz",
+            "integrity": "sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg=="
+        },
         "node_modules/jest-transformer-svg": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/jest-transformer-svg/-/jest-transformer-svg-2.0.2.tgz",
@@ -14982,6 +15168,11 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdn-data": {
+            "version": "2.0.30",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
+        },
         "node_modules/memory-fs": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
@@ -15382,6 +15573,17 @@
                 "node": ">=8"
             }
         },
+        "node_modules/nth-check": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+            "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+            "dependencies": {
+                "boolbase": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/nth-check?sponsor=1"
+            }
+        },
         "node_modules/num2fraction": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
@@ -18585,6 +18787,38 @@
             "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
             "dev": true
         },
+        "node_modules/svgo": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz",
+            "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==",
+            "dependencies": {
+                "@trysound/sax": "0.2.0",
+                "commander": "^7.2.0",
+                "css-select": "^5.1.0",
+                "css-tree": "^2.3.1",
+                "css-what": "^6.1.0",
+                "csso": "^5.0.5",
+                "picocolors": "^1.0.0"
+            },
+            "bin": {
+                "svgo": "bin/svgo"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/svgo"
+            }
+        },
+        "node_modules/svgo/node_modules/commander": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+            "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
         "node_modules/symbol-tree": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -21178,7 +21412,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz",
             "integrity": "sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==",
-            "dev": true,
             "requires": {
                 "@babel/helper-plugin-utils": "^7.24.0"
             }
@@ -21251,7 +21484,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz",
             "integrity": "sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==",
-            "dev": true,
             "requires": {
                 "@babel/helper-plugin-utils": "^7.24.0"
             }
@@ -21607,11 +21839,18 @@
                 "@babel/helper-plugin-utils": "^7.24.0"
             }
         },
+        "@babel/plugin-transform-react-constant-elements": {
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.24.1.tgz",
+            "integrity": "sha512-QXp1U9x0R7tkiGB0FOk8o74jhnap0FlZ5gNkRIWdG3eP+SvMFg118e1zaWewDzgABb106QSKpVsD3Wgd8t6ifA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.24.0"
+            }
+        },
         "@babel/plugin-transform-react-display-name": {
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.1.tgz",
             "integrity": "sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==",
-            "dev": true,
             "requires": {
                 "@babel/helper-plugin-utils": "^7.24.0"
             }
@@ -21620,7 +21859,6 @@
             "version": "7.23.4",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz",
             "integrity": "sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==",
-            "dev": true,
             "requires": {
                 "@babel/helper-annotate-as-pure": "^7.22.5",
                 "@babel/helper-module-imports": "^7.22.15",
@@ -21633,7 +21871,6 @@
             "version": "7.22.5",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
             "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
-            "dev": true,
             "requires": {
                 "@babel/plugin-transform-react-jsx": "^7.22.5"
             }
@@ -21658,7 +21895,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.24.1.tgz",
             "integrity": "sha512-+pWEAaDJvSm9aFvJNpLiM2+ktl2Sn2U5DdyiWdZBxmLc6+xGt88dvFqsHiAiDS+8WqUwbDfkKz9jRxK3M0k+kA==",
-            "dev": true,
             "requires": {
                 "@babel/helper-annotate-as-pure": "^7.22.5",
                 "@babel/helper-plugin-utils": "^7.24.0"
@@ -21726,7 +21962,6 @@
             "version": "7.24.4",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.4.tgz",
             "integrity": "sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==",
-            "dev": true,
             "requires": {
                 "@babel/helper-annotate-as-pure": "^7.22.5",
                 "@babel/helper-create-class-features-plugin": "^7.24.4",
@@ -21871,7 +22106,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.24.1.tgz",
             "integrity": "sha512-eFa8up2/8cZXLIpkafhaADTXSnl7IsUFCYenRWrARBz0/qZwcT0RBXpys0LJU4+WfPoF2ZG6ew6s2V6izMCwRA==",
-            "dev": true,
             "requires": {
                 "@babel/helper-plugin-utils": "^7.24.0",
                 "@babel/helper-validator-option": "^7.23.5",
@@ -21885,7 +22119,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.24.1.tgz",
             "integrity": "sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==",
-            "dev": true,
             "requires": {
                 "@babel/helper-plugin-utils": "^7.24.0",
                 "@babel/helper-validator-option": "^7.23.5",
@@ -23666,6 +23899,32 @@
                 "svg-parser": "^2.0.4"
             }
         },
+        "@svgr/plugin-svgo": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz",
+            "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==",
+            "requires": {
+                "cosmiconfig": "^8.1.3",
+                "deepmerge": "^4.3.1",
+                "svgo": "^3.0.2"
+            }
+        },
+        "@svgr/rollup": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-8.1.0.tgz",
+            "integrity": "sha512-0XR1poYvPQoPpmfDYLEqUGu5ePAQ4pdgN3VFsZBNAeze7qubVpsIY1o1R6PZpKep/DKu33GSm2NhwpCLkMs2Cw==",
+            "requires": {
+                "@babel/core": "^7.21.3",
+                "@babel/plugin-transform-react-constant-elements": "^7.21.3",
+                "@babel/preset-env": "^7.20.2",
+                "@babel/preset-react": "^7.18.6",
+                "@babel/preset-typescript": "^7.21.0",
+                "@rollup/pluginutils": "^5.0.2",
+                "@svgr/core": "8.1.0",
+                "@svgr/plugin-jsx": "8.1.0",
+                "@svgr/plugin-svgo": "8.1.0"
+            }
+        },
         "@tanstack/query-core": {
             "version": "5.29.0",
             "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.29.0.tgz",
@@ -23880,6 +24139,11 @@
             "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
             "dev": true
         },
+        "@trysound/sax": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+            "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
+        },
         "@tsconfig/node10": {
             "version": "1.0.11",
             "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
@@ -25386,6 +25650,11 @@
             "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
             "devOptional": true
         },
+        "boolbase": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+        },
         "brace-expansion": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -25969,6 +26238,53 @@
                 }
             }
         },
+        "css-select": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+            "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+            "requires": {
+                "boolbase": "^1.0.0",
+                "css-what": "^6.1.0",
+                "domhandler": "^5.0.2",
+                "domutils": "^3.0.1",
+                "nth-check": "^2.0.1"
+            },
+            "dependencies": {
+                "dom-serializer": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+                    "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+                    "requires": {
+                        "domelementtype": "^2.3.0",
+                        "domhandler": "^5.0.2",
+                        "entities": "^4.2.0"
+                    }
+                },
+                "domelementtype": {
+                    "version": "2.3.0",
+                    "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+                    "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+                },
+                "domhandler": {
+                    "version": "5.0.3",
+                    "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+                    "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+                    "requires": {
+                        "domelementtype": "^2.3.0"
+                    }
+                },
+                "domutils": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+                    "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+                    "requires": {
+                        "dom-serializer": "^2.0.0",
+                        "domelementtype": "^2.3.0",
+                        "domhandler": "^5.0.3"
+                    }
+                }
+            }
+        },
         "css-tokenize": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/css-tokenize/-/css-tokenize-1.0.1.tgz",
@@ -26005,6 +26321,20 @@
                 }
             }
         },
+        "css-tree": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+            "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+            "requires": {
+                "mdn-data": "2.0.30",
+                "source-map-js": "^1.0.1"
+            }
+        },
+        "css-what": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+            "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+        },
         "css.escape": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -26017,6 +26347,30 @@
             "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
             "dev": true
         },
+        "csso": {
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+            "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+            "requires": {
+                "css-tree": "~2.2.0"
+            },
+            "dependencies": {
+                "css-tree": {
+                    "version": "2.2.1",
+                    "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+                    "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+                    "requires": {
+                        "mdn-data": "2.0.28",
+                        "source-map-js": "^1.0.1"
+                    }
+                },
+                "mdn-data": {
+                    "version": "2.0.28",
+                    "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+                    "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+                }
+            }
+        },
         "cssom": {
             "version": "0.5.0",
             "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -26194,8 +26548,7 @@
         "deepmerge": {
             "version": "4.3.1",
             "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-            "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-            "dev": true
+            "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
         },
         "define-data-property": {
             "version": "1.1.4",
@@ -30212,6 +30565,11 @@
                 }
             }
         },
+        "jest-transform-stub": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz",
+            "integrity": "sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg=="
+        },
         "jest-transformer-svg": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/jest-transformer-svg/-/jest-transformer-svg-2.0.2.tgz",
@@ -31274,6 +31632,11 @@
             "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
             "dev": true
         },
+        "mdn-data": {
+            "version": "2.0.30",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
+        },
         "memory-fs": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
@@ -31577,6 +31940,14 @@
                 "path-key": "^3.0.0"
             }
         },
+        "nth-check": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+            "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+            "requires": {
+                "boolbase": "^1.0.0"
+            }
+        },
         "num2fraction": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
@@ -33872,6 +34243,27 @@
             "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
             "dev": true
         },
+        "svgo": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz",
+            "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==",
+            "requires": {
+                "@trysound/sax": "0.2.0",
+                "commander": "^7.2.0",
+                "css-select": "^5.1.0",
+                "css-tree": "^2.3.1",
+                "css-what": "^6.1.0",
+                "csso": "^5.0.5",
+                "picocolors": "^1.0.0"
+            },
+            "dependencies": {
+                "commander": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+                    "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+                }
+            }
+        },
         "symbol-tree": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 38d73aeb..b9b6046c 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
         "@deriv/quill-design": "^1.2.24",
         "@deriv/quill-icons": "^1.18.10",
         "@sendbird/chat": "^4.11.3",
+        "@svgr/rollup": "^8.1.0",
         "@tanstack/react-query": "^5.28.14",
         "@tanstack/react-table": "^8.15.0",
         "@vitejs/plugin-react": "^4.2.1",
@@ -30,6 +31,7 @@
         "downshift": "^9.0.0",
         "history": "^4.10.1",
         "html2canvas": "^1.4.1",
+        "jest-transform-stub": "^2.0.0",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
         "qrcode.react": "^3.1.0",
diff --git a/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx b/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx
index 266ca85f..788839a9 100644
--- a/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx
+++ b/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx
@@ -13,14 +13,6 @@ const mockProps = {
     visibilityStatus: [],
 };
 
-jest.mock('@deriv/api-v2', () => ({
-    useAuthorize: () => ({
-        data: {
-            local_currencies: ['USD'],
-        },
-    }),
-}));
-
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: () => ({ isMobile: false }),
diff --git a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx
index 7b21a207..28d90254 100644
--- a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx
+++ b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx
@@ -41,6 +41,7 @@ const BlockUnblockUserModal = ({
 
     return (
         <Modal
+            ariaHideApp={false}
             className='block-unblock-user-modal'
             isOpen={isModalOpen}
             onRequestClose={onRequestClose}
diff --git a/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx b/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx
index e69aa0c7..30aeab4e 100644
--- a/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx
+++ b/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx
@@ -6,9 +6,9 @@ const mockOnRequestClose = jest.fn();
 const mockUseBlockMutate = jest.fn();
 const mockUseUnblockMutate = jest.fn();
 
-jest.mock('@deriv/api-v2', () => ({
-    ...jest.requireActual('@deriv/api-v2'),
-    p2p: {
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    api: {
         counterparty: {
             useBlock: jest.fn(() => ({
                 mutate: mockUseBlockMutate,
diff --git a/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx b/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx
index 5dd8a8ae..a8728943 100644
--- a/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx
+++ b/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx
@@ -76,6 +76,7 @@ const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitM
     return (
         // TODO: below modal will be rewritten to use @deriv/ui modal
         <Modal
+            ariaHideApp={false}
             className='daily-limit-modal'
             isOpen={isModalOpen}
             onRequestClose={onRequestClose}
diff --git a/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx b/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx
index d92a9447..3f6f4798 100644
--- a/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx
+++ b/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx
@@ -10,14 +10,14 @@ let mockUseAdvertiserUpdate = {
         daily_sell_limit: 200,
     },
     error: undefined,
-    isLoading: true,
+    isPending: true,
     isSuccess: false,
     mutate: mockUseAdvertiserUpdateMutate,
 };
 
-jest.mock('@deriv/api-v2', () => ({
-    ...jest.requireActual('@deriv/api-v2'),
-    p2p: {
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    api: {
         advertiser: {
             useUpdate: jest.fn(() => mockUseAdvertiserUpdate),
         },
@@ -25,7 +25,7 @@ jest.mock('@deriv/api-v2', () => ({
 }));
 
 describe('DailyLimitModal', () => {
-    it('should render loader when data is not ready', () => {
+    it('should render loader when data is not ready', async () => {
         render(<DailyLimitModal currency='USD' isModalOpen onRequestClose={mockOnRequestClose} />);
 
         expect(screen.getByTestId('dt_derivs-loader')).toBeVisible();
@@ -33,7 +33,7 @@ describe('DailyLimitModal', () => {
     it('should render the correct title and behaviour', async () => {
         mockUseAdvertiserUpdate = {
             ...mockUseAdvertiserUpdate,
-            isLoading: false,
+            isPending: false,
             isSuccess: false,
         };
         render(<DailyLimitModal currency='USD' isModalOpen onRequestClose={mockOnRequestClose} />);
@@ -55,7 +55,7 @@ describe('DailyLimitModal', () => {
     it('should render the successful limits increase', async () => {
         mockUseAdvertiserUpdate = {
             ...mockUseAdvertiserUpdate,
-            isLoading: false,
+            isPending: false,
             isSuccess: true,
         };
         render(<DailyLimitModal currency='USD' isModalOpen onRequestClose={mockOnRequestClose} />);
diff --git a/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx b/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx
index 239d5542..e7992cfc 100644
--- a/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx
+++ b/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx
@@ -17,8 +17,8 @@ const mockUseGet = {
     isLoading: false,
 };
 
-jest.mock('@deriv/api-v2', () => ({
-    p2p: {
+jest.mock('@/hooks', () => ({
+    api: {
         advert: {
             useGet: jest.fn(() => mockUseGet),
         },
diff --git a/src/components/Modals/NicknameModal/NicknameModal.tsx b/src/components/Modals/NicknameModal/NicknameModal.tsx
index 97e1cd56..4302917f 100644
--- a/src/components/Modals/NicknameModal/NicknameModal.tsx
+++ b/src/components/Modals/NicknameModal/NicknameModal.tsx
@@ -40,7 +40,7 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) =>
 
     useEffect(() => {
         if (isSuccess) {
-            onRequestClose;
+            onRequestClose();
             setHasCreatedAdvertiser(true);
         } else if (isError) {
             debouncedReset();
@@ -90,7 +90,7 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) =>
                         color='black'
                         onClick={() => {
                             history.push(BUY_SELL_URL);
-                            onRequestClose;
+                            onRequestClose();
                         }}
                         size='lg'
                         textSize={textSize}
diff --git a/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx b/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx
index deb88a39..db49c14f 100644
--- a/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx
+++ b/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx
@@ -29,9 +29,9 @@ jest.mock('@deriv-com/ui', () => ({
     }),
 }));
 
-jest.mock('@deriv/api-v2', () => ({
-    ...jest.requireActual('@deriv/api-v2'),
-    p2p: {
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    api: {
         advertiser: {
             useCreate: jest.fn(() => ({
                 error: undefined,
@@ -78,7 +78,7 @@ describe('NicknameModal', () => {
         expect(mockedMutate).toHaveBeenCalledWith({
             name: 'Nahida',
         });
-        expect(mockUseAdvertiserInfoState().setHasCreatedAdvertiser).toBeCalledWith(true);
+        expect(mockUseAdvertiserInfoState().setHasCreatedAdvertiser).toHaveBeenCalledWith(true);
     });
     it('should invoke reset when there is an error from creating advertiser', async () => {
         (mockedUseAdvertiserCreate as jest.Mock).mockImplementationOnce(() => ({
@@ -89,11 +89,9 @@ describe('NicknameModal', () => {
             reset: mockedReset,
         }));
 
-        await (() => {
-            render(<NicknameModal {...mockProps} />);
-        });
+        render(<NicknameModal {...mockProps} />);
 
-        expect(mockedReset).toBeCalled();
+        expect(mockedReset).toHaveBeenCalled();
     });
     it('should close the modal when Cancel button is clicked', async () => {
         (mockedUseAdvertiserCreate as jest.Mock).mockImplementationOnce(() => ({
@@ -111,7 +109,7 @@ describe('NicknameModal', () => {
         });
         await userEvent.click(cancelBtn);
 
-        expect(mockPush).toBeCalledWith('/buy-sell');
-        expect(mockProps.onRequestClose).toBeCalledWith(false);
+        expect(mockPush).toHaveBeenCalledWith('/buy-sell');
+        expect(mockProps.onRequestClose).toHaveBeenCalled();
     });
 });
diff --git a/src/components/Modals/OrderDetailsComplainModal/__tests__/OrderDetailsComplainModal.spec.tsx b/src/components/Modals/OrderDetailsComplainModal/__tests__/OrderDetailsComplainModal.spec.tsx
index e510c872..b6547fca 100644
--- a/src/components/Modals/OrderDetailsComplainModal/__tests__/OrderDetailsComplainModal.spec.tsx
+++ b/src/components/Modals/OrderDetailsComplainModal/__tests__/OrderDetailsComplainModal.spec.tsx
@@ -14,9 +14,9 @@ const mockUseDispute = {
     mutate: jest.fn(),
 };
 
-jest.mock('@deriv/api-v2', () => ({
-    ...jest.requireActual('@deriv/api-v2'),
-    p2p: {
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    api: {
         orderDispute: {
             useDispute: () => mockUseDispute,
         },
diff --git a/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx b/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx
index d76f394c..93af0aa5 100644
--- a/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx
+++ b/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx
@@ -1,6 +1,6 @@
 import html2canvas from 'html2canvas';
 import { useDevice } from '@deriv-com/ui';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ShareAdsModal from '../ShareAdsModal';
 
@@ -24,8 +24,8 @@ const mockUseGet = {
     isLoading: false,
 };
 
-jest.mock('@deriv/api-v2', () => ({
-    p2p: {
+jest.mock('@/hooks', () => ({
+    api: {
         advert: {
             useGet: jest.fn(() => mockUseGet),
         },
@@ -50,8 +50,8 @@ jest.mock('@deriv-com/ui', () => ({
 }));
 
 const mockCopyFn = jest.fn();
-jest.mock('@/hooks', () => ({
-    ...jest.requireActual('@/hooks'),
+jest.mock('@/hooks/custom-hooks', () => ({
+    ...jest.requireActual('@/hooks/custom-hooks'),
     useCopyToClipboard: jest.fn(() => [true, mockCopyFn, jest.fn()]),
 }));
 
@@ -77,21 +77,26 @@ describe('ShareAdsModal', () => {
     });
 
     it('should call onCopy function when clicking on copy icon', async () => {
-        jest.useFakeTimers();
+        mockUseDevice.mockReturnValue({
+            isDesktop: false,
+            isMobile: true,
+        });
 
         render(<ShareAdsModal {...mockProps} />);
+
         const copyButton = screen.getByRole('button', { name: 'Copy link' });
         await userEvent.click(copyButton);
-        await act(async () => {
-            jest.runAllTimers();
-            await Promise.resolve();
-        });
 
         expect(mockCopyFn).toHaveBeenCalledWith(
             `${window.location.href}advertiser/${mockUseGet.data.advertiser_details.id}?advert_id=${mockProps.id}`
         );
     });
     it('should call html2canvas function when clicking on Download this QR code button', async () => {
+        mockUseDevice.mockReturnValue({
+            isDesktop: false,
+            isMobile: true,
+        });
+
         render(<ShareAdsModal {...mockProps} />);
 
         const downloadButton = screen.getByRole('button', { name: 'Download this QR code' });
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
index 95c7dd52..3791937a 100644
--- a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
+++ b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
@@ -2,9 +2,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?react';
-import IcCashierEwallet from '../../../public/ic-cashier-ewallet.svg?react';
-import IcCashierOther from '../../../public/ic-cashier-other.svg?react';
+import { ReactComponent as IcCashierBankTransfer } from '../../../public/ic-cashier-bank-transfer.svg';
+import { ReactComponent as IcCashierEwallet } from '../../../public/ic-cashier-ewallet.svg';
+import { ReactComponent as IcCashierOther } from '../../../public/ic-cashier-other.svg';
 import './PaymentMethodCardHeader.scss';
 
 type TPaymentMethodCardHeaderProps = {
diff --git a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx
index 54c8a117..1bc6c224 100644
--- a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx
+++ b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx
@@ -1,8 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { PaymentMethodCardHeader } from '../PaymentMethodCardHeader';
 
-jest.mock('../../../public/ic-cashier-ewallet.svg?react', () => 'span');
-
 describe('PaymentMethodCardHeader', () => {
     it('should render the component correctly', () => {
         render(
diff --git a/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx b/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx
index 6bfdca12..cab748ed 100644
--- a/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx
+++ b/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx
@@ -3,9 +3,9 @@ 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?react';
-import IcCashierEwallet from '../../public/ic-cashier-ewallet.svg?react';
-import IcCashierOther from '../../public/ic-cashier-other.svg?react';
+import { ReactComponent as IcCashierBankTransfer } from '../../public/ic-cashier-bank-transfer.svg';
+import { ReactComponent as IcCashierEwallet } from '../../public/ic-cashier-ewallet.svg';
+import { ReactComponent as IcCashierOther } from '../../public/ic-cashier-other.svg';
 
 type TPaymentMethodWithIconProps = {
     className?: string;
diff --git a/src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx b/src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx
index d17faaf8..070dca6e 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?react';
-import SendMessageIcon from '../../../../public/ic-send-message.svg?react';
+import { ReactComponent as AttachmentIcon } from '../../../../public/ic-attachment.svg';
+import { ReactComponent as SendMessageIcon } from '../../../../public/ic-send-message.svg';
 
 type TChatFooterIconProps = {
     length: number;
diff --git a/src/pages/orders/components/ChatMessages/ChatMessages.tsx b/src/pages/orders/components/ChatMessages/ChatMessages.tsx
index 982393eb..616bc0a8 100644
--- a/src/pages/orders/components/ChatMessages/ChatMessages.tsx
+++ b/src/pages/orders/components/ChatMessages/ChatMessages.tsx
@@ -5,7 +5,7 @@ import { CHAT_FILE_TYPE, CHAT_MESSAGE_TYPE } from '@/constants';
 import { useSendbird } from '@/hooks/custom-hooks';
 import { convertToMB, formatMilliseconds } from '@/utils';
 import { Text, useDevice } from '@deriv-com/ui';
-import PDFIcon from '../../../../public/ic-pdf.svg?react';
+import { ReactComponent as PDFIcon } from '../../../../public/ic-pdf.svg';
 import { ChatMessageReceipt } from '../ChatMessageReceipt';
 import { ChatMessageText } from '../ChatMessageText';
 import './ChatMessages.scss';
diff --git a/tsconfig.json b/tsconfig.json
index a3bcab7b..62a550e0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,30 +1,29 @@
 {
-  "compilerOptions": {
-    "baseUrl": "./",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
+    "compilerOptions": {
+        "baseUrl": "./",
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
 
-    "esModuleInterop": true,
+        "esModuleInterop": true,
 
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "types": ["@testing-library/jest-dom"],
-    "paths": {
-      "@/*": ["src/*"]
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "types": ["@testing-library/jest-dom"],
+        "paths": {
+            "@/*": ["src/*"]
+        }
     },
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }],
+    "include": ["src", "vite-env-override.d.ts"],
+    "references": [{ "path": "./tsconfig.node.json" }]
 }
-
diff --git a/vite-env-override.d.ts b/vite-env-override.d.ts
new file mode 100644
index 00000000..4d8cc360
--- /dev/null
+++ b/vite-env-override.d.ts
@@ -0,0 +1,5 @@
+declare module '*.svg' {
+    import * as React from 'react';
+
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+}
diff --git a/vite.config.ts b/vite.config.ts
index b13f5ffe..2895a173 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 import { defineConfig } from 'vite';
-import svgr from 'vite-plugin-svgr';
+import svgr from '@svgr/rollup';
 import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/