diff --git a/package-lock.json b/package-lock.json
index 75115a514..8e6751eac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,13 +9,15 @@
       "version": "0.1.0",
       "dependencies": {
         "@bosonprotocol/chat-sdk": "^1.3.1-alpha.1",
-        "@bosonprotocol/react-kit": "^0.17.3",
+        "@bosonprotocol/react-kit": "^0.17.4-alpha.2",
         "@davatar/react": "^1.10.4",
         "@ethersproject/address": "^5.6.1",
         "@ethersproject/units": "^5.6.1",
         "@glidejs/glide": "^3.5.2",
         "@graphql-codegen/fragment-matcher": "^3.3.1",
         "@popperjs/core": "^2.11.5",
+        "@radix-ui/react-dropdown-menu": "^2.0.5",
+        "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-progress": "^1.0.0",
         "@radix-ui/react-switch": "^1.0.2",
         "@radix-ui/react-toast": "^1.0.0",
@@ -72,7 +74,7 @@
         "react-router-dom": "^6.4.0",
         "react-scripts": "^5.0.1",
         "react-select": "^5.4.0",
-        "react-swipeable": "^7.0.0",
+        "react-swipeable": "^7.0.1",
         "react-table": "^7.8.0",
         "react-uuid": "^1.0.3",
         "rehype-raw": "^6.1.1",
@@ -1934,11 +1936,11 @@
       }
     },
     "node_modules/@bosonprotocol/common": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.22.0.tgz",
-      "integrity": "sha512-2EhCyEjJLlCtQ3wlWbs1vLeWrvpU7Q2X7YZ6AcFz+Z+PBQufWw7/E6NUKGcofZ5v87s62kLX30gnW9KbjT1AnA==",
+      "version": "1.22.1-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.22.1-alpha.2.tgz",
+      "integrity": "sha512-0RfKZh7GdMXZkzMHAfnpz9poRrDPfxGAIdlRbq5a37WrKNztYpEpkuZNBpcFUFoDA/yDE36kaauknux0iYeLBg==",
       "dependencies": {
-        "@bosonprotocol/metadata": "^1.9.0",
+        "@bosonprotocol/metadata": "^1.10.0-alpha.2",
         "@ethersproject/abi": "^5.5.0",
         "@ethersproject/address": "^5.5.0",
         "@ethersproject/bignumber": "^5.5.0",
@@ -1948,11 +1950,11 @@
       }
     },
     "node_modules/@bosonprotocol/core-sdk": {
-      "version": "1.25.3",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.25.3.tgz",
-      "integrity": "sha512-1py2WTAOCZCcGIMJ0OCeFN8NKRCuyP6qzrQp7mq8SxOgnRJC4KfTloPTk3uMDHgL0xugK9Xd5U1+J3w1OMfoYA==",
+      "version": "1.26.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.26.0-alpha.2.tgz",
+      "integrity": "sha512-zJMIswTRReiUdr7JCd5cyTlyk0PG6hLfGvJOsL1TFxb123s7wNXVBSZlH8L9bdzveOAHNEC6CZLXAEz8+Q80jA==",
       "dependencies": {
-        "@bosonprotocol/common": "^1.22.0",
+        "@bosonprotocol/common": "^1.22.1-alpha.2",
         "@ethersproject/abi": "^5.5.0",
         "@ethersproject/address": "^5.5.0",
         "@ethersproject/bignumber": "^5.5.0",
@@ -1967,43 +1969,43 @@
       }
     },
     "node_modules/@bosonprotocol/ethers-sdk": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.12.2.tgz",
-      "integrity": "sha512-QBY17dD4ce2XCEQ8y1gnFxi8vOgkh3n9JQK9oX0opEt7k2EmtCmobuedqHnE1MLrb4xeYN1eRHPnx9z6uuHMyQ==",
+      "version": "1.12.3-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.12.3-alpha.2.tgz",
+      "integrity": "sha512-mWORUdtyHTwfraWHafl1IoI4uyP5kyHergXIBVt+CeK43bMpWcksOn8/Vg+yf/OwedJkW5/6Ub3IElmqtqpw+g==",
       "dependencies": {
-        "@bosonprotocol/common": "^1.22.0"
+        "@bosonprotocol/common": "^1.22.1-alpha.2"
       },
       "peerDependencies": {
         "ethers": "^5.5.0"
       }
     },
     "node_modules/@bosonprotocol/ipfs-storage": {
-      "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/ipfs-storage/-/ipfs-storage-1.10.4.tgz",
-      "integrity": "sha512-3y9sE/oAIRu5FbWl4ivqFdXQo5dNfN21w8yShskVgFxQVmM3p7wAzJcL4jy1XXl09mTRviHyrCkjD0ad37Fybw==",
+      "version": "1.10.5-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/ipfs-storage/-/ipfs-storage-1.10.5-alpha.2.tgz",
+      "integrity": "sha512-ZRhGm35NV61UQMejDj3LVpIRAqMgb/ZGbAsML0qAOfB4Zk0qmI53fsn/0XdLVRFbZe0IaxpX/jusgpo6vN+KBQ==",
       "dependencies": {
-        "@bosonprotocol/metadata": "^1.9.0",
+        "@bosonprotocol/metadata": "^1.10.0-alpha.2",
         "ipfs-http-client": "^56.0.1",
         "multiformats": "^9.6.4",
         "uint8arrays": "^3.0.0"
       }
     },
     "node_modules/@bosonprotocol/metadata": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.9.0.tgz",
-      "integrity": "sha512-loz5R5Ddc5pvQv0XCy1fRrbQ+ar/3OkNfQ9GWSRMeK9DLI1X8rwphCfF+7Lv3vmvfm9MmiUQGVbLslArBhJpSw==",
+      "version": "1.10.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.10.0-alpha.2.tgz",
+      "integrity": "sha512-1NXzOY2N30B4jQVnpnI/Dv+iBhRiz/eer6uAPSd0DnsHbD9P+6HTntlVdxaoDdwMPPCOpGxRPfo7mQ4UGRHZYg==",
       "dependencies": {
         "schema-to-yup": "^1.11.11"
       }
     },
     "node_modules/@bosonprotocol/react-kit": {
-      "version": "0.17.3",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.17.3.tgz",
-      "integrity": "sha512-BZ3VOYXeJmN+buUbHhI+U2OJT4EMl7ftUtdIeTxIcbXiKD15LNGFkthI3XpJEyCzbsbjc1uoTQ7RIzBvI4k+Wg==",
+      "version": "0.17.4-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.17.4-alpha.2.tgz",
+      "integrity": "sha512-6xB80Pnfv09i8q/I0SUptIM/vXJik9ff4TlnFIL2Kzt4fCr2WHKN3UAMGDqtS+kr0HESqxCUhjUmZqUYTqrI2g==",
       "dependencies": {
-        "@bosonprotocol/core-sdk": "^1.25.3",
-        "@bosonprotocol/ethers-sdk": "^1.12.2",
-        "@bosonprotocol/ipfs-storage": "^1.10.4",
+        "@bosonprotocol/core-sdk": "^1.26.0-alpha.2",
+        "@bosonprotocol/ethers-sdk": "^1.12.3-alpha.2",
+        "@bosonprotocol/ipfs-storage": "^1.10.5-alpha.2",
         "@ethersproject/units": "^5.6.0",
         "@rainbow-me/rainbowkit": "^0.5.3",
         "@tippyjs/react": "^4.2.6",
@@ -5338,6 +5340,23 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.0.0",
       "license": "MIT",
@@ -5354,6 +5373,313 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.5.tgz",
+      "integrity": "sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-menu": "2.0.5",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz",
+      "integrity": "sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.0",
       "license": "MIT",
@@ -5365,6 +5691,452 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.5.tgz",
+      "integrity": "sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.4",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.3",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.2",
+        "@radix-ui/react-portal": "1.0.3",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@floating-ui/core": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
+      "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg=="
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@floating-ui/dom": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.9.tgz",
+      "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.2.6"
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@floating-ui/react-dom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.0.tgz",
+      "integrity": "sha512-Ke0oU3SeuABC2C4OFu2mSAwHIP5WUiV98O9YWoHV4Q5aT6E9k06DV0Khi5uYspR8xmmBk08t8ZDcz3TR3ARkEg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.7"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+      "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz",
+      "integrity": "sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
+      "integrity": "sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.3.tgz",
+      "integrity": "sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+      "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+      "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "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/@radix-ui/react-menu/node_modules/tslib": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.0.0",
       "license": "MIT",
@@ -5435,6 +6207,216 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.0",
       "license": "MIT",
@@ -6762,7 +7744,7 @@
     },
     "node_modules/@types/react-dom": {
       "version": "18.0.6",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*"
@@ -8148,6 +9130,22 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/aria-hidden/node_modules/tslib": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
+    },
     "node_modules/aria-query": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -9315,9 +10313,9 @@
       }
     },
     "node_modules/cborg": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/cborg/-/cborg-1.10.1.tgz",
-      "integrity": "sha512-et6Qm8MOUY2kCWa5GKk2MlBVoPjHv0hQBmlzI/Z7+5V3VJCeIkGehIB3vWknNsm2kOkAIs6wEKJFJo8luWQQ/w==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/cborg/-/cborg-1.10.2.tgz",
+      "integrity": "sha512-b3tFPA9pUr2zCUiCfRd2+wok2/LBSNUMKOuRRok+WlvvAgEt/PlbgPTsZUcwCOs53IJvLgTp0eotwtosE6njug==",
       "bin": {
         "cborg": "cli.js"
       }
@@ -14761,6 +15759,7 @@
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/ipfs-core-types/-/ipfs-core-types-0.10.3.tgz",
       "integrity": "sha512-GNid2lRBjR5qgScCglgk7w9Hk3TZAwPHQXxOLQx72wgyc0jF2U5NXRoKW0GRvX8NPbHmsrFszForIqxd23I1Gw==",
+      "deprecated": "js-IPFS has been deprecated in favour of Helia - please see https://github.com/ipfs/js-ipfs/issues/4336 for details",
       "dependencies": {
         "@ipld/dag-pb": "^2.1.3",
         "interface-datastore": "^6.0.2",
@@ -14773,6 +15772,7 @@
       "version": "0.14.3",
       "resolved": "https://registry.npmjs.org/ipfs-core-utils/-/ipfs-core-utils-0.14.3.tgz",
       "integrity": "sha512-aBkewVhgAj3NWXPwu6imj0wADGiGVZmJzqKzODOJsibDjkx6FGdMv8kvvqtLnK8LS/dvSk9yk32IDtuDyYoV7Q==",
+      "deprecated": "js-IPFS has been deprecated in favour of Helia - please see https://github.com/ipfs/js-ipfs/issues/4336 for details",
       "dependencies": {
         "any-signal": "^3.0.0",
         "blob-to-it": "^1.0.1",
@@ -14800,6 +15800,7 @@
       "version": "56.0.3",
       "resolved": "https://registry.npmjs.org/ipfs-http-client/-/ipfs-http-client-56.0.3.tgz",
       "integrity": "sha512-E3L5ylVl6BjyRUsNehvfuRBYp1hj8vQ8in4zskVPMNzXs6JiCFUbif5a6BtcAlSK4xPQyJCeLNNAWLUeFQTLNA==",
+      "deprecated": "js-IPFS has been deprecated in favour of Helia - please see https://github.com/ipfs/js-ipfs/issues/4336 for details",
       "dependencies": {
         "@ipld/dag-cbor": "^7.0.0",
         "@ipld/dag-json": "^8.0.1",
@@ -23026,9 +24027,9 @@
       }
     },
     "node_modules/parse-duration": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/parse-duration/-/parse-duration-1.0.3.tgz",
-      "integrity": "sha512-o6NAh12na5VvR6nFejkU0gpQ8jmOY9Y9sTU2ke3L3G/d/3z8jqmbBbeyBGHU73P4JLXfc7tJARygIK3WGIkloA=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/parse-duration/-/parse-duration-1.1.0.tgz",
+      "integrity": "sha512-z6t9dvSJYaPoQq7quMzdEagSFtpGu+utzHqqxmpVWNNZRIXnvqyCvn9XsTdh7c/w0Bqmdz3RB3YnRaKtpRtEXQ=="
     },
     "node_modules/parse-filepath": {
       "version": "1.0.2",
@@ -25473,8 +26474,9 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/react-swipeable": {
-      "version": "7.0.0",
-      "license": "MIT",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.1.tgz",
+      "integrity": "sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==",
       "peerDependencies": {
         "react": "^16.8.3 || ^17 || ^18"
       }
@@ -26192,9 +27194,9 @@
       }
     },
     "node_modules/schema-to-yup": {
-      "version": "1.12.11",
-      "resolved": "https://registry.npmjs.org/schema-to-yup/-/schema-to-yup-1.12.11.tgz",
-      "integrity": "sha512-i9EMGieNYFMKMvBXzV1vbUNz6XEDBmUr+FA1kYfutU+G2z0jA4nZ59ETQH6teZkKXNOXcW/rHcB2wv8SNEdkhQ==",
+      "version": "1.12.14",
+      "resolved": "https://registry.npmjs.org/schema-to-yup/-/schema-to-yup-1.12.14.tgz",
+      "integrity": "sha512-bEmsIo9VNcbClMz3FCF/Yr6kBwEyQc7Axcz+qc3c5ilWKV5ZVXNmYjtLbS7jvZbqmoo1hDI7+5BGWUqwzS0wiA==",
       "dependencies": {
         "dashify": "^2.0.0",
         "uniq": "^1.0.1",
@@ -30546,11 +31548,11 @@
       }
     },
     "@bosonprotocol/common": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.22.0.tgz",
-      "integrity": "sha512-2EhCyEjJLlCtQ3wlWbs1vLeWrvpU7Q2X7YZ6AcFz+Z+PBQufWw7/E6NUKGcofZ5v87s62kLX30gnW9KbjT1AnA==",
+      "version": "1.22.1-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.22.1-alpha.2.tgz",
+      "integrity": "sha512-0RfKZh7GdMXZkzMHAfnpz9poRrDPfxGAIdlRbq5a37WrKNztYpEpkuZNBpcFUFoDA/yDE36kaauknux0iYeLBg==",
       "requires": {
-        "@bosonprotocol/metadata": "^1.9.0",
+        "@bosonprotocol/metadata": "^1.10.0-alpha.2",
         "@ethersproject/abi": "^5.5.0",
         "@ethersproject/address": "^5.5.0",
         "@ethersproject/bignumber": "^5.5.0",
@@ -30560,11 +31562,11 @@
       }
     },
     "@bosonprotocol/core-sdk": {
-      "version": "1.25.3",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.25.3.tgz",
-      "integrity": "sha512-1py2WTAOCZCcGIMJ0OCeFN8NKRCuyP6qzrQp7mq8SxOgnRJC4KfTloPTk3uMDHgL0xugK9Xd5U1+J3w1OMfoYA==",
+      "version": "1.26.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.26.0-alpha.2.tgz",
+      "integrity": "sha512-zJMIswTRReiUdr7JCd5cyTlyk0PG6hLfGvJOsL1TFxb123s7wNXVBSZlH8L9bdzveOAHNEC6CZLXAEz8+Q80jA==",
       "requires": {
-        "@bosonprotocol/common": "^1.22.0",
+        "@bosonprotocol/common": "^1.22.1-alpha.2",
         "@ethersproject/abi": "^5.5.0",
         "@ethersproject/address": "^5.5.0",
         "@ethersproject/bignumber": "^5.5.0",
@@ -30579,40 +31581,40 @@
       }
     },
     "@bosonprotocol/ethers-sdk": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.12.2.tgz",
-      "integrity": "sha512-QBY17dD4ce2XCEQ8y1gnFxi8vOgkh3n9JQK9oX0opEt7k2EmtCmobuedqHnE1MLrb4xeYN1eRHPnx9z6uuHMyQ==",
+      "version": "1.12.3-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.12.3-alpha.2.tgz",
+      "integrity": "sha512-mWORUdtyHTwfraWHafl1IoI4uyP5kyHergXIBVt+CeK43bMpWcksOn8/Vg+yf/OwedJkW5/6Ub3IElmqtqpw+g==",
       "requires": {
-        "@bosonprotocol/common": "^1.22.0"
+        "@bosonprotocol/common": "^1.22.1-alpha.2"
       }
     },
     "@bosonprotocol/ipfs-storage": {
-      "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/ipfs-storage/-/ipfs-storage-1.10.4.tgz",
-      "integrity": "sha512-3y9sE/oAIRu5FbWl4ivqFdXQo5dNfN21w8yShskVgFxQVmM3p7wAzJcL4jy1XXl09mTRviHyrCkjD0ad37Fybw==",
+      "version": "1.10.5-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/ipfs-storage/-/ipfs-storage-1.10.5-alpha.2.tgz",
+      "integrity": "sha512-ZRhGm35NV61UQMejDj3LVpIRAqMgb/ZGbAsML0qAOfB4Zk0qmI53fsn/0XdLVRFbZe0IaxpX/jusgpo6vN+KBQ==",
       "requires": {
-        "@bosonprotocol/metadata": "^1.9.0",
+        "@bosonprotocol/metadata": "^1.10.0-alpha.2",
         "ipfs-http-client": "^56.0.1",
         "multiformats": "^9.6.4",
         "uint8arrays": "^3.0.0"
       }
     },
     "@bosonprotocol/metadata": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.9.0.tgz",
-      "integrity": "sha512-loz5R5Ddc5pvQv0XCy1fRrbQ+ar/3OkNfQ9GWSRMeK9DLI1X8rwphCfF+7Lv3vmvfm9MmiUQGVbLslArBhJpSw==",
+      "version": "1.10.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.10.0-alpha.2.tgz",
+      "integrity": "sha512-1NXzOY2N30B4jQVnpnI/Dv+iBhRiz/eer6uAPSd0DnsHbD9P+6HTntlVdxaoDdwMPPCOpGxRPfo7mQ4UGRHZYg==",
       "requires": {
         "schema-to-yup": "^1.11.11"
       }
     },
     "@bosonprotocol/react-kit": {
-      "version": "0.17.3",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.17.3.tgz",
-      "integrity": "sha512-BZ3VOYXeJmN+buUbHhI+U2OJT4EMl7ftUtdIeTxIcbXiKD15LNGFkthI3XpJEyCzbsbjc1uoTQ7RIzBvI4k+Wg==",
+      "version": "0.17.4-alpha.2",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.17.4-alpha.2.tgz",
+      "integrity": "sha512-6xB80Pnfv09i8q/I0SUptIM/vXJik9ff4TlnFIL2Kzt4fCr2WHKN3UAMGDqtS+kr0HESqxCUhjUmZqUYTqrI2g==",
       "requires": {
-        "@bosonprotocol/core-sdk": "^1.25.3",
-        "@bosonprotocol/ethers-sdk": "^1.12.2",
-        "@bosonprotocol/ipfs-storage": "^1.10.4",
+        "@bosonprotocol/core-sdk": "^1.26.0-alpha.2",
+        "@bosonprotocol/ethers-sdk": "^1.12.3-alpha.2",
+        "@bosonprotocol/ipfs-storage": "^1.10.5-alpha.2",
         "@ethersproject/units": "^5.6.0",
         "@rainbow-me/rainbowkit": "^0.5.3",
         "@tippyjs/react": "^4.2.6",
@@ -32786,6 +33788,14 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "@radix-ui/react-dismissable-layer": {
       "version": "1.0.0",
       "requires": {
@@ -32797,6 +33807,160 @@
         "@radix-ui/react-use-escape-keydown": "1.0.0"
       }
     },
+    "@radix-ui/react-dropdown-menu": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.5.tgz",
+      "integrity": "sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-menu": "2.0.5",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "dependencies": {
+        "@radix-ui/primitive": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+          "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-context": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+          "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-id": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+          "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-controllable-state": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+          "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-layout-effect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+          "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        }
+      }
+    },
+    "@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-focus-scope": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz",
+      "integrity": "sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "dependencies": {
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        }
+      }
+    },
+    "@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "requires": {}
+    },
     "@radix-ui/react-id": {
       "version": "1.0.0",
       "requires": {
@@ -32804,6 +33968,245 @@
         "@radix-ui/react-use-layout-effect": "1.0.0"
       }
     },
+    "@radix-ui/react-menu": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.5.tgz",
+      "integrity": "sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.4",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.3",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.2",
+        "@radix-ui/react-portal": "1.0.3",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "dependencies": {
+        "@floating-ui/core": {
+          "version": "1.2.6",
+          "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
+          "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg=="
+        },
+        "@floating-ui/dom": {
+          "version": "1.2.9",
+          "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.9.tgz",
+          "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==",
+          "requires": {
+            "@floating-ui/core": "^1.2.6"
+          }
+        },
+        "@floating-ui/react-dom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.0.tgz",
+          "integrity": "sha512-Ke0oU3SeuABC2C4OFu2mSAwHIP5WUiV98O9YWoHV4Q5aT6E9k06DV0Khi5uYspR8xmmBk08t8ZDcz3TR3ARkEg==",
+          "requires": {
+            "@floating-ui/dom": "^1.2.7"
+          }
+        },
+        "@radix-ui/primitive": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+          "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-arrow": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+          "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "1.0.3"
+          }
+        },
+        "@radix-ui/react-collection": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+          "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-context": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-context": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+          "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-dismissable-layer": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz",
+          "integrity": "sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/primitive": "1.0.1",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-use-callback-ref": "1.0.1",
+            "@radix-ui/react-use-escape-keydown": "1.0.3"
+          }
+        },
+        "@radix-ui/react-id": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+          "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-popper": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
+          "integrity": "sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@floating-ui/react-dom": "^2.0.0",
+            "@radix-ui/react-arrow": "1.0.3",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-context": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-use-callback-ref": "1.0.1",
+            "@radix-ui/react-use-layout-effect": "1.0.1",
+            "@radix-ui/react-use-rect": "1.0.1",
+            "@radix-ui/react-use-size": "1.0.1",
+            "@radix-ui/rect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-portal": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.3.tgz",
+          "integrity": "sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "1.0.3"
+          }
+        },
+        "@radix-ui/react-presence": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+          "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-use-layout-effect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-escape-keydown": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+          "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-layout-effect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+          "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-rect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+          "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/rect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-size": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+          "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "1.0.1"
+          }
+        },
+        "@radix-ui/rect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+          "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "react-remove-scroll": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+          "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+          "requires": {
+            "react-remove-scroll-bar": "^2.3.3",
+            "react-style-singleton": "^2.2.1",
+            "tslib": "^2.1.0",
+            "use-callback-ref": "^1.3.0",
+            "use-sidecar": "^1.1.2"
+          }
+        },
+        "tslib": {
+          "version": "2.5.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+          "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
+        }
+      }
+    },
     "@radix-ui/react-popper": {
       "version": "1.0.0",
       "requires": {
@@ -32849,6 +34252,113 @@
         "@radix-ui/react-primitive": "1.0.0"
       }
     },
+    "@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "dependencies": {
+        "@radix-ui/primitive": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+          "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-collection": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+          "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-context": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-context": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+          "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-id": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+          "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-controllable-state": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+          "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-layout-effect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+          "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        }
+      }
+    },
     "@radix-ui/react-slot": {
       "version": "1.0.0",
       "requires": {
@@ -33711,7 +35221,7 @@
     },
     "@types/react-dom": {
       "version": "18.0.6",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/react": "*"
       }
@@ -34655,6 +36165,21 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.5.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+          "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
+        }
+      }
+    },
     "aria-query": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -35421,9 +36946,9 @@
       "version": "2.4.0"
     },
     "cborg": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/cborg/-/cborg-1.10.1.tgz",
-      "integrity": "sha512-et6Qm8MOUY2kCWa5GKk2MlBVoPjHv0hQBmlzI/Z7+5V3VJCeIkGehIB3vWknNsm2kOkAIs6wEKJFJo8luWQQ/w=="
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/cborg/-/cborg-1.10.2.tgz",
+      "integrity": "sha512-b3tFPA9pUr2zCUiCfRd2+wok2/LBSNUMKOuRRok+WlvvAgEt/PlbgPTsZUcwCOs53IJvLgTp0eotwtosE6njug=="
     },
     "ccount": {
       "version": "2.0.1"
@@ -44134,9 +45659,9 @@
       }
     },
     "parse-duration": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/parse-duration/-/parse-duration-1.0.3.tgz",
-      "integrity": "sha512-o6NAh12na5VvR6nFejkU0gpQ8jmOY9Y9sTU2ke3L3G/d/3z8jqmbBbeyBGHU73P4JLXfc7tJARygIK3WGIkloA=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/parse-duration/-/parse-duration-1.1.0.tgz",
+      "integrity": "sha512-z6t9dvSJYaPoQq7quMzdEagSFtpGu+utzHqqxmpVWNNZRIXnvqyCvn9XsTdh7c/w0Bqmdz3RB3YnRaKtpRtEXQ=="
     },
     "parse-filepath": {
       "version": "1.0.2",
@@ -45493,7 +47018,9 @@
       }
     },
     "react-swipeable": {
-      "version": "7.0.0",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.1.tgz",
+      "integrity": "sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==",
       "requires": {}
     },
     "react-table": {
@@ -45932,9 +47459,9 @@
       }
     },
     "schema-to-yup": {
-      "version": "1.12.11",
-      "resolved": "https://registry.npmjs.org/schema-to-yup/-/schema-to-yup-1.12.11.tgz",
-      "integrity": "sha512-i9EMGieNYFMKMvBXzV1vbUNz6XEDBmUr+FA1kYfutU+G2z0jA4nZ59ETQH6teZkKXNOXcW/rHcB2wv8SNEdkhQ==",
+      "version": "1.12.14",
+      "resolved": "https://registry.npmjs.org/schema-to-yup/-/schema-to-yup-1.12.14.tgz",
+      "integrity": "sha512-bEmsIo9VNcbClMz3FCF/Yr6kBwEyQc7Axcz+qc3c5ilWKV5ZVXNmYjtLbS7jvZbqmoo1hDI7+5BGWUqwzS0wiA==",
       "requires": {
         "dashify": "^2.0.0",
         "uniq": "^1.0.1",
diff --git a/package.json b/package.json
index e33c88de1..470cbbada 100644
--- a/package.json
+++ b/package.json
@@ -42,13 +42,15 @@
   },
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.1",
-    "@bosonprotocol/react-kit": "^0.17.3",
+    "@bosonprotocol/react-kit": "^0.17.4-alpha.2",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.6.1",
     "@glidejs/glide": "^3.5.2",
     "@graphql-codegen/fragment-matcher": "^3.3.1",
     "@popperjs/core": "^2.11.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-progress": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.2",
     "@radix-ui/react-toast": "^1.0.0",
@@ -105,7 +107,7 @@
     "react-router-dom": "^6.4.0",
     "react-scripts": "^5.0.1",
     "react-select": "^5.4.0",
-    "react-swipeable": "^7.0.0",
+    "react-swipeable": "^7.0.1",
     "react-table": "^7.8.0",
     "react-uuid": "^1.0.3",
     "rehype-raw": "^6.1.1",
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
deleted file mode 100644
index c3fac221d..000000000
--- a/src/components/Layout.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ReactNode } from "react";
-import styled, { css } from "styled-components";
-
-import { breakpoint } from "../lib/styles/breakpoint";
-
-export const layoutPadding = css`
-  padding: 0 1rem;
-
-  ${breakpoint.xs} {
-    padding: 0 1.5rem;
-  }
-  ${breakpoint.s} {
-    padding: 0 1.75rem;
-  }
-  ${breakpoint.m} {
-    padding: 0 2rem;
-  }
-  ${breakpoint.xl} {
-    padding: 0 2.25rem;
-  }
-`;
-
-export const LayoutRoot = styled.div`
-  margin: 0 auto;
-  ${layoutPadding};
-
-  width: 100%;
-  max-width: 100vw;
-
-  ${breakpoint.xs} {
-    max-width: 93.75rem;
-  }
-`;
-
-interface IProps {
-  children: ReactNode;
-}
-
-export default function Layout({ children, ...props }: IProps) {
-  return <LayoutRoot {...props}>{children}</LayoutRoot>;
-}
diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx
index 92f89e0e5..53ceee354 100644
--- a/src/components/app/index.tsx
+++ b/src/components/app/index.tsx
@@ -1,8 +1,7 @@
 import { IconContext } from "phosphor-react";
-import { Fragment } from "react";
+import { Fragment, ReactNode, useMemo } from "react";
 import styled, { ThemeProvider } from "styled-components";
 
-import Layout from "../../components/Layout";
 import ModalProvider from "../../components/modal/ModalProvider";
 import GlobalStyle from "../../lib/styles/GlobalStyle";
 import ChatProvider from "../../pages/chat/ChatProvider/ChatProvider";
@@ -11,6 +10,7 @@ import theme from "../../theme";
 import CookieBanner from "../cookie/CookieBanner";
 import Footer from "../footer/Footer";
 import Header from "../header/Header";
+import Layout, { LayoutProps } from "../layout/Layout";
 
 const Container = styled.div`
   width: 100%;
@@ -25,12 +25,29 @@ const Container = styled.div`
 
 interface Props {
   children: JSX.Element;
+  withHeader?: boolean;
   withLayout?: boolean;
+  withFullLayout?: boolean;
   withFooter?: boolean;
   fluidHeader?: boolean;
   withBosonStyles?: boolean;
 }
+
+const getLayoutWrapper =
+  (fullWidth: LayoutProps["fullWidth"]) =>
+  ({ children }: { children: ReactNode }) =>
+    (
+      <Layout
+        style={{ display: "flex", flex: "1", flexDirection: "column" }}
+        fullWidth={fullWidth}
+      >
+        {children}
+      </Layout>
+    );
+
 export default function App({
+  withHeader = true,
+  withFullLayout = false,
   withLayout = true,
   withFooter = true,
   fluidHeader = false,
@@ -50,7 +67,10 @@ export default function App({
   const fontFamily = useCustomStoreQueryParameter("fontFamily");
   const buttonBgColor = useCustomStoreQueryParameter("buttonBgColor");
   const buttonTextColor = useCustomStoreQueryParameter("buttonTextColor");
-  const Wrapper = withLayout ? Layout : Fragment;
+  const LayoutWrapper = useMemo(() => {
+    return getLayoutWrapper(withFullLayout);
+  }, [withFullLayout]);
+  const Wrapper = withLayout ? LayoutWrapper : Fragment;
 
   return (
     <ThemeProvider theme={theme}>
@@ -78,7 +98,7 @@ export default function App({
                   $buttonBgColor={buttonBgColor}
                   $buttonTextColor={buttonTextColor}
                 />
-                <Header fluidHeader={fluidHeader} />
+                {withHeader && <Header fluidHeader={fluidHeader} />}
                 <Wrapper>{children}</Wrapper>
                 <Footer withFooter={withFooter} />
               </Container>
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index e53941597..3c6a39207 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -19,7 +19,7 @@ import SocialLogo, {
 import { useCustomStoreQueryParameter } from "../../pages/custom-store/useCustomStoreQueryParameter";
 import useUserRoles from "../../router/useUserRoles";
 import { LinkWithQuery } from "../customNavigation/LinkWithQuery";
-import Layout from "../Layout";
+import Layout from "../layout/Layout";
 import Grid from "../ui/Grid";
 import GridContainer from "../ui/GridContainer";
 import Typography from "../ui/Typography";
diff --git a/src/components/footer/routes.tsx b/src/components/footer/routes.tsx
index 9ff2dd1d4..1a58e177c 100644
--- a/src/components/footer/routes.tsx
+++ b/src/components/footer/routes.tsx
@@ -17,7 +17,7 @@ import {
 import { isTruthy } from "../../lib/types/helpers";
 import { UserRoles } from "../../router/routes";
 import { checkIfUserHaveRole } from "../../router/useUserRoles";
-import { DEFAULT_SELLER_PAGE } from "../seller/SellerPages";
+import { getSellerCenterPath } from "../seller/paths";
 import ViewTxButton from "../transactions/ViewTxButton";
 
 export const SOCIAL_ROUTES = [
@@ -138,9 +138,7 @@ export const getSellRoutes = ({
   ) {
     productRoutes.push({
       name: "Seller Center",
-      url: generatePath(SellerCenterRoutes.SellerCenter, {
-        [UrlParameters.sellerPage]: DEFAULT_SELLER_PAGE
-      })
+      url: getSellerCenterPath("Dashboard")
     });
   }
   if (
diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
index d8f607fd8..fe8a6ad72 100644
--- a/src/components/form/Select.tsx
+++ b/src/components/form/Select.tsx
@@ -1,6 +1,11 @@
 /* eslint @typescript-eslint/no-explicit-any: "off" */
 import { useField } from "formik";
-import Select from "react-select";
+import Select, {
+  ActionMeta,
+  MultiValue,
+  SingleValue,
+  StylesConfig
+} from "react-select";
 import styled from "styled-components";
 
 import { colors } from "../../lib/styles/colors";
@@ -13,9 +18,12 @@ const StyledSelect = styled(Select)`
   * {
     font-size: 13.33px;
   }
+  [class*="-indicatorContainer"] {
+    padding: 6.92px; // to make selects less tall but as tall as inputs
+  }
 ` as Select;
 
-const customStyles = (error: any) => ({
+const customStyles = (error: any): StylesConfig<any, true> => ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   singleValue: (provided: any, state: any) => {
     return {
@@ -55,7 +63,8 @@ const customStyles = (error: any) => ({
     ...provided,
     zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
     position: "relative",
-    width: "100%"
+    width: "100%",
+    height: "25px"
   }),
   option: (provided: any, state: any) => ({
     ...provided,
@@ -72,7 +81,20 @@ const customStyles = (error: any) => ({
   }),
   indicatorSeparator: () => ({
     display: "none"
-  })
+  }),
+  multiValue: (base, state) => {
+    return (state.data as Record<string, any>).isFixed
+      ? { ...base, backgroundColor: colors.darkGrey }
+      : base;
+  },
+  multiValueLabel: (base, state) => {
+    return state.data.isFixed
+      ? { ...base, fontWeight: "bold", color: colors.white, paddingRight: 6 }
+      : base;
+  },
+  multiValueRemove: (base, state) => {
+    return state.data.isFixed ? { ...base, display: "none" } : base;
+  }
 });
 
 export default function SelectComponent({
@@ -85,7 +107,7 @@ export default function SelectComponent({
   errorMessage,
   onChange,
   ...props
-}: SelectProps) {
+}: SelectProps<boolean>) {
   const [field, meta, helpers] = useField(name);
   const displayErrorMessage =
     meta.error && meta.touched && !errorMessage
@@ -98,13 +120,50 @@ export default function SelectComponent({
     typeof displayErrorMessage === typeof "string" &&
     displayErrorMessage !== "";
 
-  const handleChange = (option: SelectDataProps<string>) => {
-    if (!meta.touched) {
-      helpers.setTouched(true);
-    }
-    helpers.setValue(option);
-    onChange?.(option);
-  };
+  let handleChange:
+    | ((
+        newValue: MultiValue<SelectDataProps<string>> | null,
+        actionMeta: ActionMeta<SelectDataProps<string>>
+      ) => void)
+    | ((newValue: SingleValue<SelectDataProps<string> | null>) => void);
+  if (props.isMulti) {
+    handleChange = (
+      newValue: MultiValue<SelectDataProps<string>> | null,
+      actionMeta: ActionMeta<SelectDataProps<string>>
+    ) => {
+      let newValueTemp: typeof newValue = newValue;
+      if (!meta.touched) {
+        helpers.setTouched(true);
+      }
+      switch (actionMeta.action) {
+        case "remove-value":
+        case "pop-value":
+          if (actionMeta.removedValue.isFixed) {
+            return;
+          }
+          break;
+        case "clear":
+          if (Array.isArray(field.value)) {
+            newValueTemp = (field.value as any[]).filter((v) => v.isFixed);
+          }
+          break;
+      }
+
+      helpers.setValue(newValueTemp);
+      onChange?.(newValueTemp);
+    };
+  } else {
+    handleChange = (newValue: SingleValue<SelectDataProps<string> | null>) => {
+      const newValueTemp: typeof newValue = newValue;
+      if (!meta.touched) {
+        helpers.setTouched(true);
+      }
+
+      helpers.setValue(newValueTemp);
+      onChange?.(newValueTemp);
+    };
+  }
+
   const handleBlur = () => {
     if (!meta.touched) {
       helpers.setTouched(true);
@@ -120,12 +179,14 @@ export default function SelectComponent({
         placeholder={placeholder}
         options={options}
         value={field.value}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         onChange={handleChange}
         onBlur={handleBlur}
         isSearchable={isSearchable}
         isClearable={isClearable}
         isDisabled={disabled}
-        isOptionDisabled={(option) => option.disabled}
+        isOptionDisabled={(option) => !!option.disabled}
       />
       <Error display={displayError} message={displayErrorMessage} />{" "}
     </>
diff --git a/src/components/form/types.ts b/src/components/form/types.ts
index d553c87ca..c6f05775f 100644
--- a/src/components/form/types.ts
+++ b/src/components/form/types.ts
@@ -1,6 +1,6 @@
 import { Dayjs } from "dayjs";
 import { CSSProperties, ReactNode } from "react";
-import { SingleValue } from "react-select";
+import { MultiValue, SingleValue } from "react-select";
 
 import { UploadFileType } from "./Upload/types";
 
@@ -64,6 +64,7 @@ export interface SelectDataProps<Value extends string = string> {
   label: string;
   value: Value;
   disabled?: boolean;
+  isFixed?: boolean;
   [others: string]: unknown;
 }
 
@@ -80,14 +81,18 @@ export interface BaseSelectProps {
   onChange?: OnChange;
 }
 
-export interface SelectProps extends BaseProps {
-  isMulti?: boolean;
+export interface SelectProps<IsMulti extends boolean> extends BaseProps {
+  isMulti?: IsMulti;
   disabled?: boolean;
   isClearable?: boolean;
   isSearchable?: boolean;
   options: Array<SelectDataProps> | Readonly<Array<SelectDataProps>>;
   errorMessage?: string;
-  onChange?: (option: SelectDataProps<string>) => void;
+  onChange?: (
+    option: IsMulti extends true
+      ? MultiValue<SelectDataProps<string>>
+      : SingleValue<SelectDataProps<string>>
+  ) => void;
   label?: string;
   className?: string;
   classNamePrefix?: string;
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index b33ad7fb4..87a1311b0 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -17,7 +17,7 @@ import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryPa
 import { useCustomStoreQueryParameter } from "../../pages/custom-store/useCustomStoreQueryParameter";
 import useUserRoles from "../../router/useUserRoles";
 import { LinkWithQuery } from "../customNavigation/LinkWithQuery";
-import Layout from "../Layout";
+import Layout from "../layout/Layout";
 import { Spinner } from "../loading/Spinner";
 import { DEFAULT_SELLER_PAGE } from "../seller/SellerPages";
 import BosonButton from "../ui/BosonButton";
diff --git a/src/components/layout/Context.tsx b/src/components/layout/Context.tsx
new file mode 100644
index 000000000..574012c35
--- /dev/null
+++ b/src/components/layout/Context.tsx
@@ -0,0 +1,11 @@
+import { createContext, Dispatch, SetStateAction, useContext } from "react";
+
+export const LayoutContext = createContext<{
+  fullWidth: boolean;
+  setFullWidth: Dispatch<SetStateAction<boolean>>;
+}>({
+  fullWidth: false,
+  setFullWidth: () => null
+});
+
+export const useLayoutContext = () => useContext(LayoutContext);
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
new file mode 100644
index 000000000..466ff509b
--- /dev/null
+++ b/src/components/layout/Layout.tsx
@@ -0,0 +1,62 @@
+import { ReactNode, useState } from "react";
+import styled, { css, CSSProperties } from "styled-components";
+
+import { breakpoint } from "../../lib/styles/breakpoint";
+import { LayoutContext } from "./Context";
+
+export const layoutPadding = css`
+  padding: 0 1rem;
+
+  ${breakpoint.xs} {
+    padding: 0 1.5rem;
+  }
+  ${breakpoint.s} {
+    padding: 0 1.75rem;
+  }
+  ${breakpoint.m} {
+    padding: 0 2rem;
+  }
+  ${breakpoint.xl} {
+    padding: 0 2.25rem;
+  }
+`;
+
+export const LayoutRoot = styled.div<{ fullWidth?: boolean }>`
+  ${({ fullWidth }) => {
+    if (fullWidth) {
+      return "";
+    }
+    return css`
+      margin: 0 auto;
+      ${layoutPadding};
+
+      width: 100%;
+      max-width: 100vw;
+
+      ${breakpoint.xs} {
+        max-width: 93.75rem;
+      }
+    `;
+  }}
+`;
+
+export interface LayoutProps {
+  children: ReactNode;
+  fullWidth?: boolean;
+  style?: CSSProperties;
+}
+
+export default function Layout({
+  children,
+  fullWidth: initialFullWidth,
+  ...props
+}: LayoutProps) {
+  const [fullWidth, setFullWidth] = useState<boolean>(!!initialFullWidth);
+  return (
+    <LayoutContext.Provider value={{ fullWidth: fullWidth, setFullWidth }}>
+      <LayoutRoot {...props} fullWidth={fullWidth} data-layout>
+        {children}
+      </LayoutRoot>
+    </LayoutContext.Provider>
+  );
+}
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 05140a247..88e9df99f 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -1,4 +1,3 @@
-import { X } from "phosphor-react";
 import { ReactNode } from "react";
 import { createPortal } from "react-dom";
 import styled, { css } from "styled-components";
@@ -6,8 +5,8 @@ import styled, { css } from "styled-components";
 import { breakpoint } from "../../lib/styles/breakpoint";
 import { colors } from "../../lib/styles/colors";
 import { zIndex } from "../../lib/styles/zIndex";
-import Button from "../ui/Button";
-import Typography from "../ui/Typography";
+import { ModalHeader } from "./header/ModalHeader";
+import { ModalHeaderTitle } from "./header/ModalHeaderTitle";
 import { ModalType, Store } from "./ModalContext";
 
 const Root = styled.div`
@@ -173,30 +172,6 @@ const Wrapper = styled.div<{
     `};
 `;
 
-const Header = styled(Typography)<{ $title?: string }>`
-  position: relative;
-
-  text-align: left;
-  padding: 1rem 2rem;
-  display: flex;
-  border-bottom: 2px solid ${colors.border};
-  align-items: center;
-  justify-content: ${(props) => {
-    return props.$title ? "space-between" : "flex-end";
-  }};
-  gap: 0.5rem;
-`;
-
-const HeaderWithTitle = styled(Header)`
-  height: 4.25rem;
-`;
-
-const Close = styled(X)`
-  line {
-    stroke: ${colors.darkGrey};
-  }
-`;
-
 const Content = styled.div<{
   $modalType: ModalType;
   $size: Props["size"];
@@ -295,23 +270,17 @@ export default function Modal({
         $maxWidths={maxWidths}
       >
         {HeaderComponent ? (
-          <Header tag="div" margin="0">
-            {HeaderComponent}
-            {closable && (
-              <Button data-close theme="blank" onClick={handleOnClose}>
-                <Close />
-              </Button>
-            )}
-          </Header>
+          <ModalHeader
+            headerComponent={HeaderComponent}
+            closable={closable}
+            handleOnClose={handleOnClose}
+          />
         ) : (
-          <HeaderWithTitle tag="h3" $title={title} margin="0">
-            {title}
-            {closable && (
-              <Button data-close theme="blank" onClick={handleOnClose}>
-                <Close />
-              </Button>
-            )}
-          </HeaderWithTitle>
+          <ModalHeaderTitle
+            title={title}
+            closable={closable}
+            handleOnClose={handleOnClose}
+          />
         )}
         <Content $size={size} $modalType={modalType}>
           {children}
diff --git a/src/components/modal/ModalComponents.tsx b/src/components/modal/ModalComponents.tsx
index 157ae524c..9c4a960a2 100644
--- a/src/components/modal/ModalComponents.tsx
+++ b/src/components/modal/ModalComponents.tsx
@@ -27,6 +27,7 @@ import RedeemSuccessModal from "./components/RedeemModal/RedeemSuccessModal";
 import { RelistOfferModal } from "./components/RelistOfferModal/RelistOfferModal";
 import RetractDisputeModal from "./components/RetractDisputeModal";
 import RevokeProduct from "./components/RevokeProduct";
+import { SalesChannelsModal } from "./components/SalesChannelsModal/SalesChannelsModal";
 import FinanceDeposit from "./components/SellerFinance/FinanceDeposit";
 import FinanceWithdraw from "./components/SellerFinance/FinanceWithdraw";
 import RecentTransactionsModal from "./components/Transactions/RecentTransactionsModal/RecentTransactionsModal";
@@ -74,7 +75,8 @@ export const MODAL_TYPES = {
   RELIST_OFFER: "RELIST_OFFER",
   PROFILE_DETAILS: "PROFILE_DETAILS",
   IMAGE_EDITOR: "IMAGE_EDITOR",
-  IFRAME_MODAL: "IFRAME_MODAL"
+  IFRAME_MODAL: "IFRAME_MODAL",
+  SALES_CHANNELS: "SALES_CHANNELS"
 } as const;
 
 export const MODAL_COMPONENTS = {
@@ -115,5 +117,6 @@ export const MODAL_COMPONENTS = {
   [MODAL_TYPES.RELIST_OFFER]: RelistOfferModal,
   [MODAL_TYPES.PROFILE_DETAILS]: ProfileDetailsModal,
   [MODAL_TYPES.IMAGE_EDITOR]: ImageEditorModal,
-  [MODAL_TYPES.IFRAME_MODAL]: IframeModal
+  [MODAL_TYPES.IFRAME_MODAL]: IframeModal,
+  [MODAL_TYPES.SALES_CHANNELS]: SalesChannelsModal
 } as const;
diff --git a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx
index 1f9d1347b..d01a09791 100644
--- a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx
+++ b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx
@@ -1,3 +1,4 @@
+import { AuthTokenType } from "@bosonprotocol/react-kit";
 import { Fragment, useMemo, useState } from "react";
 import { generatePath } from "react-router-dom";
 import styled from "styled-components";
@@ -13,7 +14,6 @@ import { ExtendedSeller } from "../../../../../pages/explore/WithAllOffers";
 import Grid from "../../../../ui/Grid";
 import Image from "../../../../ui/Image";
 import Typography from "../../../../ui/Typography";
-import { ProfileType } from "../../Profile/const";
 
 const CardContainer = styled.div`
   position: relative;
@@ -72,7 +72,7 @@ export default function CollectionsCard({ collection }: Props) {
   const metadata = seller?.metadata;
   const [lens] = lensProfiles;
 
-  const useLens = !metadata || metadata?.kind === ProfileType.LENS;
+  const useLens = seller?.authTokenType === AuthTokenType.LENS;
 
   const name =
     (useLens ? lens?.name : metadata?.name) ??
diff --git a/src/components/modal/components/Profile/EditProfileModal.tsx b/src/components/modal/components/Profile/EditProfileModal.tsx
index 4d8aa5f88..6df45104b 100644
--- a/src/components/modal/components/Profile/EditProfileModal.tsx
+++ b/src/components/modal/components/Profile/EditProfileModal.tsx
@@ -26,10 +26,8 @@ export default function EditProfileModal() {
   const lensProfile = lens?.length ? lens[0] : undefined;
   const hasMetadata = !!seller?.metadata;
   const metadata = seller?.metadata;
-  const useLens = seller?.metadata?.kind
-    ? seller?.metadata?.kind === ProfileType.LENS &&
-      seller.authTokenType === AuthTokenType.LENS
-    : !!lensProfile;
+  const authTokenType = seller?.authTokenType;
+  const useLens = seller?.authTokenType === AuthTokenType.LENS;
   const navigate = useKeepQueryParamsNavigate();
   const { mutateAsync: updateSellerMetadata } = useUpdateSellerMetadata();
   const { hideModal } = useModal();
@@ -71,7 +69,13 @@ export default function EditProfileModal() {
   const Component = useCallback(() => {
     const profileDataFromMetadata: CreateProfile =
       buildRegularProfileFromMetadata(metadata);
-    const forceDirty = !hasMetadata || metadata?.kind !== profileType;
+    const forceDirty =
+      !hasMetadata ||
+      metadata?.kind !== profileType ||
+      (profileType === ProfileType.LENS && // to fix inconsistencies between the authTokenType and the metadata kind
+        authTokenType !== AuthTokenType.LENS) ||
+      (profileType === ProfileType.REGULAR &&
+        authTokenType !== AuthTokenType.NONE);
     return profileType === ProfileType.LENS ? (
       <LensProfileFlow
         onSubmit={async () => {
@@ -99,7 +103,7 @@ export default function EditProfileModal() {
       <p>There has been an error, please try again...</p>
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [profileType]);
+  }, [profileType, authTokenType]);
 
   if (!address) {
     return (
diff --git a/src/components/modal/components/Profile/Lens/utils.ts b/src/components/modal/components/Profile/Lens/utils.ts
index 364b0b025..d88d397a9 100644
--- a/src/components/modal/components/Profile/Lens/utils.ts
+++ b/src/components/modal/components/Profile/Lens/utils.ts
@@ -47,7 +47,7 @@ export const getLensCoverPictureUrl = (profile: Profile): string => {
 };
 
 export const getLensTokenIdDecimal = (lenseProfileId: Profile["id"]) => {
-  return parseInt(lenseProfileId, 16);
+  return parseInt(lenseProfileId, 16); // hex to decimal
 };
 
 export const getLensTokenIdHex = (lenseProfileIdDecimal: Profile["id"]) => {
diff --git a/src/components/modal/components/Profile/utils.ts b/src/components/modal/components/Profile/utils.ts
index a7b19e973..027561e32 100644
--- a/src/components/modal/components/Profile/utils.ts
+++ b/src/components/modal/components/Profile/utils.ts
@@ -6,7 +6,6 @@ import {
   CreateProfile,
   OPTIONS_CHANNEL_COMMUNICATIONS_PREFERENCE
 } from "../../../product/utils";
-import { ProfileType } from "./const";
 import {
   getLensCoverPictureUrl,
   getLensDescription,
@@ -23,11 +22,7 @@ export function buildProfileFromMetadata(
     | null,
   lensProfile: Profile | undefined | null
 ): CreateProfile {
-  const useLens = metadata?.kind
-    ? metadata?.kind === ProfileType.LENS &&
-      sellerAuthTokenType === AuthTokenType.LENS &&
-      !!lensProfile
-    : !!lensProfile;
+  const useLens = sellerAuthTokenType === AuthTokenType.LENS;
   const regularProfileImage = metadata?.images?.find(
     (img) => img.tag === "profile"
   );
diff --git a/src/components/modal/components/ProfileDetails/ProfileDetailsModal.tsx b/src/components/modal/components/ProfileDetails/ProfileDetailsModal.tsx
index c1a1a9ee1..a3d5f7354 100644
--- a/src/components/modal/components/ProfileDetails/ProfileDetailsModal.tsx
+++ b/src/components/modal/components/ProfileDetails/ProfileDetailsModal.tsx
@@ -19,7 +19,7 @@ export const ProfileDetailsModal: React.FC<ProfileDetailsModalProps> = ({
     [UrlParameters.sellerId]: sellerId
   });
   return (
-    <Grid justifyContent="center" gap="2rem">
+    <Grid justifyContent="center" gap="2rem" flexWrap="wrap">
       <EditProfile />
       <Button as="div" theme="secondary" type={null as never}>
         <LinkWithQuery to={sellerUrl} style={{ all: "unset" }}>
diff --git a/src/components/modal/components/SalesChannelsModal/SalesChannelsForm.tsx b/src/components/modal/components/SalesChannelsModal/SalesChannelsForm.tsx
new file mode 100644
index 000000000..4eb72dac5
--- /dev/null
+++ b/src/components/modal/components/SalesChannelsModal/SalesChannelsForm.tsx
@@ -0,0 +1,51 @@
+import { useFormikContext } from "formik";
+import React, { ReactNode } from "react";
+
+import { FormField, Select } from "../../../form";
+import { Spinner } from "../../../loading/Spinner";
+import BosonButton from "../../../ui/BosonButton";
+import Grid from "../../../ui/Grid";
+import { Channels, FormType } from "./form";
+
+type SalesChannelsFormProps = {
+  children: ReactNode;
+};
+
+export const SalesChannelsForm: React.FC<SalesChannelsFormProps> = ({
+  children
+}) => {
+  const { isSubmitting } = useFormikContext<FormType>();
+  return (
+    <Grid flexDirection="column" gap="2rem" alignItems="flex-end">
+      <FormField
+        title="Current channels"
+        subTitle="Add the channel(s) where this product is live. Sales channel information is not updated automatically. "
+      >
+        <Select
+          name="channels"
+          options={[
+            {
+              label: Channels["Boson Boulevard"],
+              value: Channels["Boson Boulevard"]
+            },
+            {
+              label: Channels["Own land"],
+              value: Channels["Own land"]
+            }
+          ]}
+          isMulti
+        />
+      </FormField>
+      {children}
+      <BosonButton type="submit" disabled={isSubmitting}>
+        {isSubmitting ? (
+          <>
+            Saving <Spinner size={15} />
+          </>
+        ) : (
+          "Save"
+        )}
+      </BosonButton>
+    </Grid>
+  );
+};
diff --git a/src/components/modal/components/SalesChannelsModal/SalesChannelsModal.tsx b/src/components/modal/components/SalesChannelsModal/SalesChannelsModal.tsx
new file mode 100644
index 000000000..98875f75a
--- /dev/null
+++ b/src/components/modal/components/SalesChannelsModal/SalesChannelsModal.tsx
@@ -0,0 +1,131 @@
+import * as Sentry from "@sentry/browser";
+import { Form, Formik } from "formik";
+import React, { useState } from "react";
+import toast from "react-hot-toast";
+
+import useUpdateSellerMetadata from "../../../../lib/utils/hooks/seller/useUpdateSellerMetadata";
+import SimpleError from "../../../error/SimpleError";
+import { SalesChannels } from "../../../seller/products/types";
+import SuccessToast from "../../../toasts/common/SuccessToast";
+import { useModal } from "../../useModal";
+import { Channels, FormType, validationSchema } from "./form";
+import { SalesChannelsForm } from "./SalesChannelsForm";
+
+interface SalesChannelsModalProps {
+  productUuid: string;
+  version: number;
+  sellerSalesChannels: SalesChannels;
+}
+
+export const SalesChannelsModal: React.FC<SalesChannelsModalProps> = ({
+  sellerSalesChannels,
+  productUuid,
+  version
+}) => {
+  const [hasError, setError] = useState<boolean>(false);
+  const { hideModal } = useModal();
+  const { mutateAsync: updateSellerMetadata } = useUpdateSellerMetadata();
+  return (
+    <Formik<FormType>
+      initialValues={{
+        channels: [
+          ...sellerSalesChannels
+            .filter((ch) => {
+              return (
+                ch.tag === Channels.dApp ||
+                ch.deployments?.some((ch) => ch.product?.uuid === productUuid)
+              );
+            })
+            .map((saleChannel) => ({
+              value: saleChannel.tag,
+              label: saleChannel.tag,
+              disabled: false,
+              isFixed: saleChannel.tag === Channels.dApp
+            }))
+        ]
+      }}
+      onSubmit={async ({ channels }) => {
+        try {
+          setError(false);
+
+          await updateSellerMetadata({
+            values: {
+              salesChannels: Object.keys(Channels)
+                .filter(
+                  (chKey) =>
+                    channels?.some((ch) => ch.value === chKey) ||
+                    sellerSalesChannels.some((slch) => slch.tag === chKey)
+                )
+                .map((chKey) => {
+                  const sl = sellerSalesChannels.find(
+                    (slch) => slch.tag === chKey
+                  );
+                  const channel = channels?.find((ch) => ch.value === chKey);
+                  const isProductInChannel = !!channels?.some(
+                    (ch) => ch.value === chKey
+                  );
+                  return {
+                    ...sl,
+                    tag: sl?.tag || channel?.value || "",
+                    link: sl?.link || undefined,
+                    settingsEditor: sl?.settingsEditor || undefined,
+                    settingsUri: sl?.settingsUri || undefined,
+                    deployments: [
+                      ...(sl?.deployments
+                        ?.filter(
+                          (deployment) =>
+                            deployment.product?.uuid !== productUuid
+                        )
+                        .map((d) => ({
+                          ...d,
+                          status: d.status || undefined,
+                          link: d.link || undefined,
+                          lastUpdated: d.lastUpdated || undefined,
+                          product: d.product || undefined
+                        })) ?? []),
+                      ...(isProductInChannel
+                        ? [
+                            {
+                              product: {
+                                uuid: productUuid,
+                                version
+                              },
+                              lastUpdated: Math.floor(
+                                Date.now() / 1000
+                              ).toString()
+                            }
+                          ]
+                        : [])
+                    ]
+                  };
+                })
+                ?.filter(
+                  (channel) =>
+                    channel.tag &&
+                    channel.tag !== Channels.dApp &&
+                    channel.deployments.length // no products in deployments means we can delete the channel
+                )
+            }
+          });
+          hideModal();
+          toast((t) => (
+            <SuccessToast t={t}>Sales channels have been updated</SuccessToast>
+          ));
+        } catch (error) {
+          console.error(error);
+          setError(true);
+          Sentry.captureException(error);
+        }
+      }}
+      validationSchema={validationSchema}
+    >
+      {() => {
+        return (
+          <Form>
+            <SalesChannelsForm>{hasError && <SimpleError />}</SalesChannelsForm>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
diff --git a/src/components/modal/components/SalesChannelsModal/form.ts b/src/components/modal/components/SalesChannelsModal/form.ts
new file mode 100644
index 000000000..640260d08
--- /dev/null
+++ b/src/components/modal/components/SalesChannelsModal/form.ts
@@ -0,0 +1,19 @@
+import * as Yup from "yup";
+
+export const validationSchema = Yup.object({
+  channels: Yup.array(
+    Yup.object({
+      label: Yup.string().required(),
+      value: Yup.string().required(),
+      disabled: Yup.boolean()
+    })
+  )
+});
+
+export type FormType = Yup.InferType<typeof validationSchema>;
+
+export enum Channels {
+  dApp = "dApp",
+  "Boson Boulevard" = "Boson Boulevard",
+  "Own land" = "Own land"
+}
diff --git a/src/components/modal/header/ModalHeader.tsx b/src/components/modal/header/ModalHeader.tsx
new file mode 100644
index 000000000..f15b025fc
--- /dev/null
+++ b/src/components/modal/header/ModalHeader.tsx
@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+
+import Button from "../../ui/Button";
+import { Close, Header } from "./styles";
+
+interface ModalHeaderProps {
+  headerComponent: ReactNode;
+  handleOnClose: () => void;
+  closable?: boolean;
+}
+
+export const ModalHeader: React.FC<ModalHeaderProps> = ({
+  headerComponent: HeaderComponent,
+  handleOnClose,
+  closable
+}) => {
+  return (
+    <Header tag="div" margin="0">
+      {HeaderComponent}
+      {closable && (
+        <Button data-close theme="blank" onClick={handleOnClose}>
+          <Close />
+        </Button>
+      )}
+    </Header>
+  );
+};
diff --git a/src/components/modal/header/ModalHeaderTitle.tsx b/src/components/modal/header/ModalHeaderTitle.tsx
new file mode 100644
index 000000000..18b81029b
--- /dev/null
+++ b/src/components/modal/header/ModalHeaderTitle.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "styled-components";
+
+import Button from "../../ui/Button";
+import { Close, Header } from "./styles";
+
+const HeaderWithTitle = styled(Header)`
+  height: 4.25rem;
+`;
+
+interface ModalHeaderTitleProps {
+  title: string;
+  handleOnClose: () => void;
+  closable?: boolean;
+}
+
+export const ModalHeaderTitle: React.FC<ModalHeaderTitleProps> = ({
+  title,
+  handleOnClose,
+  closable
+}) => {
+  return (
+    <HeaderWithTitle tag="h3" $title={title} margin="0">
+      {title}
+      {closable && (
+        <Button data-close theme="blank" onClick={handleOnClose}>
+          <Close />
+        </Button>
+      )}
+    </HeaderWithTitle>
+  );
+};
diff --git a/src/components/modal/header/styles.tsx b/src/components/modal/header/styles.tsx
new file mode 100644
index 000000000..128090499
--- /dev/null
+++ b/src/components/modal/header/styles.tsx
@@ -0,0 +1,26 @@
+import { X } from "phosphor-react";
+import styled from "styled-components";
+
+import { colors } from "../../../lib/styles/colors";
+import Typography from "../../ui/Typography";
+
+export const Close = styled(X)`
+  line {
+    stroke: ${colors.darkGrey};
+    stroke-width: 18px;
+  }
+`;
+
+export const Header = styled(Typography)<{ $title?: string }>`
+  position: relative;
+
+  text-align: left;
+  padding: 1rem 2rem;
+  display: flex;
+  border-bottom: 2px solid ${colors.border};
+  align-items: center;
+  justify-content: ${(props) => {
+    return props.$title ? "space-between" : "flex-end";
+  }};
+  gap: 0.5rem;
+`;
diff --git a/src/components/product/ConfirmProductDetails.tsx b/src/components/product/ConfirmProductDetails.tsx
index 8c92258c4..fc37e5d4a 100644
--- a/src/components/product/ConfirmProductDetails.tsx
+++ b/src/components/product/ConfirmProductDetails.tsx
@@ -164,8 +164,7 @@ export default function ConfirmProductDetails({
   const commonTermsOfSale = isMultiVariant
     ? values.variantsCoreTermsOfSale
     : values.coreTermsOfSale;
-  const { offerValidityPeriod, redemptionPeriod, tokenGatedOffer } =
-    commonTermsOfSale;
+  const { offerValidityPeriod, redemptionPeriod } = commonTermsOfSale;
   return (
     <ConfirmProductDetailsContainer>
       <SectionTitle tag="h2">Confirm Product Details</SectionTitle>
@@ -402,7 +401,9 @@ export default function ConfirmProductDetails({
                     <FormFieldContainer>
                       <FormField title="Token Gated Offer" required>
                         <ContentValue tag="p">
-                          {tokenGatedOffer?.label}
+                          {values.productType.tokenGatedOffer === "true"
+                            ? "Yes"
+                            : "No"}
                         </ContentValue>
                       </FormField>
                     </FormFieldContainer>
diff --git a/src/components/product/Preview.tsx b/src/components/product/Preview.tsx
index 4bbef9b0d..ac1d081d0 100644
--- a/src/components/product/Preview.tsx
+++ b/src/components/product/Preview.tsx
@@ -145,13 +145,11 @@ export default function Preview({
 
   const exchangeDate = Date.now().toString();
 
-  const termsOfSale = hasMultipleVariants
-    ? values.variantsCoreTermsOfSale
-    : values.coreTermsOfSale;
+  const { tokenGating } = values;
 
   const condition =
-    termsOfSale.tokenType && termsOfSale.tokenGatedOffer.value === "true"
-      ? buildCondition(termsOfSale, decimals)
+    tokenGating.tokenType && values.productType.tokenGatedOffer === "true"
+      ? buildCondition(tokenGating, decimals)
       : undefined;
 
   // Build the Offer structure (in the shape of SubGraph request), based on temporary data (values)
diff --git a/src/components/product/ProductInformation.tsx b/src/components/product/ProductInformation.tsx
index 10da28e19..6bacb8690 100644
--- a/src/components/product/ProductInformation.tsx
+++ b/src/components/product/ProductInformation.tsx
@@ -19,6 +19,13 @@ import {
 import { CATEGORY_OPTIONS } from "./utils";
 import { useCreateForm } from "./utils/useCreateForm";
 
+const StyledTextarea = styled(Textarea)`
+  min-width: 100%;
+  max-width: 100%;
+  min-height: 54px;
+  max-height: 500px;
+`;
+
 const AddProductContainer = styled.div`
   display: grid;
   grid-template-columns: minmax(11.25rem, 1fr) 3fr;
@@ -145,7 +152,7 @@ export default function ProductInformation() {
         required
         subTitle="Describe your product with as much detail as possible."
       >
-        <Textarea
+        <StyledTextarea
           name="productInformation.description"
           placeholder="Include information like shipping is included, or whether duties/taxes are covered."
         />
diff --git a/src/components/product/ProductType.tsx b/src/components/product/ProductType.tsx
index 45c23aefc..1ab7679ec 100644
--- a/src/components/product/ProductType.tsx
+++ b/src/components/product/ProductType.tsx
@@ -4,12 +4,11 @@ import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
 import * as Sentry from "@sentry/browser";
 import { useField } from "formik";
 import { useCallback, useEffect, useState } from "react";
-import { generatePath, useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { useAccount } from "wagmi";
 
-import { UrlParameters } from "../../lib/routing/parameters";
-import { BosonRoutes, SellerCenterRoutes } from "../../lib/routing/routes";
+import { BosonRoutes } from "../../lib/routing/routes";
 import { breakpointNumbers } from "../../lib/styles/breakpoint";
 import { colors } from "../../lib/styles/colors";
 import { useGetSellerMetadata } from "../../lib/utils/hooks/seller/useGetSellerMetadata";
@@ -25,7 +24,7 @@ import { getLensTokenIdDecimal } from "../modal/components/Profile/Lens/utils";
 import { buildProfileFromMetadata } from "../modal/components/Profile/utils";
 import { MODAL_TYPES } from "../modal/ModalComponents";
 import { useModal } from "../modal/useModal";
-import { DEFAULT_SELLER_PAGE } from "../seller/SellerPages";
+import { getSellerCenterPath } from "../seller/paths";
 import BosonButton from "../ui/BosonButton";
 import Grid from "../ui/Grid";
 import GridContainer from "../ui/GridContainer";
@@ -55,7 +54,7 @@ const productTypeItemsPerRow = {
   l: 1,
   xl: 1
 };
-const Label = styled.label`
+export const Label = styled.label`
   max-width: 12.5rem;
   align-items: center;
   border: 1px solid ${colors.lightGrey};
@@ -66,7 +65,7 @@ const Label = styled.label`
   height: 197px;
   cursor: pointer;
 `;
-const RadioButton = styled.input`
+export const RadioButton = styled.input`
   position: absolute;
   opacity: 0;
   width: 0;
@@ -85,8 +84,8 @@ const RadioButton = styled.input`
   }
 `;
 
-const Box = styled.div`
-  padding: 1.75rem;
+export const Box = styled.div`
+  padding: 0.875rem;
   height: 100%;
   width: 100%;
   p {
@@ -96,11 +95,20 @@ const Box = styled.div`
     margin: 0.938rem 0 0 0;
   }
 `;
+
+export const RadioButtonText = styled(Typography).attrs({
+  tag: "p",
+  fontWeight: "600",
+  $fontSize: "1rem",
+  margin: "1.5rem 0",
+  color: colors.darkGrey
+})``;
+
 const Container = styled.div`
   max-width: 26.5rem;
 `;
 
-const ProductImage = styled(Image)`
+export const ProductImage = styled(Image)`
   width: 6.25rem;
   height: 6.25rem;
   padding-top: 0;
@@ -359,7 +367,6 @@ export default function ProductType({
       </>
     );
   }
-
   return (
     <ContainerProductPage>
       <SectionTitle tag="h2">Product type</SectionTitle>
@@ -381,10 +388,23 @@ export default function ProductType({
                   checked={values.productType.productType === "physical"}
                   onChange={handleChange}
                 />
-                <Box>
+                <Grid
+                  justifyContent="center"
+                  alignItems="center"
+                  flexDirection="column"
+                  style={{ height: "100%" }}
+                >
                   <ProductImage src={physicalProduct} />
-                  <Typography tag="p">Physical</Typography>
-                </Box>
+                  <Typography
+                    tag="p"
+                    fontWeight="600"
+                    $fontSize="1rem"
+                    margin="1.5rem 0"
+                    color={colors.darkGrey}
+                  >
+                    Physical
+                  </Typography>
+                </Grid>
               </Label>
               <Label>
                 <RadioButton
@@ -395,15 +415,32 @@ export default function ProductType({
                   onChange={handleChange}
                   disabled
                 />
-                <Box>
+                <Grid
+                  justifyContent="center"
+                  alignItems="center"
+                  flexDirection="column"
+                  style={{ height: "100%" }}
+                >
                   <ProductImage src={phygitalProduct} />
-                  <Typography tag="p" margin="1rem 0 0 0">
-                    Phygital
+                  <Typography
+                    tag="p"
+                    fontWeight="600"
+                    $fontSize="1rem"
+                    margin="1rem 0 0 0"
+                    color={colors.darkGrey}
+                  >
+                    Physical
                   </Typography>
-                  <Typography tag="p" $fontSize="0.7rem" margin="0.3rem 0 0 0">
+                  <Typography
+                    tag="p"
+                    fontWeight="600"
+                    $fontSize="0.7rem"
+                    margin="0.3rem 0 1.3125rem 0"
+                    color={colors.darkGrey}
+                  >
                     COMING SOON
                   </Typography>
-                </Box>
+                </Grid>
               </Label>
             </Grid>
           </FormField>
@@ -423,7 +460,12 @@ export default function ProductType({
                   checked={values.productType.productVariant === "oneItemType"}
                   onChange={handleChange}
                 />
-                <Box>
+                <Grid
+                  justifyContent="center"
+                  alignItems="center"
+                  flexDirection="column"
+                  style={{ height: "100%" }}
+                >
                   <ProductImage
                     src={oneItemTypeProduct}
                     style={{
@@ -433,8 +475,8 @@ export default function ProductType({
                       margin: "auto"
                     }}
                   />
-                  <Typography tag="p">One item type</Typography>
-                </Box>
+                  <RadioButtonText>One item type</RadioButtonText>
+                </Grid>
               </Label>
               <Label>
                 <RadioButton
@@ -446,7 +488,74 @@ export default function ProductType({
                   }
                   onChange={handleChange}
                 />
-                <Box>
+                <Grid
+                  justifyContent="center"
+                  alignItems="center"
+                  flexDirection="column"
+                  style={{ height: "100%" }}
+                >
+                  <ProductImage
+                    src={differentVariantsProduct}
+                    style={{
+                      width: "54px",
+                      height: "100px",
+                      paddingTop: "0px",
+                      margin: "auto"
+                    }}
+                  />
+                  <RadioButtonText>Different variants</RadioButtonText>
+                </Grid>
+              </Label>
+            </Grid>
+          </FormField>
+          <FormField
+            title="Token Gating"
+            required
+            style={{
+              marginBottom: 0
+            }}
+          >
+            <Grid>
+              <Label>
+                <RadioButton
+                  type="radio"
+                  name="productType.tokenGatedOffer"
+                  value="false"
+                  checked={values.productType.tokenGatedOffer === "false"}
+                  onChange={handleChange}
+                />
+                <Grid
+                  justifyContent="center"
+                  alignItems="center"
+                  flexDirection="column"
+                  style={{ height: "100%" }}
+                >
+                  <ProductImage
+                    src={oneItemTypeProduct}
+                    style={{
+                      width: "62px",
+                      height: "100px",
+                      paddingTop: "0px",
+                      margin: "auto"
+                    }}
+                  />
+                  <RadioButtonText>Open access</RadioButtonText>
+                </Grid>
+              </Label>
+              <Label>
+                <RadioButton
+                  type="radio"
+                  name="productType.tokenGatedOffer"
+                  value="true"
+                  checked={values.productType.tokenGatedOffer === "true"}
+                  onChange={handleChange}
+                />
+                <Grid
+                  justifyContent="center"
+                  alignItems="center"
+                  flexDirection="column"
+                  style={{ height: "100%" }}
+                >
                   <ProductImage
                     src={differentVariantsProduct}
                     style={{
@@ -456,8 +565,8 @@ export default function ProductType({
                       margin: "auto"
                     }}
                   />
-                  <Typography tag="p">Different variants</Typography>
-                </Box>
+                  <RadioButtonText>Token gated</RadioButtonText>
+                </Grid>
               </Label>
             </Grid>
           </FormField>
@@ -471,9 +580,7 @@ export default function ProductType({
             }}
             onClick={() => {
               navigate({
-                pathname: generatePath(SellerCenterRoutes.SellerCenter, {
-                  [UrlParameters.sellerPage]: DEFAULT_SELLER_PAGE
-                })
+                pathname: getSellerCenterPath("Dashboard")
               });
             }}
           >
diff --git a/src/components/product/coreTermsOfSale/CoreTermsOfSale.tsx b/src/components/product/coreTermsOfSale/CoreTermsOfSale.tsx
index 49b77b8bb..ddacb45f4 100644
--- a/src/components/product/coreTermsOfSale/CoreTermsOfSale.tsx
+++ b/src/components/product/coreTermsOfSale/CoreTermsOfSale.tsx
@@ -1,20 +1,13 @@
-import { useState } from "react";
 import styled from "styled-components";
 
-import { useCoreSDK } from "../../../lib/utils/useCoreSdk";
-import { FormField, Input, Select, Textarea } from "../../form";
+import { FormField, Input, Select } from "../../form";
 import BosonButton from "../../ui/BosonButton";
 import {
   ContainerProductPage,
   ProductButtonGroup,
   SectionTitle
 } from "../Product.styles";
-import {
-  OPTIONS_CURRENCIES,
-  OPTIONS_TOKEN_GATED,
-  TOKEN_CRITERIA,
-  TOKEN_TYPES
-} from "../utils";
+import { OPTIONS_CURRENCIES } from "../utils";
 import { useCreateForm } from "../utils/useCreateForm";
 import { CoreTermsOfSaleDates } from "./CoreTermsOfSaleDates";
 
@@ -28,18 +21,12 @@ const ProductInformationButtonGroup = styled(ProductButtonGroup)`
   margin-top: 1.563px;
 `;
 
-const TokengatedTextarea = styled(Textarea)`
-  padding: 0.5rem;
-`;
-
 interface Props {
   isMultiVariant: boolean;
 }
 
 export default function CoreTermsOfSale({ isMultiVariant }: Props) {
-  const { nextIsDisabled, values } = useCreateForm();
-  const core = useCoreSDK();
-  const [symbol, setSymbol] = useState<string | undefined>(undefined);
+  const { nextIsDisabled } = useCreateForm();
 
   const prefix = isMultiVariant ? "variantsCoreTermsOfSale" : "coreTermsOfSale";
 
@@ -87,117 +74,6 @@ export default function CoreTermsOfSale({ isMultiVariant }: Props) {
         </>
       )}
 
-      <FormField
-        title="Token gated offer"
-        subTitle="Limit the purchase of your item to users holding a specific token."
-      >
-        <Select
-          name={`${prefix}.tokenGatedOffer`}
-          options={OPTIONS_TOKEN_GATED}
-        />
-
-        {values[prefix].tokenGatedOffer.value === "true" && (
-          <>
-            <FormField title="Token Contract" style={{ margin: "1rem 0 0 0" }}>
-              <Input
-                name={`${prefix}.tokenContract`}
-                type="string"
-                onBlur={async () => {
-                  const tokenContract = values[prefix].tokenContract;
-                  const tokenType = values[prefix].tokenType;
-                  if (
-                    tokenContract &&
-                    tokenContract?.length > 0 &&
-                    tokenType?.value === TOKEN_TYPES[0].value
-                  ) {
-                    try {
-                      const { symbol: symbolLocal } =
-                        await core.getExchangeTokenInfo(tokenContract);
-                      if (symbolLocal.length > 0) {
-                        setSymbol(symbolLocal);
-                      } else {
-                        setSymbol(undefined);
-                      }
-                    } catch (error) {
-                      setSymbol(undefined);
-                    }
-                  }
-                }}
-              />
-            </FormField>
-
-            <TokengatedInfoWrapper>
-              <FormField title="Token Type:" style={{ margin: "1rem 0 0 0" }}>
-                <Select name={`${prefix}.tokenType`} options={TOKEN_TYPES} />
-              </FormField>
-
-              <div>
-                <FormField
-                  title="Token Gating Description:"
-                  style={{ margin: "1rem 0 0 0" }}
-                  tooltip="This offer requires to own at least one NFT of Makersplace collection: https://opensea.io/collection/makersplace"
-                >
-                  <TokengatedTextarea
-                    name={`${prefix}.tokenGatingDesc`}
-                    placeholder="Token Gating Description"
-                  />
-                </FormField>
-              </div>
-            </TokengatedInfoWrapper>
-            <FormField title="Max commits:" style={{ margin: "1rem 0 0 0" }}>
-              <Input name={`${prefix}.maxCommits`} type="string" />
-            </FormField>
-            <>
-              {values[prefix].tokenType?.value === TOKEN_TYPES[1].value && (
-                <div>
-                  <FormField title="Criteria:" style={{ margin: "1rem 0 0 0" }}>
-                    <Select
-                      name={`${prefix}.tokenCriteria`}
-                      options={TOKEN_CRITERIA}
-                    />
-                  </FormField>
-                </div>
-              )}
-
-              {(values[prefix].tokenCriteria?.value ===
-                TOKEN_CRITERIA[0].value ||
-                values[prefix].tokenType?.value === TOKEN_TYPES[0].value ||
-                values[prefix].tokenType?.value === TOKEN_TYPES[2].value) && (
-                <TokengatedBalanceWrapper>
-                  <FormField
-                    title="Min Balance:"
-                    style={{ margin: "1rem 0 0 0" }}
-                  >
-                    <Input
-                      style={{ width: "100%" }}
-                      name={`${prefix}.minBalance`}
-                      type="string"
-                    />
-                  </FormField>
-                  {symbol &&
-                    values[prefix].tokenType?.value ===
-                      TOKEN_TYPES[0].value && (
-                      <SymbolInput
-                        type="string"
-                        name={`${prefix}.symbol`}
-                        value={symbol}
-                        disabled
-                      />
-                    )}
-                </TokengatedBalanceWrapper>
-              )}
-              {((values[prefix].tokenCriteria?.value ===
-                TOKEN_CRITERIA[1].value &&
-                values[prefix].tokenType?.value === TOKEN_TYPES[1].value) ||
-                values[prefix].tokenType?.value === TOKEN_TYPES[2].value) && (
-                <FormField title="TokenId:" style={{ margin: "1rem 0 0 0" }}>
-                  <Input name={`${prefix}.tokenId`} type="string" />
-                </FormField>
-              )}
-            </>
-          </>
-        )}
-      </FormField>
       <CoreTermsOfSaleDates prefix={prefix} />
       <ProductInformationButtonGroup>
         <BosonButton
@@ -211,21 +87,3 @@ export default function CoreTermsOfSale({ isMultiVariant }: Props) {
     </ContainerProductPage>
   );
 }
-
-const TokengatedInfoWrapper = styled.div`
-  display: grid;
-  grid-template-columns: minmax(8.75rem, 1fr) 4fr;
-  grid-gap: 1rem;
-`;
-
-const TokengatedBalanceWrapper = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: flex-end;
-`;
-
-const SymbolInput = styled(Input)`
-  width: 20%;
-  height: 100%;
-  margin-top: 20px;
-`;
diff --git a/src/components/product/tokenGating/TokenGating.tsx b/src/components/product/tokenGating/TokenGating.tsx
new file mode 100644
index 000000000..aace957c3
--- /dev/null
+++ b/src/components/product/tokenGating/TokenGating.tsx
@@ -0,0 +1,258 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+import { breakpoint } from "../../../lib/styles/breakpoint";
+import { useCoreSDK } from "../../../lib/utils/useCoreSdk";
+import { FormField, Input, Select } from "../../form";
+import BosonButton from "../../ui/BosonButton";
+import Grid from "../../ui/Grid";
+import { ProductButtonGroup, SectionTitle } from "../Product.styles";
+import { TOKEN_CRITERIA, TOKEN_TYPES } from "../utils";
+import { useCreateForm } from "../utils/useCreateForm";
+
+const ContainerProductPage = styled.div`
+  width: 100%;
+  .inputGroup:not(:last-of-type) {
+    margin-bottom: 2rem;
+  }
+  ${breakpoint.m} {
+    max-width: 45rem;
+  }
+`;
+
+const StyledSelect = styled(Select)`
+  && {
+    height: initial;
+  }
+`;
+
+const ProductInformationButtonGroup = styled(ProductButtonGroup)`
+  margin-top: 1.563px;
+`;
+
+// const TokengatedTextarea = styled(Textarea)`
+//   padding: 0.5rem;
+//   min-width: 100%;
+//   max-width: 100%;
+//   min-height: 54px;
+//   max-height: 500px;
+// `;
+
+const StyledGrid = styled(Grid)`
+  > * {
+    min-width: fit-content;
+  }
+`;
+
+const TokengatedInfoWrapper = styled.div`
+  display: grid;
+  grid-template-columns: minmax(8.75rem, max-content) 4fr;
+  grid-gap: 1rem;
+  width: 100%;
+`;
+
+const SymbolInput = styled(Input)`
+  width: 20%;
+  height: 100%;
+`;
+
+const prefix = "tokenGating.";
+
+const [{ value: minBalance }] = TOKEN_CRITERIA;
+const [{ value: erc20 }, { value: erc721 }, { value: erc1155 }] = TOKEN_TYPES;
+
+export default function TokenGating() {
+  const { nextIsDisabled, values, handleBlur } = useCreateForm();
+  const { tokenGating } = values;
+  const core = useCoreSDK();
+  const [symbol, setSymbol] = useState<string | undefined>(undefined);
+
+  return (
+    <ContainerProductPage>
+      <SectionTitle tag="h2">Token Gating</SectionTitle>
+
+      <FormField
+        title="Token gated offer"
+        subTitle="Configure your token gated offer using the fields below"
+      >
+        <>
+          <TokengatedInfoWrapper>
+            <FormField
+              title="Token Type"
+              subTitle="Choose an option"
+              style={{ margin: "1rem 0 0 0" }}
+              required
+            >
+              <Select name={`${prefix}tokenType`} options={TOKEN_TYPES} />
+            </FormField>
+
+            <FormField
+              title="Token address"
+              subTitle={`Enter the ${tokenGating.tokenType?.label}'s contract address`}
+              style={{ margin: "1rem 0 0 0", width: "100%" }}
+              required
+            >
+              <Input
+                name={`${prefix}tokenContract`}
+                type="string"
+                onBlur={async (e) => {
+                  handleBlur(e);
+                  const tokenContract = tokenGating.tokenContract;
+                  const tokenType = tokenGating.tokenType;
+                  if (
+                    tokenContract &&
+                    tokenContract?.length > 0 &&
+                    tokenType?.value === erc20
+                  ) {
+                    try {
+                      const { symbol: symbolLocal } =
+                        await core.getExchangeTokenInfo(tokenContract);
+                      if (symbolLocal.length > 0) {
+                        setSymbol(symbolLocal);
+                      } else {
+                        setSymbol(undefined);
+                      }
+                    } catch (error) {
+                      setSymbol(undefined);
+                    }
+                  }
+                }}
+              />
+            </FormField>
+          </TokengatedInfoWrapper>
+
+          <>
+            {tokenGating.tokenType?.value === erc721 && (
+              <StyledGrid flex="1" flexWrap="wrap" gap="1rem">
+                <FormField
+                  title="Token gating ownership requirements"
+                  subTitle="Target a specific NFT or specify a minimum collection balance"
+                  style={{ margin: "1rem 0 0 0" }}
+                  required
+                >
+                  <StyledSelect
+                    name={`${prefix}tokenCriteria`}
+                    options={TOKEN_CRITERIA}
+                  />
+                </FormField>
+                {tokenGating.tokenCriteria?.value === minBalance ? (
+                  <FormField
+                    title="Minimum collection balance"
+                    subTitle="Specify the minimum number of NFTs  that a wallet must hold"
+                    style={{ margin: "1rem 0 0 0" }}
+                    required
+                  >
+                    <Input name={`${prefix}minBalance`} type="string" />
+                  </FormField>
+                ) : (
+                  <FormField
+                    title="Token ID"
+                    subTitle="Enter the Token ID for the specific NFT"
+                    style={{ margin: "1rem 0 0 0" }}
+                  >
+                    <Input name={`${prefix}tokenId`} type="string" />
+                  </FormField>
+                )}
+              </StyledGrid>
+            )}
+
+            {tokenGating.tokenType?.value === erc20 && (
+              <StyledGrid flex="1" flexWrap="wrap" gap="1rem">
+                <FormField
+                  title="Minimum token balance"
+                  subTitle="Specify the minimum token balance a wallet must hold to unlock this gate"
+                  style={{ margin: "1rem 0 0 0" }}
+                  required
+                >
+                  <Input name={`${prefix}minBalance`} type="string" />
+                </FormField>
+                {symbol && (
+                  <FormField
+                    title="Currency"
+                    subTitle="Set from the token address"
+                    style={{ margin: "1rem 0 0 0", flex: "0" }}
+                  >
+                    <SymbolInput
+                      type="string"
+                      name={`${prefix}symbol`}
+                      value={symbol}
+                      disabled
+                      style={{ width: "initial" }}
+                    />
+                  </FormField>
+                )}
+              </StyledGrid>
+            )}
+          </>
+          {tokenGating.tokenType?.value === erc1155 ? (
+            <>
+              <Grid>
+                <FormField
+                  title="Token ID"
+                  subTitle="Enter the specific Token ID from the ERC1155"
+                  style={{ margin: "1rem 0 0 0" }}
+                  required
+                >
+                  <Input name={`${prefix}tokenId`} type="string" />
+                </FormField>
+              </Grid>
+              <StyledGrid flex="1" flexWrap="wrap" gap="1rem">
+                <FormField
+                  title="Minimum token balance"
+                  subTitle="Specify the minimum token balance a wallet must hold to unlock this gate"
+                  required
+                  style={{ margin: "1rem 0 0 0" }}
+                >
+                  <Input name={`${prefix}minBalance`} type="string" />
+                </FormField>
+
+                <FormField
+                  title="Unlocks per wallet"
+                  subTitle="Specify the maximum number of times a wallet can unlock the token gate"
+                  required
+                  style={{ margin: "1rem 0 0 0" }}
+                >
+                  <Input name={`${prefix}maxCommits`} type="string" />
+                </FormField>
+              </StyledGrid>
+            </>
+          ) : (
+            <Grid>
+              <FormField
+                title="Unlocks per wallet"
+                subTitle="Specify the maximum number of times a wallet can unlock the token gate"
+                style={{ margin: "1rem 0 0 0" }}
+                required
+              >
+                <Input name={`${prefix}maxCommits`} type="string" />
+              </FormField>
+            </Grid>
+          )}
+
+          {/* 
+          // TODO: might come back later
+          <Grid>
+            <FormField
+              title="Token gating description"
+              style={{ margin: "1rem 0 0 0" }}
+            >
+              <TokengatedTextarea
+                name={`${prefix}tokenGatingDesc`}
+                placeholder="Token gating description"
+              />
+            </FormField>
+          </Grid> */}
+        </>
+      </FormField>
+      <ProductInformationButtonGroup>
+        <BosonButton
+          variant="primaryFill"
+          type="submit"
+          disabled={nextIsDisabled}
+        >
+          Next
+        </BosonButton>
+      </ProductInformationButtonGroup>
+    </ContainerProductPage>
+  );
+}
diff --git a/src/components/product/utils/const.ts b/src/components/product/utils/const.ts
index 99be6dfba..f61697910 100644
--- a/src/components/product/utils/const.ts
+++ b/src/components/product/utils/const.ts
@@ -13,14 +13,17 @@ export const SUPPORTED_FILE_FORMATS = [
   "image/webp"
 ];
 
-export const CREATE_PRODUCT_STEPS = (isMultiVariant: boolean) => [
+export const CREATE_PRODUCT_STEPS = (
+  isMultiVariant: boolean,
+  isTokenGated: boolean
+) => [
   {
     name: "Product Data",
     steps: isMultiVariant ? 4 : 3
   } as const,
   {
     name: "Terms of Sale",
-    steps: 3
+    steps: isTokenGated ? 4 : 3
   } as const,
   {
     name: "Confirm",
diff --git a/src/components/product/utils/initialValues.ts b/src/components/product/utils/initialValues.ts
index db3d79d49..417569be2 100644
--- a/src/components/product/utils/initialValues.ts
+++ b/src/components/product/utils/initialValues.ts
@@ -8,13 +8,18 @@ import {
   OPTIONS_EXCHANGE_POLICY,
   OPTIONS_LENGTH,
   OPTIONS_PERIOD,
-  OPTIONS_TOKEN_GATED,
   OPTIONS_UNIT,
   OPTIONS_WEIGHT,
   TOKEN_CRITERIA,
   TOKEN_TYPES
 } from "./const";
-import { CreateProductForm, CreateYourProfile } from "./types";
+import {
+  CoreTermsOfSale,
+  CreateProductForm,
+  CreateYourProfile,
+  TokenGating,
+  VariantsCoreTermsOfSale
+} from "./types";
 
 export const createYourProfileInitialValues: CreateYourProfile = {
   createYourProfile: {
@@ -32,7 +37,8 @@ export const createYourProfileInitialValues: CreateYourProfile = {
 export const productTypeInitialValues = {
   productType: {
     productType: "",
-    productVariant: ""
+    productVariant: "",
+    tokenGatedOffer: ""
   }
 } as const;
 
@@ -86,36 +92,32 @@ export const productImagesInitialValues = {
   productAnimation: []
 } as const;
 
-export const coreTermsOfSaleInitialValues = {
+export const coreTermsOfSaleInitialValues: CoreTermsOfSale = {
   coreTermsOfSale: {
     price: null as unknown as number,
     currency: OPTIONS_CURRENCIES[0],
     quantity: 1,
-    tokenGatedOffer: OPTIONS_TOKEN_GATED[0],
-    tokenContract: "",
-    tokenType: TOKEN_TYPES[0],
-    minBalance: undefined,
-    tokenId: undefined,
-    maxCommits: undefined,
-    tokenGatingDesc: "",
-    tokenCriteria: TOKEN_CRITERIA[0],
     redemptionPeriod: [],
     offerValidityPeriod: []
   }
 };
 
-export const variantsCoreTermsOfSaleInitialValues = {
+export const variantsCoreTermsOfSaleInitialValues: VariantsCoreTermsOfSale = {
   variantsCoreTermsOfSale: {
-    tokenGatedOffer: OPTIONS_TOKEN_GATED[0],
+    redemptionPeriod: [],
+    offerValidityPeriod: []
+  }
+};
+
+export const tokenGatingInitialValues: TokenGating = {
+  tokenGating: {
     tokenContract: "",
     tokenType: TOKEN_TYPES[0],
     minBalance: undefined,
     tokenId: undefined,
-    maxCommits: undefined,
-    tokenGatingDesc: "",
-    tokenCriteria: TOKEN_CRITERIA[0],
-    redemptionPeriod: [],
-    offerValidityPeriod: []
+    maxCommits: "",
+    // tokenGatingDesc: "",
+    tokenCriteria: TOKEN_CRITERIA[0]
   }
 };
 
@@ -187,5 +189,6 @@ export const initialValues: CreateProductForm = {
   ...termsOfExchangeInitialValues,
   ...shippingInfoInitialValues,
   ...disputeCentreInitialValues,
-  ...imagesSpecificOrAllInitialValues
+  ...imagesSpecificOrAllInitialValues,
+  ...tokenGatingInitialValues
 } as const;
diff --git a/src/components/product/utils/types.ts b/src/components/product/utils/types.ts
index 00aaad4fa..164e654f1 100644
--- a/src/components/product/utils/types.ts
+++ b/src/components/product/utils/types.ts
@@ -16,6 +16,7 @@ import {
   regularProfileValidationSchema,
   shippingInfoValidationSchema,
   termsOfExchangeValidationSchema,
+  tokenGatingValidationSchema,
   variantsCoreTermsOfSaleValidationSchema
 } from "./validationSchema";
 
@@ -43,6 +44,8 @@ export type VariantsCoreTermsOfSale = Yup.InferType<
   typeof variantsCoreTermsOfSaleValidationSchema
 >;
 
+export type TokenGating = Yup.InferType<typeof tokenGatingValidationSchema>;
+
 export type TermsOfExchange = Yup.InferType<
   typeof termsOfExchangeValidationSchema
 >;
@@ -94,4 +97,5 @@ export type CreateProductForm = CreateYourProfile &
   DisputeCentreAdditionalInformation &
   DisputeCentreMakeProposal &
   DisputeCentreValidationSchemaProposalSummary &
-  ImagesSpecificOrAll;
+  ImagesSpecificOrAll &
+  TokenGating;
diff --git a/src/components/product/utils/validationSchema.ts b/src/components/product/utils/validationSchema.ts
index a732d251f..ab19ac002 100644
--- a/src/components/product/utils/validationSchema.ts
+++ b/src/components/product/utils/validationSchema.ts
@@ -16,7 +16,6 @@ import {
   OPTIONS_DISPUTE_RESOLVER,
   OPTIONS_EXCHANGE_POLICY,
   OPTIONS_PERIOD,
-  OPTIONS_TOKEN_GATED,
   OPTIONS_UNIT,
   TOKEN_CRITERIA,
   TOKEN_TYPES
@@ -40,7 +39,11 @@ export const productTypeValidationSchema = Yup.object({
       .min(1)
       .oneOf(["physical", "phygital"])
       .required(validationMessage.required),
-    productVariant: Yup.string().min(1).required(validationMessage.required)
+    productVariant: Yup.string().min(1).required(validationMessage.required),
+    tokenGatedOffer: Yup.string()
+      .min(1)
+      .oneOf(["true", "false"])
+      .required(validationMessage.required)
   })
 });
 
@@ -179,12 +182,6 @@ export const productInformationValidationSchema = Yup.object({
 });
 
 export const commonCoreTermsOfSaleValidationSchema = {
-  tokenGatedOffer: Yup.object()
-    .shape({
-      value: Yup.string(),
-      label: Yup.string()
-    })
-    .default([{ value: "", label: "" }]),
   offerValidityPeriod: Yup.array()
     .required(validationMessage.required)
     .min(2, validationMessage.required)
@@ -192,56 +189,35 @@ export const commonCoreTermsOfSaleValidationSchema = {
   redemptionPeriod: Yup.array()
     .required(validationMessage.required)
     .min(2, validationMessage.required)
-    .isRedemptionDatesValid(),
-  tokenContract: Yup.string()
-    .when(["tokenGatedOffer"], {
-      is: (tokenGated: SelectDataProps) =>
-        tokenGated?.value === OPTIONS_TOKEN_GATED[1].value,
-      then: (schema) => schema.required(validationMessage.required)
-    })
-    .test("FORMAT", "Must be a valid address", (value) =>
-      value ? ethers.utils.isAddress(value) : true
-    ),
-  maxCommits: Yup.string()
-    .when(["tokenGatedOffer"], {
-      is: (tokenGated: SelectDataProps) =>
-        tokenGated?.value === OPTIONS_TOKEN_GATED[1].value,
-      then: (schema) => schema.required(validationMessage.required)
-    })
-    .matches(/^\+?[1-9]\d*$/, "Value must greater than or equal to 0"),
-  tokenType: Yup.object()
-    .when(["tokenGatedOffer"], {
-      is: (tokenGated: SelectDataProps) =>
-        tokenGated?.value === OPTIONS_TOKEN_GATED[1].value,
-      then: (schema) => schema.required(validationMessage.required)
-    })
-    .shape({
+    .isRedemptionDatesValid()
+};
+
+export const tokenGatingValidationSchema = Yup.object({
+  tokenGating: Yup.object({
+    tokenContract: Yup.string()
+      .required(validationMessage.required)
+      .test("FORMAT", "Must be a valid address", (value) =>
+        value ? ethers.utils.isAddress(value) : true
+      ),
+    maxCommits: Yup.string()
+      .required(validationMessage.required)
+      .matches(/^\+?[1-9]\d*$/, "Value must greater than or equal to 0"),
+    tokenType: Yup.object()
+      .required(validationMessage.required)
+      .shape({
+        value: Yup.string(),
+        label: Yup.string()
+      })
+      .default([{ value: "", label: "" }]),
+    tokenCriteria: Yup.object({
       value: Yup.string(),
       label: Yup.string()
-    })
-    .default([{ value: "", label: "" }]),
-  tokenCriteria: Yup.object({
-    value: Yup.string(),
-    label: Yup.string()
-  }).when(["tokenGatedOffer"], {
-    is: (tokenGated: SelectDataProps) =>
-      tokenGated?.value === OPTIONS_TOKEN_GATED[1].value,
-    then: (schema) => schema.required(validationMessage.required)
-  }),
-  minBalance: Yup.string().when(
-    ["tokenGatedOffer", "tokenType", "tokenCriteria"],
-    {
-      is: (
-        tokenGated: SelectDataProps,
-        tokenType: SelectDataProps,
-        tokenCriteria: SelectDataProps
-      ) =>
-        (tokenGated?.value === OPTIONS_TOKEN_GATED[1].value &&
-          tokenType?.value === TOKEN_TYPES[0].value) ||
-        (tokenGated?.value === OPTIONS_TOKEN_GATED[1].value &&
-          tokenType?.value === TOKEN_TYPES[2].value) ||
-        (tokenGated?.value === OPTIONS_TOKEN_GATED[1].value &&
-          tokenType?.value === TOKEN_TYPES[1].value &&
+    }).required(validationMessage.required),
+    minBalance: Yup.string().when(["tokenType", "tokenCriteria"], {
+      is: (tokenType: SelectDataProps, tokenCriteria: SelectDataProps) =>
+        tokenType?.value === TOKEN_TYPES[0].value ||
+        tokenType?.value === TOKEN_TYPES[2].value ||
+        (tokenType?.value === TOKEN_TYPES[1].value &&
           tokenCriteria?.value === TOKEN_CRITERIA[0].value),
       then: (schema) =>
         schema
@@ -251,20 +227,11 @@ export const commonCoreTermsOfSaleValidationSchema = {
             "Min balance must be greater than or equal to 1"
           )
           .typeError("Value must be an integer greater than or equal to 1")
-    }
-  ),
-  tokenId: Yup.string().when(
-    ["tokenGatedOffer", "tokenType", "tokenCriteria"],
-    {
-      is: (
-        tokenGated: SelectDataProps,
-        tokenType: SelectDataProps,
-        tokenCriteria: SelectDataProps
-      ) =>
-        (tokenGated?.value === OPTIONS_TOKEN_GATED[1].value &&
-          tokenType?.value === TOKEN_TYPES[2].value) ||
-        (tokenGated?.value === OPTIONS_TOKEN_GATED[1].value &&
-          tokenType?.value === TOKEN_TYPES[1].value &&
+    }),
+    tokenId: Yup.string().when(["tokenType", "tokenCriteria"], {
+      is: (tokenType: SelectDataProps, tokenCriteria: SelectDataProps) =>
+        tokenType?.value === TOKEN_TYPES[2].value ||
+        (tokenType?.value === TOKEN_TYPES[1].value &&
           tokenCriteria?.value === TOKEN_CRITERIA[1].value),
       then: (schema) =>
         schema
@@ -283,15 +250,11 @@ export const commonCoreTermsOfSaleValidationSchema = {
           )
           .typeError("Value must be an integer greater than or equal to 0")
           .required(validationMessage.required)
-    }
-  ),
+    })
 
-  tokenGatingDesc: Yup.string().when(["tokenGatedOffer"], {
-    is: (tokenGated: SelectDataProps) =>
-      tokenGated?.value === OPTIONS_TOKEN_GATED[1].value,
-    then: (schema) => schema.required(validationMessage.required)
+    // tokenGatingDesc: Yup.string().required(validationMessage.required)
   })
-};
+});
 
 export const coreTermsOfSaleValidationSchema = Yup.object({
   coreTermsOfSale: Yup.object({
diff --git a/src/components/productCard/ProductCard.tsx b/src/components/productCard/ProductCard.tsx
index d0827ceca..5d3ec1c50 100644
--- a/src/components/productCard/ProductCard.tsx
+++ b/src/components/productCard/ProductCard.tsx
@@ -1,4 +1,5 @@
 import {
+  AuthTokenType,
   Currencies,
   ProductCard as BosonProductCard
 } from "@bosonprotocol/react-kit";
@@ -27,7 +28,6 @@ import {
   ExtendedOffer,
   FilterOptions
 } from "../../pages/explore/WithAllOffers";
-import { ProfileType } from "../modal/components/Profile/const";
 import { getLensProfilePictureUrl } from "../modal/components/Profile/Lens/utils";
 import { useConvertedPrice } from "../price/useConvertedPrice";
 
@@ -79,7 +79,7 @@ export default function ProductCard({
   });
   const seller = offer?.seller;
   const metadata = seller?.metadata;
-  const useLens = !metadata || metadata.kind === ProfileType.LENS;
+  const useLens = seller?.authTokenType === AuthTokenType.LENS;
   const regularProfilePicture =
     metadata?.images?.find((img) => img.tag === "profile")?.url ?? "";
   const [lens] = lensProfiles;
diff --git a/src/components/seller/SellerFilters.tsx b/src/components/seller/SellerFilters.tsx
index da367c4f3..ebd7a973f 100644
--- a/src/components/seller/SellerFilters.tsx
+++ b/src/components/seller/SellerFilters.tsx
@@ -44,7 +44,12 @@ export default function SellerFilters({ setSearch, search, buttons }: Props) {
   // };
 
   return (
-    <Grid gap="1rem" padding="2rem 0" justifyContent="space-between">
+    <Grid
+      gap="1rem"
+      padding="2rem 0"
+      justifyContent="space-between"
+      flexWrap="wrap"
+    >
       <div>
         <Grid gap="1rem" padding="0" justifyContent="flex-start">
           {/* <SelectFilterWrapper>
diff --git a/src/components/seller/SellerPages.tsx b/src/components/seller/SellerPages.tsx
index a28b87971..17bc541c0 100644
--- a/src/components/seller/SellerPages.tsx
+++ b/src/components/seller/SellerPages.tsx
@@ -7,80 +7,79 @@ import {
   Storefront,
   User
 } from "phosphor-react";
-import React from "react";
 
-import { BosonRoutes } from "../../lib/routing/routes";
+import { BosonRoutes, SellerCenterSubRoutes } from "../../lib/routing/routes";
 import Navigate from "../customNavigation/Navigate";
-import { WithSellerDataProps } from "./common/WithSellerData";
 import SellerDashboard from "./dashboard/SellerDashboard";
 import SellerExchanges from "./exchanges/SellerExchanges";
 import SellerFinances from "./finances/SellerFinances";
 import SellerProducts from "./products/SellerProducts";
 import { ProfileDetails } from "./profileDetails/ProfileDetails";
-import { SellerInsideProps } from "./SellerInside";
+import { SalesChannels } from "./salesChannels/SalesChannels";
 
-export const DEFAULT_SELLER_PAGE = "dashboard";
+export const DEFAULT_SELLER_PAGE = SellerCenterSubRoutes.Dashboard;
 
 export const sellerPageTypes = {
   dashboard: {
-    url: DEFAULT_SELLER_PAGE,
+    url: SellerCenterSubRoutes.Dashboard,
     label: "Dashboard",
     icon: GridFour,
     externalPath: null,
-    component: (props: SellerInsideProps & WithSellerDataProps) => (
+    component: (props: Parameters<typeof SellerDashboard>[0]) => (
       <SellerDashboard {...props} />
     ),
     withoutWrapper: true
   },
   products: {
-    url: "products",
+    url: SellerCenterSubRoutes.Products,
     label: "Products",
     icon: Storefront,
     externalPath: null,
-    component: (props: SellerInsideProps & WithSellerDataProps) => (
+    component: (props: Parameters<typeof SellerProducts>[0]) => (
       <SellerProducts {...props} />
     )
   },
   exchanges: {
-    url: "exchanges",
+    url: SellerCenterSubRoutes.Exchanges,
     label: "Exchanges",
     icon: ArrowsLeftRight,
     externalPath: null,
-    component: (props: SellerInsideProps & WithSellerDataProps) => (
+    component: (props: Parameters<typeof SellerExchanges>[0]) => (
       <SellerExchanges {...props} />
     )
   },
   messages: {
-    url: "messages",
+    url: SellerCenterSubRoutes.Messages,
     label: "Messages",
     icon: Chats,
     externalPath: BosonRoutes.Chat,
     component: () => <Navigate replace to={{ pathname: BosonRoutes.Chat }} />
   },
   finances: {
-    url: "finances",
+    url: SellerCenterSubRoutes.Finances,
     label: "Finances",
     icon: Bank,
     externalPath: null,
-    component: (props: SellerInsideProps & WithSellerDataProps) => (
+    component: (props: Parameters<typeof SellerFinances>[0]) => (
       <SellerFinances {...props} />
     )
   },
-  customStoreFront: {
-    url: "customStoreFront",
-    label: "Custom Storefront",
+  salesChannels: {
+    url: SellerCenterSubRoutes["Sales Channels"],
+    label: "Sales Channels",
     icon: Megaphone,
-    externalPath: BosonRoutes.CreateStorefront,
-    component: () => (
-      <Navigate replace to={{ pathname: BosonRoutes.CreateStorefront }} />
-    )
+    externalPath: null,
+    component: (props: Parameters<typeof SalesChannels>[0]) => (
+      <SalesChannels {...props} />
+    ),
+    withoutWrapper: true
   },
   profileDetails: {
-    url: "profileDetails",
+    url: SellerCenterSubRoutes["Profile Details"],
     label: "Profile Details",
     icon: User,
     externalPath: null,
-    component: (props: SellerInsideProps & WithSellerDataProps) => (
+    component: (props: Parameters<typeof ProfileDetails>[0]) => (
       <ProfileDetails {...props} />
     ),
     withoutWrapper: true
diff --git a/src/components/seller/common/WithSellerData.tsx b/src/components/seller/common/WithSellerData.tsx
index d3f2c2d18..a5b523f77 100644
--- a/src/components/seller/common/WithSellerData.tsx
+++ b/src/components/seller/common/WithSellerData.tsx
@@ -27,7 +27,6 @@ import { useSellerCurationListFn } from "../../../lib/utils/hooks/useSellers";
 import useFunds, { FundsProps } from "../../../pages/account/funds/useFunds";
 import { useConvertionRate } from "../../convertion-rate/useConvertionRate";
 import Loading from "../../ui/Loading";
-import { SellerInsideProps } from "../SellerInside";
 import useOffersBacked from "./useOffersBacked";
 
 export const Wrapper = styled.div`
@@ -79,10 +78,13 @@ export interface WithSellerDataProps {
   sellerRoles: SellerRolesProps;
   isSellerCurated: boolean;
 }
-export function WithSellerData(
-  WrappedComponent: React.ComponentType<SellerInsideProps & WithSellerDataProps>
-) {
-  const ComponentWithSellerData = (props: SellerInsideProps) => {
+
+export function WithSellerData<
+  U extends Partial<WithSellerDataProps>,
+  A,
+  T extends Omit<A, keyof WithSellerDataProps>
+>(WrappedComponent: React.ComponentType<A>) {
+  const ComponentWithSellerData = (props: T & U & { sellerId: string }) => {
     const sellerId = CONFIG.mockSellerId || props.sellerId;
     const sellerRoles = useSellerRoles(sellerId);
     const checkIfSellerIsInCurationList = useSellerCurationListFn();
@@ -171,7 +173,10 @@ export function WithSellerData(
         </Wrapper>
       );
     }
+
     return (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       <WrappedComponent {...props} {...newProps} offersBacked={offersBacked} />
     );
   };
diff --git a/src/components/seller/dashboard/SellerDashboard.tsx b/src/components/seller/dashboard/SellerDashboard.tsx
index 53b260c91..b8b641f46 100644
--- a/src/components/seller/dashboard/SellerDashboard.tsx
+++ b/src/components/seller/dashboard/SellerDashboard.tsx
@@ -18,6 +18,7 @@ import GridContainer from "../../ui/GridContainer";
 import Loading from "../../ui/Loading";
 import Typography from "../../ui/Typography";
 import { WithSellerDataProps } from "../common/WithSellerData";
+import { getSellerCenterPath } from "../paths";
 import { SellerInsideProps } from "../SellerInside";
 import { SellerInner } from "./SellerDashboard.styles";
 import SellerDashboardInfo from "./SellerDashboardInfo";
@@ -203,9 +204,7 @@ export default function SellerDashboard({
               name="Commits"
               items={commits.slice(0, 3)}
               onClick={() => {
-                const pathname = generatePath(SellerCenterRoutes.SellerCenter, {
-                  [UrlParameters.sellerPage]: "exchanges"
-                });
+                const pathname = getSellerCenterPath("Exchanges");
                 navigate({ pathname }, { state: { currentTag: "live-rnfts" } });
               }}
             />
diff --git a/src/components/seller/paths.ts b/src/components/seller/paths.ts
new file mode 100644
index 000000000..3a0a0d37e
--- /dev/null
+++ b/src/components/seller/paths.ts
@@ -0,0 +1,15 @@
+import { generatePath } from "react-router-dom";
+
+import { UrlParameters } from "../../lib/routing/parameters";
+import {
+  SellerCenterRoutes,
+  SellerCenterSubRoutes
+} from "../../lib/routing/routes";
+
+export const getSellerCenterPath = (
+  path: keyof typeof SellerCenterSubRoutes
+) => {
+  return generatePath(SellerCenterRoutes.SellerCenter, {
+    [UrlParameters.sellerPage]: SellerCenterSubRoutes[path]
+  });
+};
diff --git a/src/components/seller/products/Actions.tsx b/src/components/seller/products/Actions.tsx
new file mode 100644
index 000000000..44ad86248
--- /dev/null
+++ b/src/components/seller/products/Actions.tsx
@@ -0,0 +1,218 @@
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { CaretDown } from "phosphor-react";
+import React, { ReactNode } from "react";
+import { createGlobalStyle } from "styled-components";
+
+import { colors } from "../../../lib/styles/colors";
+import Button from "../../ui/Button";
+import Grid from "../../ui/Grid";
+
+const GlobalStyle = createGlobalStyle`
+.DropdownMenuContent,
+.DropdownMenuSubContent {
+  min-width: 220px;
+  background-color: white;
+  border: 1px solid ${colors.border};
+  border-radius: 6px;
+  padding: 5px;
+  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+.DropdownMenuContent[data-side='top'],
+.DropdownMenuSubContent[data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+.DropdownMenuContent[data-side='right'],
+.DropdownMenuSubContent[data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+.DropdownMenuContent[data-side='bottom'],
+.DropdownMenuSubContent[data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+.DropdownMenuContent[data-side='left'],
+.DropdownMenuSubContent[data-side='left'] {
+  animation-name: slideRightAndFade;
+}
+
+.DropdownMenuItem,
+.DropdownMenuCheckboxItem,
+.DropdownMenuRadioItem,
+.DropdownMenuSubTrigger {
+  font-size: 13px;
+  line-height: 1;
+  color: ${colors.black};
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  height: 25px;
+  padding: 0 5px;
+  position: relative;
+  padding-left: 25px;
+  user-select: none;
+  outline: none;
+}
+.DropdownMenuSubTrigger[data-state='open'] {
+  background-color: ${colors.blue};
+  color: var(--accent);
+}
+.DropdownMenuItem[data-disabled],
+.DropdownMenuCheckboxItem[data-disabled],
+.DropdownMenuRadioItem[data-disabled],
+.DropdownMenuSubTrigger[data-disabled] {
+  color: ${colors.lightGrey};
+  pointer-events: none;
+}
+.DropdownMenuItem[data-highlighted],
+.DropdownMenuCheckboxItem[data-highlighted],
+.DropdownMenuRadioItem[data-highlighted],
+.DropdownMenuSubTrigger[data-highlighted] {
+  background-color: ${colors.lightGrey};
+  color: ${colors.darkGrey};
+}
+
+.DropdownMenuLabel {
+  padding-left: 25px;
+  font-size: 12px;
+  line-height: 25px;
+  color: ${colors.black};
+}
+
+.DropdownMenuSeparator {
+  height: 1px;
+  background-color: var(--accent);
+  margin: 5px;
+}
+
+.DropdownMenuItemIndicator {
+  position: absolute;
+  left: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.DropdownMenuArrow {
+  fill: white;
+}
+
+.IconButton {
+  font-family: inherit;
+  border-radius: 100%;
+  height: 35px;
+  width: 35px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet11);
+  background-color: white;
+  box-shadow: 0 2px 10px ${colors.black};
+}
+.IconButton:hover {
+  background-color: var(--accent);
+}
+.IconButton:focus {
+  box-shadow: 0 0 0 2px black;
+}
+
+.RightSlot {
+  margin-left: auto;
+  padding-left: 20px;
+  color: var(--accent);
+}
+[data-highlighted] > .RightSlot {
+  color: white;
+}
+[data-disabled] .RightSlot {
+  color: var(--accent);
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+  `;
+
+interface ActionsProps {
+  label: string;
+  items: { key: string; content: ReactNode }[];
+}
+
+const Actions: React.FC<ActionsProps> = ({ label, items }) => {
+  return (
+    <>
+      <GlobalStyle />
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild={false}>
+          <Button theme="secondary" size={"small"}>
+            <Grid gap="0.5rem">
+              {label} <CaretDown size={16} />
+            </Grid>
+          </Button>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content className="DropdownMenuContent" sideOffset={5}>
+            {items.map((item) => {
+              return (
+                <DropdownMenu.Item
+                  className="DropdownMenuItem"
+                  key={item.key}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  {item.content}
+                </DropdownMenu.Item>
+              );
+            })}
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </>
+  );
+};
+
+export default Actions;
diff --git a/src/components/seller/products/SellerProducts.tsx b/src/components/seller/products/SellerProducts.tsx
index 95dea2ec3..0275a839d 100644
--- a/src/components/seller/products/SellerProducts.tsx
+++ b/src/components/seller/products/SellerProducts.tsx
@@ -2,12 +2,14 @@ import { offers } from "@bosonprotocol/react-kit";
 import dayjs from "dayjs";
 import map from "lodash/map";
 import uniqBy from "lodash/uniqBy";
+import { ArrowsClockwise } from "phosphor-react";
 import { useMemo, useState } from "react";
 
 import { CONFIG } from "../../../lib/config";
 import { Offer } from "../../../lib/types/offer";
 import { calcPrice } from "../../../lib/utils/calcPrice";
 import { getDateTimestamp } from "../../../lib/utils/getDateTimestamp";
+import { useSellers } from "../../../lib/utils/hooks/useSellers";
 import { ExtendedOffer } from "../../../pages/explore/WithAllOffers";
 import Loading from "../../ui/Loading";
 import { WithSellerDataProps } from "../common/WithSellerData";
@@ -17,7 +19,9 @@ import SellerExport from "../SellerExport";
 import SellerFilters from "../SellerFilters";
 import { SellerInsideProps } from "../SellerInside";
 import SellerTags from "../SellerTags";
-import SellerProductsTable from "./SellerProductsTable";
+import SellerProductsTable, {
+  SellerProductsTableProps
+} from "./SellerProductsTable";
 
 const productTags = [
   {
@@ -46,13 +50,29 @@ interface FilterValue {
   value: string;
   label: string;
 }
-
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const emptyArray: any[] = [];
 export default function SellerProducts({
   products: productsData,
   sellerRoles,
   sellerId,
-  offersBacked
-}: SellerInsideProps & WithSellerDataProps) {
+  offersBacked,
+  columnsToShow
+}: SellerInsideProps &
+  WithSellerDataProps &
+  Pick<SellerProductsTableProps, "columnsToShow">) {
+  const {
+    data: sellers,
+    isLoading: isLoadingSellers,
+    refetch: refetchSellers,
+    isRefetching: isSellersRefetching
+  } = useSellers(
+    {
+      id: sellerId
+    },
+    { enabled: !!sellerId }
+  );
+  const salesChannels = sellers?.[0]?.metadata?.salesChannels ?? emptyArray;
   const [currentTag, setCurrentTag] = useState(productTags[0].value);
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<FilterValue | null>(null);
@@ -155,11 +175,19 @@ export default function SellerProducts({
           }}
         />
         <SellerAddNewProduct sellerRoles={sellerRoles} />
+        <ArrowsClockwise
+          size={15}
+          style={{ cursor: "pointer" }}
+          onClick={() => {
+            refetch();
+            refetchSellers();
+          }}
+        />
       </>
     );
-  }, [prepareCSVData, selected, refetch, sellerRoles]);
-
-  if (isLoading) {
+  }, [prepareCSVData, selected, refetch, sellerRoles, refetchSellers]);
+  const anyLoading = isLoading || isLoadingSellers;
+  if (anyLoading) {
     return <Loading />;
   }
 
@@ -180,12 +208,17 @@ export default function SellerProducts({
       <SellerProductsTable
         currentTag={currentTag}
         offers={allOffers}
-        isLoading={isLoading}
+        isLoading={anyLoading}
+        isSellersRefetching={isSellersRefetching}
         isError={isError}
         refetch={refetch}
         setSelected={setSelected}
         sellerRoles={sellerRoles}
         offersBacked={offersBacked}
+        columnsToShow={columnsToShow}
+        salesChannels={salesChannels}
+        refetchSellers={refetchSellers}
+        sellerId={sellerId}
       />
     </>
   );
diff --git a/src/components/seller/products/SellerProductsTable.tsx b/src/components/seller/products/SellerProductsTable.tsx
index af58d3ed6..a57235e59 100644
--- a/src/components/seller/products/SellerProductsTable.tsx
+++ b/src/components/seller/products/SellerProductsTable.tsx
@@ -35,6 +35,8 @@ import { useKeepQueryParamsNavigate } from "../../../lib/utils/hooks/useKeepQuer
 import { SellerRolesProps } from "../../../lib/utils/hooks/useSellerRoles";
 import { ExtendedOffer } from "../../../pages/explore/WithAllOffers";
 import { CheckboxWrapper } from "../../form/Field.styles";
+import { Spinner } from "../../loading/Spinner";
+import { Channels } from "../../modal/components/SalesChannelsModal/form";
 import { useModal } from "../../modal/useModal";
 import OfferStatuses from "../../offer/OfferStatuses";
 import Price from "../../price/index";
@@ -44,9 +46,20 @@ import Button from "../../ui/Button";
 import Grid from "../../ui/Grid";
 import Image from "../../ui/Image";
 import Typography from "../../ui/Typography";
+import { UnthemedButton } from "../../ui/UnthemedButton";
 import PaginationPages from "../common/PaginationPages";
 import { BackedProps, OffersBackedProps } from "../common/WithSellerData";
+import Actions from "./Actions";
 import OfferVariation from "./OfferVariation";
+import { SalesChannels } from "./types";
+
+const TagWrapper = styled.div`
+  background-color: ${colors.lightGrey};
+  display: inline-block;
+  padding: 0.5em 0.75em;
+  font-size: 0.75rem;
+  font-weight: 600;
+`;
 
 const VoidButton = styled(BosonButton)`
   background: transparent;
@@ -61,7 +74,7 @@ const VoidButton = styled(BosonButton)`
 
 const StyledCheckboxWrapper = styled(CheckboxWrapper)``;
 
-interface Props {
+export interface SellerProductsTableProps {
   offers: (ExtendedOffer | null)[];
   isError: boolean;
   isLoading?: boolean;
@@ -70,6 +83,11 @@ interface Props {
   sellerRoles: SellerRolesProps;
   currentTag: string;
   offersBacked: OffersBackedProps;
+  columnsToShow?: ProductsTableColumnId[] | Readonly<ProductsTableColumnId[]>;
+  salesChannels: SalesChannels;
+  refetchSellers: () => void;
+  isSellersRefetching: boolean;
+  sellerId: string;
 }
 
 interface IIndeterminateInputProps {
@@ -244,11 +262,6 @@ const Span = styled.span`
     margin-right: 1rem;
   }
 `;
-const RelistButton = styled(Button)`
-  * {
-    line-height: 21px;
-  }
-`;
 
 const statusOrder = [
   OffersKit.OfferState.NOT_YET_VALID,
@@ -273,72 +286,120 @@ const compareOffersSortByStatus = (
   );
 };
 
+export enum ProductsTableColumnId {
+  offerId = "offerId",
+  warningIcon = "warningIcon",
+  image = "image",
+  sku = "sku",
+  productName = "productName",
+  status = "status",
+  quantity = "quantity",
+  price = "price",
+  offerValidity = "offerValidity",
+  salesChannels = "salesChannels",
+  action = "action"
+}
+const defaultColumnsToShow = Object.values(ProductsTableColumnId);
+
 export default function SellerProductsTable({
   offers,
   refetch,
   setSelected,
   sellerRoles,
   currentTag,
-  offersBacked
-}: Props) {
-  const { showModal, modalTypes } = useModal();
-  const navigate = useKeepQueryParamsNavigate();
-  const columns = useMemo(
+  offersBacked,
+  columnsToShow = defaultColumnsToShow,
+  salesChannels: salesChannelsWithoutdApp,
+  refetchSellers,
+  isSellersRefetching,
+  sellerId
+}: SellerProductsTableProps) {
+  const salesChannels: SalesChannels = useMemo(
     () => [
       {
-        Header: "Offer ID",
-        accessor: "offerId"
-      } as const,
-      {
-        Header: "",
-        accessor: "warningIcon",
-        disableSortBy: true,
-        maxWidth: 30
-      } as const,
-      {
-        Header: "",
-        accessor: "image",
-        disableSortBy: true,
-        maxWidth: 50
-      } as const,
-      {
-        Header: "ID/SKU",
-        accessor: "sku",
-        maxWidth: 80
-      } as const,
-      {
-        Header: "Product name",
-        accessor: "productName",
-        maxWidth: 200
-      } as const,
-      {
-        Header: "Status",
-        accessor: "status",
-        disableSortBy: true,
-        maxWidth: 100
-      } as const,
-      {
-        Header: "Quantity (available/total)",
-        accessor: "quantity",
-        disableSortBy: true
-      } as const,
-      {
-        Header: "Price",
-        accessor: "price",
-        disableSortBy: true
-      } as const,
-      {
-        Header: "Offer validity",
-        accessor: "offerValidity",
-        disableSortBy: true
-      } as const,
-      {
-        Header: "Action",
-        accessor: "action",
-        disableSortBy: true
-      } as const
+        tag: Channels.dApp,
+        id: `${sellerId}-${Channels.dApp.toLowerCase()}-sale-channel`
+      } as SalesChannels[number],
+      ...salesChannelsWithoutdApp
     ],
-    []
+    [salesChannelsWithoutdApp, sellerId]
+  );
+  const { showModal, modalTypes } = useModal();
+  const navigate = useKeepQueryParamsNavigate();
+  const columns = useMemo(
+    () =>
+      [
+        {
+          id: ProductsTableColumnId.offerId,
+          Header: "Offer ID",
+          accessor: "offerId"
+        } as const,
+        {
+          id: ProductsTableColumnId.warningIcon,
+          Header: "",
+          accessor: "warningIcon",
+          disableSortBy: true,
+          maxWidth: 30
+        } as const,
+        {
+          id: ProductsTableColumnId.image,
+          Header: "",
+          accessor: "image",
+          disableSortBy: true,
+          maxWidth: 50
+        } as const,
+        {
+          id: ProductsTableColumnId.sku,
+          Header: "ID/SKU",
+          accessor: "sku",
+          maxWidth: 80
+        } as const,
+        {
+          id: ProductsTableColumnId.productName,
+          Header: "Product name",
+          accessor: "productName",
+          maxWidth: 200
+        } as const,
+        {
+          id: ProductsTableColumnId.status,
+          Header: "Status",
+          accessor: "status",
+          disableSortBy: true,
+          maxWidth: 100
+        } as const,
+        {
+          id: ProductsTableColumnId.quantity,
+          Header: "Quantity (available/total)",
+          accessor: "quantity",
+          disableSortBy: true
+        } as const,
+        {
+          id: ProductsTableColumnId.price,
+          Header: "Price",
+          accessor: "price",
+          disableSortBy: true
+        } as const,
+        {
+          id: ProductsTableColumnId.offerValidity,
+          Header: "Offer validity",
+          accessor: "offerValidity",
+          disableSortBy: true
+        } as const,
+        {
+          id: ProductsTableColumnId.salesChannels,
+          Header: "Sales channels",
+          accessor: "salesChannels",
+          disableSortBy: true,
+          width: 280
+        } as const,
+        {
+          id: ProductsTableColumnId.action,
+          Header: "Action",
+          accessor: "action",
+          disableSortBy: true
+        } as const
+      ].filter((col) => columnsToShow.includes(col.id)),
+    [columnsToShow]
   );
 
   const shouldDisplayFundWarning = useCallback(
@@ -649,6 +710,35 @@ export default function SellerProductsTable({
                 </span>
               </Typography>
             ),
+            salesChannels: (() => {
+              return (
+                <Grid gap="1rem" justifyContent="flex-start">
+                  {salesChannels
+                    .filter(
+                      (ch) =>
+                        ch.tag === Channels.dApp ||
+                        ch.deployments?.some(
+                          (deployment) =>
+                            deployment?.product?.uuid ===
+                              offer?.additional?.product.uuid &&
+                            offer?.additional?.product.uuid
+                        )
+                    )
+                    .map((channel) => {
+                      return (
+                        <TagWrapper
+                          key={
+                            channel.tag + "-" + channel.link + "-" + channel.id
+                          }
+                        >
+                          {channel.tag}
+                        </TagWrapper>
+                      );
+                    })}
+                  {isSellersRefetching && <Spinner size={10} />}
+                </Grid>
+              );
+            })(),
             action: (() => {
               const withVoidButton = !(
                 status === OffersKit.OfferState.EXPIRED ||
@@ -656,86 +746,141 @@ export default function SellerProductsTable({
                 offer?.quantityAvailable === "0"
               );
               return (
-                <Grid gap="1rem">
-                  {withVoidButton && (
-                    <VoidButton
-                      variant="secondaryInverted"
-                      size={ButtonSize.Small}
-                      disabled={!sellerRoles?.isAssistant}
-                      tooltip="This action is restricted to only the assistant wallet"
-                      onClick={() => {
-                        if (offer) {
-                          if (showVariant) {
-                            showModal(
-                              modalTypes.VOID_PRODUCT,
-                              {
-                                title: "Void Confirmation",
-                                offers: offer.additional?.variants.filter(
-                                  (variant) => {
-                                    variant.validUntilDate;
-                                    return (
-                                      !variant.voided &&
-                                      !dayjs(
-                                        getDateTimestamp(offer?.validUntilDate)
-                                      ).isBefore(dayjs())
-                                    );
-                                  }
-                                ) as Offer[],
-                                refetch
-                              },
-                              "s"
-                            );
-                          } else {
-                            showModal(
-                              modalTypes.VOID_PRODUCT,
-                              {
-                                title: "Void Confirmation",
-                                offerId: offer.id,
+                <Grid gap="1rem" justifyContent="flex-end">
+                  <Actions
+                    label="Actions"
+                    items={[
+                      ...(withVoidButton
+                        ? [
+                            {
+                              key: "void",
+                              content: (
+                                <UnthemedButton
+                                  style={{ width: "100%" }}
+                                  disabled={!sellerRoles?.isAssistant}
+                                  tooltip="This action is restricted to only the assistant wallet"
+                                  onClick={() => {
+                                    if (offer) {
+                                      if (showVariant) {
+                                        showModal(
+                                          modalTypes.VOID_PRODUCT,
+                                          {
+                                            title: "Void Confirmation",
+                                            offers:
+                                              offer.additional?.variants.filter(
+                                                (variant) => {
+                                                  variant.validUntilDate;
+                                                  return (
+                                                    !variant.voided &&
+                                                    !dayjs(
+                                                      getDateTimestamp(
+                                                        offer?.validUntilDate
+                                                      )
+                                                    ).isBefore(dayjs())
+                                                  );
+                                                }
+                                              ) as Offer[],
+                                            refetch
+                                          },
+                                          "s"
+                                        );
+                                      } else {
+                                        showModal(
+                                          modalTypes.VOID_PRODUCT,
+                                          {
+                                            title: "Void Confirmation",
+                                            offerId: offer.id,
+                                            offer,
+                                            refetch
+                                          },
+                                          "xs"
+                                        );
+                                      }
+                                    }
+                                  }}
+                                >
+                                  Void
+                                </UnthemedButton>
+                              )
+                            }
+                          ]
+                        : []),
+                      {
+                        key: "relist",
+                        content: (
+                          <UnthemedButton
+                            style={{ width: "100%" }}
+                            tooltip="This action is restricted to only the assistant wallet"
+                            disabled={!offer || !sellerRoles?.isAssistant}
+                            onClick={async (
+                              event: Parameters<
+                                NonNullable<
+                                  Parameters<typeof Button>[0]["onClick"]
+                                >
+                              >[0]
+                            ) => {
+                              event.stopPropagation();
+                              if (!offer) {
+                                return;
+                              }
+                              showModal(modalTypes.RELIST_OFFER, {
+                                title: `Relist Offer "${offer.metadata.name}"`,
                                 offer,
-                                refetch
-                              },
-                              "xs"
-                            );
-                          }
-                        }
-                      }}
-                    >
-                      Void
-                    </VoidButton>
-                  )}
-                  <RelistButton
-                    theme="orangeInverse"
-                    style={{
-                      padding: "0.25rem 1rem",
-                      margin: "1px"
-                    }}
-                    tooltip="This action is restricted to only the assistant wallet"
-                    disabled={!offer || !sellerRoles?.isAssistant}
-                    onClick={async (
-                      event: Parameters<
-                        NonNullable<Parameters<typeof Button>[0]["onClick"]>
-                      >[0]
-                    ) => {
-                      event.stopPropagation();
-                      if (!offer) {
-                        return;
+                                onRelistedSuccessfully: refetch
+                              });
+                            }}
+                          >
+                            Relist
+                          </UnthemedButton>
+                        )
+                      },
+                      {
+                        key: "update-sales-channels",
+                        content: (
+                          <UnthemedButton
+                            style={{ width: "100%" }}
+                            onClick={() => {
+                              if (
+                                !offer ||
+                                !offer.additional?.product.uuid ||
+                                !offer.additional?.product.version
+                              ) {
+                                return;
+                              }
+                              showModal(
+                                modalTypes.SALES_CHANNELS,
+                                {
+                                  title: "Update sales channels",
+                                  productUuid: offer.additional?.product.uuid,
+                                  version: offer.additional?.product.version,
+                                  sellerSalesChannels: salesChannels,
+                                  onClose: () => {
+                                    setTimeout(() => {
+                                      refetchSellers();
+                                    }, 10000); // give enough time to the subgraph to reindex
+                                  }
+                                },
+                                "auto",
+                                undefined,
+                                {
+                                  m: "35rem"
+                                }
+                              );
+                            }}
+                          >
+                            Update sales channels
+                          </UnthemedButton>
+                        )
                       }
-                      showModal(modalTypes.RELIST_OFFER, {
-                        title: `Relist Offer "${offer.metadata.name}"`,
-                        offer,
-                        onRelistedSuccessfully: refetch
-                      });
-                    }}
-                  >
-                    Relist
-                  </RelistButton>
+                    ].filter(isTruthy)}
+                  />
                 </Grid>
               );
             })()
           };
         })
         .sort(compareOffersSortByStatus),
-    [offers] // eslint-disable-line
+    [offers, salesChannels, isSellersRefetching] // eslint-disable-line
   );
 
   const tableProps = useTable(
@@ -878,104 +1023,107 @@ export default function SellerProductsTable({
 
   return (
     <>
-      <Table {...getTableProps()}>
-        <div className="thead">
-          {headerGroups.map((headerGroup, key) => (
-            <div
-              {...headerGroup.getHeaderGroupProps()}
-              key={`seller_table_thead_tr_${key}`}
-              className="tr"
-            >
-              {headerGroup.headers.map((column, i) => {
+      <div style={{ width: "100%", overflow: "auto" }}>
+        <Table {...getTableProps()}>
+          <div className="thead">
+            {headerGroups.map((headerGroup, key) => (
+              <div
+                {...headerGroup.getHeaderGroupProps()}
+                key={`seller_table_thead_tr_${key}`}
+                className="tr"
+              >
+                {headerGroup.headers.map((column, i) => {
+                  return (
+                    <div
+                      data-sortable={column.disableSortBy}
+                      {...column.getHeaderProps(column.getSortByToggleProps())}
+                      key={`seller_table_thead_th_${i}`}
+                      className="th"
+                    >
+                      {column.render("Header")}
+                      {i > 0 && !column.disableSortBy && (
+                        <HeaderSorter>
+                          {column?.isSorted ? (
+                            column?.isSortedDesc ? (
+                              <CaretDown size={14} />
+                            ) : (
+                              <CaretUp size={14} />
+                            )
+                          ) : (
+                            ""
+                          )}
+                        </HeaderSorter>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+          <div {...getTableBodyProps()} className="tbody">
+            {(page.length > 0 &&
+              page.map((row, index) => {
+                prepareRow(row);
                 return (
                   <div
-                    data-sortable={column.disableSortBy}
-                    {...column.getHeaderProps(column.getSortByToggleProps())}
-                    key={`seller_table_thead_th_${i}`}
-                    className="th"
+                    {...row.getRowProps()}
+                    key={`seller_table_tbody_tr_${row.original.offerId}-${index}`}
+                    className="row"
                   >
-                    {column.render("Header")}
-                    {i > 0 && !column.disableSortBy && (
-                      <HeaderSorter>
-                        {column?.isSorted ? (
-                          column?.isSortedDesc ? (
-                            <CaretDown size={14} />
-                          ) : (
-                            <CaretUp size={14} />
-                          )
-                        ) : (
-                          ""
-                        )}
-                      </HeaderSorter>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          ))}
-        </div>
-        <div {...getTableBodyProps()} className="tbody">
-          {(page.length > 0 &&
-            page.map((row, index) => {
-              prepareRow(row);
-              return (
-                <div
-                  {...row.getRowProps()}
-                  key={`seller_table_tbody_tr_${row.original.offerId}-${index}`}
-                  className="row"
-                >
-                  {row.cells.map((cell) => {
-                    const hasSubRows = cell.row.subRows.length > 1;
-                    return (
-                      <div
-                        {...cell.getCellProps()}
-                        key={`seller_table_tbody_td_${row.original.offerId}-${cell.column.id}`}
-                        onClick={() => {
-                          if (hasSubRows) {
-                            if (
-                              (!cell.row.isExpanded &&
-                                cell.column.id === "action") ||
-                              cell.column.id === "productName"
+                    {row.cells.map((cell) => {
+                      const hasSubRows = cell.row.subRows.length > 1;
+                      return (
+                        <div
+                          {...cell.getCellProps()}
+                          key={`seller_table_tbody_td_${row.original.offerId}-${cell.column.id}`}
+                          onClick={() => {
+                            if (hasSubRows) {
+                              if (
+                                (!cell.row.isExpanded &&
+                                  cell.column.id === "action") ||
+                                cell.column.id === "productName"
+                              ) {
+                                cell.row.toggleRowExpanded();
+                              }
+                            } else if (
+                              cell.column.id !== "action" &&
+                              cell.column.id !== "selection" &&
+                              cell.column.id !== "status"
                             ) {
-                              cell.row.toggleRowExpanded();
+                              const pathname = generatePath(
+                                ProductRoutes.ProductDetail,
+                                {
+                                  [UrlParameters.uuid]:
+                                    row?.original?.uuid ?? ""
+                                }
+                              );
+                              navigate({ pathname });
                             }
-                          } else if (
-                            cell.column.id !== "action" &&
-                            cell.column.id !== "selection" &&
-                            cell.column.id !== "status"
-                          ) {
-                            const pathname = generatePath(
-                              ProductRoutes.ProductDetail,
-                              {
-                                [UrlParameters.uuid]: row?.original?.uuid ?? ""
-                              }
-                            );
-                            navigate({ pathname });
-                          }
-                        }}
-                      >
-                        {cell.render("Cell")}
-                      </div>
-                    );
-                  })}
-                </div>
-              );
-            })) || (
-            <div>
+                          }}
+                        >
+                          {cell.render("Cell")}
+                        </div>
+                      );
+                    })}
+                  </div>
+                );
+              })) || (
               <div>
-                <Typography
-                  tag="h6"
-                  justifyContent="center"
-                  padding="1rem 0"
-                  margin="0"
-                >
-                  No data to display
-                </Typography>
+                <div>
+                  <Typography
+                    tag="h6"
+                    justifyContent="center"
+                    padding="1rem 0"
+                    margin="0"
+                  >
+                    No data to display
+                  </Typography>
+                </div>
               </div>
-            </div>
-          )}
-        </div>
-      </Table>
+            )}
+          </div>
+        </Table>
+      </div>
       <Pagination>
         <Grid>
           <Grid justifyContent="flex-start" gap="1rem">
diff --git a/src/components/seller/products/types.ts b/src/components/seller/products/types.ts
new file mode 100644
index 000000000..f27ec3cff
--- /dev/null
+++ b/src/components/seller/products/types.ts
@@ -0,0 +1,5 @@
+import { subgraph } from "@bosonprotocol/react-kit";
+
+export type SalesChannels = NonNullable<
+  NonNullable<subgraph.SellerFieldsFragment["metadata"]>["salesChannels"]
+>;
diff --git a/src/components/seller/profileDetails/ProfileDetails.tsx b/src/components/seller/profileDetails/ProfileDetails.tsx
index 36d1e2733..7effbdabd 100644
--- a/src/components/seller/profileDetails/ProfileDetails.tsx
+++ b/src/components/seller/profileDetails/ProfileDetails.tsx
@@ -1,14 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { generatePath } from "react-router-dom";
 
-import { UrlParameters } from "../../../lib/routing/parameters";
-import { SellerCenterRoutes } from "../../../lib/routing/routes";
-import { breakpointNumbers } from "../../../lib/styles/breakpoint";
 import { useKeepQueryParamsNavigate } from "../../../lib/utils/hooks/useKeepQueryParamsNavigate";
 import { useModal } from "../../modal/useModal";
 import { WithSellerDataProps } from "../common/WithSellerData";
+import { getSellerCenterPath } from "../paths";
 import { SellerInsideProps } from "../SellerInside";
-import { DEFAULT_SELLER_PAGE } from "../SellerPages";
 
 export const ProfileDetails: React.FC<
   SellerInsideProps & WithSellerDataProps
@@ -16,9 +12,7 @@ export const ProfileDetails: React.FC<
   const navigate = useKeepQueryParamsNavigate();
   const redirect = useCallback(() => {
     navigate({
-      pathname: generatePath(SellerCenterRoutes.SellerCenter, {
-        [UrlParameters.sellerPage]: DEFAULT_SELLER_PAGE
-      })
+      pathname: getSellerCenterPath("Dashboard")
     });
   }, [navigate]);
   const { showModal, store } = useModal();
@@ -37,7 +31,8 @@ export const ProfileDetails: React.FC<
       "auto",
       undefined,
       {
-        xs: `${breakpointNumbers.m + 1}px`
+        xs: "400px",
+        l: "600px"
       }
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/components/seller/salesChannels/SalesChannelCard.tsx b/src/components/seller/salesChannels/SalesChannelCard.tsx
new file mode 100644
index 000000000..d99f2af09
--- /dev/null
+++ b/src/components/seller/salesChannels/SalesChannelCard.tsx
@@ -0,0 +1,68 @@
+import { ArrowRight, Clock } from "phosphor-react";
+import React from "react";
+import styled from "styled-components";
+
+import { colors } from "../../../lib/styles/colors";
+import { useKeepQueryParamsNavigate } from "../../../lib/utils/hooks/useKeepQueryParamsNavigate";
+import Button from "../../ui/Button";
+import Grid from "../../ui/Grid";
+import Typography from "../../ui/Typography";
+
+type SalesChannelCardProps = {
+  title: string;
+  text: string;
+  to: string;
+  time: string;
+};
+
+const StyledGrid = styled(Grid)`
+  background: ${colors.white};
+  position: relative;
+`;
+
+const Time = styled(Grid)`
+  width: initial;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: ${colors.lightGrey};
+  padding: 0.25rem 0.5rem;
+`;
+
+export const SalesChannelCard: React.FC<SalesChannelCardProps> = ({
+  title,
+  text,
+  to,
+  time
+}) => {
+  const navigate = useKeepQueryParamsNavigate();
+  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}
+        >
+          {time}
+        </Typography>
+      </Time>
+      <Typography fontWeight="600" $fontSize="1.25rem" margin="0.8rem 0 0 0">
+        {title}
+      </Typography>
+      <Typography tag="p">{text}</Typography>
+      <Button
+        theme="secondary"
+        size="small"
+        onClick={() => {
+          navigate({
+            pathname: to
+          });
+        }}
+      >
+        Setup <ArrowRight size={24} />
+      </Button>
+    </StyledGrid>
+  );
+};
diff --git a/src/components/seller/salesChannels/SalesChannels.tsx b/src/components/seller/salesChannels/SalesChannels.tsx
new file mode 100644
index 000000000..568efa4ee
--- /dev/null
+++ b/src/components/seller/salesChannels/SalesChannels.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+import { BosonRoutes, SellerCenterRoutes } from "../../../lib/routing/routes";
+import GridContainer from "../../ui/GridContainer";
+import { SalesChannelCard } from "./SalesChannelCard";
+
+export const SalesChannels: React.FC = () => {
+  return (
+    <GridContainer
+      itemsPerRow={{
+        xs: 1,
+        s: 2,
+        m: 3,
+        l: 3,
+        xl: 3
+      }}
+    >
+      <SalesChannelCard
+        title="Web3 Commerce Store"
+        text="Create your decentralized Web3 commerce store and customise it to match your brand's identity."
+        to={BosonRoutes.CreateStorefront}
+        time="15 min"
+      />
+      <SalesChannelCard
+        title="Metaverse Store"
+        text="Easily create your own decentralized Metaverse store in DCL either on your own DCL land or on Boson Boulevard."
+        to={SellerCenterRoutes.DCL}
+        time="2 - 4 days"
+      />
+    </GridContainer>
+  );
+};
diff --git a/src/components/toasts/common/SuccessToast.tsx b/src/components/toasts/common/SuccessToast.tsx
index 74f4ebb5e..f8f9fcced 100644
--- a/src/components/toasts/common/SuccessToast.tsx
+++ b/src/components/toasts/common/SuccessToast.tsx
@@ -20,7 +20,7 @@ interface Props {
   children: ReactNode;
 }
 
-export default function SuccessToast({ t, children }: Props) {
+export function SuccessToast({ t, children }: Props) {
   return (
     <Grid gap="1rem">
       <Grid flexBasis="0">
@@ -39,3 +39,5 @@ export default function SuccessToast({ t, children }: Props) {
     </Grid>
   );
 }
+
+export default SuccessToast;
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 6ea934f83..5412f336b 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -35,6 +35,9 @@ const BaseButton = styled.button<{
           color: ${props.theme.hover.color} !important;
           svg {
             fill: ${props.theme.hover.color} !important;
+            line {
+              stroke: ${props.theme.hover.color} !important;
+            }
           }
         `};
         ${props.theme.hover.borderColor &&
diff --git a/src/components/ui/ExportDropdown.tsx b/src/components/ui/ExportDropdown.tsx
index dbddc1230..fc08ae67c 100644
--- a/src/components/ui/ExportDropdown.tsx
+++ b/src/components/ui/ExportDropdown.tsx
@@ -160,7 +160,7 @@ function ExportDropdown({ buttonProps = {}, children }: Props) {
           }
           key={children[0].id}
         >
-          <ExportButton theme="outline" size="small" {...buttonProps}>
+          <ExportButton theme="secondary" size="small" {...buttonProps}>
             Export <DownloadSimple size={16} />
           </ExportButton>
         </CSVLink>
diff --git a/src/components/ui/Grid.tsx b/src/components/ui/Grid.tsx
index 19faadc04..4f12753a2 100644
--- a/src/components/ui/Grid.tsx
+++ b/src/components/ui/Grid.tsx
@@ -88,6 +88,7 @@ type Props = {
   children: React.ReactNode;
   as?: React.ElementType;
   src?: string;
+  [x: string]: unknown;
 } & IGrid &
   React.HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/components/ui/SellerID.tsx b/src/components/ui/SellerID.tsx
index 4c7ab8512..2f7811cdf 100644
--- a/src/components/ui/SellerID.tsx
+++ b/src/components/ui/SellerID.tsx
@@ -1,4 +1,4 @@
-import { subgraph } from "@bosonprotocol/react-kit";
+import { AuthTokenType, subgraph } from "@bosonprotocol/react-kit";
 import { Image as AccountImage } from "@davatar/react";
 import { generatePath } from "react-router-dom";
 import styled, { css } from "styled-components";
@@ -13,7 +13,6 @@ import { getOfferDetails } from "../../lib/utils/getOfferDetails";
 import { useCurrentSellers } from "../../lib/utils/hooks/useCurrentSellers";
 import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryParamsNavigate";
 import { getLensImageUrl } from "../../lib/utils/images";
-import { ProfileType } from "../modal/components/Profile/const";
 import { getLensProfilePictureUrl } from "../modal/components/Profile/Lens/utils";
 import Image from "./Image";
 
@@ -102,7 +101,7 @@ const SellerID: React.FC<
   const hasCursorPointer = !!onClick || onClick === undefined;
   const seller = sellers[0] ?? offer?.seller;
   const metadata = seller?.metadata;
-  const useLens = !metadata || metadata?.kind === ProfileType.LENS;
+  const useLens = seller?.authTokenType === AuthTokenType.LENS;
   const regularProfilePicture =
     metadata?.images?.find((img) => img.tag === "profile")?.url ?? "";
   const lensProfilePicture = getLensProfilePictureUrl(lens);
diff --git a/src/components/ui/UnthemedButton.tsx b/src/components/ui/UnthemedButton.tsx
new file mode 100644
index 000000000..58b6d5d10
--- /dev/null
+++ b/src/components/ui/UnthemedButton.tsx
@@ -0,0 +1,43 @@
+import { Loading } from "@bosonprotocol/react-kit";
+import {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  Fragment,
+  ReactNode
+} from "react";
+
+import Tooltip from "../tooltip/Tooltip";
+
+type UnthemedButtonProps = {
+  tooltip?: string;
+  isLoading?: boolean;
+  children: ReactNode;
+} & DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+export const UnthemedButton: React.FC<UnthemedButtonProps> = ({
+  children,
+  onClick,
+  type = "button",
+  isLoading = false,
+  tooltip = "",
+  ...rest
+}) => {
+  const Wrapper = tooltip !== "" && rest?.disabled ? Tooltip : Fragment;
+  const wrapperParams =
+    tooltip !== "" && rest?.disabled ? { wrap: false, content: tooltip } : {};
+
+  return (
+    <>
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore */}
+      <Wrapper {...wrapperParams}>
+        <button onClick={onClick} type={type} {...rest}>
+          {isLoading ? <Loading /> : <>{children}</>}
+        </button>
+      </Wrapper>
+    </>
+  );
+};
diff --git a/src/lib/routing/routes.tsx b/src/lib/routing/routes.tsx
index 8f425d128..f2a5ad5ea 100644
--- a/src/lib/routing/routes.tsx
+++ b/src/lib/routing/routes.tsx
@@ -29,12 +29,23 @@ export const BosonRoutes = {
 
 export const SellerCenterRoutes = {
   SellerCenter: `${BosonRoutes.Sell}/:${UrlParameters.sellerPage}`,
-  CreateProduct: `${BosonRoutes.Sell}/create-product`
-};
+  CreateProduct: `${BosonRoutes.Sell}/create-product`,
+  DCL: `${BosonRoutes.Sell}/dcl`
+} as const;
+
+export const SellerCenterSubRoutes = {
+  Dashboard: "dashboard",
+  Products: "products",
+  Exchanges: "exchanges",
+  Messages: "messages",
+  Finances: "finances",
+  "Sales Channels": "salesChannels",
+  "Profile Details": "profileDetails"
+} as const;
 
 export const DisputeResolverCenterRoutes = {
   DisputeResolverCenter: `${BosonRoutes.DRAdmin}/:${UrlParameters.disputeResolverPageId}`
-};
+} as const;
 
 export const ProductRoutes = {
   Root: "/products",
diff --git a/src/lib/utils/hooks/offer/useCreateOffers.tsx b/src/lib/utils/hooks/offer/useCreateOffers.tsx
index c9de62671..86c65dfef 100644
--- a/src/lib/utils/hooks/offer/useCreateOffers.tsx
+++ b/src/lib/utils/hooks/offer/useCreateOffers.tsx
@@ -7,7 +7,7 @@ import { TOKEN_TYPES } from "../../../../components/product/utils";
 import { poll } from "../../../../pages/create-product/utils";
 import {
   buildCondition,
-  CommonTermsOfSale
+  PartialTokenGating
 } from "../../../../pages/create-product/utils/buildCondition";
 import { useCoreSDK } from "../../useCoreSdk";
 import { useAddPendingTransaction } from "../transactions/usePendingTransactions";
@@ -18,11 +18,12 @@ type UseCreateOffersProps = {
   sellerToCreate: accounts.CreateSellerArgs | null;
   offersToCreate: offers.CreateOfferArgs[];
   isMultiVariant: boolean;
-  tokenGatedInfo?: CommonTermsOfSale | null;
+  tokenGatedInfo?: PartialTokenGating | null;
   conditionDecimals?: number;
   onGetExchangeTokenDecimals?: (decimals: number | undefined) => unknown;
   onCreatedOffersWithVariants?: (arg0: {
     firstOffer: OfferFieldsFragment;
+    createdOffers: OfferFieldsFragment[];
   }) => void;
   onCreatedSingleOffers?: (arg0: { offer: OfferFieldsFragment }) => void;
 };
@@ -187,9 +188,12 @@ export function useCreateOffers() {
           },
           500
         );
-        const [firstOffer] = createdOffers as unknown as OfferFieldsFragment[];
+        const allCreatedOffers =
+          createdOffers as unknown as OfferFieldsFragment[];
+        const [firstOffer] = allCreatedOffers;
         onCreatedOffersWithVariants?.({
-          firstOffer
+          firstOffer,
+          createdOffers: allCreatedOffers
         });
       } else {
         // no variants
diff --git a/src/lib/utils/hooks/seller/useUpdateSeller.ts b/src/lib/utils/hooks/seller/useUpdateSeller.ts
index 0bc7af8ca..0b8cf15ac 100644
--- a/src/lib/utils/hooks/seller/useUpdateSeller.ts
+++ b/src/lib/utils/hooks/seller/useUpdateSeller.ts
@@ -4,7 +4,6 @@ import { ethers } from "ethers";
 import { useMutation } from "react-query";
 
 import { authTokenTypes } from "../../../../components/modal/components/Profile/Lens/const";
-import { getLensTokenIdDecimal } from "../../../../components/modal/components/Profile/Lens/utils";
 import { useCoreSDK } from "../../useCoreSdk";
 
 type Props = Parameters<typeof updateSellerAccount>[1];
@@ -47,7 +46,7 @@ async function updateSellerAccount(
         : admin,
     authTokenId:
       authTokenType === authTokenTypes.LENS
-        ? getLensTokenIdDecimal(authTokenId || "0x0").toString()
+        ? (authTokenId || "0").toString() // in hex with a leading 0x if different from 0
         : "0",
     authTokenType,
     clerk,
@@ -64,6 +63,10 @@ async function updateSellerAccount(
     return value !== oldSellerValue;
   });
   if (thereAreChanges) {
-    await coreSDK.signMetaTxUpdateSellerAndOptIn(newSeller);
+    if (coreSDK.isMetaTxConfigSet) {
+      await coreSDK.signMetaTxUpdateSellerAndOptIn(newSeller);
+    } else {
+      await coreSDK.updateSellerAndOptIn(newSeller);
+    }
   }
 }
diff --git a/src/lib/utils/hooks/seller/useUpdateSellerMetadata.ts b/src/lib/utils/hooks/seller/useUpdateSellerMetadata.ts
index a1678ee8f..d014d2695 100644
--- a/src/lib/utils/hooks/seller/useUpdateSellerMetadata.ts
+++ b/src/lib/utils/hooks/seller/useUpdateSellerMetadata.ts
@@ -1,17 +1,24 @@
 import { SellerFieldsFragment } from "@bosonprotocol/core-sdk/dist/cjs/subgraph";
-import { AuthTokenType } from "@bosonprotocol/react-kit";
+import { AuthTokenType, OfferOrSellerMetadata } from "@bosonprotocol/react-kit";
 import { useMutation } from "react-query";
 import { useAccount } from "wagmi";
 
-import { ProfileType } from "../../../../components/modal/components/Profile/const";
+import {
+  ContactPreference,
+  ProfileType
+} from "../../../../components/modal/components/Profile/const";
 import { CreateProfile } from "../../../../components/product/utils";
 import { getIpfsGatewayUrl } from "../../ipfs";
+import { decimalToHex } from "../../number";
+import { removeEmpty } from "../../objects";
 import { useCurrentSellers } from "../useCurrentSellers";
+import { useSellers } from "../useSellers";
 import useStoreSellerMetadata from "./useStoreSellerMetadata";
 import useUpdateSeller from "./useUpdateSeller";
 
 type Props = Parameters<typeof updateSellerMedatata>[0];
-
+type SellerMetadata = Extract<OfferOrSellerMetadata, { type: "SELLER" }>;
+type SalesChannels = SellerMetadata["salesChannels"];
 type UpdateSellerFn = ReturnType<typeof useUpdateSeller>["mutateAsync"];
 type StoreSellerMetadataFn = ReturnType<
   typeof useStoreSellerMetadata
@@ -21,10 +28,15 @@ export default function useUpdateSellerMetadata() {
   const { sellers: currentSellers } = useCurrentSellers();
   const { address = "" } = useAccount();
   const seller = currentSellers?.length ? currentSellers[0] : undefined;
+  const sellerId = seller?.id;
+  const { refetch: refetchSeller } = useSellers(
+    { id: sellerId },
+    { enabled: !!sellerId }
+  );
   const { mutateAsync: updateSeller } = useUpdateSeller();
   const { mutateAsync: storeSellerMetadata } = useStoreSellerMetadata();
 
-  return useMutation((props: Props) => {
+  return useMutation(async (props: Props) => {
     if (!seller) {
       const error = new Error(
         "[useUpdateSellerMetadata] cannot update a seller if the seller doesnt exist"
@@ -39,9 +51,16 @@ export default function useUpdateSellerMetadata() {
       console.error(error);
       throw error;
     }
+    const { data: sellersToUse } = await refetchSeller();
+    const sellerToUse = sellersToUse?.length ? sellersToUse[0] : seller;
+    const useLens = sellerToUse?.authTokenType === AuthTokenType.LENS;
+    const currentKind = useLens ? ProfileType.LENS : ProfileType.REGULAR;
     return updateSellerMedatata(
-      props,
-      { seller, address },
+      {
+        kind: currentKind,
+        ...props
+      },
+      { seller: sellerToUse, address },
       {
         updateSeller,
         storeSellerMetadata
@@ -52,11 +71,15 @@ export default function useUpdateSellerMetadata() {
 async function updateSellerMedatata(
   {
     values,
-    kind
+    kind: kindOrCurrentKind
   }: {
-    values: Partial<CreateProfile> &
-      Pick<CreateProfile, "contactPreference"> & { authTokenId: string };
-    kind: ProfileType;
+    values: Partial<
+      CreateProfile &
+        Pick<CreateProfile, "contactPreference"> & {
+          authTokenId: string;
+        } & { salesChannels: SalesChannels }
+    >;
+    kind?: ProfileType;
   },
   { seller, address }: { seller: SellerFieldsFragment; address: string },
   {
@@ -71,46 +94,83 @@ async function updateSellerMedatata(
   const cover = values?.coverPicture?.[0];
   const logoImage = getIpfsGatewayUrl(logo?.src || "");
   const coverPicture = getIpfsGatewayUrl(cover?.src || "");
-  const { metadataUri } = await storeSellerMetadata({
-    name: values.name,
-    description: values.description,
-    contactLinks: values.email ? [{ url: values.email, tag: "email" }] : [],
-    contactPreference: values.contactPreference.value,
-    kind,
-    legalTradingName: values.legalTradingName,
+  const kindUsed = kindOrCurrentKind || ProfileType.REGULAR;
+  const metadataImages = seller.metadata?.images as SellerMetadata["images"];
+  const metadataImagesToSave =
+    logoImage || coverPicture
+      ? [
+          ...(logoImage
+            ? [
+                {
+                  url: logoImage,
+                  tag: "profile",
+                  height: logo?.height ?? undefined,
+                  type: logo?.type,
+                  width: logo?.width ?? undefined
+                }
+              ]
+            : []),
+          ...(coverPicture
+            ? [
+                {
+                  url: coverPicture,
+                  tag: "cover",
+                  height: cover?.height ?? undefined,
+                  type: cover?.type,
+                  width: cover?.width ?? undefined
+                }
+              ]
+            : [])
+        ]
+      : kindUsed === ProfileType.REGULAR
+      ? metadataImages ?? undefined
+      : undefined;
+
+  const meta: Parameters<typeof storeSellerMetadata>[0] = {
+    ...seller.metadata,
+    name: seller.metadata?.name ?? undefined,
+    description: seller.metadata?.description ?? undefined,
+    contactLinks: seller.metadata?.contactLinks ?? undefined,
+    legalTradingName: seller.metadata?.legalTradingName ?? undefined,
+    website: seller.metadata?.website ?? undefined,
+    ...(values.name && { name: values.name }),
+    ...(values.description && { description: values.description }),
+    ...(values.email && {
+      contactLinks: [{ url: values.email, tag: "email" }]
+    }),
+    contactPreference:
+      values.contactPreference?.value ||
+      (seller.metadata?.contactPreference as ContactPreference) ||
+      ContactPreference.XMTP,
+    kind: kindUsed,
+    ...(values.legalTradingName && {
+      legalTradingName: values.legalTradingName
+    }),
     socialLinks: [],
-    website: values.website,
-    images: [
-      ...(logoImage
-        ? [
-            {
-              url: logoImage,
-              tag: "profile",
-              height: logo?.height ?? undefined,
-              type: logo?.type,
-              width: logo?.width ?? undefined
-            }
-          ]
-        : []),
-      ...(coverPicture
-        ? [
-            {
-              url: coverPicture,
-              tag: "cover",
-              height: cover?.height ?? undefined,
-              type: cover?.type,
-              width: cover?.width ?? undefined
-            }
-          ]
-        : [])
-    ]
-  });
+    ...(values.website && { website: values.website }),
+    images: metadataImagesToSave,
+    salesChannels: values.salesChannels
+      ? values.salesChannels
+      : seller.metadata?.salesChannels
+      ? (seller.metadata?.salesChannels?.map((saleChannel) => {
+          return {
+            ...removeEmpty(saleChannel),
+            deployments: saleChannel?.deployments?.map((deployment) =>
+              removeEmpty(deployment)
+            )
+          };
+        }) as SalesChannels)
+      : undefined
+  };
+  const { metadataUri } = await storeSellerMetadata(meta);
   await updateSeller({
     ...seller,
     admin: address,
-    authTokenId: values.authTokenId,
+    authTokenId: values.authTokenId // it's assumed to be in hexadecimal
+      ? values.authTokenId ?? "0"
+      : decimalToHex(+seller.authTokenId) ?? "0",
     authTokenType:
-      kind === ProfileType.LENS ? AuthTokenType.LENS : AuthTokenType.NONE,
+      kindUsed === ProfileType.LENS ? AuthTokenType.LENS : AuthTokenType.NONE,
     sellerId: seller.id,
     metadataUri
   });
diff --git a/src/lib/utils/number.ts b/src/lib/utils/number.ts
index e57a03c3c..d2350772a 100644
--- a/src/lib/utils/number.ts
+++ b/src/lib/utils/number.ts
@@ -27,3 +27,6 @@ export const isNumeric = (strNumber: string) => {
     !isNaN(parseFloat(strNumber))
   ); // ...and ensure strings of whitespace fail
 };
+
+export const decimalToHex = (decimal: number): string =>
+  "0x" + decimal.toString(16);
diff --git a/src/lib/utils/objects.ts b/src/lib/utils/objects.ts
new file mode 100644
index 000000000..01be066b1
--- /dev/null
+++ b/src/lib/utils/objects.ts
@@ -0,0 +1,4 @@
+export function removeEmpty<T extends Record<string, unknown>>(obj: T) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  return Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));
+}
diff --git a/src/pages/chat/components/MessageList.tsx b/src/pages/chat/components/MessageList.tsx
index 8218d72ec..e2537ca12 100644
--- a/src/pages/chat/components/MessageList.tsx
+++ b/src/pages/chat/components/MessageList.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { generatePath } from "react-router-dom";
 import styled from "styled-components";
 
+import { getSellerCenterPath } from "../../../components/seller/paths";
 import { sellerPageTypes } from "../../../components/seller/SellerPages";
 import Image from "../../../components/ui/Image";
 import SellerID from "../../../components/ui/SellerID";
@@ -188,10 +189,7 @@ export default function MessageList({
               navigate({
                 pathname:
                   sellerCenterMessagesUrl === prevPath
-                    ? generatePath(SellerCenterRoutes.SellerCenter, {
-                        [UrlParameters.sellerPage]:
-                          sellerPageTypes.dashboard.url
-                      })
+                    ? getSellerCenterPath("Dashboard")
                     : prevPath
               });
             }}
diff --git a/src/pages/create-product/CreateProduct.tsx b/src/pages/create-product/CreateProduct.tsx
index 84fc99f25..ecb47d817 100644
--- a/src/pages/create-product/CreateProduct.tsx
+++ b/src/pages/create-product/CreateProduct.tsx
@@ -6,11 +6,13 @@ import { useInitialValues } from "../../components/product/utils/useInitialValue
 import { useCurrentSellers } from "../../lib/utils/hooks/useCurrentSellers";
 import { useSellerCurationListFn } from "../../lib/utils/hooks/useSellers";
 import NotFound from "../not-found/NotFound";
+import { CreateProductCongratulationsPage } from "./congratulations/CreateProductCongratulationsPage";
 import CreateProductInner from "./CreateProductInner";
 
-function CreateProduct() {
+export default function CreateProduct() {
   const store = useInitialValues();
   const [initial, setInitial] = useState<CreateProductForm>(store.base);
+  const [createdOffersIds, setCreatedOffersIds] = useState<string[]>([]);
   const [isDraftModalClosed, setDraftModalClosed] = useState<boolean>(false);
   const { showModal, modalTypes, hideModal } = useModal();
   const { sellers } = useCurrentSellers();
@@ -52,28 +54,20 @@ function CreateProduct() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [seller]);
 
-  const showInvalidRoleModal = useCallback(() => {
-    showModal<"INVALID_ROLE">(modalTypes.INVALID_ROLE, {
-      title: "Invalid Role",
-      action: "create a product",
-      requiredRole: "assistant",
-      closable: false
-    });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   if (!!seller && !isSellerCurated) {
     return <NotFound />;
   }
-  return (
+  return createdOffersIds.length ? (
+    <CreateProductCongratulationsPage
+      reset={() => setCreatedOffersIds([])}
+      sellerId={seller.id}
+    />
+  ) : (
     <CreateProductInner
       initial={initial}
       showCreateProductDraftModal={showCreateProductDraftModal}
-      showInvalidRoleModal={showInvalidRoleModal}
       isDraftModalClosed={isDraftModalClosed}
+      setCreatedOffersIds={setCreatedOffersIds}
     />
   );
 }
-
-export default CreateProduct;
diff --git a/src/pages/create-product/CreateProductInner.styles.ts b/src/pages/create-product/CreateProductInner.styles.ts
index 9ab8b6225..d09308329 100644
--- a/src/pages/create-product/CreateProductInner.styles.ts
+++ b/src/pages/create-product/CreateProductInner.styles.ts
@@ -1,9 +1,9 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 export const ProductLayoutContainer = styled.div(
   ({ isPreviewVisible }: { isPreviewVisible: boolean }) => {
     if (!isPreviewVisible) {
-      return `
+      return css`
         display: flex;
         justify-content: space-between;
         > form {
@@ -20,7 +20,7 @@ export const HelpWrapper = styled.div`
 `;
 
 export const CreateProductWrapper = styled.div`
-  font-family: "Plus Jakarta Sans";
+  width: 100%;
 
   > div:first-child {
     margin-bottom: 2rem;
diff --git a/src/pages/create-product/CreateProductInner.tsx b/src/pages/create-product/CreateProductInner.tsx
index 69f03638c..e107bc0e5 100644
--- a/src/pages/create-product/CreateProductInner.tsx
+++ b/src/pages/create-product/CreateProductInner.tsx
@@ -14,7 +14,14 @@ import { Form, Formik, FormikHelpers, FormikProps } from "formik";
 import isArray from "lodash/isArray";
 import keys from "lodash/keys";
 import map from "lodash/map";
-import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import toast from "react-hot-toast";
 import { generatePath, useLocation, useNavigate } from "react-router-dom";
@@ -35,7 +42,8 @@ import {
   CreateProductForm,
   OPTIONS_EXCHANGE_POLICY,
   optionUnitKeys,
-  TOKEN_TYPES
+  TOKEN_TYPES,
+  TokenGating
 } from "../../components/product/utils";
 import { getFixedOrPercentageVal } from "../../components/product/utils/termsOfExchange";
 import MultiSteps from "../../components/step/MultiSteps";
@@ -97,9 +105,7 @@ type GetProductV1MetadataProps = {
   shippingInfo: CreateProductForm["shippingInfo"];
   termsOfExchange: CreateProductForm["termsOfExchange"];
   supportedJurisdictions: Array<SupportedJuridiction>;
-  commonTermsOfSale:
-    | CreateProductForm["coreTermsOfSale"]
-    | CreateProductForm["variantsCoreTermsOfSale"];
+  tokenGating: TokenGating["tokenGating"];
 };
 async function getProductV1Metadata({
   contactPreference,
@@ -117,7 +123,7 @@ async function getProductV1Metadata({
   shippingInfo,
   termsOfExchange,
   supportedJurisdictions,
-  commonTermsOfSale
+  tokenGating
 }: GetProductV1MetadataProps): Promise<productV1.ProductV1Metadata> {
   const profileImage = createYourProfile?.logo?.[0];
   const coverImage = createYourProfile?.coverPicture?.[0];
@@ -157,7 +163,7 @@ async function getProductV1Metadata({
     image: productMainImageLink ? productMainImageLink : "",
     type: MetadataType.PRODUCT_V1,
     attributes: [...nftAttributes, ...additionalAttributes],
-    condition: commonTermsOfSale?.tokenGatingDesc || undefined,
+    condition: /*tokenGating?.tokenGatingDesc ||*/ undefined,
     product: {
       uuid: uuid(),
       version: 1,
@@ -306,7 +312,7 @@ function extractVisualImages(
 interface Props {
   initial: CreateProductForm;
   showCreateProductDraftModal: () => void;
-  showInvalidRoleModal: () => void;
+  setCreatedOffersIds: Dispatch<SetStateAction<string[]>>;
   isDraftModalClosed: boolean;
 }
 interface SupportedJuridiction {
@@ -317,7 +323,7 @@ interface SupportedJuridiction {
 function CreateProductInner({
   initial,
   showCreateProductDraftModal,
-  showInvalidRoleModal,
+  setCreatedOffersIds,
   isDraftModalClosed
 }: Props) {
   const history = useNavigate();
@@ -332,6 +338,7 @@ function CreateProductInner({
     () => productVariant === "differentVariants" || false,
     [productVariant]
   );
+  const [isTokenGated, setIsTokenGated] = useState<boolean>(false);
   const [currentStep, setCurrentStep] = useState<number>(
     location?.state?.step || FIRST_STEP
   );
@@ -340,7 +347,16 @@ function CreateProductInner({
   const [isPreviewVisible, setIsPreviewVisible] = useState<boolean>(false);
   const { showModal, modalTypes, hideModal } = useModal();
   const coreSDK = useCoreSDK();
+  const showInvalidRoleModal = useCallback(() => {
+    showModal<"INVALID_ROLE">(modalTypes.INVALID_ROLE, {
+      title: "Invalid Role",
+      action: "create a product",
+      requiredRole: "assistant",
+      closable: false
+    });
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   useEffect(() => {
     function onBackButtonEvent(e: any) {
       const currentStep = e.state?.usr?.step || 0;
@@ -465,6 +481,7 @@ function CreateProductInner({
       isDraftModalClosed,
       showInvalidRoleModal,
       isMultiVariant,
+      isTokenGated,
       onChangeOneSetOfImages: setIsOneSetOfImages,
       isOneSetOfImages
     });
@@ -483,6 +500,7 @@ function CreateProductInner({
     isDraftModalClosed,
     showInvalidRoleModal,
     isMultiVariant,
+    isTokenGated,
     isOneSetOfImages,
     currentStep
   ]);
@@ -520,7 +538,8 @@ function CreateProductInner({
       productVariantsImages,
       productType,
       termsOfExchange,
-      shippingInfo
+      shippingInfo,
+      tokenGating
     } = values;
 
     const productMainImageLink: string | undefined =
@@ -702,7 +721,7 @@ function CreateProductInner({
           shippingInfo,
           termsOfExchange,
           supportedJurisdictions,
-          commonTermsOfSale
+          tokenGating
         });
         const metadatas = productV1.createVariantProductMetadata(
           productV1Metadata,
@@ -790,7 +809,7 @@ function CreateProductInner({
           shippingInfo,
           termsOfExchange,
           supportedJurisdictions,
-          commonTermsOfSale
+          tokenGating
         });
         const price = coreTermsOfSale.price;
         const decimals = Number(exchangeToken?.decimals || 18);
@@ -831,15 +850,18 @@ function CreateProductInner({
         });
         offersToCreate.push(offerData);
       }
-      const isTokenGated = commonTermsOfSale.tokenGatedOffer.value === "true";
+      const isTokenGated = productType.tokenGatedOffer === "true";
       await createOffers({
         sellerToCreate: null,
         isMultiVariant,
         offersToCreate,
-        tokenGatedInfo: isTokenGated ? commonTermsOfSale : null,
+        tokenGatedInfo: isTokenGated ? values.tokenGating : null,
         conditionDecimals: decimals,
         onGetExchangeTokenDecimals: setDecimals,
-        onCreatedOffersWithVariants: ({ firstOffer }) => {
+        onCreatedOffersWithVariants: ({ firstOffer, createdOffers }) => {
+          createdOffers.length &&
+            setCreatedOffersIds(createdOffers.map((offer) => offer.id));
+
           toast((t) => (
             <SuccessTransactionToast
               t={t}
@@ -854,6 +876,7 @@ function CreateProductInner({
           ));
         },
         onCreatedSingleOffers: ({ offer: createdOffer }) => {
+          createdOffer && setCreatedOffersIds([createdOffer.id]);
           toast((t) => (
             <SuccessTransactionToast
               t={t}
@@ -926,11 +949,8 @@ function CreateProductInner({
   }, [isOneSetOfImages]);
 
   const getDecimalOnPreview = async (values: CreateProductForm) => {
-    const coreTermsOfSaleKey = isMultiVariant
-      ? "variantsCoreTermsOfSale"
-      : "coreTermsOfSale";
-    const tokenContract = values?.[coreTermsOfSaleKey]?.tokenContract;
-    const tokenType = values?.[coreTermsOfSaleKey]?.tokenType;
+    const tokenContract = values.tokenGating?.tokenContract;
+    const tokenType = values.tokenGating?.tokenType;
 
     if (
       tokenContract &&
@@ -950,7 +970,7 @@ function CreateProductInner({
     <CreateProductWrapper>
       <MultiStepsContainer>
         <MultiSteps
-          data={CREATE_PRODUCT_STEPS(isMultiVariant)}
+          data={CREATE_PRODUCT_STEPS(isMultiVariant, isTokenGated)}
           active={currentStep}
           callback={handleClickStep}
           disableInactiveSteps
@@ -973,6 +993,11 @@ function CreateProductInner({
             if (productVariant !== values?.productType?.productVariant) {
               setProductVariant(values?.productType?.productVariant);
             }
+            const formTokenGated =
+              values.productType.tokenGatedOffer === "true";
+            if (isTokenGated !== formTokenGated) {
+              setIsTokenGated(formTokenGated);
+            }
             getDecimalOnPreview(values);
 
             return (
diff --git a/src/pages/create-product/congratulations/CardCTA.tsx b/src/pages/create-product/congratulations/CardCTA.tsx
new file mode 100644
index 000000000..deef9bea8
--- /dev/null
+++ b/src/pages/create-product/congratulations/CardCTA.tsx
@@ -0,0 +1,65 @@
+import React, { ReactElement } from "react";
+import styled, { css } from "styled-components";
+
+import Grid from "../../../components/ui/Grid";
+import Typography from "../../../components/ui/Typography";
+import { colors } from "../../../lib/styles/colors";
+
+type CardCTAProps = {
+  title: string;
+  text: string;
+  icon: ReactElement;
+  cta: ReactElement;
+  theme?: "light" | "dark";
+};
+
+const StyledGrid = styled(Grid)`
+  ${({ theme }: { theme: CardCTAProps["theme"] }) => {
+    if (theme === "dark") {
+      return css`
+        background: ${colors.black};
+        color: ${colors.white};
+      `;
+    }
+    return css`
+      background: ${colors.lightGrey};
+    `;
+  }}
+`;
+
+const IconContainer = styled(Grid)`
+  top: 0.5rem;
+  right: 0;
+  margin-bottom: 1rem;
+  svg {
+    > * {
+      stroke-width: 14px;
+    }
+  }
+`;
+
+export const CardCTA: React.FC<CardCTAProps> = ({
+  title,
+  text,
+  icon,
+  cta,
+  theme = "light"
+}) => {
+  return (
+    <StyledGrid
+      flexDirection="column"
+      alignItems="flex-start"
+      padding="1.5rem"
+      theme={theme}
+    >
+      <>
+        <IconContainer>{icon}</IconContainer>
+        <Typography fontWeight="600" $fontSize="1.25rem">
+          {title}
+        </Typography>
+        <Typography tag="p">{text}</Typography>
+        {cta}
+      </>
+    </StyledGrid>
+  );
+};
diff --git a/src/pages/create-product/congratulations/CreateProductCongratulations.tsx b/src/pages/create-product/congratulations/CreateProductCongratulations.tsx
new file mode 100644
index 000000000..3e3e517e3
--- /dev/null
+++ b/src/pages/create-product/congratulations/CreateProductCongratulations.tsx
@@ -0,0 +1,246 @@
+import {
+  CheckCircle,
+  DownloadSimple,
+  Megaphone,
+  Plus,
+  Storefront,
+  Warning
+} from "phosphor-react";
+import React, { useMemo } from "react";
+import { generatePath } from "react-router-dom";
+import styled from "styled-components";
+
+import { useConvertionRate } from "../../../components/convertion-rate/useConvertionRate";
+import { useLayoutContext } from "../../../components/layout/Context";
+import { ModalHeaderTitle } from "../../../components/modal/header/ModalHeaderTitle";
+import useOffersBacked from "../../../components/seller/common/useOffersBacked";
+import { getSellerCenterPath } from "../../../components/seller/paths";
+import Button from "../../../components/ui/Button";
+import Grid from "../../../components/ui/Grid";
+import GridContainer from "../../../components/ui/GridContainer";
+import Typography from "../../../components/ui/Typography";
+import { UrlParameters } from "../../../lib/routing/parameters";
+import {
+  SellerCenterRoutes,
+  SellerCenterSubRoutes
+} from "../../../lib/routing/routes";
+import { breakpoint } from "../../../lib/styles/breakpoint";
+import { colors } from "../../../lib/styles/colors";
+import { useOffers } from "../../../lib/utils/hooks/offers";
+import useProducts from "../../../lib/utils/hooks/product/useProducts";
+import { useExchanges } from "../../../lib/utils/hooks/useExchanges";
+import { useExchangeTokens } from "../../../lib/utils/hooks/useExchangeTokens";
+import { useKeepQueryParamsNavigate } from "../../../lib/utils/hooks/useKeepQueryParamsNavigate";
+import { useSellerDeposit } from "../../../lib/utils/hooks/useSellerDeposit";
+import { useSellerRoles } from "../../../lib/utils/hooks/useSellerRoles";
+import { useSellerCurationListFn } from "../../../lib/utils/hooks/useSellers";
+import useFunds from "../../account/funds/useFunds";
+import { CardCTA } from "./CardCTA";
+
+const Container = styled.div`
+  background: ${colors.white};
+  margin: 3.8125rem 7.875rem;
+  ${breakpoint.xs} {
+    margin: 4.8125rem 8.875rem;
+  }
+  ${breakpoint.s} {
+    margin: 5.8125rem 9.875rem;
+  }
+  ${breakpoint.m} {
+    margin: 6.8125rem 10.875rem;
+  }
+  ${breakpoint.l} {
+    margin: 7.8125rem 11.875rem;
+  }
+  ${breakpoint.xl} {
+    margin: 8.8125rem 12.875rem;
+  }
+`;
+
+type CreateProductCongratulationsProps = {
+  reset: () => void;
+  sellerId: string;
+};
+
+const useDepositWarning = (sellerId: string) => {
+  const {
+    store: { tokens }
+  } = useConvertionRate();
+
+  const products = useProducts(
+    {
+      productsFilter: {
+        sellerId
+      }
+    },
+    {
+      enabled: !!sellerId,
+      enableCurationList: false,
+      refetchOnMount: true
+    }
+  );
+
+  const offers = useOffers({
+    sellerId,
+    first: 1000,
+    orderBy: "createdAt",
+    orderDirection: "desc"
+  });
+  const exchanges = useExchanges({
+    sellerId,
+    disputed: null
+  });
+  const exchangesTokens = useExchangeTokens(
+    {
+      sellerId
+    },
+    {
+      enabled: !!sellerId
+    }
+  );
+  const sellerDeposit = useSellerDeposit(
+    {
+      sellerId
+    },
+    { enabled: !!sellerId }
+  );
+  const funds = useFunds(sellerId, tokens);
+  const sellerRoles = useSellerRoles(sellerId);
+  const checkIfSellerIsInCurationList = useSellerCurationListFn();
+  const isSellerCurated = checkIfSellerIsInCurationList(sellerId);
+  const newProps = useMemo(
+    () => ({
+      sellerId,
+      offers,
+      products,
+      exchanges,
+      exchangesTokens,
+      sellerDeposit,
+      funds,
+      sellerRoles,
+      isSellerCurated
+    }),
+    [
+      sellerId,
+      offers,
+      products,
+      exchanges,
+      exchangesTokens,
+      sellerDeposit,
+      funds,
+      sellerRoles,
+      isSellerCurated
+    ]
+  );
+  const offersBacked = useOffersBacked({
+    ...newProps
+  });
+  return offersBacked.displayWarning;
+};
+
+export const CreateProductCongratulations: React.FC<
+  CreateProductCongratulationsProps
+> = ({ reset, sellerId }) => {
+  const navigate = useKeepQueryParamsNavigate();
+  const { setFullWidth } = useLayoutContext();
+  const displayDepositWarning = useDepositWarning(sellerId);
+  const navigateTo = (...args: Parameters<typeof navigate>) => {
+    setFullWidth(false);
+    reset();
+    navigate(...args);
+  };
+  const goToCreateNewProduct = () => {
+    navigateTo({
+      pathname: SellerCenterRoutes.CreateProduct
+    });
+  };
+  return (
+    <Container>
+      <ModalHeaderTitle
+        handleOnClose={() => goToCreateNewProduct()}
+        title="Congratulations!"
+        closable
+      />
+      <Grid flexDirection="column" padding="2rem">
+        <Grid flexDirection="column" margin="2.5rem 4.625rem">
+          <CheckCircle
+            size={105}
+            color={colors.green}
+            style={{ marginBottom: "2rem" }}
+          />
+          <Typography fontWeight="600" $fontSize="1.5rem" textAlign="center">
+            Your product is now created and deployed in the dApp!
+          </Typography>
+        </Grid>
+        <GridContainer
+          columnGap="2rem"
+          rowGap="2rem"
+          itemsPerRow={{
+            xs: 1,
+            s: 1,
+            m: 2,
+            l: 2,
+            xl: displayDepositWarning ? 3 : 2
+          }}
+        >
+          <CardCTA
+            icon={<Megaphone color={colors.secondary} />}
+            title="Add Sales Channels"
+            text="You can now add more Sales Channels to promote and sell your product at different places."
+            cta={
+              <Button
+                theme="secondary"
+                onClick={() => {
+                  navigateTo({
+                    pathname: generatePath(SellerCenterRoutes.SellerCenter, {
+                      [UrlParameters.sellerPage]:
+                        SellerCenterSubRoutes["Sales Channels"]
+                    })
+                  });
+                }}
+              >
+                Add a Sales Channel <Plus color={colors.secondary} size={20} />
+              </Button>
+            }
+          />
+          <CardCTA
+            icon={<Storefront color={colors.secondary} />}
+            title="Create new product"
+            text="Save time when creating multiple products. You can add new channels and pay your deposits later."
+            cta={
+              <Button
+                theme="secondary"
+                onClick={() => {
+                  goToCreateNewProduct();
+                }}
+              >
+                Create new product <Plus color={colors.secondary} size={20} />
+              </Button>
+            }
+          />
+          {displayDepositWarning && (
+            <CardCTA
+              icon={<Warning color={colors.green} />}
+              title="Funds needed to go live"
+              text="You must provide funds to cover your seller deposit. For multiple products you can do all at once."
+              cta={
+                <Button
+                  theme="bosonPrimary"
+                  onClick={() => {
+                    navigateTo({
+                      pathname: getSellerCenterPath("Finances")
+                    });
+                  }}
+                >
+                  Deposit funds{" "}
+                  <DownloadSimple color={colors.black} size={20} />
+                </Button>
+              }
+              theme="dark"
+            />
+          )}
+        </GridContainer>
+      </Grid>
+    </Container>
+  );
+};
diff --git a/src/pages/create-product/congratulations/CreateProductCongratulationsPage.tsx b/src/pages/create-product/congratulations/CreateProductCongratulationsPage.tsx
new file mode 100644
index 000000000..3b6a7d084
--- /dev/null
+++ b/src/pages/create-product/congratulations/CreateProductCongratulationsPage.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import styled from "styled-components";
+
+import { useLayoutContext } from "../../../components/layout/Context";
+import { LayoutRoot } from "../../../components/layout/Layout";
+import { colors } from "../../../lib/styles/colors";
+import { CreateProductCongratulations } from "./CreateProductCongratulations";
+
+type CreateProductCongratulationsPageProps = {
+  reset: () => void;
+  sellerId: string;
+};
+
+const Background = styled.div`
+  background: ${colors.lightGrey};
+  width: 100%;
+`;
+
+export const CreateProductCongratulationsPage: React.FC<
+  CreateProductCongratulationsPageProps
+> = ({ reset, sellerId }) => {
+  const { setFullWidth } = useLayoutContext();
+  useEffect(() => {
+    setFullWidth(true);
+    return () => {
+      setFullWidth(false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <Background>
+      <LayoutRoot fullWidth={false}>
+        <CreateProductCongratulations reset={reset} sellerId={sellerId} />
+      </LayoutRoot>
+    </Background>
+  );
+};
diff --git a/src/pages/create-product/utils/buildCondition.ts b/src/pages/create-product/utils/buildCondition.ts
index 24e2fab9a..7efae9c41 100644
--- a/src/pages/create-product/utils/buildCondition.ts
+++ b/src/pages/create-product/utils/buildCondition.ts
@@ -5,14 +5,10 @@ import {
 } from "@bosonprotocol/common";
 import { utils } from "ethers";
 
-import { CreateProductForm } from "../../../components/product/utils";
+import { TokenGating } from "../../../components/product/utils";
 
-type JointTermsOfSale =
-  | CreateProductForm["coreTermsOfSale"]
-  | CreateProductForm["variantsCoreTermsOfSale"];
-
-export type CommonTermsOfSale = Pick<
-  JointTermsOfSale,
+export type PartialTokenGating = Pick<
+  TokenGating["tokenGating"],
   | "tokenId"
   | "minBalance"
   | "tokenType"
@@ -22,49 +18,49 @@ export type CommonTermsOfSale = Pick<
 >;
 
 export const buildCondition = (
-  commonTermsOfSale: CommonTermsOfSale,
+  partialTokenGating: PartialTokenGating,
   decimals?: number
 ): ConditionStruct => {
   let tokenType: TokenType = TokenType.FungibleToken;
   let method: EvaluationMethod = EvaluationMethod.None;
   let threshold;
-  let tokenId = commonTermsOfSale.tokenId || "0";
+  let tokenId = partialTokenGating.tokenId || "0";
 
   let formatedValue = null;
-  if (decimals && commonTermsOfSale.minBalance) {
-    formatedValue = utils.parseUnits(commonTermsOfSale.minBalance, decimals);
+  if (decimals && partialTokenGating.minBalance) {
+    formatedValue = utils.parseUnits(partialTokenGating.minBalance, decimals);
   }
 
-  switch (commonTermsOfSale.tokenType.value) {
+  switch (partialTokenGating.tokenType.value) {
     case "erc1155":
       tokenType = TokenType.MultiToken;
       method = EvaluationMethod.Threshold;
-      threshold = commonTermsOfSale.minBalance;
+      threshold = partialTokenGating.minBalance;
       break;
     case "erc721":
       tokenType = TokenType.NonFungibleToken;
-      if (commonTermsOfSale.tokenCriteria.value === "tokenid") {
+      if (partialTokenGating.tokenCriteria.value === "tokenid") {
         method = EvaluationMethod.SpecificToken;
         // if erc721 and SpecificToken we should set the threshold as zero
         threshold = "0";
       } else {
         method = EvaluationMethod.Threshold;
-        threshold = commonTermsOfSale.minBalance;
+        threshold = partialTokenGating.minBalance;
         tokenId = "0";
       }
       break;
     default:
       tokenType = TokenType.FungibleToken;
       method = EvaluationMethod.Threshold;
-      threshold = formatedValue || commonTermsOfSale.minBalance;
+      threshold = formatedValue || partialTokenGating.minBalance;
       break;
   }
   return {
     method,
     tokenType,
-    tokenAddress: commonTermsOfSale.tokenContract || "",
+    tokenAddress: partialTokenGating.tokenContract || "",
     tokenId,
     threshold: threshold || "",
-    maxCommits: commonTermsOfSale.maxCommits || ""
+    maxCommits: partialTokenGating.maxCommits || ""
   };
 };
diff --git a/src/pages/create-product/utils/index.tsx b/src/pages/create-product/utils/index.tsx
index ca9632b88..82ea03286 100644
--- a/src/pages/create-product/utils/index.tsx
+++ b/src/pages/create-product/utils/index.tsx
@@ -8,6 +8,7 @@ import ProductType from "../../../components/product/ProductType";
 import ProductVariants from "../../../components/product/ProductVariants";
 import ShippingInfo from "../../../components/product/ShippingInfo";
 import TermsOfExchange from "../../../components/product/TermsOfExchange";
+import TokenGating from "../../../components/product/tokenGating/TokenGating";
 import {
   coreTermsOfSaleValidationSchema,
   productImagesValidationSchema,
@@ -17,6 +18,7 @@ import {
   productVariantsValidationSchema,
   shippingInfoValidationSchema,
   termsOfExchangeValidationSchema,
+  tokenGatingValidationSchema,
   variantsCoreTermsOfSaleValidationSchema
 } from "../../../components/product/utils";
 import {
@@ -29,13 +31,14 @@ import {
   termsOfExchangeHelp
 } from "../../../components/product/utils/productHelpOptions";
 import { ScroolToID } from "../../../components/utils/Scroll";
+import { isTruthy } from "../../../lib/types/helpers";
 import { ChatInitializationStatus } from "../../../lib/utils/hooks/chat/useChatStatus";
 
 export const poll = async function <T>(
   fn: () => Promise<T>,
   fnConditionToKeepPolling: (arg: T) => boolean,
   ms: number
-) {
+): Promise<T> {
   let result = await fn();
   while (fnConditionToKeepPolling(result)) {
     await wait(ms);
@@ -95,6 +98,7 @@ type CreateProductStepsParams = {
   showInvalidRoleModal: () => void;
   isDraftModalClosed: boolean;
   isMultiVariant: boolean;
+  isTokenGated: boolean;
   onChangeOneSetOfImages: (oneSetOfImages: boolean) => void;
   isOneSetOfImages: boolean;
 };
@@ -106,6 +110,7 @@ export const createProductSteps = ({
   showInvalidRoleModal,
   isDraftModalClosed,
   isMultiVariant,
+  isTokenGated,
   onChangeOneSetOfImages,
   isOneSetOfImages
 }: CreateProductStepsParams) => {
@@ -157,6 +162,16 @@ export const createProductSteps = ({
       : coreTermsOfSaleValidationSchema,
     helpSection: coreTermsOfSaleHelp
   };
+  const tokenGating = {
+    ui: (
+      <>
+        <ScroolToID id="multisteps_wrapper" />
+        <TokenGating />
+      </>
+    ),
+    validation: tokenGatingValidationSchema,
+    helpSection: coreTermsOfSaleHelp
+  };
   const termsOfExchange = {
     ui: (
       <>
@@ -193,15 +208,20 @@ export const createProductSteps = ({
     helpSection: null
   };
 
-  const defaultSteps = {
-    0: productType,
-    1: productInformation,
-    2: productImages,
-    3: coreTermsOfSale,
-    4: termsOfExchange,
-    5: shippingInfo,
-    6: preview
-  } as const;
+  const defaultSteps = Object.fromEntries(
+    Object.entries(
+      [
+        productType,
+        productInformation,
+        productImages,
+        coreTermsOfSale,
+        isTokenGated && tokenGating,
+        termsOfExchange,
+        shippingInfo,
+        preview
+      ].filter(isTruthy)
+    )
+  );
 
   if (isMultiVariant) {
     const productVariants = {
@@ -215,16 +235,21 @@ export const createProductSteps = ({
       helpSection: productVariantsHelp,
       stepNo: "productVariants"
     };
-    return {
-      0: productType,
-      1: productInformation,
-      2: productVariants,
-      3: productImages,
-      4: coreTermsOfSale,
-      5: termsOfExchange,
-      6: shippingInfo,
-      7: preview
-    };
+    return Object.fromEntries(
+      Object.entries(
+        [
+          productType,
+          productInformation,
+          productVariants,
+          productImages,
+          coreTermsOfSale,
+          isTokenGated && tokenGating,
+          termsOfExchange,
+          shippingInfo,
+          preview
+        ].filter(isTruthy)
+      )
+    );
   }
 
   return defaultSteps;
diff --git a/src/pages/custom-store/CustomStore.tsx b/src/pages/custom-store/CustomStore.tsx
index 3d026b380..1a2fde361 100644
--- a/src/pages/custom-store/CustomStore.tsx
+++ b/src/pages/custom-store/CustomStore.tsx
@@ -3,7 +3,7 @@ import { Form, Formik } from "formik";
 import { useState } from "react";
 import styled from "styled-components";
 
-import Layout from "../../components/Layout";
+import Layout from "../../components/layout/Layout";
 import { useModal } from "../../components/modal/useModal";
 import Typography from "../../components/ui/Typography";
 import { useCSSVariable } from "../../lib/utils/hooks/useCSSVariable";
diff --git a/src/pages/dcl/DCLPage.tsx b/src/pages/dcl/DCLPage.tsx
new file mode 100644
index 000000000..0120da4a6
--- /dev/null
+++ b/src/pages/dcl/DCLPage.tsx
@@ -0,0 +1,165 @@
+import { Form, Formik } from "formik";
+import { ArrowLeft } from "phosphor-react";
+import React, { CSSProperties, useEffect, useState } from "react";
+import styled from "styled-components";
+
+import { useLayoutContext } from "../../components/layout/Context";
+import { Close } from "../../components/modal/header/styles";
+import { getSellerCenterPath } from "../../components/seller/paths";
+import MultiSteps from "../../components/step/MultiSteps";
+import Grid from "../../components/ui/Grid";
+import { colors } from "../../lib/styles/colors";
+import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryParamsNavigate";
+import { DetailsStep } from "./steps/details/DetailsStep";
+import { ExecuteStep } from "./steps/execute/ExecuteStep";
+import { DCLLayout } from "./styles";
+import { FormType, validationSchema } from "./validationSchema";
+const Background = styled.div`
+  width: 100%;
+`;
+
+const StyledGrid = styled(Grid)`
+  height: calc(48px + 1.1875rem * 2);
+  position: relative;
+  background: ${colors.white};
+  + * {
+    padding-top: 1.75rem;
+  }
+`;
+
+const STEPS = [
+  {
+    name: "Details",
+    steps: 1
+  } as const,
+  {
+    name: "Execute",
+    steps: 1
+  } as const
+];
+
+interface DCLPageProps {
+  offerIds?: string[];
+}
+
+enum Step {
+  _0_DETAILS = "_0_DETAILS",
+  _1_EXECUTE = "_1_EXECUTE"
+}
+
+const stepToNumber = {
+  [Step._0_DETAILS]: 0,
+  [Step._1_EXECUTE]: 1
+} as const;
+
+const numberToStep = {
+  0: Step._0_DETAILS,
+  1: Step._1_EXECUTE
+} as const;
+
+const iconStyle: CSSProperties = {
+  cursor: "pointer",
+  margin: "1.1875rem",
+  position: "absolute",
+  top: 0,
+  color: colors.darkGrey
+};
+const iconSize = 32;
+
+export const DCLPage: React.FC<DCLPageProps> = () => {
+  const { setFullWidth, fullWidth } = useLayoutContext();
+  const navigate = useKeepQueryParamsNavigate();
+  const [currentStep, setCurrentStep] = useState<Step>(Step._0_DETAILS);
+  const goToNextStep = () => {
+    setCurrentStep((prev) => {
+      if (prev === Step._0_DETAILS) {
+        return Step._1_EXECUTE;
+      }
+      return prev;
+    });
+  };
+
+  const onClose = () =>
+    navigate({
+      pathname: getSellerCenterPath("Sales Channels")
+    });
+  useEffect(() => {
+    return () => {
+      fullWidth && setFullWidth(false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <Background
+      style={{
+        background: colors.white
+      }}
+    >
+      <Formik<FormType>
+        initialValues={{
+          location: ""
+        }}
+        validationSchema={validationSchema}
+        onSubmit={() => {
+          //
+        }}
+      >
+        {() => {
+          return (
+            <Form style={{ height: "100%" }}>
+              <StyledGrid>
+                <ArrowLeft
+                  style={{ ...iconStyle }}
+                  size={iconSize}
+                  onClick={() => {
+                    if (currentStep === Step._0_DETAILS) {
+                      onClose();
+                    } else {
+                      setCurrentStep((prev) => {
+                        if (prev === Step._1_EXECUTE) {
+                          return Step._0_DETAILS;
+                        }
+                        return prev;
+                      });
+                    }
+                  }}
+                />
+
+                <DCLLayout width="100%">
+                  <MultiSteps
+                    hideArrows
+                    data={STEPS}
+                    active={stepToNumber[currentStep]}
+                    callback={(stepInNumber) => {
+                      const nextStep =
+                        numberToStep[stepInNumber as keyof typeof numberToStep];
+                      setCurrentStep(nextStep);
+                    }}
+                    disableInactiveSteps
+                  />
+                </DCLLayout>
+                <Close
+                  style={{
+                    ...iconStyle,
+                    right: 0
+                  }}
+                  size={iconSize}
+                  onClick={() => {
+                    onClose();
+                  }}
+                />
+              </StyledGrid>
+              {currentStep === Step._0_DETAILS ? (
+                <DetailsStep goToNextStep={goToNextStep} />
+              ) : currentStep === Step._1_EXECUTE ? (
+                <ExecuteStep handleOnClose={onClose} />
+              ) : (
+                <div>Something went wrong, please try again...</div>
+              )}
+            </Form>
+          );
+        }}
+      </Formik>
+    </Background>
+  );
+};
diff --git a/src/pages/dcl/steps/details/DetailsStep.tsx b/src/pages/dcl/steps/details/DetailsStep.tsx
new file mode 100644
index 000000000..9aad4d60b
--- /dev/null
+++ b/src/pages/dcl/steps/details/DetailsStep.tsx
@@ -0,0 +1,174 @@
+import { useFormikContext } from "formik";
+import React from "react";
+
+import { Error, FormField } from "../../../../components/form";
+import Help from "../../../../components/product/Help";
+import oneItemTypeProduct from "../../../../components/product/img/one-item-product.png";
+import phygitalProduct from "../../../../components/product/img/phygital-product.png";
+import {
+  Label,
+  ProductImage,
+  RadioButton
+} from "../../../../components/product/ProductType";
+import BosonButton from "../../../../components/ui/BosonButton";
+import Grid from "../../../../components/ui/Grid";
+import GridContainer from "../../../../components/ui/GridContainer";
+import Typography from "../../../../components/ui/Typography";
+import { colors } from "../../../../lib/styles/colors";
+import { StyledDCLLayout } from "../../styles";
+import { FormType, LocationValues } from "../../validationSchema";
+
+type DetailsStepProps = {
+  goToNextStep: () => void;
+};
+export const DetailsStep: React.FC<DetailsStepProps> = ({ goToNextStep }) => {
+  const { values, handleChange, handleBlur, isValid, touched, errors } =
+    useFormikContext<FormType>();
+  return (
+    <StyledDCLLayout width="auto">
+      <Grid
+        justifyContent="space-between"
+        alignItems="flex-start"
+        flexWrap="wrap"
+        gap="3rem"
+      >
+        <Grid flexDirection="column" alignItems="flex-start" $width="auto">
+          <Typography fontWeight="600" $fontSize="2rem">
+            Where do you want to sell on DCL?
+          </Typography>
+          <FormField
+            title="Select location"
+            required
+            style={{
+              marginBottom: 0,
+              marginTop: "3.5rem"
+            }}
+          >
+            <GridContainer
+              rowGap="1rem"
+              columnGap="1rem"
+              itemsPerRow={{
+                xs: 2,
+                s: 2,
+                m: 2,
+                l: 2,
+                xl: 2
+              }}
+            >
+              <Label style={{ minWidth: "200px" }}>
+                <RadioButton
+                  type="radio"
+                  name="location"
+                  value={LocationValues.OwnLand}
+                  checked={values.location === LocationValues.OwnLand}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                />
+                <Grid
+                  justifyContent="center"
+                  alignItems="center"
+                  flexDirection="column"
+                  style={{ height: "100%" }}
+                >
+                  <ProductImage
+                    src={oneItemTypeProduct}
+                    style={{
+                      width: "54px",
+                      height: "102px",
+                      padding: "1.5rem",
+                      margin: "auto"
+                    }}
+                  />
+                  <Typography
+                    tag="p"
+                    fontWeight="600"
+                    $fontSize="1rem"
+                    margin="1.5rem 0"
+                    color={colors.darkGrey}
+                  >
+                    Your own land
+                  </Typography>
+                </Grid>
+              </Label>
+              <Label style={{ minWidth: "200px" }}>
+                <RadioButton
+                  type="radio"
+                  name="location"
+                  value={LocationValues.BosonLand}
+                  checked={values.location === LocationValues.BosonLand}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                />
+                <Grid
+                  justifyContent="center"
+                  alignItems="center"
+                  flexDirection="column"
+                  style={{ height: "100%" }}
+                >
+                  <ProductImage
+                    src={phygitalProduct}
+                    style={{
+                      width: "100px",
+                      height: "100px",
+                      padding: "1.5rem",
+                      margin: "auto"
+                    }}
+                  />
+                  <Typography
+                    tag="p"
+                    fontWeight="600"
+                    $fontSize="1rem"
+                    margin="1.5rem 0"
+                    color={colors.darkGrey}
+                  >
+                    Boson Boulevard
+                  </Typography>
+                </Grid>
+              </Label>
+            </GridContainer>
+            <Error display={!!errors.location} message={errors.location} />
+          </FormField>
+          <BosonButton
+            type="button"
+            onClick={() => {
+              if (!touched.location) {
+                return;
+              }
+              if (isValid) {
+                goToNextStep();
+              }
+            }}
+            style={{ marginTop: "3.5rem" }}
+          >
+            Next
+          </BosonButton>
+        </Grid>
+
+        <Help
+          data={[
+            {
+              title: "Which Metaverses can I set up a store in?",
+              description:
+                "Currently, our Metaverse Commerce Toolkit supports setting up a store in Decentraland (DCL). We are expanding into other Metaverse and will be supporting setting up stores in many more places. "
+            },
+            {
+              title: "What is Boson Boulevard?",
+              description:
+                "Boson Boulevard is a dcommerce district that has been created in the Boson virtual environment in DCL. "
+            },
+            {
+              title: "Can anyone sell on Boson Boulevard?",
+              description:
+                "Boson Boulevard is a curated dcommerce experience. Brands need to meet certain criteria to sell on that virtual experience."
+            },
+            {
+              title: "Can I sell on my own virtual land in DCL?",
+              description:
+                "Yes. The Boson Metaverse Commerce Toolkit can be used across any virtual environment or land in DCL."
+            }
+          ]}
+        />
+      </Grid>
+    </StyledDCLLayout>
+  );
+};
diff --git a/src/pages/dcl/steps/execute/BosonLand.tsx b/src/pages/dcl/steps/execute/BosonLand.tsx
new file mode 100644
index 000000000..4f36b2e1f
--- /dev/null
+++ b/src/pages/dcl/steps/execute/BosonLand.tsx
@@ -0,0 +1,85 @@
+import { ArrowSquareOut } from "phosphor-react";
+import React from "react";
+import styled from "styled-components";
+
+import Help from "../../../../components/product/Help";
+import BosonButton from "../../../../components/ui/BosonButton";
+import Button from "../../../../components/ui/Button";
+import Grid from "../../../../components/ui/Grid";
+import Typography from "../../../../components/ui/Typography";
+import { breakpoint } from "../../../../lib/styles/breakpoint";
+import { StyledDCLLayout } from "../../styles";
+
+const StyledGrid = styled(Grid)`
+  ${breakpoint.m} {
+    max-width: calc(50% - 3rem);
+  }
+`;
+
+interface BosonLandProps {
+  setSuccess: () => void;
+}
+
+export const BosonLand: React.FC<BosonLandProps> = ({ setSuccess }) => {
+  return (
+    <StyledDCLLayout width="auto">
+      <Grid
+        justifyContent="space-between"
+        alignItems="flex-start"
+        flexWrap="wrap"
+        gap="3rem"
+      >
+        <StyledGrid flexDirection="column" alignItems="flex-start">
+          <Typography fontWeight="600" $fontSize="2rem">
+            Add your products to Boson Boulevard
+          </Typography>
+          <p>
+            To get access and sell on Boson Boulevard, get in touch with us
+            through the Typeform link below. We will get back to you within 1-3
+            business days. If any questions arise do not hesitate to{" "}
+            <a
+              href="mailto:info@bosonapp.io"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              contact
+            </a>{" "}
+            us.
+          </p>
+          <Button theme="secondary">
+            {
+              // TODO: add typeform link
+            }
+            Apply <ArrowSquareOut size={24} />
+          </Button>
+          <BosonButton
+            onClick={() => setSuccess()}
+            style={{ marginTop: "3.5rem" }}
+          >
+            Done
+          </BosonButton>
+        </StyledGrid>
+        <Help
+          data={[
+            {
+              title: "What is Boson Boulevard?",
+              description:
+                "Boson Boulevard is a dcommerce district that has been created in the Boson virtual environment in DCL."
+            },
+            {
+              title: "Can anyone sell on Boson Boulevard?",
+              description:
+                "Boson Boulevard is a curated dcommerce experience. Brands meeting a certain criteria can sell on that virtual experience."
+            },
+            {
+              title:
+                "How long does it take to have my products live on Boson Boulevard?",
+              description:
+                "Once we receive your information, products can go live within 2-4 business days"
+            }
+          ]}
+        />
+      </Grid>
+    </StyledDCLLayout>
+  );
+};
diff --git a/src/pages/dcl/steps/execute/ExecuteStep.tsx b/src/pages/dcl/steps/execute/ExecuteStep.tsx
new file mode 100644
index 000000000..580740ff5
--- /dev/null
+++ b/src/pages/dcl/steps/execute/ExecuteStep.tsx
@@ -0,0 +1,25 @@
+import { useFormikContext } from "formik";
+import React from "react";
+
+import { DCLLayout } from "../../styles";
+import { FormType, LocationValues } from "../../validationSchema";
+import { BosonLand } from "./BosonLand";
+import { OwnLand } from "./OwnLand";
+
+type ExecuteStepProps = {
+  handleOnClose: () => void;
+};
+
+export const ExecuteStep: React.FC<ExecuteStepProps> = ({ handleOnClose }) => {
+  const { values } = useFormikContext<FormType>();
+  const location = values.location;
+  return location === LocationValues.OwnLand ? (
+    <OwnLand setSuccess={() => handleOnClose()} />
+  ) : location === LocationValues.BosonLand ? (
+    <BosonLand setSuccess={() => handleOnClose()} />
+  ) : (
+    <DCLLayout width="auto">
+      Unavailable location please go back and select another one...
+    </DCLLayout>
+  );
+};
diff --git a/src/pages/dcl/steps/execute/OwnLand.tsx b/src/pages/dcl/steps/execute/OwnLand.tsx
new file mode 100644
index 000000000..666b0be27
--- /dev/null
+++ b/src/pages/dcl/steps/execute/OwnLand.tsx
@@ -0,0 +1,143 @@
+import { ArrowSquareOut, GithubLogo } from "phosphor-react";
+import React from "react";
+import styled from "styled-components";
+
+import Help from "../../../../components/product/Help";
+import BosonButton from "../../../../components/ui/BosonButton";
+import Button from "../../../../components/ui/Button";
+import Grid from "../../../../components/ui/Grid";
+import Typography from "../../../../components/ui/Typography";
+import { breakpoint } from "../../../../lib/styles/breakpoint";
+import { StyledDCLLayout } from "../../styles";
+
+const StyledGrid = styled(Grid)`
+  ${breakpoint.m} {
+    max-width: calc(50% - 3rem);
+  }
+`;
+interface OwnLandProps {
+  setSuccess: () => void;
+}
+
+export const OwnLand: React.FC<OwnLandProps> = ({ setSuccess }) => {
+  return (
+    <StyledDCLLayout width="auto">
+      <Grid
+        justifyContent="space-between"
+        alignItems="flex-start"
+        flexWrap="wrap"
+        gap="3rem"
+      >
+        <StyledGrid flexDirection="column" alignItems="flex-start">
+          <Typography fontWeight="600" $fontSize="2rem">
+            Add product to your own land
+          </Typography>
+          <Typography tag="p">
+            The developer documentation provides comprehensive guidance on
+            integrating the Boson Metaverse Commerce Toolkit into your virtual
+            property in Decentraland. This capability will enable scene builders
+            in Decentraland to incorporate a Boson Kiosk into their virtual
+            environments.
+          </Typography>
+          <Typography tag="p">
+            The integration of the Boson Metaverse Commerce Toolkit enables
+            potential buyers to purchase physical NFTs directly within the
+            Metaverse. This is achieved through direct interaction with the
+            Boson Protocol on the Polygon platform.
+          </Typography>
+          <p>
+            Do not hesitate to{" "}
+            <a
+              href="mailto:info@bosonapp.io"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              get in touch
+            </a>{" "}
+            in case you need any help!
+          </p>
+          <Grid justifyContent="flex-start" gap="1.25rem">
+            <a
+              href="https://docs.bosonprotocol.io/docs/quick_start/metaverse_tutorial/selling_in_dcl/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button theme="secondary">
+                Documentation <ArrowSquareOut size={24} />
+              </Button>
+            </a>
+            <a
+              href="https://github.com/bosonprotocol/boson-dcl"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button theme="secondary">
+                GitHub <GithubLogo size={24} />
+              </Button>
+            </a>
+          </Grid>
+          <BosonButton
+            onClick={() => setSuccess()}
+            style={{ marginTop: "3.5rem" }}
+          >
+            Done
+          </BosonButton>
+        </StyledGrid>
+        <Help
+          data={[
+            {
+              title: "Can I sell on my own virtual land in DCL?",
+              description:
+                "Yes. The Boson Metaverse Commerce Toolkit can be used across any virtual environment or land in DCL."
+            },
+            {
+              title:
+                "Do I need a developer to integrate the Metaverse Commerce Toolkit into my scene on my own DCL land?",
+              description:
+                "Integrating the Metaverse Commerce Toolkit requires some familiarity and understanding of integrating scenes in DCL. In addition, a basic knowledge of Typescript coding is required."
+            },
+            {
+              title:
+                "How long does it take to integrate the Metaverse Commerce Toolkit into my DCL land?",
+              description:
+                "Typically, users who are familiar with DCL and Typescript have integrated the Metaverse Commerce Toolkit into their scene within a few hours."
+            },
+            {
+              title:
+                "I have questions about the Metaverse Commerce Toolkit, how do I get help?",
+              description: (
+                <p>
+                  For questions, please contact us at{" "}
+                  <a
+                    href="mailto:info@bosonapp.io"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    info@bosonapp.io
+                  </a>{" "}
+                  or via{" "}
+                  <a
+                    href="https://discord.com/invite/5dRV7fWet2"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Discord
+                  </a>{" "}
+                  or{" "}
+                  <a
+                    href="https://t.me/bosonprotocol"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Telegram
+                  </a>
+                  .
+                </p>
+              )
+            }
+          ]}
+        />
+      </Grid>
+    </StyledDCLLayout>
+  );
+};
diff --git a/src/pages/dcl/styles.ts b/src/pages/dcl/styles.ts
new file mode 100644
index 000000000..39e4e4414
--- /dev/null
+++ b/src/pages/dcl/styles.ts
@@ -0,0 +1,27 @@
+import { CSSProperties } from "react";
+import styled from "styled-components";
+
+import { breakpoint } from "../../lib/styles/breakpoint";
+
+export const DCLLayout = styled.div<{
+  width: "100%" | "auto" | CSSProperties["width"];
+}>`
+  display: flex;
+  align-items: center;
+  margin: 0 1rem;
+  padding-right: 4rem;
+  padding-left: 4rem;
+  width: ${({ width }) => width};
+  margin: 0 auto;
+  ${breakpoint.xs} {
+    max-width: 93.75rem;
+  }
+`;
+
+export const StyledDCLLayout = styled(DCLLayout)`
+  padding-right: 0;
+
+  ${breakpoint.xl} {
+    padding-right: 4rem;
+  }
+`;
diff --git a/src/pages/dcl/validationSchema.ts b/src/pages/dcl/validationSchema.ts
new file mode 100644
index 000000000..1dbe0fac3
--- /dev/null
+++ b/src/pages/dcl/validationSchema.ts
@@ -0,0 +1,14 @@
+import * as Yup from "yup";
+
+export enum LocationValues {
+  OwnLand = "OwnLand",
+  BosonLand = "BosonLand"
+}
+
+export const validationSchema = Yup.object({
+  location: Yup.string()
+    .oneOf([LocationValues.OwnLand, LocationValues.BosonLand])
+    .required()
+});
+
+export type FormType = Yup.InferType<typeof validationSchema>;
diff --git a/src/pages/explore/WithAllOffers.tsx b/src/pages/explore/WithAllOffers.tsx
index ece73ef1f..2d2905494 100644
--- a/src/pages/explore/WithAllOffers.tsx
+++ b/src/pages/explore/WithAllOffers.tsx
@@ -5,7 +5,7 @@ import React, { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 
-import { LayoutRoot } from "../../components/Layout";
+import { LayoutRoot } from "../../components/layout/Layout";
 import Grid from "../../components/ui/Grid";
 import Loading from "../../components/ui/Loading";
 import Typography from "../../components/ui/Typography";
diff --git a/src/pages/landing/Carousel.tsx b/src/pages/landing/Carousel.tsx
index 2ea0ad7a8..e5650b578 100644
--- a/src/pages/landing/Carousel.tsx
+++ b/src/pages/landing/Carousel.tsx
@@ -2,9 +2,11 @@ import * as Sentry from "@sentry/browser";
 // inspired by https://3dtransforms.desandro.com/carousel
 import { CaretLeft, CaretRight } from "phosphor-react";
 import { useMemo, useRef, useState } from "react";
+import { useSwipeable } from "react-swipeable";
 import styled, { css } from "styled-components";
 
 import ProductCard from "../../components/productCard/ProductCard";
+import Loading from "../../components/ui/Loading";
 import { breakpoint } from "../../lib/styles/breakpoint";
 import { zIndex } from "../../lib/styles/zIndex";
 import { Offer } from "../../lib/types/offer";
@@ -192,7 +194,7 @@ export default function Carousel() {
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
   const carouselRef = useRef<HTMLDivElement | null>(null);
 
-  const { products } = useProductsByFilteredOffers({
+  const { products, isLoading } = useProductsByFilteredOffers({
     voided: false,
     valid: true,
     first: numCells,
@@ -249,9 +251,21 @@ export default function Carousel() {
         "translateZ(" + -radius + "px) " + rotateFn + "(" + angle + "deg)";
     }
   }
-
+  const handlers = useSwipeable({
+    onSwipedLeft: () => onNextClick(),
+    onSwipedRight: () => onPreviousClick(),
+    swipeDuration: 500,
+    preventScrollOnSwipe: true,
+    trackMouse: true
+  });
+  if (isLoading) {
+    return <Loading />;
+  }
+  if (!uiOffers?.length) {
+    return <></>;
+  }
   return (
-    <Scene>
+    <Scene {...handlers}>
       <CarouselContainer ref={carouselRef} data-testid="carousel">
         {uiOffers?.map((offer: Offer, idx: number) => {
           const clampedSelectedIndex =
diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx
index ef907fbc8..36375c57d 100644
--- a/src/pages/landing/Landing.tsx
+++ b/src/pages/landing/Landing.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useState } from "react";
 import styled, { css } from "styled-components";
 import useResizeObserver from "use-resize-observer";
 
-import Layout from "../../components/Layout";
+import Layout from "../../components/layout/Layout";
 import BosonButton from "../../components/ui/BosonButton";
 import Grid from "../../components/ui/Grid";
 import Typography from "../../components/ui/Typography";
@@ -18,6 +18,7 @@ import Carousel from "./Carousel";
 import Step from "./Step";
 
 const LandingPage = styled.div<{ isCustomStoreFront: string }>`
+  width: 100%;
   ${({ isCustomStoreFront }) => {
     if (isCustomStoreFront) {
       return;
diff --git a/src/pages/profile/seller/Seller.tsx b/src/pages/profile/seller/Seller.tsx
index a553ece0b..2ff567ff1 100644
--- a/src/pages/profile/seller/Seller.tsx
+++ b/src/pages/profile/seller/Seller.tsx
@@ -1,3 +1,4 @@
+import { AuthTokenType } from "@bosonprotocol/react-kit";
 import { BigNumber } from "ethers";
 import { useMemo } from "react";
 import { useParams } from "react-router-dom";
@@ -5,7 +6,6 @@ import styled from "styled-components";
 import { useAccount } from "wagmi";
 
 import { EditProfile } from "../../../components/detail/EditProfile";
-import { ProfileType } from "../../../components/modal/components/Profile/const";
 import {
   getLensCoverPictureUrl,
   getLensProfilePictureUrl,
@@ -120,7 +120,7 @@ export default function Seller() {
   const seller = sellersData[0];
   const metadata = seller?.metadata;
   const [sellerLens] = sellersLens;
-  const useLens = !metadata || metadata?.kind === ProfileType.LENS;
+  const useLens = seller?.authTokenType === AuthTokenType.LENS;
   sellerId = sellersData?.length ? sellersData[0].id : sellerId;
   const lensCoverImage = getLensImageUrl(getLensCoverPictureUrl(sellerLens));
   const avatar = getLensImageUrl(getLensProfilePictureUrl(sellerLens));
diff --git a/src/pages/profile/seller/SellerSocial.tsx b/src/pages/profile/seller/SellerSocial.tsx
index f328fe350..cf09793ef 100644
--- a/src/pages/profile/seller/SellerSocial.tsx
+++ b/src/pages/profile/seller/SellerSocial.tsx
@@ -1,9 +1,9 @@
 import { SellerFieldsFragment } from "@bosonprotocol/core-sdk/dist/cjs/subgraph";
+import { AuthTokenType } from "@bosonprotocol/react-kit";
 import { Globe } from "phosphor-react";
 import { useEffect, useState } from "react";
 
 import DetailShare from "../../../components/detail/DetailShare";
-import { ProfileType } from "../../../components/modal/components/Profile/const";
 import { getLensWebsite } from "../../../components/modal/components/Profile/Lens/utils";
 import {
   Profile,
@@ -51,9 +51,8 @@ export default function SellerSocial({
   voucherCloneAddress
 }: Props) {
   const [openSeaUrl, setOpenSeaUrl] = useState<string | null>(null);
-  const useLens =
-    (!seller.metadata || seller.metadata?.kind === ProfileType.LENS) &&
-    sellerLens;
+  const useLens = seller?.authTokenType === AuthTokenType.LENS;
+
   const website = useLens
     ? getLensWebsite(sellerLens as Profile)
     : seller.metadata?.website;
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 8cd816b61..fbf3b5d0d 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -10,6 +10,7 @@ import {
 import PrivacyPolicyPage from "../pages/common/PrivacyPolicy";
 import TermsAndConditionsPage from "../pages/common/TermsAndConditions";
 import CreateProductPage from "../pages/create-product/CreateProduct";
+import { DCLPage } from "../pages/dcl/DCLPage";
 import ExplorePage from "../pages/explore/Explore";
 import LandingPage from "../pages/landing/Landing";
 import OfferUuidReroute from "../pages/offers/OfferUuidReroute";
@@ -74,6 +75,7 @@ export interface IRoutes extends RouteProps {
   };
   app?: {
     withLayout?: boolean;
+    withFullLayout?: boolean;
     withFooter?: boolean;
     fluidHeader?: boolean;
   };
@@ -117,6 +119,20 @@ export default [
     path: SellerCenterRoutes.CreateProduct,
     component: CreateProductPage
   },
+  {
+    ...base,
+    path: SellerCenterRoutes.DCL,
+    component: DCLPage,
+    app: {
+      ...base.app,
+      withHeader: false,
+      withLayout: true,
+      withFullLayout: true,
+      withFooter: false,
+      fluidHeader: false
+    },
+    role: [UserRoles.Seller]
+  },
   {
     ...base,
     path: BosonRoutes.Explore,
@@ -307,4 +323,4 @@ export default [
     path: BosonRoutes.Error404,
     component: NotFoundPage
   }
-];
+] as IRoutes[];