diff --git a/package-lock.json b/package-lock.json
index 3ba2a2fca..bad77b8a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@apollo/client": "^3.8.1",
         "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-        "@bosonprotocol/react-kit": "^0.35.1-alpha.7",
+        "@bosonprotocol/react-kit": "^0.36.0-alpha.16",
         "@davatar/react": "^1.10.4",
         "@ethersproject/address": "^5.6.1",
         "@ethersproject/units": "^5.7.0",
@@ -3423,11 +3423,12 @@
       }
     },
     "node_modules/@bosonprotocol/common": {
-      "version": "1.30.0-alpha.7",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.30.0-alpha.7.tgz",
-      "integrity": "sha512-sN+nnI+Zem0NwYlz9bEMxnzBKDnGLHZiVZKJp+ixgbv+kH6TWTJCXfh3YVSHbzJEIySqsDxiX5djtX2gBvYHuA==",
+      "version": "1.30.0-alpha.24",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.30.0-alpha.24.tgz",
+      "integrity": "sha512-pn3/jIC472B1REoVXTfmcH8KV+Ke2A8poYM6aONe4ybLcBZDb/FqqlAuDO3d0Fcb4pifBUhXX8ppDm939IICZA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@bosonprotocol/metadata": "^1.16.3-alpha.3",
+        "@bosonprotocol/metadata": "^1.16.3-alpha.20",
         "@ethersproject/abi": "^5.5.0",
         "@ethersproject/address": "^5.5.0",
         "@ethersproject/bignumber": "^5.5.0",
@@ -3436,11 +3437,12 @@
       }
     },
     "node_modules/@bosonprotocol/core-sdk": {
-      "version": "1.42.0-alpha.1",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.42.0-alpha.1.tgz",
-      "integrity": "sha512-dJnTPEAyslLYdTmAHhunefR/nO+TxB1W0a5/6RKXghSVGYxefeBK0M+LHMPbKWnONyTOriWEjJzpJ1uUfLVGFg==",
+      "version": "1.42.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.42.0-alpha.18.tgz",
+      "integrity": "sha512-BdrCMIZxnkJzHSYgevXnbD4fd2vpPkBIUeRGqUC98w6ysVb5OUrpnojTKTVHrlIE6hcqinOV/sfe7m029fW1lg==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@bosonprotocol/common": "^1.30.0-alpha.7",
+        "@bosonprotocol/common": "^1.30.0-alpha.24",
         "@ethersproject/abi": "^5.5.0",
         "@ethersproject/address": "^5.5.0",
         "@ethersproject/bignumber": "^5.5.0",
@@ -3456,11 +3458,12 @@
       }
     },
     "node_modules/@bosonprotocol/ethers-sdk": {
-      "version": "1.15.1-alpha.7",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.15.1-alpha.7.tgz",
-      "integrity": "sha512-qzGxx17jHAEGMybPKuFpNXFXGIgbYhuX74Oe+mJPBD65sF5xbjRrEIGErtmpL5SKfC96klrsnoXKZAaMNNbdQA==",
+      "version": "1.15.1-alpha.24",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.15.1-alpha.24.tgz",
+      "integrity": "sha512-9GNi+pQIY+nruZk3UV1MQEVYes1yH5G/uzs/czyNPYHWmaAg13Hs5KEzSCNUZcoQ8D7V3GoPbJD8G49XDk0USg==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@bosonprotocol/common": "^1.30.0-alpha.7"
+        "@bosonprotocol/common": "^1.30.0-alpha.24"
       },
       "peerDependencies": {
         "ethers": "^5.5.0"
@@ -3478,9 +3481,10 @@
       }
     },
     "node_modules/@bosonprotocol/metadata": {
-      "version": "1.16.3-alpha.3",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.16.3-alpha.3.tgz",
-      "integrity": "sha512-4fe588oZXH+B7LPOQwRXFnOMpR5Th3ifk1Yt6rO4S1tAt6B2cgDI5lVBSJDNF/tcppBr01MTreJjp8sQjxFkTg==",
+      "version": "1.16.3-alpha.20",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.16.3-alpha.20.tgz",
+      "integrity": "sha512-DBlAnvHXo9l+/7lyVgJeaDtZdcFWK+1dUNqhc0nOE1hdc2wWkCfthF+r7AtPARbSA7aZt6miHSrInf7Jgqq8CQ==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@bosonprotocol/metadata-storage": "^1.0.1",
         "schema-to-yup": "^1.11.11",
@@ -3493,19 +3497,20 @@
       "integrity": "sha512-f2W2SQAvY5IKD6L9JwaiNye7gGRIIPd/HOB0i+otWLzMPBlwQtbN4JeWSuKeJvuaqu8tyMy7CHzN8EkhrJDB+A=="
     },
     "node_modules/@bosonprotocol/react-kit": {
-      "version": "0.35.1-alpha.7",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.35.1-alpha.7.tgz",
-      "integrity": "sha512-TBgqR8YP4veqpvaD1X42msJuXF96HwjCHbH7Qp7etN4Z1Ebm8zarjKjujFIImokqfQ9xD+ytDqZepZwFb6RjKA==",
+      "version": "0.36.0-alpha.16",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.36.0-alpha.16.tgz",
+      "integrity": "sha512-Io2BIUrm+e6YjUDMheK/FdO21pI/69YWEgL139cSBfH+du1EbyT48S2BExjJTriaTKlVxu3aDf4bVo4ms9gJtQ==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-        "@bosonprotocol/core-sdk": "^1.42.0-alpha.1",
-        "@bosonprotocol/ethers-sdk": "^1.15.1-alpha.7",
+        "@bosonprotocol/core-sdk": "^1.42.0-alpha.18",
+        "@bosonprotocol/ethers-sdk": "^1.15.1-alpha.24",
         "@bosonprotocol/ipfs-storage": "^1.12.0",
+        "@bosonprotocol/roblox-sdk": "^1.0.0-alpha.16",
         "@davatar/react": "1.11.1",
         "@ethersproject/units": "5.6.0",
         "@glidejs/glide": "3.6.0",
         "@metamask/jazzicon": "^2.0.0",
-        "@rainbow-me/rainbowkit": "^1.3.4",
         "@sentry/browser": "7.43.0",
         "@svgr/webpack": "^8.1.0",
         "@tippyjs/react": "4.2.6",
@@ -3528,6 +3533,7 @@
         "eth-revert-reason": "^1.0.3",
         "formik": "2.2.9",
         "graphql-request": "5.2.0",
+        "i": "^0.3.7",
         "jotai": "^1.13.1",
         "lodash.merge": "4.6.2",
         "lodash.uniqby": "4.7.0",
@@ -3535,16 +3541,20 @@
         "multicodec": "^3.2.1",
         "multiformats": "^13.1.0",
         "multihashes": "^4.0.3",
+        "nanoclone": "^0.2.1",
         "phosphor-react": "^1.4.1",
         "polished": "^4.2.2",
+        "query-string": "^9.1.1",
         "react-avatar-editor": "^13.0.2",
         "react-chartjs-2": "^5.2.0",
+        "react-cookie": "^7.2.2",
         "react-dropzone": "^14.2.3",
         "react-error-boundary": "^4.0.13",
         "react-hot-toast": "2.4.0",
+        "react-infinite-scroll-component": "^6.1.0",
         "react-markdown": "8.0.6",
         "react-phone-number-input": "3.2.19",
-        "react-query": "3.39.3",
+        "react-query": "^3.39.3",
         "react-responsive": "9.0.2",
         "react-router-dom": "6.9.0",
         "react-select": "5.7.0",
@@ -3562,8 +3572,9 @@
         "use-async-effect": "2.2.7",
         "use-resize-observer": "^9.1.0",
         "utility-types": "3.10.0",
+        "valid-data-url": "^4.0.1",
         "viem": "^1.21.4",
-        "wagmi": "^1.4.13"
+        "zustand": "^4.4.0"
       },
       "peerDependencies": {
         "ethers": "^5.7.2",
@@ -4025,6 +4036,14 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
       "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
     },
+    "node_modules/@bosonprotocol/react-kit/node_modules/decode-uri-component": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
     "node_modules/@bosonprotocol/react-kit/node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -4076,6 +4095,17 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/@bosonprotocol/react-kit/node_modules/filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@bosonprotocol/react-kit/node_modules/graphql-request": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/graphql-request/-/graphql-request-5.2.0.tgz",
@@ -4111,6 +4141,22 @@
       "resolved": "https://registry.npmjs.org/multiformats/-/multiformats-13.3.1.tgz",
       "integrity": "sha512-QxowxTNwJ3r5RMctoGA5p13w5RbRT2QDkoM+yFlqfLiioBp78nhDjnRLvmSBI9+KAqN4VdgOVWM9c0CHd86m3g=="
     },
+    "node_modules/@bosonprotocol/react-kit/node_modules/query-string": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-9.1.1.tgz",
+      "integrity": "sha512-MWkCOVIcJP9QSKU52Ngow6bsAWAPlPK2MludXvcrS2bGZSl+T1qX9MZvRIkqUIkGLJquMJHWfsT6eRqUpp4aWg==",
+      "dependencies": {
+        "decode-uri-component": "^0.4.1",
+        "filter-obj": "^5.1.0",
+        "split-on-first": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@bosonprotocol/react-kit/node_modules/react-chartjs-2": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
@@ -4216,6 +4262,17 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@bosonprotocol/react-kit/node_modules/split-on-first": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
+      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@bosonprotocol/react-kit/node_modules/style-to-object": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz",
@@ -4253,6 +4310,16 @@
         "url": "https://opencollective.com/svgo"
       }
     },
+    "node_modules/@bosonprotocol/roblox-sdk": {
+      "version": "1.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/roblox-sdk/-/roblox-sdk-1.0.0-alpha.17.tgz",
+      "integrity": "sha512-DJfUGGVoVAY7aN1/ZcDIaC6+Fmf0gpfcIol0/iGqs1Ugu4WJQIHWnYD+fwAYYQ56LP+HcoERsOQVJfDIHR+w7g==",
+      "peerDependencies": {
+        "@bosonprotocol/common": "^1.30.0-alpha.8",
+        "@bosonprotocol/core-sdk": "^1.42.0-alpha.2",
+        "typescript": "^5.7.3"
+      }
+    },
     "node_modules/@cfcs/core": {
       "version": "0.0.6",
       "license": "MIT",
@@ -4286,6 +4353,7 @@
     "node_modules/@coinbase/wallet-sdk": {
       "version": "3.7.1",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@metamask/safe-event-emitter": "2.0.0",
         "@solana/web3.js": "^1.70.1",
@@ -4312,6 +4380,7 @@
     "node_modules/@coinbase/wallet-sdk/node_modules/rxjs": {
       "version": "6.6.7",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^1.9.0"
       },
@@ -8401,11 +8470,13 @@
     },
     "node_modules/@metamask/safe-event-emitter": {
       "version": "2.0.0",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/@metamask/utils": {
       "version": "3.6.0",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "@types/debug": "^4.1.7",
         "debug": "^4.3.4",
@@ -8419,6 +8490,7 @@
     "node_modules/@metamask/utils/node_modules/semver": {
       "version": "7.5.3",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -8432,6 +8504,7 @@
     "node_modules/@metamask/utils/node_modules/superstruct": {
       "version": "1.0.3",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=14.0.0"
       }
@@ -10762,37 +10835,6 @@
         "@babel/runtime": "^7.13.10"
       }
     },
-    "node_modules/@rainbow-me/rainbowkit": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/@rainbow-me/rainbowkit/-/rainbowkit-1.3.7.tgz",
-      "integrity": "sha512-VZ12R8mgpwSuupajG5pkEHftKHP+h16Ci5JBmjuFzPhERqYTL3S/FzRDhha7gl+ZpQMWzF7NkMjURMK8Xjdb8A==",
-      "dependencies": {
-        "@vanilla-extract/css": "1.14.0",
-        "@vanilla-extract/dynamic": "2.1.0",
-        "@vanilla-extract/sprinkles": "1.6.1",
-        "clsx": "2.1.0",
-        "qrcode": "1.5.3",
-        "react-remove-scroll": "2.5.7",
-        "ua-parser-js": "^1.0.37"
-      },
-      "engines": {
-        "node": ">=12.4"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17",
-        "viem": "~0.3.19 || ^1.0.0",
-        "wagmi": "~1.0.1 || ~1.1.0 || ~1.2.0 || ~1.3.0 || ~1.4.0"
-      }
-    },
-    "node_modules/@rainbow-me/rainbowkit/node_modules/clsx": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
-      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@react-native-community/cli": {
       "version": "11.3.6",
       "license": "MIT",
@@ -14245,6 +14287,7 @@
     "node_modules/@solana/buffer-layout": {
       "version": "4.0.1",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "buffer": "~6.0.3"
       },
@@ -14255,6 +14298,7 @@
     "node_modules/@solana/web3.js": {
       "version": "1.77.3",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@noble/curves": "^1.0.0",
@@ -14738,80 +14782,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@tanstack/query-core": {
-      "version": "4.36.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.36.1.tgz",
-      "integrity": "sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/query-persist-client-core": {
-      "version": "4.36.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-4.36.1.tgz",
-      "integrity": "sha512-eocgCeI7D7TRv1IUUBMfVwOI0wdSmMkBIbkKhqEdTrnUHUQEeOaYac8oeZk2cumAWJdycu6P/wB+WqGynTnzXg==",
-      "dependencies": {
-        "@tanstack/query-core": "4.36.1"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/query-sync-storage-persister": {
-      "version": "4.36.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.36.1.tgz",
-      "integrity": "sha512-yMEt5hWe2+1eclf1agMtXHnPIkxEida0lYWkfdhR8U6KXk/lO4Vca6piJmhKI85t0NHlx3l/z6zX+t/Fn5O9NA==",
-      "dependencies": {
-        "@tanstack/query-persist-client-core": "4.36.1"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/react-query": {
-      "version": "4.36.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.36.1.tgz",
-      "integrity": "sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==",
-      "dependencies": {
-        "@tanstack/query-core": "4.36.1",
-        "use-sync-external-store": "^1.2.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-native": "*"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@tanstack/react-query-persist-client": {
-      "version": "4.36.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-4.36.1.tgz",
-      "integrity": "sha512-32I5b9aAu4NCiXZ7Te/KEQLfHbYeTNriVPrKYcvEThnZ9tlW01vLcSoxpUIsMYRsembvJUUAkzYBAiZHLOd6pQ==",
-      "dependencies": {
-        "@tanstack/query-persist-client-core": "4.36.1"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "@tanstack/react-query": "^4.36.1"
-      }
-    },
     "node_modules/@testing-library/dom": {
       "version": "8.16.0",
       "license": "MIT",
@@ -15109,6 +15079,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
     "node_modules/@types/debug": {
       "version": "4.1.7",
       "license": "MIT",
@@ -15174,8 +15149,9 @@
       }
     },
     "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.1",
-      "license": "MIT",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
+      "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
       "dependencies": {
         "@types/react": "*",
         "hoist-non-react-statics": "^3.3.0"
@@ -16438,387 +16414,6 @@
       "version": "3.4.1-solc-0.7-2",
       "license": "MIT"
     },
-    "node_modules/@vanilla-extract/css": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.14.0.tgz",
-      "integrity": "sha512-rYfm7JciWZ8PFzBM/HDiE2GLnKI3xJ6/vdmVJ5BSgcCZ5CxRlM9Cjqclni9lGzF3eMOijnUhCd/KV8TOzyzbMA==",
-      "dependencies": {
-        "@emotion/hash": "^0.9.0",
-        "@vanilla-extract/private": "^1.0.3",
-        "chalk": "^4.1.1",
-        "css-what": "^6.1.0",
-        "cssesc": "^3.0.0",
-        "csstype": "^3.0.7",
-        "deep-object-diff": "^1.1.9",
-        "deepmerge": "^4.2.2",
-        "media-query-parser": "^2.0.2",
-        "modern-ahocorasick": "^1.0.0",
-        "outdent": "^0.8.0"
-      }
-    },
-    "node_modules/@vanilla-extract/css/node_modules/@emotion/hash": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
-      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="
-    },
-    "node_modules/@vanilla-extract/css/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/@vanilla-extract/css/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/@vanilla-extract/css/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/@vanilla-extract/css/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/@vanilla-extract/css/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/@vanilla-extract/css/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/@vanilla-extract/dynamic": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@vanilla-extract/dynamic/-/dynamic-2.1.0.tgz",
-      "integrity": "sha512-8zl0IgBYRtgD1h+56Zu13wHTiMTJSVEa4F7RWX9vTB/5Xe2KtjoiqApy/szHPVFA56c+ex6A4GpCQjT1bKXbYw==",
-      "dependencies": {
-        "@vanilla-extract/private": "^1.0.3"
-      }
-    },
-    "node_modules/@vanilla-extract/private": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.6.tgz",
-      "integrity": "sha512-ytsG/JLweEjw7DBuZ/0JCN4WAQgM9erfSTdS1NQY778hFQSZ6cfCDEZZ0sgVm4k54uNz6ImKB33AYvSR//fjxw=="
-    },
-    "node_modules/@vanilla-extract/sprinkles": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@vanilla-extract/sprinkles/-/sprinkles-1.6.1.tgz",
-      "integrity": "sha512-N/RGKwGAAidBupZ436RpuweRQHEFGU+mvAqBo8PRMAjJEmHoPDttV8RObaMLrJHWLqvX+XUMinHUnD0hFRQISw==",
-      "peerDependencies": {
-        "@vanilla-extract/css": "^1.0.0"
-      }
-    },
-    "node_modules/@wagmi/connectors": {
-      "version": "3.1.11",
-      "resolved": "https://registry.npmjs.org/@wagmi/connectors/-/connectors-3.1.11.tgz",
-      "integrity": "sha512-wzxp9f9PtSUFjDUP/QDjc1t7HON4D8wrVKsw35ejdO8hToDpx1gU9lwH/47Zo/1zExGezQc392sjoHSszYd7OA==",
-      "funding": [
-        {
-          "type": "gitcoin",
-          "url": "https://wagmi.sh/gitcoin"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/wagmi-dev"
-        }
-      ],
-      "dependencies": {
-        "@coinbase/wallet-sdk": "^3.6.6",
-        "@safe-global/safe-apps-provider": "^0.18.1",
-        "@safe-global/safe-apps-sdk": "^8.1.0",
-        "@walletconnect/ethereum-provider": "2.11.0",
-        "@walletconnect/legacy-provider": "^2.0.0",
-        "@walletconnect/modal": "2.6.2",
-        "@walletconnect/utils": "2.11.0",
-        "abitype": "0.8.7",
-        "eventemitter3": "^4.0.7"
-      },
-      "peerDependencies": {
-        "typescript": ">=5.0.4",
-        "viem": ">=0.3.35"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@noble/curves": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.7.0.tgz",
-      "integrity": "sha512-UTMhXK9SeDhFJVrHeUJ5uZlI6ajXg10O6Ddocf9S6GjbSBVZsJo88HzKwXznNfGpMTRDyJkqMjNDPYgf0qFWnw==",
-      "dependencies": {
-        "@noble/hashes": "1.6.0"
-      },
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@noble/curves/node_modules/@noble/hashes": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.6.0.tgz",
-      "integrity": "sha512-YUULf0Uk4/mAA89w+k3+yUYh6NrEvxZa5T6SY3wlMvE2chHkxFUUIDI8/XW1QSC357iA5pSnqt7XEhvFOqmDyQ==",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@noble/hashes": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.6.1.tgz",
-      "integrity": "sha512-pq5D8h10hHBjyqX+cfBm0i8JUXJ0UhczFc4r74zbuT9XgewFo2E3J1cOaGtdZynILNmQ685YWGzGE1Zv6io50w==",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@safe-global/safe-apps-provider": {
-      "version": "0.18.5",
-      "resolved": "https://registry.npmjs.org/@safe-global/safe-apps-provider/-/safe-apps-provider-0.18.5.tgz",
-      "integrity": "sha512-9v9wjBi3TwLsEJ3C2ujYoexp3pFJ0omDLH/GX91e2QB+uwCKTBYyhxFSrTQ9qzoyQd+bfsk4gjOGW87QcJhf7g==",
-      "dependencies": {
-        "@safe-global/safe-apps-sdk": "^9.1.0",
-        "events": "^3.3.0"
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@safe-global/safe-apps-provider/node_modules/@safe-global/safe-apps-sdk": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@safe-global/safe-apps-sdk/-/safe-apps-sdk-9.1.0.tgz",
-      "integrity": "sha512-N5p/ulfnnA2Pi2M3YeWjULeWbjo7ei22JwU/IXnhoHzKq3pYCN6ynL9mJBOlvDVv892EgLPCWCOwQk/uBT2v0Q==",
-      "dependencies": {
-        "@safe-global/safe-gateway-typescript-sdk": "^3.5.3",
-        "viem": "^2.1.1"
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@safe-global/safe-apps-provider/node_modules/abitype": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/abitype/-/abitype-1.0.7.tgz",
-      "integrity": "sha512-ZfYYSktDQUwc2eduYu8C4wOs+RDPmnRYMh7zNfzeMtGGgb0U+6tLGjixUic6mXf5xKKCcgT5Qp6cv39tOARVFw==",
-      "funding": {
-        "url": "https://github.com/sponsors/wevm"
-      },
-      "peerDependencies": {
-        "typescript": ">=5.0.4",
-        "zod": "^3 >=3.22.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        },
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@safe-global/safe-apps-provider/node_modules/viem": {
-      "version": "2.21.55",
-      "resolved": "https://registry.npmjs.org/viem/-/viem-2.21.55.tgz",
-      "integrity": "sha512-PgXew7C11cAuEtOSgRyQx2kJxEOPUwIwZA9dMglRByqJuFVA7wSGZZOOo/93iylAA8E15bEdqy9xulU3oKZ70Q==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/wevm"
-        }
-      ],
-      "dependencies": {
-        "@noble/curves": "1.7.0",
-        "@noble/hashes": "1.6.1",
-        "@scure/bip32": "1.6.0",
-        "@scure/bip39": "1.5.0",
-        "abitype": "1.0.7",
-        "isows": "1.0.6",
-        "ox": "0.1.2",
-        "webauthn-p256": "0.0.10",
-        "ws": "8.18.0"
-      },
-      "peerDependencies": {
-        "typescript": ">=5.0.4"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@safe-global/safe-apps-sdk": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@safe-global/safe-apps-sdk/-/safe-apps-sdk-8.1.0.tgz",
-      "integrity": "sha512-XJbEPuaVc7b9n23MqlF6c+ToYIS3f7P2Sel8f3cSBQ9WORE4xrSuvhMpK9fDSFqJ7by/brc+rmJR/5HViRr0/w==",
-      "dependencies": {
-        "@safe-global/safe-gateway-typescript-sdk": "^3.5.3",
-        "viem": "^1.0.0"
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@scure/base": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.2.1.tgz",
-      "integrity": "sha512-DGmGtC8Tt63J5GfHgfl5CuAXh96VF/LD8K9Hr/Gv0J2lAoRGlPOMpqMpMbCTOoOJMZCk2Xt+DskdDyn6dEFdzQ==",
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@scure/bip32": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.6.0.tgz",
-      "integrity": "sha512-82q1QfklrUUdXJzjuRU7iG7D7XiFx5PHYVS0+oeNKhyDLT7WPqs6pBcM2W5ZdwOwKCwoE1Vy1se+DHjcXwCYnA==",
-      "dependencies": {
-        "@noble/curves": "~1.7.0",
-        "@noble/hashes": "~1.6.0",
-        "@scure/base": "~1.2.1"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/@scure/bip39": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.5.0.tgz",
-      "integrity": "sha512-Dop+ASYhnrwm9+HA/HwXg7j2ZqM6yk2fyLWb5znexjctFY3+E+eU8cIWI0Pql0Qx4hPZCijlGq4OL71g+Uz30A==",
-      "dependencies": {
-        "@noble/hashes": "~1.6.0",
-        "@scure/base": "~1.2.1"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/abitype": {
-      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/abitype/-/abitype-0.8.7.tgz",
-      "integrity": "sha512-wQ7hV8Yg/yKmGyFpqrNZufCxbszDe5es4AZGYPBitocfSqXtjrTG9JMWFcc4N30ukl2ve48aBTwt7NJxVQdU3w==",
-      "peerDependencies": {
-        "typescript": ">=5.0.4",
-        "zod": "^3 >=3.19.1"
-      },
-      "peerDependenciesMeta": {
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/isows": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/isows/-/isows-1.0.6.tgz",
-      "integrity": "sha512-lPHCayd40oW98/I0uvgaHKWCSvkzY27LjWLbtzOm64yQ+G3Q5npjjbdppU65iZXkK1Zt+kH9pfegli0AYfwYYw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/wevm"
-        }
-      ],
-      "peerDependencies": {
-        "ws": "*"
-      }
-    },
-    "node_modules/@wagmi/connectors/node_modules/ws": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
-      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@wagmi/core": {
-      "version": "1.4.13",
-      "resolved": "https://registry.npmjs.org/@wagmi/core/-/core-1.4.13.tgz",
-      "integrity": "sha512-ytMCvXbBOgfDu9Qw67279wq/jNEe7EZLjLyekX7ROnvHRADqFr3lwZI6ih41UmtRZAmXAx8Ghyuqy154EjB5mQ==",
-      "funding": [
-        {
-          "type": "gitcoin",
-          "url": "https://wagmi.sh/gitcoin"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/wagmi-dev"
-        }
-      ],
-      "dependencies": {
-        "@wagmi/connectors": "3.1.11",
-        "abitype": "0.8.7",
-        "eventemitter3": "^4.0.7",
-        "zustand": "^4.3.1"
-      },
-      "peerDependencies": {
-        "typescript": ">=5.0.4",
-        "viem": ">=0.3.35"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@wagmi/core/node_modules/abitype": {
-      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/abitype/-/abitype-0.8.7.tgz",
-      "integrity": "sha512-wQ7hV8Yg/yKmGyFpqrNZufCxbszDe5es4AZGYPBitocfSqXtjrTG9JMWFcc4N30ukl2ve48aBTwt7NJxVQdU3w==",
-      "peerDependencies": {
-        "typescript": ">=5.0.4",
-        "zod": "^3 >=3.19.1"
-      },
-      "peerDependenciesMeta": {
-        "zod": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@walletconnect/browser-utils": {
       "version": "1.8.0",
       "license": "Apache-2.0",
@@ -17123,105 +16718,6 @@
         }
       }
     },
-    "node_modules/@walletconnect/legacy-client": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/legacy-client/-/legacy-client-2.0.0.tgz",
-      "integrity": "sha512-v5L7rYk9loVnfvUf0mF+76bUPFaU5/Vh7mzL6/950CD/yoGdzYZ3Kj+L7mkC6HPMEGeQsBP1+sqBuiVGZ/aODA==",
-      "dependencies": {
-        "@walletconnect/crypto": "^1.0.3",
-        "@walletconnect/encoding": "^1.0.2",
-        "@walletconnect/jsonrpc-utils": "^1.0.4",
-        "@walletconnect/legacy-types": "^2.0.0",
-        "@walletconnect/legacy-utils": "^2.0.0",
-        "@walletconnect/safe-json": "^1.0.1",
-        "@walletconnect/window-getters": "^1.0.1",
-        "@walletconnect/window-metadata": "^1.0.1",
-        "detect-browser": "^5.3.0",
-        "query-string": "^6.13.5"
-      }
-    },
-    "node_modules/@walletconnect/legacy-client/node_modules/query-string": {
-      "version": "6.14.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
-      "integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
-      "dependencies": {
-        "decode-uri-component": "^0.2.0",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@walletconnect/legacy-modal": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/legacy-modal/-/legacy-modal-2.0.0.tgz",
-      "integrity": "sha512-jckNd8lMhm4X7dX9TDdxM3bXKJnaqkRs6K2Mo5j6GmbIF9Eyx40jZ5+q457RVxvM6ciZEDT5s1wBHWdWoOo+9Q==",
-      "dependencies": {
-        "@walletconnect/legacy-types": "^2.0.0",
-        "@walletconnect/legacy-utils": "^2.0.0",
-        "copy-to-clipboard": "^3.3.3",
-        "preact": "^10.12.0",
-        "qrcode": "^1.5.1"
-      }
-    },
-    "node_modules/@walletconnect/legacy-provider": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/legacy-provider/-/legacy-provider-2.0.0.tgz",
-      "integrity": "sha512-A8xPebMI1A+50HbWwTpFCbwP7G+1NGKdTKyg8BUUg3h3Y9JucpC1W6w/x0v1Xw7qFEqQnz74LoIN/A3ytH9xrQ==",
-      "dependencies": {
-        "@walletconnect/jsonrpc-http-connection": "^1.0.4",
-        "@walletconnect/jsonrpc-provider": "^1.0.6",
-        "@walletconnect/legacy-client": "^2.0.0",
-        "@walletconnect/legacy-modal": "^2.0.0",
-        "@walletconnect/legacy-types": "^2.0.0",
-        "@walletconnect/legacy-utils": "^2.0.0"
-      }
-    },
-    "node_modules/@walletconnect/legacy-types": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/legacy-types/-/legacy-types-2.0.0.tgz",
-      "integrity": "sha512-sOVrA7HUdbI1OwKyPOQU0/DdvTSVFlsXWpAk2K2WvP2erTkBWPMTJq6cv2BmKdoJ3p6gLApT7sd+jHi3OF71uw==",
-      "dependencies": {
-        "@walletconnect/jsonrpc-types": "^1.0.2"
-      }
-    },
-    "node_modules/@walletconnect/legacy-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/legacy-utils/-/legacy-utils-2.0.0.tgz",
-      "integrity": "sha512-CPWxSVVXw0kgNCxvU126g4GiV3mzXmC8IPJ15twE46aJ1FX+RHEIfAzFMFz2F2+fEhBxL63A7dwNQKDXorRPcQ==",
-      "dependencies": {
-        "@walletconnect/encoding": "^1.0.2",
-        "@walletconnect/jsonrpc-utils": "^1.0.4",
-        "@walletconnect/legacy-types": "^2.0.0",
-        "@walletconnect/safe-json": "^1.0.1",
-        "@walletconnect/window-getters": "^1.0.1",
-        "@walletconnect/window-metadata": "^1.0.1",
-        "detect-browser": "^5.3.0",
-        "query-string": "^6.13.5"
-      }
-    },
-    "node_modules/@walletconnect/legacy-utils/node_modules/query-string": {
-      "version": "6.14.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
-      "integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
-      "dependencies": {
-        "decode-uri-component": "^0.2.0",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@walletconnect/logger": {
       "version": "2.0.1",
       "license": "MIT",
@@ -18256,6 +17752,7 @@
     "node_modules/agentkeepalive": {
       "version": "4.3.0",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "debug": "^4.1.0",
         "depd": "^2.0.0",
@@ -18817,13 +18314,15 @@
     "node_modules/async-mutex": {
       "version": "0.2.6",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.0.0"
       }
     },
     "node_modules/async-mutex/node_modules/tslib": {
       "version": "2.6.0",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/async-retry": {
       "version": "1.3.3",
@@ -19395,6 +18894,7 @@
       "version": "1.1.5",
       "hasInstallScript": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "bindings": "^1.3.0"
       },
@@ -19426,11 +18926,13 @@
     },
     "node_modules/bind-decorator": {
       "version": "1.0.11",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/bindings": {
       "version": "1.5.0",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "file-uri-to-path": "1.0.0"
       }
@@ -19553,6 +19055,7 @@
     "node_modules/borsh": {
       "version": "0.7.0",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "bn.js": "^5.2.0",
         "bs58": "^4.0.0",
@@ -22048,11 +21551,6 @@
       "version": "0.1.4",
       "license": "MIT"
     },
-    "node_modules/deep-object-diff": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.9.tgz",
-      "integrity": "sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA=="
-    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "license": "MIT",
@@ -22221,6 +21719,7 @@
     "node_modules/delay": {
       "version": "5.0.0",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -23118,11 +22617,13 @@
     },
     "node_modules/es6-promise": {
       "version": "4.2.8",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/es6-promisify": {
       "version": "5.0.0",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "es6-promise": "^4.0.3"
       }
@@ -24020,6 +23521,7 @@
     "node_modules/eth-block-tracker": {
       "version": "6.1.0",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@metamask/safe-event-emitter": "^2.0.0",
         "@metamask/utils": "^3.0.1",
@@ -24033,6 +23535,7 @@
     "node_modules/eth-block-tracker/node_modules/pify": {
       "version": "3.0.0",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -24040,6 +23543,7 @@
     "node_modules/eth-json-rpc-filters": {
       "version": "5.1.0",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "@metamask/safe-event-emitter": "^2.0.0",
         "async-mutex": "^0.2.6",
@@ -24054,6 +23558,7 @@
     "node_modules/eth-json-rpc-filters/node_modules/pify": {
       "version": "5.0.0",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -24077,6 +23582,7 @@
     "node_modules/eth-query": {
       "version": "2.1.2",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "json-rpc-random-id": "^1.0.0",
         "xtend": "^4.0.1"
@@ -24147,6 +23653,7 @@
     "node_modules/eth-rpc-errors": {
       "version": "4.0.2",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-safe-stringify": "^2.0.6"
       }
@@ -24636,6 +24143,7 @@
     },
     "node_modules/eyes": {
       "version": "0.1.8",
+      "peer": true,
       "engines": {
         "node": "> 0.1.90"
       }
@@ -24694,11 +24202,13 @@
     },
     "node_modules/fast-safe-stringify": {
       "version": "2.1.1",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/fast-stable-stringify": {
       "version": "1.0.0",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/fast-xml-parser": {
       "version": "4.4.1",
@@ -24865,7 +24375,8 @@
     },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/filelist": {
       "version": "1.0.4",
@@ -26739,6 +26250,7 @@
     "node_modules/humanize-ms": {
       "version": "1.2.1",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ms": "^2.0.0"
       }
@@ -28428,6 +27940,7 @@
     "node_modules/jayson": {
       "version": "4.1.0",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/connect": "^3.4.33",
         "@types/node": "^12.12.54",
@@ -28451,22 +27964,26 @@
     },
     "node_modules/jayson/node_modules/@types/node": {
       "version": "12.20.55",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/jayson/node_modules/@types/ws": {
       "version": "7.4.7",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*"
       }
     },
     "node_modules/jayson/node_modules/commander": {
       "version": "2.20.3",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/jayson/node_modules/isomorphic-ws": {
       "version": "4.0.1",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "ws": "*"
       }
@@ -31126,6 +30643,7 @@
     "node_modules/json-rpc-engine": {
       "version": "6.1.0",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "@metamask/safe-event-emitter": "^2.0.0",
         "eth-rpc-errors": "^4.0.2"
@@ -31136,7 +30654,8 @@
     },
     "node_modules/json-rpc-random-id": {
       "version": "1.0.1",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/json-schema": {
       "version": "0.4.0",
@@ -31170,7 +30689,8 @@
     },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/json-to-pretty-yaml": {
       "version": "1.2.2",
@@ -31229,7 +30749,8 @@
       "engines": [
         "node >= 0.2.0"
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/jsonpointer": {
       "version": "5.0.1",
@@ -31241,6 +30762,7 @@
     "node_modules/JSONStream": {
       "version": "1.3.5",
       "license": "(MIT OR Apache-2.0)",
+      "peer": true,
       "dependencies": {
         "jsonparse": "^1.2.0",
         "through": ">=2.2.7 <3"
@@ -32351,14 +31873,6 @@
       "version": "2.0.4",
       "license": "CC0-1.0"
     },
-    "node_modules/media-query-parser": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/media-query-parser/-/media-query-parser-2.0.2.tgz",
-      "integrity": "sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      }
-    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "license": "MIT",
@@ -34492,11 +34006,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/modern-ahocorasick": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/modern-ahocorasick/-/modern-ahocorasick-1.1.0.tgz",
-      "integrity": "sha512-sEKPVl2rM+MNVkGQt3ChdmD8YsigmXdn5NifZn6jiwn9LRJpWm8F3guhaqrJT/JOat6pwpbXEk6kv+b9DMIjsQ=="
-    },
     "node_modules/module-error": {
       "version": "1.0.2",
       "license": "MIT",
@@ -37813,11 +37322,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/outdent": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/outdent/-/outdent-0.8.0.tgz",
-      "integrity": "sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A=="
-    },
     "node_modules/overlap-area": {
       "version": "1.1.0",
       "license": "MIT",
@@ -37825,133 +37329,6 @@
         "@daybrush/utils": "^1.7.1"
       }
     },
-    "node_modules/ox": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ox/-/ox-0.1.2.tgz",
-      "integrity": "sha512-ak/8K0Rtphg9vnRJlbOdaX9R7cmxD2MiSthjWGaQdMk3D7hrAlDoM+6Lxn7hN52Za3vrXfZ7enfke/5WjolDww==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/wevm"
-        }
-      ],
-      "dependencies": {
-        "@adraffy/ens-normalize": "^1.10.1",
-        "@noble/curves": "^1.6.0",
-        "@noble/hashes": "^1.5.0",
-        "@scure/bip32": "^1.5.0",
-        "@scure/bip39": "^1.4.0",
-        "abitype": "^1.0.6",
-        "eventemitter3": "5.0.1"
-      },
-      "peerDependencies": {
-        "typescript": ">=5.4.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ox/node_modules/@adraffy/ens-normalize": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.11.0.tgz",
-      "integrity": "sha512-/3DDPKHqqIqxUULp8yP4zODUY1i+2xvVWsv8A79xGWdCAG+8sb0hRh0Rk2QyOJUnnbyPUAZYcpBuRe3nS2OIUg=="
-    },
-    "node_modules/ox/node_modules/@noble/curves": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.7.0.tgz",
-      "integrity": "sha512-UTMhXK9SeDhFJVrHeUJ5uZlI6ajXg10O6Ddocf9S6GjbSBVZsJo88HzKwXznNfGpMTRDyJkqMjNDPYgf0qFWnw==",
-      "dependencies": {
-        "@noble/hashes": "1.6.0"
-      },
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/@noble/curves/node_modules/@noble/hashes": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.6.0.tgz",
-      "integrity": "sha512-YUULf0Uk4/mAA89w+k3+yUYh6NrEvxZa5T6SY3wlMvE2chHkxFUUIDI8/XW1QSC357iA5pSnqt7XEhvFOqmDyQ==",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/@noble/hashes": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.6.1.tgz",
-      "integrity": "sha512-pq5D8h10hHBjyqX+cfBm0i8JUXJ0UhczFc4r74zbuT9XgewFo2E3J1cOaGtdZynILNmQ685YWGzGE1Zv6io50w==",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/@scure/base": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.2.1.tgz",
-      "integrity": "sha512-DGmGtC8Tt63J5GfHgfl5CuAXh96VF/LD8K9Hr/Gv0J2lAoRGlPOMpqMpMbCTOoOJMZCk2Xt+DskdDyn6dEFdzQ==",
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/@scure/bip32": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.6.0.tgz",
-      "integrity": "sha512-82q1QfklrUUdXJzjuRU7iG7D7XiFx5PHYVS0+oeNKhyDLT7WPqs6pBcM2W5ZdwOwKCwoE1Vy1se+DHjcXwCYnA==",
-      "dependencies": {
-        "@noble/curves": "~1.7.0",
-        "@noble/hashes": "~1.6.0",
-        "@scure/base": "~1.2.1"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/@scure/bip39": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.5.0.tgz",
-      "integrity": "sha512-Dop+ASYhnrwm9+HA/HwXg7j2ZqM6yk2fyLWb5znexjctFY3+E+eU8cIWI0Pql0Qx4hPZCijlGq4OL71g+Uz30A==",
-      "dependencies": {
-        "@noble/hashes": "~1.6.0",
-        "@scure/base": "~1.2.1"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/abitype": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/abitype/-/abitype-1.0.7.tgz",
-      "integrity": "sha512-ZfYYSktDQUwc2eduYu8C4wOs+RDPmnRYMh7zNfzeMtGGgb0U+6tLGjixUic6mXf5xKKCcgT5Qp6cv39tOARVFw==",
-      "funding": {
-        "url": "https://github.com/sponsors/wevm"
-      },
-      "peerDependencies": {
-        "typescript": ">=5.0.4",
-        "zod": "^3 >=3.22.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        },
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ox/node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
-    },
     "node_modules/p-defer": {
       "version": "3.0.0",
       "license": "MIT",
@@ -39520,6 +38897,7 @@
     "node_modules/preact": {
       "version": "10.15.1",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -40084,6 +39462,19 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-cookie": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.2.2.tgz",
+      "integrity": "sha512-e+hi6axHcw9VODoeVu8WyMWyoosa1pzpyjfvrLdF7CexfU+WSGZdDuRfHa4RJgTpfv3ZjdIpHE14HpYBieHFhg==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.5",
+        "hoist-non-react-statics": "^3.3.2",
+        "universal-cookie": "^7.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-css-styled": {
       "version": "1.1.9",
       "license": "MIT",
@@ -41040,30 +40431,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-remove-scroll": {
-      "version": "2.5.7",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
-      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.4",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-remove-scroll-bar": {
       "version": "2.3.4",
       "license": "MIT",
@@ -41088,11 +40455,6 @@
       "version": "2.4.1",
       "license": "0BSD"
     },
-    "node_modules/react-remove-scroll/node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
-    },
     "node_modules/react-responsive": {
       "version": "9.0.2",
       "license": "MIT",
@@ -42144,6 +41506,7 @@
     "node_modules/rpc-websockets": {
       "version": "7.5.1",
       "license": "LGPL-3.0-only",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.2",
         "eventemitter3": "^4.0.7",
@@ -42162,6 +41525,7 @@
     "node_modules/rpc-websockets/node_modules/ws": {
       "version": "8.13.0",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -43569,7 +42933,8 @@
     },
     "node_modules/superstruct": {
       "version": "0.14.2",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
@@ -43978,7 +43343,8 @@
       }
     },
     "node_modules/text-encoding-utf-8": {
-      "version": "1.0.2"
+      "version": "1.0.2",
+      "peer": true
     },
     "node_modules/text-table": {
       "version": "0.2.0",
@@ -45453,6 +44819,23 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/universal-cookie": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.2.2.tgz",
+      "integrity": "sha512-fMiOcS3TmzP2x5QV26pIH3mvhexLIT0HmPa3V7Q7knRfT9HG6kTwq02HZGLPw0sAOXrAmotElGRvTLCMbJsvxQ==",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.7.2"
+      }
+    },
+    "node_modules/universal-cookie/node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "license": "MIT",
@@ -46178,53 +45561,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/wagmi": {
-      "version": "1.4.13",
-      "resolved": "https://registry.npmjs.org/wagmi/-/wagmi-1.4.13.tgz",
-      "integrity": "sha512-AScVYFjqNt1wMgL99Bob7MLdhoTZ3XKiOZL5HVBdy4W1sh7QodA3gQ8IsmTuUrQ7oQaTxjiXEhwg7sWNrPBvJA==",
-      "funding": [
-        {
-          "type": "gitcoin",
-          "url": "https://wagmi.sh/gitcoin"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/wagmi-dev"
-        }
-      ],
-      "dependencies": {
-        "@tanstack/query-sync-storage-persister": "^4.27.1",
-        "@tanstack/react-query": "^4.28.0",
-        "@tanstack/react-query-persist-client": "^4.28.0",
-        "@wagmi/core": "1.4.13",
-        "abitype": "0.8.7",
-        "use-sync-external-store": "^1.2.0"
-      },
-      "peerDependencies": {
-        "react": ">=17.0.0",
-        "typescript": ">=5.0.4",
-        "viem": ">=0.3.35"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/wagmi/node_modules/abitype": {
-      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/abitype/-/abitype-0.8.7.tgz",
-      "integrity": "sha512-wQ7hV8Yg/yKmGyFpqrNZufCxbszDe5es4AZGYPBitocfSqXtjrTG9JMWFcc4N30ukl2ve48aBTwt7NJxVQdU3w==",
-      "peerDependencies": {
-        "typescript": ">=5.0.4",
-        "zod": "^3 >=3.19.1"
-      },
-      "peerDependenciesMeta": {
-        "zod": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/walker": {
       "version": "1.0.8",
       "license": "Apache-2.0",
@@ -46539,57 +45875,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/webauthn-p256": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/webauthn-p256/-/webauthn-p256-0.0.10.tgz",
-      "integrity": "sha512-EeYD+gmIT80YkSIDb2iWq0lq2zbHo1CxHlQTeJ+KkCILWpVy3zASH3ByD4bopzfk0uCwXxLqKGLqp2W4O28VFA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/wevm"
-        }
-      ],
-      "dependencies": {
-        "@noble/curves": "^1.4.0",
-        "@noble/hashes": "^1.4.0"
-      }
-    },
-    "node_modules/webauthn-p256/node_modules/@noble/curves": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.7.0.tgz",
-      "integrity": "sha512-UTMhXK9SeDhFJVrHeUJ5uZlI6ajXg10O6Ddocf9S6GjbSBVZsJo88HzKwXznNfGpMTRDyJkqMjNDPYgf0qFWnw==",
-      "dependencies": {
-        "@noble/hashes": "1.6.0"
-      },
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/webauthn-p256/node_modules/@noble/curves/node_modules/@noble/hashes": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.6.0.tgz",
-      "integrity": "sha512-YUULf0Uk4/mAA89w+k3+yUYh6NrEvxZa5T6SY3wlMvE2chHkxFUUIDI8/XW1QSC357iA5pSnqt7XEhvFOqmDyQ==",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/webauthn-p256/node_modules/@noble/hashes": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.6.1.tgz",
-      "integrity": "sha512-pq5D8h10hHBjyqX+cfBm0i8JUXJ0UhczFc4r74zbuT9XgewFo2E3J1cOaGtdZynILNmQ685YWGzGE1Zv6io50w==",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/webcrypto-core": {
       "version": "1.7.5",
       "dev": true,
diff --git a/package.json b/package.json
index 359c53078..d6894d7b1 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/react-kit": "^0.35.1-alpha.7",
+    "@bosonprotocol/react-kit": "^0.36.0-alpha.16",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.7.0",
diff --git a/src/components/addressInputPanel/index.tsx b/src/components/addressInputPanel/index.tsx
index 73895d8cb..2a9572c63 100644
--- a/src/components/addressInputPanel/index.tsx
+++ b/src/components/addressInputPanel/index.tsx
@@ -14,7 +14,7 @@ const InputPanel = styled.div`
   ${flexColumnNoWrap};
   position: relative;
   border-radius: 1.25rem;
-  background-color: ${colors.darkGrey};
+  background-color: ${colors.greyDark};
   z-index: 1;
   width: 100%;
 `;
@@ -30,7 +30,7 @@ const ContainerRow = styled.div<{ error: boolean }>`
   transition:
     border-color 300ms ${({ error }) => (error ? "step-end" : "step-start")},
     color 500ms ${({ error }) => (error ? "step-end" : "step-start")};
-  background-color: ${colors.darkGrey};
+  background-color: ${colors.greyDark};
 `;
 
 const InputContainer = styled.div`
@@ -44,7 +44,7 @@ const Input = styled.input<{ error?: boolean }>`
   border: none;
   flex: 1 1 auto;
   width: 0;
-  background-color: ${colors.darkGrey};
+  background-color: ${colors.greyDark};
   transition: color 300ms ${({ error }) => (error ? "step-end" : "step-start")};
   color: ${({ error, theme }) =>
     error ? theme.accentFailure : theme.textPrimary};
@@ -111,7 +111,7 @@ export default function AddressInputPanel({
           <AutoColumn $gap="md">
             <Grid>
               <Typography
-                color={colors.lightGrey}
+                color={colors.greyLight}
                 fontWeight={500}
                 fontSize={14}
               >
diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx
index 0e2b032a4..a9f12f9fe 100644
--- a/src/components/app/index.tsx
+++ b/src/components/app/index.tsx
@@ -1,10 +1,11 @@
+import { BosonThemeProvider } from "@bosonprotocol/react-kit";
 import { IconContext } from "phosphor-react";
 import { ThemeProvider } from "styled-components";
 
 import ModalProvider from "../../components/modal/ModalProvider";
 import { getCurrentViewMode, ViewMode } from "../../lib/viewMode";
 import ChatProvider from "../../pages/chat/ChatProvider/ChatProvider";
-import theme from "../../theme";
+import theme, { themeVars } from "../../theme";
 import CookieBanner from "../cookie/CookieBanner";
 import { AppView } from "./AppView";
 import { Container } from "./index.styles";
@@ -39,8 +40,11 @@ export default function App({
         }}
       >
         <ChatProvider>
-          <ModalProvider>
-            <>
+          <BosonThemeProvider
+            roundness={themeVars.roundness}
+            theme={themeVars.themeKey}
+          >
+            <ModalProvider>
               <Container>
                 <AppView
                   wrapper={Wrapper}
@@ -53,8 +57,8 @@ export default function App({
                 </AppView>
               </Container>
               <CookieBanner isDapp={getCurrentViewMode() === ViewMode.DAPP} />
-            </>
-          </ModalProvider>
+            </ModalProvider>
+          </BosonThemeProvider>
         </ChatProvider>
       </IconContext.Provider>
     </ThemeProvider>
diff --git a/src/components/avatar/fallback-avatar.tsx b/src/components/avatar/fallback-avatar.tsx
index 59de29377..cecaa2882 100644
--- a/src/components/avatar/fallback-avatar.tsx
+++ b/src/components/avatar/fallback-avatar.tsx
@@ -4,9 +4,9 @@ import styled from "styled-components";
 import { colors } from "../../lib/styles/colors";
 
 const AddressImageContainer = styled.div<{ avatarSize: number }>`
-  border: ${({ avatarSize }) => avatarSize / 40}px solid ${colors.lightGrey};
+  border: ${({ avatarSize }) => avatarSize / 40}px solid ${colors.greyLight};
   border-radius: 50%;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   margin-bottom: 5px;
   display: flex;
 `;
diff --git a/src/components/breadcrumbs/Breadcrumbs.tsx b/src/components/breadcrumbs/Breadcrumbs.tsx
index c2a4309d3..9d60d92f7 100644
--- a/src/components/breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/breadcrumbs/Breadcrumbs.tsx
@@ -49,7 +49,7 @@ function Breadcrumbs({ steps, margin }: Props) {
           <Typography
             fontSize="0.875rem"
             fontWeight="600"
-            color={step.hightlighted ? "var(--accent)" : colors.darkGrey}
+            color={step.hightlighted ? "var(--accent)" : colors.greyDark}
             margin="0 0.3125rem 0 0"
           >
             {step.label}
@@ -57,7 +57,7 @@ function Breadcrumbs({ steps, margin }: Props) {
           {isNotFinalStep(step.id) && (
             <StyledCaret
               size={18}
-              color={step.hightlighted ? "var(--accent)" : colors.darkGrey}
+              color={step.hightlighted ? "var(--accent)" : colors.greyDark}
             />
           )}
         </Button>
diff --git a/src/components/collapse/Collapse.tsx b/src/components/collapse/Collapse.tsx
index 0610eeeea..bfb7951f8 100644
--- a/src/components/collapse/Collapse.tsx
+++ b/src/components/collapse/Collapse.tsx
@@ -21,7 +21,7 @@ const ArrowContainer = styled.div`
   font-size: 1.5rem;
 `;
 const CollapseWrapper = styled.div`
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   padding: 1rem;
 `;
 
diff --git a/src/components/currencyInputPanel/FiatValue.tsx b/src/components/currencyInputPanel/FiatValue.tsx
index ecb23ebd6..1e8873c9d 100644
--- a/src/components/currencyInputPanel/FiatValue.tsx
+++ b/src/components/currencyInputPanel/FiatValue.tsx
@@ -23,9 +23,9 @@ export function FiatValue({
     if (!priceImpact) return undefined;
     if (priceImpact.lessThan("0")) return colors.green;
     const severity = warningSeverity(priceImpact);
-    if (severity < 1) return colors.secondary;
+    if (severity < 1) return colors.violet;
     if (severity < 3) return "yellow";
-    return colors.darkRed;
+    return colors.redDark;
   }, [priceImpact]);
 
   if (fiatValue.isLoading) {
@@ -34,7 +34,7 @@ export function FiatValue({
 
   return (
     <Grid gap="1rem">
-      <Typography color={colors.secondary}>
+      <Typography color={colors.violet}>
         {fiatValue.data ? (
           formatNumber(fiatValue.data, NumberType.FiatTokenPrice)
         ) : (
diff --git a/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx
index bd0757c6f..37cdc1028 100644
--- a/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx
+++ b/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx
@@ -63,7 +63,7 @@ const CurrencySelect = styled(Button)<{
   min-width: 175px;
   align-items: center;
   background-color: ${({ selected }) =>
-    selected ? colors.black : colors.secondary};
+    selected ? colors.black : colors.violet};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ selected }) =>
     selected ? "none" : "0px 6px 10px rgba(0, 0, 0, 0.075)"};
@@ -97,7 +97,7 @@ const CurrencySelect = styled(Button)<{
     &:hover,
     &:active {
       background-color: ${({ selected }) =>
-        selected ? colors.darkGrey : colors.secondary};
+        selected ? colors.greyDark : colors.violet};
       color: ${colors.white};
     }
 
@@ -115,11 +115,11 @@ const CurrencySelect = styled(Button)<{
     }
 
     &:hover:before {
-      background-color: ${opacify(8, colors.darkGrey)};
+      background-color: ${opacify(8, colors.greyDark)};
     }
 
     &:active:before {
-      background-color: ${opacify(24, colors.lightGrey)};
+      background-color: ${opacify(24, colors.greyLight)};
     }
   }
 
@@ -135,13 +135,13 @@ const InputRow = styled.div`
 const LabelRow = styled.div`
   ${flexRowNoWrap};
   align-items: center;
-  color: ${colors.lightGrey};
+  color: ${colors.greyLight};
   font-size: 0.75rem;
   line-height: 1rem;
 
   span:hover {
     cursor: pointer;
-    color: ${darken(0.2, colors.lightGrey)};
+    color: ${darken(0.2, colors.greyLight)};
   }
 `;
 
@@ -167,7 +167,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   }
 
   path {
-    stroke: ${({ selected }) => (selected ? colors.primary : colors.white)};
+    stroke: ${({ selected }) => (selected ? colors.green : colors.white)};
     stroke-width: 2px;
   }
 `;
@@ -182,7 +182,7 @@ const StyledTokenName = styled.span<{ active?: boolean }>`
 const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: transparent;
   border: none;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
@@ -285,7 +285,7 @@ export default function SwapCurrencyInputPanel({
         </FixedContainer>
       )}
       <Container hideInput={hideInput}>
-        <Typography color={colors.darkGrey}>{label}</Typography>
+        <Typography color={colors.greyDark}>{label}</Typography>
         <InputRow
           style={hideInput ? { padding: "0", borderRadius: "8px" } : {}}
         >
diff --git a/src/components/datepicker/DatePicker.style.tsx b/src/components/datepicker/DatePicker.style.tsx
index 53c497cb1..be5053271 100644
--- a/src/components/datepicker/DatePicker.style.tsx
+++ b/src/components/datepicker/DatePicker.style.tsx
@@ -104,7 +104,7 @@ export const CalendarRow = styled.div`
 export const CalendarHeader = styled(CalendarFlex)`
   margin-bottom: 0.5rem;
   > div {
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
     font-size: 0.875rem;
     font-weight: 600;
   }
@@ -136,7 +136,7 @@ export const CalendarDay = styled(CalendarCell)<{
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: ${colors.lightGrey};
+    background: ${colors.greyLight};
     border-radius: 50%;
     width: 0;
     height: 0;
@@ -170,7 +170,7 @@ export const CalendarDay = styled(CalendarCell)<{
     active &&
     css`
       &:after {
-        background: ${colors.secondary};
+        background: ${colors.violet};
         width: 2.25rem;
         height: 2.25rem;
         z-index: 2;
@@ -185,7 +185,7 @@ export const CalendarDay = styled(CalendarCell)<{
     !active &&
     css`
       &:after {
-        background: ${colors.secondary};
+        background: ${colors.violet};
         width: 1.75rem;
         height: 1.75rem;
         z-index: 2;
diff --git a/src/components/detail/Detail.style.tsx b/src/components/detail/Detail.style.tsx
index d669b2bab..6896e4968 100644
--- a/src/components/detail/Detail.style.tsx
+++ b/src/components/detail/Detail.style.tsx
@@ -37,7 +37,7 @@ export const CommitStepWrapper = styled.div`
 export const CommitStep = styled.div`
   position: relative;
   padding: 1rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   &:not(:last-child) {
     &:before {
       position: absolute;
@@ -50,7 +50,7 @@ export const CommitStep = styled.div`
       transform: translate(-50%, 0);
       border-left: 30rem solid transparent;
       border-right: 30rem solid transparent;
-      border-top: 1rem solid ${colors.lightGrey};
+      border-top: 1rem solid ${colors.greyLight};
     }
 
     &:after {
@@ -85,7 +85,7 @@ export const CommitStep = styled.div`
         left: initial;
         transform: translate(0%, -50%);
         border-top: 10rem solid transparent;
-        border-left: 1rem solid ${colors.lightGrey};
+        border-left: 1rem solid ${colors.greyLight};
         border-bottom: 10rem solid transparent;
         border-right: none;
       }
@@ -269,7 +269,7 @@ export const Table = styled.table<{
             color: inherit;
           `
         : css`
-            color: ${colors.darkGrey};
+            color: ${colors.greyDark};
           `}
   }
   tr {
@@ -472,7 +472,7 @@ export const RedeemLeftButton = styled.button`
   cursor: pointer;
   transition: all 150ms ease-in-out;
   &:hover {
-    background: ${colors.lightGrey};
+    background: ${colors.greyLight};
   }
 
   ${miniButton}
@@ -489,12 +489,12 @@ export const RaiseProblemButton = styled(Button)`
     padding: 0.75rem 1rem;
 
     font-weight: 600;
-    color: ${colors.accent};
+    color: ${colors.violet};
     cursor: pointer;
     transition: all 150ms ease-in-out;
     &:hover:not(:disabled) {
       color: ${colors.red};
-      background: ${colors.lightGrey};
+      background: ${colors.greyLight};
     }
     svg {
       margin-left: 1rem;
@@ -504,7 +504,7 @@ export const RaiseProblemButton = styled(Button)`
 export const StyledCancelButton = RaiseProblemButton;
 export const ContactSellerButton = styled(RaiseProblemButton)`
   && {
-    color: ${colors.secondary};
+    color: ${colors.violet};
   }
 `;
 
diff --git a/src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx b/src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx
index daff3b641..c2d997ab1 100644
--- a/src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx
+++ b/src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx
@@ -7,6 +7,7 @@ import { BosonRoutes } from "lib/routing/routes";
 import { useKeepQueryParamsNavigate } from "lib/utils/hooks/useKeepQueryParamsNavigate";
 import { VariantV1 } from "pages/products/types";
 import React, { ReactNode } from "react";
+import { themeVars } from "theme";
 
 import { useCurationLists } from "../../../lib/utils/hooks/useCurationLists";
 
@@ -28,6 +29,7 @@ export const BasicCommitDetailWidget: React.FC<
     <ExternalCommitDetailView
       providerProps={{
         ...CONFIG,
+        sendDeliveryInfoThroughXMTP: true,
         envName: config.envName,
         configId: config.envConfig.configId,
         walletConnectProjectId: CONFIG.walletConnect.projectId,
@@ -40,7 +42,8 @@ export const BasicCommitDetailWidget: React.FC<
           curationLists?.sellerCurationList?.join(",") || "",
         withReduxProvider: false,
         withCustomReduxContext: false,
-        withWeb3React: false
+        withWeb3React: false,
+        roundness: themeVars.roundness
       }}
       selectedVariant={selectedVariant}
       showPriceAsterisk={isPreview}
@@ -53,11 +56,6 @@ export const BasicCommitDetailWidget: React.FC<
           exchangePolicyCheckResult: exchangePolicyCheckResult
         });
       }}
-      onPurchaseOverview={() => {
-        showModal(MODAL_TYPES.WHAT_IS_REDEEM, {
-          title: "Commit to Buy and Redeem"
-        });
-      }}
       onClickBuyOrSwap={({ swapParams }) => {
         navigate({ pathname: BosonRoutes.Swap, search: swapParams });
       }}
diff --git a/src/components/detail/DetailWidget/CommitDetailWidget.tsx b/src/components/detail/DetailWidget/CommitDetailWidget.tsx
index 63fc201f3..4f6237d8c 100644
--- a/src/components/detail/DetailWidget/CommitDetailWidget.tsx
+++ b/src/components/detail/DetailWidget/CommitDetailWidget.tsx
@@ -1,12 +1,12 @@
 import {
-  CommitButton,
   ExternalCommitDetailView,
   extractUserFriendlyError,
   getHasUserRejectedTx,
   getIsOfferExpired,
   Provider,
   RedeemButton,
-  subgraph
+  subgraph,
+  ThemedCommitButton
 } from "@bosonprotocol/react-kit";
 import * as Sentry from "@sentry/browser";
 import { useConfigContext } from "components/config/ConfigContext";
@@ -57,6 +57,7 @@ import { VariantV1 } from "pages/products/types";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import styled from "styled-components";
+import { themeVars } from "theme";
 
 import { useCurationLists } from "../../../lib/utils/hooks/useCurationLists";
 import bosonSnapshotGateAbi from "./BosonSnapshotGate/BosonSnapshotGate.json";
@@ -64,7 +65,7 @@ import { BosonSnapshotGate__factory } from "./BosonSnapshotGate/typechain/factor
 const StyledRedeemButton = styled(RedeemButton)`
   width: 100%;
 `;
-const containerBreakpoint = "450px";
+const containerBreakpoint = "550px";
 const CTAsGrid = styled(Grid)`
   .show-in-larger-view {
     display: none;
@@ -231,9 +232,8 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
         disabled={disabled}
         data-commit-proxy-address
         style={{ height: "3.5rem" }}
-        withBosonStyle
       >
-        Commit <small>Step 1/2</small>
+        Buy <small>Step 1/2</small>
       </BosonButton>
     );
   };
@@ -464,7 +464,9 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
         externalConnectedSigner: signer,
         withReduxProvider: false,
         withWeb3React: false,
-        withCustomReduxContext: false
+        withCustomReduxContext: false,
+        sendDeliveryInfoThroughXMTP: true,
+        roundness: themeVars.roundness
       }}
       selectedVariant={selectedVariant}
       showPriceAsterisk={isPreview}
@@ -477,11 +479,6 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
           exchangePolicyCheckResult: exchangePolicyCheckResult
         });
       }}
-      onPurchaseOverview={() => {
-        showModal(MODAL_TYPES.WHAT_IS_REDEEM, {
-          title: "Commit to Buy and Redeem"
-        });
-      }}
       onClickBuyOrSwap={({ swapParams }) => {
         navigate({ pathname: BosonRoutes.Swap, search: swapParams });
       }}
@@ -513,14 +510,13 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
                   {showCommitProxyButton ? (
                     <CommitProxyButton />
                   ) : (
-                    <CommitButton
+                    <ThemedCommitButton
                       coreSdkConfig={{
                         envName: config.envName,
                         configId: config.envConfig.configId,
                         web3Provider: signer?.provider as Provider,
                         metaTx: config.metaTx
                       }}
-                      variant="primaryFill"
                       isPauseCommitting={!address}
                       buttonRef={commitButtonRef}
                       onGetSignerAddress={handleOnGetSignerAddress}
@@ -533,7 +529,6 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
                       onPendingTransaction={onCommitPendingTransaction}
                       onSuccess={onCommitSuccess}
                       extraInfo="Step 1/2"
-                      withBosonStyle
                     />
                   )}
                 </>
@@ -544,7 +539,7 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
               fontSize="0.8rem"
               marginTop="0.25rem"
             >
-              By proceeding to Commit, I agree to the{" "}
+              By proceeding to Buy, I agree to the{" "}
               <span
                 style={{
                   fontSize: "inherit",
@@ -566,7 +561,6 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
               metaTx: config.envConfig.metaTx
             }}
             disabled
-            withBosonStyle
             exchangeId="0"
             extraInfo="Step 2/2"
             variant="primaryFill"
@@ -578,7 +572,7 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
           fontSize="0.8rem"
           marginTop="0.25rem"
         >
-          By proceeding to Commit, I agree to the{" "}
+          By proceeding to Buy, I agree to the{" "}
           <span
             style={{
               fontSize: "inherit",
diff --git a/src/components/detail/DetailWidget/ExchangeDetailWidget.tsx b/src/components/detail/DetailWidget/ExchangeDetailWidget.tsx
index 33d022d60..d03aed85f 100644
--- a/src/components/detail/DetailWidget/ExchangeDetailWidget.tsx
+++ b/src/components/detail/DetailWidget/ExchangeDetailWidget.tsx
@@ -197,11 +197,6 @@ export const ExchangeDetailWidget: React.FC<ExchangeDetailWidgetProps> = ({
           exchangePolicyCheckResult: exchangePolicyCheckResult
         });
       }}
-      onPurchaseOverview={() => {
-        showModal(MODAL_TYPES.WHAT_IS_REDEEM, {
-          title: "Commit to Buy and Redeem"
-        });
-      }}
       topChildren={
         isExchangeExpired ? (
           <Grid
@@ -225,12 +220,12 @@ export const ExchangeDetailWidget: React.FC<ExchangeDetailWidgetProps> = ({
           >
             <Typography
               tag="p"
-              style={{ color: colors.darkGrey, margin: 0 }}
+              style={{ color: colors.greyDark, margin: 0 }}
               fontSize="0.75rem"
             >
               You can withdraw your funds here
             </Typography>
-            <ArrowRight size={18} color={colors.darkGrey} />
+            <ArrowRight size={18} color={colors.greyDark} />
           </Grid>
         ) : isToRedeem ? (
           <RedeemLeftButton style={{ paddingTop: 0, paddingBottom: 0 }}>
@@ -332,7 +327,6 @@ export const ExchangeDetailWidget: React.FC<ExchangeDetailWidgetProps> = ({
                 data-config-id={config.envConfig.configId}
                 data-account={address}
                 data-with-external-signer="true"
-                withBosonStyle
                 style={{ width: "100%" }}
               >
                 <span>Redeem</span>
diff --git a/src/components/dispute/GetStarted.tsx b/src/components/dispute/GetStarted.tsx
index 8e8dbe847..944d205d7 100644
--- a/src/components/dispute/GetStarted.tsx
+++ b/src/components/dispute/GetStarted.tsx
@@ -11,12 +11,12 @@ import { Typography } from "../ui/Typography";
 const FormButton = styled.button`
   border: none;
   background: none;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;
-  border-bottom: 1px solid ${colors.lightGrey};
+  border-bottom: 1px solid ${colors.greyLight};
   padding: 0;
   font-size: 1rem;
   font-family: ${defaultFontFamily};
@@ -52,7 +52,7 @@ function GetStarted({
         <Typography fontWeight="600" fontSize="2rem">
           Get started
         </Typography>
-        <Typography fontSize="1.25rem" color={colors.darkGrey}>
+        <Typography fontSize="1.25rem" color={colors.greyDark}>
           First, choose the issue you're facing with your exchange.
         </Typography>
       </div>
diff --git a/src/components/dispute/TellUsMore.tsx b/src/components/dispute/TellUsMore.tsx
index 958ba4b00..09bb8349e 100644
--- a/src/components/dispute/TellUsMore.tsx
+++ b/src/components/dispute/TellUsMore.tsx
@@ -13,12 +13,12 @@ import { Typography } from "../ui/Typography";
 const FormButton = styled.button`
   border: none;
   background: none;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;
-  border-bottom: 1px solid ${colors.lightGrey};
+  border-bottom: 1px solid ${colors.greyLight};
   padding: 0;
   font-size: 1rem;
   font-family: ${defaultFontFamily};
@@ -59,7 +59,7 @@ function TellUsMore({
         <Typography fontWeight="600" fontSize="2rem">
           Tell us more about your problem
         </Typography>
-        <Typography fontSize="1.25rem" color={colors.darkGrey}>
+        <Typography fontSize="1.25rem" color={colors.greyDark}>
           Choose from one of the problems listed below
         </Typography>
       </Grid>
diff --git a/src/components/disputeResolver/DisputeResolverAside.tsx b/src/components/disputeResolver/DisputeResolverAside.tsx
index c5074fcb6..262ba673e 100644
--- a/src/components/disputeResolver/DisputeResolverAside.tsx
+++ b/src/components/disputeResolver/DisputeResolverAside.tsx
@@ -38,7 +38,7 @@ const AsideLink = styled.li<{ $active?: boolean }>`
     color: ${colors.black};
   }
   svg:first-child {
-    fill: ${(props) => (props.$active ? colors.secondary : colors.black)};
+    fill: ${(props) => (props.$active ? colors.violet : colors.black)};
     width: 1.5rem;
     height: 1.5rem;
   }
@@ -85,7 +85,7 @@ export default function DRAside() {
                   <Icon
                     size={16}
                     weight={isActive ? "regular" : "thin"}
-                    color={isActive ? colors.black : colors.darkGrey}
+                    color={isActive ? colors.black : colors.greyDark}
                   />
                   {label}
                 </Grid>
diff --git a/src/components/disputeResolver/DisputeWrapper.tsx b/src/components/disputeResolver/DisputeWrapper.tsx
index 355916ccc..c38cbec0e 100644
--- a/src/components/disputeResolver/DisputeWrapper.tsx
+++ b/src/components/disputeResolver/DisputeWrapper.tsx
@@ -5,7 +5,7 @@ import { Typography } from "../ui/Typography";
 
 const DisputeResolverMain = styled.main`
   padding: 1.375rem 2.5rem 2.75rem 2.5rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   min-height: calc(100vh - 5.5rem);
 `;
 const DisputeResolverTitle = styled(Typography)`
diff --git a/src/components/disputeResolver/ManageDisputes/DisputesTable.styles.ts b/src/components/disputeResolver/ManageDisputes/DisputesTable.styles.ts
index 94370b5e3..cd9c0456d 100644
--- a/src/components/disputeResolver/ManageDisputes/DisputesTable.styles.ts
+++ b/src/components/disputeResolver/ManageDisputes/DisputesTable.styles.ts
@@ -9,7 +9,7 @@ export const Table = styled.table`
   border-collapse: collapse;
   th {
     font-weight: 600;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
     &:not([data-sortable]) {
       cursor: default !important;
     }
@@ -47,7 +47,7 @@ export const Table = styled.table`
     tr {
       &:hover {
         td {
-          background-color: ${colors.darkGrey}08;
+          background-color: ${colors.greyDark}08;
           cursor: pointer;
         }
       }
@@ -102,7 +102,7 @@ export const Pagination = styled.div`
 
 export const Span = styled.span`
   font-size: 0.75rem;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   &:not(:last-of-type) {
     margin-right: 1rem;
   }
diff --git a/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx b/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx
index 545ac4e4a..8711605cf 100644
--- a/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx
+++ b/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx
@@ -173,7 +173,7 @@ export default function DisputesTable({ disputes }: Props) {
               {emailAddress && (
                 <BosonButton
                   type="button"
-                  variant="accentInvertedNoBorder"
+                  variant="accentInverted"
                   size="small"
                   style={{
                     whiteSpace: "pre"
@@ -405,12 +405,10 @@ export default function DisputesTable({ disputes }: Props) {
                   themeVal="blank"
                   style={{
                     color:
-                      pageNumber === pageIndex
-                        ? colors.secondary
-                        : colors.black,
+                      pageNumber === pageIndex ? colors.violet : colors.black,
                     background:
                       pageNumber === pageIndex
-                        ? colors.lightGrey
+                        ? colors.greyLight
                         : "transparent"
                   }}
                   onClick={() => gotoPage(pageNumber)}
diff --git a/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx b/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx
index 995fe7738..a5073abaf 100644
--- a/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx
+++ b/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx
@@ -333,12 +333,10 @@ export default function DisputesTablePast({ disputes }: Props) {
                   themeVal="blank"
                   style={{
                     color:
-                      pageNumber === pageIndex
-                        ? colors.secondary
-                        : colors.black,
+                      pageNumber === pageIndex ? colors.violet : colors.black,
                     background:
                       pageNumber === pageIndex
-                        ? colors.lightGrey
+                        ? colors.greyLight
                         : "transparent"
                   }}
                   onClick={() => gotoPage(pageNumber)}
diff --git a/src/components/error/SimpleError.tsx b/src/components/error/SimpleError.tsx
index 90f072eda..d1b643519 100644
--- a/src/components/error/SimpleError.tsx
+++ b/src/components/error/SimpleError.tsx
@@ -7,7 +7,7 @@ import { Grid, GridProps } from "../ui/Grid";
 import { Typography } from "../ui/Typography";
 
 const StyledGrid = styled(Grid)`
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
 `;
 
 interface Props extends GridProps {
@@ -28,7 +28,7 @@ export default function SimpleError({
       padding="1.5rem"
       {...rest}
     >
-      <Warning color={colors.darkOrange} size={16} />
+      <Warning color={colors.orangeDark} size={16} />
       {children ? (
         children
       ) : (
diff --git a/src/components/exchange/Exchange.tsx b/src/components/exchange/Exchange.tsx
index 30cd52aa7..643299afc 100644
--- a/src/components/exchange/Exchange.tsx
+++ b/src/components/exchange/Exchange.tsx
@@ -242,6 +242,7 @@ export default function Exchange({
     <ExchangeCardWrapper $isCustomStoreFront={!!isCustomStoreFront}>
       <ExchangeCard
         onCardClick={handleOnCardClick}
+        isConnected={!!address}
         dataCard="exchange-card"
         id={offer.id}
         title={offer.metadata?.name || ""}
diff --git a/src/components/exchangePolicy/FairExchangePolicy.tsx b/src/components/exchangePolicy/FairExchangePolicy.tsx
index 398cb507f..f8aa6c542 100644
--- a/src/components/exchangePolicy/FairExchangePolicy.tsx
+++ b/src/components/exchangePolicy/FairExchangePolicy.tsx
@@ -36,7 +36,7 @@ const InfoListItem = styled.li`
 
   p {
     margin: 0;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
   }
 `;
 
diff --git a/src/components/expand/index.tsx b/src/components/expand/index.tsx
index d91d87570..a77385ce6 100644
--- a/src/components/expand/index.tsx
+++ b/src/components/expand/index.tsx
@@ -13,7 +13,7 @@ const ButtonContainer = styled(Grid)`
 `;
 
 const ExpandIcon = styled(CaretDown)<{ $isOpen: boolean }>`
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   transform: ${({ $isOpen }) => ($isOpen ? "rotate(180deg)" : "rotate(0deg)")};
   transition: transform 250ms;
 `;
diff --git a/src/components/footer/DrCenterFooter.tsx b/src/components/footer/DrCenterFooter.tsx
index 239f64e49..4c7411236 100644
--- a/src/components/footer/DrCenterFooter.tsx
+++ b/src/components/footer/DrCenterFooter.tsx
@@ -60,7 +60,7 @@ const NavigationLinks = styled.nav<INavigationLinks>`
     color: ${colors.white};
   }
   a:hover {
-    color: ${colors.secondary};
+    color: ${colors.violet};
   }
 
   ${breakpoint.xs} {
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index 68a0c06a0..2a52e5c62 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -108,7 +108,7 @@ const NavigationLinks = styled.nav<INavigationLinks>`
     color: var(--footerTextColor);
   }
   a:hover {
-    color: ${colors.accent};
+    color: ${colors.violet};
   }
 
   ${breakpoint.xs} {
diff --git a/src/components/form/BaseSelect.tsx b/src/components/form/BaseSelect.tsx
index 3b6edd9ad..932e3f92d 100644
--- a/src/components/form/BaseSelect.tsx
+++ b/src/components/form/BaseSelect.tsx
@@ -13,12 +13,12 @@ const customStyles = (error: any) => ({
     padding: "0.4rem 0.25rem",
     boxShadow: "none",
     ":hover": {
-      borderColor: colors.secondary,
+      borderColor: colors.violet,
       borderWidth: "1px"
     },
-    background: colors.lightGrey,
+    background: colors.greyLight,
     border: state.isFocused
-      ? `1px solid ${colors.secondary}`
+      ? `1px solid ${colors.violet}`
       : !checkIfValueIsEmpty(error)
         ? `1px solid ${colors.orange}`
         : `1px solid ${colors.border}`
@@ -35,12 +35,10 @@ const customStyles = (error: any) => ({
     opacity: state.isDisabled ? "0.5" : "1",
     background:
       state.isOptionSelected || state.isSelected || state.isFocused
-        ? colors.lightGrey
+        ? colors.greyLight
         : colors.white,
     color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
+      state.isOptionSelected || state.isSelected ? colors.violet : colors.black
   }),
   indicatorsContainer: () => ({
     display: "none"
diff --git a/src/components/form/CountrySelect.tsx b/src/components/form/CountrySelect.tsx
index e49224c6d..4f041058e 100644
--- a/src/components/form/CountrySelect.tsx
+++ b/src/components/form/CountrySelect.tsx
@@ -30,12 +30,12 @@ const customStyles = {
       padding: "0.4rem 0.25rem",
       boxShadow: "none",
       ":hover": {
-        borderColor: colors.secondary,
+        borderColor: colors.violet,
         borderWidth: "1px"
       },
-      background: colors.lightGrey,
+      background: colors.greyLight,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
+        ? `1px solid ${colors.violet}`
         : `1px solid ${colors.border}`,
       ...before
     };
@@ -52,12 +52,10 @@ const customStyles = {
     opacity: state.isDisabled ? "0.5" : "1",
     background:
       state.isOptionSelected || state.isSelected || state.isFocused
-        ? colors.lightGrey
+        ? colors.greyLight
         : colors.white,
     color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
+      state.isOptionSelected || state.isSelected ? colors.violet : colors.black
   }),
   indicatorSeparator: () => ({
     display: "none"
@@ -97,7 +95,7 @@ const PhoneWrapper = styled.div`
     width: 100%;
     padding: 1rem;
     gap: 0.5rem;
-    background: ${colors.lightGrey};
+    background: ${colors.greyLight};
     border: 1px solid ${colors.border};
     border-radius: 0;
     outline: none;
diff --git a/src/components/form/Field.styles.ts b/src/components/form/Field.styles.ts
index 8294c0c90..ac9943d50 100644
--- a/src/components/form/Field.styles.ts
+++ b/src/components/form/Field.styles.ts
@@ -17,7 +17,7 @@ export const FieldInput = styled.input<{ error?: any }>`
   padding: 1rem;
   gap: 0.5rem;
 
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   border: 1px solid ${colors.border};
   border-radius: 0;
   outline: none;
@@ -101,7 +101,7 @@ export const FileUploadWrapper = styled.div<{ $error: unknown }>`
     }
   }
 
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   border-radius: 0;
   outline: none;
 
@@ -118,7 +118,7 @@ export const FileUploadWrapper = styled.div<{ $error: unknown }>`
 
   &:focus,
   &:hover {
-    border: 1px solid ${colors.lightGrey};
+    border: 1px solid ${colors.greyLight};
   }
 
   /* prettier-ignore */
@@ -172,7 +172,7 @@ export const FieldTextArea = styled.textarea<{ error: unknown }>`
   gap: 0.5rem;
   font-family: ${defaultFontFamily};
 
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   border: 1px solid ${colors.border};
   border-radius: 0;
   outline: none;
@@ -257,7 +257,7 @@ export const FormFieldWrapper = styled(Grid)`
     margin: 0;
     font-weight: 400;
     font-size: 0.75rem;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
   }
 `;
 
@@ -277,7 +277,7 @@ export const CheckboxWrapper = styled.label<{ error?: unknown }>`
       + div {
         cursor: pointer;
         &:hover {
-          border: 1px solid ${colors.secondary};
+          border: 1px solid ${colors.violet};
           svg {
             opacity: 0.25;
           }
@@ -297,7 +297,7 @@ export const CheckboxWrapper = styled.label<{ error?: unknown }>`
     width: 1.5rem;
     height: 1.5rem;
 
-    background: ${colors.lightGrey};
+    background: ${colors.greyLight};
 
     margin-right: 0.5rem;
   }
@@ -330,11 +330,11 @@ export const CheckboxWrapper = styled.label<{ error?: unknown }>`
 `;
 
 export const VideoPreview = styled.video`
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   height: 100%;
   width: 100%;
   object-fit: contain;
 `;
 export const ImagePreview = styled.img`
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
 `;
diff --git a/src/components/form/FormField.tsx b/src/components/form/FormField.tsx
index 5a253e0d8..d8fd37b53 100644
--- a/src/components/form/FormField.tsx
+++ b/src/components/form/FormField.tsx
@@ -41,7 +41,7 @@ export default function FormField({
           {valueToCopy && (
             <Copy
               size={24}
-              color={colors.secondary}
+              color={colors.violet}
               style={{ cursor: "pointer" }}
               weight="light"
               onClick={() => {
diff --git a/src/components/form/InputColor.tsx b/src/components/form/InputColor.tsx
index e47618d9e..12082036c 100644
--- a/src/components/form/InputColor.tsx
+++ b/src/components/form/InputColor.tsx
@@ -14,7 +14,7 @@ const Container = styled.div`
   align-items: center;
   width: 100%;
   padding: 0.5rem 1rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   border: 1px solid ${colors.border};
   border-radius: 0;
   outline: none;
@@ -47,7 +47,7 @@ export default function InputColor({ name, ...props }: InputColorProps) {
           colorRef.current?.click();
         }}
       >
-        <span style={{ color: colors.darkGrey }}>
+        <span style={{ color: colors.greyDark }}>
           {field.value?.toUpperCase() || props.placeholder}
         </span>
         <ColorPicker name={name} ref={colorRef} />
diff --git a/src/components/form/Phone.tsx b/src/components/form/Phone.tsx
index 961b2c901..c2dfe1aad 100644
--- a/src/components/form/Phone.tsx
+++ b/src/components/form/Phone.tsx
@@ -37,12 +37,12 @@ const customStyles = {
       padding: "0.4rem 0.25rem",
       boxShadow: "none",
       ":hover": {
-        borderColor: colors.secondary,
+        borderColor: colors.violet,
         borderWidth: "1px"
       },
-      background: colors.lightGrey,
+      background: colors.greyLight,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
+        ? `1px solid ${colors.violet}`
         : `1px solid ${colors.border}`,
       ...before
     };
@@ -59,12 +59,10 @@ const customStyles = {
     opacity: state.isDisabled ? "0.5" : "1",
     background:
       state.isOptionSelected || state.isSelected || state.isFocused
-        ? colors.lightGrey
+        ? colors.greyLight
         : colors.white,
     color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
+      state.isOptionSelected || state.isSelected ? colors.violet : colors.black
   }),
   indicatorSeparator: () => ({
     display: "none"
@@ -112,7 +110,7 @@ export const PhoneWrapper = styled.div`
     width: 100%;
     padding: 1rem;
     gap: 0.5rem;
-    background: ${colors.lightGrey};
+    background: ${colors.greyLight};
     border: 1px solid ${colors.border};
     border-radius: 0;
     outline: none;
diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
index 070a2e2ed..fa10dee52 100644
--- a/src/components/form/Select.tsx
+++ b/src/components/form/Select.tsx
@@ -33,7 +33,7 @@ const customStyles = (
   singleValue: (provided: any, state: any) => {
     return {
       ...provided,
-      color: state.isDisabled ? colors.darkGrey : textColor,
+      color: state.isDisabled ? colors.greyDark : textColor,
       fontSize: "13.33px"
     };
   },
@@ -54,12 +54,12 @@ const customStyles = (
       padding: "0.4rem 0.25rem",
       boxShadow: "none",
       ":hover": {
-        borderColor: colors.secondary,
+        borderColor: colors.violet,
         borderWidth: "1px"
       },
       background: backgroundColor,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
+        ? `1px solid ${colors.violet}`
         : !checkIfValueIsEmpty(error)
           ? `1px solid ${colors.orange}`
           : `1px solid ${colors.border}`,
@@ -80,12 +80,10 @@ const customStyles = (
     opacity: state.isDisabled ? "0.5" : "1",
     background:
       state.isOptionSelected || state.isSelected || state.isFocused
-        ? colors.lightGrey
+        ? colors.greyLight
         : colors.white,
     color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
+      state.isOptionSelected || state.isSelected ? colors.violet : colors.black
   }),
   indicatorSeparator: () => ({
     display: "none"
@@ -112,10 +110,10 @@ const customStyles = (
 });
 
 const useSelectColors = () => {
-  const backgroundColor = colors.lightGrey;
+  const backgroundColor = colors.greyLight;
   const textColor = getColor1OverColor2WithContrast({
     color2: backgroundColor,
-    color1: useCSSVariable("--buttonTextColor") || colors.darkGrey
+    color1: useCSSVariable("--buttonTextColor") || colors.greyDark
   });
   return {
     backgroundColor,
diff --git a/src/components/form/Switch.tsx b/src/components/form/Switch.tsx
index 396e77d11..baa17caaa 100644
--- a/src/components/form/Switch.tsx
+++ b/src/components/form/Switch.tsx
@@ -33,17 +33,17 @@ const StyledSwitchRoot = styled(ReactSwitch.Root)`
   box-shadow: 0 2px 10px hsl(0 0% 0% / 0.141);
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   &[data-state="checked"] {
-    background-color: ${colors.secondary};
+    background-color: ${colors.violet};
   }
   &:disabled {
     cursor: not-allowed;
     ~ *,
     * {
-      color: ${colors.darkGrey};
+      color: ${colors.greyDark};
       cursor: not-allowed;
     }
     ${StyledSwitchThumb} {
-      background-color: ${colors.darkGrey};
+      background-color: ${colors.greyDark};
     }
   }
 `;
diff --git a/src/components/form/Upload/UploadedFile.tsx b/src/components/form/Upload/UploadedFile.tsx
index f60a4aabd..f79c2c33c 100644
--- a/src/components/form/Upload/UploadedFile.tsx
+++ b/src/components/form/Upload/UploadedFile.tsx
@@ -15,7 +15,7 @@ const AttachmentContainer = styled.div<{ $isLeftAligned: boolean }>`
   align-items: center;
   padding: 1rem;
   background-color: ${({ $isLeftAligned }) =>
-    $isLeftAligned ? "inherit" : colors.lightGrey};
+    $isLeftAligned ? "inherit" : colors.greyLight};
   ${({ $isLeftAligned }) =>
     $isLeftAligned ? `border: 2px solid ${colors.white}` : ""};
   color: ${({ $isLeftAligned }) => ($isLeftAligned ? "inherit" : colors.black)};
diff --git a/src/components/form/styles/TagsInput.styles.ts b/src/components/form/styles/TagsInput.styles.ts
index 06c0892f1..4312f40eb 100644
--- a/src/components/form/styles/TagsInput.styles.ts
+++ b/src/components/form/styles/TagsInput.styles.ts
@@ -25,7 +25,7 @@ export const Helper = styled.div`
   }
 `;
 export const TagWrapper = styled.div`
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   display: inline-block;
   padding: 0.5em 0.75em;
   margin-top: 1rem;
@@ -35,7 +35,7 @@ export const TagWrapper = styled.div`
 `;
 
 export const Close = styled.span`
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   border-radius: 50%;
   display: inline-flex;
   justify-content: center;
diff --git a/src/components/header/BurgerButton.tsx b/src/components/header/BurgerButton.tsx
index df40cc79b..e7376781c 100644
--- a/src/components/header/BurgerButton.tsx
+++ b/src/components/header/BurgerButton.tsx
@@ -29,7 +29,7 @@ type BurgerButtonProps = {
 export const BurgerButton: React.FC<BurgerButtonProps> = ({ onClick }) => {
   const backgroundColor = getColor1OverColor2WithContrast({
     color2: useCSSVariable("--headerBgColor") || colors.white,
-    color1: useCSSVariable("--accent") || colors.darkGrey,
+    color1: useCSSVariable("--accent") || colors.greyDark,
     contrastThreshold: 4
   });
   return (
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 5325022d8..6b33dd974 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -376,7 +376,7 @@ export const HeaderComponent = forwardRef<HTMLElement, Props>(
                   </LinkWithQuery>
                   {isSideCrossVisible && (
                     <X
-                      color={colors.secondary}
+                      color={colors.violet}
                       onClick={toggleMenu}
                       style={{
                         cursor: "pointer",
diff --git a/src/components/header/HeaderLinks.tsx b/src/components/header/HeaderLinks.tsx
index 4c80ff64c..c3c0f34fd 100644
--- a/src/components/header/HeaderLinks.tsx
+++ b/src/components/header/HeaderLinks.tsx
@@ -196,7 +196,7 @@ export default function HeaderLinks({
       $navigationBarPosition={navigationBarPosition}
       $hoverHeaderTextColor={getColor1OverColor2WithContrast({
         color2: useCSSVariable("--headerBgColor") || colors.white,
-        color1: useCSSVariable("--headerTextColor") || colors.darkGrey
+        color1: useCSSVariable("--headerTextColor") || colors.greyDark
       })}
     >
       {withSearch && (
diff --git a/src/components/header/accountDrawer/AuthenticatedHeader.tsx b/src/components/header/accountDrawer/AuthenticatedHeader.tsx
index 98c483dc9..f5b0c6c4c 100644
--- a/src/components/header/accountDrawer/AuthenticatedHeader.tsx
+++ b/src/components/header/accountDrawer/AuthenticatedHeader.tsx
@@ -211,9 +211,9 @@ export default function AuthenticatedHeader({ account }: { account: string }) {
     () => setShow(false),
     [setShow]
   );
-
+  const color2 = useCSSVariable("--buttonBgColor") || colors.green;
   const color = getColor1OverColor2WithContrast({
-    color2: useCSSVariable("--buttonBgColor") || colors.primary,
+    color2,
     color1: useCSSVariable("--textColor") || colors.black
   });
   const { isFiatLoading } = useFiatLinkContext();
diff --git a/src/components/header/accountDrawer/IconButton.tsx b/src/components/header/accountDrawer/IconButton.tsx
index 81a927512..838c561cf 100644
--- a/src/components/header/accountDrawer/IconButton.tsx
+++ b/src/components/header/accountDrawer/IconButton.tsx
@@ -214,7 +214,7 @@ export const IconWithConfirmTextButton = ({
   const width = showText ? dimensions.frame + dimensions.innerText + xPad : 32;
   const mouseLeaveTimeout = useRef<NodeJS.Timeout>();
   const color = getColor1OverColor2WithContrast({
-    color2: useCSSVariable("--buttonBgColor") || colors.primary,
+    color2: useCSSVariable("--buttonBgColor") || colors.green,
     color1: useCSSVariable("--textColor") || colors.black
   });
   return (
diff --git a/src/components/header/accountDrawer/index.tsx b/src/components/header/accountDrawer/index.tsx
index a3258e797..036cc2c20 100644
--- a/src/components/header/accountDrawer/index.tsx
+++ b/src/components/header/accountDrawer/index.tsx
@@ -59,7 +59,7 @@ const ScrimBackground = styled.div<{ open: boolean }>`
   position: fixed;
   width: 100%;
   height: 100%;
-  background-color: ${colors.darkGrey};
+  background-color: ${colors.greyDark};
 
   opacity: 0;
   pointer-events: none;
diff --git a/src/components/header/accountDrawer/miniPortfolio/PortfolioLogo.tsx b/src/components/header/accountDrawer/miniPortfolio/PortfolioLogo.tsx
index 6a7b8f150..1a12cd457 100644
--- a/src/components/header/accountDrawer/miniPortfolio/PortfolioLogo.tsx
+++ b/src/components/header/accountDrawer/miniPortfolio/PortfolioLogo.tsx
@@ -65,13 +65,13 @@ const CircleLogoImage = styled.img<{ size: string }>`
 
 const L2LogoContainer = styled.div<{ $hasSquareLogo?: boolean }>`
   background-color: ${({ $hasSquareLogo }) =>
-    $hasSquareLogo ? colors.lightGrey : colors.white};
+    $hasSquareLogo ? colors.greyLight : colors.white};
   border-radius: 2px;
   height: 16px;
   left: 60%;
   position: absolute;
   top: 60%;
-  outline: 2px solid ${colors.lightGrey};
+  outline: 2px solid ${colors.greyLight};
   width: 16px;
   display: flex;
   align-items: center;
diff --git a/src/components/header/identicon/index.tsx b/src/components/header/identicon/index.tsx
index ff6f2276b..e33d1320f 100644
--- a/src/components/header/identicon/index.tsx
+++ b/src/components/header/identicon/index.tsx
@@ -8,7 +8,7 @@ const StyledIdenticon = styled.div<{ $iconSize: number }>`
   height: ${({ $iconSize }) => `${$iconSize}px`};
   width: ${({ $iconSize }) => `${$iconSize}px`};
   border-radius: 50%;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   font-size: initial;
 `;
 
diff --git a/src/components/header/selector/ChainSelectorRow.tsx b/src/components/header/selector/ChainSelectorRow.tsx
index d552c46d4..302665d4a 100644
--- a/src/components/header/selector/ChainSelectorRow.tsx
+++ b/src/components/header/selector/ChainSelectorRow.tsx
@@ -28,7 +28,7 @@ const Container = styled.button<{ disabled: boolean }>`
 
   &:hover {
     background-color: ${({ disabled }) =>
-      disabled ? "none" : colors.lightGrey};
+      disabled ? "none" : colors.greyLight};
   }
 `;
 
@@ -47,7 +47,7 @@ const Status = styled.div`
 `;
 
 const CaptionText = styled.div`
-  /* color: ${colors.lightGrey}; */
+  /* color: ${colors.greyLight}; */
   font-size: 0.75rem;
   grid-column: 2;
   grid-row: 2;
@@ -89,11 +89,7 @@ export default function ChainSelectorRow({
       {isPending && <CaptionText>Approve in wallet</CaptionText>}
       <Status>
         {active && (
-          <Check
-            width={LOGO_SIZE}
-            height={LOGO_SIZE}
-            color={colors.secondary}
-          />
+          <Check width={LOGO_SIZE} height={LOGO_SIZE} color={colors.violet} />
         )}
         {!active && isPending && (
           <Spinner width={LOGO_SIZE} height={LOGO_SIZE} />
diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts
index ab65bdb1e..247614524 100644
--- a/src/components/header/styles.ts
+++ b/src/components/header/styles.ts
@@ -16,7 +16,7 @@ export const ClickableStyle = css`
 export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>`
   // Firefox scrollbar styling
   scrollbar-width: thin;
-  scrollbar-color: ${colors.lightGrey} transparent;
+  scrollbar-color: ${colors.greyLight} transparent;
   height: 100%;
 
   // safari and chrome scrollbar styling
@@ -38,7 +38,7 @@ export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>`
   }
 
   &::-webkit-scrollbar-thumb {
-    background: ${colors.lightGrey};
+    background: ${colors.greyLight};
     border-radius: 8px;
   }
 `;
diff --git a/src/components/header/walletModal/Option.tsx b/src/components/header/walletModal/Option.tsx
index 026640d33..41d595c95 100644
--- a/src/components/header/walletModal/Option.tsx
+++ b/src/components/header/walletModal/Option.tsx
@@ -116,22 +116,19 @@ export default function Option({ connection }: OptionProps) {
   const isCurrentOptionPending =
     isSomeOptionPending && activationState.connection.type === connection.type;
   const headerTextColor = getColor1OverColor2WithContrast({
-    color2: useCSSVariable("--secondaryBgColor") || colors.secondary,
+    color2: useCSSVariable("--secondaryBgColor") || colors.violet,
     color1: useCSSVariable("--textColor") || colors.black
   });
   const hoverHeaderBackground = getColor1OverColor2WithContrast({
-    color2: useCSSVariable("--secondaryBgColor") || colors.secondary,
-    color1: darken(
-      0.2,
-      useCSSVariable("--secondaryBgColor") || colors.secondary
-    ),
+    color2: useCSSVariable("--secondaryBgColor") || colors.violet,
+    color1: darken(0.2, useCSSVariable("--secondaryBgColor") || colors.violet),
     defaultDarkColor1: darken(
       0.75,
-      useCSSVariable("--secondaryBgColor") || colors.secondary
+      useCSSVariable("--secondaryBgColor") || colors.violet
     ),
     defaultLightColor1: lighten(
       0.1,
-      useCSSVariable("--secondaryBgColor") || colors.secondary
+      useCSSVariable("--secondaryBgColor") || colors.violet
     )
   });
   return (
diff --git a/src/components/header/walletModal/index.tsx b/src/components/header/walletModal/index.tsx
index fef9287a3..3c52326de 100644
--- a/src/components/header/walletModal/index.tsx
+++ b/src/components/header/walletModal/index.tsx
@@ -44,7 +44,7 @@ const OptionGrid = styled.div`
 
 const PrivacyPolicyWrapper = styled.div`
   padding: 0 4px;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   font-weight: 400;
   font-size: 0.75rem;
 
@@ -72,12 +72,12 @@ export default function WalletModal() {
   }, [chainId, connector]);
   const viewMode = getCurrentViewMode();
   const magicLoginTextColor = getColor1OverColor2WithContrast({
-    color2: useCSSVariable("--accentNoDefault") || colors.white,
-    color1: useCSSVariable("--textColor") || colors.darkGrey
+    color2: colors.white,
+    color1: useCSSVariable("--textColor") || colors.greyDark
   });
   const privacyTextColor = getColor1OverColor2WithContrast({
     color2: useCSSVariable("--primaryBgColor") || colors.white,
-    color1: useCSSVariable("--textColor") || colors.darkGrey
+    color1: useCSSVariable("--textColor") || colors.greyDark
   });
   return (
     <Wrapper data-testid="wallet-modal">
@@ -98,7 +98,7 @@ export default function WalletModal() {
           <MagicLoginButton
             buttonProps={{
               theme: {
-                ...bosonButtonThemes({ withBosonStyle: false })["primary"],
+                ...bosonButtonThemes()["primary"],
                 color: magicLoginTextColor
               }
             }}
diff --git a/src/components/header/web3Status/index.tsx b/src/components/header/web3Status/index.tsx
index 7937d7f6c..92c405c2c 100644
--- a/src/components/header/web3Status/index.tsx
+++ b/src/components/header/web3Status/index.tsx
@@ -15,7 +15,7 @@ import useENSName from "lib/utils/hooks/useENSName";
 import { useLast } from "lib/utils/hooks/useLast";
 import { memo, useCallback, useEffect, useRef } from "react";
 import { useAppSelector } from "state/hooks";
-import styled from "styled-components";
+import styled, { CSSProperties } from "styled-components";
 
 import { breakpoint, breakpointNumbers } from "../../../lib/styles/breakpoint";
 import { formatAddress } from "../../../lib/utils/address";
@@ -98,9 +98,9 @@ const Text = styled.p`
   font-weight: 500;
 `;
 
-const StyledConnectButton = styled(Button)`
+const StyledConnectButton = styled(Button)<{ $color: CSSProperties["color"] }>`
   background-color: var(--buttonBgColor);
-  color: inherit;
+  color: ${({ $color }) => $color};
 `;
 
 const getCommonWalletButtonProps = (isXXS: boolean) =>
@@ -145,11 +145,11 @@ function Web3StatusInner({ showOnlyIcon }: { showOnlyIcon?: boolean }) {
   const handleWalletDropdownClick = useCallback(() => {
     toggleAccountDrawer();
   }, [toggleAccountDrawer]);
-  const buttonBgColor = useCSSVariable("--buttonBgColor") || colors.primary;
+  const buttonBgColor = useCSSVariable("--buttonBgColor") || colors.green;
   const textColor = useCSSVariable("--textColor") || colors.black;
   const connectedButtonTextColor = getColor1OverColor2WithContrast({
-    color2: useCSSVariable("--buttonBgColor") || colors.primary,
-    color1: useCSSVariable("--textColor") || colors.black
+    color2: buttonBgColor,
+    color1: textColor
   });
   const wasConnected = !!accountRef.current;
   const previousChainId = chainIdRef.current;
@@ -224,9 +224,9 @@ function Web3StatusInner({ showOnlyIcon }: { showOnlyIcon?: boolean }) {
           {...getCommonWalletButtonProps(isXXS)}
           variant="primaryFill"
           style={{
-            ...getCommonWalletButtonProps(isXXS).style,
-            color: connectedButtonTextColor
+            ...getCommonWalletButtonProps(isXXS).style
           }}
+          $color={connectedButtonTextColor}
         >
           Connect Wallet
         </StyledConnectButton>
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
index 1ccb928ee..2dceb5b52 100644
--- a/src/components/icons/index.tsx
+++ b/src/components/icons/index.tsx
@@ -11,7 +11,7 @@ export const Divider = styled.div`
   height: 1px;
   border-width: 0;
   margin: 0;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
 `;
 
 export const Separator = styled.div`
diff --git a/src/components/loader/styled.tsx b/src/components/loader/styled.tsx
index 35facc42c..1fc12d474 100644
--- a/src/components/loader/styled.tsx
+++ b/src/components/loader/styled.tsx
@@ -15,9 +15,9 @@ const shimmerMixin = css`
   animation-fill-mode: both;
   background: linear-gradient(
     to left,
-    ${colors.darkGrey} 25%,
-    ${colors.lightGrey} 50%,
-    ${colors.darkGrey} 75%
+    ${colors.greyDark} 25%,
+    ${colors.greyLight} 50%,
+    ${colors.greyDark} 75%
   );
   background-size: 400%;
   will-change: background-position;
diff --git a/src/components/logo/AssetLogo.tsx b/src/components/logo/AssetLogo.tsx
index be8266bbc..25f757c80 100644
--- a/src/components/logo/AssetLogo.tsx
+++ b/src/components/logo/AssetLogo.tsx
@@ -9,7 +9,7 @@ export const MissingImageLogo = styled.div<{ size?: string }>`
   --size: ${({ size }) => size};
   border-radius: 100px;
   color: ${colors.black};
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   font-size: calc(var(--size) / 3);
   font-weight: 500;
   height: ${({ size }) => size ?? "24px"};
@@ -32,7 +32,7 @@ const LogoImage = styled.img<{ size: string; imgLoaded?: boolean }>`
 const LogoImageWrapper = styled.div<{ size: string; imgLoaded?: boolean }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
-  background: ${({ imgLoaded }) => (imgLoaded ? "none" : colors.lightGrey)};
+  background: ${({ imgLoaded }) => (imgLoaded ? "none" : colors.greyLight)};
   transition: background-color 250ms ease-in;
   box-shadow: 0 0 1px white;
   border-radius: 50%;
diff --git a/src/components/modal/ModalComponents.tsx b/src/components/modal/ModalComponents.tsx
index 827dac733..674988533 100644
--- a/src/components/modal/ModalComponents.tsx
+++ b/src/components/modal/ModalComponents.tsx
@@ -1,5 +1,4 @@
 /* eslint @typescript-eslint/no-explicit-any: "off" */
-import { PurchaseOverviewInner } from "@bosonprotocol/react-kit";
 
 import { BuyerSellerAgreementModal } from "./components/BuyerSellerAgreementModal";
 import EscalateModal from "./components/Chat/components/EscalateModal/EscalateModal";
@@ -70,7 +69,6 @@ export const MODAL_TYPES = {
   UPLOAD_MODAL: "UPLOAD_MODAL",
   VOID_PRODUCT: "VOID_PRODUCT",
   WAITING_FOR_CONFIRMATION: "WAITING_FOR_CONFIRMATION",
-  WHAT_IS_REDEEM: "WHAT_IS_REDEEM",
   PROGRESS_BAR: "PROGRESS_BAR",
   EXPORT_EXCHANGES_WITH_DELIVERY: "EXPORT_EXCHANGES_WITH_DELIVERY",
   PROFILE_DETAILS: "PROFILE_DETAILS",
@@ -121,7 +119,6 @@ export const MODAL_COMPONENTS = {
   [MODAL_TYPES.UPLOAD_MODAL]: Upload,
   [MODAL_TYPES.VOID_PRODUCT]: VoidProduct,
   [MODAL_TYPES.WAITING_FOR_CONFIRMATION]: WaitingForConfirmationModal,
-  [MODAL_TYPES.WHAT_IS_REDEEM]: PurchaseOverviewInner,
   [MODAL_TYPES.PROGRESS_BAR]: ProgressBarModal,
   [MODAL_TYPES.EXPORT_EXCHANGES_WITH_DELIVERY]:
     ExportExchangesWithDeliveryModal,
diff --git a/src/components/modal/components/Chat/MakeProposal/steps/DescribeProblemStep.tsx b/src/components/modal/components/Chat/MakeProposal/steps/DescribeProblemStep.tsx
index e3ee8cfc7..c81cf80a1 100644
--- a/src/components/modal/components/Chat/MakeProposal/steps/DescribeProblemStep.tsx
+++ b/src/components/modal/components/Chat/MakeProposal/steps/DescribeProblemStep.tsx
@@ -31,7 +31,7 @@ export default function DescribeProblemStep({ onNextClick, isValid }: Props) {
       <Typography fontSize="2rem" fontWeight="600">
         Add documents to support your case
       </Typography>
-      <Typography fontSize="1.25rem" color={colors.darkGrey}>
+      <Typography fontSize="1.25rem" color={colors.greyDark}>
         You may provide any information or attach any files that support your
         case.
       </Typography>
diff --git a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/InEscrowInput.tsx b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/InEscrowInput.tsx
index 12e521faa..7ea67d92c 100644
--- a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/InEscrowInput.tsx
+++ b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/InEscrowInput.tsx
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   border: 1px solid ${colors.border};
   padding: 0 0 0 0.5rem;
 
diff --git a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/MakeAProposalStep.tsx b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/MakeAProposalStep.tsx
index 8a9676f5f..313472d6a 100644
--- a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/MakeAProposalStep.tsx
+++ b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/MakeAProposalStep.tsx
@@ -70,7 +70,7 @@ export default function MakeAProposalStep({
       <Typography fontSize="2rem" fontWeight="600">
         Make a {proposalOrCounterProposal}
       </Typography>
-      <Typography fontSize="1.25rem" color={colors.darkGrey}>
+      <Typography fontSize="1.25rem" color={colors.greyDark}>
         Here you can make a {proposalOrCounterProposal} to the{" "}
         {counterPartyText} on how you would like the issue to be resolved. Note
         that this proposal is binding and if the &nbsp;{counterPartyText} agrees
diff --git a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RefundRequest.tsx b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RefundRequest.tsx
index b71b00399..ade999d11 100644
--- a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RefundRequest.tsx
+++ b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RefundRequest.tsx
@@ -124,7 +124,7 @@ export default function RefundRequest({ exchange, iAmTheBuyer }: Props) {
           <div
             style={{
               width: "100%",
-              background: colors.lightGrey,
+              background: colors.greyLight,
               paddingRight: "1rem",
               display: "flex",
               justifyContent: "flex-end",
diff --git a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RequestedRefundInput.tsx b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RequestedRefundInput.tsx
index c5849035d..d58e52a08 100644
--- a/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RequestedRefundInput.tsx
+++ b/src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RequestedRefundInput.tsx
@@ -14,7 +14,7 @@ import { FormModel } from "../../MakeProposalFormModel";
 
 const RefundAmountWrapper = styled.div`
   width: 100%;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   border: 1px solid ${colors.border};
 
   [data-currency] {
diff --git a/src/components/modal/components/Chat/ResolutionSummaryModal.tsx b/src/components/modal/components/Chat/ResolutionSummaryModal.tsx
index 1cca41581..4c790427a 100644
--- a/src/components/modal/components/Chat/ResolutionSummaryModal.tsx
+++ b/src/components/modal/components/Chat/ResolutionSummaryModal.tsx
@@ -23,9 +23,9 @@ const ProposedSolution = styled.h4`
 
 const Info = styled.div`
   padding: 1.5rem;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   margin: 2rem 0;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   display: flex;
   align-items: center;
 `;
diff --git a/src/components/modal/components/Chat/ResolveDisputeModal.tsx b/src/components/modal/components/Chat/ResolveDisputeModal.tsx
index dc70fbcdb..f143a0c79 100644
--- a/src/components/modal/components/Chat/ResolveDisputeModal.tsx
+++ b/src/components/modal/components/Chat/ResolveDisputeModal.tsx
@@ -65,9 +65,9 @@ const ProposedSolution = styled.h4`
 
 const Info = styled.div`
   padding: 1.5rem;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   margin: 2rem 0;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   display: flex;
   align-items: center;
 `;
diff --git a/src/components/modal/components/Chat/components/DisputeSplit.tsx b/src/components/modal/components/Chat/components/DisputeSplit.tsx
index edd95da1d..3c842f38b 100644
--- a/src/components/modal/components/Chat/components/DisputeSplit.tsx
+++ b/src/components/modal/components/Chat/components/DisputeSplit.tsx
@@ -11,7 +11,7 @@ import { Grid } from "../../../../ui/Grid";
 
 const StyledTable = styled.table`
   width: 100%;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   .receive {
     font-weight: 600;
     color: ${colors.black};
diff --git a/src/components/modal/components/Chat/components/EscalateModal/EscalateModal.tsx b/src/components/modal/components/Chat/components/EscalateModal/EscalateModal.tsx
index 5fdc107be..3e9f80956 100644
--- a/src/components/modal/components/Chat/components/EscalateModal/EscalateModal.tsx
+++ b/src/components/modal/components/Chat/components/EscalateModal/EscalateModal.tsx
@@ -18,7 +18,7 @@ type Props = EscalateChatProps & {
 };
 
 const Container = styled.div`
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
 `;
 
 const StyledMultiSteps = styled(MultiSteps)`
diff --git a/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepOne.tsx b/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepOne.tsx
index 9dd0e27a6..88f181f0b 100644
--- a/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepOne.tsx
+++ b/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepOne.tsx
@@ -26,7 +26,7 @@ const GridContainer = styled.div`
   grid-gap: 0.625rem;
   margin-top: 1.5625rem;
   padding-bottom: 15px;
-  border-bottom: 1px solid ${colors.lightGrey};
+  border-bottom: 1px solid ${colors.greyLight};
 `;
 
 const StyledArrowSquare = styled(ArrowSquareOut)`
@@ -68,55 +68,55 @@ function EscalateStepOne({ exchange }: Props) {
         <Typography fontWeight="600" fontSize="2rem" margin="1rem 0 0 0">
           Escalate Dispute
         </Typography>
-        <Typography fontSize="1rem" fontWeight="400" color={colors.darkGrey}>
+        <Typography fontSize="1rem" fontWeight="400" color={colors.greyDark}>
           Escalating a dispute will enable the dispute resolver to decide on the
           outcome of the dispute. The dispute resolver will decide based on the
           contractual agreement and evidence submitted by both parties.
         </Typography>
         <GridContainer>
-          <Typography fontWeight="400" fontSize="1rem" color={colors.darkGrey}>
+          <Typography fontWeight="400" fontSize="1rem" color={colors.greyDark}>
             Dispute resolver
           </Typography>
           <Typography
             fontWeight="600"
             fontSize="1rem"
-            color={colors.darkGrey}
+            color={colors.greyDark}
             justifyContent="flex-end"
           >
             Redeemeum
           </Typography>
-          <Typography fontWeight="400" fontSize="1rem" color={colors.darkGrey}>
+          <Typography fontWeight="400" fontSize="1rem" color={colors.greyDark}>
             Exchange policy
           </Typography>
           <Grid justifyContent="flex-end">
             <Typography
               fontWeight="600"
               fontSize="1rem"
-              color={colors.darkGrey}
+              color={colors.greyDark}
               justifyContent="flex-end"
             >
               {onlyFairExchangePolicyLabel}
             </Typography>
-            <StyledArrowSquare color={colors.secondary} size={22} />
+            <StyledArrowSquare color={colors.violet} size={22} />
           </Grid>
-          <Typography fontWeight="400" fontSize="1rem" color={colors.darkGrey}>
+          <Typography fontWeight="400" fontSize="1rem" color={colors.greyDark}>
             Escalation deposit
           </Typography>
           <Typography
             fontWeight="600"
             fontSize="1rem"
-            color={colors.darkGrey}
+            color={colors.greyDark}
             justifyContent="flex-end"
           >
             {feeAmount}
           </Typography>
-          <Typography fontWeight="400" fontSize="1rem" color={colors.darkGrey}>
+          <Typography fontWeight="400" fontSize="1rem" color={colors.greyDark}>
             Dispute period
           </Typography>
           <Typography
             fontWeight="600"
             fontSize="1rem"
-            color={colors.darkGrey}
+            color={colors.greyDark}
             justifyContent="flex-end"
           >
             {deadlineTimeLeft}
diff --git a/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepTwo.tsx b/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepTwo.tsx
index 3284541cd..e24c52e7b 100644
--- a/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepTwo.tsx
+++ b/src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepTwo.tsx
@@ -284,7 +284,7 @@ function EscalateStepTwo({
                   <Typography
                     fontSize="1rem"
                     fontWeight="400"
-                    color={colors.darkGrey}
+                    color={colors.greyDark}
                   >
                     Click the button below to sign an arbitrary message with
                     your wallet. This will allow the dispute resolver to verify
@@ -330,7 +330,7 @@ function EscalateStepTwo({
                   <Typography
                     fontSize="1rem"
                     fontWeight="400"
-                    color={colors.darkGrey}
+                    color={colors.greyDark}
                   >
                     Email the dispute resolver by copying the below details and
                     attaching any evidence (e.g. Chat Transcript, Files, etc)
@@ -422,7 +422,7 @@ function EscalateStepTwo({
                   <Typography
                     fontSize="1rem"
                     fontWeight="400"
-                    color={colors.darkGrey}
+                    color={colors.greyDark}
                   >
                     Your Escalation deposit is {feeAmount} {""}
                     {exchange.offer.exchangeToken.symbol}. This dispute resolver
diff --git a/src/components/modal/components/Chat/components/InitializeChat.tsx b/src/components/modal/components/Chat/components/InitializeChat.tsx
index 061958970..83a9953de 100644
--- a/src/components/modal/components/Chat/components/InitializeChat.tsx
+++ b/src/components/modal/components/Chat/components/InitializeChat.tsx
@@ -16,7 +16,7 @@ import { Typography } from "../../../../ui/Typography";
 const Info = styled(Grid)`
   display: flex;
   justify-content: space-between;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   padding: 1.5rem;
 `;
 
diff --git a/src/components/modal/components/CustomStoreModal.tsx b/src/components/modal/components/CustomStoreModal.tsx
index 997a26307..0df5ec315 100644
--- a/src/components/modal/components/CustomStoreModal.tsx
+++ b/src/components/modal/components/CustomStoreModal.tsx
@@ -41,7 +41,7 @@ import { Channels } from "./SalesChannelsModal/form";
 
 const CopyIcon = styled(CopySimple)`
   cursor: pointer;
-  color: ${colors.secondary};
+  color: ${colors.violet};
 `;
 
 const Heading = styled(Typography).attrs({
@@ -54,14 +54,14 @@ const Heading = styled(Typography).attrs({
 const marginBetweenContainers = `1.875rem`;
 const CollapsibleContainer = styled.div`
   margin-top: ${marginBetweenContainers};
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   padding: 1.5rem;
 `;
 
 const StyledTooltip = styled.div`
   background: ${colors.white};
   padding: 1rem;
-  border: 1px solid ${colors.darkGrey};
+  border: 1px solid ${colors.greyDark};
   max-width: 20rem;
 `;
 
@@ -115,7 +115,7 @@ export function CustomStoreModal({
   return (
     <>
       <Typography
-        color={colors.darkGrey}
+        color={colors.greyDark}
         fontWeight="600"
         fontSize="1.25rem"
         lineHeight="1.875rem"
diff --git a/src/components/modal/components/DetailWidget.tsx b/src/components/modal/components/DetailWidget.tsx
index ea486a2d0..702dfca3a 100644
--- a/src/components/modal/components/DetailWidget.tsx
+++ b/src/components/modal/components/DetailWidget.tsx
@@ -95,7 +95,7 @@ export default function DetailWidget({
               </Typography>
               <Typography
                 tag="h2"
-                style={{ margin: "1rem 0", color: colors.secondary }}
+                style={{ margin: "1rem 0", color: colors.violet }}
               >
                 {name}
               </Typography>
diff --git a/src/components/modal/components/DisputeListMobile/DisputeListMobileElement.tsx b/src/components/modal/components/DisputeListMobile/DisputeListMobileElement.tsx
index 5c4ed4623..b1d963631 100644
--- a/src/components/modal/components/DisputeListMobile/DisputeListMobileElement.tsx
+++ b/src/components/modal/components/DisputeListMobile/DisputeListMobileElement.tsx
@@ -19,7 +19,7 @@ const Container = styled.div`
   width: ${containerWidth};
   display: block;
   padding: 0 1rem 0.0625rem 1rem;
-  border: 1px solid ${colors.lightGrey};
+  border: 1px solid ${colors.greyLight};
 `;
 
 const OfferImage = styled.div`
@@ -112,7 +112,7 @@ function DisputeListMobileElement({ exchange }: { exchange: Exchange }) {
           onClick={() => null}
         />
       </MessageInfo>
-      <Typography fontWeight="400" fontSize="12px" color={colors.darkGrey}>
+      <Typography fontWeight="400" fontSize="12px" color={colors.greyDark}>
         State
       </Typography>
       <Grid>
@@ -124,14 +124,14 @@ function DisputeListMobileElement({ exchange }: { exchange: Exchange }) {
           alignItems="flex-start"
           justifyContent="flex-end"
           margin="0 0 0 0"
-          color={colors.darkGrey}
+          color={colors.greyDark}
         >
           {isResolved ? (
             <>
               <DisputeEndDate
                 size={17}
                 fontWeight="light"
-                color={colors.darkGrey}
+                color={colors.greyDark}
               />
               {deadlineTimeLeft}{" "}
             </>
diff --git a/src/components/modal/components/DisputeModal/DisputeModal.tsx b/src/components/modal/components/DisputeModal/DisputeModal.tsx
index da824b0d2..bf98c0ac9 100644
--- a/src/components/modal/components/DisputeModal/DisputeModal.tsx
+++ b/src/components/modal/components/DisputeModal/DisputeModal.tsx
@@ -21,13 +21,13 @@ const ModalGrid = styled.div`
 `;
 
 const ModalGridColumns = styled.div`
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   padding: 1.5625rem;
   grid-gap: 0.3125rem;
   position: relative;
   &:nth-of-type(1) {
     &:after {
-      background-color: ${colors.lightGrey};
+      background-color: ${colors.greyLight};
       content: "";
       bottom: calc(-100% + 1px);
       width: 100%;
@@ -38,7 +38,7 @@ const ModalGridColumns = styled.div`
       left: 0;
       ${breakpoint.m} {
         clip-path: polygon(0 0, 0% 100%, 13% 49%);
-        background-color: ${colors.lightGrey};
+        background-color: ${colors.greyLight};
         content: "";
         height: 100%;
         width: 6.25rem;
@@ -72,7 +72,7 @@ const ModalGridColumns = styled.div`
       }
     }
     &:after {
-      background-color: ${colors.lightGrey};
+      background-color: ${colors.greyLight};
       content: "";
       bottom: calc(-100% + 0.0625rem);
       width: 100%;
@@ -83,7 +83,7 @@ const ModalGridColumns = styled.div`
       left: 0;
       ${breakpoint.m} {
         clip-path: polygon(0 0, 0% 100%, 13% 49%);
-        background-color: ${colors.lightGrey};
+        background-color: ${colors.greyLight};
         content: "";
         height: 100%;
         width: 6.25rem;
@@ -154,7 +154,7 @@ function DisputeModal({ exchangeId }: Props) {
       </Typography>
       <Typography
         fontSize="1.25rem"
-        color={colors.darkGrey}
+        color={colors.greyDark}
         marginTop="0.5rem"
         marginBottom="2rem"
       >
@@ -167,7 +167,7 @@ function DisputeModal({ exchangeId }: Props) {
       </Typography>
       <ModalGrid>
         <ModalGridColumns>
-          <Chats size={24} color={colors.secondary} data-columns-icon />
+          <Chats size={24} color={colors.violet} data-columns-icon />
           <Typography
             margin="0"
             fontSize="1.25rem"
@@ -178,7 +178,7 @@ function DisputeModal({ exchangeId }: Props) {
           </Typography>
         </ModalGridColumns>
         <ModalGridColumns data-modal-columns>
-          <FilePlus size={24} color={colors.secondary} data-columns-icon />
+          <FilePlus size={24} color={colors.violet} data-columns-icon />
           <Typography
             margin="0"
             fontSize="1.25rem"
@@ -189,7 +189,7 @@ function DisputeModal({ exchangeId }: Props) {
           </Typography>
         </ModalGridColumns>
         <ModalGridColumns data-modal-columns>
-          <Handshake size={24} color={colors.secondary} data-columns-icon />
+          <Handshake size={24} color={colors.violet} data-columns-icon />
           <Typography
             margin="0"
             fontSize="1.25rem"
diff --git a/src/components/modal/components/DisputeTable/DisputeTable.tsx b/src/components/modal/components/DisputeTable/DisputeTable.tsx
index d178fac17..31d62c7d2 100644
--- a/src/components/modal/components/DisputeTable/DisputeTable.tsx
+++ b/src/components/modal/components/DisputeTable/DisputeTable.tsx
@@ -16,7 +16,7 @@ const Table = styled.table`
 
 const TableHeader = styled.th`
   text-align: left;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   font-size: 1.1rem;
   font-weight: 600;
   font-family: inherit;
@@ -31,7 +31,7 @@ const TableElementContainer = styled.tr`
   position: relative;
   &:after {
     position: absolute;
-    background: ${colors.darkGreyTimeStamp};
+    background: ${colors.greyLight};
     content: "";
     left: 0;
     bottom: 0;
diff --git a/src/components/modal/components/ExpireVoucherModal.tsx b/src/components/modal/components/ExpireVoucherModal.tsx
index f8c5ff7df..8bd03473e 100644
--- a/src/components/modal/components/ExpireVoucherModal.tsx
+++ b/src/components/modal/components/ExpireVoucherModal.tsx
@@ -46,7 +46,7 @@ const Content = styled.div`
 `;
 
 const ButtonsWrapper = styled.div`
-  border-top: 1px solid ${colors.lightGrey};
+  border-top: 1px solid ${colors.greyLight};
   padding-top: 2rem;
 `;
 const Line = styled.hr`
@@ -99,7 +99,7 @@ export default function ExpireVoucherModal({ exchange }: Props) {
           tag="p"
           textAlign="left"
           margin="0"
-          color={colors.darkGrey}
+          color={colors.greyDark}
           width="100%"
           style={{
             width: "100%"
diff --git a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx
index 1438b3af8..dbd05dc0c 100644
--- a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx
+++ b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx
@@ -18,11 +18,11 @@ const CardContainer = styled.div<{
   $isUpperCardBgColorDefined: boolean;
 }>`
   position: relative;
-  background: ${colors.lightGrey2};
+  background: ${colors.greyLight};
   display: flex;
   cursor: pointer;
   flex-direction: column;
-  border: 2px solid ${colors.lightGrey};
+  border: 2px solid ${colors.greyLight};
   border-radius: 4px;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   min-width: 16.5625rem;
@@ -40,7 +40,7 @@ const ImagesContainer = styled.div`
   display: flex;
   padding: 1rem;
   gap: 1rem;
-  background: ${colors.lightGrey2};
+  background: ${colors.greyLight};
   height: 13rem;
   max-height: 13rem;
 `;
@@ -79,7 +79,7 @@ const LargeImage = styled(Image)`
     transform: none;
     left: 0;
     top: 30px;
-    box-shadow: 0 0 0 2px ${colors.lightGrey};
+    box-shadow: 0 0 0 2px ${colors.greyLight};
     width: inherit;
   }
 `;
@@ -97,7 +97,7 @@ const BaseSmallImage = css`
     height: 3.125rem;
     max-height: 3.125rem;
     object-fit: contain;
-    box-shadow: 0 0 0 2px ${colors.lightGrey};
+    box-shadow: 0 0 0 2px ${colors.greyLight};
     width: 100%;
     left: unset;
     transform: none;
@@ -252,7 +252,7 @@ export default function CollectionsCard({ collection, lensProfile }: Props) {
             <Typography
               fontSize="0.75rem"
               fontWeight="400"
-              color={colors.darkGrey}
+              color={colors.greyDark}
             >
               {numProducts} Products
             </Typography>
diff --git a/src/components/modal/components/ProductCreateSuccess.tsx b/src/components/modal/components/ProductCreateSuccess.tsx
index 949cbabd2..11912cee0 100644
--- a/src/components/modal/components/ProductCreateSuccess.tsx
+++ b/src/components/modal/components/ProductCreateSuccess.tsx
@@ -137,7 +137,7 @@ export default function ProductCreateSuccess({
               <Typography
                 tag="h2"
                 margin="1rem 0"
-                color={colors.secondary}
+                color={colors.violet}
                 fontSize="1.5rem"
               >
                 {name}
diff --git a/src/components/modal/components/Profile/CreateProfileModal.tsx b/src/components/modal/components/Profile/CreateProfileModal.tsx
index 9a4bd3ca0..8ee2a38f0 100644
--- a/src/components/modal/components/Profile/CreateProfileModal.tsx
+++ b/src/components/modal/components/Profile/CreateProfileModal.tsx
@@ -117,7 +117,7 @@ export default function CreateProfileModal({
         checked={switchChecked}
         label={() => (
           <Typography
-            color={colors.secondary}
+            color={colors.violet}
             fontSize="0.8rem"
             onClick={() => setSwitchAndProfileType(!switchChecked)}
             cursor="pointer"
diff --git a/src/components/modal/components/Profile/EditProfileModal.tsx b/src/components/modal/components/Profile/EditProfileModal.tsx
index 90375f60c..1304eb281 100644
--- a/src/components/modal/components/Profile/EditProfileModal.tsx
+++ b/src/components/modal/components/Profile/EditProfileModal.tsx
@@ -70,7 +70,7 @@ export default function EditProfileModal({
         checked={switchChecked}
         label={() => (
           <Typography
-            color={colors.secondary}
+            color={colors.violet}
             fontSize="0.8rem"
             onClick={() => setSwitchAndProfileType(!switchChecked)}
             cursor="pointer"
diff --git a/src/components/modal/components/Profile/Lens/CreateBosonLensAccountSummary.tsx b/src/components/modal/components/Profile/Lens/CreateBosonLensAccountSummary.tsx
index fbf92c508..724940d02 100644
--- a/src/components/modal/components/Profile/Lens/CreateBosonLensAccountSummary.tsx
+++ b/src/components/modal/components/Profile/Lens/CreateBosonLensAccountSummary.tsx
@@ -132,7 +132,7 @@ export default function CreateBosonLensAccountSummary({
       <Grid flexDirection="column" gap="2.625rem">
         <Grid flexDirection="column" gap="1rem">
           <Grid
-            style={{ background: colors.lightGrey }}
+            style={{ background: colors.greyLight }}
             flexDirection="column"
             padding="1.5rem 2.5rem"
           >
@@ -346,7 +346,7 @@ export default function CreateBosonLensAccountSummary({
             </Collapse>
           </Grid>
           <Grid
-            style={{ background: colors.lightGrey }}
+            style={{ background: colors.greyLight }}
             flexDirection="column"
             padding="1.5rem 2.5rem"
           >
diff --git a/src/components/modal/components/Profile/ProfilePreview.tsx b/src/components/modal/components/Profile/ProfilePreview.tsx
index f626e204c..b74ca8cb7 100644
--- a/src/components/modal/components/Profile/ProfilePreview.tsx
+++ b/src/components/modal/components/Profile/ProfilePreview.tsx
@@ -54,7 +54,7 @@ export const ProfilePreview: React.FC<ProfilePreviewProps> = ({
     <>
       <Gear
         size={24}
-        color={colors.secondary}
+        color={colors.violet}
         weight="light"
         style={{ cursor: "pointer" }}
         onClick={() => {
diff --git a/src/components/modal/components/Profile/Regular/RegularProfileSummary.tsx b/src/components/modal/components/Profile/Regular/RegularProfileSummary.tsx
index 7ce4b15df..da01651dc 100644
--- a/src/components/modal/components/Profile/Regular/RegularProfileSummary.tsx
+++ b/src/components/modal/components/Profile/Regular/RegularProfileSummary.tsx
@@ -46,7 +46,7 @@ export default function RegularProfileSummary({
       <Grid flexDirection="column" gap="2.625rem">
         <Grid flexDirection="column" gap="1rem">
           <Grid
-            style={{ background: colors.lightGrey }}
+            style={{ background: colors.greyLight }}
             flexDirection="column"
             padding="1.5rem 2.5rem"
           >
@@ -238,7 +238,7 @@ export default function RegularProfileSummary({
             </Collapse>
           </Grid>
           <Grid
-            style={{ background: colors.lightGrey }}
+            style={{ background: colors.greyLight }}
             flexDirection="column"
             padding="1.5rem 2.5rem"
           >
diff --git a/src/components/modal/components/Profile/bosonAccount/BosonAccountFormFields.tsx b/src/components/modal/components/Profile/bosonAccount/BosonAccountFormFields.tsx
index 0396a3aa9..101b732e9 100644
--- a/src/components/modal/components/Profile/bosonAccount/BosonAccountFormFields.tsx
+++ b/src/components/modal/components/Profile/bosonAccount/BosonAccountFormFields.tsx
@@ -64,7 +64,7 @@ export default function BosonAccountFormFields({
             <Grid>
               <Grid
                 style={{
-                  background: colors.lightGrey,
+                  background: colors.greyLight,
                   border: `1px solid ${colors.border}`,
                   height: inputHeight
                 }}
diff --git a/src/components/modal/components/ProgressBarModal.tsx b/src/components/modal/components/ProgressBarModal.tsx
index c4e5de001..824819d3e 100644
--- a/src/components/modal/components/ProgressBarModal.tsx
+++ b/src/components/modal/components/ProgressBarModal.tsx
@@ -51,7 +51,7 @@ export default function ProgressBarModal({ progress, text, onCancel }: Props) {
           fontWeight="600"
           fontSize="1rem"
           lineHeight="150%"
-          color={colors.darkGrey}
+          color={colors.greyDark}
           margin="0.5rem 0 1.5rem 0"
         >
           {text}
diff --git a/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx b/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx
index 7a836d6e6..64f59e0f7 100644
--- a/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx
+++ b/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx
@@ -1,4 +1,4 @@
-import { subgraph } from "@bosonprotocol/react-kit";
+import { colors, subgraph } from "@bosonprotocol/react-kit";
 import { Provider, WithdrawFundsButton } from "@bosonprotocol/react-kit";
 import {
   extractUserFriendlyError,
@@ -15,7 +15,6 @@ import {
 import { useState } from "react";
 import styled from "styled-components";
 
-import { colors } from "../../../../lib/styles/colors";
 import { useSigner } from "../../../../lib/utils/hooks/connection/connection";
 import { useAddPendingTransaction } from "../../../../lib/utils/hooks/transactions/usePendingTransactions";
 import { Spinner } from "../../../loading/Spinner";
@@ -30,7 +29,7 @@ import {
 } from "./FinancesStyles";
 
 const MaxLimitWrapper = styled.div`
-  color: ${colors.grey};
+  color: ${colors.greyDark};
   margin-top: 0.25rem;
 `;
 
diff --git a/src/components/modal/components/SellerFinance/FinancesStyles.tsx b/src/components/modal/components/SellerFinance/FinancesStyles.tsx
index e028ba0d3..6bd979225 100644
--- a/src/components/modal/components/SellerFinance/FinancesStyles.tsx
+++ b/src/components/modal/components/SellerFinance/FinancesStyles.tsx
@@ -1,5 +1,5 @@
 import { defaultFontFamily } from "lib/styles/fonts";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { colors } from "../../../../lib/styles/colors";
 import Button from "../../../ui/Button";
@@ -8,7 +8,7 @@ import { Grid } from "../../../ui/Grid";
 export const CTAButton = styled(Button)`
   padding: 0.75rem 1.5rem;
   &:disabled {
-    border: 2px solid ${colors.darkGrey};
+    border: 2px solid ${colors.greyDark};
   }
   &:hover:not(:disabled) {
     border: 2px solid var(--primary);
@@ -26,11 +26,11 @@ export const InputWrapper = styled(Grid)<{ $hasError?: boolean }>`
   margin-top: -1rem;
   padding: 1.125rem 1rem;
   max-height: 3.5rem;
-  background: ${colors.darkGrey};
+  background: ${colors.greyLight};
   ${({ $hasError }) =>
     $hasError &&
-    `
-    border: 0.0625rem solid ${colors.red};
+    css`
+      border: 0.0625rem solid ${colors.red};
     `}
 `;
 
@@ -44,7 +44,6 @@ export const Input = styled.input`
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.5;
-  color: ${colors.white};
   &:focus {
     outline: none;
   }
diff --git a/src/components/modal/components/Transactions/RecentTransactionsModal/Toggle.tsx b/src/components/modal/components/Transactions/RecentTransactionsModal/Toggle.tsx
index 2f837291e..788a1fa27 100644
--- a/src/components/modal/components/Transactions/RecentTransactionsModal/Toggle.tsx
+++ b/src/components/modal/components/Transactions/RecentTransactionsModal/Toggle.tsx
@@ -6,7 +6,7 @@ import Button from "../../../../ui/Button";
 import { Grid } from "../../../../ui/Grid";
 
 const StyledGrid = styled(Grid)`
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
 `;
 
 const StyledButton = styled(Button)<{ $isActive: boolean }>`
@@ -16,7 +16,7 @@ const StyledButton = styled(Button)<{ $isActive: boolean }>`
     !$isActive &&
     css`
       border-color: transparent;
-      background-color: ${colors.lightGrey};
+      background-color: ${colors.greyLight};
     `}
 `;
 
diff --git a/src/components/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx b/src/components/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx
index d94cdbbd4..33425ebaa 100644
--- a/src/components/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx
+++ b/src/components/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx
@@ -62,15 +62,13 @@ export default function TransactionSubmittedModal({
           fontSize="1rem"
           lineHeight="150%"
           margin="0.5rem 0 1.5rem 0"
-          color={colors.secondary}
+          color={colors.violet}
         >
           View on Explorer
         </Typography>
       </a>
 
-      <StyledButton onClick={hideModal} withBosonStyle>
-        Close
-      </StyledButton>
+      <StyledButton onClick={hideModal}>Close</StyledButton>
     </Grid>
   );
 }
diff --git a/src/components/modal/components/Transactions/WaitingForConfirmationModal/WaitingForConfirmationModal.tsx b/src/components/modal/components/Transactions/WaitingForConfirmationModal/WaitingForConfirmationModal.tsx
index a3654c890..39f8d1252 100644
--- a/src/components/modal/components/Transactions/WaitingForConfirmationModal/WaitingForConfirmationModal.tsx
+++ b/src/components/modal/components/Transactions/WaitingForConfirmationModal/WaitingForConfirmationModal.tsx
@@ -45,7 +45,7 @@ export default function WaitingForConfirmationModal({ action }: Props) {
         fontWeight="600"
         fontSize="1rem"
         lineHeight="150%"
-        color={colors.darkGrey}
+        color={colors.greyDark}
         margin="0.5rem 0 1.5rem 0"
       >
         {action}
@@ -54,7 +54,7 @@ export default function WaitingForConfirmationModal({ action }: Props) {
         fontWeight="400"
         fontSize="0.75rem"
         lineHeight="150%"
-        color={colors.darkGrey}
+        color={colors.greyDark}
       >
         Confirm this transaction into your wallet
       </Typography>
diff --git a/src/components/modal/components/createProduct/VariableStepsExplainerModal.tsx b/src/components/modal/components/createProduct/VariableStepsExplainerModal.tsx
index d30db1efe..597fa4c63 100644
--- a/src/components/modal/components/createProduct/VariableStepsExplainerModal.tsx
+++ b/src/components/modal/components/createProduct/VariableStepsExplainerModal.tsx
@@ -48,13 +48,13 @@ const StepWrapper = styled.div<{ $numSteps: number }>`
 const Step = styled.div<{ $isActive: boolean }>`
   position: relative;
   padding: 1rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   ${({ $isActive }) => {
     if ($isActive) {
       return css``;
     }
     return css`
-      background: ${colors.lightGrey}AA;
+      background: ${colors.greyLight}AA;
       color: ${colors.black}AA;
       svg {
         filter: opacity(50%);
@@ -73,13 +73,13 @@ const Step = styled.div<{ $isActive: boolean }>`
       transform: translate(-50%, 0);
       border-left: 30rem solid transparent;
       border-right: 30rem solid transparent;
-      border-top: 1rem solid ${colors.lightGrey};
+      border-top: 1rem solid ${colors.greyLight};
       ${({ $isActive }) => {
         if ($isActive) {
           return css``;
         }
         return css`
-          border-top: 1rem solid ${colors.lightGrey}AA;
+          border-top: 1rem solid ${colors.greyLight}AA;
         `;
       }}
     }
@@ -116,7 +116,7 @@ const Step = styled.div<{ $isActive: boolean }>`
         left: initial;
         transform: translate(0%, -50%);
         border-top: 10rem solid transparent;
-        border-left: 1rem solid ${colors.lightGrey};
+        border-left: 1rem solid ${colors.greyLight};
         border-bottom: 10rem solid transparent;
         border-right: none;
         ${({ $isActive }) => {
@@ -124,7 +124,7 @@ const Step = styled.div<{ $isActive: boolean }>`
             return css``;
           }
           return css`
-            border-left: 1rem solid ${colors.lightGrey}AA;
+            border-left: 1rem solid ${colors.greyLight}AA;
           `;
         }}
       }
diff --git a/src/components/modal/components/createProduct/const.tsx b/src/components/modal/components/createProduct/const.tsx
index 6eeaece71..ebf507b83 100644
--- a/src/components/modal/components/createProduct/const.tsx
+++ b/src/components/modal/components/createProduct/const.tsx
@@ -55,14 +55,14 @@ export const variableStepToQueryParam = {
 export const variableStepMap = {
   [VariableStep.CreateYourProfile]: {
     key: VariableStep.CreateYourProfile,
-    icon: <UserCirclePlus color={colors.secondary} />,
+    icon: <UserCirclePlus color={colors.violet} />,
     title: "Create your profile",
     body: "Creating a profile helps establish your branding and Web3 presence in dComemrce",
     to: { pathname: "" }
   },
   [VariableStep.CreateYourTokenGatedProduct]: {
     key: VariableStep.CreateYourTokenGatedProduct,
-    icon: <CirclesThreePlus color={colors.secondary} />,
+    icon: <CirclesThreePlus color={colors.violet} />,
     title: "Setup a token-gated offer",
     body: "Create a physical or phygital product, enriching it with details, such as images and videos",
     to: {
@@ -72,28 +72,28 @@ export const variableStepMap = {
   },
   [VariableStep.SetupYourDCLStore]: {
     key: VariableStep.SetupYourDCLStore,
-    icon: <Megaphone color={colors.secondary} />,
+    icon: <Megaphone color={colors.violet} />,
     title: "Setup your DCL store",
     body: "Configure your metaverse store on your own land in DCL or on Boson Boulevard.",
     to: { pathname: SellerCenterRoutes.DCL }
   },
   [VariableStep.SetupYourWeb3Store]: {
     key: VariableStep.SetupYourWeb3Store,
-    icon: <Storefront color={colors.secondary} />,
+    icon: <Storefront color={colors.violet} />,
     title: "Setup your Web3 store",
     body: "Build and customize your own bespoke decentralized commerce storefront",
     to: { pathname: BosonRoutes.CreateStorefront }
   },
   [VariableStep.AddSalesChannels]: {
     key: VariableStep.AddSalesChannels,
-    icon: <Megaphone color={colors.secondary} />,
+    icon: <Megaphone color={colors.violet} />,
     title: "Add sales channels",
     body: "Choose one or many channels where your products will be shown, selling everywhere!",
     to: { pathname: getSellerCenterPath("Sales Channels") }
   },
   [VariableStep.CreateYourProducts]: {
     key: VariableStep.CreateYourProducts,
-    icon: <CirclesThreePlus color={colors.secondary} />,
+    icon: <CirclesThreePlus color={colors.violet} />,
     title: "Create your products",
     body: "Create a physical or digi-physical product, enriching it with details, such as images and videos.",
     to: { pathname: SellerCenterRoutes.CreateProduct }
diff --git a/src/components/modal/header/styles.tsx b/src/components/modal/header/styles.tsx
index e732d07a3..a8d1f814d 100644
--- a/src/components/modal/header/styles.tsx
+++ b/src/components/modal/header/styles.tsx
@@ -6,7 +6,7 @@ import { Typography } from "../../ui/Typography";
 
 export const Close = styled(X)`
   line {
-    stroke: ${colors.darkGrey} !important;
+    stroke: ${colors.greyDark} !important;
     stroke-width: 18px !important;
   }
 `;
diff --git a/src/components/offer/ExchangeStatuses.tsx b/src/components/offer/ExchangeStatuses.tsx
index cff3db99b..cb18579e3 100644
--- a/src/components/offer/ExchangeStatuses.tsx
+++ b/src/components/offer/ExchangeStatuses.tsx
@@ -24,7 +24,7 @@ const Statuses = styled.div`
       &[data-testid="voided-status"] {
         &:before {
           background: transparent;
-          box-shadow: inset 0px 0px 0px 2px ${colors.darkGrey};
+          box-shadow: inset 0px 0px 0px 2px ${colors.greyDark};
         }
       }
       padding-left: 1.5rem;
@@ -36,7 +36,7 @@ const Statuses = styled.div`
         transform: translate(0.25rem, -50%);
         width: 0.5rem;
         height: 0.5rem;
-        background: ${colors.darkGrey};
+        background: ${colors.greyDark};
         opacity: 0.6;
         border-radius: 50%;
       }
@@ -124,7 +124,7 @@ const StatusToComponent = (
     return {
       [subgraph.ExchangeState.CANCELLED]: (
         <Status
-          $color={colors.darkGrey}
+          $color={colors.greyDark}
           $background={colors.red}
           $size={size}
           style={style}
@@ -136,7 +136,7 @@ const StatusToComponent = (
       ),
       [subgraph.ExchangeState.COMMITTED]: (
         <Status
-          $color={colors.darkGrey}
+          $color={colors.greyDark}
           $background={colors.green}
           $size={size}
           style={style}
@@ -148,8 +148,8 @@ const StatusToComponent = (
       ),
       [subgraph.ExchangeState.COMPLETED]: (
         <Status
-          $color={colors.darkGrey}
-          $background={colors.lightGrey}
+          $color={colors.greyDark}
+          $background={colors.greyLight}
           $size={size}
           style={style}
           className="status"
@@ -160,7 +160,7 @@ const StatusToComponent = (
       ),
       [subgraph.ExchangeState.DISPUTED]: (
         <Status
-          $color={colors.darkGrey}
+          $color={colors.greyDark}
           $background={colors.torquise}
           $size={size}
           style={style}
@@ -172,7 +172,7 @@ const StatusToComponent = (
       ),
       [subgraph.ExchangeState.REVOKED]: (
         <Status
-          $color={colors.darkGrey}
+          $color={colors.greyDark}
           $background={colors.blue}
           $size={size}
           style={style}
@@ -184,7 +184,7 @@ const StatusToComponent = (
       ),
       [subgraph.ExchangeState.REDEEMED]: (
         <Status
-          $color={colors.darkGrey}
+          $color={colors.greyDark}
           $background={colors.lime}
           $size={size}
           style={style}
@@ -196,7 +196,7 @@ const StatusToComponent = (
       ),
       [exchanges.ExtendedExchangeState.Expired]: (
         <Status
-          $color={colors.darkGrey}
+          $color={colors.greyDark}
           $background={colors.red}
           $size={size}
           style={style}
@@ -208,8 +208,8 @@ const StatusToComponent = (
       ),
       [exchanges.ExtendedExchangeState.NotRedeemableYet]: (
         <Status
-          $color={colors.darkGrey}
-          $background={colors.darkOrange}
+          $color={colors.greyDark}
+          $background={colors.orangeDark}
           $size={size}
           style={style}
           className="status"
diff --git a/src/components/offer/OfferStatuses.tsx b/src/components/offer/OfferStatuses.tsx
index 43bf7dc4e..2baf6cd89 100644
--- a/src/components/offer/OfferStatuses.tsx
+++ b/src/components/offer/OfferStatuses.tsx
@@ -23,7 +23,7 @@ const Statuses = styled.div`
       &[data-testid="voided-status"] {
         &:before {
           background: transparent;
-          box-shadow: inset 0px 0px 0px 2px ${colors.darkGrey};
+          box-shadow: inset 0px 0px 0px 2px ${colors.greyDark};
         }
       }
       padding-left: 1.5rem;
@@ -35,7 +35,7 @@ const Statuses = styled.div`
         transform: translate(0.25rem, -50%);
         width: 0.5rem;
         height: 0.5rem;
-        background: ${colors.darkGrey};
+        background: ${colors.greyDark};
         opacity: 0.6;
         border-radius: 50%;
       }
@@ -101,7 +101,7 @@ const StatusToComponent = (
     ({
       [offers.OfferState.EXPIRED]: (
         <Status
-          $color={colors.darkGrey}
+          $color={colors.greyDark}
           $background={`${colors.red}`}
           $size={size}
           style={style}
@@ -113,8 +113,8 @@ const StatusToComponent = (
       ),
       [offers.OfferState.VOIDED]: (
         <Status
-          $color={colors.darkGrey}
-          $background={`${colors.darkGrey}`}
+          $color={colors.greyDark}
+          $background={`${colors.greyDark}`}
           $size={size}
           style={style}
           className="status"
@@ -125,7 +125,7 @@ const StatusToComponent = (
       ),
       [offers.OfferState.NOT_YET_VALID]: (
         <Status
-          $color={colors.darkGrey}
+          $color={colors.greyDark}
           $background={`${colors.orange}`}
           $size={size}
           style={style}
@@ -137,7 +137,7 @@ const StatusToComponent = (
       ),
       [offers.OfferState.VALID]: (
         <Status
-          $color={colors.darkGrey}
+          $color={colors.greyDark}
           $background={`${colors.lime}`}
           $size={size}
           style={style}
diff --git a/src/components/offers/OfferList.tsx b/src/components/offers/OfferList.tsx
index 3ae6d98fc..245f3a20e 100644
--- a/src/components/offers/OfferList.tsx
+++ b/src/components/offers/OfferList.tsx
@@ -12,7 +12,6 @@ import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryPa
 import { useIsCustomStoreValueChanged } from "../../pages/custom-store/useIsCustomStoreValueChanged";
 import { ExtendedOffer } from "../../pages/explore/WithAllOffers";
 import { ProductGridContainer } from "../../pages/profile/ProfilePage.styles";
-import { Action } from "../../pages/profile/seller/const";
 import Breadcrumbs from "../breadcrumbs/Breadcrumbs";
 import ProductCard from "../productCard/ProductCard";
 import { Grid } from "../ui/Grid";
@@ -24,7 +23,6 @@ interface Props {
   isError: boolean;
   isLoading?: boolean;
   showSeller?: boolean;
-  action: Action;
   showInvalidOffers: boolean;
   isPrivateProfile?: boolean;
   type?: "gone" | "hot" | "soon" | undefined;
diff --git a/src/components/product/Help.tsx b/src/components/product/Help.tsx
index 0e5cfee0c..acdaac018 100644
--- a/src/components/product/Help.tsx
+++ b/src/components/product/Help.tsx
@@ -19,7 +19,7 @@ const HelpWrapper = styled.aside<{ $background?: string }>`
   width: 23.25rem;
   display: flex;
   flex-direction: column;
-  background: ${(props) => props.$background || colors.lightGrey};
+  background: ${(props) => props.$background || colors.greyLight};
 `;
 
 const HelpTitleContainer = styled.div`
diff --git a/src/components/product/ProductType.tsx b/src/components/product/ProductType.tsx
index 5f04868a8..c21a61a04 100644
--- a/src/components/product/ProductType.tsx
+++ b/src/components/product/ProductType.tsx
@@ -64,7 +64,7 @@ const productTypeItemsPerRow = {
 export const Label = styled.label`
   max-width: 12.5rem;
   align-items: center;
-  border: 1px solid ${colors.lightGrey};
+  border: 1px solid ${colors.greyLight};
   width: 100%;
   text-align: center;
   margin-top: 0.25rem;
@@ -99,7 +99,7 @@ const RadioButtonText = styled(Typography).attrs({
   fontWeight: "600",
   fontSize: "1rem",
   margin: "1.5rem 0",
-  color: colors.darkGrey
+  color: colors.greyDark
 })``;
 
 const Container = styled.div`
@@ -427,7 +427,7 @@ export default function ProductType({
                     fontWeight="600"
                     fontSize="1rem"
                     margin="1.5rem 0"
-                    color={colors.darkGrey}
+                    color={colors.greyDark}
                   >
                     Physical
                   </Typography>
@@ -457,7 +457,7 @@ export default function ProductType({
                     fontWeight="600"
                     fontSize="1rem"
                     margin="1.5rem 0"
-                    color={colors.darkGrey}
+                    color={colors.greyDark}
                   >
                     Phygital
                   </Typography>
diff --git a/src/components/product/TermsOfExchange.tsx b/src/components/product/TermsOfExchange.tsx
index 04246add9..f97a5aa34 100644
--- a/src/components/product/TermsOfExchange.tsx
+++ b/src/components/product/TermsOfExchange.tsx
@@ -64,7 +64,7 @@ const InfoWrapper = styled.div`
 
 const InfoWrapperList = styled.div`
   padding: 1.25rem 1.5rem 1.5rem 1.5rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   > p {
     margin: 0;
   }
diff --git a/src/components/product/confirmProductDetailsPage/ConfirmProductDetails.styles.tsx b/src/components/product/confirmProductDetailsPage/ConfirmProductDetails.styles.tsx
index d9d2ebbee..1a820c73e 100644
--- a/src/components/product/confirmProductDetailsPage/ConfirmProductDetails.styles.tsx
+++ b/src/components/product/confirmProductDetailsPage/ConfirmProductDetails.styles.tsx
@@ -15,7 +15,7 @@ export const ConfirmProductDetailsContainer = styled(ContainerProductPage)`
 
 export const CollapseContainer = styled.div`
   padding: 1.5rem 2rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   &:nth-of-type(2) {
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -74,7 +74,7 @@ export const ProductTypeBox = styled(GridBox)`
 
 export const ContentValue = styled(Typography)`
   font-size: 0.75rem;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   word-break: break-all;
   white-space: pre-wrap;
   gap: 0.5rem;
@@ -160,7 +160,7 @@ export const InitializeChatContainer = styled.div`
 
 export const Info = styled(Grid)`
   justify-content: space-between;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   padding: 1.5rem;
 `;
 
diff --git a/src/components/product/coreTermsOfSale/CoreTermsOfSaleDates.tsx b/src/components/product/coreTermsOfSale/CoreTermsOfSaleDates.tsx
index 48055351a..4073e1381 100644
--- a/src/components/product/coreTermsOfSale/CoreTermsOfSaleDates.tsx
+++ b/src/components/product/coreTermsOfSale/CoreTermsOfSaleDates.tsx
@@ -48,7 +48,7 @@ export const CoreTermsOfSaleDates: React.FC<CoreTermsOfSaleDatesProps> = ({
             invertValue
             label={() => (
               <Typography
-                color={colors.secondary}
+                color={colors.violet}
                 fontSize="0.8rem"
                 cursor="pointer"
               >
diff --git a/src/components/product/productDigital/styles.ts b/src/components/product/productDigital/styles.ts
index 6de3e04f2..476ddf5f9 100644
--- a/src/components/product/productDigital/styles.ts
+++ b/src/components/product/productDigital/styles.ts
@@ -11,7 +11,7 @@ export const Delete = styled(Trash)`
   border-radius: 50%;
   box-sizing: content-box;
   &:hover {
-    background-color: ${colors.lightGrey};
+    background-color: ${colors.greyLight};
   }
 `;
 
diff --git a/src/components/productCard/ProductCard.tsx b/src/components/productCard/ProductCard.tsx
index 14300cf1e..791931975 100644
--- a/src/components/productCard/ProductCard.tsx
+++ b/src/components/productCard/ProductCard.tsx
@@ -56,8 +56,8 @@ const ProductCardWrapper = styled.div<{
     background: transparent;
     box-shadow: none;
     &:hover {
-      box-shadow: 0 0 0 2px ${colors.lightGrey};
-      filter: drop-shadow(0 0 2px ${colors.lightGrey});
+      box-shadow: 0 0 0 2px ${colors.greyLight};
+      filter: drop-shadow(0 0 2px ${colors.greyLight});
       border-radius: 4px;
     }
     ${({ $isLowerCardBgColorDefined, $bottomCardTextColor }) => {
@@ -221,13 +221,16 @@ export default function ProductCard({
     (useLens ? lensProfile?.name : metadata?.name) ?? metadata?.name ?? "";
   const lowerCardBgColor = useCustomStoreQueryParameter("lowerCardBgColor");
   const isLowerCardBgColorDefined = !!lowerCardBgColor;
+  const bottomCardTextColor2 =
+    useCSSVariable("--lowerCardBgColor") || colors.white;
   const bottomCardTextColor = getColor1OverColor2WithContrast({
-    color2: useCSSVariable("--lowerCardBgColor") || colors.white,
-    color1: useCSSVariable("--textColor") || colors.darkGrey
+    color2: bottomCardTextColor2,
+    color1: useCSSVariable("--textColor") || colors.greyDark
   });
+  const avatarTextColor2 = useCSSVariable("--lowerCardBgColor") || colors.white;
   const avatarTextColor = getColor1OverColor2WithContrast({
-    color2: useCSSVariable("--lowerCardBgColor") || colors.white,
-    color1: colors.accent,
+    color2: avatarTextColor2,
+    color1: colors.violet,
     contrastThreshold: 4
   });
   const isPhygital = isBundle(offer);
@@ -246,11 +249,9 @@ export default function ProductCard({
       <BosonProductCard
         dataCard="product-card"
         dataTestId={dataTestId}
-        productId={offer?.id}
         onCardClick={handleOnCardClick}
         title={offer?.metadata?.name ?? ""}
         avatarName={name ? name : `Seller ID: ${offer.seller.id}`}
-        avatar={avatarObj.avatarUrl || fallbackSellerAvatarUrl || mockedAvatar}
         onAvatarError={() => {
           // to avoid infinite loop
           if (avatarObj.status === "lens" && avatarDifferentIpfsGateway) {
diff --git a/src/components/questionHelper/index.tsx b/src/components/questionHelper/index.tsx
index 23e5e8f3a..7ee598f4c 100644
--- a/src/components/questionHelper/index.tsx
+++ b/src/components/questionHelper/index.tsx
@@ -29,7 +29,7 @@ const QuestionMark = styled.span`
   font-size: 0.875rem;
   margin-left: 8px;
   align-items: center;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   margin-top: 2.5px;
 `;
 
diff --git a/src/components/routingDiagram/RoutingDiagram.tsx b/src/components/routingDiagram/RoutingDiagram.tsx
index 5c3f6b81a..c815d799a 100644
--- a/src/components/routingDiagram/RoutingDiagram.tsx
+++ b/src/components/routingDiagram/RoutingDiagram.tsx
@@ -47,12 +47,12 @@ const DottedLine = styled.div`
 
 const DotColor = styled(DotLine)`
   path {
-    stroke: ${colors.lightGrey};
+    stroke: ${colors.greyLight};
   }
 `;
 // styled(Badge);
 const OpaqueBadge = styled.div`
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   border-radius: 8px;
   display: grid;
   font-size: 0.75rem;
@@ -65,7 +65,7 @@ const OpaqueBadge = styled.div`
 
 const ProtocolBadge = styled.div`
   border-radius: 4px;
-  color: ${colors.lightGrey};
+  color: ${colors.greyLight};
   font-size: 0.625rem;
   padding: 2px 4px;
   /* z-index: {Z_INDEX.sticky + 1}; */
diff --git a/src/components/searchModal/CurrencyList/index.tsx b/src/components/searchModal/CurrencyList/index.tsx
index 93efcc4b3..474372b97 100644
--- a/src/components/searchModal/CurrencyList/index.tsx
+++ b/src/components/searchModal/CurrencyList/index.tsx
@@ -32,7 +32,7 @@ function currencyKey(currency: Currency): string {
   } */
 const StyledFixedSizeList = styled(FixedSizeList)`
   scrollbar-width: thin;
-  scrollbar-color: ${colors.darkGrey} transparent;
+  scrollbar-color: ${colors.greyDark} transparent;
   height: 100%;
 `;
 
@@ -40,7 +40,7 @@ const CheckIcon = styled(Check)`
   height: 20px;
   width: 20px;
   margin-left: 4px;
-  color: ${colors.secondary};
+  color: ${colors.violet};
 `;
 
 const StyledBalanceText = styled(Typography)`
@@ -59,7 +59,7 @@ const CurrencyName = styled(Typography)`
 
 const Tag = styled.div`
   background-color: ${({ theme }) => theme.deprecated_bg3};
-  color: ${colors.lightGrey};
+  color: ${colors.greyLight};
   font-size: 0.875rem;
   border-radius: 4px;
   padding: 0.25rem 0.3rem 0.25rem 0.3rem;
diff --git a/src/components/searchModal/styled.tsx b/src/components/searchModal/styled.tsx
index fdb4c1349..5b7693084 100644
--- a/src/components/searchModal/styled.tsx
+++ b/src/components/searchModal/styled.tsx
@@ -47,7 +47,7 @@ export const SearchInput = styled.input`
   border-radius: 12px;
   color: ${({ theme }) => theme.textPrimary};
   border-style: solid;
-  border: 1px solid ${colors.lightGrey};
+  border: 1px solid ${colors.greyLight};
   -webkit-appearance: none;
 
   font-size: 1rem;
@@ -59,14 +59,14 @@ export const SearchInput = styled.input`
   transition: border 100ms;
   &:focus {
     border: 1px solid ${({ theme }) => theme.accentActiveSoft};
-    background-color: ${colors.lightGrey};
+    background-color: ${colors.greyLight};
     outline: none;
   }
 `;
 export const Separator = styled.div`
   width: 100%;
   height: 1px;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
 `;
 
 export const LoadingRows = styled(BaseLoadingRows)`
diff --git a/src/components/seller/SellerAside.tsx b/src/components/seller/SellerAside.tsx
index 579a5c9c3..1c3f5bae8 100644
--- a/src/components/seller/SellerAside.tsx
+++ b/src/components/seller/SellerAside.tsx
@@ -92,7 +92,7 @@ const AsideLink = styled.li<{ $active?: boolean }>`
     color: ${colors.black};
   }
   svg:first-child {
-    fill: ${(props) => (props.$active ? colors.secondary : colors.black)};
+    fill: ${(props) => (props.$active ? colors.violet : colors.black)};
     width: 1.5rem;
     height: 1.5rem;
   }
@@ -183,7 +183,7 @@ export default function SellerAside(
                     <Icon
                       size={16}
                       weight={isActive ? "regular" : "thin"}
-                      color={isActive ? colors.black : colors.darkGrey}
+                      color={isActive ? colors.black : colors.greyDark}
                     />
                     {collapsed && showWarning && (
                       <WarningCircle size={16} color={colors.orange} />
diff --git a/src/components/seller/SellerExport.tsx b/src/components/seller/SellerExport.tsx
index bca2ec6ac..e1009b005 100644
--- a/src/components/seller/SellerExport.tsx
+++ b/src/components/seller/SellerExport.tsx
@@ -7,7 +7,7 @@ import { colors } from "../../lib/styles/colors";
 import Button from "../ui/Button";
 
 const ExportButton = styled(Button)`
-  color: ${colors.secondary};
+  color: ${colors.violet};
   border: none;
   gap: 0.3125rem;
   > div {
diff --git a/src/components/seller/SellerTags.tsx b/src/components/seller/SellerTags.tsx
index caf779309..24ae6a56d 100644
--- a/src/components/seller/SellerTags.tsx
+++ b/src/components/seller/SellerTags.tsx
@@ -19,7 +19,7 @@ const TagItem = styled.li<{ $active: boolean; $disabled?: boolean }>`
   border-bottom: ${(props) =>
     props.$active ? `1px solid ${colors.black}` : colors.black};
   color: ${(props) =>
-    props.$active ? `1px solid ${colors.black}` : colors.darkGrey};
+    props.$active ? `1px solid ${colors.black}` : colors.greyDark};
   padding: 1.125rem 1.5rem;
   display: flex;
   list-style-type: none;
diff --git a/src/components/seller/SellerWrapper.tsx b/src/components/seller/SellerWrapper.tsx
index e803cdafb..8c901b0a8 100644
--- a/src/components/seller/SellerWrapper.tsx
+++ b/src/components/seller/SellerWrapper.tsx
@@ -5,7 +5,7 @@ import { Typography } from "../ui/Typography";
 const margin = "5.5rem";
 const SellerMain = styled.main`
   padding: 1.375rem 2.5rem 2.75rem 2.5rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   min-height: calc(100vh - ${margin});
   overflow: hidden;
 `;
diff --git a/src/components/seller/common/PaginationPages.tsx b/src/components/seller/common/PaginationPages.tsx
index a78eb4aa5..5fc991eca 100644
--- a/src/components/seller/common/PaginationPages.tsx
+++ b/src/components/seller/common/PaginationPages.tsx
@@ -4,7 +4,7 @@ import { colors } from "../../../lib/styles/colors";
 
 const Span = styled.span`
   font-size: 0.75rem;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   &:not(:last-of-type) {
     margin-right: 1rem;
   }
diff --git a/src/components/seller/dashboard/SellerDashboard.styles.tsx b/src/components/seller/dashboard/SellerDashboard.styles.tsx
index 94da27db2..8cc8a0896 100644
--- a/src/components/seller/dashboard/SellerDashboard.styles.tsx
+++ b/src/components/seller/dashboard/SellerDashboard.styles.tsx
@@ -40,7 +40,7 @@ export const ItemsName = styled(Grid)`
   }
   &:hover {
     * {
-      color: ${colors.secondary};
+      color: ${colors.violet};
     }
     svg {
       margin-right: 0.5rem;
@@ -75,7 +75,7 @@ export const ItemsDates = styled(Typography)`
   }
   > * {
     font-size: 0.75rem;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
     &:first-child {
       font-weight: 600;
     }
diff --git a/src/components/seller/exchanges/SellerAction.tsx b/src/components/seller/exchanges/SellerAction.tsx
index 02f947328..d203178f7 100644
--- a/src/components/seller/exchanges/SellerAction.tsx
+++ b/src/components/seller/exchanges/SellerAction.tsx
@@ -55,7 +55,7 @@ export const SellerResolveDisputeButton = ({
   if (!exchange || status !== "Resolving") {
     return (
       <BosonButton
-        variant="accentInvertedNoBorder"
+        variant="accentInverted"
         size="small"
         onClick={() => {
           if (exchange?.id) {
@@ -107,7 +107,7 @@ export const SellerActionButton = ({
   return (
     <>
       <BosonButton
-        variant="accentInvertedNoBorder"
+        variant="accentInverted"
         size="small"
         onClick={() => {
           if (exchange?.id) {
@@ -119,7 +119,7 @@ export const SellerActionButton = ({
       </BosonButton>
       {status === subgraph.ExchangeState.COMMITTED && (
         <StyledBosonButton
-          variant="accentInvertedNoBorder"
+          variant="accentInverted"
           size="small"
           disabled={!sellerRoles?.isAssistant}
           tooltip="This action is restricted to only the assistant wallet"
diff --git a/src/components/seller/exchanges/SellerExchangeTable.tsx b/src/components/seller/exchanges/SellerExchangeTable.tsx
index 97802cdcb..584707f7c 100644
--- a/src/components/seller/exchanges/SellerExchangeTable.tsx
+++ b/src/components/seller/exchanges/SellerExchangeTable.tsx
@@ -104,7 +104,7 @@ const Table = styled.table`
   border-collapse: collapse;
   .th {
     font-weight: 600;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
     :not([data-sortable]) {
       cursor: default !important;
     }
@@ -144,7 +144,7 @@ const Table = styled.table`
       display: flex;
       &:hover {
         .td {
-          background-color: ${colors.darkGrey}08;
+          background-color: ${colors.greyDark}08;
           cursor: pointer;
         }
       }
@@ -188,7 +188,7 @@ const Pagination = styled.div`
 `;
 const Span = styled.span`
   font-size: 0.75rem;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   &:not(:last-of-type) {
     margin-right: 1rem;
   }
@@ -568,12 +568,10 @@ export default function SellerExchangeTable({
                   themeVal="blank"
                   style={{
                     color:
-                      pageNumber === pageIndex
-                        ? colors.secondary
-                        : colors.black,
+                      pageNumber === pageIndex ? colors.violet : colors.black,
                     background:
                       pageNumber === pageIndex
-                        ? colors.lightGrey
+                        ? colors.greyLight
                         : "transparent"
                   }}
                   onClick={() => gotoPage(pageNumber)}
diff --git a/src/components/seller/products/Actions.tsx b/src/components/seller/products/Actions.tsx
index 50a85a2ba..72ba0dcfa 100644
--- a/src/components/seller/products/Actions.tsx
+++ b/src/components/seller/products/Actions.tsx
@@ -62,15 +62,15 @@ const GlobalStyle = createGlobalStyle`
 .DropdownMenuCheckboxItem[data-disabled],
 .DropdownMenuRadioItem[data-disabled],
 .DropdownMenuSubTrigger[data-disabled] {
-  color: ${colors.lightGrey};
+  color: ${colors.greyLight};
   pointer-events: none;
 }
 .DropdownMenuItem[data-highlighted],
 .DropdownMenuCheckboxItem[data-highlighted],
 .DropdownMenuRadioItem[data-highlighted],
 .DropdownMenuSubTrigger[data-highlighted] {
-  background-color: ${colors.lightGrey};
-  color: ${colors.darkGrey};
+  background-color: ${colors.greyLight};
+  color: ${colors.greyDark};
 }
 
 .DropdownMenuLabel {
diff --git a/src/components/seller/products/SellerProductsTable.tsx b/src/components/seller/products/SellerProductsTable.tsx
index 5053aad9d..a5aff1101 100644
--- a/src/components/seller/products/SellerProductsTable.tsx
+++ b/src/components/seller/products/SellerProductsTable.tsx
@@ -60,7 +60,7 @@ import OfferVariation from "./OfferVariation";
 import { SalesChannels } from "./types";
 
 const TagWrapper = styled.div`
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   display: inline-block;
   padding: 0.5em 0.75em;
   font-size: 0.75rem;
@@ -155,7 +155,7 @@ const Table = styled.table`
   border-collapse: collapse;
   .th {
     font-weight: 600;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
     :not([data-sortable]) {
       cursor: default !important;
     }
@@ -215,7 +215,7 @@ const Table = styled.table`
     .tr {
       &:hover {
         .td {
-          background-color: ${colors.darkGrey}08;
+          background-color: ${colors.greyDark}08;
           cursor: pointer;
         }
       }
@@ -262,7 +262,7 @@ const Pagination = styled.div`
 `;
 const Span = styled.span`
   font-size: 0.75rem;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   &:not(:last-of-type) {
     margin-right: 1rem;
   }
@@ -671,7 +671,7 @@ export default function SellerProductsTable({
                     <Typography
                       tag="span"
                       fontSize="0.75rem"
-                      color={colors.darkGrey}
+                      color={colors.greyDark}
                     >
                       {offer?.additional?.variants.length} variants
                     </Typography>
@@ -1189,12 +1189,10 @@ export default function SellerProductsTable({
                   themeVal="blank"
                   style={{
                     color:
-                      pageNumber === pageIndex
-                        ? colors.secondary
-                        : colors.black,
+                      pageNumber === pageIndex ? colors.violet : colors.black,
                     background:
                       pageNumber === pageIndex
-                        ? colors.lightGrey
+                        ? colors.greyLight
                         : "transparent"
                   }}
                   onClick={() => gotoPage(pageNumber)}
diff --git a/src/components/seller/salesChannels/SalesChannelCard.tsx b/src/components/seller/salesChannels/SalesChannelCard.tsx
index 42e19d5e0..f6f6a4742 100644
--- a/src/components/seller/salesChannels/SalesChannelCard.tsx
+++ b/src/components/seller/salesChannels/SalesChannelCard.tsx
@@ -26,7 +26,7 @@ const Time = styled(Grid)`
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   padding: 0.25rem 0.5rem;
 `;
 
@@ -41,8 +41,8 @@ export const SalesChannelCard: React.FC<SalesChannelCardProps> = ({
   return (
     <StyledGrid flexDirection="column" alignItems="flex-start" padding="1.5rem">
       <Time gap="0.25rem">
-        <Clock size={16} color={colors.secondary} />
-        <Typography fontWeight="600" fontSize="0.75rem" color={colors.darkGrey}>
+        <Clock size={16} color={colors.violet} />
+        <Typography fontWeight="600" fontSize="0.75rem" color={colors.greyDark}>
           {time}
         </Typography>
       </Time>
diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx
index 20c499c40..961467dc4 100644
--- a/src/components/settings/index.tsx
+++ b/src/components/settings/index.tsx
@@ -32,7 +32,7 @@ const Menu = styled.div`
 const MenuFlyout = styled(AutoColumn)`
   min-width: 20.125rem;
   background-color: ${colors.white};
-  border: 1px solid ${colors.lightGrey};
+  border: 1px solid ${colors.greyLight};
   box-shadow:
     0px 0px 1px rgba(0, 0, 0, 0.01),
     0px 4px 8px rgba(0, 0, 0, 0.04),
@@ -76,7 +76,7 @@ const MobileMenuWrapper = styled(Column)<{ open: boolean }>`
   height: min-content;
   width: 100%;
   padding: 8px 16px 24px;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   overflow: hidden;
   position: absolute;
   bottom: ${({ open }) => (open ? `100vh` : 0)};
diff --git a/src/components/settings/maxSlippageSettings/index.tsx b/src/components/settings/maxSlippageSettings/index.tsx
index 98e6cfab0..d7544158e 100644
--- a/src/components/settings/maxSlippageSettings/index.tsx
+++ b/src/components/settings/maxSlippageSettings/index.tsx
@@ -31,7 +31,7 @@ const Option = styled(Grid)<{ isActive: boolean }>`
 const Switch = styled(Grid)`
   width: auto;
   padding: 4px;
-  border: 1px solid ${colors.lightGrey};
+  border: 1px solid ${colors.greyLight};
   border-radius: 16px;
 `;
 
@@ -112,7 +112,7 @@ export default function MaxSlippageSettings({
       onToggle={() => setIsOpen(!isOpen)}
       header={
         <Grid width="auto">
-          <Typography color={colors.darkGrey}>
+          <Typography color={colors.greyDark}>
             <>Max slippage</>
           </Typography>
           <QuestionHelper
diff --git a/src/components/settings/menuButton/index.tsx b/src/components/settings/menuButton/index.tsx
index de26bb358..490c90a69 100644
--- a/src/components/settings/menuButton/index.tsx
+++ b/src/components/settings/menuButton/index.tsx
@@ -42,7 +42,7 @@ const IconContainerWithSlippage = styled(IconContainer)<{
 }>`
   /* TODO: div {
     color: ${({ theme, displayWarning }) =>
-    displayWarning ? theme.accentWarning : colors.lightGrey};
+    displayWarning ? theme.accentWarning : colors.greyLight};
   }
 
   background-color: ${({ theme, displayWarning }) =>
diff --git a/src/components/settings/routerPreferenceSettings/index.tsx b/src/components/settings/routerPreferenceSettings/index.tsx
index 4ae282839..d957f2c9b 100644
--- a/src/components/settings/routerPreferenceSettings/index.tsx
+++ b/src/components/settings/routerPreferenceSettings/index.tsx
@@ -14,7 +14,7 @@ import { updateDisabledUniswapX } from "state/user/reducer";
 import styled from "styled-components";
 
 const InlineLink = styled(Typography)`
-  color: ${colors.secondary};
+  color: ${colors.violet};
   display: inline;
   cursor: pointer;
   &:hover {
@@ -71,7 +71,7 @@ export default function RouterPreferenceSettings() {
       <Grid gap="sm">
         <Grid>
           <Column gap="xs">
-            <Typography color={colors.darkGrey}>
+            <Typography color={colors.greyDark}>
               <>Local routing</>
             </Typography>
           </Column>
diff --git a/src/components/settings/transactionDeadlineSettings/index.tsx b/src/components/settings/transactionDeadlineSettings/index.tsx
index 605a41f6d..078032107 100644
--- a/src/components/settings/transactionDeadlineSettings/index.tsx
+++ b/src/components/settings/transactionDeadlineSettings/index.tsx
@@ -69,7 +69,7 @@ export default function TransactionDeadlineSettings() {
       testId="transaction-deadline-settings"
       header={
         <Grid width="auto">
-          <Typography color={colors.darkGrey}>
+          <Typography color={colors.greyDark}>
             <>Transaction deadline</>
           </Typography>
           <QuestionHelper
diff --git a/src/components/step/MultiSteps.tsx b/src/components/step/MultiSteps.tsx
index 7ee4d42ec..d2aa82e8f 100644
--- a/src/components/step/MultiSteps.tsx
+++ b/src/components/step/MultiSteps.tsx
@@ -44,7 +44,7 @@ export default function MultiSteps({
           <ArrowLeft
             size={32}
             style={{ cursor: active && callback ? "pointer" : "not-allowed" }}
-            color={active === 0 ? colors.lightArrowColor : colors.darkGrey}
+            color={active === 0 ? colors.greyLight2 : colors.greyDark}
             onClick={() => {
               if (active && callback) {
                 callback(active - 1);
@@ -110,9 +110,7 @@ export default function MultiSteps({
         <Grid alignItems="flex-end" width="auto">
           <ArrowRight
             size={32}
-            color={
-              isRightArrowEnabled ? colors.darkGrey : colors.lightArrowColor
-            }
+            color={isRightArrowEnabled ? colors.greyDark : colors.greyLight2}
             style={{ cursor: isRightArrowEnabled ? "pointer" : "not-allowed" }}
             onClick={() => {
               if (
diff --git a/src/components/step/Step.styles.ts b/src/components/step/Step.styles.ts
index 332f949e0..24df12b46 100644
--- a/src/components/step/Step.styles.ts
+++ b/src/components/step/Step.styles.ts
@@ -50,9 +50,9 @@ export const StepStyle = styled.div<{
       ${!disabled &&
       css`
         &:hover {
-          background: ${colors.lightGrey};
+          background: ${colors.greyLight};
           &:before {
-            background: ${colors.darkGrey};
+            background: ${colors.greyDark};
             width: 0.5rem;
             height: 0.5rem;
           }
@@ -151,7 +151,7 @@ export const MultiStepStyle = styled.div<{ $isLteS: boolean }>`
     font-weight: 600;
     font-size: 0.75rem;
     line-height: 1.5;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
   }
 `;
 
diff --git a/src/components/swap/GasBreakdownTooltip.tsx b/src/components/swap/GasBreakdownTooltip.tsx
index 366402a6d..0f71be7a4 100644
--- a/src/components/swap/GasBreakdownTooltip.tsx
+++ b/src/components/swap/GasBreakdownTooltip.tsx
@@ -17,7 +17,7 @@ const Container = styled(AutoColumn)`
 `;
 
 const InlineLink = styled(Typography)`
-  color: ${colors.secondary};
+  color: ${colors.violet};
   display: inline;
   cursor: pointer;
   &:hover {
diff --git a/src/components/swap/SwapDetailsDropdown.tsx b/src/components/swap/SwapDetailsDropdown.tsx
index 1b45720b8..a28eb423a 100644
--- a/src/components/swap/SwapDetailsDropdown.tsx
+++ b/src/components/swap/SwapDetailsDropdown.tsx
@@ -55,7 +55,7 @@ const StyledPollingDot = styled.div`
   min-width: 8px;
   border-radius: 50%;
   position: relative;
-  /* background-color: ${colors.lightGrey}; */
+  /* background-color: ${colors.greyLight}; */
   transition: 250ms ease background-color;
 `;
 
diff --git a/src/components/swap/SwapModalFooter.tsx b/src/components/swap/SwapModalFooter.tsx
index 1ba460958..83017a631 100644
--- a/src/components/swap/SwapModalFooter.tsx
+++ b/src/components/swap/SwapModalFooter.tsx
@@ -176,7 +176,7 @@ export default function SwapModalFooter({
           <Grid>
             <Grid>
               <StyledAlertTriangle size={20} />
-              <Typography //color={colors.secondary}
+              <Typography //color={colors.violet}
               >
                 <>Price updated</>
               </Typography>
diff --git a/src/components/swap/SwapModalHeaderAmount.tsx b/src/components/swap/SwapModalHeaderAmount.tsx
index fe827cb31..369dc01d8 100644
--- a/src/components/swap/SwapModalHeaderAmount.tsx
+++ b/src/components/swap/SwapModalHeaderAmount.tsx
@@ -68,7 +68,7 @@ export function SwapModalHeaderAmount({
             {formatReviewSwapCurrencyAmount(amount)} {currency?.symbol}
           </ResponsiveHeadline>
           {usdAmount && (
-            <Typography color={colors.darkGrey}>
+            <Typography color={colors.greyDark}>
               {formatNumber(usdAmount, NumberType.FiatTokenQuantity)}
             </Typography>
           )}
diff --git a/src/components/swap/pendingModalContent/Logos.tsx b/src/components/swap/pendingModalContent/Logos.tsx
index 23409bf13..ae702393f 100644
--- a/src/components/swap/pendingModalContent/Logos.tsx
+++ b/src/components/swap/pendingModalContent/Logos.tsx
@@ -187,7 +187,7 @@ function SubmittedIcon({ className }: { className?: string }) {
       >
         <path
           d="M26.9997 0.333496C12.2717 0.333496 0.333008 12.2722 0.333008 27.0002C0.333008 41.7282 12.2717 53.6668 26.9997 53.6668C41.7277 53.6668 53.6663 41.7282 53.6663 27.0002C53.6663 12.2722 41.7277 0.333496 26.9997 0.333496ZM36.4131 25.7469C36.0238 26.1362 35.5117 26.3335 34.9997 26.3335C34.4877 26.3335 33.9756 26.1389 33.5863 25.7469L28.9997 21.1603V37.6668C28.9997 38.7708 28.1037 39.6668 26.9997 39.6668C25.8957 39.6668 24.9997 38.7708 24.9997 37.6668V21.1629L20.4131 25.7495C19.6318 26.5308 18.365 26.5308 17.5837 25.7495C16.8023 24.9682 16.8023 23.7014 17.5837 22.9201L25.5837 14.9201C25.7677 14.7361 25.9887 14.5898 26.2341 14.4884C26.722 14.2858 27.274 14.2858 27.762 14.4884C28.0074 14.5898 28.2291 14.7361 28.4131 14.9201L36.4131 22.9201C37.1944 23.7014 37.1944 24.9656 36.4131 25.7469Z"
-          fill={colors.secondary}
+          fill={colors.violet}
         />
       </svg>
     </FadePresence>
diff --git a/src/components/swap/pendingModalContent/index.tsx b/src/components/swap/pendingModalContent/index.tsx
index 5a536348f..7e451b278 100644
--- a/src/components/swap/pendingModalContent/index.tsx
+++ b/src/components/swap/pendingModalContent/index.tsx
@@ -46,7 +46,7 @@ const StepCircle = styled.div<{ active: boolean }>`
   width: 10px;
   border-radius: 50%;
   /* background-color: {({ theme, active }) =>
-    active ? colors.secondary : theme.textTertiary};
+    active ? colors.violet : theme.textTertiary};
   outline: 3px solid
     {({ theme, active }) =>
     active ? theme.accentActionSoft : theme.accentTextLightTertiary}; */
diff --git a/src/components/swap/styled.tsx b/src/components/swap/styled.tsx
index 0a9d187fd..044519594 100644
--- a/src/components/swap/styled.tsx
+++ b/src/components/swap/styled.tsx
@@ -23,9 +23,9 @@ export const PageWrapper = styled.div`
 // Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
 export const SwapWrapper = styled.main<{ chainId?: number }>`
   position: relative;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   border-radius: 24px;
-  border: 1px solid ${colors.lightGrey};
+  border: 1px solid ${colors.greyLight};
   padding: 8px;
   padding-top: 12px;
   box-shadow: ${({ chainId }) =>
@@ -34,7 +34,7 @@ export const SwapWrapper = styled.main<{ chainId?: number }>`
   transition: transform 250ms ease;
 
   &:hover {
-    border: 1px solid ${colors.lightGrey};
+    border: 1px solid ${colors.greyLight};
   }
 `;
 
@@ -45,9 +45,9 @@ export const UniswapPopoverContainer = styled.div`
   font-size: 0.75rem;
   line-height: 16px;
   word-break: break-word;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   border-radius: 20px;
-  border: 1px solid ${colors.lightGrey};
+  border: 1px solid ${colors.greyLight};
   box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
   position: relative;
   overflow: hidden;
@@ -132,11 +132,11 @@ export const UniswapXOptInLargeContainer = styled.div<{ visible: boolean }>`
 
 export const SwapMustache = styled.main`
   position: relative;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   border-radius: 16px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border: 1px solid ${colors.lightGrey};
+  border: 1px solid ${colors.greyLight};
   border-top-width: 0;
   padding: 18px;
   padding-top: calc(12px + 18px);
@@ -165,7 +165,7 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>`
   margin-bottom: -18px;
   margin-left: auto;
   margin-right: auto;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   border: 4px solid;
   border-color: ${colors.white};
 
@@ -224,7 +224,7 @@ export function SwapCallbackError({ error }: { error: ReactNode }) {
 export const SwapShowAcceptChanges = styled(AutoColumn)`
   background-color: ${({ theme }) =>
     transparentize(0.95, theme.deprecated_primary3)};
-  color: ${colors.secondary};
+  color: ${colors.violet};
   padding: 12px;
   border-radius: 12px;
   margin-top: 8px;
diff --git a/src/components/tabs/Tabs.tsx b/src/components/tabs/Tabs.tsx
index 8a0f5b361..204bf0030 100644
--- a/src/components/tabs/Tabs.tsx
+++ b/src/components/tabs/Tabs.tsx
@@ -20,7 +20,7 @@ const TabTitle = styled.div<{ $isActive: boolean }>`
   font-size: 1.15rem;
   border-bottom: 3px solid;
   border-color: ${({ $isActive }) =>
-    $isActive ? colors.secondary : "transparent"};
+    $isActive ? colors.violet : "transparent"};
   font-weight: ${({ $isActive }) => ($isActive ? "600" : "normal")};
 `;
 
diff --git a/src/components/timeline/Timeline.tsx b/src/components/timeline/Timeline.tsx
index e80315b2b..0fc6bc57d 100644
--- a/src/components/timeline/Timeline.tsx
+++ b/src/components/timeline/Timeline.tsx
@@ -38,7 +38,7 @@ const StyledStatus = styled.span`
 `;
 
 const StyledDate = styled.span`
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   font-size: 0.75rem;
 `;
 
diff --git a/src/components/toasts/SuccessTransactionToast.tsx b/src/components/toasts/SuccessTransactionToast.tsx
index 0722f2537..e61a5f9b3 100644
--- a/src/components/toasts/SuccessTransactionToast.tsx
+++ b/src/components/toasts/SuccessTransactionToast.tsx
@@ -25,7 +25,7 @@ export default function SuccessTransactionToast({
         <Typography>{action}</Typography>
         {onViewDetails ? (
           <Typography
-            color={colors.secondary}
+            color={colors.violet}
             style={{
               cursor: "pointer"
             }}
@@ -35,7 +35,7 @@ export default function SuccessTransactionToast({
           </Typography>
         ) : url ? (
           <a href={sanitizeUrl(url)} target="_blank" rel="noopener noreferrer">
-            <Typography color={colors.secondary}>View details</Typography>
+            <Typography color={colors.violet}>View details</Typography>
           </a>
         ) : null}
       </Grid>
diff --git a/src/components/toasts/common/ErrorToast.tsx b/src/components/toasts/common/ErrorToast.tsx
index 7cd1d2ec9..6d4c858a4 100644
--- a/src/components/toasts/common/ErrorToast.tsx
+++ b/src/components/toasts/common/ErrorToast.tsx
@@ -9,7 +9,7 @@ import { Grid } from "../../ui/Grid";
 
 const Close = styled(X)`
   line {
-    stroke: ${colors.darkGrey};
+    stroke: ${colors.greyDark};
   }
 `;
 const StyledButton = styled(Button)`
diff --git a/src/components/toasts/common/LoadingToast.tsx b/src/components/toasts/common/LoadingToast.tsx
index 5a9fa9ec3..84c759aaf 100644
--- a/src/components/toasts/common/LoadingToast.tsx
+++ b/src/components/toasts/common/LoadingToast.tsx
@@ -10,7 +10,7 @@ import Loading from "../../ui/Loading";
 
 const Close = styled(X)`
   line {
-    stroke: ${colors.darkGrey};
+    stroke: ${colors.greyDark};
   }
 `;
 const StyledButton = styled(Button)`
diff --git a/src/components/toasts/common/SuccessToast.tsx b/src/components/toasts/common/SuccessToast.tsx
index 3450f9140..a71566c82 100644
--- a/src/components/toasts/common/SuccessToast.tsx
+++ b/src/components/toasts/common/SuccessToast.tsx
@@ -9,7 +9,7 @@ import { Grid } from "../../ui/Grid";
 
 const Close = styled(X)`
   line {
-    stroke: ${colors.darkGrey};
+    stroke: ${colors.greyDark};
   }
 `;
 const StyledButton = styled(Button)`
diff --git a/src/components/toggle/index.tsx b/src/components/toggle/index.tsx
index c5ba435a0..1f128e9f2 100644
--- a/src/components/toggle/index.tsx
+++ b/src/components/toggle/index.tsx
@@ -5,10 +5,9 @@ import styled, { keyframes } from "styled-components";
 
 const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
   align-items: center;
-  background: ${({ isActive }) =>
-    isActive ? colors.secondary : "transparent"};
+  background: ${({ isActive }) => (isActive ? colors.violet : "transparent")};
   border: ${({ isActive }) =>
-    isActive ? "1px solid transparent" : `1px solid ${colors.darkGrey}`};
+    isActive ? "1px solid transparent" : `1px solid ${colors.greyDark}`};
   border-radius: 20px;
   cursor: pointer;
   display: flex;
@@ -46,8 +45,8 @@ const ToggleElementHoverStyle = (hasBgColor: boolean, isActive?: boolean) =>
       }
     : {
         background: isActive
-          ? lighten(0.15, colors.secondary)
-          : darken(0.05, colors.lightGrey),
+          ? lighten(0.15, colors.violet)
+          : darken(0.05, colors.greyLight),
         color: isActive ? colors.white : colors.black
       };
 
@@ -62,10 +61,10 @@ const ToggleElement = styled.span<{
     ease-in;
   background: ${({ bgColor, isActive }) =>
     isActive
-      ? bgColor ?? lighten(0.09, colors.secondary)
+      ? bgColor ?? lighten(0.09, colors.violet)
       : bgColor
-        ? colors.lightGrey
-        : colors.darkGrey};
+        ? colors.greyLight
+        : colors.greyDark};
   border-radius: 50%;
   height: 24px;
   &:hover {
diff --git a/src/components/tokenSafety/TokenSafetyIcon.tsx b/src/components/tokenSafety/TokenSafetyIcon.tsx
index a1e1e0a00..0b7b03d3f 100644
--- a/src/components/tokenSafety/TokenSafetyIcon.tsx
+++ b/src/components/tokenSafety/TokenSafetyIcon.tsx
@@ -21,7 +21,7 @@ const WarningIcon = styled(WarningTriangle)<{ size?: string }>`
 
 const BlockedIcon = styled(Prohibit)<{ size?: string }>`
   ${WarningIconStyle}
-  color: ${colors.lightGrey};
+  color: ${colors.greyLight};
 `;
 
 export default function TokenSafetyIcon({
diff --git a/src/components/tokenSafety/index.tsx b/src/components/tokenSafety/index.tsx
index f847d133d..1f6ba91bd 100644
--- a/src/components/tokenSafety/index.tsx
+++ b/src/components/tokenSafety/index.tsx
@@ -69,11 +69,11 @@ const StyledCancelButton = styled(Button)`
 `;
 
 const StyledCloseButton = styled(StyledButton)`
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   /* color: ${({ theme }) => theme.textPrimary}; */
 
   &:hover {
-    background-color: ${colors.lightGrey};
+    background-color: ${colors.greyLight};
     opacity: 0.6;
     transition: opacity 250ms ease;
   }
diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
index 0ecb3b484..d59fd3bcd 100644
--- a/src/components/tooltip/Tooltip.tsx
+++ b/src/components/tooltip/Tooltip.tsx
@@ -43,7 +43,7 @@ interface Props extends Omit<TippyProps, "children"> {
 const Button = styled.button`
   ${() => Styles.button};
   display: flex;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   background-color: transparent;
   &:hover {
     color: ${colors.black};
diff --git a/src/components/transactions/TransactionsTable.styles.ts b/src/components/transactions/TransactionsTable.styles.ts
index bbdf47f33..ec4a25550 100644
--- a/src/components/transactions/TransactionsTable.styles.ts
+++ b/src/components/transactions/TransactionsTable.styles.ts
@@ -8,7 +8,7 @@ export const Table = styled.table`
   border-collapse: collapse;
   th {
     font-weight: 600;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
     :not([data-sortable]) {
       cursor: default !important;
     }
@@ -46,7 +46,7 @@ export const Table = styled.table`
     tr {
       &:hover {
         td {
-          background-color: ${colors.darkGrey}08;
+          background-color: ${colors.greyDark}08;
           cursor: pointer;
         }
       }
@@ -99,7 +99,7 @@ export const Pagination = styled.div`
 
 export const Span = styled.span`
   font-size: 0.75rem;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   &:not(:last-of-type) {
     margin-right: 1rem;
   }
diff --git a/src/components/transactions/TransactionsTable.tsx b/src/components/transactions/TransactionsTable.tsx
index f6a7c87b6..c3eeb9fa0 100644
--- a/src/components/transactions/TransactionsTable.tsx
+++ b/src/components/transactions/TransactionsTable.tsx
@@ -101,7 +101,7 @@ export default function TransactionsTable({ transactions }: Props) {
                 fontWeight="600"
                 fontSize="0.75rem"
                 lineHeight="150%"
-                color={colors.secondary}
+                color={colors.violet}
               >
                 View on Explorer
               </Typography>
@@ -273,12 +273,10 @@ export default function TransactionsTable({ transactions }: Props) {
                   themeVal="blank"
                   style={{
                     color:
-                      pageNumber === pageIndex
-                        ? colors.secondary
-                        : colors.black,
+                      pageNumber === pageIndex ? colors.violet : colors.black,
                     background:
                       pageNumber === pageIndex
-                        ? colors.lightGrey
+                        ? colors.greyLight
                         : "transparent"
                   }}
                   onClick={() => gotoPage(pageNumber)}
diff --git a/src/components/ui/BosonButton.tsx b/src/components/ui/BosonButton.tsx
index 912b34ff4..be09c6abf 100644
--- a/src/components/ui/BosonButton.tsx
+++ b/src/components/ui/BosonButton.tsx
@@ -67,7 +67,7 @@ function BosonButton(props: IBosonButton) {
       {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
       {/* @ts-ignore */}
       <Wrapper {...wrapperParams}>
-        <StyledBosonButton {...restProps} disabled={disabled} withBosonStyle>
+        <StyledBosonButton {...restProps} disabled={disabled}>
           <ChildWrapperButton data-child-wrapper-button>
             {props.children}
           </ChildWrapperButton>
diff --git a/src/components/ui/ClearButton.tsx b/src/components/ui/ClearButton.tsx
index 03ddaeb31..f86a94a0a 100644
--- a/src/components/ui/ClearButton.tsx
+++ b/src/components/ui/ClearButton.tsx
@@ -15,7 +15,7 @@ const CrossIcon = (props: Record<string, unknown>) => (
 );
 export const ClearButton = styled(CrossIcon)`
   position: absolute;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   top: 0;
   right: 0;
   height: 100%;
diff --git a/src/components/ui/ExportDropdown.tsx b/src/components/ui/ExportDropdown.tsx
index 14c0586d6..73203ff6d 100644
--- a/src/components/ui/ExportDropdown.tsx
+++ b/src/components/ui/ExportDropdown.tsx
@@ -12,17 +12,17 @@ import Loading from "./Loading";
 
 const ExportButton = styled(Button)`
   && {
-    color: ${colors.secondary};
+    color: ${colors.violet};
     border: none;
     gap: 0.5rem;
-    border: 2px solid ${colors.secondary};
+    border: 2px solid ${colors.violet};
     padding-right: 2.125rem;
     padding-left: 0.75rem;
     position: relative;
     transition: all 300ms ease-in-out;
 
     &:hover:not(:disabled) {
-      background: ${colors.secondary};
+      background: ${colors.violet};
       color: ${colors.white};
       div,
       button {
@@ -51,7 +51,7 @@ const ExportButton = styled(Button)`
       top: 0;
       bottom: 0;
       right: 1.5rem;
-      background: ${colors.secondary};
+      background: ${colors.violet};
       width: 1px;
       height: 100%;
     }
@@ -60,7 +60,7 @@ const ExportButton = styled(Button)`
       height: 0;
       border-left: 0.25rem solid transparent;
       border-right: 0.25rem solid transparent;
-      border-top: 0.5rem solid ${colors.secondary};
+      border-top: 0.5rem solid ${colors.violet};
       top: 50%;
       right: 0.5rem;
       transform: translate(0, -50%);
@@ -85,9 +85,9 @@ const ButtonOptions = styled.div<{ disabled: boolean }>`
   position: relative;
 
   display: inline-block;
-  border: 0.0625rem solid ${colors.secondary};
+  border: 0.0625rem solid ${colors.violet};
   border-top: 0rem;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   font-size: 0.75rem;
   max-width: 7.1875rem;
   text-align: center;
@@ -96,7 +96,7 @@ const ButtonOptions = styled.div<{ disabled: boolean }>`
   z-index: ${zIndex.Select};
   transition: all 300ms ease-in-out;
   &:hover {
-    background-color: ${colors.secondary};
+    background-color: ${colors.violet};
     color: ${colors.white};
   }
   text-decoration: ${({ disabled }) => (disabled ? "line-through;" : "none")};
diff --git a/src/components/ui/Image.tsx b/src/components/ui/Image.tsx
index 80e88b5fb..0c44852f2 100644
--- a/src/components/ui/Image.tsx
+++ b/src/components/ui/Image.tsx
@@ -55,7 +55,7 @@ const ImagePlaceholder = styled.div`
   top: 0;
   height: 100%;
   width: 100%;
-  background-color: ${colors.darkGrey};
+  background-color: ${colors.greyDark};
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/src/components/ui/InputGroup.tsx b/src/components/ui/InputGroup.tsx
index e32c07f7d..4cb1a41cc 100644
--- a/src/components/ui/InputGroup.tsx
+++ b/src/components/ui/InputGroup.tsx
@@ -32,7 +32,7 @@ const TitleContainer = styled.div`
 const SubTitleContainer = styled.div`
   > p {
     font-size: 0.75rem;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
     margin: 0 0 0.75rem 0;
   }
 `;
diff --git a/src/components/ui/Loading.tsx b/src/components/ui/Loading.tsx
index 53b9d0a56..fde9f1bee 100644
--- a/src/components/ui/Loading.tsx
+++ b/src/components/ui/Loading.tsx
@@ -8,7 +8,7 @@ const LoadingPlaceholder = styled.div<{ size: number }>`
   width: ${({ size }) => size}rem;
   min-height: ${({ size }) => size}rem;
   min-width: ${({ size }) => size}rem;
-  border: 5px solid ${colors.secondary};
+  border: 5px solid ${colors.violet};
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;
diff --git a/src/components/ui/SellerID.tsx b/src/components/ui/SellerID.tsx
index a98a9dc16..f9bfa1976 100644
--- a/src/components/ui/SellerID.tsx
+++ b/src/components/ui/SellerID.tsx
@@ -41,7 +41,7 @@ const SellerInfo = styled.div<{ $withBosonStyles?: boolean }>`
   ${({ $withBosonStyles }) =>
     $withBosonStyles
       ? css`
-          color: ${colors.secondary};
+          color: ${colors.violet};
           font-family: ${defaultFontFamily};
         `
       : css`
diff --git a/src/components/ui/Video.tsx b/src/components/ui/Video.tsx
index 8434d36c2..766eb849e 100644
--- a/src/components/ui/Video.tsx
+++ b/src/components/ui/Video.tsx
@@ -75,7 +75,7 @@ const VideoPlaceholder = styled.div<{ $position?: CSSProperties["position"] }>`
   top: 0;
   height: 100%;
   width: 100%;
-  background-color: ${colors.darkGrey};
+  background-color: ${colors.greyDark};
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/src/lib/constants/chainInfo.ts b/src/lib/constants/chainInfo.ts
index bb44a3e0b..edd0328d2 100644
--- a/src/lib/constants/chainInfo.ts
+++ b/src/lib/constants/chainInfo.ts
@@ -20,7 +20,13 @@ import polygonSquareLogoUrl from "assets/svg/polygon_square_logo.svg";
 import polygonMaticLogo from "assets/svg/polygon-matic-logo.svg";
 import ms from "ms";
 
-import { LocalChainId, SupportedL1ChainId, SupportedL2ChainId } from "./chains";
+import {
+  ChainId_BASE_SEPOLIA,
+  ChainId_POLYGON_AMOY,
+  LocalChainId,
+  SupportedL1ChainId,
+  SupportedL2ChainId
+} from "./chains";
 import {
   ARBITRUM_LIST,
   AVALANCHE_LIST,
@@ -205,7 +211,7 @@ const CHAIN_INFO: ChainInfoMap = {
       decimals: 18
     }
   },
-  80002: {
+  [ChainId_POLYGON_AMOY]: {
     networkType: NetworkType.L1,
     blockWaitMsBeforeWarning: ms(`10m`),
     bridge: "https://wallet.polygon.technology/polygon/bridge/deposit",
@@ -304,6 +310,22 @@ const CHAIN_INFO: ChainInfoMap = {
     squareLogoUrl: baseSquareLogo,
     nativeCurrency: { name: "Base Goerli Ether", symbol: "ETH", decimals: 18 }
   },
+  [ChainId_BASE_SEPOLIA]: {
+    networkType: NetworkType.L2,
+    blockWaitMsBeforeWarning: ms(`10m`),
+    bridge: "https://testnets.superbridge.app/base-sepolia",
+    docs: "https://www.base.org",
+    explorer: "https://sepolia.basescan.org/",
+    infoLink: "https://info.uniswap.org/#/base-sepolia/",
+    label: "Base Sepolia",
+    logoUrl: ethereumLogoUrl,
+    nativeCurrency: {
+      name: "Ether",
+      symbol: "ETH",
+      decimals: 18
+    },
+    defaultListUrl: ""
+  },
   [LocalChainId]: {
     networkType: NetworkType.L1,
     docs: "https://docs.uniswap.org/",
diff --git a/src/lib/constants/chains.ts b/src/lib/constants/chains.ts
index 25415cc6e..db3840233 100644
--- a/src/lib/constants/chains.ts
+++ b/src/lib/constants/chains.ts
@@ -6,13 +6,14 @@ import { envChainIds } from "lib/config";
 
 export const LocalChainId = 31337;
 export const ChainId_POLYGON_AMOY = 80002;
+export const ChainId_BASE_SEPOLIA = 84532;
 
 export const UniWalletSupportedChains = [
   ChainId.MAINNET,
   // ChainId.ARBITRUM_ONE,
   // ChainId.OPTIMISM,
-  ChainId.POLYGON
-  // ChainId.BASE
+  ChainId.POLYGON,
+  ChainId.BASE
 ];
 
 export const CHAIN_IDS_TO_NAMES = {
@@ -21,7 +22,7 @@ export const CHAIN_IDS_TO_NAMES = {
   [ChainId.SEPOLIA]: "sepolia",
   [ChainId.POLYGON]: "polygon",
   [ChainId.POLYGON_MUMBAI]: "polygon_mumbai",
-  80002: "polygon_amoy",
+  [ChainId_POLYGON_AMOY]: "polygon_amoy",
   [ChainId.CELO]: "celo",
   [ChainId.CELO_ALFAJORES]: "celo_alfajores",
   [ChainId.ARBITRUM_ONE]: "arbitrum",
@@ -32,6 +33,7 @@ export const CHAIN_IDS_TO_NAMES = {
   [ChainId.AVALANCHE]: "avalanche",
   [ChainId.BASE]: "base",
   [ChainId.BASE_GOERLI]: "base_goerli",
+  [ChainId_BASE_SEPOLIA]: "base_sepolia",
   [LocalChainId]: "local"
 } as const;
 
@@ -41,7 +43,7 @@ export const CHAIN_IDS_TO_FRIENDLY_NAMES = {
   [ChainId.SEPOLIA]: "Sepolia",
   [ChainId.POLYGON]: "Polygon",
   [ChainId.POLYGON_MUMBAI]: "Polygon Mumbai",
-  80002: "Polygon Amoy",
+  [ChainId_POLYGON_AMOY]: "Polygon Amoy",
   [ChainId.CELO]: "Celo",
   [ChainId.CELO_ALFAJORES]: "Celo Alfajores",
   [ChainId.ARBITRUM_ONE]: "Arbitrum",
@@ -52,12 +54,14 @@ export const CHAIN_IDS_TO_FRIENDLY_NAMES = {
   [ChainId.AVALANCHE]: "Avalanche",
   [ChainId.BASE]: "Base",
   [ChainId.BASE_GOERLI]: "Base Goerli",
+  [ChainId_BASE_SEPOLIA]: "Base Sepolia",
   [LocalChainId]: "Local Hardhat"
 } as const;
 
 const SUPPORTED_CHAINS = [
   LocalChainId,
   ChainId_POLYGON_AMOY,
+  ChainId_BASE_SEPOLIA,
   ..._SUPPORTED_CHAINS
 ] as const;
 export declare type SupportedChainsType = (typeof SUPPORTED_CHAINS)[number];
@@ -97,13 +101,13 @@ export function asSupportedChain(
 
 export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [
   ChainId.MAINNET,
-  ChainId.POLYGON
+  ChainId.POLYGON,
   // ChainId.CELO,
   // ChainId.OPTIMISM,
   // ChainId.ARBITRUM_ONE
   // ChainId.BNB,
   // ChainId.AVALANCHE,
-  // ChainId.BASE
+  ChainId.BASE
 ] as const;
 
 export const TESTNET_CHAIN_IDS = [
@@ -111,6 +115,7 @@ export const TESTNET_CHAIN_IDS = [
   ChainId.SEPOLIA,
   ChainId.POLYGON_MUMBAI,
   ChainId_POLYGON_AMOY,
+  ChainId_BASE_SEPOLIA,
   LocalChainId
   // ChainId.ARBITRUM_GOERLI,
   // ChainId.OPTIMISM_GOERLI,
@@ -123,8 +128,8 @@ export const TESTNET_CHAIN_IDS = [
  */
 export const L1_CHAIN_IDS = [
   ChainId.MAINNET,
-  ChainId.GOERLI,
-  // ChainId.SEPOLIA,
+  // ChainId.GOERLI,
+  ChainId.SEPOLIA,
   ChainId.POLYGON,
   ChainId.POLYGON_MUMBAI,
   ChainId_POLYGON_AMOY,
@@ -146,7 +151,8 @@ export const L2_CHAIN_IDS = [
   // ChainId.ARBITRUM_GOERLI,
   // ChainId.OPTIMISM,
   // ChainId.OPTIMISM_GOERLI
-  // ChainId.BASE,
+  ChainId.BASE,
+  ChainId_BASE_SEPOLIA
   // ChainId.BASE_GOERLI
 ] as const;
 
@@ -166,6 +172,8 @@ export function getChainPriority(chainId: number): number {
     case ChainId.POLYGON:
     case ChainId.POLYGON_MUMBAI:
     case ChainId_POLYGON_AMOY:
+    case ChainId.BASE:
+    case ChainId_BASE_SEPOLIA:
       return 1;
     // case ChainId.ARBITRUM_ONE:
     // case ChainId.ARBITRUM_GOERLI:
diff --git a/src/lib/constants/providers.ts b/src/lib/constants/providers.ts
index fa91ea0db..07a0684c9 100644
--- a/src/lib/constants/providers.ts
+++ b/src/lib/constants/providers.ts
@@ -7,7 +7,12 @@ import { ChainId } from "@uniswap/sdk-core";
 import { CONFIG } from "lib/config";
 
 import { AVERAGE_L1_BLOCK_TIME } from "./chainInfo";
-import { CHAIN_IDS_TO_NAMES, SupportedChainsType } from "./chains";
+import {
+  CHAIN_IDS_TO_NAMES,
+  ChainId_BASE_SEPOLIA,
+  ChainId_POLYGON_AMOY,
+  SupportedChainsType
+} from "./chains";
 const RPC_URLS = CONFIG.rpcUrls;
 
 class AppJsonRpcProvider extends StaticJsonRpcProvider {
@@ -75,11 +80,12 @@ export const RPC_PROVIDERS: {
   [ChainId.ARBITRUM_GOERLI]: new AppJsonRpcProvider(ChainId.ARBITRUM_GOERLI),
   [ChainId.POLYGON]: new AppJsonRpcProvider(ChainId.POLYGON),
   [ChainId.POLYGON_MUMBAI]: new AppJsonRpcProvider(ChainId.POLYGON_MUMBAI),
-  80002: new AppJsonRpcProvider(80002),
+  [ChainId_POLYGON_AMOY]: new AppJsonRpcProvider(ChainId_POLYGON_AMOY),
   [ChainId.CELO]: new AppJsonRpcProvider(ChainId.CELO),
   [ChainId.CELO_ALFAJORES]: new AppJsonRpcProvider(ChainId.CELO_ALFAJORES),
   [ChainId.BNB]: new AppJsonRpcProvider(ChainId.BNB),
   [ChainId.AVALANCHE]: new AppJsonRpcProvider(ChainId.AVALANCHE),
   [ChainId.BASE]: new AppJsonRpcProvider(ChainId.BASE),
-  [ChainId.BASE_GOERLI]: new AppJsonRpcProvider(ChainId.BASE_GOERLI)
+  [ChainId.BASE_GOERLI]: new AppJsonRpcProvider(ChainId.BASE_GOERLI),
+  [ChainId_BASE_SEPOLIA]: new AppJsonRpcProvider(ChainId_BASE_SEPOLIA)
 };
diff --git a/src/lib/constants/routing.ts b/src/lib/constants/routing.ts
index e3ea78870..b9c572a29 100644
--- a/src/lib/constants/routing.ts
+++ b/src/lib/constants/routing.ts
@@ -1,6 +1,7 @@
 // a list of tokens by chain
 import { ChainId, Currency, Token } from "@uniswap/sdk-core";
 
+import { ChainId_BASE_SEPOLIA, ChainId_POLYGON_AMOY } from "./chains";
 import {
   ARB,
   BTC_BSC,
@@ -41,6 +42,7 @@ import {
   WBTC_POLYGON,
   WETH_AVALANCHE,
   WETH_POLYGON,
+  WETH_POLYGON_AMOY,
   WETH_POLYGON_MUMBAI,
   WRAPPED_NATIVE_CURRENCY
 } from "./tokens";
@@ -111,6 +113,10 @@ export const COMMON_BASES: ChainCurrencyList = {
     nativeOnChain(ChainId.BASE_GOERLI),
     WRAPPED_NATIVE_CURRENCY[ChainId.BASE_GOERLI] as Token
   ],
+  [ChainId_BASE_SEPOLIA]: [
+    nativeOnChain(ChainId_BASE_SEPOLIA),
+    WRAPPED_NATIVE_CURRENCY[ChainId_BASE_SEPOLIA] as Token
+  ],
   [ChainId.POLYGON]: [
     nativeOnChain(ChainId.POLYGON),
     WETH_POLYGON,
@@ -124,6 +130,11 @@ export const COMMON_BASES: ChainCurrencyList = {
     WRAPPED_NATIVE_CURRENCY[ChainId.POLYGON_MUMBAI] as Token,
     WETH_POLYGON_MUMBAI
   ],
+  [ChainId_POLYGON_AMOY]: [
+    nativeOnChain(ChainId_POLYGON_AMOY),
+    WRAPPED_NATIVE_CURRENCY[ChainId_POLYGON_AMOY] as Token,
+    WETH_POLYGON_AMOY
+  ],
 
   [ChainId.CELO]: [
     nativeOnChain(ChainId.CELO),
diff --git a/src/lib/constants/tokens.ts b/src/lib/constants/tokens.ts
index 4c75d819a..ae3bcae29 100644
--- a/src/lib/constants/tokens.ts
+++ b/src/lib/constants/tokens.ts
@@ -8,7 +8,11 @@ import {
 } from "@uniswap/sdk-core";
 import invariant from "tiny-invariant";
 
-import { LocalChainId } from "./chains";
+import {
+  ChainId_BASE_SEPOLIA,
+  ChainId_POLYGON_AMOY,
+  LocalChainId
+} from "./chains";
 
 export const NATIVE_CHAIN_ID = "NATIVE";
 
@@ -195,6 +199,14 @@ export const WETH_POLYGON_MUMBAI = new Token(
   "Wrapped Ether"
 );
 
+export const WETH_POLYGON_AMOY = new Token(
+  ChainId_POLYGON_AMOY,
+  "0x52eF3d68BaB452a294342DC3e5f464d7f610f72E",
+  18,
+  "WETH",
+  "Wrapped Ether"
+);
+
 export const WETH_POLYGON = new Token(
   ChainId.POLYGON,
   "0x7ceb23fd6bc0add59e62ac25578270cff1b9f619",
@@ -378,6 +390,13 @@ export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } =
       "WETH",
       "Wrapped Ether"
     ),
+    [ChainId_BASE_SEPOLIA]: new Token(
+      ChainId_BASE_SEPOLIA,
+      "0x4200000000000000000000000000000000000006",
+      18,
+      "WETH",
+      "Wrapped Ether"
+    ),
     [ChainId.ARBITRUM_ONE]: new Token(
       ChainId.ARBITRUM_ONE,
       "0x82aF49447D8a07e3bd95BD0d56f35241523fBab1",
@@ -413,9 +432,9 @@ export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } =
       "WMATIC",
       "Wrapped MATIC"
     ),
-    80002: new Token(
-      80002,
-      "0x52eF3d68BaB452a294342DC3e5f464d7f610f72E",
+    [ChainId_POLYGON_AMOY]: new Token(
+      ChainId_POLYGON_AMOY,
+      "0x778f1b662a461695633791d03a77d992c24b588a",
       18,
       "WMATIC",
       "Wrapped MATIC"
@@ -476,8 +495,15 @@ function getCeloNativeCurrency(chainId: number) {
 
 export function isMatic(
   chainId: number
-): chainId is ChainId.POLYGON | ChainId.POLYGON_MUMBAI {
-  return chainId === ChainId.POLYGON_MUMBAI || chainId === ChainId.POLYGON;
+): chainId is
+  | ChainId.POLYGON
+  | ChainId.POLYGON_MUMBAI
+  | typeof ChainId_POLYGON_AMOY {
+  return (
+    chainId === ChainId.POLYGON_MUMBAI ||
+    chainId === ChainId.POLYGON ||
+    chainId === ChainId_POLYGON_AMOY
+  );
 }
 
 class MaticNativeCurrency extends NativeCurrency {
diff --git a/src/lib/styles/GlobalStyle.tsx b/src/lib/styles/GlobalStyle.tsx
index f0e3ed8e3..566ec6c8c 100644
--- a/src/lib/styles/GlobalStyle.tsx
+++ b/src/lib/styles/GlobalStyle.tsx
@@ -1,3 +1,4 @@
+import { cssVars } from "@bosonprotocol/react-kit";
 import { createGlobalStyle } from "styled-components";
 
 import barlowRegular from "../../assets/fonts/Barlow-Regular.ttf";
@@ -47,21 +48,19 @@ const GlobalStyle = createGlobalStyle<{
     --headerTextColor: ${(props) =>
       props.$headerTextColor && !props.$withBosonStyles
         ? props.$headerTextColor
-        : colors.darkGrey};
+        : colors.greyDark};
     --primary: ${(props) =>
       props.$primaryBgColor && !props.$withBosonStyles
         ? props.$primaryBgColor
-        : colors.primary};
+        : colors.green};
     --secondary: ${(props) =>
       props.$secondaryBgColor && !props.$withBosonStyles
         ? props.$secondaryBgColor
-        : colors.lightGrey};
+        : colors.greyLight};
     --accent: ${(props) =>
       props.$accentColor && !props.$withBosonStyles
         ? props.$accentColor
-        : colors.accent};
-    --accentNoDefault : ${(props) =>
-      props.$accentColor && !props.$withBosonStyles ? props.$accentColor : ""};
+        : colors.violet};
     --accentDark: ${(props) =>
       props.$accentColor && !props.$withBosonStyles
         ? props.$accentColor
@@ -73,11 +72,11 @@ const GlobalStyle = createGlobalStyle<{
     --primaryBgColor: ${(props) =>
       props.$primaryBgColor && !props.$withBosonStyles
         ? props.$primaryBgColor
-        : colors.primaryBgColor};
+        : colors.white};
     --secondaryBgColor: ${(props) =>
       props.$secondaryBgColor && !props.$withBosonStyles
         ? props.$secondaryBgColor
-        : colors.secondary};
+        : colors.violet};
     --footerBgColor: ${(props) =>
       props.$footerBgColor && !props.$withBosonStyles
         ? props.$footerBgColor
@@ -89,7 +88,7 @@ const GlobalStyle = createGlobalStyle<{
     --buttonBgColor: ${(props) =>
       props.$buttonBgColor && !props.$withBosonStyles
         ? props.$buttonBgColor
-        : colors.primary};
+        : colors.green};
     --buttonTextColor: ${(props) =>
       props.$buttonTextColor && !props.$withBosonStyles
         ? props.$buttonTextColor
@@ -103,6 +102,8 @@ const GlobalStyle = createGlobalStyle<{
         ? props.$lowerCardBgColor
         : colors.white};
 
+    ${cssVars};
+
     font-size: 0.75rem;
     ${breakpoint.xs} {
       font-size: 0.75rem;
diff --git a/src/lib/styles/colors.ts b/src/lib/styles/colors.ts
index 99c3d346c..d314aa306 100644
--- a/src/lib/styles/colors.ts
+++ b/src/lib/styles/colors.ts
@@ -1,3 +1 @@
-import { theme } from "@bosonprotocol/react-kit";
-
-export const colors = theme.colors.light;
+export { colors } from "@bosonprotocol/react-kit";
diff --git a/src/lib/styles/preventCustomStoreStyles.ts b/src/lib/styles/preventCustomStoreStyles.ts
index 52105fc3f..3be2da4a0 100644
--- a/src/lib/styles/preventCustomStoreStyles.ts
+++ b/src/lib/styles/preventCustomStoreStyles.ts
@@ -4,18 +4,17 @@ import { colors } from "./colors";
 
 export const PreventCustomStoreStyles = styled.div`
   --headerBgColor: ${colors.white};
-  --headerTextColor: ${colors.darkGrey};
-  --primary: ${colors.primary};
-  --secondary: ${colors.lightGrey};
-  --accent: ${colors.accent};
-  --accentNoDefault: initial;
+  --headerTextColor: ${colors.greyDark};
+  --primary: ${colors.green};
+  --secondary: ${colors.greyLight};
+  --accent: ${colors.violet};
   --accentDark: ${colors.arsenic};
   --textColor: ${colors.black};
-  --primaryBgColor: ${colors.primaryBgColor};
-  --secondaryBgColor: ${colors.secondary};
+  --primaryBgColor: ${colors.white};
+  --secondaryBgColor: ${colors.violet};
   --footerBgColor: ${colors.black};
   --footerTextColor: ${colors.white};
-  --buttonBgColor: ${colors.primary};
+  --buttonBgColor: ${colors.green};
   --buttonTextColor: ${colors.black};
   --upperCardBgColor: ${colors.white};
   --lowerCardBgColor: ${colors.white};
diff --git a/src/lib/utils/hooks/useCSSVariable.ts b/src/lib/utils/hooks/useCSSVariable.ts
index 0581b33f3..768286195 100644
--- a/src/lib/utils/hooks/useCSSVariable.ts
+++ b/src/lib/utils/hooks/useCSSVariable.ts
@@ -1,3 +1,4 @@
+import { CssVarKeys } from "@bosonprotocol/react-kit";
 import { useEffect, useState } from "react";
 
 // all css variables can be found in src/components/app/index.tsx
@@ -8,7 +9,6 @@ export const useCSSVariable = (
     | "--primary"
     | "--secondary"
     | "--accent"
-    | "--accentNoDefault"
     | "--accentDark"
     | "--textColor"
     | "--primaryBgColor"
@@ -19,12 +19,17 @@ export const useCSSVariable = (
     | "--buttonTextColor"
     | "--upperCardBgColor"
     | "--lowerCardBgColor"
+    | CssVarKeys
 ) => {
   const [value, setValue] = useState<string>();
   useEffect(() => {
-    setValue(
-      getComputedStyle(document.documentElement).getPropertyValue(variableName)
-    );
+    const computedCssVar = getComputedStyle(
+      document.documentElement
+    ).getPropertyValue(variableName);
+    if (!computedCssVar) {
+      console.error(`CSS variable ${variableName} is not defined`);
+    }
+    setValue(computedCssVar);
   }, [variableName]);
   return value;
 };
diff --git a/src/pages/chat/Chat.tsx b/src/pages/chat/Chat.tsx
index 10bce590f..39238f91f 100644
--- a/src/pages/chat/Chat.tsx
+++ b/src/pages/chat/Chat.tsx
@@ -60,7 +60,7 @@ const SimpleMessage = styled.p`
   width: 100%;
   height: 100%;
   padding: 1rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
 `;
 
 export default function Chat() {
diff --git a/src/pages/chat/components/ButtonProposal/ButtonProposal.tsx b/src/pages/chat/components/ButtonProposal/ButtonProposal.tsx
index 2ed17019a..a15fddacb 100644
--- a/src/pages/chat/components/ButtonProposal/ButtonProposal.tsx
+++ b/src/pages/chat/components/ButtonProposal/ButtonProposal.tsx
@@ -9,11 +9,11 @@ import { FileWithEncodedData } from "../../../../lib/utils/files";
 import { NewProposal } from "../../types";
 
 const StyledButton = styled.button`
-  border: 3px solid ${colors.secondary};
+  border: 3px solid ${colors.violet};
   padding: 0.75rem 2.5rem 0.75rem 1.2rem;
   font-size: 0.875rem;
   font-weight: 600;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   background-color: transparent;
   position: relative;
   cursor: pointer;
diff --git a/src/pages/chat/components/ExchangeSidePreview.tsx b/src/pages/chat/components/ExchangeSidePreview.tsx
index 559920b19..b6f2b36b8 100644
--- a/src/pages/chat/components/ExchangeSidePreview.tsx
+++ b/src/pages/chat/components/ExchangeSidePreview.tsx
@@ -70,7 +70,7 @@ const Container = styled.div<{ $disputeOpen: boolean }>`
   right: ${({ $disputeOpen }) => ($disputeOpen ? "0" : "-160vw")};
   transition: 400ms;
   width: ${({ $disputeOpen }) => $disputeOpen && "100vw"};
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   ${breakpoint.m} {
     padding-top: 0;
     width: 100%;
@@ -118,7 +118,7 @@ const sectionStyles = css`
   ${breakpoint.l} {
     background: ${colors.white};
   }
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
 `;
 const Section = styled.div`
   ${sectionStyles};
@@ -272,7 +272,7 @@ const getOfferDetailData = (
         ) : (
           <Typography
             tag="p"
-            color={colors.accent}
+            color={colors.violet}
             fontSize={fontSizeExchangePolicy}
             alignItems="center"
           >
diff --git a/src/pages/chat/components/Message.tsx b/src/pages/chat/components/Message.tsx
index 66ea0010a..c6ca3e746 100644
--- a/src/pages/chat/components/Message.tsx
+++ b/src/pages/chat/components/Message.tsx
@@ -121,7 +121,7 @@ const Bottom = styled.div<{ $isLeftAligned: boolean }>`
   align-items: center;
   * {
     color: ${({ $isLeftAligned }) =>
-      $isLeftAligned ? colors.lightGrey : colors.darkGrey};
+      $isLeftAligned ? colors.greyLight : colors.greyDark};
     font-size: 0.75rem;
   }
 `;
diff --git a/src/pages/chat/components/MessageList.tsx b/src/pages/chat/components/MessageList.tsx
index eb983a213..d34612bb7 100644
--- a/src/pages/chat/components/MessageList.tsx
+++ b/src/pages/chat/components/MessageList.tsx
@@ -66,7 +66,7 @@ const BackToSellerCenterButton = styled.button`
   background: unset;
   padding: unset;
   border: unset;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   z-index: ${zIndex.LandingTitle};
 `;
 
diff --git a/src/pages/chat/components/MessageSeparator.tsx b/src/pages/chat/components/MessageSeparator.tsx
index 2126843ce..64872ffe4 100644
--- a/src/pages/chat/components/MessageSeparator.tsx
+++ b/src/pages/chat/components/MessageSeparator.tsx
@@ -14,7 +14,7 @@ const Separator = styled.div`
   z-index: ${zIndex.Default};
   div:nth-of-type(1) {
     width: max-content;
-    background-color: ${colors.darkGreyTimeStamp};
+    background-color: ${colors.greyLight};
     padding: 0.25rem 1rem 0.25rem 1rem;
     display: block;
     margin: 0 auto;
@@ -24,7 +24,7 @@ const Separator = styled.div`
     font-size: 0.75rem;
     &:before {
       position: absolute;
-      background-color: ${colors.lightGrey};
+      background-color: ${colors.greyLight};
       left: -0.625rem;
       height: 100%;
       width: 0.625rem;
@@ -32,7 +32,7 @@ const Separator = styled.div`
     }
     &:after {
       position: absolute;
-      background-color: ${colors.lightGrey};
+      background-color: ${colors.greyLight};
       right: -0.625rem;
       height: 100%;
       width: 0.625rem;
@@ -42,7 +42,7 @@ const Separator = styled.div`
   div:nth-of-type(2) {
     width: calc(100% - 2.5rem);
     height: 0.125rem;
-    background-color: ${colors.darkGreyTimeStamp};
+    background-color: ${colors.greyLight};
     z-index: ${zIndex.Default};
     position: relative;
     margin-left: auto;
diff --git a/src/pages/chat/components/MessagesDisputesToggle.tsx b/src/pages/chat/components/MessagesDisputesToggle.tsx
index d41c2f4cf..4f1abcdee 100644
--- a/src/pages/chat/components/MessagesDisputesToggle.tsx
+++ b/src/pages/chat/components/MessagesDisputesToggle.tsx
@@ -12,7 +12,7 @@ const StyledButton = styled(Button)<{ $isActive: boolean }>`
     css`
       && {
         border-color: transparent;
-        background-color: ${colors.lightGrey};
+        background-color: ${colors.greyLight};
       }
     `}
 `;
diff --git a/src/pages/chat/components/ProgressBar.tsx b/src/pages/chat/components/ProgressBar.tsx
index d571e48ad..ea20810e1 100644
--- a/src/pages/chat/components/ProgressBar.tsx
+++ b/src/pages/chat/components/ProgressBar.tsx
@@ -24,7 +24,7 @@ const commonStyles = css`
   right: 0;
   top: 0;
   bottom: 0;
-  border: 1px solid ${colors.lightGrey};
+  border: 1px solid ${colors.greyLight};
   padding: 0.5rem;
   width: 100%;
 `;
@@ -39,7 +39,7 @@ const Back = styled.div<{ $backgroundColor: CSSProperties["background"] }>`
 const Front = styled.div<{ $progress: number }>`
   ${commonStyles};
   color: ${colors.black};
-  background: ${darken(0.05, colors.lightGrey)};
+  background: ${darken(0.05, colors.greyLight)};
   clip-path: inset(0 0 0 ${({ $progress }) => $progress}%);
   transition: clip-path 1s linear;
 `;
diff --git a/src/pages/chat/components/UploadForm/UploadForm.tsx b/src/pages/chat/components/UploadForm/UploadForm.tsx
index b1ec88437..59e66fea7 100644
--- a/src/pages/chat/components/UploadForm/UploadForm.tsx
+++ b/src/pages/chat/components/UploadForm/UploadForm.tsx
@@ -17,7 +17,7 @@ export default function UploadForm() {
         <Info size={20} />
       </Grid>
       <Grid margin="0.25rem 0 0.75rem 0">
-        <Typography color={colors.darkGrey} fontSize="0.75rem">
+        <Typography color={colors.greyDark} fontSize="0.75rem">
           File format: PDF, PNG, JPG <br />
           Max. file size: {MAX_FILE_SIZE / (1024 * 1024)}MB
         </Typography>
diff --git a/src/pages/chat/components/conversation/ChatConversation.tsx b/src/pages/chat/components/conversation/ChatConversation.tsx
index 6c11f7860..f972f5182 100644
--- a/src/pages/chat/components/conversation/ChatConversation.tsx
+++ b/src/pages/chat/components/conversation/ChatConversation.tsx
@@ -119,7 +119,7 @@ const SimpleMessage = styled.p`
   width: 100%;
   height: 100%;
   padding: 1rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
 `;
 
 const GridHeader = styled.div`
@@ -142,7 +142,7 @@ const HeaderButton = styled.button`
   background: none;
   padding: none;
   border: none;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   z-index: ${zIndex.LandingTitle};
 `;
 
@@ -151,7 +151,7 @@ const NavigationMobile = styled.div`
   align-items: flex-end;
   justify-content: space-between;
   svg {
-    color: ${colors.secondary};
+    color: ${colors.violet};
     margin-right: 0.438rem;
     margin-bottom: -0.1875rem;
   }
diff --git a/src/pages/chat/components/conversation/ChatInfoBox/DaysLeftToResolve.tsx b/src/pages/chat/components/conversation/ChatInfoBox/DaysLeftToResolve.tsx
index 849a82dc5..f4067aaae 100644
--- a/src/pages/chat/components/conversation/ChatInfoBox/DaysLeftToResolve.tsx
+++ b/src/pages/chat/components/conversation/ChatInfoBox/DaysLeftToResolve.tsx
@@ -42,7 +42,7 @@ export const DaysLeftToResolve: React.FC<DaysLeftToResolveProps> = ({
       {showText && (
         <Typography
           padding="1rem"
-          background={colors.lightGrey}
+          background={colors.greyLight}
           flexDirection="column"
           style={{ width: "100%", position: "relative" }}
         >
diff --git a/src/pages/chat/components/conversation/ChatInfoBox/DrHasDecided.tsx b/src/pages/chat/components/conversation/ChatInfoBox/DrHasDecided.tsx
index 7cb8d40b1..07558d8da 100644
--- a/src/pages/chat/components/conversation/ChatInfoBox/DrHasDecided.tsx
+++ b/src/pages/chat/components/conversation/ChatInfoBox/DrHasDecided.tsx
@@ -56,7 +56,7 @@ export const DrHasDecided: React.FC<DrHasDecidedProps> = ({
     <Grid flexDirection="column" padding="1rem 1rem 0 1rem" gap="1rem">
       <Typography
         padding="1rem"
-        background={colors.lightGrey}
+        background={colors.greyLight}
         flexDirection="column"
         style={{ width: "100%", position: "relative" }}
       >
diff --git a/src/pages/chat/components/conversation/ChatInfoBox/ProposalButtons.tsx b/src/pages/chat/components/conversation/ChatInfoBox/ProposalButtons.tsx
index 8b63ed83d..beb18eba3 100644
--- a/src/pages/chat/components/conversation/ChatInfoBox/ProposalButtons.tsx
+++ b/src/pages/chat/components/conversation/ChatInfoBox/ProposalButtons.tsx
@@ -44,7 +44,7 @@ export const ProposalButtons: React.FC<ProposalButtonsProps> = ({
       {showText && (
         <Typography
           padding="1rem"
-          background={colors.lightGrey}
+          background={colors.greyLight}
           flexDirection="column"
           style={{ width: "100%", position: "relative" }}
         >
diff --git a/src/pages/chat/components/conversation/ChatInfoBox/YouHaveAccepted.tsx b/src/pages/chat/components/conversation/ChatInfoBox/YouHaveAccepted.tsx
index 079aae6d9..3665fd1a3 100644
--- a/src/pages/chat/components/conversation/ChatInfoBox/YouHaveAccepted.tsx
+++ b/src/pages/chat/components/conversation/ChatInfoBox/YouHaveAccepted.tsx
@@ -55,7 +55,7 @@ export const YouHaveAccepted: React.FC<YouHaveAcceptedProps> = ({
     <Grid flexDirection="column" padding="1rem 1rem 0 1rem" gap="1rem">
       <Typography
         padding="1rem"
-        background={colors.lightGrey}
+        background={colors.greyLight}
         flexDirection="column"
         style={{ width: "100%", position: "relative" }}
       >
diff --git a/src/pages/chat/components/conversation/ChatInput.tsx b/src/pages/chat/components/conversation/ChatInput.tsx
index db2902517..b68e20fed 100644
--- a/src/pages/chat/components/conversation/ChatInput.tsx
+++ b/src/pages/chat/components/conversation/ChatInput.tsx
@@ -49,7 +49,7 @@ const InputWrapper = styled.div`
 const Input = styled.div`
   width: 100%;
   font-size: 1rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   height: max-content;
   font-family: ${defaultFontFamily};
   font-style: normal;
diff --git a/src/pages/chat/components/conversation/Messages.tsx b/src/pages/chat/components/conversation/Messages.tsx
index aaf3e891d..4a68e2444 100644
--- a/src/pages/chat/components/conversation/Messages.tsx
+++ b/src/pages/chat/components/conversation/Messages.tsx
@@ -16,7 +16,7 @@ import MessageSeparator from "../MessageSeparator";
 import { SellerComponent } from "./SellerComponent";
 
 const Container = styled.div<{ $overflow: string }>`
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   overflow: ${({ $overflow }) => $overflow};
   display: flex;
   flex-direction: column-reverse;
@@ -25,7 +25,7 @@ const Container = styled.div<{ $overflow: string }>`
 
 const LoadingContainer = styled.div`
   display: flex;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   justify-content: center;
   align-items: center;
   width: 100%;
@@ -39,7 +39,7 @@ const Conversation = styled.div<{ $alignStart: boolean }>`
   align-items: ${({ $alignStart }) =>
     $alignStart ? "flex-start" : "flex-end"};
   flex-grow: 1;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   padding-bottom: 1.875rem;
   position: relative;
 `;
diff --git a/src/pages/common/CommunityRules.tsx b/src/pages/common/CommunityRules.tsx
index 4ede3ecaf..e5f8d2766 100644
--- a/src/pages/common/CommunityRules.tsx
+++ b/src/pages/common/CommunityRules.tsx
@@ -8,7 +8,7 @@ import { colors } from "../../lib/styles/colors";
 
 const Wrapper = styled(Grid)`
   a {
-    color: ${colors.secondary};
+    color: ${colors.violet};
     text-decoration: none;
     transition: all 150ms ease-in-out;
     &:hover {
@@ -70,7 +70,7 @@ const Title = styled.h1`
   display: inline-block;
   text-align: center;
 
-  color: ${colors.secondary};
+  color: ${colors.violet};
   margin: 4rem 0 1rem 0;
   font-weight: 800;
 `;
diff --git a/src/pages/common/OfferFullDescription.tsx b/src/pages/common/OfferFullDescription.tsx
index e26938501..f58581813 100644
--- a/src/pages/common/OfferFullDescription.tsx
+++ b/src/pages/common/OfferFullDescription.tsx
@@ -77,7 +77,6 @@ export const OfferFullDescription: React.FC<OfferFullDescriptionProps> = (
         defaultCurrencyTicker: CONFIG.defaultCurrency.ticker,
         licenseTemplate: CONFIG.rNFTLicenseTemplate,
         minimumDisputeResolutionPeriodDays: CONFIG.minimumDisputePeriodInDays,
-        walletConnectProjectId: CONFIG.walletConnect.projectId,
         ipfsProjectId: CONFIG.infuraProjectId,
         ipfsProjectSecret: CONFIG.infuraProjectSecret,
         contactSellerForExchangeUrl: "",
diff --git a/src/pages/common/PrivacyPolicy.tsx b/src/pages/common/PrivacyPolicy.tsx
index 9e8dffb0f..99582132e 100644
--- a/src/pages/common/PrivacyPolicy.tsx
+++ b/src/pages/common/PrivacyPolicy.tsx
@@ -8,7 +8,7 @@ import { colors } from "../../lib/styles/colors";
 
 const Wrapper = styled(Grid)`
   a {
-    color: ${colors.secondary};
+    color: ${colors.violet};
     text-decoration: none;
     transition: all 150ms ease-in-out;
     &:hover {
@@ -55,7 +55,7 @@ const Title = styled.h1`
   display: inline-block;
   text-align: center;
 
-  color: ${colors.secondary};
+  color: ${colors.violet};
   margin: 4rem 0 1rem 0;
   font-weight: 800;
 `;
@@ -121,7 +121,7 @@ const Table = styled.table`
       }
       &:hover {
         td {
-          background: ${colors.lightGrey};
+          background: ${colors.greyLight};
         }
       }
     }
@@ -1398,7 +1398,7 @@ export default function PrivacyPolicy() {
           </List>
         </li>
       </List>
-      <Typography color={colors.secondary} tag="h4">
+      <Typography color={colors.violet} tag="h4">
         ANNEX A
       </Typography>
       <Typography color={colors.grey} tag="h6" fontWeight="400" margin="0">
diff --git a/src/pages/common/PrivacyPolicyDrCenter.tsx b/src/pages/common/PrivacyPolicyDrCenter.tsx
index b4d7e5e54..5a4c01f5e 100644
--- a/src/pages/common/PrivacyPolicyDrCenter.tsx
+++ b/src/pages/common/PrivacyPolicyDrCenter.tsx
@@ -8,7 +8,7 @@ import { colors } from "../../lib/styles/colors";
 
 const Wrapper = styled(Grid)`
   a {
-    color: ${colors.secondary};
+    color: ${colors.violet};
     text-decoration: none;
     transition: all 150ms ease-in-out;
     &:hover {
@@ -55,7 +55,7 @@ const Title = styled.h1`
   display: inline-block;
   text-align: center;
 
-  color: ${colors.secondary};
+  color: ${colors.violet};
   margin: 4rem 0 1rem 0;
   font-weight: 800;
 `;
@@ -121,7 +121,7 @@ const Table = styled.table`
       }
       &:hover {
         td {
-          background: ${colors.lightGrey};
+          background: ${colors.greyLight};
         }
       }
     }
@@ -1384,7 +1384,7 @@ export default function PrivacyPolicyDrCenter() {
           </List>
         </li>
       </List>
-      <Typography color={colors.secondary} tag="h4">
+      <Typography color={colors.violet} tag="h4">
         ANNEX A
       </Typography>
       <Typography color={colors.grey} tag="h6" fontWeight="400" margin="0">
diff --git a/src/pages/common/TermsAndConditions.tsx b/src/pages/common/TermsAndConditions.tsx
index 8f8e7f594..2af048d40 100644
--- a/src/pages/common/TermsAndConditions.tsx
+++ b/src/pages/common/TermsAndConditions.tsx
@@ -10,7 +10,7 @@ import { colors } from "../../lib/styles/colors";
 
 const Wrapper = styled(Grid)`
   a {
-    color: ${colors.secondary};
+    color: ${colors.violet};
     text-decoration: none;
     transition: all 150ms ease-in-out;
     &:hover {
@@ -72,7 +72,7 @@ const Title = styled.h1`
   display: inline-block;
   text-align: center;
 
-  color: ${colors.secondary};
+  color: ${colors.violet};
   margin: 4rem 0 1rem 0;
   font-weight: 800;
 `;
@@ -178,7 +178,7 @@ export default function TermsAndConditions() {
         or issues.
       </Text>
       <Break />
-      <Typography tag="h3" fontWeight="400" color={colors.secondary}>
+      <Typography tag="h3" fontWeight="400" color={colors.violet}>
         AGREEMENT
       </Typography>
       <List>
diff --git a/src/pages/common/TermsAndConditionsDrCenter.tsx b/src/pages/common/TermsAndConditionsDrCenter.tsx
index c90b3e0ee..d8f610799 100644
--- a/src/pages/common/TermsAndConditionsDrCenter.tsx
+++ b/src/pages/common/TermsAndConditionsDrCenter.tsx
@@ -10,7 +10,7 @@ import { colors } from "../../lib/styles/colors";
 
 const Wrapper = styled(Grid)`
   a {
-    color: ${colors.secondary};
+    color: ${colors.violet};
     text-decoration: none;
     transition: all 150ms ease-in-out;
     &:hover {
@@ -69,7 +69,7 @@ const Title = styled.h1`
   display: inline-block;
   text-align: center;
 
-  color: ${colors.secondary};
+  color: ${colors.violet};
   margin: 4rem 0 1rem 0;
   font-weight: 800;
 `;
@@ -167,7 +167,7 @@ export default function TermsAndConditionsDrCenter() {
         or issues.
       </Text>
       <Break />
-      <Typography tag="h3" fontWeight="400" color={colors.secondary}>
+      <Typography tag="h3" fontWeight="400" color={colors.violet}>
         AGREEMENT
       </Typography>
       <List>
diff --git a/src/pages/create-product/AgreeToTermsAndSellerAgreement.tsx b/src/pages/create-product/AgreeToTermsAndSellerAgreement.tsx
index 410ee4d70..8205323d1 100644
--- a/src/pages/create-product/AgreeToTermsAndSellerAgreement.tsx
+++ b/src/pages/create-product/AgreeToTermsAndSellerAgreement.tsx
@@ -12,7 +12,7 @@ const VariantsGrid = styled.div`
   grid-template-columns: repeat(3, 1fr);
   margin: 1rem 0 2rem 0;
   * {
-    border: 1px solid ${colors.lightGrey};
+    border: 1px solid ${colors.greyLight};
     padding: 0.5rem;
   }
 `;
diff --git a/src/pages/create-product/congratulations/CardCTA.tsx b/src/pages/create-product/congratulations/CardCTA.tsx
index 44d66d665..007955394 100644
--- a/src/pages/create-product/congratulations/CardCTA.tsx
+++ b/src/pages/create-product/congratulations/CardCTA.tsx
@@ -22,7 +22,7 @@ const StyledGrid = styled(Grid)<{ $cardTheme: CardCTAProps["cardTheme"] }>`
       `;
     }
     return css`
-      background: ${colors.lightGrey};
+      background: ${colors.greyLight};
     `;
   }}
 `;
diff --git a/src/pages/create-product/congratulations/Congratulations.tsx b/src/pages/create-product/congratulations/Congratulations.tsx
index 92f4a792e..e246d0777 100644
--- a/src/pages/create-product/congratulations/Congratulations.tsx
+++ b/src/pages/create-product/congratulations/Congratulations.tsx
@@ -226,7 +226,7 @@ export const Congratulations: React.FC<CongratulationsProps> = ({
           }}
         >
           <CardCTA
-            icon={<Megaphone color={colors.secondary} />}
+            icon={<Megaphone color={colors.violet} />}
             title="Add a sales channel"
             text="Adding more sales channels expands the reach of your products by selling them  across different destinations."
             cta={
@@ -241,12 +241,12 @@ export const Congratulations: React.FC<CongratulationsProps> = ({
                   });
                 }}
               >
-                Add a sales channel <Plus color={colors.secondary} size={20} />
+                Add a sales channel <Plus color={colors.violet} size={20} />
               </Button>
             }
           />
           <CardCTA
-            icon={<Storefront color={colors.secondary} />}
+            icon={<Storefront color={colors.violet} />}
             title="Create new products"
             text="Create new products and benefits to grow revenues and engage new audiences."
             cta={
@@ -256,7 +256,7 @@ export const Congratulations: React.FC<CongratulationsProps> = ({
                   goToCreateNewProduct();
                 }}
               >
-                Create new products <Plus color={colors.secondary} size={20} />
+                Create new products <Plus color={colors.violet} size={20} />
               </Button>
             }
           />
@@ -267,7 +267,7 @@ export const Congratulations: React.FC<CongratulationsProps> = ({
               text="Provide funds  in the seller pool for your offer to go live. Funds in the pool will apply to all your products."
               cta={
                 <Button
-                  themeVal="bosonPrimary"
+                  themeVal="primary"
                   onClick={() => {
                     navigateTo({
                       pathname: getSellerCenterPath("Finances")
diff --git a/src/pages/create-product/congratulations/CongratulationsPage.tsx b/src/pages/create-product/congratulations/CongratulationsPage.tsx
index 1b1e1fa30..9e499bc69 100644
--- a/src/pages/create-product/congratulations/CongratulationsPage.tsx
+++ b/src/pages/create-product/congratulations/CongratulationsPage.tsx
@@ -8,7 +8,7 @@ import { Congratulations, CongratulationsProps } from "./Congratulations";
 type CongratulationsPageProps = CongratulationsProps;
 
 const Background = styled.div`
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   width: 100vw;
   transform: translate(-50%);
   margin-left: 50%;
diff --git a/src/pages/create-product/congratulations/CreateProductCongratulations.tsx b/src/pages/create-product/congratulations/CreateProductCongratulations.tsx
index 495251422..cd94e9134 100644
--- a/src/pages/create-product/congratulations/CreateProductCongratulations.tsx
+++ b/src/pages/create-product/congratulations/CreateProductCongratulations.tsx
@@ -184,7 +184,7 @@ export const CreateProductCongratulations: React.FC<
           }}
         >
           <CardCTA
-            icon={<Megaphone color={colors.secondary} />}
+            icon={<Megaphone color={colors.violet} />}
             title="Add Sales Channels"
             text="You can now add more Sales Channels to promote and sell your product at different places."
             cta={
@@ -199,12 +199,12 @@ export const CreateProductCongratulations: React.FC<
                   });
                 }}
               >
-                Add a Sales Channel <Plus color={colors.secondary} size={20} />
+                Add a Sales Channel <Plus color={colors.violet} size={20} />
               </Button>
             }
           />
           <CardCTA
-            icon={<Storefront color={colors.secondary} />}
+            icon={<Storefront color={colors.violet} />}
             title="Create new product"
             text="Save time when creating multiple products. You can add new channels and pay your deposits later."
             cta={
@@ -214,7 +214,7 @@ export const CreateProductCongratulations: React.FC<
                   goToCreateNewProduct();
                 }}
               >
-                Create new product <Plus color={colors.secondary} size={20} />
+                Create new product <Plus color={colors.violet} size={20} />
               </Button>
             }
           />
@@ -225,7 +225,7 @@ export const CreateProductCongratulations: React.FC<
               text="You must provide funds to cover your seller deposit. For multiple products you can do all at once."
               cta={
                 <Button
-                  themeVal="bosonPrimary"
+                  themeVal="primary"
                   onClick={() => {
                     navigateTo({
                       pathname: getSellerCenterPath("Finances")
diff --git a/src/pages/custom-store/CustomStoreFormContent.tsx b/src/pages/custom-store/CustomStoreFormContent.tsx
index c80d91be0..044ee02ee 100644
--- a/src/pages/custom-store/CustomStoreFormContent.tsx
+++ b/src/pages/custom-store/CustomStoreFormContent.tsx
@@ -544,7 +544,7 @@ export default function CustomStoreFormContent({ hasSubmitError }: Props) {
                   name={storeFields.bannerSwitch}
                   label={({ toggleFormValue, checked }) => (
                     <Typography
-                      color={colors.secondary}
+                      color={colors.violet}
                       fontSize="0.8rem"
                       onClick={() => toggleFormValue?.()}
                       cursor="pointer"
diff --git a/src/pages/custom-store/manage/ManageStoreFrontsPage.tsx b/src/pages/custom-store/manage/ManageStoreFrontsPage.tsx
index eedb78d9d..dbc95e234 100644
--- a/src/pages/custom-store/manage/ManageStoreFrontsPage.tsx
+++ b/src/pages/custom-store/manage/ManageStoreFrontsPage.tsx
@@ -103,7 +103,7 @@ const DeleteButton = ({
 
 const StoreFrontItem = styled.li`
   list-style-type: none;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   padding: 2rem;
   width: 100%;
 `;
diff --git a/src/pages/custom-store/store-fields.ts b/src/pages/custom-store/store-fields.ts
index 5b870541e..957b4491e 100644
--- a/src/pages/custom-store/store-fields.ts
+++ b/src/pages/custom-store/store-fields.ts
@@ -515,13 +515,13 @@ export const initialValues: Yup.InferType<typeof validationSchema> = {
   [storeFields.headerBgColor]: colors.white,
   [storeFields.headerTextColor]: colors.black,
   [storeFields.primaryBgColor]: colors.white,
-  [storeFields.secondaryBgColor]: colors.lightGrey,
+  [storeFields.secondaryBgColor]: colors.greyLight,
   [storeFields.accentColor]: "",
   [storeFields.textColor]: colors.black,
   // [storeFields.footerBgColor]: colors.black,
   [storeFields.upperCardBgColor]: colors.white,
   [storeFields.lowerCardBgColor]: colors.white,
-  [storeFields.buttonBgColor]: colors.primary,
+  [storeFields.buttonBgColor]: colors.green,
   [storeFields.buttonTextColor]: colors.black,
   [storeFields.footerTextColor]: colors.white,
   [storeFields.fontFamily]: formModel.formFields.fontFamily.options.find(
diff --git a/src/pages/custom-store/styles.tsx b/src/pages/custom-store/styles.tsx
index fad2b3c47..08e4f4456 100644
--- a/src/pages/custom-store/styles.tsx
+++ b/src/pages/custom-store/styles.tsx
@@ -9,7 +9,7 @@ export const Section = styled.div`
   line-height: 0.945rem;
   text-transform: uppercase;
   padding: 0.8125rem 0;
-  color: ${colors.grey3};
+  color: ${colors.greyLight4};
 `;
 
 export const FieldTitle = styled.div`
@@ -28,7 +28,7 @@ export const FieldDescription = styled(Typography)`
   font-size: 0.75rem;
   line-height: 150%;
   font-feature-settings: "zero" on;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
 `;
 export const gapBetweenInputs = "2rem";
 export const subFieldsMarginLeft = "4rem";
diff --git a/src/pages/dcl/DCLPage.tsx b/src/pages/dcl/DCLPage.tsx
index bbb8fa148..e450ba1d3 100644
--- a/src/pages/dcl/DCLPage.tsx
+++ b/src/pages/dcl/DCLPage.tsx
@@ -60,7 +60,7 @@ const iconStyle: CSSProperties = {
   margin: "1.1875rem",
   position: "absolute",
   top: 0,
-  color: colors.darkGrey
+  color: colors.greyDark
 };
 const iconSize = 32;
 
diff --git a/src/pages/dcl/steps/details/DetailsStep.tsx b/src/pages/dcl/steps/details/DetailsStep.tsx
index 7e106547b..8b47554aa 100644
--- a/src/pages/dcl/steps/details/DetailsStep.tsx
+++ b/src/pages/dcl/steps/details/DetailsStep.tsx
@@ -91,7 +91,7 @@ export const DetailsStep: React.FC<DetailsStepProps> = ({ goToNextStep }) => {
                     fontWeight="600"
                     fontSize="1rem"
                     margin="1.5rem 0"
-                    color={colors.darkGrey}
+                    color={colors.greyDark}
                   >
                     Your own land
                   </Typography>
@@ -126,7 +126,7 @@ export const DetailsStep: React.FC<DetailsStepProps> = ({ goToNextStep }) => {
                     fontWeight="600"
                     fontSize="1rem"
                     margin="1.5rem 0"
-                    color={colors.darkGrey}
+                    color={colors.greyDark}
                   >
                     Boson Boulevard
                   </Typography>
diff --git a/src/pages/dispute-centre/DisputeCenterPage.tsx b/src/pages/dispute-centre/DisputeCenterPage.tsx
index 2bcbe16a1..90f31e6dd 100644
--- a/src/pages/dispute-centre/DisputeCenterPage.tsx
+++ b/src/pages/dispute-centre/DisputeCenterPage.tsx
@@ -26,7 +26,7 @@ import { useExchanges } from "../../lib/utils/hooks/useExchanges";
 import { goToViewMode, ViewMode } from "../../lib/viewMode";
 
 const DisputeListHeader = styled.div`
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   width: 100vw;
   translate: -50%;
   margin-left: 50%;
diff --git a/src/pages/dispute-centre/RaiseDisputePage.tsx b/src/pages/dispute-centre/RaiseDisputePage.tsx
index e16e6bc83..a3be4fb14 100644
--- a/src/pages/dispute-centre/RaiseDisputePage.tsx
+++ b/src/pages/dispute-centre/RaiseDisputePage.tsx
@@ -83,7 +83,7 @@ const ItemWidget = styled.div``;
 
 const DisputeContainer = styled(Grid)`
   height: 100%;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
 `;
 
 const GetStartedBox = styled.div<{ isLteS: boolean }>`
@@ -213,9 +213,7 @@ function RaiseDisputePage() {
           <Grid alignItems="center" style={{ flex: "1 1 0" }}>
             <ArrowLeft
               size={32}
-              color={
-                currentStep === 0 ? colors.lightArrowColor : colors.darkGrey
-              }
+              color={currentStep === 0 ? colors.greyLight2 : colors.greyDark}
               onClick={() => {
                 goToViewMode(
                   ViewMode.DAPP,
diff --git a/src/pages/explore/ExploreSelect.tsx b/src/pages/explore/ExploreSelect.tsx
index 439b727d8..f7cc02db2 100644
--- a/src/pages/explore/ExploreSelect.tsx
+++ b/src/pages/explore/ExploreSelect.tsx
@@ -54,7 +54,7 @@ const customStyles: StylesConfig<
     borderRadius: 0,
     boxShadow: "none",
     ":hover": {
-      borderColor: colors.secondary,
+      borderColor: colors.violet,
       borderWidth: "0"
     },
     background: "none",
@@ -82,8 +82,8 @@ const customStyles: StylesConfig<
     cursor: state.isDisabled ? "not-allowed" : "pointer",
     opacity: state.isDisabled ? "0.5" : "1",
     background:
-      state.isSelected || state.isFocused ? colors.lightGrey : colors.white,
-    color: state.isSelected ? colors.secondary : colors.black
+      state.isSelected || state.isFocused ? colors.greyLight : colors.white,
+    color: state.isSelected ? colors.violet : colors.black
   }),
   indicatorSeparator: () => ({
     display: "none"
diff --git a/src/pages/landing/FeaturedOffers.tsx b/src/pages/landing/FeaturedOffers.tsx
index edba10fc9..b4192c1ca 100644
--- a/src/pages/landing/FeaturedOffers.tsx
+++ b/src/pages/landing/FeaturedOffers.tsx
@@ -85,7 +85,6 @@ const FeaturedOffers: React.FC<IFeaturedOffers> = ({
         isError={isError}
         isLoading={isLoading}
         numOffers={numOffers}
-        action="commit"
         showInvalidOffers={false}
         itemsPerRow={{
           xs: 1,
diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx
index 9fe233db2..c77f9c1b0 100644
--- a/src/pages/landing/Landing.tsx
+++ b/src/pages/landing/Landing.tsx
@@ -88,7 +88,7 @@ const ExploreProductsButton = styled(BosonButton)`
 `;
 
 const LandingContainer = styled.div`
-  border: 2px solid ${colors.lightGrey};
+  border: 2px solid ${colors.greyLight};
   border-radius: 0.5rem;
   background-color: ${colors.white};
   margin-bottom: 3.813rem;
diff --git a/src/pages/profile/ProfilePage.styles.tsx b/src/pages/profile/ProfilePage.styles.tsx
index 1d9cd0634..60cb9b2e0 100644
--- a/src/pages/profile/ProfilePage.styles.tsx
+++ b/src/pages/profile/ProfilePage.styles.tsx
@@ -100,7 +100,7 @@ export const AddressContainer = styled.div`
   flex-basis: 50%;
   margin-top: 0.5rem;
   [data-addrest-text] {
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
     font-size: 1.25rem;
   }
   ${breakpoint.s} {
@@ -119,7 +119,7 @@ export const SocialIconContainer = styled.div`
   display: flex;
   align-items: center;
   svg {
-    color: ${colors.secondary};
+    color: ${colors.violet};
     vertical-align: bottom;
   }
 `;
@@ -147,7 +147,7 @@ export const DetailShareWrapper = styled.div`
 export const LoadingWrapper = styled.div`
   padding: 2rem;
   text-align: center;
-  color: ${colors.secondary};
+  color: ${colors.violet};
 `;
 
 export const ProductGridContainer = styled(GridContainer)`
diff --git a/src/pages/profile/common/ReadMore.tsx b/src/pages/profile/common/ReadMore.tsx
index 8988340bf..cefbdd196 100644
--- a/src/pages/profile/common/ReadMore.tsx
+++ b/src/pages/profile/common/ReadMore.tsx
@@ -8,11 +8,11 @@ import { useBreakpoints } from "../../../lib/utils/hooks/useBreakpoints";
 
 const ReadMoreContainer = styled.div`
   margin-bottom: 2rem;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
 `;
 
 const ReadMoreButton = styled(Button)`
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   outline: none;
   border: none;
   padding: 0;
diff --git a/src/pages/profile/seller/Offers.tsx b/src/pages/profile/seller/Offers.tsx
index d537cdd79..4fe4a1e27 100644
--- a/src/pages/profile/seller/Offers.tsx
+++ b/src/pages/profile/seller/Offers.tsx
@@ -3,7 +3,6 @@ import { useMemo } from "react";
 import OfferList from "../../../components/offers/OfferList";
 import { Profile } from "../../../lib/utils/hooks/lens/graphql/generated";
 import { ExtendedSeller } from "../../explore/WithAllOffers";
-import { Action } from "./const";
 
 interface Props {
   products: ExtendedSeller;
@@ -11,7 +10,6 @@ interface Props {
     sellerId: string;
     lensProfile?: Profile;
   };
-  action: Action;
   showInvalidOffers: boolean;
   isPrivateProfile: boolean;
   isLoading: boolean;
@@ -19,7 +17,6 @@ interface Props {
 
 export default function Offers({
   products,
-  action,
   showInvalidOffers,
   isPrivateProfile,
   isLoading,
@@ -36,7 +33,6 @@ export default function Offers({
       offers={allOffers}
       isError={false}
       showSeller={false}
-      action={action}
       showInvalidOffers={showInvalidOffers}
       isPrivateProfile={isPrivateProfile}
       itemsPerRow={{
diff --git a/src/pages/profile/seller/OpenSeaLogo.tsx b/src/pages/profile/seller/OpenSeaLogo.tsx
index 9c152499b..7fa368a99 100644
--- a/src/pages/profile/seller/OpenSeaLogo.tsx
+++ b/src/pages/profile/seller/OpenSeaLogo.tsx
@@ -44,15 +44,15 @@ export default function OpenSeaLogo() {
         d="M90 45C90 69.8514 69.8514 90 45 90C20.1486 90 0 69.8514 0 45C0 20.1486 20.1486 0 45 0C69.8566 0 90 20.1486 90 45Z"
         fill="transparent"
         stroke-width="8px"
-        stroke={colors.secondary}
+        stroke={colors.violet}
       />
       <path
         d="M22.2011 46.512L22.3952 46.2069L34.1015 27.8939C34.2726 27.6257 34.6748 27.6535 34.8043 27.9447C36.7599 32.3277 38.4475 37.7786 37.6569 41.1721C37.3194 42.5683 36.3947 44.4593 35.3544 46.2069C35.2204 46.4612 35.0724 46.7109 34.9152 46.9513C34.8413 47.0622 34.7164 47.127 34.5823 47.127H22.5432C22.2195 47.127 22.03 46.7756 22.2011 46.512Z"
-        fill={colors.secondary}
+        fill={colors.violet}
       />
       <path
         d="M74.38 49.9149V52.8137C74.38 52.9801 74.2783 53.1281 74.1303 53.1928C73.2242 53.5812 70.1219 55.0052 68.832 56.799C65.5402 61.3807 63.0251 67.932 57.4031 67.932H33.9489C25.6362 67.932 18.9 61.1727 18.9 52.8322V52.564C18.9 52.3421 19.0803 52.1618 19.3022 52.1618H32.377C32.6359 52.1618 32.8255 52.4022 32.8024 52.6565C32.7099 53.5072 32.8671 54.3764 33.2693 55.167C34.046 56.7435 35.655 57.7283 37.3933 57.7283H43.866V52.675H37.4673C37.139 52.675 36.9449 52.2959 37.1344 52.0277C37.2038 51.9214 37.2824 51.8104 37.3656 51.6856C37.9712 50.8257 38.8358 49.4895 39.6957 47.9684C40.2829 46.9421 40.8516 45.8463 41.3093 44.746C41.4018 44.5472 41.4757 44.3438 41.5497 44.1449C41.6745 43.7936 41.804 43.4653 41.8964 43.1371C41.9889 42.8597 42.0629 42.5684 42.1369 42.2956C42.3542 41.3617 42.4466 40.3723 42.4466 39.3459C42.4466 38.9437 42.4281 38.523 42.3911 38.1207C42.3727 37.6815 42.3172 37.2423 42.2617 36.8031C42.2247 36.4147 42.1554 36.031 42.0814 35.6288C41.9889 35.0416 41.8595 34.4591 41.7115 33.8719L41.6607 33.65C41.5497 33.2478 41.4572 32.864 41.3278 32.4618C40.9625 31.1996 40.5418 29.9698 40.098 28.8186C39.9362 28.3609 39.7512 27.9217 39.5663 27.4825C39.2935 26.8213 39.0161 26.2203 38.7618 25.6516C38.6324 25.3927 38.5214 25.1569 38.4105 24.9165C38.2856 24.6437 38.1562 24.371 38.0267 24.112C37.9343 23.9132 37.8279 23.7283 37.7539 23.5434L36.9634 22.0824C36.8524 21.8836 37.0373 21.6478 37.2546 21.7079L42.2016 23.0487H42.2155C42.2247 23.0487 42.2293 23.0533 42.234 23.0533L42.8858 23.2336L43.6025 23.437L43.866 23.511V20.5706C43.866 19.1512 45.0033 18 46.4088 18C47.1116 18 47.7496 18.2866 48.2073 18.7536C48.665 19.2206 48.9517 19.8586 48.9517 20.5706V24.935L49.4787 25.0829C49.5203 25.0968 49.5619 25.1153 49.5989 25.143C49.7284 25.2401 49.9133 25.3835 50.1491 25.5591C50.334 25.7071 50.5328 25.8874 50.7733 26.0723C51.2495 26.4561 51.8181 26.9508 52.4423 27.5194C52.6087 27.6628 52.7705 27.8107 52.9185 27.9587C53.7229 28.7076 54.6245 29.5861 55.4844 30.557C55.7248 30.8297 55.9606 31.1071 56.201 31.3984C56.4415 31.6943 56.6957 31.9856 56.9177 32.2769C57.2089 32.6652 57.5233 33.0674 57.7961 33.4882C57.9255 33.687 58.0735 33.8904 58.1983 34.0892C58.5497 34.6209 58.8595 35.1711 59.1554 35.7212C59.2802 35.9755 59.4096 36.2529 59.5206 36.5257C59.8488 37.2608 60.1078 38.0098 60.2742 38.7588C60.3251 38.9206 60.362 39.0963 60.3805 39.2535V39.2904C60.436 39.5124 60.4545 39.7482 60.473 39.9886C60.547 40.756 60.51 41.5235 60.3435 42.2956C60.2742 42.6239 60.1817 42.9336 60.0708 43.2619C59.9598 43.5763 59.8488 43.9045 59.7055 44.2143C59.4281 44.8569 59.0999 45.4996 58.7115 46.1006C58.5867 46.3225 58.4387 46.5583 58.2908 46.7802C58.129 47.016 57.9625 47.238 57.8146 47.4553C57.6112 47.7327 57.3939 48.0239 57.1719 48.2828C56.9731 48.5556 56.7697 48.8284 56.5478 49.0688C56.238 49.434 55.9421 49.7808 55.6324 50.1137C55.4474 50.331 55.2486 50.5529 55.0452 50.7517C54.8464 50.9736 54.643 51.1724 54.458 51.3573C54.1483 51.6671 53.8894 51.9075 53.6721 52.1063L53.1635 52.5733C53.0895 52.638 52.9924 52.675 52.8907 52.675H48.9517V57.7283H53.9079C55.0175 57.7283 56.0716 57.3353 56.9223 56.6141C57.2135 56.3598 58.485 55.2594 59.9876 53.5997C60.0384 53.5442 60.1031 53.5026 60.1771 53.4841L73.8668 49.5265C74.1211 49.4525 74.38 49.6467 74.38 49.9149Z"
-        fill={colors.secondary}
+        fill={colors.violet}
       />
     </svg>
   );
diff --git a/src/pages/profile/seller/Seller.tsx b/src/pages/profile/seller/Seller.tsx
index 3e3ac18c0..0b916ef76 100644
--- a/src/pages/profile/seller/Seller.tsx
+++ b/src/pages/profile/seller/Seller.tsx
@@ -46,7 +46,7 @@ const SellerCalculationContainer = styled.div`
 const LensTitle = styled(Typography)`
   font-weight: 600;
   margin: 0.5rem 0 0 0;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   ${breakpoint.s} {
     margin: 0 0.5rem 0 0;
     font-size: 1rem;
@@ -56,20 +56,20 @@ const LensTitle = styled(Typography)`
 const SellerButton = styled.div`
   margin-left: 0.75rem;
   padding: 0.25rem 1rem;
-  border: 2px solid ${colors.secondary};
-  color: ${colors.secondary};
+  border: 2px solid ${colors.violet};
+  color: ${colors.violet};
   cursor: pointer;
   &:hover {
     color: ${colors.white};
-    background: ${colors.secondary};
+    background: ${colors.violet};
     a {
       color: ${colors.white};
     }
   }
   a {
-    color: ${colors.secondary};
+    color: ${colors.violet};
     &:hover {
-      background: ${colors.secondary};
+      background: ${colors.violet};
       color: ${colors.white};
     }
   }
@@ -293,7 +293,7 @@ export default function Seller() {
                     tag="p"
                     fontSize={!isLteXS ? "0.75rem" : "1.25rem"}
                     margin="0"
-                    color={colors.darkGrey}
+                    color={colors.greyDark}
                   >
                     Products
                   </Typography>
diff --git a/src/pages/profile/seller/SellerImagesSection.tsx b/src/pages/profile/seller/SellerImagesSection.tsx
index 3598f399e..ba492814b 100644
--- a/src/pages/profile/seller/SellerImagesSection.tsx
+++ b/src/pages/profile/seller/SellerImagesSection.tsx
@@ -72,7 +72,7 @@ const StyledBannerImage = styled.img<{
 }>`
   pointer-events: auto;
   max-width: 100%;
-  border: 1px solid ${colors.lightGrey};
+  border: 1px solid ${colors.greyLight};
   transform: none !important;
   height: 100%;
   width: 100%;
diff --git a/src/pages/profile/seller/SellerImagesSectionView.tsx b/src/pages/profile/seller/SellerImagesSectionView.tsx
index fb04921a2..500229369 100644
--- a/src/pages/profile/seller/SellerImagesSectionView.tsx
+++ b/src/pages/profile/seller/SellerImagesSectionView.tsx
@@ -78,7 +78,7 @@ export const SellerImagesSectionView: React.FC<SellerImagesSectionProps> = ({
       <StyledBannerImage
         src={coverImageUrl || whiteImg}
         data-cover-img
-        style={{ border: `1px solid ${colors.lightGrey}` }}
+        style={{ border: `1px solid ${colors.greyLight}` }}
         $objectFit={metadataCoverImage?.fit}
         $objectPosition={metadataCoverImage?.position}
       />
diff --git a/src/pages/profile/seller/Tabs.tsx b/src/pages/profile/seller/Tabs.tsx
index 17a4e7125..867e3e37c 100644
--- a/src/pages/profile/seller/Tabs.tsx
+++ b/src/pages/profile/seller/Tabs.tsx
@@ -135,7 +135,6 @@ export default function Tabs({
           <Offers
             products={products}
             seller={seller}
-            action={isPrivateProfile ? null : "commit"}
             showInvalidOffers={isPrivateProfile}
             isPrivateProfile={isPrivateProfile}
             isLoading={isLoading}
diff --git a/src/pages/profile/seller/const.ts b/src/pages/profile/seller/const.ts
deleted file mode 100644
index 7ceec8d6a..000000000
--- a/src/pages/profile/seller/const.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Action = "commit" | "redeem" | "contact-seller" | null;
diff --git a/src/pages/sell/landing/Card.tsx b/src/pages/sell/landing/Card.tsx
index 53b4ee827..fed3028f0 100644
--- a/src/pages/sell/landing/Card.tsx
+++ b/src/pages/sell/landing/Card.tsx
@@ -6,7 +6,7 @@ import { Typography } from "../../../components/ui/Typography";
 import { colors } from "../../../lib/styles/colors";
 
 const StyledGrid = styled(Grid)`
-  background: ${colors.lightGrey2};
+  background: ${colors.greyLight};
   padding: 1.5rem;
   color: initial;
   &:hover {
diff --git a/src/pages/sell/landing/SellerLandingPage.tsx b/src/pages/sell/landing/SellerLandingPage.tsx
index 6fd603271..eb5543fd7 100644
--- a/src/pages/sell/landing/SellerLandingPage.tsx
+++ b/src/pages/sell/landing/SellerLandingPage.tsx
@@ -30,7 +30,7 @@ const Title = styled(Typography)`
 `;
 
 const Background = styled.div`
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   width: 100%;
   margin-bottom: 5rem;
 `;
diff --git a/src/pages/swap/UniswapXOptIn.tsx b/src/pages/swap/UniswapXOptIn.tsx
index 7cf302db0..645778977 100644
--- a/src/pages/swap/UniswapXOptIn.tsx
+++ b/src/pages/swap/UniswapXOptIn.tsx
@@ -35,9 +35,9 @@ export const Arrow = styled.div`
     z-index: 9998;
 
     content: "";
-    border: 1px solid ${colors.lightGrey};
+    border: 1px solid ${colors.greyLight};
     transform: rotate(45deg);
-    background: ${colors.lightGrey};
+    background: ${colors.greyLight};
   }
 
   &.arrow-top {
diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx
index b686c3f43..50e21f4b7 100644
--- a/src/pages/swap/index.tsx
+++ b/src/pages/swap/index.tsx
@@ -99,9 +99,9 @@ export const ArrowContainer = styled.div`
 `;
 
 const SwapSection = styled.div`
-  /* background-color: ${colors.darkGrey}; */
+  /* background-color: ${colors.greyDark}; */
   border-radius: 16px;
-  color: ${colors.lightGrey};
+  color: ${colors.greyLight};
   font-size: 0.875remå;
   font-weight: 500;
   height: 120px;
@@ -130,7 +130,7 @@ const SwapSection = styled.div`
   }
 
   &:focus-within:before {
-    /* border-color: ${opacify(24, colors.lightGrey)}; */
+    /* border-color: ${opacify(24, colors.greyLight)}; */
   }
 `;
 
@@ -774,7 +774,7 @@ export function Swap({
                   style={{ padding: "0 1rem" }}
                 >
                   <ArrowWrapper clickable={false}>
-                    <ArrowDown size="16" color={colors.lightGrey} />
+                    <ArrowDown size="16" color={colors.greyLight} />
                   </ArrowWrapper>
                   <Button
                     id="remove-recipient-button"
diff --git a/src/theme.ts b/src/theme.ts
index e3a9820af..fa69497c2 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,19 +1,21 @@
 import "styled-components";
 
-import {
-  BaseTagsInputProps,
-  theme as bosonTheme
-} from "@bosonprotocol/react-kit";
+import { BaseTagsInputProps, getThemes } from "@bosonprotocol/react-kit";
 import { colors } from "lib/styles/colors";
-
-const theme = {
-  ...bosonTheme
-};
+export const themeVars = {
+  roundness: "min",
+  themeKey: "light"
+} as const;
+const theme = getThemes({ roundness: themeVars.roundness })[themeVars.themeKey];
 
 export const inputTheme = {
-  background: colors.lightGrey,
+  background: colors.greyLight,
   borderColor: colors.border,
   borderRadius: 0,
+  color: undefined,
+  placeholder: {
+    color: undefined
+  },
   focus: {
     caretColor: "initial"
   },