diff --git a/gatsby-browser.js b/gatsby-browser.js
index a53c3124d4a..37efbcdb2eb 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -15,9 +15,11 @@ import {
     getLanguage,
     updateURLAsPerUserLanguage,
 } from 'common/utility'
-import './static/css/ibm-plex-sans-var.css'
 import './static/css/noto-sans-arabic.css'
 import './static/css/ubuntu.css'
+import './static/css/global.css'
+import '@deriv-com/blocks/style.css'
+import '@deriv-com/components/style.css'
 
 const is_browser = typeof window !== 'undefined'
 
diff --git a/gatsby-config.js b/gatsby-config.js
index 66d97899414..f0b9729d8b1 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -56,6 +56,7 @@ module.exports = {
         //         // precachePages: [`/`],
         //     },
         // },
+        'gatsby-plugin-postcss',
         {
             resolve: 'gatsby-plugin-sass',
             options: {
diff --git a/package-lock.json b/package-lock.json
index 9db448a1f43..c2eaf2b06b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,54 +9,59 @@
             "version": "0.1.0",
             "license": "Apache License 2.0",
             "dependencies": {
-                "@artsy/fresnel": "^6.1.0",
+                "@artsy/fresnel": "^6.2.1",
                 "@builder.io/partytown": "^0.8.1",
-                "@deriv/analytics": "^1.4.4",
-                "@deriv/deriv-api": "^1.0.11",
-                "@hookform/resolvers": "^3.0.1",
-                "@livechat/customer-sdk": "^3.1.0",
-                "@loadable/component": "^5.15.2",
-                "@radix-ui/react-accordion": "^1.1.0",
-                "@radix-ui/react-alert-dialog": "^1.0.3",
-                "@radix-ui/react-dropdown-menu": "^2.0.2",
-                "@radix-ui/react-navigation-menu": "^1.1.2",
-                "@svgr/webpack": "^8.0.1",
-                "@tanstack/react-table": "^8.8.5",
+                "@deriv-com/blocks": "^0.52.0",
+                "@deriv-com/components": "^0.29.0",
+                "@deriv-com/hooks": "^0.10.0",
+                "@deriv-com/providers": "^0.10.0",
+                "@deriv/analytics": "^1.4.3",
+                "@deriv/deriv-api": "^1.0.13",
+                "@deriv/quill-design": "^1.2.6",
+                "@deriv/quill-icons": "^1.0.16",
+                "@hookform/resolvers": "^3.3.2",
+                "@livechat/customer-sdk": "^3.1.5",
+                "@loadable/component": "^5.15.3",
+                "@radix-ui/react-accordion": "^1.1.2",
+                "@radix-ui/react-alert-dialog": "^1.0.5",
+                "@radix-ui/react-dropdown-menu": "^2.0.6",
+                "@radix-ui/react-navigation-menu": "^1.1.4",
+                "@svgr/webpack": "^8.1.0",
+                "@tanstack/react-table": "^8.10.7",
                 "@vercel/gatsby-plugin-vercel-builder": "^0.1.2",
                 "cli-select": "^1.1.2",
                 "clsx": "^1.2.1",
                 "commander": "^8.3.0",
-                "crc-32": "^1.2.0",
+                "crc-32": "^1.2.2",
                 "cssnano": "^5.1.15",
                 "deriv-api-ts": "^1.0.7",
                 "embla-carousel-autoplay": "^6.2.0",
                 "embla-carousel-react": "8.0.0-rc11",
-                "eslint-import-resolver-node": "^0.3.6",
+                "eslint-import-resolver-node": "^0.3.9",
                 "extend": "^3.0.2",
-                "firebase": "^9.22.1",
-                "formik": "^2.2.9",
-                "gatsby": "^5.11.0",
+                "firebase": "^9.23.0",
+                "formik": "^2.4.5",
+                "gatsby": "^5.12.11",
                 "gatsby-plugin-anchor-links": "^1.2.1",
-                "gatsby-plugin-canonical-urls": "^5.11.0",
+                "gatsby-plugin-canonical-urls": "^5.12.0",
                 "gatsby-plugin-image": "3.11.0",
-                "gatsby-plugin-manifest": "^5.11.0",
+                "gatsby-plugin-manifest": "^5.12.3",
                 "gatsby-plugin-robots-txt": "^1.8.0",
-                "gatsby-plugin-sass": "^6.11.0",
-                "gatsby-plugin-sharp": "^5.11.0",
-                "gatsby-plugin-sitemap": "^6.11.0",
+                "gatsby-plugin-sass": "^6.12.3",
+                "gatsby-plugin-sharp": "^5.12.3",
+                "gatsby-plugin-sitemap": "^6.12.3",
                 "gatsby-plugin-svgr": "^3.0.0-beta.0",
                 "gatsby-plugin-use-query-params": "^1.0.1",
-                "gatsby-source-filesystem": "^5.11.0",
+                "gatsby-source-filesystem": "^5.12.1",
                 "gatsby-source-strapi": "^3.3.1",
-                "gatsby-transformer-sharp": "^5.11.0",
-                "i18next": "^21.6.5",
+                "gatsby-transformer-sharp": "^5.12.3",
+                "i18next": "^21.10.0",
                 "install": "^0.13.0",
                 "js-cookie": "^2.2.1",
-                "lottie-web": "^5.8.1",
+                "lottie-web": "^5.12.2",
                 "match-sorter": "^6.3.1",
-                "npm": "^9.6.2",
+                "npm": "^9.9.2",
                 "p-min-delay": "^4.0.2",
-                "postcss": "^8.4.5",
                 "postcss-discard-duplicates": "^5.1.0",
                 "postcss-ts-classnames": "^0.3.0",
                 "prompt-sync": "^4.2.0",
@@ -65,86 +70,91 @@
                 "react-date-picker": "8.4.0",
                 "react-device-detect": "^2.2.2",
                 "react-dom": "^18.2.0",
-                "react-hook-form": "^7.43.9",
-                "react-i18next": "^11.15.3",
-                "react-intersection-observer": "^9.4.3",
+                "react-hook-form": "^7.48.2",
+                "react-i18next": "^11.18.6",
+                "react-intersection-observer": "^9.5.3",
                 "react-is": "^17.0.2",
                 "react-ticker": "^1.3.2",
                 "react-tiny-popover": "^7.2.4",
                 "remove": "^0.1.5",
-                "rxjs": "^7.8.0",
-                "sass": "^1.58.3",
-                "swiper": "^9.1.1",
+                "rxjs": "^7.8.1",
+                "sass": "^1.69.5",
+                "swiper": "^9.4.1",
                 "use-query-params": "^1.2.3",
                 "usehooks-ts": "^2.9.1",
-                "webpack": "^5.65.0",
-                "yup": "^1.0.2"
+                "webpack": "^5.89.0",
+                "yup": "^1.3.2"
             },
             "devDependencies": {
-                "@commitlint/cli": "^16.2.1",
-                "@commitlint/config-conventional": "^16.2.1",
-                "@deriv/api-types": "^1.0.94",
-                "@graphql-codegen/cli": "^2.6.2",
-                "@graphql-codegen/typescript": "^2.4.5",
-                "@graphql-codegen/typescript-operations": "^2.3.2",
-                "@loadable/babel-plugin": "^5.15.3",
+                "@commitlint/cli": "^16.3.0",
+                "@commitlint/config-conventional": "^16.2.4",
+                "@deriv/api-types": "^1.0.137",
+                "@graphql-codegen/cli": "^2.16.5",
+                "@graphql-codegen/typescript": "^2.8.8",
+                "@graphql-codegen/typescript-operations": "^2.5.13",
+                "@loadable/babel-plugin": "^5.16.1",
+                "@parcel/watcher": "^2.3.0",
                 "@storybook/addon-actions": "^6.4.9",
-                "@storybook/addon-essentials": "^6.4.9",
-                "@storybook/addon-links": "^6.4.9",
-                "@storybook/builder-webpack5": "^6.4.9",
-                "@storybook/manager-webpack5": "^6.4.9",
-                "@storybook/react": "^6.4.9",
+                "@storybook/addon-essentials": "^6.5.16",
+                "@storybook/addon-links": "^6.5.16",
+                "@storybook/builder-webpack5": "^6.5.16",
+                "@storybook/manager-webpack5": "^6.5.16",
+                "@storybook/react": "^6.5.16",
                 "@stylelint/postcss-css-in-js": "^0.38.0",
-                "@testing-library/jest-dom": "^5.16.4",
-                "@testing-library/react": "^14.0.0",
-                "@testing-library/user-event": "^14.4.3",
-                "@types/jest": "^29.5.3",
-                "@types/js-cookie": "^3.0.3",
-                "@types/node": "^20.4.8",
-                "@types/react": "^18.2.18",
-                "@types/react-dom": "^18.2.7",
-                "@types/react-test-renderer": "^18.0.0",
-                "@types/styled-components": "^5.1.26",
-                "@typescript-eslint/eslint-plugin": "^5.9.0",
-                "@typescript-eslint/parser": "^5.9.0",
+                "@testing-library/jest-dom": "^5.17.0",
+                "@testing-library/react": "^14.1.2",
+                "@testing-library/user-event": "^14.5.1",
+                "@types/jest": "^29.5.10",
+                "@types/js-cookie": "^3.0.6",
+                "@types/node": "^20.10.0",
+                "@types/react": "^18.2.38",
+                "@types/react-dom": "^18.2.17",
+                "@types/react-test-renderer": "^18.0.7",
+                "@types/styled-components": "^5.1.32",
+                "@typescript-eslint/eslint-plugin": "^5.62.0",
+                "@typescript-eslint/parser": "^5.62.0",
+                "autoprefixer": "^10.4.16",
                 "babel-eslint": "10.1.0",
-                "babel-jest": "^29.5.0",
-                "babel-plugin-styled-components": "^2.0.2",
+                "babel-jest": "^29.7.0",
+                "babel-plugin-styled-components": "^2.1.4",
                 "babel-preset-gatsby": "^2.25.0",
                 "eslint": "^7.32.0",
                 "eslint-loader": "^4.0.2",
-                "eslint-plugin-deprecation": "^1.3.2",
-                "eslint-plugin-import": "^2.25.4",
-                "eslint-plugin-jest": "^27.2.1",
-                "eslint-plugin-react": "^7.28.0",
-                "eslint-plugin-react-hooks": "^4.5.0",
-                "eslint-webpack-plugin": "^3.1.1",
+                "eslint-plugin-deprecation": "^1.5.0",
+                "eslint-plugin-import": "^2.29.0",
+                "eslint-plugin-jest": "^27.6.0",
+                "eslint-plugin-react": "^7.33.2",
+                "eslint-plugin-react-hooks": "^4.6.0",
+                "eslint-webpack-plugin": "^3.2.0",
                 "gatsby-plugin-env-variables": "^2.3.0",
-                "gatsby-plugin-eslint": "^4.0.2",
-                "gatsby-plugin-styled-components": "^6.11.0",
-                "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.31",
+                "gatsby-plugin-eslint": "^4.0.4",
+                "gatsby-plugin-postcss": "^6.12.0",
+                "gatsby-plugin-styled-components": "^6.12.0",
+                "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
                 "gh-pages": "^3.2.3",
                 "husky": "^7.0.4",
                 "identity-obj-proxy": "^3.0.0",
-                "jest": "^29.5.0",
+                "jest": "^29.7.0",
                 "jest-chain": "^1.1.6",
-                "jest-config": "^29.5.0",
-                "jest-environment-jsdom": "^29.5.0",
-                "jest-extended": "^4.0.0",
-                "lint-staged": "^12.1.5",
+                "jest-config": "^29.7.0",
+                "jest-environment-jsdom": "^29.7.0",
+                "jest-extended": "^4.0.2",
+                "lint-staged": "^12.5.0",
                 "npm-force-resolutions": "0.0.10",
-                "prettier": "^2.5.1",
-                "query-string": "^7.0.1",
+                "postcss": "^8.4.31",
+                "prettier": "^2.8.8",
+                "query-string": "^7.1.3",
                 "react-test-renderer": "^18.2.0",
-                "styled-components": "^5.3.3",
-                "stylelint": "^14.2.0",
-                "stylelint-config-prettier": "^9.0.3",
+                "styled-components": "^5.3.11",
+                "stylelint": "^14.16.1",
+                "stylelint-config-prettier": "^9.0.5",
                 "stylelint-config-standard": "^24.0.0",
                 "stylelint-config-styled-components": "^0.1.1",
                 "stylelint-processor-styled-components": "^1.10.0",
-                "stylelint-webpack-plugin": "^3.1.0",
-                "typescript": "^4.5.4",
-                "typescript-plugin-css-modules": "^4.2.2"
+                "stylelint-webpack-plugin": "^3.3.0",
+                "tailwindcss": "^3.3.5",
+                "typescript": "^5.3.2",
+                "typescript-plugin-css-modules": "^4.2.3"
             },
             "engines": {
                 "node": "18.x",
@@ -165,6 +175,18 @@
             "integrity": "sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==",
             "dev": true
         },
+        "node_modules/@alloc/quick-lru": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+            "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/@ampproject/remapping": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -2758,6 +2780,19 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@commitlint/load/node_modules/typescript": {
+            "version": "4.9.5",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+            "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+            "dev": true,
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=4.2.0"
+            }
+        },
         "node_modules/@commitlint/message": {
             "version": "16.2.1",
             "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-16.2.1.tgz",
@@ -2968,10 +3003,30 @@
                 "postcss-selector-parser": "^6.0.10"
             }
         },
+        "node_modules/@deriv-com/blocks": {
+            "version": "0.52.0",
+            "resolved": "https://npm.pkg.github.com/download/@deriv-com/blocks/0.52.0/723ff18725a897490e5d654b7d02ac7ff6b6c6e9",
+            "integrity": "sha512-mcmz9Y+pnym/AWb1ABrulpckkCUhjORxb4NKI9hP5AJjPwC1vCoK2G0M6TGB7pWoy2zJFhVT20Z+I77UtcgM8g=="
+        },
+        "node_modules/@deriv-com/components": {
+            "version": "0.29.0",
+            "resolved": "https://npm.pkg.github.com/download/@deriv-com/components/0.29.0/181cf88daaa09e58be1fe51992c2fbc95a78f972",
+            "integrity": "sha512-w7KkQpjUaDxD1U0hKy0e49UUhb+TGfL44l0GapV7ILNkGIRmn1t+QkeP6A90ml0ydyISk6u8+57ONMJ7NLx1ng=="
+        },
+        "node_modules/@deriv-com/hooks": {
+            "version": "0.10.0",
+            "resolved": "https://npm.pkg.github.com/download/@deriv-com/hooks/0.10.0/8e9f71a103b896618566a4505f74c93de107ecc6",
+            "integrity": "sha512-8BpA5OPjaFx55LDp6BFhqW6gBsP63X7E4GstdD1HAh8h9Dy1tq6nztJC0bSY9O9tjAZ0/hFrshGALv2L9ak6Sw=="
+        },
+        "node_modules/@deriv-com/providers": {
+            "version": "0.10.0",
+            "resolved": "https://npm.pkg.github.com/download/@deriv-com/providers/0.10.0/8e77bc95f5058c59ba665e58585091f270e4d94b",
+            "integrity": "sha512-FE40EqmS6cmi4JWQurThE/mQDZesg6iBDRfTTwE5YKnc4w+2EqsO8Eigm4vO79elV3iUkvLLeU5Eawv66uwzqQ=="
+        },
         "node_modules/@deriv/analytics": {
-            "version": "1.4.4",
-            "resolved": "https://registry.npmjs.org/@deriv/analytics/-/analytics-1.4.4.tgz",
-            "integrity": "sha512-brMCtAel5z4GOnDA32dM93buNu9obtqz6+SlzQuXnKdsonF/YaY+XjNC+rmURnV4NqTUq5nRJyIxY6h9kitsrw==",
+            "version": "1.4.6",
+            "resolved": "https://registry.npmjs.org/@deriv/analytics/-/analytics-1.4.6.tgz",
+            "integrity": "sha512-KpWjnqXs1S2bPenfyBlVMeP1vOj68XCe+2gOTvPGb/1XZ8rFat43AkqiRpdxngMIklPsHxjxT/cMyy/eBRtLBw==",
             "dependencies": {
                 "@growthbook/growthbook": "^0.29.0",
                 "rudder-sdk-js": "^2.35.0"
@@ -2982,9 +3037,9 @@
             }
         },
         "node_modules/@deriv/api-types": {
-            "version": "1.0.141",
-            "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.141.tgz",
-            "integrity": "sha512-Q/7bm4Xc/nD4djvBXGdPCbY5Tr/Ce7KM6wVJtYn8pTtW5bdVDffAk9i0DdgFh66gZeTL4IPQ9CwcZOcpvuXrrw=="
+            "version": "1.0.144",
+            "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.144.tgz",
+            "integrity": "sha512-hlEH95LHZHmPft+K1Edi+XmI5PVBnWtL6FvaLWxb6uirbjpKZ+ZFnuY9zqdg63BcbG1ZhQCjb5opzK5zzFyReQ=="
         },
         "node_modules/@deriv/deriv-api": {
             "version": "1.0.13",
@@ -3012,6 +3067,31 @@
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
             "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         },
+        "node_modules/@deriv/quill-design": {
+            "version": "1.2.9",
+            "resolved": "https://registry.npmjs.org/@deriv/quill-design/-/quill-design-1.2.9.tgz",
+            "integrity": "sha512-2ShVhyTa76NGTM0Fybul0FhCZBYMihG9c+hjch5zD6sWWQ2a3kTcHcmPHhReI4Ee4/mfNf1YWFQdfEr7mgzi3g==",
+            "peerDependencies": {
+                "@deriv/quill-icons": "^1.0.10",
+                "@headlessui/react": "^1.7.17",
+                "@types/react": "^17.x || ^18.x",
+                "@use-gesture/react": "^10.3.0",
+                "class-variance-authority": "^0.7.0",
+                "react": "^17.x || ^18.x",
+                "react-dom": "^17.x || ^18.x",
+                "tailwind-merge": "^1.14.0",
+                "usehooks-ts": "^2.9.1"
+            }
+        },
+        "node_modules/@deriv/quill-icons": {
+            "version": "1.0.16",
+            "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.0.16.tgz",
+            "integrity": "sha512-bKjhIictrp85MKNKWZ6B5YFbUUulZVgIcPbsWJ8eXxhAYKAKAFleQXT+HFWJB6ciq4qoD83h3VzXN5eH5r1JkQ==",
+            "peerDependencies": {
+                "react": ">= 16",
+                "react-dom": ">= 16"
+            }
+        },
         "node_modules/@discoveryjs/json-ext": {
             "version": "0.5.7",
             "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -4158,9 +4238,9 @@
             "integrity": "sha512-Dq5rYfEpdeel0bLVN+nfD1VWmzCkK+pJbSjIawGE+RY4+NIJqhbUDDQjvV0NUK84fMfwxvtFoCtEe70HfZjFcw=="
         },
         "node_modules/@floating-ui/core": {
-            "version": "1.5.1",
-            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
-            "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
+            "version": "1.5.2",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
+            "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
             "dependencies": {
                 "@floating-ui/utils": "^0.1.3"
             }
@@ -5271,6 +5351,22 @@
                 "@hapi/hoek": "^9.0.0"
             }
         },
+        "node_modules/@headlessui/react": {
+            "version": "1.7.17",
+            "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz",
+            "integrity": "sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==",
+            "peer": true,
+            "dependencies": {
+                "client-only": "^0.0.1"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "react": "^16 || ^17 || ^18",
+                "react-dom": "^16 || ^17 || ^18"
+            }
+        },
         "node_modules/@hookform/resolvers": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.2.tgz",
@@ -7289,9 +7385,9 @@
             }
         },
         "node_modules/@livechat/platform-client/node_modules/@livechat/data-utils": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/@livechat/data-utils/-/data-utils-1.0.3.tgz",
-            "integrity": "sha512-Ao0b6UMxJ1CmqRhFjMsd2n6gM4fmfbwe2gZTbTLdvU2u5OQHj008T20mjQ+NOPwbcT+8dMj8wF5TrftMu4oA1w=="
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@livechat/data-utils/-/data-utils-1.0.4.tgz",
+            "integrity": "sha512-LhSgNVrNqfa37pajGCv96jvsEwuUKoTmb4NXLr2Mk4gN2YYYkmqzHWqGAcGzENFeSar4R/P3LohZO8tkbmnb6g=="
         },
         "node_modules/@livechat/promise-try": {
             "version": "0.1.0",
@@ -7321,9 +7417,9 @@
             }
         },
         "node_modules/@livechat/url-utils/node_modules/@livechat/data-utils": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/@livechat/data-utils/-/data-utils-1.0.3.tgz",
-            "integrity": "sha512-Ao0b6UMxJ1CmqRhFjMsd2n6gM4fmfbwe2gZTbTLdvU2u5OQHj008T20mjQ+NOPwbcT+8dMj8wF5TrftMu4oA1w=="
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@livechat/data-utils/-/data-utils-1.0.4.tgz",
+            "integrity": "sha512-LhSgNVrNqfa37pajGCv96jvsEwuUKoTmb4NXLr2Mk4gN2YYYkmqzHWqGAcGzENFeSar4R/P3LohZO8tkbmnb6g=="
         },
         "node_modules/@livechat/websocket-manager": {
             "version": "0.1.1",
@@ -10705,9 +10801,9 @@
             "dev": true
         },
         "node_modules/@storybook/builder-webpack4/node_modules/@types/node": {
-            "version": "16.18.67",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz",
-            "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==",
+            "version": "16.18.68",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz",
+            "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==",
             "dev": true
         },
         "node_modules/@storybook/builder-webpack4/node_modules/@webassemblyjs/ast": {
@@ -10853,6 +10949,28 @@
                 "node": ">=0.4.0"
             }
         },
+        "node_modules/@storybook/builder-webpack4/node_modules/autoprefixer": {
+            "version": "9.8.8",
+            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz",
+            "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
+            "dev": true,
+            "dependencies": {
+                "browserslist": "^4.12.0",
+                "caniuse-lite": "^1.0.30001109",
+                "normalize-range": "^0.1.2",
+                "num2fraction": "^1.2.2",
+                "picocolors": "^0.2.1",
+                "postcss": "^7.0.32",
+                "postcss-value-parser": "^4.1.0"
+            },
+            "bin": {
+                "autoprefixer": "bin/autoprefixer"
+            },
+            "funding": {
+                "type": "tidelift",
+                "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+            }
+        },
         "node_modules/@storybook/builder-webpack4/node_modules/braces": {
             "version": "2.3.2",
             "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
@@ -11390,6 +11508,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@storybook/builder-webpack4/node_modules/picocolors": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+            "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+            "dev": true
+        },
         "node_modules/@storybook/builder-webpack4/node_modules/pkg-dir": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -11977,9 +12101,9 @@
             }
         },
         "node_modules/@storybook/builder-webpack5/node_modules/@types/node": {
-            "version": "16.18.67",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz",
-            "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==",
+            "version": "16.18.68",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz",
+            "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==",
             "dev": true
         },
         "node_modules/@storybook/channel-postmessage": {
@@ -12307,9 +12431,9 @@
             }
         },
         "node_modules/@storybook/core-common/node_modules/@types/node": {
-            "version": "16.18.67",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz",
-            "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==",
+            "version": "16.18.68",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz",
+            "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==",
             "dev": true
         },
         "node_modules/@storybook/core-common/node_modules/@webassemblyjs/ast": {
@@ -13056,9 +13180,9 @@
             }
         },
         "node_modules/@storybook/core-server/node_modules/@types/node": {
-            "version": "16.18.67",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz",
-            "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==",
+            "version": "16.18.68",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz",
+            "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==",
             "dev": true
         },
         "node_modules/@storybook/core-server/node_modules/@webassemblyjs/ast": {
@@ -13873,9 +13997,9 @@
             "dev": true
         },
         "node_modules/@storybook/manager-webpack4/node_modules/@types/node": {
-            "version": "16.18.67",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz",
-            "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==",
+            "version": "16.18.68",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz",
+            "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==",
             "dev": true
         },
         "node_modules/@storybook/manager-webpack4/node_modules/@webassemblyjs/ast": {
@@ -14594,6 +14718,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@storybook/manager-webpack4/node_modules/picocolors": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+            "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+            "dev": true
+        },
         "node_modules/@storybook/manager-webpack4/node_modules/pkg-dir": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -15169,9 +15299,9 @@
             }
         },
         "node_modules/@storybook/manager-webpack5/node_modules/@types/node": {
-            "version": "16.18.67",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz",
-            "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==",
+            "version": "16.18.68",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz",
+            "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==",
             "dev": true
         },
         "node_modules/@storybook/manager-webpack5/node_modules/ansi-styles": {
@@ -15631,9 +15761,9 @@
             }
         },
         "node_modules/@storybook/react/node_modules/@types/node": {
-            "version": "16.18.67",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz",
-            "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==",
+            "version": "16.18.68",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz",
+            "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==",
             "dev": true
         },
         "node_modules/@storybook/react/node_modules/fs-extra": {
@@ -16881,9 +17011,9 @@
             }
         },
         "node_modules/@types/jest": {
-            "version": "29.5.10",
-            "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.10.tgz",
-            "integrity": "sha512-tE4yxKEphEyxj9s4inideLHktW/x6DwesIwWZ9NN1FKf9zbJYsnhBoA9vrHA/IuIOKwPa5PcFBNV4lpMIOEzyQ==",
+            "version": "29.5.11",
+            "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.11.tgz",
+            "integrity": "sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==",
             "dev": true,
             "dependencies": {
                 "expect": "^29.0.0",
@@ -17029,9 +17159,9 @@
             "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
         },
         "node_modules/@types/node": {
-            "version": "20.10.3",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.3.tgz",
-            "integrity": "sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==",
+            "version": "20.10.4",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz",
+            "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==",
             "dependencies": {
                 "undici-types": "~5.26.4"
             }
@@ -17150,9 +17280,9 @@
             }
         },
         "node_modules/@types/react/node_modules/csstype": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-            "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
         },
         "node_modules/@types/responselike": {
             "version": "1.0.3",
@@ -17210,9 +17340,9 @@
             "dev": true
         },
         "node_modules/@types/styled-components": {
-            "version": "5.1.32",
-            "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.32.tgz",
-            "integrity": "sha512-DqVpl8R0vbhVSop4120UHtGrFmHuPeoDwF4hDT0kPJTY8ty0SI38RV3VhCMsWigMUXG+kCXu7vMRqMFNy6eQgA==",
+            "version": "5.1.34",
+            "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz",
+            "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==",
             "dev": true,
             "dependencies": {
                 "@types/hoist-non-react-statics": "*",
@@ -17221,9 +17351,9 @@
             }
         },
         "node_modules/@types/styled-components/node_modules/csstype": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-            "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
             "dev": true
         },
         "node_modules/@types/tapable": {
@@ -17606,6 +17736,24 @@
                 "url": "https://opencollective.com/typescript-eslint"
             }
         },
+        "node_modules/@use-gesture/core": {
+            "version": "10.3.0",
+            "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.0.tgz",
+            "integrity": "sha512-rh+6MND31zfHcy9VU3dOZCqGY511lvGcfyJenN4cWZe0u1BH6brBpBddLVXhF2r4BMqWbvxfsbL7D287thJU2A==",
+            "peer": true
+        },
+        "node_modules/@use-gesture/react": {
+            "version": "10.3.0",
+            "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.0.tgz",
+            "integrity": "sha512-3zc+Ve99z4usVP6l9knYVbVnZgfqhKah7sIG+PS2w+vpig2v2OLct05vs+ZXMzwxdNCMka8B+8WlOo0z6Pn6DA==",
+            "peer": true,
+            "dependencies": {
+                "@use-gesture/core": "10.3.0"
+            },
+            "peerDependencies": {
+                "react": ">= 16.8.0"
+            }
+        },
         "node_modules/@vercel/build-utils": {
             "version": "5.9.0",
             "resolved": "https://registry.npmjs.org/@vercel/build-utils/-/build-utils-5.9.0.tgz",
@@ -18082,9 +18230,9 @@
             }
         },
         "node_modules/@whatwg-node/fetch/node_modules/@types/node": {
-            "version": "18.19.2",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.2.tgz",
-            "integrity": "sha512-6wzfBdbWpe8QykUkXBjtmO3zITA0A3FIjoy+in0Y2K4KrCiRhNYJIdwAPDffZ3G6GnaKaSLSEa9ZuORLfEoiwg==",
+            "version": "18.19.3",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.3.tgz",
+            "integrity": "sha512-k5fggr14DwAytoA/t8rPrIz++lXK7/DqckthCmoZOKNsEbJkId4Z//BqgApXBUGrGddrigYa1oqheo/7YmW4rg==",
             "dev": true,
             "peer": true,
             "dependencies": {
@@ -18214,9 +18362,9 @@
             }
         },
         "node_modules/acorn-globals/node_modules/acorn-walk": {
-            "version": "8.3.0",
-            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
-            "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+            "version": "8.3.1",
+            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.1.tgz",
+            "integrity": "sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==",
             "dev": true,
             "engines": {
                 "node": ">=0.4.0"
@@ -18485,6 +18633,12 @@
                 "url": "https://github.com/fb55/entities?sponsor=1"
             }
         },
+        "node_modules/any-promise": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+            "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+            "dev": true
+        },
         "node_modules/anymatch": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -18992,42 +19146,39 @@
             }
         },
         "node_modules/autoprefixer": {
-            "version": "9.8.8",
-            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz",
-            "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
-            "dev": true,
+            "version": "10.4.16",
+            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
+            "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
             "dependencies": {
-                "browserslist": "^4.12.0",
-                "caniuse-lite": "^1.0.30001109",
+                "browserslist": "^4.21.10",
+                "caniuse-lite": "^1.0.30001538",
+                "fraction.js": "^4.3.6",
                 "normalize-range": "^0.1.2",
-                "num2fraction": "^1.2.2",
-                "picocolors": "^0.2.1",
-                "postcss": "^7.0.32",
-                "postcss-value-parser": "^4.1.0"
+                "picocolors": "^1.0.0",
+                "postcss-value-parser": "^4.2.0"
             },
             "bin": {
                 "autoprefixer": "bin/autoprefixer"
             },
-            "funding": {
-                "type": "tidelift",
-                "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-            }
-        },
-        "node_modules/autoprefixer/node_modules/postcss": {
-            "version": "7.0.39",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-            "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-            "dev": true,
-            "dependencies": {
-                "picocolors": "^0.2.1",
-                "source-map": "^0.6.1"
-            },
             "engines": {
-                "node": ">=6.0.0"
+                "node": "^10 || ^12 || >=14"
             },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/postcss/"
+            "peerDependencies": {
+                "postcss": "^8.1.0"
             }
         },
         "node_modules/available-typed-arrays": {
@@ -21009,6 +21160,27 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/class-variance-authority": {
+            "version": "0.7.0",
+            "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+            "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+            "peer": true,
+            "dependencies": {
+                "clsx": "2.0.0"
+            },
+            "funding": {
+                "url": "https://joebell.co.uk"
+            }
+        },
+        "node_modules/class-variance-authority/node_modules/clsx": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+            "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+            "peer": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/clean-css": {
             "version": "5.3.3",
             "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -21154,6 +21326,12 @@
                 "node": ">= 10"
             }
         },
+        "node_modules/client-only": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+            "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+            "peer": true
+        },
         "node_modules/clipboardy": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -21836,9 +22014,9 @@
             }
         },
         "node_modules/core-js": {
-            "version": "3.33.3",
-            "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.3.tgz",
-            "integrity": "sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw==",
+            "version": "3.34.0",
+            "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.34.0.tgz",
+            "integrity": "sha512-aDdvlDder8QmY91H88GzNi9EtQi2TjvQhpCX6B1v/dAZHU1AuLgHvRh54RiOerpEhEW46Tkf+vgAViB/CWC0ag==",
             "hasInstallScript": true,
             "funding": {
                 "type": "opencollective",
@@ -21846,11 +22024,11 @@
             }
         },
         "node_modules/core-js-compat": {
-            "version": "3.33.3",
-            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.33.3.tgz",
-            "integrity": "sha512-cNzGqFsh3Ot+529GIXacjTJ7kegdt5fPXxCBVS1G0iaZpuo/tBz399ymceLJveQhFFZ8qThHiP3fzuoQjKN2ow==",
+            "version": "3.34.0",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.34.0.tgz",
+            "integrity": "sha512-4ZIyeNbW/Cn1wkMMDy+mvrRUxrwFNjKwbhCfQpDd+eLgYipDqp8oGFGtLmhh18EDPKA0g3VUBYOxQGGwvWLVpA==",
             "dependencies": {
-                "browserslist": "^4.22.1"
+                "browserslist": "^4.22.2"
             },
             "funding": {
                 "type": "opencollective",
@@ -21858,9 +22036,9 @@
             }
         },
         "node_modules/core-js-pure": {
-            "version": "3.33.3",
-            "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.33.3.tgz",
-            "integrity": "sha512-taJ00IDOP+XYQEA2dAe4ESkmHt1fL8wzYDo3mRWQey8uO9UojlBFMneA65kMyxfYP7106c6LzWaq7/haDT6BCQ==",
+            "version": "3.34.0",
+            "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.34.0.tgz",
+            "integrity": "sha512-pmhivkYXkymswFfbXsANmBAewXx86UBfmagP+w0wkK06kLsLlTK5oQmsURPivzMkIBQiYq2cjamcZExIwlFQIg==",
             "hasInstallScript": true,
             "funding": {
                 "type": "opencollective",
@@ -23671,6 +23849,12 @@
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
             "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         },
+        "node_modules/didyoumean": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+            "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+            "dev": true
+        },
         "node_modules/diff": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -23716,6 +23900,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/dlv": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+            "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+            "dev": true
+        },
         "node_modules/doctrine": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -23925,20 +24115,15 @@
                 "edge-runtime": "dist/cli/index.js"
             }
         },
-        "node_modules/edge-runtime/node_modules/picocolors": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-        },
         "node_modules/ee-first": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
             "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.603",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.603.tgz",
-            "integrity": "sha512-Dvo5OGjnl7AZTU632dFJtWj0uJK835eeOVQIuRcmBmsFsTNn3cL05FqOyHAfGQDIoHfLhyJ1Tya3PJ0ceMz54g=="
+            "version": "1.4.607",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.607.tgz",
+            "integrity": "sha512-YUlnPwE6eYxzwBnFmawA8LiLRfm70R2aJRIUv0n03uHt/cUzzYACOogmvk8M2+hVzt/kB80KJXx7d5f5JofPvQ=="
         },
         "node_modules/elliptic": {
             "version": "6.5.4",
@@ -28054,6 +28239,113 @@
                 "node": ">=18.0.0"
             }
         },
+        "node_modules/gatsby-plugin-postcss": {
+            "version": "6.12.0",
+            "resolved": "https://registry.npmjs.org/gatsby-plugin-postcss/-/gatsby-plugin-postcss-6.12.0.tgz",
+            "integrity": "sha512-uzlmFvPcsYKbyyMMsBR0W1iWGOiJPJVNiVwut7h3ah0mL0ooMO5ANO+E7Sv0crEXrSJ/4QymFRX4kHDBfVn87g==",
+            "dev": true,
+            "dependencies": {
+                "@babel/runtime": "^7.20.13",
+                "postcss-loader": "^7.3.3"
+            },
+            "engines": {
+                "node": ">=18.0.0"
+            },
+            "peerDependencies": {
+                "gatsby": "^5.0.0-next",
+                "postcss": "^8.0.5"
+            }
+        },
+        "node_modules/gatsby-plugin-postcss/node_modules/cosmiconfig": {
+            "version": "8.3.6",
+            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+            "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+            "dev": true,
+            "dependencies": {
+                "import-fresh": "^3.3.0",
+                "js-yaml": "^4.1.0",
+                "parse-json": "^5.2.0",
+                "path-type": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/d-fischer"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.9.5"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/gatsby-plugin-postcss/node_modules/jiti": {
+            "version": "1.21.0",
+            "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+            "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+            "dev": true,
+            "bin": {
+                "jiti": "bin/jiti.js"
+            }
+        },
+        "node_modules/gatsby-plugin-postcss/node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dev": true,
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/gatsby-plugin-postcss/node_modules/postcss-loader": {
+            "version": "7.3.3",
+            "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.3.tgz",
+            "integrity": "sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==",
+            "dev": true,
+            "dependencies": {
+                "cosmiconfig": "^8.2.0",
+                "jiti": "^1.18.2",
+                "semver": "^7.3.8"
+            },
+            "engines": {
+                "node": ">= 14.15.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            },
+            "peerDependencies": {
+                "postcss": "^7.0.0 || ^8.0.1",
+                "webpack": "^5.0.0"
+            }
+        },
+        "node_modules/gatsby-plugin-postcss/node_modules/semver": {
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+            "dev": true,
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/gatsby-plugin-postcss/node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+            "dev": true
+        },
         "node_modules/gatsby-plugin-robots-txt": {
             "version": "1.8.0",
             "resolved": "https://registry.npmjs.org/gatsby-plugin-robots-txt/-/gatsby-plugin-robots-txt-1.8.0.tgz",
@@ -28742,9 +29034,9 @@
             }
         },
         "node_modules/gatsby/node_modules/acorn-walk": {
-            "version": "8.3.0",
-            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
-            "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+            "version": "8.3.1",
+            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.1.tgz",
+            "integrity": "sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==",
             "engines": {
                 "node": ">=0.4.0"
             }
@@ -28763,42 +29055,6 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
-        "node_modules/gatsby/node_modules/autoprefixer": {
-            "version": "10.4.16",
-            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
-            "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/postcss/"
-                },
-                {
-                    "type": "tidelift",
-                    "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-                },
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "dependencies": {
-                "browserslist": "^4.21.10",
-                "caniuse-lite": "^1.0.30001538",
-                "fraction.js": "^4.3.6",
-                "normalize-range": "^0.1.2",
-                "picocolors": "^1.0.0",
-                "postcss-value-parser": "^4.2.0"
-            },
-            "bin": {
-                "autoprefixer": "bin/autoprefixer"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
-            }
-        },
         "node_modules/gatsby/node_modules/babel-preset-gatsby": {
             "version": "3.12.1",
             "resolved": "https://registry.npmjs.org/babel-preset-gatsby/-/babel-preset-gatsby-3.12.1.tgz",
@@ -29213,11 +29469,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/gatsby/node_modules/picocolors": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-        },
         "node_modules/gatsby/node_modules/pkg-dir": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -30752,9 +31003,9 @@
             }
         },
         "node_modules/html-webpack-plugin": {
-            "version": "5.5.3",
-            "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
-            "integrity": "sha512-6YrDKTuqaP/TquFH7h4srYWsZx+x6k6+FbsTm0ziCwGHDP78Unr1r9F/H4+sGmMbX08GQcJ+K64x55b+7VM/jg==",
+            "version": "5.5.4",
+            "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.4.tgz",
+            "integrity": "sha512-3wNSaVVxdxcu0jd4FpQFoICdqgxs4zIQQvj+2yQKFfBOnLETQ6X5CDWdeasuGlSsooFlMkEioWDTqBv1wvw5Iw==",
             "dev": true,
             "dependencies": {
                 "@types/html-minifier-terser": "^6.0.0",
@@ -38022,139 +38273,6 @@
                 "node-gyp-build-optional-packages-test": "build-test.js"
             }
         },
-        "node_modules/msw": {
-            "version": "1.3.2",
-            "resolved": "https://registry.npmjs.org/msw/-/msw-1.3.2.tgz",
-            "integrity": "sha512-wKLhFPR+NitYTkQl5047pia0reNGgf0P6a1eTnA5aNlripmiz0sabMvvHcicE8kQ3/gZcI0YiPFWmYfowfm3lA==",
-            "hasInstallScript": true,
-            "dependencies": {
-                "@mswjs/cookies": "^0.2.2",
-                "@mswjs/interceptors": "^0.17.10",
-                "@open-draft/until": "^1.0.3",
-                "@types/cookie": "^0.4.1",
-                "@types/js-levenshtein": "^1.1.1",
-                "chalk": "^4.1.1",
-                "chokidar": "^3.4.2",
-                "cookie": "^0.4.2",
-                "graphql": "^16.8.1",
-                "headers-polyfill": "3.2.5",
-                "inquirer": "^8.2.0",
-                "is-node-process": "^1.2.0",
-                "js-levenshtein": "^1.1.6",
-                "node-fetch": "^2.6.7",
-                "outvariant": "^1.4.0",
-                "path-to-regexp": "^6.2.0",
-                "strict-event-emitter": "^0.4.3",
-                "type-fest": "^2.19.0",
-                "yargs": "^17.3.1"
-            },
-            "bin": {
-                "msw": "cli/index.js"
-            },
-            "engines": {
-                "node": ">=14"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/mswjs"
-            },
-            "peerDependencies": {
-                "typescript": ">= 4.4.x <= 5.2.x"
-            },
-            "peerDependenciesMeta": {
-                "typescript": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/msw/node_modules/ansi-styles": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-            "dependencies": {
-                "color-convert": "^2.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-            }
-        },
-        "node_modules/msw/node_modules/chalk": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-            "dependencies": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/chalk?sponsor=1"
-            }
-        },
-        "node_modules/msw/node_modules/color-convert": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-            "dependencies": {
-                "color-name": "~1.1.4"
-            },
-            "engines": {
-                "node": ">=7.0.0"
-            }
-        },
-        "node_modules/msw/node_modules/color-name": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-        },
-        "node_modules/msw/node_modules/cookie": {
-            "version": "0.4.2",
-            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
-            "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/msw/node_modules/has-flag": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/msw/node_modules/path-to-regexp": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-            "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
-        },
-        "node_modules/msw/node_modules/supports-color": {
-            "version": "7.2.0",
-            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-            "dependencies": {
-                "has-flag": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/msw/node_modules/type-fest": {
-            "version": "2.19.0",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-            "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-            "engines": {
-                "node": ">=12.20"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/multer": {
             "version": "1.4.5-lts.1",
             "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz",
@@ -38177,6 +38295,17 @@
             "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
             "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
         },
+        "node_modules/mz": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+            "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+            "dev": true,
+            "dependencies": {
+                "any-promise": "^1.0.0",
+                "object-assign": "^4.0.1",
+                "thenify-all": "^1.0.0"
+            }
+        },
         "node_modules/nan": {
             "version": "2.18.0",
             "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
@@ -38462,12 +38591,6 @@
                 "isarray": "^1.0.0"
             }
         },
-        "node_modules/node-libs-browser/node_modules/inherits": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-            "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-            "dev": true
-        },
         "node_modules/node-libs-browser/node_modules/isarray": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -38486,15 +38609,6 @@
             "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
             "dev": true
         },
-        "node_modules/node-libs-browser/node_modules/util": {
-            "version": "0.11.1",
-            "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
-            "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
-            "dev": true,
-            "dependencies": {
-                "inherits": "2.0.3"
-            }
-        },
         "node_modules/node-object-hash": {
             "version": "2.3.10",
             "resolved": "https://registry.npmjs.org/node-object-hash/-/node-object-hash-2.3.10.tgz",
@@ -42688,9 +42802,9 @@
             "integrity": "sha512-rxJOljMuWtYlvREBmd6TZYanfcPhNUKtGDZBjBBS8WG1dpN2iwPsRJZgQqN/OtJuiQckdRFOfzogqJClTrsi7g=="
         },
         "node_modules/picocolors": {
-            "version": "0.2.1",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-            "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
         },
         "node_modules/picomatch": {
             "version": "2.3.1",
@@ -42995,6 +43109,12 @@
                 "postcss": "^7.0.26"
             }
         },
+        "node_modules/postcss-flexbugs-fixes/node_modules/picocolors": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+            "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+            "dev": true
+        },
         "node_modules/postcss-flexbugs-fixes/node_modules/postcss": {
             "version": "7.0.39",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
@@ -43012,22 +43132,64 @@
                 "url": "https://opencollective.com/postcss/"
             }
         },
-        "node_modules/postcss-load-config": {
-            "version": "3.1.4",
-            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
-            "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+        "node_modules/postcss-import": {
+            "version": "15.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+            "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
             "dev": true,
             "dependencies": {
-                "lilconfig": "^2.0.5",
-                "yaml": "^1.10.2"
+                "postcss-value-parser": "^4.0.0",
+                "read-cache": "^1.0.0",
+                "resolve": "^1.1.7"
             },
             "engines": {
-                "node": ">= 10"
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.0.0"
+            }
+        },
+        "node_modules/postcss-js": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+            "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+            "dev": true,
+            "dependencies": {
+                "camelcase-css": "^2.0.1"
+            },
+            "engines": {
+                "node": "^12 || ^14 || >= 16"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/postcss/"
             },
+            "peerDependencies": {
+                "postcss": "^8.4.21"
+            }
+        },
+        "node_modules/postcss-load-config": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+            "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "dependencies": {
+                "lilconfig": "^3.0.0",
+                "yaml": "^2.3.4"
+            },
+            "engines": {
+                "node": ">= 14"
+            },
             "peerDependencies": {
                 "postcss": ">=8.0.9",
                 "ts-node": ">=9.0.0"
@@ -43041,6 +43203,24 @@
                 }
             }
         },
+        "node_modules/postcss-load-config/node_modules/lilconfig": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
+            "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+            "dev": true,
+            "engines": {
+                "node": ">=14"
+            }
+        },
+        "node_modules/postcss-load-config/node_modules/yaml": {
+            "version": "2.3.4",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+            "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 14"
+            }
+        },
         "node_modules/postcss-loader": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz",
@@ -43251,6 +43431,25 @@
                 "postcss": "^8.1.0"
             }
         },
+        "node_modules/postcss-nested": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+            "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+            "dev": true,
+            "dependencies": {
+                "postcss-selector-parser": "^6.0.11"
+            },
+            "engines": {
+                "node": ">=12.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.14"
+            }
+        },
         "node_modules/postcss-normalize-charset": {
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
@@ -43505,11 +43704,6 @@
             "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
             "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
         },
-        "node_modules/postcss-svgo/node_modules/picocolors": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-        },
         "node_modules/postcss-svgo/node_modules/svgo": {
             "version": "2.8.0",
             "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
@@ -43550,6 +43744,11 @@
                 "postcss-selector-parser": "^6.0.2"
             }
         },
+        "node_modules/postcss-ts-classnames/node_modules/picocolors": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+            "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
+        },
         "node_modules/postcss-ts-classnames/node_modules/postcss": {
             "version": "7.0.39",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
@@ -43585,11 +43784,6 @@
             "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
             "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
         },
-        "node_modules/postcss/node_modules/picocolors": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-        },
         "node_modules/prebuild-install": {
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
@@ -44774,6 +44968,24 @@
                 "node": ">=0.8"
             }
         },
+        "node_modules/read-cache": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+            "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+            "dev": true,
+            "dependencies": {
+                "pify": "^2.3.0"
+            }
+        },
+        "node_modules/read-cache/node_modules/pify": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+            "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/read-pkg": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -45760,6 +45972,117 @@
                 "ramda": "0.29.1"
             }
         },
+        "node_modules/rudder-sdk-js/node_modules/ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dependencies": {
+                "color-convert": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/rudder-sdk-js/node_modules/chalk": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "dependencies": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/rudder-sdk-js/node_modules/color-convert": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dependencies": {
+                "color-name": "~1.1.4"
+            },
+            "engines": {
+                "node": ">=7.0.0"
+            }
+        },
+        "node_modules/rudder-sdk-js/node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "node_modules/rudder-sdk-js/node_modules/cookie": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+            "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/rudder-sdk-js/node_modules/has-flag": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/rudder-sdk-js/node_modules/msw": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/msw/-/msw-1.3.2.tgz",
+            "integrity": "sha512-wKLhFPR+NitYTkQl5047pia0reNGgf0P6a1eTnA5aNlripmiz0sabMvvHcicE8kQ3/gZcI0YiPFWmYfowfm3lA==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "@mswjs/cookies": "^0.2.2",
+                "@mswjs/interceptors": "^0.17.10",
+                "@open-draft/until": "^1.0.3",
+                "@types/cookie": "^0.4.1",
+                "@types/js-levenshtein": "^1.1.1",
+                "chalk": "^4.1.1",
+                "chokidar": "^3.4.2",
+                "cookie": "^0.4.2",
+                "graphql": "^16.8.1",
+                "headers-polyfill": "3.2.5",
+                "inquirer": "^8.2.0",
+                "is-node-process": "^1.2.0",
+                "js-levenshtein": "^1.1.6",
+                "node-fetch": "^2.6.7",
+                "outvariant": "^1.4.0",
+                "path-to-regexp": "^6.2.0",
+                "strict-event-emitter": "^0.4.3",
+                "type-fest": "^2.19.0",
+                "yargs": "^17.3.1"
+            },
+            "bin": {
+                "msw": "cli/index.js"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mswjs"
+            },
+            "peerDependencies": {
+                "typescript": ">= 4.4.x <= 5.2.x"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/rudder-sdk-js/node_modules/path-to-regexp": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
+            "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
+        },
         "node_modules/rudder-sdk-js/node_modules/ramda": {
             "version": "0.29.1",
             "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.1.tgz",
@@ -45769,6 +46092,42 @@
                 "url": "https://opencollective.com/ramda"
             }
         },
+        "node_modules/rudder-sdk-js/node_modules/supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/rudder-sdk-js/node_modules/type-fest": {
+            "version": "2.19.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+            "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+            "engines": {
+                "node": ">=12.20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/rudder-sdk-js/node_modules/typescript": {
+            "version": "5.2.2",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+            "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+            "optional": true,
+            "peer": true,
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
         "node_modules/run-async": {
             "version": "2.4.1",
             "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -46188,9 +46547,9 @@
             }
         },
         "node_modules/sass-loader": {
-            "version": "10.4.1",
-            "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.4.1.tgz",
-            "integrity": "sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==",
+            "version": "10.5.0",
+            "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.5.0.tgz",
+            "integrity": "sha512-VsU71W7VR6SChMJZUqtrfLeMSA8ns7QTHbnA7cfevtjb3c392mX93lr0Dmr4uU1ch5uIbEmfmHjdrDYcXXkQ7w==",
             "dependencies": {
                 "klona": "^2.0.4",
                 "loader-utils": "^2.0.0",
@@ -46207,7 +46566,7 @@
             },
             "peerDependencies": {
                 "fibers": ">= 3.1.0",
-                "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+                "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
                 "sass": "^1.3.0",
                 "webpack": "^4.36.0 || ^5.0.0"
             },
@@ -47873,6 +48232,12 @@
                 "postcss": "^7.0.26"
             }
         },
+        "node_modules/stylelint-processor-styled-components/node_modules/picocolors": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+            "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+            "dev": true
+        },
         "node_modules/stylelint-processor-styled-components/node_modules/postcss": {
             "version": "7.0.39",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
@@ -48008,12 +48373,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/stylelint/node_modules/picocolors": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-            "dev": true
-        },
         "node_modules/stylelint/node_modules/type-fest": {
             "version": "0.18.1",
             "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
@@ -48076,6 +48435,57 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/sucrase": {
+            "version": "3.34.0",
+            "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
+            "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
+            "dev": true,
+            "dependencies": {
+                "@jridgewell/gen-mapping": "^0.3.2",
+                "commander": "^4.0.0",
+                "glob": "7.1.6",
+                "lines-and-columns": "^1.1.6",
+                "mz": "^2.7.0",
+                "pirates": "^4.0.1",
+                "ts-interface-checker": "^0.1.9"
+            },
+            "bin": {
+                "sucrase": "bin/sucrase",
+                "sucrase-node": "bin/sucrase-node"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/sucrase/node_modules/commander": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+            "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/sucrase/node_modules/glob": {
+            "version": "7.1.6",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+            "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+            "dev": true,
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.0.4",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
         "node_modules/sudo-prompt": {
             "version": "8.2.5",
             "resolved": "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-8.2.5.tgz",
@@ -48235,11 +48645,6 @@
                 "url": "https://github.com/fb55/domutils?sponsor=1"
             }
         },
-        "node_modules/svgo/node_modules/picocolors": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-        },
         "node_modules/swap-case": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/swap-case/-/swap-case-2.0.2.tgz",
@@ -48393,6 +48798,83 @@
                 "url": "https://github.com/chalk/slice-ansi?sponsor=1"
             }
         },
+        "node_modules/tailwind-merge": {
+            "version": "1.14.0",
+            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+            "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+            "peer": true,
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/dcastil"
+            }
+        },
+        "node_modules/tailwindcss": {
+            "version": "3.3.6",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
+            "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
+            "dev": true,
+            "dependencies": {
+                "@alloc/quick-lru": "^5.2.0",
+                "arg": "^5.0.2",
+                "chokidar": "^3.5.3",
+                "didyoumean": "^1.2.2",
+                "dlv": "^1.1.3",
+                "fast-glob": "^3.3.0",
+                "glob-parent": "^6.0.2",
+                "is-glob": "^4.0.3",
+                "jiti": "^1.19.1",
+                "lilconfig": "^2.1.0",
+                "micromatch": "^4.0.5",
+                "normalize-path": "^3.0.0",
+                "object-hash": "^3.0.0",
+                "picocolors": "^1.0.0",
+                "postcss": "^8.4.23",
+                "postcss-import": "^15.1.0",
+                "postcss-js": "^4.0.1",
+                "postcss-load-config": "^4.0.1",
+                "postcss-nested": "^6.0.1",
+                "postcss-selector-parser": "^6.0.11",
+                "resolve": "^1.22.2",
+                "sucrase": "^3.32.0"
+            },
+            "bin": {
+                "tailwind": "lib/cli.js",
+                "tailwindcss": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/tailwindcss/node_modules/glob-parent": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
+            "dependencies": {
+                "is-glob": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/tailwindcss/node_modules/jiti": {
+            "version": "1.21.0",
+            "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+            "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+            "dev": true,
+            "bin": {
+                "jiti": "bin/jiti.js"
+            }
+        },
+        "node_modules/tailwindcss/node_modules/object-hash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+            "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+            "dev": true,
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/tapable": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -48627,6 +49109,27 @@
             "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
             "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
         },
+        "node_modules/thenify": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+            "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+            "dev": true,
+            "dependencies": {
+                "any-promise": "^1.0.0"
+            }
+        },
+        "node_modules/thenify-all": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+            "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+            "dev": true,
+            "dependencies": {
+                "thenify": ">= 3.1.0 < 4"
+            },
+            "engines": {
+                "node": ">=0.8"
+            }
+        },
         "node_modules/through": {
             "version": "2.3.8",
             "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -48937,6 +49440,12 @@
                 "node": ">=6.10"
             }
         },
+        "node_modules/ts-interface-checker": {
+            "version": "0.1.13",
+            "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+            "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+            "dev": true
+        },
         "node_modules/ts-log": {
             "version": "2.2.5",
             "resolved": "https://registry.npmjs.org/ts-log/-/ts-log-2.2.5.tgz",
@@ -49006,9 +49515,9 @@
             }
         },
         "node_modules/ts-node/node_modules/acorn-walk": {
-            "version": "8.3.0",
-            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
-            "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+            "version": "8.3.1",
+            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.1.tgz",
+            "integrity": "sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==",
             "engines": {
                 "node": ">=0.4.0"
             }
@@ -49236,15 +49745,15 @@
             }
         },
         "node_modules/typescript": {
-            "version": "4.9.5",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-            "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+            "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
             },
             "engines": {
-                "node": ">=4.2.0"
+                "node": ">=14.17"
             }
         },
         "node_modules/typescript-plugin-css-modules": {
@@ -49274,6 +49783,35 @@
                 "typescript": ">=3.9.0"
             }
         },
+        "node_modules/typescript-plugin-css-modules/node_modules/postcss-load-config": {
+            "version": "3.1.4",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+            "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+            "dev": true,
+            "dependencies": {
+                "lilconfig": "^2.0.5",
+                "yaml": "^1.10.2"
+            },
+            "engines": {
+                "node": ">= 10"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": ">=8.0.9",
+                "ts-node": ">=9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "postcss": {
+                    "optional": true
+                },
+                "ts-node": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/typescript-plugin-css-modules/node_modules/strip-bom": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -49946,15 +50484,12 @@
             }
         },
         "node_modules/util": {
-            "version": "0.12.5",
-            "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
-            "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+            "version": "0.11.1",
+            "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
+            "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+            "dev": true,
             "dependencies": {
-                "inherits": "^2.0.3",
-                "is-arguments": "^1.0.4",
-                "is-generator-function": "^1.0.7",
-                "is-typed-array": "^1.1.3",
-                "which-typed-array": "^1.1.2"
+                "inherits": "2.0.3"
             }
         },
         "node_modules/util-deprecate": {
@@ -49972,6 +50507,12 @@
                 "object.getownpropertydescriptors": "^2.0.3"
             }
         },
+        "node_modules/util/node_modules/inherits": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+            "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+            "dev": true
+        },
         "node_modules/utila": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
@@ -50458,6 +50999,18 @@
                 "@zxing/text-encoding": "0.9.0"
             }
         },
+        "node_modules/web-encoding/node_modules/util": {
+            "version": "0.12.5",
+            "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+            "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+            "dependencies": {
+                "inherits": "^2.0.3",
+                "is-arguments": "^1.0.4",
+                "is-generator-function": "^1.0.7",
+                "is-typed-array": "^1.1.3",
+                "which-typed-array": "^1.1.2"
+            }
+        },
         "node_modules/web-namespaces": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz",
@@ -50585,9 +51138,9 @@
             }
         },
         "node_modules/webpack-bundle-analyzer/node_modules/acorn-walk": {
-            "version": "8.3.0",
-            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
-            "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+            "version": "8.3.1",
+            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.1.tgz",
+            "integrity": "sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==",
             "dev": true,
             "engines": {
                 "node": ">=0.4.0"
@@ -50623,12 +51176,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/webpack-bundle-analyzer/node_modules/picocolors": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-            "dev": true
-        },
         "node_modules/webpack-bundle-analyzer/node_modules/ws": {
             "version": "7.5.9",
             "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
diff --git a/package.json b/package.json
index 4fbdbab34fa..7ff3b691612 100644
--- a/package.json
+++ b/package.json
@@ -4,54 +4,59 @@
     "version": "0.1.0",
     "author": "Deriv",
     "dependencies": {
-        "@artsy/fresnel": "^6.1.0",
+        "@artsy/fresnel": "^6.2.1",
         "@builder.io/partytown": "^0.8.1",
-        "@deriv/analytics": "^1.4.4",
-        "@deriv/deriv-api": "^1.0.11",
-        "@hookform/resolvers": "^3.0.1",
-        "@livechat/customer-sdk": "^3.1.0",
-        "@loadable/component": "^5.15.2",
-        "@radix-ui/react-accordion": "^1.1.0",
-        "@radix-ui/react-alert-dialog": "^1.0.3",
-        "@radix-ui/react-dropdown-menu": "^2.0.2",
-        "@radix-ui/react-navigation-menu": "^1.1.2",
-        "@svgr/webpack": "^8.0.1",
-        "@tanstack/react-table": "^8.8.5",
+        "@deriv-com/blocks": "^0.52.0",
+        "@deriv-com/components": "^0.29.0",
+        "@deriv-com/hooks": "^0.10.0",
+        "@deriv-com/providers": "^0.10.0",
+        "@deriv/analytics": "^1.4.3",
+        "@deriv/deriv-api": "^1.0.13",
+        "@deriv/quill-design": "^1.2.6",
+        "@deriv/quill-icons": "^1.0.16",
+        "@hookform/resolvers": "^3.3.2",
+        "@livechat/customer-sdk": "^3.1.5",
+        "@loadable/component": "^5.15.3",
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-alert-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-navigation-menu": "^1.1.4",
+        "@svgr/webpack": "^8.1.0",
+        "@tanstack/react-table": "^8.10.7",
         "@vercel/gatsby-plugin-vercel-builder": "^0.1.2",
         "cli-select": "^1.1.2",
         "clsx": "^1.2.1",
         "commander": "^8.3.0",
-        "crc-32": "^1.2.0",
+        "crc-32": "^1.2.2",
         "cssnano": "^5.1.15",
         "deriv-api-ts": "^1.0.7",
         "embla-carousel-autoplay": "^6.2.0",
         "embla-carousel-react": "8.0.0-rc11",
-        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-node": "^0.3.9",
         "extend": "^3.0.2",
-        "firebase": "^9.22.1",
-        "formik": "^2.2.9",
-        "gatsby": "^5.11.0",
+        "firebase": "^9.23.0",
+        "formik": "^2.4.5",
+        "gatsby": "^5.12.11",
         "gatsby-plugin-anchor-links": "^1.2.1",
-        "gatsby-plugin-canonical-urls": "^5.11.0",
+        "gatsby-plugin-canonical-urls": "^5.12.0",
         "gatsby-plugin-image": "3.11.0",
-        "gatsby-plugin-manifest": "^5.11.0",
+        "gatsby-plugin-manifest": "^5.12.3",
         "gatsby-plugin-robots-txt": "^1.8.0",
-        "gatsby-plugin-sass": "^6.11.0",
-        "gatsby-plugin-sharp": "^5.11.0",
-        "gatsby-plugin-sitemap": "^6.11.0",
+        "gatsby-plugin-sass": "^6.12.3",
+        "gatsby-plugin-sharp": "^5.12.3",
+        "gatsby-plugin-sitemap": "^6.12.3",
         "gatsby-plugin-svgr": "^3.0.0-beta.0",
         "gatsby-plugin-use-query-params": "^1.0.1",
-        "gatsby-source-filesystem": "^5.11.0",
+        "gatsby-source-filesystem": "^5.12.1",
         "gatsby-source-strapi": "^3.3.1",
-        "gatsby-transformer-sharp": "^5.11.0",
-        "i18next": "^21.6.5",
+        "gatsby-transformer-sharp": "^5.12.3",
+        "i18next": "^21.10.0",
         "install": "^0.13.0",
         "js-cookie": "^2.2.1",
-        "lottie-web": "^5.8.1",
+        "lottie-web": "^5.12.2",
         "match-sorter": "^6.3.1",
-        "npm": "^9.6.2",
+        "npm": "^9.9.2",
         "p-min-delay": "^4.0.2",
-        "postcss": "^8.4.5",
         "postcss-discard-duplicates": "^5.1.0",
         "postcss-ts-classnames": "^0.3.0",
         "prompt-sync": "^4.2.0",
@@ -60,86 +65,91 @@
         "react-date-picker": "8.4.0",
         "react-device-detect": "^2.2.2",
         "react-dom": "^18.2.0",
-        "react-hook-form": "^7.43.9",
-        "react-i18next": "^11.15.3",
-        "react-intersection-observer": "^9.4.3",
+        "react-hook-form": "^7.48.2",
+        "react-i18next": "^11.18.6",
+        "react-intersection-observer": "^9.5.3",
         "react-is": "^17.0.2",
         "react-ticker": "^1.3.2",
         "react-tiny-popover": "^7.2.4",
         "remove": "^0.1.5",
-        "rxjs": "^7.8.0",
-        "sass": "^1.58.3",
-        "swiper": "^9.1.1",
+        "rxjs": "^7.8.1",
+        "sass": "^1.69.5",
+        "swiper": "^9.4.1",
         "use-query-params": "^1.2.3",
         "usehooks-ts": "^2.9.1",
-        "webpack": "^5.65.0",
-        "yup": "^1.0.2"
+        "webpack": "^5.89.0",
+        "yup": "^1.3.2"
     },
     "devDependencies": {
-        "@commitlint/cli": "^16.2.1",
-        "@commitlint/config-conventional": "^16.2.1",
-        "@deriv/api-types": "^1.0.94",
-        "@graphql-codegen/cli": "^2.6.2",
-        "@graphql-codegen/typescript": "^2.4.5",
-        "@graphql-codegen/typescript-operations": "^2.3.2",
-        "@loadable/babel-plugin": "^5.15.3",
+        "@commitlint/cli": "^16.3.0",
+        "@commitlint/config-conventional": "^16.2.4",
+        "@deriv/api-types": "^1.0.137",
+        "@graphql-codegen/cli": "^2.16.5",
+        "@graphql-codegen/typescript": "^2.8.8",
+        "@graphql-codegen/typescript-operations": "^2.5.13",
+        "@loadable/babel-plugin": "^5.16.1",
+        "@parcel/watcher": "^2.3.0",
         "@storybook/addon-actions": "^6.4.9",
-        "@storybook/addon-essentials": "^6.4.9",
-        "@storybook/addon-links": "^6.4.9",
-        "@storybook/builder-webpack5": "^6.4.9",
-        "@storybook/manager-webpack5": "^6.4.9",
-        "@storybook/react": "^6.4.9",
+        "@storybook/addon-essentials": "^6.5.16",
+        "@storybook/addon-links": "^6.5.16",
+        "@storybook/builder-webpack5": "^6.5.16",
+        "@storybook/manager-webpack5": "^6.5.16",
+        "@storybook/react": "^6.5.16",
         "@stylelint/postcss-css-in-js": "^0.38.0",
-        "@testing-library/jest-dom": "^5.16.4",
-        "@testing-library/react": "^14.0.0",
-        "@testing-library/user-event": "^14.4.3",
-        "@types/jest": "^29.5.3",
-        "@types/js-cookie": "^3.0.3",
-        "@types/node": "^20.4.8",
-        "@types/react": "^18.2.18",
-        "@types/react-dom": "^18.2.7",
-        "@types/react-test-renderer": "^18.0.0",
-        "@types/styled-components": "^5.1.26",
-        "@typescript-eslint/eslint-plugin": "^5.9.0",
-        "@typescript-eslint/parser": "^5.9.0",
+        "@testing-library/jest-dom": "^5.17.0",
+        "@testing-library/react": "^14.1.2",
+        "@testing-library/user-event": "^14.5.1",
+        "@types/jest": "^29.5.10",
+        "@types/js-cookie": "^3.0.6",
+        "@types/node": "^20.10.0",
+        "@types/react": "^18.2.38",
+        "@types/react-dom": "^18.2.17",
+        "@types/react-test-renderer": "^18.0.7",
+        "@types/styled-components": "^5.1.32",
+        "@typescript-eslint/eslint-plugin": "^5.62.0",
+        "@typescript-eslint/parser": "^5.62.0",
+        "autoprefixer": "^10.4.16",
         "babel-eslint": "10.1.0",
-        "babel-jest": "^29.5.0",
-        "babel-plugin-styled-components": "^2.0.2",
+        "babel-jest": "^29.7.0",
+        "babel-plugin-styled-components": "^2.1.4",
         "babel-preset-gatsby": "^2.25.0",
         "eslint": "^7.32.0",
         "eslint-loader": "^4.0.2",
-        "eslint-plugin-deprecation": "^1.3.2",
-        "eslint-plugin-import": "^2.25.4",
-        "eslint-plugin-jest": "^27.2.1",
-        "eslint-plugin-react": "^7.28.0",
-        "eslint-plugin-react-hooks": "^4.5.0",
-        "eslint-webpack-plugin": "^3.1.1",
+        "eslint-plugin-deprecation": "^1.5.0",
+        "eslint-plugin-import": "^2.29.0",
+        "eslint-plugin-jest": "^27.6.0",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-webpack-plugin": "^3.2.0",
         "gatsby-plugin-env-variables": "^2.3.0",
-        "gatsby-plugin-eslint": "^4.0.2",
-        "gatsby-plugin-styled-components": "^6.11.0",
-        "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.31",
+        "gatsby-plugin-eslint": "^4.0.4",
+        "gatsby-plugin-postcss": "^6.12.0",
+        "gatsby-plugin-styled-components": "^6.12.0",
+        "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
         "gh-pages": "^3.2.3",
         "husky": "^7.0.4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^29.5.0",
+        "jest": "^29.7.0",
         "jest-chain": "^1.1.6",
-        "jest-config": "^29.5.0",
-        "jest-environment-jsdom": "^29.5.0",
-        "jest-extended": "^4.0.0",
-        "lint-staged": "^12.1.5",
+        "jest-config": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "jest-extended": "^4.0.2",
+        "lint-staged": "^12.5.0",
         "npm-force-resolutions": "0.0.10",
-        "prettier": "^2.5.1",
-        "query-string": "^7.0.1",
+        "postcss": "^8.4.31",
+        "prettier": "^2.8.8",
+        "query-string": "^7.1.3",
         "react-test-renderer": "^18.2.0",
-        "styled-components": "^5.3.3",
-        "stylelint": "^14.2.0",
-        "stylelint-config-prettier": "^9.0.3",
+        "styled-components": "^5.3.11",
+        "stylelint": "^14.16.1",
+        "stylelint-config-prettier": "^9.0.5",
         "stylelint-config-standard": "^24.0.0",
         "stylelint-config-styled-components": "^0.1.1",
         "stylelint-processor-styled-components": "^1.10.0",
-        "stylelint-webpack-plugin": "^3.1.0",
-        "typescript": "^4.5.4",
-        "typescript-plugin-css-modules": "^4.2.2"
+        "stylelint-webpack-plugin": "^3.3.0",
+        "tailwindcss": "^3.3.5",
+        "typescript": "^5.3.2",
+        "typescript-plugin-css-modules": "^4.2.3"
     },
     "keywords": [
         "deriv",
@@ -149,6 +159,7 @@
     "scripts": {
         "analyze-bundle": "GENERATE_JSON_STATS=true gatsby build && npx webpack-bundle-analyzer -m static -r ./webpack-bundle-report/report.html ./public/stats.json",
         "build": "GATSBY_CPU_COUNT=2 gatsby build --log-pages",
+        "update:deriv-com-libs": "npm i @deriv-com/blocks@latest @deriv-com/components@latest @deriv-com/hooks@latest @deriv-com/providers@latest",
         "partytown": "partytown copylib public/~partytown",
         "develop": "GATSBY_CPU_COUNT=2 gatsby develop -o",
         "format": "prettier --write '**/*.js' '*.js'",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000000..96bb01e7dd1
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
\ No newline at end of file
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
index 89c2c4c2606..7429f3d81bf 100644
--- a/src/components/layout/layout.tsx
+++ b/src/components/layout/layout.tsx
@@ -1,6 +1,8 @@
-import React, { ReactNode, Ref } from 'react'
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React, { ReactNode, Ref, useCallback } from 'react'
 import loadable from '@loadable/component'
 import styled from 'styled-components'
+import { LanguageProvider, SharedLinkProvider } from '@deriv-com/providers'
 import { LocationProvider } from './location-context'
 import LayoutOverlay from 'features/components/molecules/layout-overlay'
 import EURedirect, { useModal } from 'components/custom/_eu-redirect-modal'
@@ -8,16 +10,20 @@ import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import { getLanguage, isBrowser } from 'common/utility'
 import apiManager from 'common/websocket'
-import MainNav from 'features/components/templates/navigation/main-nav'
 import StaticNav from 'features/components/templates/navigation/static-nav'
-import PaymentAgentAffiliateNav from 'features/components/templates/navigation/payment-agent-nav'
 import BugBountyNav from 'features/components/templates/navigation/bug-bounty-nav'
 import CareerNav from 'features/components/templates/navigation/career-nav'
-import MarketNav from 'features/components/templates/navigation/market-nav'
 import PpcProvider from 'features/contexts/ppc-campaign/ppc.provider'
 import AffiliateNav from 'features/components/templates/navigation/affiliates-nav'
 import BannerAlert from 'components/custom/_banner-alert'
 import { bannerTypes } from 'common/constants'
+import MainRowNavigation from 'features/components/templates/navigation/main-nav'
+import { useLangDirection } from 'components/hooks/use-lang-direction'
+import { LocaleContext } from 'components/localization'
+import useLangSwitcher from 'features/components/molecules/language-switcher/useLangSwitcher'
+import { langItemsROW } from 'features/components/templates/layout/data'
+import PartnersNav from 'features/components/templates/navigation/partners-nav'
+import GatsbySharedLink from 'features/components/quill/shared-link'
 
 const RebrandingFooter = loadable(() => import('features/components/templates/footer'))
 
@@ -44,7 +50,7 @@ export type ModalPayloadType = {
 }
 
 const Main = styled.main<MainType>`
-    padding-top: ${({ padding_top }) => (padding_top && `${padding_top}rem`) || '7rem'};
+    padding-top: ${({ padding_top }) => (padding_top && `${padding_top}rem`) || '0rem'};
     background: var(--color-white);
     height: 100%;
     position: relative;
@@ -60,13 +66,13 @@ if (isBrowser()) {
 
 const Navs = {
     noNav: null,
-    default: <MainNav />,
+    default: <MainRowNavigation />,
     static: <StaticNav />,
     interim: <StaticNav />,
 
-    partners: <PaymentAgentAffiliateNav />,
+    partners: <PartnersNav />,
 
-    markets: <MarketNav />,
+    markets: <MainRowNavigation />,
 
     security: <BugBountyNav />,
 
@@ -80,7 +86,8 @@ const Navs = {
 
     careers: <CareerNav />,
 
-    'payment-methods': <MainNav />,
+    'payment-methods': <MainRowNavigation />,
+
     affiliates: <AffiliateNav />,
 }
 
@@ -99,6 +106,27 @@ const Layout = ({
 
     const is_static = type === 'static'
 
+    const lang_direction = useLangDirection()
+    const { locale } = React.useContext(LocaleContext)
+    const formatted_lang = locale.replace('_', '-')
+
+    React.useEffect(() => {
+        document.body.dir = lang_direction
+        document.documentElement.lang = formatted_lang
+    }, [lang_direction, formatted_lang])
+
+    //need to update the language data and type
+    //here using langauge data from `i18n-config.js`
+    const { onSwitchLanguage, currentLang } = useLangSwitcher()
+    const activeLang = langItemsROW[currentLang.path.replace('-', '')]
+
+    const onLanguageChange = useCallback(
+        (event) => {
+            onSwitchLanguage(`/${event.path}/`)
+        },
+        [onSwitchLanguage],
+    )
+
     //Handle page layout when redirection from mobile app.
     if (has_platform) {
         return (
@@ -108,33 +136,41 @@ const Layout = ({
         )
     }
     return (
-        <PpcProvider is_ppc={is_ppc} is_ppc_redirect={is_ppc_redirect}>
-            {Navs[type]}
-            <LocationProvider
-                has_mounted={is_mounted}
-                toggleModal={toggleModal}
-                setModalPayload={setModalPayload}
-            >
-                <div className="styled-layout">
-                    <Main padding_top={padding_top} is_static={is_static}>
-                        {children}
-                    </Main>
-                    <EURedirect
-                        toggle={toggleModal}
-                        is_open={show_modal}
-                        closeModal={closeModal}
-                        to={modal_payload.to}
-                        target={modal_payload.target}
-                        rel={modal_payload.rel}
-                        ref={modal_payload.ref}
-                        aria_label={modal_payload.aria_label}
-                    />
-                    <BannerAlert bannerType={bannerTypes.outdatedBrowserBanner} />
-                    <LayoutOverlay is_ppc={is_ppc} />
-                </div>
-            </LocationProvider>
-            {show_footer && <RebrandingFooter />}
-        </PpcProvider>
+        <SharedLinkProvider DerivLink={GatsbySharedLink}>
+            <PpcProvider is_ppc={is_ppc} is_ppc_redirect={is_ppc_redirect}>
+                <LanguageProvider
+                    langItems={langItemsROW}
+                    onLangSelect={onLanguageChange}
+                    activeLanguage={activeLang}
+                >
+                    {Navs[type]}
+                    <LocationProvider
+                        has_mounted={is_mounted}
+                        toggleModal={toggleModal}
+                        setModalPayload={setModalPayload}
+                    >
+                        <div className="styled-layout">
+                            <Main padding_top={padding_top} is_static={is_static}>
+                                {children}
+                            </Main>
+                            <EURedirect
+                                toggle={toggleModal}
+                                is_open={show_modal}
+                                closeModal={closeModal}
+                                to={modal_payload.to}
+                                target={modal_payload.target}
+                                rel={modal_payload.rel}
+                                ref={modal_payload.ref}
+                                aria_label={modal_payload.aria_label}
+                            />
+                            <BannerAlert bannerType={bannerTypes.outdatedBrowserBanner} />
+                            <LayoutOverlay is_ppc={is_ppc} />
+                        </div>
+                    </LocationProvider>
+                    {show_footer && <RebrandingFooter />}
+                </LanguageProvider>
+            </PpcProvider>
+        </SharedLinkProvider>
     )
 }
 
diff --git a/src/features/components/quill/alert/index.tsx b/src/features/components/quill/alert/index.tsx
new file mode 100644
index 00000000000..77ede2dde0e
--- /dev/null
+++ b/src/features/components/quill/alert/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import * as AlertDialog from '@radix-ui/react-alert-dialog'
+import { Button, Text, Heading } from '@deriv/quill-design'
+import { TString } from 'types/generics'
+import { Localize } from 'components/localization'
+
+type AlertButtonProps = {
+    text: TString
+    onClick?: React.MouseEventHandler<HTMLButtonElement>
+}
+
+export interface AlertProps {
+    title?: TString
+    description: TString
+    cancel_button?: AlertButtonProps
+    action_button: AlertButtonProps
+}
+
+const Alert = ({
+    title = '_t_Alert_t_',
+    description,
+    cancel_button,
+    action_button,
+}: AlertProps) => {
+    return (
+        <AlertDialog.Root defaultOpen>
+            <AlertDialog.Portal>
+                <AlertDialog.Overlay className="alert-overlay" />
+                <AlertDialog.Content className="alert-content">
+                    <AlertDialog.Title asChild className="AlertDialogTitle">
+                        <div>
+                            <Heading.H3 className="pb-1200 font-heading text-100">
+                                <Localize translate_text={title} />
+                            </Heading.H3>
+                        </div>
+                    </AlertDialog.Title>
+                    <AlertDialog.Description asChild className="AlertDialogDescription">
+                        <div>
+                            <Text size="sm">
+                                <Localize translate_text={description} />
+                            </Text>
+                        </div>
+                    </AlertDialog.Description>
+
+                    <div className="flex gap-1200 justify-end pt-1200">
+                        <AlertDialog.Cancel asChild>
+                            {cancel_button && (
+                                <span>
+                                    <Button
+                                        variant="secondary"
+                                        colorStyle="black"
+                                        size="lg"
+                                        onClick={(e) => cancel_button?.onClick(e)}
+                                    >
+                                        <Localize translate_text={cancel_button.text} />
+                                    </Button>
+                                </span>
+                            )}
+                        </AlertDialog.Cancel>
+                        <AlertDialog.Action asChild>
+                            <span>
+                                <Button
+                                    variant="primary"
+                                    colorStyle="coral"
+                                    size="lg"
+                                    onClick={(e) => action_button.onClick(e)}
+                                >
+                                    <Localize translate_text={action_button.text} />
+                                </Button>
+                            </span>
+                        </AlertDialog.Action>
+                    </div>
+                </AlertDialog.Content>
+            </AlertDialog.Portal>
+        </AlertDialog.Root>
+    )
+}
+
+export default Alert
diff --git a/src/features/components/quill/shared-link/external.tsx b/src/features/components/quill/shared-link/external.tsx
new file mode 100644
index 00000000000..fb2a7cb1b0d
--- /dev/null
+++ b/src/features/components/quill/shared-link/external.tsx
@@ -0,0 +1,56 @@
+import React, { ComponentProps, useState } from 'react'
+import Alert from '../alert'
+import useRegion from 'components/hooks/use-region'
+
+export type ExternalLinkProps = ComponentProps<'a'> & {
+    show_eu_modal?: boolean
+}
+
+const ExternalLink = ({ href, onClick, target, show_eu_modal, ...rest }: ExternalLinkProps) => {
+    const [is_redirect_modal_visible, setIsRedirectModalVisible] = useState(false)
+    const { is_eu } = useRegion()
+    const show_modal = is_eu && show_eu_modal
+
+    const handleCancel = () => {
+        setIsRedirectModalVisible(false)
+    }
+
+    const handleProceed = () => {
+        if (target === '_blank') {
+            window.open(href)
+        } else {
+            window.location.href = href
+        }
+        setIsRedirectModalVisible(false)
+    }
+
+    const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
+        if (show_modal) {
+            event.preventDefault()
+            setIsRedirectModalVisible(true)
+        }
+        onClick?.(event)
+    }
+
+    return (
+        <>
+            <a href={show_modal ? '' : href} target={target} onClick={handleClick} {...rest} />
+            {is_redirect_modal_visible && (
+                <Alert
+                    title="_t_Redirect notice_t_"
+                    description="_t_You are being redirected to an external website._t_"
+                    cancel_button={{
+                        text: '_t_Cancel_t_',
+                        onClick: handleCancel,
+                    }}
+                    action_button={{
+                        text: '_t_Proceed_t_',
+                        onClick: handleProceed,
+                    }}
+                />
+            )}
+        </>
+    )
+}
+
+export default ExternalLink
diff --git a/src/features/components/quill/shared-link/index.tsx b/src/features/components/quill/shared-link/index.tsx
new file mode 100644
index 00000000000..0312e2bd435
--- /dev/null
+++ b/src/features/components/quill/shared-link/index.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React from 'react'
+import { SharedLinkProps, SharedLink } from '@deriv-com/providers'
+import ExternalLink from './external'
+import { LocalizedLink } from 'components/localization'
+
+const GatsbySharedLink: SharedLink = ({ href = '/', ...rest }: SharedLinkProps) => {
+    const link = href as `/${string}`
+    const isExternalUrl = /(http(s?)):\/\//i.test(link.toString())
+    if (isExternalUrl) {
+        return (
+            // @ts-ignore
+            <ExternalLink href={link} external {...rest} />
+        )
+    }
+    return (
+        // @ts-ignore
+        <LocalizedLink to={link} {...rest} />
+    )
+}
+
+export default GatsbySharedLink
diff --git a/src/features/components/templates/footer/banner-and-awards.tsx b/src/features/components/templates/footer/banner-and-awards.tsx
new file mode 100644
index 00000000000..ea7b8e93693
--- /dev/null
+++ b/src/features/components/templates/footer/banner-and-awards.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import { CaptionText, Heading, Text } from '@deriv/quill-design'
+// eslint-disable-next-line import/no-unresolved
+import { DerivProductDerivGoBrandLightLogoHorizontalIcon } from '@deriv/quill-icons/Logo'
+import { StaticImage } from 'gatsby-plugin-image'
+import DownloadBadges from './download'
+import { Localize, localize } from 'components/localization'
+import useRegion from 'components/hooks/use-region'
+
+export const DerivGoBannerAndAwards = () => {
+    const { is_row } = useRegion()
+    return (
+        <div className="flex flex-col gap-gap-lg">
+            {is_row && (
+                <div className="flex lg:flex-col gap-gap-lg rounded-[16px] border-solid border-xs border-opacity-black-100 p-general-md">
+                    <div className="flex flex-col gap-gap-md max-lg:flex-1 max-lg:justify-center">
+                        <div className="flex flex-col gap-gap-md">
+                            <div className="flex items-center gap-gap-md">
+                                <DerivProductDerivGoBrandLightLogoHorizontalIcon
+                                    width={24}
+                                    height={24}
+                                />
+                                <Heading.H5>
+                                    <Localize translate_text="_t_Deriv GO_t_" />
+                                </Heading.H5>
+                            </div>
+                            <Text size="sm">
+                                <Localize translate_text="_t_Trade multipliers on our mobile app._t_" />
+                            </Text>
+                        </div>
+
+                        <div className="flex items-center gap-gap-md rounded-[8px] border-solid border-xs border-opacity-black-100 p-general-sm max-sm:hidden">
+                            <StaticImage
+                                src="../../../../images/common/migration/footer/deriv-go-qr.png"
+                                alt={localize('_t_download deriv-go_t_')}
+                                height={64}
+                                width={64}
+                                placeholder="none"
+                            />
+                            <CaptionText className="text-typography-default">
+                                <Localize translate_text="_t_Scan to download_t_" />
+                            </CaptionText>
+                        </div>
+                    </div>
+                    <DownloadBadges />
+                </div>
+            )}
+            <div className="rounded-[16px] border-solid border-xs border-opacity-black-100 py-general-md">
+                <div className="block justify-center lg:hidden">
+                    <StaticImage
+                        className="mx-auto"
+                        src="../../../../images/common/migration/footer/investors-in-people.png"
+                        alt={localize('_t_investors in people - gold_t_')}
+                        placeholder="none"
+                        width={180}
+                        layout="fixed"
+                    />
+                </div>
+                <div className="hidden justify-center lg:block">
+                    <StaticImage
+                        src="../../../../images/common/migration/footer/investors-in-people.png"
+                        alt={localize('_t_investors in people - gold_t_')}
+                        placeholder="none"
+                        objectFit="contain"
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/components/templates/footer/data.ts b/src/features/components/templates/footer/data.ts
deleted file mode 100644
index f2e133933f5..00000000000
--- a/src/features/components/templates/footer/data.ts
+++ /dev/null
@@ -1,368 +0,0 @@
-import { SmartFooterLink, SmartFooterLinkColumn } from './types'
-import { deriv_status_page_url } from 'common/constants'
-
-const aboutUsLinks: SmartFooterLink[] = [
-    {
-        id: 0,
-        data: {
-            text: '_t_Who we are_t_',
-            url: { type: 'internal', to: '/who-we-are/' },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            text: '_t_Why choose us_t_',
-            url: { type: 'internal', to: '/why-choose-us/' },
-        },
-    },
-    {
-        id: 2,
-        data: {
-            text: '_t_Principles_t_',
-            url: { type: 'internal', to: '/our-principles/' },
-        },
-    },
-    {
-        id: 3,
-        data: {
-            text: '_t_Partnership programmes_t_',
-            url: { type: 'internal', to: '/partners/' },
-        },
-    },
-    {
-        id: 4,
-        data: {
-            text: '_t_Contact us_t_',
-            url: { type: 'internal', to: '/contact_us/' },
-        },
-    },
-    {
-        id: 5,
-        data: {
-            text: '_t_Careers_t_',
-            url: { type: 'internal', to: '/careers/' },
-        },
-    },
-    {
-        id: 6,
-        data: {
-            text: '_t_Deriv life_t_',
-            url: { type: 'company', url_name: 'derivlife' },
-        },
-    },
-]
-
-const tradesLinks: SmartFooterLink[] = [
-    {
-        id: 0,
-        data: {
-            text: '_t_CFDs_t_',
-            url: { type: 'internal', to: '/trade-types/cfds/' },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            text: '_t_Options_t_',
-            url: { type: 'internal', to: '/trade-types/options/digital-options/up-and-down/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            text: '_t_Multipliers_t_',
-            url: { type: 'internal', to: '/trade-types/multiplier/' },
-        },
-    },
-]
-
-const marketsLinks: SmartFooterLink[] = [
-    {
-        id: 0,
-        data: {
-            text: '_t_Forex_t_',
-            url: { type: 'internal', to: '/markets/forex/' },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            text: '_t_Derived indices_t_',
-            url: { type: 'internal', to: '/markets/synthetic/' },
-        },
-    },
-    {
-        id: 2,
-        data: {
-            text: '_t_Stocks & indices_t_',
-            url: { type: 'internal', to: '/markets/stock/' },
-        },
-    },
-    {
-        id: 3,
-        data: {
-            text: '_t_ETFs_t_',
-            url: { type: 'internal', to: '/markets/exchange-traded-funds/' },
-        },
-    },
-    {
-        id: 4,
-        data: {
-            text: '_t_Cryptocurrencies_t_',
-            url: { type: 'internal', to: '/markets/cryptocurrencies/' },
-        },
-    },
-    {
-        id: 5,
-        data: {
-            text: '_t_Commodities_t_',
-            url: { type: 'internal', to: '/markets/commodities/' },
-        },
-    },
-]
-
-const platformsLinks: SmartFooterLink[] = [
-    {
-        id: 0,
-        data: {
-            text: '_t_Deriv MT5_t_',
-            url: ({ is_ppc_redirect }) => ({
-                type: 'internal',
-                to: is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/',
-            }),
-        },
-    },
-    {
-        id: 1,
-        data: {
-            text: '_t_Deriv X_t_',
-            url: { type: 'internal', to: '/derivx/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-
-    {
-        id: 2,
-        data: {
-            text: '_t_Deriv GO_t_',
-            url: { type: 'internal', to: '/deriv-go/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            text: '_t_Deriv Trader_t_',
-            url: { type: 'internal', to: '/dtrader/' },
-        },
-    },
-    {
-        id: 4,
-        data: {
-            text: '_t_SmartTrader_t_',
-            url: { type: 'company', url_name: 'smart_trader', target: '_blank' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 5,
-        data: {
-            text: '_t_Deriv Bot_t_',
-            url: { type: 'internal', to: '/dbot/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 6,
-        data: {
-            text: '_t_Binary Bot_t_',
-            url: { type: 'company', url_name: 'binary_bot', target: '_blank' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 7,
-        data: {
-            text: '_t_Deriv cTrader_t_',
-            url: { type: 'internal', to: '/deriv-ctrader/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-]
-
-const legalLinks: SmartFooterLink[] = [
-    {
-        id: 0,
-        data: {
-            text: '_t_Regulatory information_t_',
-            url: { type: 'internal', to: '/regulatory/' },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            text: '_t_Terms & conditions_t_',
-            url: { type: 'internal', to: '/terms-and-conditions/#clients' },
-        },
-    },
-    {
-        id: 2,
-        data: {
-            text: '_t_Secure & responsible trading_t_',
-            url: { type: 'internal', to: '/responsible/' },
-        },
-    },
-]
-
-const partnerLinks: SmartFooterLink[] = [
-    {
-        id: 0,
-        data: {
-            text: '_t_Deriv Prime_t_',
-            url: { type: 'internal', to: '/partners/deriv-prime/' },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            text: '_t_Affiliates and IBs_t_',
-            url: { type: 'internal', to: '/partners/affiliate-ib/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            text: '_t_Affiliates_t_',
-            url: { type: 'internal', to: '/partners/affiliate-ib/' },
-        },
-        visibility: {
-            is_row: false,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            text: '_t_Payment agents_t_',
-            url: { type: 'internal', to: '/partners/payment-agent/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 4,
-        data: {
-            text: '_t_API_t_',
-            url: { type: 'company', url_name: 'api' },
-        },
-    },
-]
-
-const supportLinks: SmartFooterLink[] = [
-    {
-        id: 0,
-        data: {
-            text: '_t_Help centre_t_',
-            url: { type: 'internal', to: '/help-centre/' },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            text: '_t_Community_t_',
-            url: { type: 'company', url_name: 'community' },
-        },
-    },
-    {
-        id: 2,
-        data: {
-            text: '_t_Payment methods_t_',
-            url: { type: 'internal', to: '/payment-methods/' },
-        },
-    },
-    {
-        id: 3,
-        data: {
-            text: '_t_Status page_t_',
-            url: { type: 'non-company', href: deriv_status_page_url },
-        },
-    },
-    {
-        id: 4,
-        data: {
-            text: '_t_Deriv Blog_t_',
-            url: { type: 'company', url_name: 'blog' },
-        },
-    },
-]
-
-export const footerLinks: SmartFooterLinkColumn[] = [
-    {
-        id: 0,
-        data: {
-            title: '_t_ABOUT US_t_',
-            links: aboutUsLinks,
-        },
-    },
-    {
-        id: 1,
-        data: {
-            title: '_t_TRADE TYPES_t_',
-            links: tradesLinks,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            title: '_t_MARKETS_t_',
-            links: marketsLinks,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            title: '_t_PLATFORMS_t_',
-            links: platformsLinks,
-        },
-    },
-    {
-        id: 4,
-        data: {
-            title: '_t_LEGAL_t_',
-            links: legalLinks,
-        },
-    },
-    {
-        id: 5,
-        data: {
-            title: '_t_PARTNERS_t_',
-            links: partnerLinks,
-        },
-    },
-    {
-        id: 7,
-        data: {
-            title: '_t_SUPPORT_t_',
-            links: supportLinks,
-        },
-    },
-]
diff --git a/src/features/components/templates/footer/data.tsx b/src/features/components/templates/footer/data.tsx
new file mode 100644
index 00000000000..e3eacbfb77c
--- /dev/null
+++ b/src/features/components/templates/footer/data.tsx
@@ -0,0 +1,549 @@
+import React from 'react'
+import { FooterItems } from '@deriv-com/blocks'
+import {
+    StandaloneFacebookIcon,
+    StandaloneInstagramIcon,
+    StandaloneLinkedinIcon,
+    StandaloneXTwitterIcon,
+    StandaloneYoutubeIcon,
+    // eslint-disable-next-line import/no-unresolved
+} from '@deriv/quill-icons/Standalone'
+import { DerivGoBannerAndAwards } from './banner-and-awards'
+import { Localize } from 'components/localization'
+
+export const RowFooterNavData: FooterItems[] = [
+    {
+        id: 0,
+        layers: [
+            {
+                id: 0,
+                header: <Localize translate_text="_t_ABOUT US_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/who-we-are',
+                        text: <Localize translate_text="_t_Who we are_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: '/why-choose-us',
+                        text: <Localize translate_text="_t_Why choose us_t_" />,
+                    },
+                    {
+                        id: 3,
+                        href: '/our-principles',
+                        text: <Localize translate_text="_t_Our principles_t_" />,
+                    },
+                    {
+                        id: 4,
+                        href: '/partners',
+                        text: <Localize translate_text="_t_Partnership programmes_t_" />,
+                    },
+                    {
+                        id: 5,
+                        href: '/contact_us',
+                        text: <Localize translate_text="_t_Contact us_t_" />,
+                    },
+                    { id: 6, href: '/careers', text: <Localize translate_text="_t_Careers_t_" /> },
+                    {
+                        id: 7,
+                        href: 'https://derivlife.com',
+                        text: <Localize translate_text="_t_Deriv life_t_" />,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 1,
+        layers: [
+            {
+                id: 0,
+                header: <Localize translate_text="_t_TRADE TYPES_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/trade-types/cfds',
+                        text: <Localize translate_text="_t_CFDs_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: '/trade-types/options',
+                        text: <Localize translate_text="_t_Options_t_" />,
+                    },
+                    {
+                        id: 2,
+                        href: '/trade-types/multiplier',
+                        text: <Localize translate_text="_t_Multipliers_t_" />,
+                    },
+                ],
+            },
+            {
+                id: 1,
+                header: <Localize translate_text="_t_MARKETS_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/markets/forex',
+                        text: <Localize translate_text="_t_Forex_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: '/markets/synthetic',
+                        text: <Localize translate_text="_t_Derived indices_t_" />,
+                    },
+                    {
+                        id: 2,
+                        href: '/markets/stock',
+                        text: <Localize translate_text="_t_Stocks & indices_t_" />,
+                    },
+                    {
+                        id: 3,
+                        href: '/markets/exchange-traded-funds',
+                        text: <Localize translate_text="_t_ETFs_t_" />,
+                    },
+                    {
+                        id: 4,
+                        href: '/markets/cryptocurrencies',
+                        text: <Localize translate_text="_t_Cryptocurrencies_t_" />,
+                    },
+                    {
+                        id: 5,
+                        href: '/markets/commodities',
+                        text: <Localize translate_text="_t_Commodities_t_" />,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 2,
+        layers: [
+            {
+                id: 0,
+                header: <Localize translate_text="_t_PLATFORMS_t_" />,
+                type: 'link',
+                items: [
+                    { id: 0, href: '/dmt5', text: <Localize translate_text="_t_Deriv MT5_t_" /> },
+                    { id: 1, href: '/derivx', text: <Localize translate_text="_t_Deriv X_t_" /> },
+                    {
+                        id: 2,
+                        href: '/deriv-ctrader',
+                        text: <Localize translate_text="_t_Deriv cTrader_t_" />,
+                    },
+                    {
+                        id: 3,
+                        href: '/deriv-go',
+                        text: <Localize translate_text="_t_Deriv GO_t_" />,
+                    },
+                    {
+                        id: 4,
+                        href: '/dtrader',
+                        text: <Localize translate_text="_t_Deriv Trader_t_" />,
+                    },
+                    {
+                        id: 5,
+                        href: 'https://smarttrader.deriv.com/',
+                        text: <Localize translate_text="_t_SmartTrader_t_" />,
+                        target: '_blank',
+                    },
+                    { id: 6, href: '/dbot', text: <Localize translate_text="_t_Deriv Bot_t_" /> },
+                    {
+                        id: 7,
+                        href: 'https://bot.deriv.com/',
+                        text: <Localize translate_text="_t_Binary Bot_t_" />,
+                        target: '_blank',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 3,
+        layers: [
+            {
+                id: 0,
+                header: <Localize translate_text="_t_SUPPORT_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/help-centre',
+                        text: <Localize translate_text="_t_Help centre_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: 'https://community.deriv.com/',
+                        text: <Localize translate_text="_t_Community_t_" />,
+                    },
+                    {
+                        id: 2,
+                        href: '/payment-methods',
+                        text: <Localize translate_text="_t_Payment methods_t_" />,
+                    },
+                    {
+                        id: 3,
+                        href: 'https://deriv.statuspage.io/',
+                        text: <Localize translate_text="_t_Status page_t_" />,
+                    },
+                    {
+                        id: 4,
+                        href: 'https://blog.deriv.com/',
+                        text: <Localize translate_text="_t_Deriv Blog_t_" />,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 4,
+        layers: [
+            {
+                id: 0,
+                header: <Localize translate_text="_t_LEGAL_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/regulatory',
+                        text: <Localize translate_text="_t_Regulatory information_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: '/terms-and-conditions/#clients',
+                        text: <Localize translate_text="_t_Terms & conditions_t_" />,
+                    },
+                    {
+                        id: 2,
+                        href: '/responsible',
+                        text: <Localize translate_text="_t_Secure & responsible trading_t_" />,
+                    },
+                ],
+            },
+            {
+                id: 1,
+                header: <Localize translate_text="_t_PARTNERS_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/partners/deriv-prime',
+                        text: <Localize translate_text="_t_Deriv Prime_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: '/partners/affiliate-ib',
+                        text: <Localize translate_text="_t_Affiliates and IBs_t_" />,
+                    },
+                    {
+                        id: 2,
+                        href: '/partners/payment-agent',
+                        text: <Localize translate_text="_t_Payment agents_t_" />,
+                    },
+                    {
+                        id: 3,
+                        href: 'https://api.deriv.com/',
+                        text: <Localize translate_text="_t_API_t_" />,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 5,
+        layers: [
+            {
+                id: 0,
+                type: 'node',
+                node: <DerivGoBannerAndAwards />,
+            },
+        ],
+    },
+]
+
+export const EuFooterNavData: FooterItems[] = [
+    {
+        id: 0,
+        layers: [
+            {
+                id: 0,
+                header: <Localize translate_text="_t_ABOUT US_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/who-we-are',
+                        text: <Localize translate_text="_t_Who we are_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: '/why-choose-us',
+                        text: <Localize translate_text="_t_Why choose us_t_" />,
+                    },
+                    {
+                        id: 3,
+                        href: '/our-principles',
+                        text: <Localize translate_text="_t_Our principles_t_" />,
+                    },
+                    {
+                        id: 4,
+                        href: '/partners',
+                        text: <Localize translate_text="_t_Partnership programmes_t_" />,
+                    },
+                    {
+                        id: 5,
+                        href: '/contact_us',
+                        text: <Localize translate_text="_t_Contact us_t_" />,
+                    },
+                    { id: 6, href: '/careers', text: <Localize translate_text="_t_Careers_t_" /> },
+                    {
+                        id: 7,
+                        href: 'https://derivlife.com',
+                        text: <Localize translate_text="_t_Deriv life_t_" />,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 1,
+        layers: [
+            {
+                id: 0,
+                header: <Localize translate_text="_t_TRADE TYPES_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/trade-types/cfds',
+                        text: <Localize translate_text="_t_CFDs_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: '/trade-types/multiplier',
+                        text: <Localize translate_text="_t_Multipliers_t_" />,
+                    },
+                ],
+            },
+            {
+                id: 1,
+                header: <Localize translate_text="_t_MARKETS_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/markets/forex',
+                        text: <Localize translate_text="_t_Forex_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: '/markets/synthetic',
+                        text: <Localize translate_text="_t_Derived indices_t_" />,
+                    },
+                    {
+                        id: 2,
+                        href: '/markets/stock',
+                        text: <Localize translate_text="_t_Stocks & indices_t_" />,
+                    },
+                    {
+                        id: 3,
+                        href: '/markets/exchange-traded-funds',
+                        text: <Localize translate_text="_t_ETFs_t_" />,
+                    },
+                    {
+                        id: 4,
+                        href: '/markets/cryptocurrencies',
+                        text: <Localize translate_text="_t_Cryptocurrencies_t_" />,
+                    },
+                    {
+                        id: 5,
+                        href: '/markets/commodities',
+                        text: <Localize translate_text="_t_Commodities_t_" />,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 2,
+        layers: [
+            {
+                id: 0,
+                header: <Localize translate_text="_t_PLATFORMS_t_" />,
+                type: 'link',
+                items: [
+                    { id: 0, href: '/dmt5', text: <Localize translate_text="_t_Deriv MT5_t_" /> },
+                    {
+                        id: 1,
+                        href: '/dtrader',
+                        text: <Localize translate_text="_t_Deriv Trader_t_" />,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 3,
+        layers: [
+            {
+                id: 0,
+                header: <Localize translate_text="_t_SUPPORT_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/help-centre',
+                        text: <Localize translate_text="_t_Help centre_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: 'https://community.deriv.com/',
+                        text: <Localize translate_text="_t_Community_t_" />,
+                    },
+                    {
+                        id: 2,
+                        href: '/payment-methods',
+                        text: <Localize translate_text="_t_Payment methods_t_" />,
+                    },
+                    {
+                        id: 3,
+                        href: 'https://deriv.statuspage.io/',
+                        text: <Localize translate_text="_t_Status page_t_" />,
+                    },
+                    {
+                        id: 4,
+                        href: 'https://blog.deriv.com/',
+                        text: <Localize translate_text="_t_Deriv Blog_t_" />,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 4,
+        layers: [
+            {
+                id: 0,
+                header: <Localize translate_text="_t_LEGAL_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/regulatory',
+                        text: <Localize translate_text="_t_Regulatory information_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: '/terms-and-conditions/#clients',
+                        text: <Localize translate_text="_t_Terms & conditions_t_" />,
+                    },
+                    {
+                        id: 2,
+                        href: '/responsible',
+                        text: <Localize translate_text="_t_Secure & responsible trading_t_" />,
+                    },
+                ],
+            },
+            {
+                id: 1,
+                header: <Localize translate_text="_t_PARTNERS_t_" />,
+                type: 'link',
+                items: [
+                    {
+                        id: 0,
+                        href: '/partners/deriv-prime',
+                        text: <Localize translate_text="_t_Deriv Prime_t_" />,
+                    },
+                    {
+                        id: 1,
+                        href: '/partners/affiliate-ib',
+                        text: <Localize translate_text="_t_Affiliates_t_" />,
+                    },
+                    {
+                        id: 3,
+                        href: 'https://api.deriv.com/',
+                        text: <Localize translate_text="_t_API_t_" />,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 5,
+        layers: [
+            {
+                id: 0,
+                type: 'node',
+                node: <DerivGoBannerAndAwards />,
+            },
+        ],
+    },
+]
+
+export const warnText = (
+    <Localize translate_text="_t_CFDs and other products offered on this website are complex instruments with high risk of losing money rapidly owing to leverage. You should consider whether you understand how these products work and whether you can afford to risk losing your money._t_" />
+)
+
+export const socialButtonsROW = [
+    {
+        icon: <StandaloneFacebookIcon iconSize="md" />,
+        href: 'https://www.facebook.com/derivdotcom',
+    },
+    {
+        icon: <StandaloneInstagramIcon iconSize="md" />,
+        href: 'https://www.instagram.com/deriv_official',
+    },
+    {
+        icon: <StandaloneXTwitterIcon iconSize="md" />,
+        href: 'https://twitter.com/derivdotcom/',
+    },
+    {
+        icon: <StandaloneYoutubeIcon iconSize="md" />,
+        href: 'https://www.youtube.com/@deriv',
+    },
+    {
+        icon: <StandaloneLinkedinIcon iconSize="md" />,
+        href: 'https://www.linkedin.com/company/derivdotcom/',
+    },
+]
+
+export const socialButtonsEU = [
+    {
+        icon: <StandaloneFacebookIcon iconSize="md" />,
+        href: 'https://www.facebook.com/DerivEU',
+    },
+    {
+        icon: <StandaloneInstagramIcon iconSize="md" />,
+        href: 'https://www.instagram.com/deriv_eu/',
+    },
+    {
+        icon: <StandaloneXTwitterIcon iconSize="md" />,
+        href: 'https://twitter.com/deriv_eu/',
+    },
+    {
+        icon: <StandaloneYoutubeIcon iconSize="md" />,
+        href: 'https://www.youtube.com/@deriv',
+    },
+    {
+        icon: <StandaloneLinkedinIcon iconSize="md" />,
+        href: 'https://www.linkedin.com/company/derivdotcom/',
+    },
+]
+
+export const socialButtonsCareers = [
+    {
+        icon: <StandaloneFacebookIcon iconSize="md" />,
+        href: 'https://www.facebook.com/derivcareers',
+    },
+    {
+        icon: <StandaloneInstagramIcon iconSize="md" />,
+        href: 'https://www.instagram.com/derivcareers/',
+    },
+    {
+        icon: <StandaloneLinkedinIcon iconSize="md" />,
+        href: 'https://www.linkedin.com/company/derivdotcom/life/',
+    },
+]
diff --git a/src/features/components/templates/footer/description.tsx b/src/features/components/templates/footer/description.tsx
new file mode 100644
index 00000000000..b23a2599da2
--- /dev/null
+++ b/src/features/components/templates/footer/description.tsx
@@ -0,0 +1,96 @@
+import React from 'react'
+import { Text } from '@deriv/quill-design'
+import clsx from 'clsx'
+import { Localize } from 'components/localization'
+
+const sharedClasses = 'inline font-bold underline hover:text-typography-prominent'
+
+export const DescriptionContent = () => {
+    return (
+        <>
+            <Text size="sm">
+                <Localize
+                    translate_text="_t_Deriv (FX) Ltd is licensed by the Labuan Financial Services Authority <0>(licence)</0>. Deriv (BVI) Ltd is licensed by the British Virgin Islands Financial Services Commission <1>(licence)</1>. Deriv (V) Ltd is licensed by the Vanuatu Financial Services Commission <2>(licence)</2>. Deriv (SVG) LLC has a registered office at First Floor, SVG Teachers Credit Union Uptown Building, Corner of James and Middle Street, Kingstown P.O., St Vincent and the Grenadines. Deriv.com Limited is the holding company for the above subsidiaries with the registration number 71479 and the registered address is located at 2nd Floor, 1 Cornet Street, St Peter Port, Guernsey, GY1 1BZ._t_"
+                    components={[
+                        <a
+                            className={clsx(sharedClasses)}
+                            href="/regulatory/Deriv_(FX)_Ltd.pdf"
+                            key={0}
+                            target="_blank"
+                        />,
+                        <a
+                            className={clsx(sharedClasses)}
+                            href="/regulatory/Deriv_(BVI)_Ltd.pdf"
+                            key={1}
+                            target="_blank"
+                        />,
+                        <a
+                            className={clsx(sharedClasses)}
+                            href="/regulatory/Deriv_(V)_Ltd.pdf"
+                            key={2}
+                            target="_blank"
+                        />,
+                    ]}
+                />
+            </Text>
+            <Text size="sm">
+                <Localize
+                    translate_text="_t_Please read our <0>Terms and conditions</0>, <1>Risk disclosure</1>, and <2>Secure and responsible trading</2> to fully understand the risks involved before using our services. The information on this website does not constitute investment advice._t_"
+                    components={[
+                        <a
+                            className={clsx(sharedClasses)}
+                            href="/terms-and-conditions/#clients"
+                            key={0}
+                        />,
+                        <a
+                            className={clsx(sharedClasses)}
+                            href="/tnc/risk-disclosure.pdf"
+                            key={1}
+                            target="_blank"
+                        />,
+                        <a className={clsx(sharedClasses)} href="/responsible/" key={2} />,
+                    ]}
+                />
+            </Text>
+        </>
+    )
+}
+
+export const DescriptionContentEU = () => {
+    return (
+        <>
+            <Text size="sm">
+                <Localize
+                    translate_text="_t_Deriv Investments (Europe) Limited is licensed and regulated by the Malta Financial Services Authority under the Investment Services Act <0>(licence)</0>. Deriv Holdings (Guernsey) Limited is the holding company for the above subsidiary with the registration number 71479 and the registered address of 2nd Floor, 1 Cornet Street, St Peter Port, Guernsey, GY1 1BZ._t_"
+                    components={[
+                        <a
+                            className={clsx(sharedClasses)}
+                            href="/regulatory/Deriv_Investments_(Europe)_Limited.pdf"
+                            key={0}
+                            target="_blank"
+                        />,
+                    ]}
+                />
+            </Text>
+            <Text size="sm">
+                <Localize
+                    translate_text="_t_Please read our <0>Terms and conditions</0>, <1>Risk disclosure</1>, and <2>Secure and responsible trading</2> to fully understand the risks involved before using our services. The information on this website does not constitute investment advice._t_"
+                    components={[
+                        <a
+                            className={clsx(sharedClasses)}
+                            href="/terms-and-conditions/#clients"
+                            key={0}
+                        />,
+                        <a
+                            className={clsx(sharedClasses)}
+                            href="/tnc/eu/risk-disclosure.pdf"
+                            key={1}
+                            target="_blank"
+                        />,
+                        <a className={clsx(sharedClasses)} href="/responsible/" key={2} />,
+                    ]}
+                />
+            </Text>
+        </>
+    )
+}
diff --git a/src/features/components/templates/footer/disclaimer/data.tsx b/src/features/components/templates/footer/disclaimer/data.tsx
deleted file mode 100644
index 66bf10c0a2f..00000000000
--- a/src/features/components/templates/footer/disclaimer/data.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import React from 'react'
-import { SmartDisclaimerParagraph } from './types'
-import Link from 'features/components/atoms/link'
-
-export const disclaimerContent: SmartDisclaimerParagraph[] = [
-    {
-        id: 0,
-        data: {
-            text: '_t_Deriv Investments (Europe) Limited is licensed and regulated by the Malta Financial Services Authority under the Investment Services Act <0>(licence)</0>. Deriv.com Limited is the holding company for the above subsidiary with the registration number 71479 and the registered address is located at 2nd Floor, 1 Cornet Street, St Peter Port, Guernsey, GY1 1BZ._t_',
-            components: [
-                <Link
-                    weight="bold"
-                    key={0}
-                    target="_blank"
-                    url={{
-                        type: 'non-company',
-                        href: '/regulatory/Deriv_Investments_(Europe)_Limited.pdf',
-                    }}
-                    rel="noopener noreferrer"
-                />,
-            ],
-        },
-        visibility: {
-            is_eu: true,
-        },
-    },
-    {
-        id: 1,
-        data: {
-            text: '_t_Deriv Investments (Europe) Limited is licensed and regulated by the Malta Financial Services Authority under the Investment Services Act (<0>licence</0>). Deriv (FX) Ltd is licensed by the Labuan Financial Services Authority (<1>licence</1>). Deriv (BVI) Ltd is licensed by the British Virgin Islands Financial Services Commission (<2>licence</2>). Deriv (V) Ltd is licensed by the Vanuatu Financial Services Commission (<3>licence</3>). Deriv (SVG) LLC has a registered office at First Floor, SVG Teachers Credit Union Uptown Building, Corner of James and Middle Street, Kingstown P.O., St Vincent and the Grenadines. Deriv.com Limited is the holding company for the above subsidiaries with the registration number 71479 and the registered address is located at 2nd Floor, 1 Cornet Street, St Peter Port, Guernsey, GY1 1BZ._t_',
-            components: [
-                <Link
-                    weight="bold"
-                    key={0}
-                    target="_blank"
-                    url={{
-                        type: 'non-company',
-                        href: '/regulatory/Deriv_Investments_(Europe)_Limited.pdf',
-                    }}
-                    rel="noopener noreferrer"
-                />,
-                <Link
-                    weight="bold"
-                    key={1}
-                    target="_blank"
-                    url={{
-                        type: 'non-company',
-                        href: '/regulatory/Deriv_(FX)_Ltd.pdf',
-                    }}
-                    rel="noopener noreferrer"
-                />,
-                <Link
-                    weight="bold"
-                    key={2}
-                    target="_blank"
-                    url={{
-                        type: 'non-company',
-                        href: '/regulatory/Deriv_(BVI)_Ltd.pdf',
-                    }}
-                    rel="noopener noreferrer"
-                />,
-                <Link
-                    weight="bold"
-                    key={3}
-                    target="_blank"
-                    url={{
-                        type: 'non-company',
-                        href: '/regulatory/Deriv_(V)_Ltd.pdf',
-                    }}
-                    rel="noopener noreferrer"
-                />,
-            ],
-        },
-        visibility: {
-            is_cpa_plan: true,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            text: '_t_Deriv (FX) Ltd is licensed by the Labuan Financial Services Authority (<0>licence</0>). Deriv (BVI) Ltd is licensed by the British Virgin Islands Financial Services Commission (<1>licence</1>). Deriv (V) Ltd is licensed by the Vanuatu Financial Services Commission (<2>licence</2>). Deriv (SVG) LLC has a registered office at First Floor, SVG Teachers Credit Union Uptown Building, Corner of James and Middle Street, Kingstown P.O., St Vincent and the Grenadines. Deriv.com Limited is the holding company for the above subsidiaries with the registration number 71479 and the registered address is located at 2nd Floor, 1 Cornet Street, St Peter Port, Guernsey, GY1 1BZ._t_',
-            components: [
-                <Link
-                    weight="bold"
-                    key={0}
-                    target="_blank"
-                    url={{
-                        type: 'non-company',
-                        href: '/regulatory/Deriv_(FX)_Ltd.pdf',
-                    }}
-                    rel="noopener noreferrer"
-                />,
-                <Link
-                    weight="bold"
-                    key={1}
-                    target="_blank"
-                    url={{
-                        type: 'non-company',
-                        href: '/regulatory/Deriv_(BVI)_Ltd.pdf',
-                    }}
-                    rel="noopener noreferrer"
-                />,
-                <Link
-                    weight="bold"
-                    key={2}
-                    target="_blank"
-                    url={{
-                        type: 'non-company',
-                        href: '/regulatory/Deriv_(V)_Ltd.pdf',
-                    }}
-                    rel="noopener noreferrer"
-                />,
-            ],
-        },
-        visibility: {
-            is_eu: false,
-            is_cpa_plan: false,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            text: '_t_Please read our <0>Terms and conditions</0>,<1> Risk disclosure</1>, and <2>Secure and responsible trading</2> to fully understand the risks involved before using our services. The information on this website does not constitute investment advice._t_',
-            components: [
-                <Link
-                    weight="bold"
-                    key={0}
-                    target="_blank"
-                    url={{
-                        type: 'internal',
-                        to: '/terms-and-conditions/#clients',
-                    }}
-                />,
-                <Link
-                    weight="bold"
-                    key={1}
-                    target="_blank"
-                    url={{
-                        type: 'non-company',
-                        href: '/tnc/risk-disclosure.pdf',
-                    }}
-                />,
-                <Link
-                    weight="bold"
-                    key={2}
-                    target="_blank"
-                    url={{
-                        type: 'internal',
-                        to: '/responsible/',
-                    }}
-                />,
-            ],
-        },
-        visibility: {
-            is_non_eu: true,
-        },
-    },
-    {
-        id: 4,
-        data: {
-            text: '_t_Please read our <0>Terms and conditions</0>,<1> Risk disclosure</1>, and <2>Secure and responsible trading</2> to fully understand the risks involved before using our services. The information on this website does not constitute investment advice._t_',
-            components: [
-                <Link
-                    weight="bold"
-                    key={0}
-                    target="_blank"
-                    url={{
-                        type: 'internal',
-                        to: '/terms-and-conditions/#clients',
-                    }}
-                />,
-                <Link
-                    weight="bold"
-                    key={1}
-                    target="_blank"
-                    url={{
-                        type: 'non-company',
-                        href: '/tnc/eu/risk-disclosure.pdf',
-                    }}
-                />,
-                <Link
-                    weight="bold"
-                    key={2}
-                    target="_blank"
-                    url={{
-                        type: 'internal',
-                        to: '/responsible/',
-                    }}
-                />,
-            ],
-        },
-        visibility: {
-            is_eu: true,
-        },
-    },
-]
-
-export const riskWarningContent: SmartDisclaimerParagraph[] = [
-    {
-        id: 0,
-        data: {
-            text: '_t_CFDs and other products offered on this website are complex instruments with high risk of losing money rapidly owing to leverage. You should consider whether you understand how these products work and whether you can afford to risk losing your money._t_',
-        },
-        visibility: {
-            is_non_eu: true,
-        },
-    },
-]
diff --git a/src/features/components/templates/footer/disclaimer/disclaimer.module.scss b/src/features/components/templates/footer/disclaimer/disclaimer.module.scss
deleted file mode 100644
index be6678eda7e..00000000000
--- a/src/features/components/templates/footer/disclaimer/disclaimer.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.risk_warning_container {
-    border-radius: 1.5rem;
-}
diff --git a/src/features/components/templates/footer/disclaimer/index.tsx b/src/features/components/templates/footer/disclaimer/index.tsx
deleted file mode 100644
index e3883e5ac54..00000000000
--- a/src/features/components/templates/footer/disclaimer/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { useMemo } from 'react'
-import { risk_warning_container } from './disclaimer.module.scss'
-import { disclaimerContent, riskWarningContent } from './data'
-import { DisclaimerParagraphConfig } from './types'
-import Typography from 'features/components/atoms/typography'
-import { Localize } from 'components/localization'
-import useVisibleContent from 'components/hooks/use-visible-content'
-import useRegion from 'components/hooks/use-region'
-import Container from 'features/components/atoms/container'
-
-const Disclaimer = () => {
-    const { is_eu, is_non_eu, is_cpa_plan, is_row, is_region_loading } = useRegion()
-
-    const visibility_config: DisclaimerParagraphConfig = useMemo(() => {
-        return {
-            is_cpa_plan,
-            is_eu,
-            is_non_eu,
-            is_non_eu_or_cpa_plan: is_non_eu || is_cpa_plan,
-        }
-    }, [is_cpa_plan, is_eu, is_non_eu])
-
-    const visible_disclaimer_content = useVisibleContent({
-        content: disclaimerContent,
-        config: visibility_config,
-    })
-
-    const visible_risk_content = useVisibleContent({
-        content: riskWarningContent,
-        config: visibility_config,
-    })
-
-    return (
-        <Container.Fixed margin_block="10x">
-            {!is_region_loading &&
-                visible_disclaimer_content.map((item) => (
-                    <Typography.Paragraph key={item.id} size={'small'} mb="10x">
-                        <Localize
-                            translate_text={item.data.text}
-                            components={item.data.components}
-                        />
-                    </Typography.Paragraph>
-                ))}
-            {is_row && !is_cpa_plan && (
-                <Container.Fixed
-                    className={risk_warning_container}
-                    bgcolor="tertiary"
-                    padding="10x"
-                >
-                    {visible_risk_content.map((item, index) => {
-                        const not_last_item =
-                            index !== visible_risk_content.length - 1 ? 'small' : undefined
-                        return (
-                            <Typography.Paragraph
-                                key={item.id}
-                                size={'small'}
-                                mb={not_last_item ? '10x' : undefined}
-                            >
-                                <Localize
-                                    translate_text={item.data.text}
-                                    components={item.data.components}
-                                />
-                            </Typography.Paragraph>
-                        )
-                    })}
-                </Container.Fixed>
-            )}
-        </Container.Fixed>
-    )
-}
-
-export default Disclaimer
diff --git a/src/features/components/templates/footer/disclaimer/types.ts b/src/features/components/templates/footer/disclaimer/types.ts
deleted file mode 100644
index 9e031367bef..00000000000
--- a/src/features/components/templates/footer/disclaimer/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ReactElement } from 'react'
-import { TSmartContent, TString } from 'types/generics'
-
-export type DisclaimerParagraph = {
-    text: TString
-    components?: ReactElement[]
-}
-
-export type DisclaimerParagraphConfig = {
-    is_eu: boolean
-    is_non_eu: boolean
-    is_cpa_plan: boolean
-    is_non_eu_or_cpa_plan: boolean
-}
-
-export type SmartDisclaimerParagraph = TSmartContent<DisclaimerParagraph, DisclaimerParagraphConfig>
diff --git a/src/features/components/templates/footer/download.tsx b/src/features/components/templates/footer/download.tsx
new file mode 100644
index 00000000000..a0a62c84386
--- /dev/null
+++ b/src/features/components/templates/footer/download.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import {
+    LabelPairedAppleIcon,
+    LabelPairedGooglePlayIcon,
+    LabelPairedHuaweiAppGalleryIcon,
+    // eslint-disable-next-line import/no-unresolved
+} from '@deriv/quill-icons/LabelPaired'
+import clsx from 'clsx'
+import { StaticImage } from 'gatsby-plugin-image'
+import { CustomLink } from '@deriv-com/components'
+import { localize } from 'components/localization'
+
+const sharedClasses =
+    'flex items-center justify-center gap-gap-md p-general-sm rounded-[4px] border-solid border-xs border-opacity-black-100'
+
+const DownloadBadges = () => {
+    return (
+        <div className="flex flex-col gap-gap-md max-lg:flex-1">
+            <CustomLink
+                href="https://appgallery.huawei.com/app/C103801913"
+                target="_blank"
+                className={clsx(sharedClasses, 'order-last')}
+            >
+                <LabelPairedHuaweiAppGalleryIcon iconSize="md" />
+                <StaticImage
+                    src="../../../../images/common/migration/footer/explore-appgallery.png"
+                    alt={localize('_t_explore it on appgallery_t_')}
+                    formats={['webp', 'auto']}
+                    width={90}
+                    placeholder="none"
+                />
+            </CustomLink>
+            <CustomLink
+                href="https://play.google.com/store/apps/details?id=com.deriv.app"
+                target="_blank"
+                className={clsx(sharedClasses)}
+            >
+                <LabelPairedGooglePlayIcon iconSize="md" />
+                <StaticImage
+                    src="../../../../images/common/migration/footer/get-googleplay.png"
+                    alt={localize('_t_get it on google play_t_')}
+                    formats={['webp', 'auto']}
+                    width={90}
+                    placeholder="none"
+                />
+            </CustomLink>
+            <CustomLink
+                href="https://apps.apple.com/my/app/deriv-go-online-trading-app/id1550561298"
+                target="_blank"
+                className={clsx(sharedClasses)}
+            >
+                <LabelPairedAppleIcon iconSize="md" />
+                <StaticImage
+                    src="../../../../images/common/migration/footer/download-appstore.png"
+                    alt={localize('_t_download on the app store_t_')}
+                    formats={['webp', 'auto']}
+                    width={90}
+                    placeholder="none"
+                />
+            </CustomLink>
+        </div>
+    )
+}
+
+export default DownloadBadges
diff --git a/src/features/components/templates/footer/footer-icons/index.tsx b/src/features/components/templates/footer/footer-icons/index.tsx
deleted file mode 100644
index f56af318f66..00000000000
--- a/src/features/components/templates/footer/footer-icons/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import FooterSocialIcons from '../social-icons'
-import DerivFooterLogo from 'images/svg/layout/deriv_footer_logo.svg'
-import Image from 'features/components/atoms/image'
-import Flex from 'features/components/atoms/flex-box'
-
-const FooterIcons = () => {
-    return (
-        <Flex.Box direction="col">
-            <Flex.Box
-                justify="between"
-                align="center"
-                direction="col"
-                gap={'30x'}
-                md={{
-                    direction: 'row',
-                }}
-            >
-                <Image src={DerivFooterLogo} alt="deriv logo image" width={96} height={36} />
-                <FooterSocialIcons />
-            </Flex.Box>
-        </Flex.Box>
-    )
-}
-
-export default FooterIcons
diff --git a/src/features/components/templates/footer/footer.module.scss b/src/features/components/templates/footer/footer.module.scss
deleted file mode 100644
index 7ad947d0921..00000000000
--- a/src/features/components/templates/footer/footer.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use 'features/styles/theme/theme-mixins' as *;
-@import 'features/styles/theme/variables';
-
-.footer {
-    opacity: 0.8;
-
-    @include breakpoints(tablet) {
-        border-block-start: 1px solid $color-grey-44;
-    }
-}
-
-.footer_grid {
-    display: grid;
-    inline-size: 100%;
-    grid-template-columns: 1fr;
-
-    @include breakpoints(tablet) {
-        grid-template-columns: 2fr;
-    }
-}
diff --git a/src/features/components/templates/footer/index.tsx b/src/features/components/templates/footer/index.tsx
index 825331c6aa8..468535a80d8 100644
--- a/src/features/components/templates/footer/index.tsx
+++ b/src/features/components/templates/footer/index.tsx
@@ -1,56 +1,47 @@
-import React from 'react'
-import { footer_grid, footer } from './footer.module.scss'
-import { footerLinks } from './data'
-import FooterLinksColumn from './links-column'
-import Disclaimer from './disclaimer'
-import FooterIcons from './footer-icons'
-import usePpc from 'features/hooks/use-ppc'
-import Flex from 'features/components/atoms/flex-box'
-import useVisibleContent from 'components/hooks/use-visible-content'
-import Container from 'features/components/atoms/container'
+import React, { useEffect, useState } from 'react'
+import { Footer } from '@deriv-com/blocks'
+import { qtMerge } from '@deriv/quill-design'
+import {
+    EuFooterNavData,
+    RowFooterNavData,
+    socialButtonsCareers,
+    socialButtonsEU,
+    socialButtonsROW,
+    warnText,
+} from './data'
+import { DerivGoBannerAndAwards } from './banner-and-awards'
+import { DescriptionContent, DescriptionContentEU } from './description'
 import useRegion from 'components/hooks/use-region'
+import { getLocationPathname } from 'common/utility'
 
-interface FooterProps {
-    no_footer_links?: boolean
-}
+export const MainFooter = () => {
+    const [is_career, setIsCareer] = useState(false)
+    const { is_eu } = useRegion()
 
-const Footer = ({ no_footer_links = false }: FooterProps) => {
-    const { is_ppc } = usePpc()
-    const { is_eu, is_cpa_plan } = useRegion()
+    useEffect(() => {
+        const current_path = getLocationPathname()
+        const splitted_path = current_path.split('/')
+        const is_career_page = splitted_path.includes('careers')
+        setIsCareer(is_career_page)
+    }, [])
 
-    const content = useVisibleContent({ content: footerLinks, config: { is_ppc } })
+    const socialButtons = is_career
+        ? socialButtonsCareers
+        : is_eu
+        ? socialButtonsEU
+        : socialButtonsROW
 
     return (
-        <Container.Fixed
-            as={'footer'}
-            bgcolor="primary"
-            className={footer}
-            mb={is_eu || is_cpa_plan ? '40x' : undefined}
-            pb={is_eu || is_cpa_plan ? '20x' : undefined}
-            md={{
-                mb: is_eu || is_cpa_plan ? '15x' : undefined,
-                pb: is_eu || is_cpa_plan ? '5x' : undefined,
-            }}
+        <Footer.FooterBlock
+            warningText={!is_eu ? warnText : null}
+            socialButtons={socialButtons}
+            bannerAndAwards={DerivGoBannerAndAwards}
+            descriptionContent={is_eu ? DescriptionContentEU : DescriptionContent}
+            className={qtMerge(is_eu && 'mb-[120px] lg:mb-[80px]')}
         >
-            <Container.Fluid pt={'20x'}>
-                <FooterIcons />
-                <Container.Fixed
-                    className={footer_grid}
-                    padding_block={'5x'}
-                    md={{ padding_block: '20x' }}
-                >
-                    {!no_footer_links && (
-                        <Flex.Box justify="between" visible="larger-than-tablet">
-                            {content?.map((contentItem) => (
-                                <FooterLinksColumn key={contentItem.id} item={contentItem} />
-                            ))}
-                        </Flex.Box>
-                    )}
-                    <Disclaimer />
-                </Container.Fixed>
-            </Container.Fluid>
-        </Container.Fixed>
+            <Footer.MainNavContent items={is_eu ? EuFooterNavData : RowFooterNavData} cols="six" />
+        </Footer.FooterBlock>
     )
 }
 
-export default Footer
+export default MainFooter
diff --git a/src/features/components/templates/footer/link-item/index.tsx b/src/features/components/templates/footer/link-item/index.tsx
deleted file mode 100644
index 0860d9de8d9..00000000000
--- a/src/features/components/templates/footer/link-item/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import { SmartFooterLink } from '../types'
-import usePpc from 'features/hooks/use-ppc'
-import useRegion from 'components/hooks/use-region'
-import Link from 'features/components/atoms/link'
-import { Localize } from 'components/localization'
-
-interface FooterLinkProps {
-    item: SmartFooterLink
-}
-
-const FooterLink = ({ item: { data } }: FooterLinkProps) => {
-    const { is_ppc, is_ppc_redirect } = usePpc()
-    const { is_row } = useRegion()
-    const { url } = data
-
-    const visible_url = typeof url === 'function' ? url({ is_ppc, is_ppc_redirect, is_row }) : url
-
-    return (
-        <Link url={visible_url} size="small" pb="6x">
-            <Localize translate_text={data.text} />
-        </Link>
-    )
-}
-
-export default FooterLink
diff --git a/src/features/components/templates/footer/links-column/index.tsx b/src/features/components/templates/footer/links-column/index.tsx
deleted file mode 100644
index 92deff95a84..00000000000
--- a/src/features/components/templates/footer/links-column/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import { SmartFooterLinkColumn } from '../types'
-import FooterLink from '../link-item'
-import Flex from 'features/components/atoms/flex-box'
-import Typography from 'features/components/atoms/typography'
-import { Localize } from 'components/localization'
-import useVisibleContent from 'components/hooks/use-visible-content'
-import usePpc from 'features/hooks/use-ppc'
-import useRegion from 'components/hooks/use-region'
-
-interface FooterLinksColumnProps {
-    item: SmartFooterLinkColumn
-}
-
-const FooterLinksColumn = ({ item: { data } }: FooterLinksColumnProps) => {
-    const { is_ppc, is_ppc_redirect } = usePpc()
-    const { is_row } = useRegion()
-
-    const links = useVisibleContent({
-        content: data.links,
-        config: { is_ppc, is_ppc_redirect, is_row },
-    })
-
-    return (
-        <Flex.Box direction="col">
-            <Typography.Paragraph size={'medium'} weight="bold" pb="10x">
-                <Localize translate_text={data.title} />
-            </Typography.Paragraph>
-            {links.map((linkItem) => (
-                <FooterLink key={linkItem.id} item={linkItem} />
-            ))}
-        </Flex.Box>
-    )
-}
-
-export default FooterLinksColumn
diff --git a/src/features/components/templates/footer/social-icons/data.ts b/src/features/components/templates/footer/social-icons/data.ts
deleted file mode 100644
index 128c642262c..00000000000
--- a/src/features/components/templates/footer/social-icons/data.ts
+++ /dev/null
@@ -1,353 +0,0 @@
-import Telegram from 'images/svg/footer/telegram_icon.svg'
-import Twitter from 'images/svg/footer/twitter_icon.svg'
-import Youtube from 'images/svg/footer/youtube_icon.svg'
-import Instagram from 'images/svg/footer/instagram_icon.svg'
-import Facebook from 'images/svg/footer/facebook_icon.svg'
-import Linkedin from 'images/svg/footer/linkedin_icon.svg'
-import { TSmartContent, TString } from 'types/generics'
-import { LinkUrlType } from 'features/types'
-
-export type SocialMediaAccount = {
-    url: ((config: Config) => LinkUrlType) | LinkUrlType
-    icon: string
-    image_alt?: TString
-}
-
-export type Config = {
-    is_eu?: boolean
-    is_career_page?: boolean
-    is_ar?: boolean
-    is_es?: boolean
-}
-
-export type SmartSocialAccount = TSmartContent<SocialMediaAccount, Config>
-
-export const socialMediaAccounts: SmartSocialAccount[] = [
-    {
-        id: 0,
-        data: {
-            url: ({ is_ar, is_es }) => {
-                if (is_es) {
-                    return {
-                        type: 'non-company',
-                        target: '_blank',
-                        href: 'https://www.facebook.com/derivespanol',
-                    }
-                } else if (is_ar) {
-                    return {
-                        type: 'non-company',
-                        target: '_blank',
-                        href: 'https://www.facebook.com/derivarabic',
-                    }
-                }
-                return {
-                    type: 'non-company',
-                    target: '_blank',
-                    href: 'https://www.facebook.com/derivdotcom',
-                }
-            },
-            icon: Facebook,
-            image_alt: '_t_Facebook_t_',
-        },
-        visibility: {
-            is_eu: false,
-            is_career_page: false,
-        },
-    },
-    {
-        id: 1,
-        data: {
-            url: ({ is_ar, is_es }) => {
-                if (is_es) {
-                    return {
-                        type: 'non-company',
-                        show_eu_modal: true,
-                        target: '_blank',
-                        href: 'https://www.facebook.com/derivespanol',
-                    }
-                } else if (is_ar) {
-                    return {
-                        type: 'non-company',
-                        show_eu_modal: true,
-                        target: '_blank',
-                        href: 'https://www.facebook.com/derivarabic',
-                    }
-                }
-                return {
-                    type: 'non-company',
-                    show_eu_modal: true,
-                    target: '_blank',
-                    href: 'https://www.facebook.com/derivEU/',
-                }
-            },
-            icon: Facebook,
-            image_alt: '_t_Facebook_t_',
-        },
-        visibility: {
-            is_eu: true,
-            is_career_page: false,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            url: {
-                type: 'non-company',
-                target: '_blank',
-                href: 'https://www.facebook.com/derivcareers',
-                show_eu_modal: true,
-            },
-            icon: Facebook,
-            image_alt: '_t_Facebook_t_',
-        },
-        visibility: {
-            is_career_page: true,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            url: ({ is_ar, is_es }) => {
-                if (is_es) {
-                    return {
-                        type: 'non-company',
-                        target: '_blank',
-                        href: 'https://www.instagram.com/deriv_espanol/',
-                    }
-                } else if (is_ar) {
-                    return {
-                        type: 'non-company',
-                        target: '_blank',
-                        href: 'https://www.instagram.com/deriv_ar/',
-                    }
-                }
-                return {
-                    type: 'non-company',
-                    target: '_blank',
-                    href: 'https://www.instagram.com/deriv_official/',
-                }
-            },
-            icon: Instagram,
-            image_alt: '_t_Instagram_t_',
-        },
-        visibility: {
-            is_eu: false,
-            is_career_page: false,
-        },
-    },
-    {
-        id: 4,
-        data: {
-            url: ({ is_ar, is_es }) => {
-                if (is_es) {
-                    return {
-                        type: 'non-company',
-                        show_eu_modal: true,
-                        target: '_blank',
-                        href: 'https://www.instagram.com/deriv_espanol/',
-                    }
-                } else if (is_ar) {
-                    return {
-                        type: 'non-company',
-                        show_eu_modal: true,
-                        target: '_blank',
-                        href: 'https://www.instagram.com/deriv_ar/',
-                    }
-                }
-                return {
-                    type: 'non-company',
-                    show_eu_modal: true,
-                    target: '_blank',
-                    href: 'https://www.instagram.com/deriv_eu/',
-                }
-            },
-            icon: Instagram,
-            image_alt: '_t_Instagram_t_',
-        },
-        visibility: {
-            is_career_page: false,
-            is_eu: true,
-        },
-    },
-    {
-        id: 5,
-        data: {
-            url: {
-                type: 'non-company',
-                target: '_blank',
-                href: 'https://www.instagram.com/derivcareers/',
-                show_eu_modal: true,
-            },
-            icon: Instagram,
-            image_alt: '_t_Instagram_t_',
-        },
-        visibility: {
-            is_career_page: true,
-        },
-    },
-    {
-        id: 6,
-        data: {
-            url: ({ is_ar, is_es }) => {
-                if (is_es) {
-                    return {
-                        type: 'non-company',
-                        target: '_blank',
-                        href: 'https://twitter.com/DerivEspanol',
-                    }
-                } else if (is_ar) {
-                    return {
-                        type: 'non-company',
-                        target: '_blank',
-                        href: 'https://twitter.com/DerivArabic',
-                    }
-                }
-                return {
-                    type: 'non-company',
-                    target: '_blank',
-                    href: 'https://twitter.com/derivdotcom/',
-                }
-            },
-            icon: Twitter,
-            image_alt: '_t_Twitter_t_',
-        },
-        visibility: {
-            is_career_page: false,
-            is_eu: false,
-        },
-    },
-    {
-        id: 7,
-        data: {
-            url: ({ is_ar, is_es }) => {
-                if (is_es) {
-                    return {
-                        type: 'non-company',
-                        show_eu_modal: true,
-                        target: '_blank',
-                        href: 'https://twitter.com/DerivEspanol',
-                    }
-                } else if (is_ar) {
-                    return {
-                        type: 'non-company',
-                        show_eu_modal: true,
-                        target: '_blank',
-                        href: 'https://twitter.com/DerivArabic',
-                    }
-                }
-                return {
-                    type: 'non-company',
-                    show_eu_modal: true,
-                    target: '_blank',
-                    href: 'https://www.twitter.com/deriv_eu/',
-                }
-            },
-            icon: Twitter,
-            image_alt: '_t_Twitter_t_',
-        },
-        visibility: {
-            is_career_page: false,
-            is_eu: true,
-        },
-    },
-    {
-        id: 8,
-        data: {
-            url: {
-                type: 'non-company',
-                target: '_blank',
-                href: 'https://www.youtube.com/@deriv',
-            },
-            icon: Youtube,
-            image_alt: '_t_Youtube_t_',
-        },
-        visibility: {
-            is_career_page: false,
-            is_eu: false,
-        },
-    },
-    {
-        id: 9,
-        data: {
-            url: {
-                type: 'non-company',
-                target: '_blank',
-                href: 'https://www.youtube.com/@deriv',
-                show_eu_modal: true,
-            },
-            icon: Youtube,
-            image_alt: '_t_Youtube_t_',
-        },
-        visibility: {
-            is_career_page: false,
-            is_eu: true,
-        },
-    },
-    {
-        id: 10,
-        data: {
-            url: {
-                type: 'non-company',
-                target: '_blank',
-                href: 'https://www.linkedin.com/company/derivdotcom/',
-            },
-            icon: Linkedin,
-            image_alt: '_t_Linkedin_t_',
-        },
-        visibility: {
-            is_career_page: false,
-            is_eu: false,
-        },
-    },
-    {
-        id: 11,
-        data: {
-            url: {
-                type: 'non-company',
-                target: '_blank',
-                href: 'https://www.linkedin.com/company/derivdotcom/',
-                show_eu_modal: true,
-            },
-            icon: Linkedin,
-            image_alt: '_t_Linkedin_t_',
-        },
-        visibility: {
-            is_career_page: false,
-            is_eu: true,
-        },
-    },
-    {
-        id: 12,
-        data: {
-            url: {
-                type: 'non-company',
-                target: '_blank',
-                href: 'https://www.linkedin.com/company/derivdotcom/life/',
-                show_eu_modal: true,
-            },
-            icon: Linkedin,
-            image_alt: '_t_Linkedin_t_',
-        },
-        visibility: {
-            is_career_page: true,
-        },
-    },
-    //temp removal of telegram : Start
-    // {
-    //     id: 13,
-    //     data: {
-    //         url: {
-    //             type: 'non-company',
-    //             target: '_blank',
-    //             href: 'https://t.me/derivdotcomofficial',
-    //         },
-    //         icon: Telegram,
-    //         image_alt: '_t_Telegram_t_',
-    //     },
-    //     visibility: {
-    //         is_eu: false,
-    //         is_career_page: false,
-    //     },
-    // },
-    //temp removal of telegram : End
-]
diff --git a/src/features/components/templates/footer/social-icons/index.tsx b/src/features/components/templates/footer/social-icons/index.tsx
deleted file mode 100644
index 2d2b33dfd2e..00000000000
--- a/src/features/components/templates/footer/social-icons/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { socialMediaAccounts } from './data'
-import Flex from 'features/components/atoms/flex-box'
-import { getLocationPathname } from 'common/utility'
-import Image from 'features/components/atoms/image'
-import Link from 'features/components/atoms/link'
-import useVisibleContent from 'components/hooks/use-visible-content'
-import useRegion from 'components/hooks/use-region'
-
-const FooterSocialIcons = () => {
-    const [is_career, setIsCareer] = useState(false)
-    const { is_eu } = useRegion()
-    const { i18n } = useTranslation()
-    const { language } = i18n
-
-    useEffect(() => {
-        const current_path = getLocationPathname()
-        const splitted_path = current_path.split('/')
-        const is_career_page = splitted_path.includes('careers')
-        setIsCareer(is_career_page)
-    }, [])
-
-    const config = {
-        is_career_page: is_career,
-        is_eu,
-        is_ar: language === 'ar',
-        is_es: language === 'es',
-    }
-
-    const icons = useVisibleContent({
-        content: socialMediaAccounts,
-        config,
-    })
-
-    return (
-        <Flex.Box justify="center" align="center" gap="12x">
-            {icons.map(({ data, id }) => {
-                const iconUrl = typeof data.url === 'function' ? data.url(config) : data.url
-                return (
-                    <Link key={id} url={iconUrl}>
-                        <Image src={data.icon} alt={data.image_alt} width={24} height={24} />
-                    </Link>
-                )
-            })}
-        </Flex.Box>
-    )
-}
-
-export default FooterSocialIcons
diff --git a/src/features/components/templates/footer/types.ts b/src/features/components/templates/footer/types.ts
deleted file mode 100644
index c68420548a4..00000000000
--- a/src/features/components/templates/footer/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { LinkUrlType } from 'features/types'
-import { TSmartContent, TString } from 'types/generics'
-
-export interface FooterLinkConfig {
-    is_ppc: boolean
-    is_ppc_redirect: boolean
-    is_row: boolean
-}
-
-export interface FooterLink {
-    text: TString
-    url: LinkUrlType | ((config: Partial<FooterLinkConfig>) => LinkUrlType)
-}
-
-export type SmartFooterLink = TSmartContent<FooterLink, FooterLinkConfig>
-
-export interface FooterLinkColumn {
-    title: TString
-    links: SmartFooterLink[]
-}
-
-export type SmartFooterLinkColumn = TSmartContent<FooterLinkColumn, { is_ppc: boolean }>
diff --git a/src/features/components/templates/layout/data.ts b/src/features/components/templates/layout/data.ts
new file mode 100644
index 00000000000..01966ba5b6d
--- /dev/null
+++ b/src/features/components/templates/layout/data.ts
@@ -0,0 +1,106 @@
+import { LangItems } from '@deriv-com/providers'
+
+export const langItemsROW: LangItems = {
+    en: {
+        isDefault: true,
+        path: 'en',
+        displayName: 'English',
+        shortName: 'EN',
+        affiliateLang: 0,
+    },
+    es: {
+        path: 'es',
+        displayName: 'Español',
+        shortName: 'ES',
+        affiliateLang: 8,
+    },
+    fr: {
+        path: 'fr',
+        displayName: 'Français',
+        shortName: 'FR',
+        affiliateLang: 2,
+    },
+    it: {
+        path: 'it',
+        displayName: 'Italiano',
+        shortName: 'IT',
+        affiliateLang: 3,
+    },
+    pl: {
+        path: 'pl',
+        displayName: 'Polski',
+        shortName: 'PL',
+        affiliateLang: 5,
+    },
+    pt: {
+        path: 'pt',
+        displayName: 'Português',
+        shortName: 'PT',
+        affiliateLang: 9,
+    },
+    ru: {
+        path: 'ru',
+        displayName: 'Русский',
+        shortName: 'RU',
+        affiliateLang: 1,
+    },
+    th: {
+        path: 'th',
+        displayName: 'Thai',
+        shortName: 'TH',
+        affiliateLang: 12,
+    },
+    vi: {
+        path: 'vi',
+        displayName: 'Tiếng Việt',
+        shortName: 'VI',
+        affiliateLang: 6,
+    },
+    tr: {
+        path: 'tr',
+        displayName: 'Türkçe',
+        shortName: 'TR',
+        affiliateLang: 14,
+    },
+    zhcn: {
+        path: 'zh-cn',
+        displayName: '简体中文',
+        shortName: '简体',
+        affiliateLang: 10,
+    },
+    zhtw: {
+        path: 'zh-tw',
+        displayName: '繁體中文',
+        shortName: '繁體',
+        affiliateLang: 11,
+    },
+    bn: {
+        path: 'bn',
+        displayName: 'বাংলা',
+        shortName: 'BN',
+        affiliateLang: 15,
+    },
+    ar: {
+        path: 'ar',
+        displayName: 'العربية',
+        shortName: 'AR',
+    },
+    ko: {
+        path: 'ko',
+        displayName: '한국어',
+        shortName: 'KO',
+        affiliateLang: 16,
+    },
+    de: {
+        path: 'de',
+        displayName: 'Deutsch',
+        shortName: 'DE',
+        affiliateLang: 16,
+    },
+    si: {
+        path: 'si',
+        displayName: 'සිංහල',
+        shortName: 'SI',
+        affiliateLang: 17,
+    },
+}
diff --git a/src/features/components/templates/layout/index.tsx b/src/features/components/templates/layout/index.tsx
index 7174a2d83fa..3e481ef83f1 100644
--- a/src/features/components/templates/layout/index.tsx
+++ b/src/features/components/templates/layout/index.tsx
@@ -1,5 +1,8 @@
-import React, { ReactNode } from 'react'
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React, { ReactNode, useCallback } from 'react'
+import { LanguageProvider, SharedLinkProvider } from '@deriv-com/providers'
 import { main_wrapper } from './style.module.scss'
+import { langItemsROW } from './data'
 import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param'
 import PpcProvider from 'features/contexts/ppc-campaign/ppc.provider'
 import { getLanguage, isBrowser } from 'common/utility'
@@ -8,6 +11,10 @@ import BrowserUpdateAlert from 'features/components/molecules/browser-update-ale
 import apiManager from 'common/websocket'
 import 'swiper/swiper-bundle.min.css'
 import 'features/styles/app.scss'
+import { useLangDirection } from 'components/hooks/use-lang-direction'
+import { LocaleContext } from 'components/localization'
+import useLangSwitcher from 'features/components/molecules/language-switcher/useLangSwitcher'
+import GatsbySharedLink from 'features/components/quill/shared-link'
 interface LayoutProps {
     is_ppc?: boolean
     is_ppc_redirect?: boolean
@@ -28,17 +35,46 @@ const Layout = ({
 }: LayoutProps) => {
     const { has_platform } = usePlatformQueryParam()
 
+    const lang_direction = useLangDirection()
+    const { locale } = React.useContext(LocaleContext)
+    const formatted_lang = locale.replace('_', '-')
+
+    React.useEffect(() => {
+        document.body.dir = lang_direction
+        document.documentElement.lang = formatted_lang
+    }, [lang_direction, formatted_lang])
+
+    //need to update the language data and type
+    //here using langauge data from `i18n-config.js`
+    const { onSwitchLanguage, currentLang } = useLangSwitcher()
+    const activeLang = langItemsROW[currentLang.path.replace('-', '')]
+
+    const onLanguageChange = useCallback(
+        (event) => {
+            onSwitchLanguage(`/${event.path}/`)
+        },
+        [onSwitchLanguage],
+    )
+
     //Handle page layout when redirection from mobile app.
     if (has_platform) {
         return <>{children}</>
     }
 
     return (
-        <PpcProvider is_ppc={is_ppc} is_ppc_redirect={is_ppc_redirect}>
-            <main className={main_wrapper}>{children}</main>
-            <BrowserUpdateAlert />
-            {!hide_layout_overlay && <LayoutOverlay />}
-        </PpcProvider>
+        <SharedLinkProvider DerivLink={GatsbySharedLink}>
+            <PpcProvider is_ppc={is_ppc} is_ppc_redirect={is_ppc_redirect}>
+                <LanguageProvider
+                    langItems={langItemsROW}
+                    onLangSelect={onLanguageChange}
+                    activeLanguage={activeLang}
+                >
+                    <main className={main_wrapper}>{children}</main>
+                    <BrowserUpdateAlert />
+                    {!hide_layout_overlay && <LayoutOverlay />}
+                </LanguageProvider>
+            </PpcProvider>
+        </SharedLinkProvider>
     )
 }
 
diff --git a/src/features/components/templates/navigation/affiliates-nav/index.tsx b/src/features/components/templates/navigation/affiliates-nav/index.tsx
index 178a3039e39..73eda7ef687 100644
--- a/src/features/components/templates/navigation/affiliates-nav/index.tsx
+++ b/src/features/components/templates/navigation/affiliates-nav/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
+import { partners_nav_logo } from './nav.module.scss'
 import Link from 'features/components/atoms/link'
 import Image from 'features/components/atoms/image'
 import NavTemplate from 'features/components/templates/navigation/template'
 import LanguageSwitcher from 'features/components/molecules/language-switcher'
-import { partners_nav_logo } from 'features/components/templates/navigation/payment-agent-nav/payment-agent-nav.module.scss'
 import PartnerNavLogo from 'images/svg/partner-nav-logo.svg'
 
 const AffiliateNav = () => {
diff --git a/src/features/components/templates/navigation/payment-agent-nav/payment-agent-nav.module.scss b/src/features/components/templates/navigation/affiliates-nav/nav.module.scss
similarity index 74%
rename from src/features/components/templates/navigation/payment-agent-nav/payment-agent-nav.module.scss
rename to src/features/components/templates/navigation/affiliates-nav/nav.module.scss
index 4e57b7afe32..50c03c72a18 100644
--- a/src/features/components/templates/navigation/payment-agent-nav/payment-agent-nav.module.scss
+++ b/src/features/components/templates/navigation/affiliates-nav/nav.module.scss
@@ -3,12 +3,9 @@
 .partners_nav_logo {
     inline-size: 12rem;
     block-size: 2rem;
+
     @include breakpoints(tablet) {
         inline-size: 19rem;
         block-size: 3.2rem;
     }
-}
-
-html:not([lang='en']) .partners_buttons {
-    max-inline-size: 17rem;
-}
+}
\ No newline at end of file
diff --git a/src/features/components/templates/navigation/career-nav/career-nav.module.scss b/src/features/components/templates/navigation/career-nav/career-nav.module.scss
deleted file mode 100644
index 113e22678ec..00000000000
--- a/src/features/components/templates/navigation/career-nav/career-nav.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use 'features/styles/theme/theme-mixins' as *;
-
-.careers_nav_logo {
-    inline-size: 10.5rem;
-    block-size: 1.6rem;
-
-    @include breakpoints(tablet) {
-        inline-size: 19rem;
-        block-size: 3.2rem;
-    }
-}
diff --git a/src/features/components/templates/navigation/career-nav/data.tsx b/src/features/components/templates/navigation/career-nav/data.tsx
index f4b3c6d204d..df2e09146d5 100644
--- a/src/features/components/templates/navigation/career-nav/data.tsx
+++ b/src/features/components/templates/navigation/career-nav/data.tsx
@@ -1,28 +1,20 @@
-import { NavItems } from '../types'
+import React from 'react'
+import { NavLinkItems } from '@deriv-com/providers'
+import { Localize } from 'components/localization'
 
-const career_nav_items: NavItems = [
-    {
+export const career_nav_items: NavLinkItems = {
+    home: {
         id: 0,
-        data: {
-            type: 'single-item',
-            title: '_t_Home_t_',
-            content: {
-                type: 'internal',
-                to: '/careers/',
-            },
-        },
+        type: 'direct',
+        href: '/careers',
+        text: <Localize translate_text="_t_Home_t_" />,
     },
-    {
+    trade: {
         id: 1,
-        data: {
-            type: 'single-item',
-            title: '_t_Locations_t_',
-            content: {
-                type: 'internal',
-                to: '/careers/locations/',
-            },
-        },
+        type: 'direct',
+        href: '/careers/locations',
+        text: <Localize translate_text="_t_Locations_t_" />,
     },
-]
+}
 
 export default career_nav_items
diff --git a/src/features/components/templates/navigation/career-nav/index.tsx b/src/features/components/templates/navigation/career-nav/index.tsx
index 1665cab0b1a..28bd6e4a528 100644
--- a/src/features/components/templates/navigation/career-nav/index.tsx
+++ b/src/features/components/templates/navigation/career-nav/index.tsx
@@ -1,48 +1,50 @@
 import React from 'react'
-import NavTemplate from '../template'
-import career_nav_items from './data'
-import { careers_nav_logo } from './career-nav.module.scss'
-import Image from 'features/components/atoms/image'
-import CareerNavLogo from 'images/svg/career-nav-icon.svg'
-import Button from 'features/components/atoms/button'
-import { Localize } from 'components/localization/localize'
-import LanguageSwitcher from 'features/components/molecules/language-switcher'
-import Link from 'features/components/atoms/link'
-import Flex from 'features/components/atoms/flex-box'
-import { localize } from 'components/localization'
+import { MobileNavToggle, NavigationBlock } from '@deriv-com/blocks'
+// eslint-disable-next-line import/no-unresolved
+import { SubBrandDerivCareersBrandLightIcon } from '@deriv/quill-icons/Logo'
+import { CustomLink } from '@deriv-com/components'
+import { Button } from '@deriv/quill-design'
+import TopNavigation from '../partners-nav/top-navigation'
+import { career_nav_items } from './data'
+import { Localize } from 'components/localization'
+
+const CareersButtons = () => {
+    return (
+        <div className="flex items-center gap-gap-md">
+            <Button
+                className="block lg:hidden"
+                variant="secondary"
+                colorStyle="black"
+                size="lg"
+                onClick={() => window.open('https://deriv.zohorecruit.eu/jobs/Careers', '_blank')}
+            >
+                <Localize translate_text="_t_Explore jobs_t_" />
+            </Button>
+            <Button
+                className="hidden lg:block"
+                size="lg"
+                onClick={() => window.open('https://deriv.zohorecruit.eu/jobs/Careers', '_blank')}
+            >
+                <Localize translate_text="_t_Explore jobs_t_" />
+            </Button>
+            <MobileNavToggle />
+        </div>
+    )
+}
 
 const CareerNav = () => {
     return (
-        <NavTemplate
+        <NavigationBlock
+            topNavigation={TopNavigation}
+            renderButtons={CareersButtons}
             renderLogo={() => (
-                <Link url={{ type: 'internal', to: '/' }} aria-label="deriv careers link">
-                    <Image
-                        src={CareerNavLogo}
-                        className={careers_nav_logo}
-                        alt={localize('_t_Deriv Careers_t_')}
-                    />
-                </Link>
+                <CustomLink href={'/careers'}>
+                    <SubBrandDerivCareersBrandLightIcon width={133} height={24} />
+                </CustomLink>
             )}
             items={career_nav_items}
-            has_centered_items
-        >
-            <Flex.Box
-                direction="row-reverse"
-                md={{ direction: 'row' }}
-                justify="center"
-                align="center"
-                gap="8x"
-            >
-                <Button.Primary
-                    id="dm-nav-explore-job-button"
-                    onClick={() =>
-                        window.open('https://deriv.zohorecruit.eu/jobs/Careers', '_blank')
-                    }
-                >
-                    <Localize translate_text="_t_Explore jobs_t_" />
-                </Button.Primary>
-            </Flex.Box>
-        </NavTemplate>
+            hasLanguageSwitch={false}
+        />
     )
 }
 
diff --git a/src/features/components/templates/navigation/main-nav/content/about/index.ts b/src/features/components/templates/navigation/main-nav/content/about/index.ts
deleted file mode 100644
index 15537f4485d..00000000000
--- a/src/features/components/templates/navigation/main-nav/content/about/index.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { SmartNavContent } from '../../../types'
-
-export const aboutUsNavSectionContent: SmartNavContent[] = [
-    {
-        id: 0,
-        data: {
-            title: '_t_Who we are_t_',
-            url: { type: 'internal', to: '/who-we-are/' },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            title: '_t_Regulatory information_t_',
-            url: { type: 'internal', to: '/regulatory/' },
-        },
-    },
-    {
-        id: 2,
-        data: {
-            title: '_t_Why choose us_t_',
-            url: { type: 'internal', to: '/why-choose-us/' },
-        },
-    },
-    {
-        id: 3,
-        data: {
-            title: '_t_Partnership programmes_t_',
-            url: { type: 'internal', to: '/partners/' },
-        },
-    },
-    {
-        id: 4,
-        data: {
-            title: '_t_Contact us_t_',
-            url: { type: 'internal', to: '/contact_us/' },
-        },
-    },
-    {
-        id: 5,
-        data: {
-            title: '_t_Careers_t_',
-            url: { type: 'internal', to: '/careers/' },
-        },
-    },
-    {
-        id: 6,
-        data: {
-            url: { type: 'company', url_name: 'derivlife', target: '_blank' },
-            title: '_t_Deriv life_t_',
-        },
-    },
-]
-
-export const aboutUsNavSectionContentMobile: SmartNavContent[] = [
-    {
-        id: 0,
-        data: {
-            title: '_t_Who we are_t_',
-            url: { type: 'internal', to: '/who-we-are/' },
-        },
-    },
-    {
-        id: 2,
-        data: {
-            title: '_t_Why choose us_t_',
-            url: { type: 'internal', to: '/why-choose-us/' },
-        },
-    },
-    {
-        id: 3,
-        data: {
-            title: '_t_Partnership programmes_t_',
-            url: { type: 'internal', to: '/partners/' },
-        },
-    },
-    {
-        id: 4,
-        data: {
-            title: '_t_Contact us_t_',
-            url: { type: 'internal', to: '/contact_us/' },
-        },
-    },
-    {
-        id: 5,
-        data: {
-            title: '_t_Careers_t_',
-            url: { type: 'internal', to: '/careers/' },
-        },
-    },
-    {
-        id: 6,
-        data: {
-            url: { type: 'company', url_name: 'derivlife', target: '_blank' },
-            title: '_t_Deriv life_t_',
-        },
-    },
-]
diff --git a/src/features/components/templates/navigation/main-nav/content/index.ts b/src/features/components/templates/navigation/main-nav/content/index.ts
deleted file mode 100644
index 1afd9659e02..00000000000
--- a/src/features/components/templates/navigation/main-nav/content/index.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { NavItems } from '../../types'
-import { aboutUsNavSectionContent, aboutUsNavSectionContentMobile } from './about'
-import { legalNavSectionContent } from './legal'
-import { marketSectionContent } from './market'
-import { partnerNavSectionContent } from './partner'
-import { trade_nav_section_items } from './platform'
-import { resourcesNavSectionContent } from './resources/data'
-
-export const mainItems: NavItems = [
-    {
-        id: 0,
-        data: {
-            title: '_t_Trade_t_',
-            type: 'multi-column',
-            content: trade_nav_section_items,
-        },
-    },
-    {
-        id: 1,
-        data: {
-            title: '_t_Markets_t_',
-            type: 'multi-column',
-            content: marketSectionContent,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            title: '_t_About us_t_',
-            type: 'single-column',
-            content: aboutUsNavSectionContent,
-        },
-        visibility: {
-            is_mobile: false,
-        },
-    },
-    {
-        id: 22,
-        data: {
-            title: '_t_About us_t_',
-            type: 'single-column',
-            content: aboutUsNavSectionContentMobile,
-        },
-        visibility: {
-            is_mobile: true,
-        },
-    },
-
-    {
-        id: 3,
-        data: {
-            title: '_t_Resources_t_',
-            type: 'single-column',
-            content: resourcesNavSectionContent,
-        },
-    },
-    {
-        id: 4,
-        data: {
-            title: '_t_Legal_t_',
-            type: 'single-column',
-            content: legalNavSectionContent,
-        },
-        visibility: {
-            is_mobile: true,
-        },
-    },
-    {
-        id: 5,
-        data: {
-            title: '_t_Partners_t_',
-            type: 'single-column',
-            content: partnerNavSectionContent,
-        },
-        visibility: {
-            is_mobile: true,
-        },
-    },
-]
diff --git a/src/features/components/templates/navigation/main-nav/content/legal/index.ts b/src/features/components/templates/navigation/main-nav/content/legal/index.ts
deleted file mode 100644
index f662c5088bf..00000000000
--- a/src/features/components/templates/navigation/main-nav/content/legal/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { SmartNavContent } from '../../../types'
-
-export const legalNavSectionContent: SmartNavContent[] = [
-    {
-        id: 0,
-        data: {
-            title: '_t_Regulatory information_t_',
-            url: { type: 'internal', to: '/regulatory/' },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            title: '_t_Terms and conditions_t_',
-            url: { type: 'internal', to: '/terms-and-conditions/#clients' },
-        },
-    },
-    {
-        id: 2,
-        data: {
-            title: '_t_Secure and responsible trading_t_',
-            url: { type: 'internal', to: '/responsible/' },
-        },
-    },
-]
diff --git a/src/features/components/templates/navigation/main-nav/content/market/index.ts b/src/features/components/templates/navigation/main-nav/content/market/index.ts
deleted file mode 100644
index fc10176bfd4..00000000000
--- a/src/features/components/templates/navigation/main-nav/content/market/index.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { SmartNavSectionColumns } from '../../../types'
-import Commodities from 'images/svg/custom/rebranding/commodities-icon.svg'
-import Cryptocurrencies from 'images/svg/custom/rebranding/cryptocurrencies-icon.svg'
-import DerivedFX from 'images/svg/custom/rebranding/derived-fx-icon.svg'
-import Forex from 'images/svg/custom/rebranding/forex-icon.svg'
-import ETF from 'images/svg/custom/rebranding/etf-icon.svg'
-import StockIndices from 'images/svg/custom/rebranding/stock-indices-icon.svg'
-
-export const marketSectionContent: SmartNavSectionColumns[] = [
-    {
-        id: 0,
-        data: {
-            section: [
-                {
-                    id: 0,
-                    data: {
-                        aria_label: 'Forex',
-                        icon: {
-                            src: Forex,
-                            alt: 'Forex',
-                        },
-                        content:
-                            '_t_Trade the world’s largest financial market with popular forex pairs._t_',
-                        title: '_t_Forex_t_',
-                        url: { type: 'internal', to: '/markets/forex/' },
-                    },
-                },
-                {
-                    id: 1,
-                    data: {
-                        aria_label: 'Derived indices',
-                        icon: {
-                            src: DerivedFX,
-                            alt: 'Synthetic indices',
-                        },
-                        content: ({ is_eu }) => {
-                            return is_eu
-                                ? '_t_Enjoy trading asset prices derived from simulated markets._t_'
-                                : '_t_Enjoy trading asset prices derived from real-world or simulated markets._t_'
-                        },
-                        title: '_t_Derived indices_t_',
-                        url: { type: 'internal', to: '/markets/synthetic/' },
-                    },
-                },
-                {
-                    id: 2,
-                    data: {
-                        aria_label: 'Stocks & indices',
-                        icon: {
-                            src: StockIndices,
-                            alt: 'Stocks & indices',
-                        },
-                        content:
-                            '_t_Predict broader market trends and diversify your risk with stocks & indices._t_',
-                        title: '_t_Stocks & indices_t_',
-                        url: { type: 'internal', to: '/markets/stock/' },
-                    },
-                },
-            ],
-            no_divider: true,
-            no_title: true,
-        },
-    },
-    {
-        id: 1,
-        data: {
-            section: [
-                {
-                    id: 3,
-                    data: {
-                        aria_label: 'Commodities',
-                        icon: {
-                            src: Commodities,
-                            alt: 'Commodities',
-                        },
-                        content:
-                            "_t_Trade natural resources that are central to the world's economy._t_",
-                        title: '_t_Commodities_t_',
-                        url: { type: 'internal', to: '/markets/commodities/' },
-                    },
-                },
-                {
-                    id: 4,
-                    data: {
-                        aria_label: 'Cryptocurrencies',
-                        icon: {
-                            src: Cryptocurrencies,
-                            alt: 'Cryptocurrencies',
-                        },
-                        content:
-                            '_t_Trade with leverage on the price movement of popular crypto-fiat pairs._t_',
-                        title: '_t_Cryptocurrencies_t_',
-                        url: { type: 'internal', to: '/markets/cryptocurrencies/' },
-                    },
-                },
-                {
-                    id: 3,
-                    data: {
-                        aria_label: 'Exchange-traded funds (ETFs)',
-                        icon: {
-                            src: ETF,
-                            alt: 'Exchange-traded funds (ETFs)',
-                        },
-                        content:
-                            '_t_Diversify your portfolio and enjoy low-cost intraday trading with ETFs._t_',
-                        title: '_t_Exchange-traded funds (ETFs)_t_',
-                        url: { type: 'internal', to: '/markets/exchange-traded-funds/' },
-                    },
-                },
-            ],
-            no_divider: true,
-            no_title: true,
-        },
-    },
-]
diff --git a/src/features/components/templates/navigation/main-nav/content/partner/index.ts b/src/features/components/templates/navigation/main-nav/content/partner/index.ts
deleted file mode 100644
index 82d568a130e..00000000000
--- a/src/features/components/templates/navigation/main-nav/content/partner/index.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { SmartNavContent } from '../../../types'
-
-export const partnerNavSectionContent: SmartNavContent[] = [
-    {
-        id: 0,
-        data: {
-            title: '_t_Deriv Prime_t_',
-            url: { type: 'internal', to: '/partners/deriv-prime/' },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            title: '_t_Affiliates and IBs_t_',
-            url: { type: 'internal', to: '/partners/affiliate-ib/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            title: '_t_Affiliates_t_',
-            url: { type: 'internal', to: '/partners/affiliate-ib/' },
-        },
-        visibility: {
-            is_eu: true,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            title: '_t_Payment agents_t_',
-            url: { type: 'internal', to: '/partners/payment-agent/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 4,
-        data: {
-            title: '_t_API_t_',
-            url: { type: 'company', url_name: 'api', target: '_blank' },
-        },
-    },
-]
diff --git a/src/features/components/templates/navigation/main-nav/content/platform/index.ts b/src/features/components/templates/navigation/main-nav/content/platform/index.ts
deleted file mode 100644
index 04e7a333b4a..00000000000
--- a/src/features/components/templates/navigation/main-nav/content/platform/index.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-import { SmartNavContent, SmartNavSectionColumns } from '../../../types'
-import DerivcTrader from 'images/svg/custom/rebranding/deriv-ctrader-icon.svg'
-import BinaryBot from 'images/svg/custom/rebranding/binarybot-icon.svg'
-import DerivX from 'images/svg/custom/rebranding/deriv-x-icon.svg'
-import CFD from 'images/svg/custom/rebranding/cfds-icon.svg'
-import Multipliers from 'images/svg/custom/rebranding/multipliers-icon.svg'
-import Options from 'images/svg/custom/rebranding/options-icon.svg'
-import Smarttrader from 'images/svg/custom/rebranding/smarttrader-icon.svg'
-import DerivGo from 'images/svg/custom/rebranding/deriv-go-icon.svg'
-import DMT5 from 'images/svg/custom/rebranding/dmt5-icon.svg'
-import DTrader from 'images/svg/custom/rebranding/dtrader-icon.svg'
-import DerivBot from 'images/svg/custom/rebranding/deriv-bot-icon.svg'
-
-export const tradeTypesContent: SmartNavContent[] = [
-    {
-        id: 0,
-        data: {
-            aria_label: 'Deriv Trader',
-            icon: {
-                src: DTrader,
-                alt: 'Dtrader trading platform',
-            },
-            content: '_t_A whole new trading experience on a powerful yet easy to use platform._t_',
-            title: '_t_Deriv Trader_t_',
-            url: { type: 'internal', to: '/dtrader/' },
-        },
-        visibility: {
-            is_eu: true,
-            is_ppc: false,
-            is_row: true,
-        },
-    },
-    {
-        id: 1,
-        data: {
-            aria_label: 'CFDs',
-            icon: {
-                src: CFD,
-                alt: 'CFDs trade type',
-            },
-            content:
-                '_t_Trade with leverage and tight spreads for better returns on successful trades._t_',
-            title: '_t_CFDs_t_',
-            url: { type: 'internal', to: '/trade-types/cfds/' },
-        },
-        visibility: {
-            is_ppc: false,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            aria_label: 'Options',
-            icon: {
-                src: Options,
-                alt: 'Options trade type',
-            },
-            content: '_t_Earn a range of payouts without risking more than your initial stake._t_',
-            title: '_t_Options_t_',
-            url: { type: 'internal', to: '/trade-types/options/digital-options/up-and-down/' },
-        },
-        visibility: {
-            is_ppc: false,
-            is_row: true,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            aria_label: 'Multipliers',
-            icon: {
-                src: Multipliers,
-                alt: 'Multipliers trade type',
-            },
-            content:
-                '_t_Get the upside of CFDs without the downside of losing more than your stake._t_',
-            title: '_t_Multipliers_t_',
-            url: { type: 'internal', to: '/trade-types/multiplier/' },
-        },
-        visibility: {
-            is_ppc: false,
-        },
-    },
-]
-
-export const tradingPlatformsContent: SmartNavContent[] = [
-    {
-        id: 0,
-        data: {
-            aria_label: 'Deriv MT5',
-            icon: {
-                src: DMT5,
-                alt: 'Deriv MT5 trading platform',
-            },
-            content: '_t_Trade on Deriv MT5, the all-in-one CFD trading platform._t_',
-            title: '_t_Deriv MT5_t_',
-            url: ({ is_ppc_redirect }) => ({
-                type: 'internal',
-                to: is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/',
-            }),
-        },
-        visibility: {},
-    },
-    {
-        id: 1,
-        data: {
-            aria_label: 'Derivx',
-            icon: {
-                src: DerivX,
-                alt: 'Deriv X trading paltform',
-            },
-            content: '_t_A highly customisable and easy-to-use CFD trading platform._t_',
-            title: '_t_Deriv X_t_',
-            url: { type: 'internal', to: '/derivx/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            aria_label: 'SmartTrader',
-            icon: {
-                src: Smarttrader,
-                alt: 'SmartTrader trading platform',
-            },
-            content: '_t_Trade the world’s markets with our popular user-friendly platform._t_',
-            title: '_t_SmartTrader_t_',
-            url: { type: 'company', url_name: 'smart_trader', target: '_blank' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            aria_label: 'Deriv Trader',
-            icon: {
-                src: DTrader,
-                alt: 'Deriv trader trading platform',
-            },
-            content: '_t_A whole new trading experience on a powerful yet easy to use platform._t_',
-            title: '_t_Deriv Trader_t_',
-            url: { type: 'internal', to: '/dtrader/' },
-        },
-        visibility: {
-            is_eu: true,
-        },
-    },
-    {
-        id: 4,
-        data: {
-            aria_label: 'Deriv cTrader',
-            icon: {
-                src: DerivcTrader,
-                alt: 'Deriv cTrader trading platform',
-            },
-            content:
-                '_t_An intuitive, multi-asset CFD trading platform with copy trading and custom indicators._t_',
-            title: '_t_Deriv cTrader_t_',
-            url: { type: 'internal', to: '/deriv-ctrader/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-]
-
-export const noTitleSection: SmartNavContent[] = [
-    {
-        id: 0,
-        data: {
-            aria_label: 'Dtrader',
-            icon: {
-                src: DTrader,
-                alt: 'Dtrader trading platform',
-            },
-            content: '_t_A whole new trading experience on a powerful yet easy to use platform._t_',
-            title: '_t_Deriv Trader_t_',
-            url: { type: 'internal', to: '/dtrader/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 1,
-        data: {
-            aria_label: 'Deriv GO',
-            icon: {
-                src: DerivGo,
-                alt: 'Deriv GO mobile trading app',
-            },
-            content:
-                '_t_Trade multipliers on forex, cryptocurrencies, and synthetic indices with our mobile app._t_',
-            title: '_t_Deriv GO_t_',
-
-            url: { type: 'internal', to: '/deriv-go/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            aria_label: 'Deriv Bot',
-            icon: {
-                src: DerivBot,
-                alt: 'Deriv Bot Automated trading',
-            },
-            content: '_t_Automated trading at your fingertips. No coding needed._t_',
-            title: '_t_Deriv Bot_t_',
-
-            url: { type: 'internal', to: '/dbot/' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            aria_label: 'Binary Bot',
-            icon: {
-                src: BinaryBot,
-                alt: 'Binary bot for creating trading bot',
-            },
-            content:
-                '_t_Our classic "drag-and-drop" tool for creating trading bots, featuring pop-up trading charts, for advanced users._t_',
-            title: '_t_Binary Bot_t_',
-            url: { type: 'company', url_name: 'binary_bot', target: '_blank' },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-]
-
-export const trade_nav_section_items: SmartNavSectionColumns[] = [
-    {
-        id: 0,
-        data: {
-            title: '_t_Trade types_t_',
-            section: tradeTypesContent,
-        },
-    },
-    {
-        id: 1,
-        data: {
-            title: '_t_Trading platforms_t_',
-            section: tradingPlatformsContent,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            section: noTitleSection,
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-]
diff --git a/src/features/components/templates/navigation/main-nav/content/resources/data.ts b/src/features/components/templates/navigation/main-nav/content/resources/data.ts
deleted file mode 100644
index b95809d063b..00000000000
--- a/src/features/components/templates/navigation/main-nav/content/resources/data.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { SmartNavContent } from '../../../types'
-
-export const resourcesNavSectionContent: SmartNavContent[] = [
-    {
-        id: 0,
-        data: {
-            title: '_t_Help centre_t_',
-            url: { type: 'internal', to: '/help-centre/' },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            title: '_t_Community_t_',
-            url: { type: 'company', url_name: 'community', target: '_blank' },
-        },
-    },
-    {
-        id: 2,
-        data: {
-            title: '_t_Traders’ tools_t_',
-            url: { type: 'internal', to: '/trader-tools/' },
-        },
-    },
-    {
-        id: 3,
-        data: {
-            title: '_t_Payment methods_t_',
-            url: { type: 'internal', to: '/payment-methods/' },
-        },
-    },
-    {
-        id: 4,
-        data: {
-            title: '_t_Deriv MT5 Signals_t_',
-            url: { type: 'internal', to: '/dmt5-trading-signals/#signal-subscriber/' },
-        },
-    },
-    {
-        id: 5,
-        data: {
-            title: '_t_Status page_t_',
-            url: { type: 'non-company', href: 'https://deriv.statuspage.io', show_eu_modal: true },
-        },
-        visibility: {
-            is_mobile: true,
-        },
-    },
-    {
-        id: 6,
-        data: {
-            title: '_t_Deriv Blog_t_',
-            url: { type: 'company', url_name: 'blog', target: '_blank' },
-        },
-    },
-]
diff --git a/src/features/components/templates/navigation/main-nav/data.tsx b/src/features/components/templates/navigation/main-nav/data.tsx
new file mode 100644
index 00000000000..0fb0ee3727c
--- /dev/null
+++ b/src/features/components/templates/navigation/main-nav/data.tsx
@@ -0,0 +1,821 @@
+import React from 'react'
+import { NavLinkItems } from '@deriv-com/providers'
+import {
+    IllustrativeCfdsIcon,
+    IllustrativeDerivedIcon,
+    IllustrativeMultipliersIcon,
+    IllustrativeOptionsIcon,
+    IllustrativeForexIcon,
+    IllustrativeStocksAndIndicesIcon,
+    IllustrativeCommoditiesIcon,
+    IllustrativeCryptocurrenciesIcon,
+    IllustrativeEtfIcon,
+    // eslint-disable-next-line import/no-unresolved
+} from '@deriv/quill-icons/Illustrative'
+import {
+    DerivProductDerivBotBrandDarkLogoHorizontalIcon,
+    DerivProductDerivGoBrandDarkLogoHorizontalIcon,
+    DerivProductDerivTraderBrandDarkLogoHorizontalIcon,
+    DerivProductDerivXBrandDarkLogoIcon,
+    PartnersProductDerivCtraderBrandDarkLogoHorizontalIcon,
+    PartnersProductDerivMt5BrandDarkLogoHorizontalIcon,
+    PartnersProductSmarttraderBrandDarkLogoIcon,
+    PartnersProductBinaryBotBrandDarkLogoHorizontalIcon,
+    // eslint-disable-next-line import/no-unresolved
+} from '@deriv/quill-icons/Logo'
+import { Localize } from 'components/localization'
+
+export const mainRowNavItems: NavLinkItems = {
+    trade: {
+        id: 0,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_Trade_t_" />,
+        columns: [
+            {
+                id: 0,
+                header: {
+                    text: <Localize translate_text="_t_Trade types_t_" />,
+                    type: 'text',
+                },
+                items: [
+                    {
+                        id: 0,
+                        href: '/trade-types/cfds',
+                        text: <Localize translate_text="_t_CFDs_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeCfdsIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Trade with leverage, unbeatable spreads, and fast execution on the widest range  of markets._t_" />
+                        ),
+                    },
+                    {
+                        id: 1,
+                        href: '/trade-types/options',
+                        text: <Localize translate_text="_t_Options_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeOptionsIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Trade diverse vanilla and exotic options across platforms and markets without risking more than your initial stake._t_" />
+                        ),
+                    },
+                    {
+                        id: 2,
+                        href: '/trade-types/multiplier',
+                        text: <Localize translate_text="_t_Multipliers_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeMultipliersIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Trade on global financial markets and multiply your potential profit without losing more than your stake._t_" />
+                        ),
+                    },
+                ],
+            },
+            {
+                id: 1,
+                header: {
+                    text: <Localize translate_text="_t_Trading platforms_t_" />,
+                    type: 'text',
+                },
+                items: [
+                    {
+                        id: 0,
+                        href: '/dmt5',
+                        text: <Localize translate_text="_t_Deriv MT5_t_" />,
+                        type: 'direct',
+                        icon: (
+                            <PartnersProductDerivMt5BrandDarkLogoHorizontalIcon
+                                width={24}
+                                height={24}
+                            />
+                        ),
+                        description: (
+                            <Localize translate_text="_t_The most popular and comprehensive CFDs platform._t_" />
+                        ),
+                    },
+                    {
+                        id: 1,
+                        href: '/derivx',
+                        text: <Localize translate_text="_t_Deriv X_t_" />,
+                        type: 'direct',
+                        icon: <DerivProductDerivXBrandDarkLogoIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_User-friendly and customisable CFDs platform._t_" />
+                        ),
+                    },
+                    {
+                        id: 2,
+                        href: '/deriv-ctrader',
+                        text: <Localize translate_text="_t_Deriv cTrader_t_" />,
+                        type: 'direct',
+                        icon: (
+                            <PartnersProductDerivCtraderBrandDarkLogoHorizontalIcon
+                                width={24}
+                                height={24}
+                            />
+                        ),
+                        description: (
+                            <Localize translate_text="_t_Fast CFDs platform with inbuilt copy trading._t_" />
+                        ),
+                    },
+                    {
+                        id: 3,
+                        href: 'https://smarttrader.deriv.com/', //need to update target/type in link component
+                        text: <Localize translate_text="_t_SmartTrader_t_" />,
+                        type: 'direct',
+                        icon: (
+                            <PartnersProductSmarttraderBrandDarkLogoIcon width={24} height={24} />
+                        ),
+                        description: (
+                            <Localize translate_text="_t_Options trading platform with easy navigation._t_" />
+                        ),
+                        target: '_blank',
+                    },
+                ],
+            },
+            {
+                id: 2,
+                header: {
+                    text: null,
+                    type: 'text',
+                },
+                items: [
+                    {
+                        id: 0,
+                        href: '/dtrader',
+                        text: <Localize translate_text="_t_Deriv Trader_t_" />,
+                        type: 'direct',
+                        icon: (
+                            <DerivProductDerivTraderBrandDarkLogoHorizontalIcon
+                                width={24}
+                                height={24}
+                            />
+                        ),
+                        description: (
+                            <Localize translate_text="_t_Flagship options, accumulators, & multipliers trading platform._t_" />
+                        ),
+                    },
+                    {
+                        id: 1,
+                        href: '/deriv-go',
+                        text: <Localize translate_text="_t_Deriv GO_t_" />,
+                        type: 'direct',
+                        icon: (
+                            <DerivProductDerivGoBrandDarkLogoHorizontalIcon
+                                width={24}
+                                height={24}
+                            />
+                        ),
+                        description: (
+                            <Localize translate_text="_t_Mobile app for multipliers trading on the go._t_" />
+                        ),
+                    },
+                    {
+                        id: 2,
+                        href: '/dbot',
+                        text: <Localize translate_text="_t_Deriv Bot_t_" />,
+                        type: 'direct',
+                        icon: (
+                            <DerivProductDerivBotBrandDarkLogoHorizontalIcon
+                                width={24}
+                                height={24}
+                            />
+                        ),
+                        description: (
+                            <Localize translate_text="_t_Automated trading. No coding required._t_" />
+                        ),
+                    },
+                    {
+                        id: 3,
+                        href: 'https://bot.deriv.com/', //need to update target/type in link component
+                        text: <Localize translate_text="_t_Binary Bot_t_" />,
+                        type: 'direct',
+                        icon: (
+                            <PartnersProductBinaryBotBrandDarkLogoHorizontalIcon
+                                width={24}
+                                height={24}
+                            />
+                        ),
+                        description: (
+                            <Localize translate_text="_t_Options trading platform with easy navigation._t_" />
+                        ),
+                        target: '_blank',
+                    },
+                ],
+            },
+        ],
+    },
+    markets: {
+        id: 1,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_Markets_t_" />,
+        columns: [
+            {
+                id: 0,
+                items: [
+                    {
+                        id: 0,
+                        href: '/markets/forex',
+                        text: <Localize translate_text="_t_Forex_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeForexIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Major, minor, and exotic  currency pairs._t_" />
+                        ),
+                    },
+                    {
+                        id: 1,
+                        href: '/markets/synthetic',
+                        text: <Localize translate_text="_t_Derived indices_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeDerivedIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Indices simulating real-world markets with 24/7 trading._t_" />
+                        ),
+                    },
+                    {
+                        id: 2,
+                        href: '/markets/stock',
+                        text: <Localize translate_text="_t_Stocks & indices_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeStocksAndIndicesIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Leading company stocks and top global indices._t_" />
+                        ),
+                    },
+                ],
+            },
+            {
+                id: 1,
+                items: [
+                    {
+                        id: 0,
+                        href: '/markets/commodities',
+                        text: <Localize translate_text="_t_Commodities_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeCommoditiesIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_World markets including precious metals and energies._t_" />
+                        ),
+                    },
+                    {
+                        id: 1,
+                        href: '/markets/cryptocurrencies',
+                        text: <Localize translate_text="_t_Cryptocurrencies_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeCryptocurrenciesIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_The world’s most popular digital currencies._t_" />
+                        ),
+                    },
+                    {
+                        id: 2,
+                        href: '/markets/exchange-traded-funds',
+                        text: <Localize translate_text="_t_Exchange-traded funds (ETFs)_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeEtfIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Diverse exchange-traded funds for broad market exposure._t_" />
+                        ),
+                    },
+                ],
+            },
+        ],
+    },
+    'about-us': {
+        id: 2,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_About us_t_" />,
+        columns: [
+            {
+                id: 0,
+                items: [
+                    {
+                        id: 0,
+                        href: '/who-we-are',
+                        text: <Localize translate_text="_t_Who we are_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: '/regulatory',
+                        text: <Localize translate_text="_t_Regulatory information_t_" />,
+                        type: 'direct',
+                        isDesktopNavOnly: true,
+                    },
+                    {
+                        id: 2,
+                        href: '/why-choose-us',
+                        text: <Localize translate_text="_t_Why choose us_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 3,
+                        href: '/partners',
+                        text: <Localize translate_text="_t_Partnership programmes_t_" />,
+                        type: 'direct',
+                    },
+                ],
+            },
+            {
+                id: 1,
+                items: [
+                    {
+                        id: 0,
+                        href: '/contact_us',
+                        text: <Localize translate_text="_t_Contact us_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: '/careers',
+                        text: <Localize translate_text="_t_Careers_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 2,
+                        href: 'https://derivlife.com', //need to update target/type in link component
+                        text: <Localize translate_text="_t_Deriv Life_t_" />,
+                        type: 'direct',
+                        external: true,
+                        target: '_blank',
+                    },
+                ],
+            },
+        ],
+    },
+    resources: {
+        id: 3,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_Resources_t_" />,
+        columns: [
+            {
+                id: 0,
+                items: [
+                    {
+                        id: 0,
+                        href: '/help-centre',
+                        text: <Localize translate_text="_t_Help centre_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: 'https://community.deriv.com/', //need to update target/type in link component
+                        text: <Localize translate_text="_t_Community_t_" />,
+                        type: 'direct',
+                        external: true,
+                        target: '_blank',
+                    },
+                    {
+                        id: 2,
+                        href: '/trader-tools',
+                        text: <Localize translate_text="_t_Traders' tools_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 3,
+                        href: '/payment-methods',
+                        text: <Localize translate_text="_t_Payment methods_t_" />,
+                        type: 'direct',
+                    },
+                ],
+            },
+            {
+                id: 1,
+                items: [
+                    {
+                        id: 0,
+                        href: '/dmt5-trading-signals',
+                        text: <Localize translate_text="_t_Deriv MT5 signals_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: 'https://deriv.statuspage.io/', //need to update target/type in link component
+                        text: <Localize translate_text="_t_Status page_t_" />,
+                        type: 'direct',
+                        isMobileNavOnly: true,
+                    },
+                    {
+                        id: 2,
+                        href: 'https://blog.deriv.com/', //need to update target/type in link component
+                        text: <Localize translate_text="_t_Deriv Blog_t_" />,
+                        type: 'direct',
+                        external: true,
+                        target: '_blank',
+                    },
+                ],
+            },
+        ],
+    },
+    legal: {
+        id: 4,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_Legal_t_" />,
+        isMobileNavOnly: true,
+        columns: [
+            {
+                id: 0,
+                items: [
+                    {
+                        id: 0,
+                        href: '/regulatory',
+                        text: <Localize translate_text="_t_Regulatory information_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: '/terms-and-conditions',
+                        text: <Localize translate_text="_t_Terms & conditions_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 2,
+                        href: '/responsible',
+                        text: <Localize translate_text="_t_Secure & responsible trading_t_" />,
+                        type: 'direct',
+                    },
+                ],
+            },
+        ],
+    },
+    partners: {
+        id: 5,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_Partners_t_" />,
+        isMobileNavOnly: true,
+        columns: [
+            {
+                id: 0,
+                items: [
+                    {
+                        id: 0,
+                        href: '/partners/deriv-prime',
+                        text: <Localize translate_text="_t_Deriv Prime_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: '/partners/affiliate-ib',
+                        text: <Localize translate_text="_t_Affiliates and IBs_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 2,
+                        href: '/partners/payment-agent',
+                        text: <Localize translate_text="_t_Payment agents_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 3,
+                        href: 'https://api.deriv.com/', //need to update target/type in link component
+                        text: <Localize translate_text="_t_API_t_" />,
+                        type: 'direct',
+                    },
+                ],
+            },
+        ],
+    },
+}
+
+export const mainEuNavItems: NavLinkItems = {
+    trade: {
+        id: 0,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_Trade_t_" />,
+        columns: [
+            {
+                id: 0,
+                header: {
+                    text: <Localize translate_text="_t_Trade types_t_" />,
+                    type: 'text',
+                },
+                items: [
+                    {
+                        id: 0,
+                        href: '/trade-types/cfds',
+                        text: <Localize translate_text="_t_CFDs_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeCfdsIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Trade with leverage, unbeatable spreads, and fast execution on the widest range  of markets._t_" />
+                        ),
+                    },
+                    {
+                        id: 2,
+                        href: '/trade-types/multiplier',
+                        text: <Localize translate_text="_t_Multipliers_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeMultipliersIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Trade on global financial markets and multiply your potential profit without losing more than your stake._t_" />
+                        ),
+                    },
+                ],
+            },
+            {
+                id: 1,
+                header: {
+                    text: <Localize translate_text="_t_Trading platforms_t_" />,
+                    type: 'text',
+                },
+                items: [
+                    {
+                        id: 0,
+                        href: '/dmt5',
+                        text: <Localize translate_text="_t_Deriv MT5_t_" />,
+                        type: 'direct',
+                        icon: (
+                            <PartnersProductDerivMt5BrandDarkLogoHorizontalIcon
+                                width={24}
+                                height={24}
+                            />
+                        ),
+                        description: (
+                            <Localize translate_text="_t_The most popular and comprehensive CFDs platform._t_" />
+                        ),
+                    },
+                    {
+                        id: 1,
+                        href: '/dtrader',
+                        text: <Localize translate_text="_t_Deriv Trader_t_" />,
+                        type: 'direct',
+                        icon: (
+                            <DerivProductDerivTraderBrandDarkLogoHorizontalIcon
+                                width={24}
+                                height={24}
+                            />
+                        ),
+                        description: (
+                            <Localize translate_text="_t_Flagship options, accumulators, & multipliers trading platform._t_" />
+                        ),
+                    },
+                ],
+            },
+        ],
+    },
+    markets: {
+        id: 1,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_Markets_t_" />,
+        columns: [
+            {
+                id: 0,
+                items: [
+                    {
+                        id: 0,
+                        href: '/markets/forex',
+                        text: <Localize translate_text="_t_Forex_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeForexIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Major, minor, and exotic  currency pairs._t_" />
+                        ),
+                    },
+                    {
+                        id: 1,
+                        href: '/markets/synthetic',
+                        text: <Localize translate_text="_t_Derived indices_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeDerivedIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Indices simulating real-world markets with 24/7 trading._t_" />
+                        ),
+                    },
+                    {
+                        id: 2,
+                        href: '/markets/stock',
+                        text: <Localize translate_text="_t_Stocks & indices_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeStocksAndIndicesIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Leading company stocks and top global indices._t_" />
+                        ),
+                    },
+                ],
+            },
+            {
+                id: 1,
+                items: [
+                    {
+                        id: 0,
+                        href: '/markets/commodities',
+                        text: <Localize translate_text="_t_Commodities_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeCommoditiesIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_World markets including precious metals and energies._t_" />
+                        ),
+                    },
+                    {
+                        id: 1,
+                        href: '/markets/cryptocurrencies',
+                        text: <Localize translate_text="_t_Cryptocurrencies_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeCryptocurrenciesIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_The world’s most popular digital currencies._t_" />
+                        ),
+                    },
+                    {
+                        id: 2,
+                        href: '/markets/exchange-traded-funds',
+                        text: <Localize translate_text="_t_Exchange-traded funds (ETFs)_t_" />,
+                        type: 'direct',
+                        icon: <IllustrativeEtfIcon width={24} height={24} />,
+                        description: (
+                            <Localize translate_text="_t_Diverse exchange-traded funds for broad market exposure._t_" />
+                        ),
+                    },
+                ],
+            },
+        ],
+    },
+    'about-us': {
+        id: 2,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_About us_t_" />,
+        columns: [
+            {
+                id: 0,
+                items: [
+                    {
+                        id: 0,
+                        href: '/who-we-are',
+                        text: <Localize translate_text="_t_Who we are_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: '/regulatory',
+                        text: <Localize translate_text="_t_Regulatory information_t_" />,
+                        type: 'direct',
+                        isDesktopNavOnly: true,
+                    },
+                    {
+                        id: 2,
+                        href: '/why-choose-us',
+                        text: <Localize translate_text="_t_Why choose us_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 3,
+                        href: '/partners',
+                        text: <Localize translate_text="_t_Partnership programmes_t_" />,
+                        type: 'direct',
+                    },
+                ],
+            },
+            {
+                id: 1,
+                items: [
+                    {
+                        id: 0,
+                        href: '/contact_us',
+                        text: <Localize translate_text="_t_Contact us_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: '/careers',
+                        text: <Localize translate_text="_t_Careers_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 2,
+                        href: 'https://derivlife.com', //need to update target/type in link component
+                        text: <Localize translate_text="_t_Deriv Life_t_" />,
+                        type: 'direct',
+                        external: true,
+                        target: '_blank',
+                    },
+                ],
+            },
+        ],
+    },
+    resources: {
+        id: 3,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_Resources_t_" />,
+        columns: [
+            {
+                id: 0,
+                items: [
+                    {
+                        id: 0,
+                        href: '/help-centre',
+                        text: <Localize translate_text="_t_Help centre_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: 'https://community.deriv.com/', //need to update target/type in link component
+                        text: <Localize translate_text="_t_Community_t_" />,
+                        type: 'direct',
+                        external: true,
+                        target: '_blank',
+                    },
+                    {
+                        id: 2,
+                        href: '/trader-tools',
+                        text: <Localize translate_text="_t_Traders' tools_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 3,
+                        href: '/payment-methods',
+                        text: <Localize translate_text="_t_Payment methods_t_" />,
+                        type: 'direct',
+                    },
+                ],
+            },
+            {
+                id: 1,
+                items: [
+                    {
+                        id: 0,
+                        href: '/dmt5-trading-signals',
+                        text: <Localize translate_text="_t_Deriv MT5 signals_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: 'https://deriv.statuspage.io/', //need to update target/type in link component
+                        text: <Localize translate_text="_t_Status page_t_" />,
+                        type: 'direct',
+                        isMobileNavOnly: true,
+                    },
+                    {
+                        id: 2,
+                        href: 'https://blog.deriv.com/', //need to update target/type in link component
+                        text: <Localize translate_text="_t_Deriv Blog_t_" />,
+                        type: 'direct',
+                        external: true,
+                        target: '_blank',
+                    },
+                ],
+            },
+        ],
+    },
+    legal: {
+        id: 4,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_Legal_t_" />,
+        isMobileNavOnly: true,
+        columns: [
+            {
+                id: 0,
+                items: [
+                    {
+                        id: 0,
+                        href: '/regulatory',
+                        text: <Localize translate_text="_t_Regulatory information_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: '/terms-and-conditions',
+                        text: <Localize translate_text="_t_Terms & conditions_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 2,
+                        href: '/responsible',
+                        text: <Localize translate_text="_t_Secure & responsible trading_t_" />,
+                        type: 'direct',
+                    },
+                ],
+            },
+        ],
+    },
+    partners: {
+        id: 5,
+        type: 'nav-dropdown',
+        text: <Localize translate_text="_t_Partners_t_" />,
+        isMobileNavOnly: true,
+        columns: [
+            {
+                id: 0,
+                items: [
+                    {
+                        id: 0,
+                        href: '/partners/deriv-prime',
+                        text: <Localize translate_text="_t_Deriv Prime_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 1,
+                        href: '/partners/affiliate-ib',
+                        text: <Localize translate_text="_t_Affiliates_t_" />,
+                        type: 'direct',
+                    },
+                    {
+                        id: 3,
+                        href: 'https://api.deriv.com/', //need to update target/type in link component
+                        text: <Localize translate_text="_t_API_t_" />,
+                        type: 'direct',
+                    },
+                ],
+            },
+        ],
+    },
+}
diff --git a/src/features/components/templates/navigation/main-nav/index.tsx b/src/features/components/templates/navigation/main-nav/index.tsx
index 607aef50b47..b3a8a607c16 100644
--- a/src/features/components/templates/navigation/main-nav/index.tsx
+++ b/src/features/components/templates/navigation/main-nav/index.tsx
@@ -1,25 +1,19 @@
 import React from 'react'
-import NavTemplate from '../template'
-import MainNavButtons from './main-nav-buttons'
-import { main_nav_logo } from './main-nav.module.scss'
-import { mainItems } from './content'
-import Image from 'features/components/atoms/image'
-import LogoImage from 'images/common/rebranding_logo.svg'
-import Link from 'features/components/atoms/link'
+import { NavigationBlock } from '@deriv-com/blocks'
+import MainNavigationButtons from './nav.buttons'
+import MainNavigationLogo from './nav.logo'
+import { mainEuNavItems, mainRowNavItems } from './data'
+import useRegion from 'components/hooks/use-region'
 
-const MainNav = () => {
+const MainRowNavigation = () => {
+    const { is_eu } = useRegion()
     return (
-        <NavTemplate
-            renderLogo={() => (
-                <Link url={{ type: 'internal', to: '/' }} aria-label="deriv logo link">
-                    <Image src={LogoImage} alt="deriv-logo" className={main_nav_logo} />
-                </Link>
-            )}
-            items={mainItems}
-        >
-            <MainNavButtons />
-        </NavTemplate>
+        <NavigationBlock
+            renderButtons={MainNavigationButtons}
+            renderLogo={MainNavigationLogo}
+            items={is_eu ? mainEuNavItems : mainRowNavItems}
+        />
     )
 }
 
-export default MainNav
+export default MainRowNavigation
diff --git a/src/features/components/templates/navigation/main-nav/main-nav-buttons/index.tsx b/src/features/components/templates/navigation/main-nav/main-nav-buttons/index.tsx
deleted file mode 100644
index 325998fb7fd..00000000000
--- a/src/features/components/templates/navigation/main-nav/main-nav-buttons/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import useAuthCheck from 'components/hooks/use-auth-check'
-import { Localize } from 'components/localization'
-import Button from 'features/components/atoms/button'
-import useHandleLogin from 'components/hooks/use-handle-login'
-import useHandleSignup from 'components/hooks/use-handle-signup'
-import usePpc from 'features/hooks/use-ppc'
-import LanguageSwitcher from 'features/components/molecules/language-switcher'
-import Flex from 'features/components/atoms/flex-box'
-import { handleRedirectToTradersHub } from 'components/custom/utils'
-
-const MainNavButtons = () => {
-    const [is_logged_in] = useAuthCheck()
-    const { is_ppc_redirect } = usePpc()
-
-    const handleLogin = useHandleLogin()
-    const handleSignup = useHandleSignup(is_ppc_redirect)
-
-    return (
-        <Flex.Box
-            direction="row-reverse"
-            md={{ direction: 'row' }}
-            justify="center"
-            align="center"
-            gap="8x"
-        >
-            {is_logged_in ? (
-                <Button.Primary onClick={handleRedirectToTradersHub} outlined>
-                    <Localize translate_text="_t_Get trading_t_" />
-                </Button.Primary>
-            ) : (
-                <>
-                    <Button.Primary id="dm-nav-login-button" onClick={handleLogin} outlined>
-                        <Localize translate_text="_t_Log in_t_" />
-                    </Button.Primary>
-                    <Button.Primary
-                        visible="larger-than-tablet"
-                        id="dm-nav-signup"
-                        onClick={handleSignup}
-                    >
-                        <Localize translate_text="_t_Create free demo account_t_" />
-                    </Button.Primary>
-                </>
-            )}
-            <LanguageSwitcher />
-        </Flex.Box>
-    )
-}
-
-export default MainNavButtons
diff --git a/src/features/components/templates/navigation/main-nav/main-nav.module.scss b/src/features/components/templates/navigation/main-nav/main-nav.module.scss
deleted file mode 100644
index 56061fe826d..00000000000
--- a/src/features/components/templates/navigation/main-nav/main-nav.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use 'features/styles/theme/theme-mixins' as *;
-
-.main_nav_logo {
-    inline-size: 7rem;
-    block-size: 2.4rem;
-
-    @include breakpoints(tablet) {
-        inline-size: 9.6rem;
-        block-size: 3.6rem;
-    }
-}
diff --git a/src/features/components/templates/navigation/main-nav/nav.buttons.tsx b/src/features/components/templates/navigation/main-nav/nav.buttons.tsx
new file mode 100644
index 00000000000..eb74b6d7115
--- /dev/null
+++ b/src/features/components/templates/navigation/main-nav/nav.buttons.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { MobileNavToggle } from '@deriv-com/blocks'
+import { Button } from '@deriv/quill-design'
+// eslint-disable-next-line import/no-unresolved
+import { LabelPairedGrid2BoldIcon } from '@deriv/quill-icons/LabelPaired'
+import { Localize } from 'components/localization'
+import { handleRedirectToTradersHub } from 'components/custom/utils'
+import useAuthCheck from 'components/hooks/use-auth-check'
+import useHandleLogin from 'components/hooks/use-handle-login'
+import useHandleSignup from 'components/hooks/use-handle-signup'
+import usePpc from 'features/hooks/use-ppc'
+
+export const MainNavigationButtons = () => {
+    const [is_logged_in] = useAuthCheck()
+    const { is_ppc_redirect } = usePpc()
+
+    const handleLogin = useHandleLogin()
+    const handleSignup = useHandleSignup(is_ppc_redirect)
+
+    return (
+        <div className="flex items-center gap-gap-md">
+            {is_logged_in ? (
+                <Button
+                    variant="secondary"
+                    colorStyle="black"
+                    size="lg"
+                    onClick={handleRedirectToTradersHub}
+                    icon={LabelPairedGrid2BoldIcon}
+                    iconPosition="start"
+                >
+                    <Localize translate_text="_t_Traders Hub_t_" />
+                </Button>
+            ) : (
+                <>
+                    <Button variant="secondary" colorStyle="black" size="lg" onClick={handleLogin}>
+                        <Localize translate_text="_t_Log in_t_" />
+                    </Button>
+                    <Button size="lg" className="hidden lg:block" onClick={handleSignup}>
+                        <Localize translate_text="_t_Open demo account_t_" />
+                    </Button>
+                </>
+            )}
+            <MobileNavToggle />
+        </div>
+    )
+}
+
+export default MainNavigationButtons
diff --git a/src/features/components/templates/navigation/main-nav/nav.logo.tsx b/src/features/components/templates/navigation/main-nav/nav.logo.tsx
new file mode 100644
index 00000000000..6ff144566e1
--- /dev/null
+++ b/src/features/components/templates/navigation/main-nav/nav.logo.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CustomLink } from '@deriv-com/components'
+// eslint-disable-next-line import/no-unresolved
+import { BrandDerivWordmarkCoralIcon } from '@deriv/quill-icons/Logo'
+
+export const MainNavigationLogo = () => {
+    return (
+        <CustomLink href={'/'}>
+            <BrandDerivWordmarkCoralIcon width={73} height={24} />
+        </CustomLink>
+    )
+}
+
+export default MainNavigationLogo
diff --git a/src/features/components/templates/navigation/market-nav/index.tsx b/src/features/components/templates/navigation/market-nav/index.tsx
deleted file mode 100644
index ac5f90ef165..00000000000
--- a/src/features/components/templates/navigation/market-nav/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { StringParam, useQueryParam } from 'use-query-params'
-import NavTemplate from '../template'
-import { mainItems } from '../main-nav/content'
-import MainNavButtons from '../main-nav/main-nav-buttons'
-import MarketBottomNav from '../template/market-bottom-nav'
-import { market_nav_logo } from './market-nav.module.scss'
-import Image from 'features/components/atoms/image'
-import LogoImage from 'images/common/rebranding_logo.svg'
-import Link from 'features/components/atoms/link'
-import { localize } from 'components/localization'
-
-const MarketNav = () => {
-    const [platform] = useQueryParam('platform', StringParam)
-    const [is_deriv_go, setIsDerivGo] = useState(false)
-
-    useEffect(() => {
-        setIsDerivGo(platform === 'derivgo')
-    }, [platform])
-
-    return (
-        <>
-            {is_deriv_go ? null : (
-                <NavTemplate
-                    render_bottom_nav={() => <MarketBottomNav />}
-                    renderLogo={() => (
-                        <Link url={{ type: 'internal', to: '/' }} aria-label="deriv logo link">
-                            <Image
-                                src={LogoImage}
-                                className={market_nav_logo}
-                                alt={localize('_t_deriv-logo_t_')}
-                            />
-                        </Link>
-                    )}
-                    items={mainItems}
-                >
-                    <MainNavButtons />
-                </NavTemplate>
-            )}
-        </>
-    )
-}
-
-export default MarketNav
diff --git a/src/features/components/templates/navigation/market-nav/market-nav.module.scss b/src/features/components/templates/navigation/market-nav/market-nav.module.scss
deleted file mode 100644
index 30cc73afc59..00000000000
--- a/src/features/components/templates/navigation/market-nav/market-nav.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use 'features/styles/theme/theme-mixins' as *;
-
-.market_nav_logo {
-    inline-size: 7rem;
-    block-size: 2.4rem;
-
-    @include breakpoints(tablet) {
-        inline-size: 9.6rem;
-        block-size: 3.6rem;
-    }
-}
diff --git a/src/features/components/templates/navigation/partners-nav/data.tsx b/src/features/components/templates/navigation/partners-nav/data.tsx
new file mode 100644
index 00000000000..5b423b719b6
--- /dev/null
+++ b/src/features/components/templates/navigation/partners-nav/data.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { NavLinkItems } from '@deriv-com/providers'
+import { Localize } from 'components/localization'
+import { deriv_api_url } from 'common/constants'
+
+export const partnersItems: NavLinkItems = {
+    trade: {
+        id: 0,
+        type: 'direct',
+        href: '/partners/deriv-prime',
+        text: <Localize translate_text="_t_Deriv Prime_t_" />,
+    },
+    affiliates: {
+        id: 1,
+        href: '/partners/affiliate-ib',
+        text: <Localize translate_text="_t_Affiliates and IBs_t_" />,
+        type: 'direct',
+    },
+    'payment-agents': {
+        id: 2,
+        href: '/partners/payment-agent',
+        text: <Localize translate_text="_t_Payment agents_t_" />,
+        type: 'direct',
+    },
+    'deriv-api': {
+        id: 3,
+        href: deriv_api_url,
+        text: <Localize translate_text="_t_Deriv API_t_" />,
+        type: 'direct',
+    },
+}
+
+export const partnersEUItems: NavLinkItems = {
+    trade: {
+        id: 0,
+        type: 'direct',
+        href: '/partners/deriv-prime',
+        text: <Localize translate_text="_t_Deriv Prime_t_" />,
+    },
+    affiliates: {
+        id: 1,
+        href: '/partners/affiliate-ib',
+        text: <Localize translate_text="_t_Affiliates_t_" />,
+        type: 'direct',
+    },
+    'deriv-api': {
+        id: 3,
+        href: deriv_api_url,
+        text: <Localize translate_text="_t_Deriv API_t_" />,
+        type: 'direct',
+    },
+}
diff --git a/src/features/components/templates/navigation/partners-nav/index.tsx b/src/features/components/templates/navigation/partners-nav/index.tsx
new file mode 100644
index 00000000000..dacfc236968
--- /dev/null
+++ b/src/features/components/templates/navigation/partners-nav/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { NavigationBlock } from '@deriv-com/blocks'
+// eslint-disable-next-line import/no-unresolved
+import { SubBrandDerivPartnersBrandLightIcon } from '@deriv/quill-icons/Logo'
+import { CustomLink } from '@deriv-com/components'
+import TopNavigation from './top-navigation'
+import { partnersItems, partnersEUItems } from './data'
+import PartnersNavButtons from './nav.buttons'
+import useRegion from 'components/hooks/use-region'
+
+const PartnersNav = () => {
+    const { is_eu } = useRegion()
+
+    return (
+        <NavigationBlock
+            renderButtons={PartnersNavButtons}
+            topNavigation={TopNavigation}
+            renderLogo={() => (
+                <CustomLink href={'/partners'}>
+                    <SubBrandDerivPartnersBrandLightIcon width={144} height={24} />
+                </CustomLink>
+            )}
+            items={is_eu ? partnersEUItems : partnersItems}
+        />
+    )
+}
+
+export default PartnersNav
diff --git a/src/features/components/templates/navigation/partners-nav/nav.buttons.tsx b/src/features/components/templates/navigation/partners-nav/nav.buttons.tsx
new file mode 100644
index 00000000000..e5e69b0d942
--- /dev/null
+++ b/src/features/components/templates/navigation/partners-nav/nav.buttons.tsx
@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react'
+import { MobileNavToggle } from '@deriv-com/blocks'
+import { Button } from '@deriv/quill-design'
+import { getLocationPathname } from 'common/utility'
+import useRegion from 'components/hooks/use-region'
+import { Localize, LocalizedLink } from 'components/localization'
+import useAffiliateSignupLink from 'features/hooks/ab-testing/use-partners-signup-link'
+
+const AffiliateButtons = () => {
+    const { affiliate_signup_link } = useAffiliateSignupLink()
+    return (
+        <>
+            <Button
+                variant="secondary"
+                colorStyle="black"
+                size="lg"
+                onClick={() => window.open('https://login.deriv.com/signin.php?lang=0', '_blank')}
+            >
+                <Localize translate_text="_t_Log in_t_" />
+            </Button>
+            <Button
+                className="hidden lg:block"
+                size="lg"
+                onClick={() => window.open(affiliate_signup_link, '_blank')}
+            >
+                <Localize translate_text="_t_Sign up_t_" />
+            </Button>
+        </>
+    )
+}
+
+const PaymentAgentButtons = () => {
+    return (
+        <LocalizedLink external to="mailto:partners@deriv.com" is_mail_link>
+            <Button size="lg" className="hidden lg:block">
+                <Localize translate_text="_t_Apply now_t_" />
+            </Button>
+            <Button size="lg" variant="secondary" colorStyle="black" className="block lg:hidden">
+                <Localize translate_text="_t_Apply now_t_" />
+            </Button>
+        </LocalizedLink>
+    )
+}
+
+const PartnersNavButtons = () => {
+    const { is_eu } = useRegion()
+    const path_name = getLocationPathname()
+
+    const affiliate_buttons = useMemo(() => {
+        return !path_name ? null : path_name.includes('affiliate-ib') ? (
+            <AffiliateButtons />
+        ) : path_name.includes('payment-agent') && !is_eu ? (
+            <PaymentAgentButtons />
+        ) : null
+    }, [is_eu, path_name])
+
+    return (
+        <div className="flex items-center gap-gap-md">
+            {affiliate_buttons}
+            <MobileNavToggle />
+        </div>
+    )
+}
+
+export default PartnersNavButtons
diff --git a/src/features/components/templates/navigation/partners-nav/prime-nav.tsx b/src/features/components/templates/navigation/partners-nav/prime-nav.tsx
new file mode 100644
index 00000000000..1b3d459a65d
--- /dev/null
+++ b/src/features/components/templates/navigation/partners-nav/prime-nav.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { MobileNavToggle, NavigationBlock } from '@deriv-com/blocks'
+// eslint-disable-next-line import/no-unresolved
+import { SubBrandDerivPartnersBrandLightIcon } from '@deriv/quill-icons/Logo'
+import { Button } from '@deriv/quill-design'
+import { CustomLink } from '@deriv-com/components'
+import { partnersEUItems, partnersItems } from './data'
+import TopNavigation from './top-navigation'
+import useRegion from 'components/hooks/use-region'
+import { Localize } from 'components/localization'
+import useScrollToElement from 'features/hooks/use-scroll-to-element'
+
+const PrimeNavButtons = () => {
+    return (
+        <div className="flex items-center gap-gap-md">
+            <Button
+                className="block lg:hidden"
+                variant="secondary"
+                colorStyle="black"
+                size="lg"
+                onClick={useScrollToElement('getintouch')}
+            >
+                <Localize translate_text="_t_Contact us_t_" />
+            </Button>
+            <Button
+                className="hidden lg:block"
+                size="lg"
+                id="dm-nav-deriv-prime-contact"
+                onClick={useScrollToElement('getintouch')}
+            >
+                <Localize translate_text="_t_Contact us_t_" />
+            </Button>
+            <MobileNavToggle />
+        </div>
+    )
+}
+
+const PrimeNav = () => {
+    const { is_eu } = useRegion()
+    return (
+        <NavigationBlock
+            topNavigation={TopNavigation}
+            renderButtons={PrimeNavButtons}
+            renderLogo={() => (
+                <CustomLink href={'/partners'}>
+                    <SubBrandDerivPartnersBrandLightIcon width={144} height={24} />
+                </CustomLink>
+            )}
+            items={is_eu ? partnersEUItems : partnersItems}
+        />
+    )
+}
+
+export default PrimeNav
diff --git a/src/features/components/templates/navigation/partners-nav/top-navigation.tsx b/src/features/components/templates/navigation/partners-nav/top-navigation.tsx
new file mode 100644
index 00000000000..1b56c5ebc77
--- /dev/null
+++ b/src/features/components/templates/navigation/partners-nav/top-navigation.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CustomLink } from '@deriv-com/components'
+import clsx from 'clsx'
+
+export const TopNavigation = () => {
+    const sharedClasses = 'text-body-sm hover:text-typography-prominent hover:no-underline'
+    return (
+        <div className="flex gap-gap-xl py-general-sm">
+            <CustomLink href="/" className={clsx(sharedClasses)}>
+                Deriv website
+            </CustomLink>
+            <CustomLink href="/who-we-are" className={clsx(sharedClasses)}>
+                Who we are
+            </CustomLink>
+            <CustomLink href="/contact_us" className={clsx(sharedClasses)}>
+                Contact us
+            </CustomLink>
+        </div>
+    )
+}
+
+export default TopNavigation
diff --git a/src/features/components/templates/navigation/payment-agent-nav/data.tsx b/src/features/components/templates/navigation/payment-agent-nav/data.tsx
deleted file mode 100644
index 41b97b0905d..00000000000
--- a/src/features/components/templates/navigation/payment-agent-nav/data.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { NavItems } from '../types'
-
-const affiliateNavItems: NavItems = [
-    {
-        id: 0,
-        data: {
-            type: 'single-item',
-            title: '_t_Deriv Prime_t_',
-            content: {
-                type: 'internal',
-                to: '/partners/deriv-prime/',
-            },
-        },
-    },
-    {
-        id: 1,
-        data: {
-            type: 'single-item',
-            title: '_t_Affiliates and IBs_t_',
-            content: {
-                type: 'internal',
-                to: '/partners/affiliate-ib/',
-            },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 2,
-        data: {
-            type: 'single-item',
-            title: '_t_Affiliates_t_',
-            content: {
-                type: 'internal',
-                to: '/partners/affiliate-ib/',
-            },
-        },
-        visibility: {
-            is_eu: true,
-        },
-    },
-    {
-        id: 3,
-        data: {
-            type: 'single-item',
-            title: '_t_Payment agents_t_',
-            content: {
-                type: 'internal',
-                to: '/partners/payment-agent/',
-            },
-        },
-        visibility: {
-            is_row: true,
-        },
-    },
-    {
-        id: 4,
-        data: {
-            type: 'single-item',
-            title: '_t_API_t_',
-            content: {
-                type: 'company',
-                url_name: 'api',
-            },
-        },
-    },
-]
-export default affiliateNavItems
diff --git a/src/features/components/templates/navigation/payment-agent-nav/index.tsx b/src/features/components/templates/navigation/payment-agent-nav/index.tsx
deleted file mode 100644
index 5eb0980efdf..00000000000
--- a/src/features/components/templates/navigation/payment-agent-nav/index.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { useMemo } from 'react'
-import NavTemplate from '../template'
-import affiliateNavItems from './data'
-import { partners_buttons, partners_nav_logo } from './payment-agent-nav.module.scss'
-import PrimeLogo from 'images/svg/deriv-prime/deriv-prime-logo.svg'
-import PartnerNavLogo from 'images/svg/partner-nav-logo.svg'
-import Image from 'features/components/atoms/image'
-import Button from 'features/components/atoms/button'
-import { Localize } from 'components/localization/localize'
-import LanguageSwitcher from 'features/components/molecules/language-switcher'
-import Link from 'features/components/atoms/link'
-import Flex from 'features/components/atoms/flex-box'
-import { getLocationPathname } from 'common/utility'
-import useScrollToElement from 'features/hooks/use-scroll-to-element'
-import useAffiliateSignupLink from 'features/hooks/ab-testing/use-partners-signup-link'
-import useRegion from 'components/hooks/use-region'
-import { TString } from 'types/generics'
-import { localize } from 'components/localization'
-
-type contentType = {
-    [T: string]: TString
-}
-
-const PaymentAgentAffiliateNav = ({ is_prime_page = false }: { is_prime_page?: boolean }) => {
-    const path_name = getLocationPathname()
-    const clickToScrollHandler = useScrollToElement('getintouch')
-
-    const { is_eu } = useRegion()
-    const { affiliate_signup_link } = useAffiliateSignupLink()
-
-    const texts: contentType = is_eu
-        ? {
-              login: '_t_Affiliate log in_t_',
-              sign_up: '_t_Affiliate sign up_t_',
-          }
-        : {
-              login: '_t_Affiliate & IB Log in_t_',
-              sign_up: '_t_Affiliate & IB sign up_t_',
-          }
-
-    const generate_buttons = useMemo(() => {
-        return !path_name ? null : path_name.includes('deriv-prime') ? (
-            <Button.Primary
-                id="dm-nav-deriv-prime-contact"
-                onClick={clickToScrollHandler}
-                className={partners_buttons}
-            >
-                <Localize translate_text="_t_Contact us_t_" />
-            </Button.Primary>
-        ) : (
-            <>
-                <Button.Primary
-                    onClick={() =>
-                        window.open('https://login.deriv.com/signin.php?lang=0', '_blank')
-                    }
-                    outlined
-                    visible={'larger-than-tablet'}
-                    className={partners_buttons}
-                >
-                    <Localize translate_text={texts.login} />
-                </Button.Primary>
-                <Button.Primary
-                    onClick={() =>
-                        window.open('https://login.deriv.com/signin.php?lang=0', '_blank')
-                    }
-                    outlined
-                    visible={'phone-and-tablet'}
-                >
-                    <Localize translate_text="_t_Log in_t_" />
-                </Button.Primary>
-                <Button.Primary
-                    id="dm-nav-affiliate-signup-button"
-                    onClick={() => window.open(affiliate_signup_link, '_blank')}
-                    visible={'larger-than-tablet'}
-                    className={partners_buttons}
-                >
-                    <Localize translate_text={texts.sign_up} />
-                </Button.Primary>
-            </>
-        )
-    }, [path_name, affiliate_signup_link])
-
-    return (
-        <NavTemplate
-            renderLogo={() => (
-                <Link
-                    url={{
-                        type: 'internal',
-                        to: is_prime_page ? '/partners/deriv-prime/' : '/partners/',
-                    }}
-                    aria-label="deriv partners link"
-                >
-                    {is_prime_page ? (
-                        <Image
-                            src={PrimeLogo}
-                            className={partners_nav_logo}
-                            alt={localize('_t_Deriv Prime_t_')}
-                        />
-                    ) : (
-                        <Image
-                            src={PartnerNavLogo}
-                            className={partners_nav_logo}
-                            alt={localize('_t_Deriv Partners_t_')}
-                        />
-                    )}
-                </Link>
-            )}
-            items={affiliateNavItems}
-            has_top_nav
-            has_centered_items
-        >
-            <Flex.Box
-                direction="row-reverse"
-                md={{ direction: 'row' }}
-                justify="center"
-                align="center"
-                gap="8x"
-            >
-                {generate_buttons}
-                <LanguageSwitcher />
-            </Flex.Box>
-        </NavTemplate>
-    )
-}
-
-export default PaymentAgentAffiliateNav
diff --git a/src/features/components/templates/options-layout/index.tsx b/src/features/components/templates/options-layout/index.tsx
index 003bb6e2826..3f6bd537b97 100644
--- a/src/features/components/templates/options-layout/index.tsx
+++ b/src/features/components/templates/options-layout/index.tsx
@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react'
+import MainRowNavigation from '../navigation/main-nav'
 import Layout from 'features/components/templates/layout'
 import { start_trading_data, why_trade_options_data } from './data'
-import MainNav from 'features/components/templates/navigation/main-nav'
-import Footer from 'features/components/templates/footer'
+import MainFooter from 'features/components/templates/footer'
 import StartTrading from 'features/components/templates/start-trading'
 import WhyTradeOptions from 'features/components/templates/why-trade-options'
 import { TString } from 'types/generics'
@@ -24,7 +24,7 @@ const OptionsLayout = ({
 }: OptionsLayoutProps) => {
     return (
         <Layout>
-            <MainNav />
+            <MainRowNavigation />
             <OptionsTopTab />
             <WhatAreDigitalOptions
                 heading={heading}
@@ -34,7 +34,7 @@ const OptionsLayout = ({
             {children}
             <WhyTradeOptions data={why_trade_options_data} />
             <StartTrading data={start_trading_data} />
-            <Footer />
+            <MainFooter />
         </Layout>
     )
 }
diff --git a/src/features/pages/404/index.tsx b/src/features/pages/404/index.tsx
index 279c31c4ab2..b0a5113733e 100644
--- a/src/features/pages/404/index.tsx
+++ b/src/features/pages/404/index.tsx
@@ -1,15 +1,15 @@
 import React from 'react'
 import Layout from 'features/components/templates/layout'
 import NotFoundContainer from './content/not-found.container'
-import MainNav from 'features/components/templates/navigation/main-nav'
-import Footer from 'features/components/templates/footer'
+import MainFooter from 'features/components/templates/footer'
+import MainRowNavigation from 'features/components/templates/navigation/main-nav'
 
 const PageNotFound = () => {
     return (
         <Layout>
-            <MainNav />
+            <MainRowNavigation />
             <NotFoundContainer />
-            <Footer />
+            <MainFooter />
         </Layout>
     )
 }
diff --git a/src/features/pages/check-email/index.tsx b/src/features/pages/check-email/index.tsx
index 8e1092525ae..7283ff5a4e1 100644
--- a/src/features/pages/check-email/index.tsx
+++ b/src/features/pages/check-email/index.tsx
@@ -2,17 +2,17 @@ import React from 'react'
 import Layout from 'features/components/templates/layout'
 import { check_email_container } from './check-email.module.scss'
 import CheckEmailSteps from './check-email.steps'
-import MainNav from 'features/components/templates/navigation/main-nav'
 import { Localize } from 'components/localization'
 import Flex from 'features/components/atoms/flex-box'
 import Typography from 'features/components/atoms/typography'
 import LinkButton from 'features/components/atoms/link-button'
-import Footer from 'features/components/templates/footer'
+import MainFooter from 'features/components/templates/footer'
+import MainRowNavigation from 'features/components/templates/navigation/main-nav'
 
 const CheckEmailContainer = () => {
     return (
         <Layout>
-            <MainNav />
+            <MainRowNavigation />
             <Flex.Box
                 justify="center"
                 align="center"
@@ -38,7 +38,7 @@ const CheckEmailContainer = () => {
                     <Localize translate_text="_t_Re-enter your email and try again_t_" />
                 </LinkButton.Primary>
             </Flex.Box>
-            <Footer />
+            <MainFooter />
         </Layout>
     )
 }
diff --git a/src/features/pages/deriv-ctrader/index.tsx b/src/features/pages/deriv-ctrader/index.tsx
index 8aa7b5a32b6..82a7bab5230 100644
--- a/src/features/pages/deriv-ctrader/index.tsx
+++ b/src/features/pages/deriv-ctrader/index.tsx
@@ -9,16 +9,16 @@ import CTraderTradeFeatures from './platform-features'
 import HowToStartCTrader from './how-to-start'
 import CTraderPlatformBanner from './platform-banner'
 import OtherPlatforms from './other-platforms'
-import MainNav from 'features/components/templates/navigation/main-nav'
-import Footer from 'features/components/templates/footer/'
+import MainFooter from 'features/components/templates/footer/'
 import { WithIntl } from 'components/localization'
+import MainRowNavigation from 'features/components/templates/navigation/main-nav'
 
 const DerivCTrader = () => {
     const is_ctrader = false
 
     return (
         <Layout>
-            <MainNav />
+            <MainRowNavigation />
             <CTraderHero />
             <CTraderNumbers />
             <CTraderTradeDescription />
@@ -33,7 +33,7 @@ const DerivCTrader = () => {
 
             <OtherPlatforms />
             <BrowseOurFaq />
-            <Footer />
+            <MainFooter />
         </Layout>
     )
 }
diff --git a/src/features/pages/home/index.tsx b/src/features/pages/home/index.tsx
index b383555837d..69973a728e8 100644
--- a/src/features/pages/home/index.tsx
+++ b/src/features/pages/home/index.tsx
@@ -9,11 +9,11 @@ import TradeTypes from './trade-types'
 import { useOpenLiveChat } from 'components/hooks/use-open-live-chat-redirection'
 import AwardBanner from 'features/components/templates/banners/award-banners'
 import useRegion from 'components/hooks/use-region'
-import MainNav from 'features/components/templates/navigation/main-nav'
 import SignupPublic from 'features/components/templates/signup/with-banner'
+import MainRowNavigation from 'features/components/templates/navigation/main-nav'
 
 const OurPlatforms = loadable(() => import('./our-platforms'))
-const Footer = loadable(() => import('features/components/templates/footer'))
+const MainFooter = loadable(() => import('features/components/templates/footer'))
 
 const HomePage = () => {
     useOpenLiveChat(true)
@@ -21,7 +21,7 @@ const HomePage = () => {
 
     return (
         <Layout>
-            <MainNav />
+            <MainRowNavigation />
             <HomeHero />
             <LivePricing />
             <TradeTypes />
@@ -30,7 +30,7 @@ const HomePage = () => {
             <ClientTestimonial />
             {is_p2p_allowed_country && <P2PBanner />}
             <SignupPublic />
-            <Footer />
+            <MainFooter />
         </Layout>
     )
 }
diff --git a/src/features/pages/markets/etf/index.tsx b/src/features/pages/markets/etf/index.tsx
index 34ddf965d0e..9f36a6341cb 100644
--- a/src/features/pages/markets/etf/index.tsx
+++ b/src/features/pages/markets/etf/index.tsx
@@ -10,13 +10,13 @@ import CheckTrading from './check-trading'
 import SignupPublic from 'features/components/templates/signup/with-banner'
 import Flex from 'features/components/atoms/flex-box'
 import OtherMarketsSlider from 'features/components/molecules/other-markets-slider'
-import MarketNav from 'features/components/templates/navigation/market-nav'
-import Footer from 'features/components/templates/footer/'
+import MainFooter from 'features/components/templates/footer/'
+import MainRowNavigation from 'features/components/templates/navigation/main-nav'
 
 const ETFMarket = () => {
     return (
         <Layout>
-            <MarketNav />
+            <MainRowNavigation />
             <Banner />
             <TradeTypes />
             <Flex.Box
@@ -35,7 +35,7 @@ const ETFMarket = () => {
             <Steps />
             <OtherMarketsSlider current_market="etfs" />
             <SignupPublic />
-            <Footer />
+            <MainFooter />
         </Layout>
     )
 }
diff --git a/src/features/pages/p2p/index.tsx b/src/features/pages/p2p/index.tsx
index c974bf0f5a3..34df8aa4c08 100644
--- a/src/features/pages/p2p/index.tsx
+++ b/src/features/pages/p2p/index.tsx
@@ -9,13 +9,13 @@ import DP2Availability from './availability'
 import { banner_data, portalData } from './_data'
 import Roadmap from 'features/components/organisms/roadmap'
 import DP2Banner from 'features/components/templates/banners/blade-shape-banner'
-import MainNav from 'features/components/templates/navigation/main-nav'
 import { useOpenLiveChat } from 'components/hooks/use-open-live-chat-redirection'
 import useRegion from 'components/hooks/use-region'
 import InitialLoader from 'components/elements/dot-loader'
 import PageNotFound from 'features/pages/404'
+import MainRowNavigation from 'features/components/templates/navigation/main-nav'
 
-const Footer = loadable(() => import('features/components/templates/footer'))
+const MainFooter = loadable(() => import('features/components/templates/footer'))
 
 const DP2PPage = () => {
     useOpenLiveChat(true)
@@ -25,7 +25,7 @@ const DP2PPage = () => {
         if (is_p2p_allowed_country) {
             return (
                 <Layout>
-                    <MainNav />
+                    <MainRowNavigation />
                     <DP2Hero />
                     <DP2Numbers />
                     <DP2P />
@@ -33,7 +33,7 @@ const DP2PPage = () => {
                     <DP2Availability />
                     <DP2Banner data={banner_data} />
                     <Roadmap data={portalData} />
-                    <Footer />
+                    <MainFooter />
                 </Layout>
             )
         }
diff --git a/src/features/pages/partners/deriv-prime/index.tsx b/src/features/pages/partners/deriv-prime/index.tsx
index e453810913e..f9ddbadbe73 100644
--- a/src/features/pages/partners/deriv-prime/index.tsx
+++ b/src/features/pages/partners/deriv-prime/index.tsx
@@ -10,13 +10,13 @@ import MeetUsThere from './meet-us-there'
 import ConnectivityReliabilityType from './connectivity-reliability'
 import AvailableInstruments from './available-instruments'
 import Hero from './hero'
-import PaymentAgentAffiliateNav from 'features/components/templates/navigation/payment-agent-nav'
-import Footer from 'features/components/templates/footer'
+import MainFooter from 'features/components/templates/footer'
+import PrimeNav from 'features/components/templates/navigation/partners-nav/prime-nav'
 
 const DerivPrime = () => {
     return (
         <Layout>
-            <PaymentAgentAffiliateNav is_prime_page />
+            <PrimeNav />
             <Hero />
             <Potential />
             <CommercialPlan />
@@ -27,7 +27,7 @@ const DerivPrime = () => {
             <GetInTouchBanner />
             <MeetUsThere />
             <BrowseOurFaq />
-            <Footer />
+            <MainFooter />
         </Layout>
     )
 }
diff --git a/src/images/common/migration/footer/deriv-go-qr.png b/src/images/common/migration/footer/deriv-go-qr.png
new file mode 100644
index 00000000000..994f78c2e2c
Binary files /dev/null and b/src/images/common/migration/footer/deriv-go-qr.png differ
diff --git a/src/images/common/migration/footer/download-appstore.png b/src/images/common/migration/footer/download-appstore.png
new file mode 100644
index 00000000000..6d2735b81cb
Binary files /dev/null and b/src/images/common/migration/footer/download-appstore.png differ
diff --git a/src/images/common/migration/footer/explore-appgallery.png b/src/images/common/migration/footer/explore-appgallery.png
new file mode 100644
index 00000000000..d301c3a06e8
Binary files /dev/null and b/src/images/common/migration/footer/explore-appgallery.png differ
diff --git a/src/images/common/migration/footer/get-googleplay.png b/src/images/common/migration/footer/get-googleplay.png
new file mode 100644
index 00000000000..aed50ba1e1a
Binary files /dev/null and b/src/images/common/migration/footer/get-googleplay.png differ
diff --git a/src/images/common/migration/footer/investors-in-people.png b/src/images/common/migration/footer/investors-in-people.png
new file mode 100644
index 00000000000..0df41b8fc5b
Binary files /dev/null and b/src/images/common/migration/footer/investors-in-people.png differ
diff --git a/src/pages/markets/components/sections/_hero_derived_fx.tsx b/src/pages/markets/components/sections/_hero_derived_fx.tsx
index 3244d51d60c..823121dae83 100644
--- a/src/pages/markets/components/sections/_hero_derived_fx.tsx
+++ b/src/pages/markets/components/sections/_hero_derived_fx.tsx
@@ -8,10 +8,10 @@ import device from 'themes/device'
 import useHandleSignup from 'components/hooks/use-handle-signup'
 import useAuthCheck from 'components/hooks/use-auth-check'
 import { useIsRtl } from 'components/hooks/use-isrtl'
-import MarketNav from 'features/components/templates/navigation/market-nav'
 import { handleGetTrading } from 'components/custom/utils'
 import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param'
 import { TString } from 'types/generics'
+import MainRowNavigation from 'features/components/templates/navigation/main-nav'
 
 type ContainerProps = {
     isDerivGo?: boolean
@@ -201,7 +201,7 @@ export const DerivedFXHero = ({
 
     return (
         <>
-            <MarketNav />
+            <MainRowNavigation />
             <BackgroundStyle>
                 <StyledContainer jc="flex-start">
                     <ContentWrapperStyle>
diff --git a/src/pages/partners/affiliate-ib/index.tsx b/src/pages/partners/affiliate-ib/index.tsx
index 04263f53c1f..31ab56638ef 100644
--- a/src/pages/partners/affiliate-ib/index.tsx
+++ b/src/pages/partners/affiliate-ib/index.tsx
@@ -180,7 +180,7 @@ const AffiliateIb = () => {
         : why_partner_with_us_items
 
     return (
-        <Layout type="partners" padding_top="10">
+        <Layout type="partners" padding_top="8">
             <Hero>
                 <StyledHeader as="h1" color="white" align="center" lh="1.25" type="display-title">
                     <Localize translate_text="_t_Partner with a trusted online trading provider_t_" />
diff --git a/src/pages/partners/index.tsx b/src/pages/partners/index.tsx
index a7ba004a021..36172e8aafa 100644
--- a/src/pages/partners/index.tsx
+++ b/src/pages/partners/index.tsx
@@ -19,7 +19,7 @@ const meta_attributes: TMetaAttributes = {
 
 const Partner = () => {
     return (
-        <Layout type="partners" padding_top="10">
+        <Layout type="partners" padding_top="8">
             <Hero />
             <AboutDeriv />
             <DerivNumber />
diff --git a/src/pages/partners/payment-agent/index.tsx b/src/pages/partners/payment-agent/index.tsx
index efd938d4b9c..db280d5d325 100644
--- a/src/pages/partners/payment-agent/index.tsx
+++ b/src/pages/partners/payment-agent/index.tsx
@@ -29,7 +29,7 @@ const PaymentAgent = () => {
     return (
         <>
             {is_row ? (
-                <Layout type="partners" padding_top="10">
+                <Layout type="partners" padding_top="8">
                     <Hero />
                     <TapInto />
                     <YourControl />
diff --git a/src/pages/signup-affiliates/index.tsx b/src/pages/signup-affiliates/index.tsx
index b287b68568e..be9bbc89422 100644
--- a/src/pages/signup-affiliates/index.tsx
+++ b/src/pages/signup-affiliates/index.tsx
@@ -144,7 +144,7 @@ const AffiliateSignup = () => {
     }
 
     return (
-        <Layout type="affiliates" show_footer={false}>
+        <Layout type="affiliates" padding_top="7" show_footer={false}>
             <ParentWrapper>
                 <AtomicContainer.Fluid dir="row">
                     <StyledContainer>
diff --git a/static/css/global.css b/static/css/global.css
new file mode 100644
index 00000000000..07b233fdae5
--- /dev/null
+++ b/static/css/global.css
@@ -0,0 +1,7 @@
+@import '@deriv/quill-design/dist/quill-design.css';
+@import '@deriv/quill-design/quill-tailwind/styles.css';
+@import '@deriv/quill-design/quill-tailwind/fonts.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000000..ac97cca6774
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+    presets: [require('@deriv/quill-design/quill-tailwind/tailwind.config')],
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index a0ec9a34d34..40bf8e80974 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,7 +19,8 @@
         "emitDecoratorMetadata": true,
         "noEmit": true,
         "skipLibCheck": true,
-        "moduleResolution": "node",
+        "moduleResolution": "Bundler",
+        "module": "ESNext",
         "resolveJsonModule": true,
         "downlevelIteration": true,
         "plugins": [