diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 648684e121..1ecd9a1ef2 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -4248,31 +4248,6 @@
         "@ethersproject/strings": "^5.7.0"
       }
     },
-    "node_modules/@fluentui/react-component-event-listener": {
-      "version": "0.63.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.63.1.tgz",
-      "integrity": "sha512-gSMdOh6tI3IJKZFqxfQwbTpskpME0CvxdxGM2tdglmf6ZPVDi0L4+KKIm+2dN8nzb8Ya1A8ZT+Ddq0KmZtwVQg==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.4"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17 || ^18",
-        "react-dom": "^16.8.0 || ^17 || ^18"
-      }
-    },
-    "node_modules/@fluentui/react-component-ref": {
-      "version": "0.63.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-component-ref/-/react-component-ref-0.63.1.tgz",
-      "integrity": "sha512-8MkXX4+R3i80msdbD4rFpEB4WWq2UDvGwG386g3ckIWbekdvN9z2kWAd9OXhRGqB7QeOsoAGWocp6gAMCivRlw==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.4",
-        "react-is": "^16.6.3"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17 || ^18",
-        "react-dom": "^16.8.0 || ^17 || ^18"
-      }
-    },
     "node_modules/@formatjs/ecma402-abstract": {
       "version": "1.11.4",
       "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
@@ -5342,19 +5317,6 @@
         "@scure/base": "~1.0.0"
       }
     },
-    "node_modules/@semantic-ui-react/event-stack": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.3.tgz",
-      "integrity": "sha512-FdTmJyWvJaYinHrKRsMLDrz4tTMGdFfds299Qory53hBugiDvGC0tEJf+cHsi5igDwWb/CLOgOiChInHwq8URQ==",
-      "dependencies": {
-        "exenv": "^1.2.2",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@sentry-internal/tracing": {
       "version": "7.64.0",
       "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.64.0.tgz",
@@ -10773,19 +10735,6 @@
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
       "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
-    "node_modules/dayzed": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/dayzed/-/dayzed-3.2.3.tgz",
-      "integrity": "sha512-qXTIKs+R6ydWwNo+X1wu3lUptyRSGoyY+ZzRcQSM0zUlaG+/Ei+bFjqbQm1T2oJ+WKNkTHURBcGsxnx9N+9kfA==",
-      "dependencies": {
-        "@babel/runtime": "^7.6.2",
-        "date-fns": "^2.0.0"
-      },
-      "peerDependencies": {
-        "prop-types": "^15",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
     "node_modules/dcl-catalyst-client": {
       "version": "21.5.0",
       "resolved": "https://registry.npmjs.org/dcl-catalyst-client/-/dcl-catalyst-client-21.5.0.tgz",
@@ -22551,20 +22500,6 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "node_modules/react-popper": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
-      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
-      "dependencies": {
-        "react-fast-compare": "^3.0.1",
-        "warning": "^4.0.2"
-      },
-      "peerDependencies": {
-        "@popperjs/core": "^2.0.0",
-        "react": "^16.8.0 || ^17 || ^18",
-        "react-dom": "^16.8.0 || ^17 || ^18"
-      }
-    },
     "node_modules/react-redux": {
       "version": "7.2.4",
       "license": "MIT",
@@ -22861,6 +22796,19 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/react-semantic-ui-datepickers/node_modules/dayzed": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/dayzed/-/dayzed-3.2.3.tgz",
+      "integrity": "sha512-qXTIKs+R6ydWwNo+X1wu3lUptyRSGoyY+ZzRcQSM0zUlaG+/Ei+bFjqbQm1T2oJ+WKNkTHURBcGsxnx9N+9kfA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2",
+        "date-fns": "^2.0.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/react-tile-map": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/react-tile-map/-/react-tile-map-0.4.1.tgz",
@@ -24342,6 +24290,58 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/semantic-ui-react/node_modules/@fluentui/react-component-event-listener": {
+      "version": "0.63.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.63.1.tgz",
+      "integrity": "sha512-gSMdOh6tI3IJKZFqxfQwbTpskpME0CvxdxGM2tdglmf6ZPVDi0L4+KKIm+2dN8nzb8Ya1A8ZT+Ddq0KmZtwVQg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/semantic-ui-react/node_modules/@fluentui/react-component-ref": {
+      "version": "0.63.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-component-ref/-/react-component-ref-0.63.1.tgz",
+      "integrity": "sha512-8MkXX4+R3i80msdbD4rFpEB4WWq2UDvGwG386g3ckIWbekdvN9z2kWAd9OXhRGqB7QeOsoAGWocp6gAMCivRlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.4",
+        "react-is": "^16.6.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/semantic-ui-react/node_modules/@semantic-ui-react/event-stack": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.3.tgz",
+      "integrity": "sha512-FdTmJyWvJaYinHrKRsMLDrz4tTMGdFfds299Qory53hBugiDvGC0tEJf+cHsi5igDwWb/CLOgOiChInHwq8URQ==",
+      "dependencies": {
+        "exenv": "^1.2.2",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/semantic-ui-react/node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
diff --git a/webapp/src/components/AssetBrowse/AssetBrowse.tsx b/webapp/src/components/AssetBrowse/AssetBrowse.tsx
index 3d2a2823ce..840aff3517 100644
--- a/webapp/src/components/AssetBrowse/AssetBrowse.tsx
+++ b/webapp/src/components/AssetBrowse/AssetBrowse.tsx
@@ -33,7 +33,6 @@ import CollectionList from '../CollectionList'
 import StoreSettings from '../StoreSettings'
 import Sales from '../Sales'
 import { Bids } from '../Bids'
-import { ClaimYourName } from '../ClaimYourName'
 import { Props } from './AssetBrowse.types'
 import MapTopbar from './MapTopbar'
 import MapBrowse from './MapBrowse'
@@ -233,7 +232,6 @@ const AssetBrowse = (props: Props) => {
     case DecentralandSection.ENS:
       right = (
         <>
-          {!isAccountOrCurrentAccount && <ClaimYourName />}
           <AssetTopbar />
           <AssetList isManager={isCurrentAccount} />
         </>
@@ -257,7 +255,6 @@ const AssetBrowse = (props: Props) => {
     Sections.decentraland.LAND,
     Sections.decentraland.WEARABLES,
     Sections.decentraland.EMOTES,
-    Sections.decentraland.ENS,
     Sections.decentraland.ON_SALE,
     Sections.decentraland.ON_RENT,
     Sections.decentraland.SALES,
diff --git a/webapp/src/components/AssetTopbar/AssetTopbar.tsx b/webapp/src/components/AssetTopbar/AssetTopbar.tsx
index f45b7f48ba..2385c0a4b5 100644
--- a/webapp/src/components/AssetTopbar/AssetTopbar.tsx
+++ b/webapp/src/components/AssetTopbar/AssetTopbar.tsx
@@ -159,13 +159,6 @@ export const AssetTopbar = ({
     [onBrowse, onlyOnSale, onlyOnRent]
   )
 
-  useEffect(() => {
-    const option = sortByOptions.find(option => option.value === sortBy)
-    if (!option) {
-      onBrowse({ sortBy: sortByOptions[0].value })
-    }
-  }, [onBrowse, sortBy, sortByOptions])
-
   const sortByValue = sortByOptions.find(option => option.value === sortBy)
     ? sortBy
     : sortByOptions[0].value
diff --git a/webapp/src/components/BrowsePage/BrowsePage.tsx b/webapp/src/components/BrowsePage/BrowsePage.tsx
index cd8c4fe33f..62fb71590f 100644
--- a/webapp/src/components/BrowsePage/BrowsePage.tsx
+++ b/webapp/src/components/BrowsePage/BrowsePage.tsx
@@ -29,7 +29,7 @@ const BrowsePage = (props: Props) => {
         isFullscreen={Boolean(isFullscreen)}
         view={View.MARKET}
         section={section}
-        sections={[Section.WEARABLES, Section.EMOTES, Section.ENS]}
+        sections={[Section.WEARABLES, Section.EMOTES]}
         contracts={contracts}
       />
       <Footer isFullscreen={isFullscreen} />
diff --git a/webapp/src/components/ClaimYourName/ClaimYourName.module.css b/webapp/src/components/ClaimYourName/ClaimYourName.module.css
deleted file mode 100644
index fb80ea7e0d..0000000000
--- a/webapp/src/components/ClaimYourName/ClaimYourName.module.css
+++ /dev/null
@@ -1,82 +0,0 @@
-.gradient {
-  height: 152px;
-  width: 100%;
-  margin-bottom: 11px;
-  border-radius: 14.482757568359375px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  position: relative;
-}
-
-.gradient::before {
-  content: '';
-  position: absolute;
-  aspect-ratio: 1/1;
-  width: 105%;
-  background-image: radial-gradient(
-      100% 100% at 6% 9%,
-      #ffbc5bff 2%,
-      #ffffff00 73%
-    ),
-    linear-gradient(60deg, #ff2d55 18%, #c640cd 100%);
-  z-index: -1;
-  animation: rotate 4s linear infinite;
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@media (max-width: 767px) {
-  .gradient {
-    display: none;
-  }
-}
-
-.container {
-  height: 146px;
-  width: calc(100% - 6px);
-  background: #242129;
-  border-radius: 14.482757568359375px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 33px 0 15px;
-}
-
-.imgTitleAndTextContainer {
-  display: flex;
-  align-items: center;
-}
-
-.img {
-  margin-right: 14px;
-}
-
-.title {
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 24px;
-  letter-spacing: 0px;
-  text-align: left;
-}
-
-.text {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 18px;
-  letter-spacing: 0em;
-  text-align: left;
-}
-
-.btn {
-  max-width: 222px;
-  margin-left: 21px !important;
-}
diff --git a/webapp/src/components/ClaimYourName/ClaimYourName.spec.tsx b/webapp/src/components/ClaimYourName/ClaimYourName.spec.tsx
deleted file mode 100644
index 55f5eac038..0000000000
--- a/webapp/src/components/ClaimYourName/ClaimYourName.spec.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { render, fireEvent } from '@testing-library/react'
-import ClaimYourName from './ClaimYourName'
-import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
-import * as events from '../../utils/events'
-
-jest.mock('../../lib/environment', () => {
-  return {
-    builderUrl: 'https://mocked-builder-url.com'
-  }
-})
-
-jest.mock('decentraland-dapps/dist/modules/analytics/utils')
-
-const mockGetAnalytics = getAnalytics as jest.MockedFunction<
-  typeof getAnalytics
->
-
-describe('ClaimYourName', () => {
-  it('should have a link to the builder with the names path', async () => {
-    const { findByRole } = render(<ClaimYourName />)
-    const button = await findByRole('button')
-    expect(button.getAttribute('href')).toBe(
-      `https://mocked-builder-url.com/claim-name`
-    )
-  })
-
-  describe('when tracking the event that the button was clicked', () => {
-    let track: jest.Mock
-
-    beforeEach(() => {
-      track = jest.fn()
-
-      mockGetAnalytics.mockReturnValueOnce({
-        track
-      })
-    })
-
-    it('should track an event when the user clicks on the button', async () => {
-      const { findByRole } = render(<ClaimYourName />)
-      // TODO: Fix the "Error: Not implemented: navigation (except hash changes)" that happens because of the href.
-      fireEvent.click(await findByRole('button'))
-      expect(track).toHaveBeenCalledWith(events.CLICK_CLAIM_NEW_NAME)
-    })
-
-    it('should track an event when the user right clicks on the button', async () => {
-      const { findByRole } = render(<ClaimYourName />)
-      fireEvent.contextMenu(await findByRole('button'))
-      expect(track).toHaveBeenCalledWith(events.CLICK_CLAIM_NEW_NAME)
-    })
-  })
-})
diff --git a/webapp/src/components/ClaimYourName/ClaimYourName.tsx b/webapp/src/components/ClaimYourName/ClaimYourName.tsx
deleted file mode 100644
index 587ef4b23d..0000000000
--- a/webapp/src/components/ClaimYourName/ClaimYourName.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import { Button } from 'decentraland-ui'
-import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
-import claimYourOwnNameImg from '../../images/claim-your-own-name.svg'
-import { builderUrl } from '../../lib/environment'
-import * as events from '../../utils/events'
-import { Mana } from '../Mana'
-import styles from './ClaimYourName.module.css'
-
-const ClaimYourName = () => {
-  const trackClick = () => {
-    getAnalytics().track(events.CLICK_CLAIM_NEW_NAME)
-  }
-
-  return (
-    <div className={styles.gradient}>
-      <div className={styles.container}>
-        <div className={styles.imgTitleAndTextContainer}>
-          <img
-            className={styles.img}
-            src={claimYourOwnNameImg}
-            alt="Claim your own name"
-          ></img>
-          <div>
-            <h4 className={styles.title}>{t('claim_your_own_name.title')}</h4>
-            <div className={styles.text}>
-              <T
-                id="claim_your_own_name.text"
-                values={{
-                  mana: <Mana size="small">100</Mana>
-                }}
-              />
-            </div>
-          </div>
-        </div>
-        <Button
-          className={styles.btn}
-          primary
-          fluid
-          as={'a'}
-          href={`${builderUrl}/claim-name`}
-          onClick={trackClick}
-          // If the user does right click and opens in new tab, the onClick handler is not triggered.
-          // By using onContextMenu, the event will be tracked this way too.
-          onContextMenu={trackClick}
-        >
-          {t('claim_your_own_name.btn')}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export default React.memo(ClaimYourName)
diff --git a/webapp/src/components/ClaimYourName/index.ts b/webapp/src/components/ClaimYourName/index.ts
deleted file mode 100644
index 37a1ab46c5..0000000000
--- a/webapp/src/components/ClaimYourName/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ClaimYourName from './ClaimYourName'
-
-export { ClaimYourName }
diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.container.ts b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.container.ts
new file mode 100644
index 0000000000..80a6d51e8b
--- /dev/null
+++ b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.container.ts
@@ -0,0 +1,54 @@
+import { connect } from 'react-redux'
+import { withAuthorizedAction } from 'decentraland-dapps/dist/containers'
+import { AuthorizedAction } from 'decentraland-dapps/dist/containers/withAuthorizedAction/AuthorizationModal'
+import { getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
+import { RootState } from '../../../modules/reducer'
+import {
+  getClaimNameStatus,
+  getLoading,
+  isWaitingTxClaimName,
+  getErrorMessage
+} from '../../../modules/ens/selectors'
+import {
+  claimNameRequest,
+  CLAIM_NAME_REQUEST,
+  claimNameClear
+} from '../../../modules/ens/actions'
+import { Contract } from '../../../modules/vendor/services'
+import { getContract } from '../../../modules/contract/selectors'
+import {
+  MapDispatch,
+  MapDispatchProps,
+  MapState
+} from './ClaimNameFatFingerModal.types'
+import ClaimNameFatFingerModal from './ClaimNameFatFingerModal'
+
+const mapState = (state: RootState): MapState => ({
+  isLoading:
+    isLoadingType(getLoading(state), CLAIM_NAME_REQUEST) ||
+    isWaitingTxClaimName(state),
+  address: getAddress(state),
+  getContract: (query: Partial<Contract>) => getContract(state, query)
+})
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onClaim: name => dispatch(claimNameRequest(name)),
+  onClaimNameClear: () => dispatch(claimNameClear())
+})
+
+export default connect(
+  mapState,
+  mapDispatch
+)(
+  withAuthorizedAction(
+    ClaimNameFatFingerModal,
+    AuthorizedAction.CLAIM_NAME,
+    {
+      title_action: 'names_page.claim_name_fat_finger_modal.authorization.title_action',
+      action: 'names_page.claim_name_fat_finger_modal.authorization.action'
+    },
+    getClaimNameStatus,
+    getErrorMessage
+  )
+)
diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.css b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.css
new file mode 100644
index 0000000000..e2e00b39c2
--- /dev/null
+++ b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.css
@@ -0,0 +1,35 @@
+.ClaimNameFatFingerModal.ui.modal .content .dcl.field,
+.ClaimNameFatFingerModal.ui.modal .actions {
+  margin-top: 30px;
+}
+
+.ClaimNameFatFingerModal.ui.modal .content .dcl.field .message {
+  margin-top: 10px;
+}
+
+.ClaimNameFatFingerModal.ui.modal .dcl.field.error .ui.input > i.icon,
+.ClaimNameFatFingerModal.ui.modal .ui.form .dcl.field.error .ui.input > i.icon {
+  background-position: 0% 100%;
+}
+
+.ClaimNameFatFingerModal.ui.modal .ui.form .dcl.field .ui.input input {
+  border: 1px solid #fcfcfc;
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.ClaimNameFatFingerModal.ui.modal .ui.form .dcl.field.error .ui.input input {
+  border: 1px solid var(--error);
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.ClaimNameFatFingerModal.ui.modal .capsWarning {
+  border: 1px solid #716b7c;
+  padding: 12px 16px;
+  border-radius: 6px;
+  color: #a09ba8;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 17px;
+}
diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.spec.tsx b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.spec.tsx
new file mode 100644
index 0000000000..db72cd7be6
--- /dev/null
+++ b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.spec.tsx
@@ -0,0 +1,109 @@
+import { fireEvent, waitFor } from '@testing-library/react'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { renderWithProviders } from '../../../utils/test'
+import ClaimNameFatFingerModal from './ClaimNameFatFingerModal'
+
+describe('ClaimNameFatFingerModal', () => {
+  const name = 'aNAME'
+  const onCloseMock = jest.fn()
+  const onClaimMock = jest.fn()
+  const onClaimNameClearMock = jest.fn()
+  const onAuthorizedActionMock = jest.fn()
+  const baseProps = {
+    metadata: { name },
+    isLoading: false,
+    name: 'Modal',
+    onClose: onCloseMock,
+    getContract: jest.fn(),
+    onClaim: onClaimMock,
+    onClaimNameClear: onClaimNameClearMock,
+    onAuthorizedAction: onAuthorizedActionMock,
+    onCloseAuthorization: jest.fn(),
+    isLoadingAuthorization: false
+  }
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('when there is no name typed', () => {
+    it('should have the confirm button disabled', () => {
+      const { getByText } = renderWithProviders(
+        <ClaimNameFatFingerModal {...baseProps} />
+      )
+
+      const claimButton = getByText(t('global.confirm'))
+      expect(claimButton).toBeDisabled()
+    })
+  })
+
+  describe('when not typing the same name that is given by props', () => {
+    it('should have the confirm button disabled and show error message', () => {
+      const { getByRole, getByText } = renderWithProviders(
+        <ClaimNameFatFingerModal {...baseProps} />
+      )
+
+      const inputField = getByRole('textbox')
+      fireEvent.change(inputField, { target: { value: 'wrongName' } })
+
+      const claimButton = getByText(t('global.confirm'))
+      expect(claimButton).toBeDisabled()
+
+      const errorMessage = getByText(
+        t('names_page.claim_name_fat_finger_modal.names_different')
+      )
+      expect(errorMessage).toBeInTheDocument()
+    })
+  })
+
+  describe('when typing the correct name', () => {
+    it('should call onClaim when claim button is clicked', async () => {
+      const { getByRole, getByText } = renderWithProviders(
+        <ClaimNameFatFingerModal
+          {...baseProps}
+          getContract={jest.fn().mockResolvedValue({
+            address: '0x0' // mana contract mock
+          })}
+          onAuthorizedAction={jest
+            .fn()
+            .mockImplementation(({ onAuthorized }: any) => {
+              onAuthorized()
+            })}
+        />
+      )
+
+      const inputField = getByRole('textbox')
+      await fireEvent.change(inputField, { target: { value: name } })
+      const claimButton = getByText(t('global.confirm'))
+      await waitFor(() => {
+        expect(claimButton).not.toBeDisabled()
+      })
+      fireEvent.click(claimButton)
+      expect(onClaimMock).toHaveBeenCalledWith(name)
+    })
+  })
+
+  describe('while loading', () => {
+    it('should have the confirm button disabled', () => {
+      const { getByText } = renderWithProviders(
+        <ClaimNameFatFingerModal {...baseProps} isLoading />
+      )
+
+      const claimButton = getByText(t('global.confirm'))
+      expect(claimButton).toBeDisabled()
+    })
+  })
+
+  describe('when the modal is closed', () => {
+    it('should call onClose', () => {
+      const { getByText } = renderWithProviders(
+        <ClaimNameFatFingerModal {...baseProps} />
+      )
+
+      const closeButton = getByText(t('global.cancel'))
+      fireEvent.click(closeButton)
+
+      expect(onCloseMock).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.tsx b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.tsx
new file mode 100644
index 0000000000..bd86358590
--- /dev/null
+++ b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.tsx
@@ -0,0 +1,124 @@
+import React, { useCallback, useState } from 'react'
+import { NFTCategory, Network } from '@dcl/schemas'
+import { ModalNavigation, Field, Button, Form, Icon } from 'decentraland-ui'
+import { ContractName } from 'decentraland-transactions'
+import { getChainIdByNetwork } from 'decentraland-dapps/dist/lib/eth'
+import { AuthorizationType } from 'decentraland-dapps/dist/modules/authorization/types'
+import Modal from 'decentraland-dapps/dist/containers/Modal'
+import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
+import { config } from '../../../config'
+import { getContractNames } from '../../../modules/vendor'
+import { PRICE_IN_WEI } from '../../../modules/ens/utils'
+import { Props } from './ClaimNameFatFingerModal.types'
+import './ClaimNameFatFingerModal.css'
+
+export const CONTROLLER_V2_ADDRESS = config.get(
+  'CONTROLLER_V2_CONTRACT_ADDRESS',
+  ''
+)
+
+const ClaimNameFatFingerModal = ({
+  name,
+  metadata: { name: originalName },
+  isLoading,
+  onClaim,
+  onAuthorizedAction,
+  onClaimNameClear,
+  getContract,
+  onClose
+}: Props) => {
+  const [currentName, setCurrentName] = useState('')
+
+  const handleClaim = useCallback(() => {
+    const mana = getContract({
+      name: getContractNames().MANA,
+      network: Network.ETHEREUM
+    })
+
+    if (!mana) return
+
+    const manaContract = {
+      name: ContractName.MANAToken,
+      address: mana.address,
+      chainId: getChainIdByNetwork(Network.ETHEREUM),
+      network: Network.ETHEREUM,
+      category: NFTCategory.ENS
+    }
+
+    onClaimNameClear()
+    onAuthorizedAction({
+      authorizedAddress: CONTROLLER_V2_ADDRESS,
+      authorizedContractLabel: 'DCLControllerV2',
+      targetContract: manaContract,
+      targetContractName: ContractName.MANAToken,
+      requiredAllowanceInWei: PRICE_IN_WEI,
+      authorizationType: AuthorizationType.ALLOWANCE,
+      onAuthorized: () => onClaim(currentName)
+    })
+  }, [currentName, getContract, onAuthorizedAction, onClaim, onClaimNameClear])
+
+  const handleChangeName = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const name = event.target.value
+    setCurrentName(name.replace(/\s/g, ''))
+  }
+
+  const areNamesDifferent = currentName !== originalName
+  const hasError = areNamesDifferent && currentName.length > 0
+
+  return (
+    <Modal name={name} onClose={isLoading ? undefined : onClose}>
+      <ModalNavigation
+        title={t('names_page.claim_name_fat_finger_modal.title')}
+        onClose={isLoading ? undefined : onClose}
+      />
+      <Form onSubmit={handleClaim}>
+        <Modal.Content>
+          <div className="details">
+            <T
+              id="names_page.claim_name_fat_finger_modal.description"
+              values={{ name: <strong>{originalName}</strong> }}
+            />
+          </div>
+          <Field
+            placeholder={t(
+              'names_page.claim_name_fat_finger_modal.name_placeholder'
+            )}
+            value={currentName}
+            error={hasError}
+            disabled={isLoading}
+            message={
+              hasError
+                ? t('names_page.claim_name_fat_finger_modal.names_different')
+                : ''
+            }
+            onChange={handleChangeName}
+          />
+          <div className="capsWarning ">
+            <Icon name="info circle" />
+            {t('names_page.claim_name_fat_finger_modal.caps_warning')}
+          </div>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            secondary
+            onClick={onClose}
+            disabled={isLoading}
+            type="button"
+          >
+            {t('global.cancel')}
+          </Button>
+          <Button
+            primary
+            type="submit"
+            disabled={areNamesDifferent || isLoading}
+            loading={isLoading}
+          >
+            {t('global.confirm')}
+          </Button>
+        </Modal.Actions>
+      </Form>
+    </Modal>
+  )
+}
+
+export default ClaimNameFatFingerModal
diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.types.ts b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.types.ts
new file mode 100644
index 0000000000..1ed6be62f2
--- /dev/null
+++ b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.types.ts
@@ -0,0 +1,21 @@
+import { Dispatch } from 'redux'
+import { ModalProps } from 'decentraland-dapps/dist/providers/ModalProvider/ModalProvider.types'
+import { WithAuthorizedActionProps } from 'decentraland-dapps/dist/containers/withAuthorizedAction'
+import { claimNameClear, claimNameRequest } from '../../../modules/ens/actions'
+import { Contract } from '../../../modules/vendor/services'
+import { getContract } from '../../../modules/contract/selectors'
+
+export type Props = ModalProps & {
+  isLoading: boolean
+  address?: string
+  metadata: {
+    name: string
+  }
+  onClaim: typeof claimNameRequest
+  onClaimNameClear: typeof claimNameClear
+  getContract: (query: Partial<Contract>) => ReturnType<typeof getContract>
+} & WithAuthorizedActionProps
+
+export type MapState = Pick<Props, 'address' | 'getContract' | 'isLoading'>
+export type MapDispatch = Dispatch
+export type MapDispatchProps = Pick<Props, 'onClaim' | 'onClaimNameClear'>
diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/index.ts b/webapp/src/components/Modals/ClaimNameFatFingerModal/index.ts
new file mode 100644
index 0000000000..f85a85f084
--- /dev/null
+++ b/webapp/src/components/Modals/ClaimNameFatFingerModal/index.ts
@@ -0,0 +1,2 @@
+import ClaimNameFatFingerModal from './ClaimNameFatFingerModal.container'
+export default ClaimNameFatFingerModal
diff --git a/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.container.ts b/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.container.ts
new file mode 100644
index 0000000000..23ee7aa639
--- /dev/null
+++ b/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.container.ts
@@ -0,0 +1,38 @@
+import { connect } from 'react-redux'
+import { getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
+import {
+  SET_PROFILE_AVATAR_ALIAS_REQUEST,
+  setProfileAvatarAliasRequest
+} from 'decentraland-dapps/dist/modules/profile/actions'
+import {
+  getProfileOfAddress,
+  getLoading
+} from 'decentraland-dapps/dist/modules/profile/selectors'
+import { RootState } from '../../../modules/reducer'
+import {
+  MapDispatch,
+  MapDispatchProps,
+  MapState
+} from './SetNameAsAliasModal.types'
+import SetNameAsAliasModal from './SetNameAsAliasModal'
+
+const mapState = (state: RootState): MapState => {
+  const address = getAddress(state)
+  const profile = !!address ? getProfileOfAddress(state, address) : undefined
+  return {
+    isLoading: isLoadingType(
+      getLoading(state),
+      SET_PROFILE_AVATAR_ALIAS_REQUEST
+    ),
+    address,
+    profile
+  }
+}
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onSubmit: (address, name) =>
+    dispatch(setProfileAvatarAliasRequest(address, name))
+})
+
+export default connect(mapState, mapDispatch)(SetNameAsAliasModal)
diff --git a/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.css b/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.css
new file mode 100644
index 0000000000..df0a99e2b9
--- /dev/null
+++ b/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.css
@@ -0,0 +1,83 @@
+.SetNameAsAliasModal.ui.modal .content .dcl.field,
+.SetNameAsAliasModal.ui.modal .actions {
+  margin-top: 30px;
+}
+
+.SetNameAsAliasModal.ui.modal .content .dcl.field .message {
+  margin-top: 10px;
+}
+
+.SetNameAsAliasModal.ui.modal .details {
+  text-align: center;
+}
+
+.SetNameAsAliasModal .card {
+  display: flex;
+  background-color: var(--card-on-modal);
+  padding: 60px;
+  border-radius: 16px;
+  margin-top: 16px;
+  font-size: 24px;
+  align-items: center;
+  justify-content: center;
+}
+
+.SetNameAsAliasModal .card div {
+  padding: 0 12px;
+  border-radius: 26px;
+  align-items: center;
+  display: flex;
+  padding: 8px 16px;
+}
+
+.SetNameAsAliasModal .card span .verified img,
+.SetNameAsAliasModal .card span .unverified img {
+  margin-left: 6px;
+}
+
+.SetNameAsAliasModal .card div.verified {
+  height: 37px;
+  font-weight: bold;
+  font-size: 18px;
+  background: linear-gradient(116deg, #ffbc5b 0%, #ff2d55 50.52%, #c640cd 100%);
+}
+
+.SetNameAsAliasModal .card div.unverified {
+  height: 37px;
+  font-weight: bold;
+  font-size: 18px;
+  background-color: #fcfcfc;
+  color: black;
+}
+
+.SetNameAsAliasModal .card div.verified span,
+.SetNameAsAliasModal .card div.unverified span {
+  margin-right: 6px;
+}
+
+.SetNameAsAliasModal .chevron.right:first-of-type {
+  color: #56555a;
+  margin-left: 6px;
+}
+
+.SetNameAsAliasModal .chevron.right:nth-of-type(2) {
+  color: #949396;
+}
+
+.SetNameAsAliasModal .chevron.right:last-of-type {
+  margin-right: 2px;
+}
+
+.SetNameAsAliasModal .successContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.SetNameAsAliasModal .successContainer .Profile.massive .dcl.avatar-face,
+.Profile.massive .dcl.logo {
+  height: 110px;
+  width: 110px;
+  border-radius: 60px;
+  margin-bottom: 20px;
+}
diff --git a/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.spec.tsx b/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.spec.tsx
new file mode 100644
index 0000000000..c0c96d3ec3
--- /dev/null
+++ b/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.spec.tsx
@@ -0,0 +1,119 @@
+import { RenderResult, fireEvent } from '@testing-library/react'
+import { AvatarInfo, Profile } from '@dcl/schemas'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { renderWithProviders } from '../../../utils/test'
+import SetNameAsAliasModal from './SetNameAsAliasModal'
+
+describe('SetNameAsAliasModal', () => {
+  const previousName = 'previous name'
+  const newName = 'John Doe'
+  const mockProps = {
+    name: 'Modal Name',
+    address: '0x1234567890',
+    profile: {
+      avatars: [
+        {
+          name: previousName,
+          hasClaimedName: false,
+          avatar: ({
+            snapshots: []
+          } as unknown) as AvatarInfo
+        }
+      ]
+    } as Profile,
+    metadata: {
+      name: newName
+    },
+    isLoading: false,
+    onSubmit: jest.fn(),
+    onClose: jest.fn(),
+    onAuthorizedAction: jest.fn(),
+    onCloseAuthorization: jest.fn(),
+    isLoadingAuthorization: false
+  }
+
+  describe('when the alias is not set yet', () => {
+    let screen: RenderResult
+    beforeEach(() => {
+      screen = renderWithProviders(<SetNameAsAliasModal {...mockProps} />)
+    })
+    it('renders the modal with the base title', () => {
+      const { getByText } = screen
+      expect(getByText(t('set_name_as_alias_modal.title'))).toBeInTheDocument()
+    })
+    it('renders both names showing how it will be changed', () => {
+      const { getByText } = screen
+      expect(getByText(newName)).toBeInTheDocument()
+      expect(
+        getByText(`${previousName}#${mockProps.address.slice(-4)}`)
+      ).toBeInTheDocument()
+    })
+    it('renders the correct actions', () => {
+      const { getByText } = screen
+      expect(getByText(t('global.cancel'))).toBeInTheDocument()
+      expect(getByText(t('global.confirm'))).toBeInTheDocument()
+    })
+    it('clicking Confirm should call onSubmit', () => {
+      const { getByText } = screen
+      const confirmButton = getByText(t('global.confirm'))
+      fireEvent.click(confirmButton)
+      expect(mockProps.onSubmit).toHaveBeenCalledWith(
+        mockProps.address,
+        newName
+      )
+    })
+  })
+
+  describe('when the alias is set', () => {
+    let updatedProfile: Profile
+    let screen: RenderResult
+    beforeEach(() => {
+      updatedProfile = {
+        avatars: [
+          {
+            name: newName,
+            hasClaimedName: true,
+            avatar: ({
+              snapshots: []
+            } as unknown) as AvatarInfo
+          }
+        ]
+      } as Profile
+      screen = renderWithProviders(
+        <SetNameAsAliasModal {...mockProps} profile={updatedProfile} />
+      )
+    })
+    it('renders the success title when the alias is set', () => {
+      const { getByText } = screen
+      expect(
+        getByText(t('set_name_as_alias_modal.success_title'))
+      ).toBeInTheDocument()
+    })
+    it('should render the new name and the checked icon', () => {
+      const { getAllByText, getByAltText } = screen
+      expect(getAllByText(newName).length).toBeGreaterThan(0)
+      expect(getByAltText('verified icon')).toBeInTheDocument()
+    })
+    it('should render the Finish button', () => {
+      const { getByText } = screen
+      expect(getByText(t('global.finish'))).toBeInTheDocument()
+    })
+    describe('and the Finish button is clicked', () => {
+      it('should call onClose', () => {
+        const { getByText } = screen
+        const finishButton = getByText(t('global.finish'))
+        fireEvent.click(finishButton)
+        expect(mockProps.onClose).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('when the user has no profile yet', () => {
+    it('should render the guest name', () => {
+      const { getByText } = renderWithProviders(
+        <SetNameAsAliasModal {...mockProps} profile={undefined} />
+      )
+      expect(getByText(`${t('global.guest')}#4567`)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.tsx b/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.tsx
new file mode 100644
index 0000000000..ffc9083499
--- /dev/null
+++ b/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.tsx
@@ -0,0 +1,127 @@
+import classNames from 'classnames'
+import { ModalNavigation, Button, Form, Icon, Profile } from 'decentraland-ui'
+import Modal from 'decentraland-dapps/dist/containers/Modal'
+import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
+import VerifiedIcon from '../../../images/verified.svg'
+import UserIcon from '../../../images/user-circle.svg'
+import { Props } from './SetNameAsAliasModal.types'
+import './SetNameAsAliasModal.css'
+
+const SetNameAsAliasModal = ({
+  address,
+  profile,
+  metadata: { name },
+  isLoading,
+  onSubmit,
+  onClose
+}: Props) => {
+  const successOnSetAlias =
+    name === profile?.avatars[0].name &&
+    profile?.avatars[0].hasClaimedName &&
+    !isLoading
+
+  return (
+    <Modal
+      name={name}
+      onClose={isLoading ? undefined : onClose}
+      className="SetNameAsAliasModal"
+    >
+      <ModalNavigation
+        title={
+          successOnSetAlias
+            ? t('set_name_as_alias_modal.success_title')
+            : t('set_name_as_alias_modal.title')
+        }
+        onClose={isLoading ? undefined : onClose}
+      />
+      <Form onSubmit={() => !!address && onSubmit(address, name)}>
+        <Modal.Content>
+          <div className="details">
+            <T
+              id={
+                successOnSetAlias
+                  ? 'set_name_as_alias_modal.success_description'
+                  : 'set_name_as_alias_modal.description'
+              }
+              values={{ name: <strong>{name}</strong> }}
+            />
+          </div>
+          <div className="card">
+            {profile && successOnSetAlias && address ? (
+              <div className="successContainer">
+                <Profile
+                  address={address}
+                  avatar={profile.avatars[0]}
+                  inline={false}
+                  size="massive"
+                  imageOnly
+                />
+                <div className="verified">
+                  <span>{profile.avatars[0].name}</span>
+                  <img src={VerifiedIcon} alt="verified icon" />
+                </div>
+              </div>
+            ) : null}
+            {!successOnSetAlias ? (
+              <>
+                <div
+                  className={classNames(
+                    profile?.avatars[0].hasClaimedName
+                      ? 'verified'
+                      : 'unverified'
+                  )}
+                >
+                  <span>
+                    {profile
+                      ? profile.avatars[0].hasClaimedName
+                        ? profile.avatars[0].name
+                        : `${profile.avatars[0].name}#${address?.slice(-4)}`
+                      : `${t('global.guest')}#4567`}
+                  </span>
+
+                  {profile?.avatars[0].hasClaimedName ? (
+                    <img src={VerifiedIcon} alt="verified icon" />
+                  ) : (
+                    <img src={UserIcon} alt="user icon" />
+                  )}
+                </div>
+                <Icon name="chevron right" />
+                <Icon name="chevron right" />
+                <Icon name="chevron right" />
+                <div className="verified">
+                  <span>{name}</span>
+                  <img src={VerifiedIcon} alt="verified icon" />
+                </div>
+              </>
+            ) : null}
+          </div>
+        </Modal.Content>
+        <Modal.Actions>
+          {successOnSetAlias ? (
+            <>
+              <Button primary onClick={onClose} type="button">
+                {t('global.finish')}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                secondary
+                onClick={onClose}
+                disabled={isLoading}
+                type="button"
+              >
+                {t('global.cancel')}
+              </Button>
+              <Button primary type="submit" loading={isLoading}>
+                {t('global.confirm')}
+              </Button>
+            </>
+          )}
+        </Modal.Actions>
+      </Form>
+    </Modal>
+  )
+}
+
+export default SetNameAsAliasModal
diff --git a/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.types.ts b/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.types.ts
new file mode 100644
index 0000000000..aefda7085e
--- /dev/null
+++ b/webapp/src/components/Modals/SetNameAsAliasModal/SetNameAsAliasModal.types.ts
@@ -0,0 +1,19 @@
+import { Dispatch } from 'redux'
+import { Profile } from '@dcl/schemas'
+import { ModalProps } from 'decentraland-dapps/dist/providers/ModalProvider/ModalProvider.types'
+import { WithAuthorizedActionProps } from 'decentraland-dapps/dist/containers/withAuthorizedAction'
+import { setProfileAvatarAliasRequest } from 'decentraland-dapps/dist/modules/profile/actions'
+
+export type Props = ModalProps & {
+  isLoading: boolean
+  address?: string
+  profile: Profile | undefined
+  metadata: {
+    name: string
+  }
+  onSubmit: typeof setProfileAvatarAliasRequest
+} & WithAuthorizedActionProps
+
+export type MapState = Pick<Props, 'address' | 'isLoading' | 'profile'>
+export type MapDispatch = Dispatch
+export type MapDispatchProps = Pick<Props, 'onSubmit'>
diff --git a/webapp/src/components/Modals/SetNameAsAliasModal/index.ts b/webapp/src/components/Modals/SetNameAsAliasModal/index.ts
new file mode 100644
index 0000000000..e059a099ba
--- /dev/null
+++ b/webapp/src/components/Modals/SetNameAsAliasModal/index.ts
@@ -0,0 +1,2 @@
+import SetNameAsAliasModal from './SetNameAsAliasModal.container'
+export default SetNameAsAliasModal
diff --git a/webapp/src/components/Modals/index.ts b/webapp/src/components/Modals/index.ts
index 04669e3beb..44ccf9a3b3 100644
--- a/webapp/src/components/Modals/index.ts
+++ b/webapp/src/components/Modals/index.ts
@@ -21,3 +21,5 @@ export {
   BuyNFTWithCryptoModalContainer as BuyNFTWithCryptoModal,
   MintNFTWithCryptoModalConatiner as MintNFTWithCryptoModal
 } from './BuyWithCryptoModal'
+export { default as ClaimNameFatFingerModal } from './ClaimNameFatFingerModal'
+export { default as SetNameAsAliasModal } from './SetNameAsAliasModal'
diff --git a/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.container.tsx b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.container.tsx
new file mode 100644
index 0000000000..5818891fb5
--- /dev/null
+++ b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.container.tsx
@@ -0,0 +1,35 @@
+import { connect } from 'react-redux'
+import { push, replace } from 'connected-react-router'
+import { Network } from '@dcl/schemas'
+import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
+import {
+  getMana,
+  getWallet,
+  isConnecting
+} from '../../../modules/wallet/selectors'
+import { locations } from '../../../modules/routing/locations'
+import { Section } from '../../../modules/vendor/decentraland'
+import { BrowseOptions } from '../../../modules/routing/types'
+import {
+  MapDispatch,
+  MapDispatchProps,
+  MapStateProps
+} from './ClaimNamePage.types'
+import { RootState } from '../../../modules/reducer'
+import ClaimNamePage from './ClaimNamePage'
+
+const mapState = (state: RootState): MapStateProps => ({
+  currentMana: getMana(state, Network.ETHEREUM),
+  isConnecting: isConnecting(state),
+  wallet: getWallet(state)
+})
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onBrowse: (options?: BrowseOptions) =>
+    dispatch(push(locations.names({ ...options, section: Section.ENS }))),
+  onClaim: (name: string) =>
+    dispatch(openModal('ClaimNameFatFingerModal', { name })),
+  onRedirect: path => dispatch(replace(path))
+})
+
+export default connect(mapState, mapDispatch)(ClaimNamePage)
diff --git a/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.module.css b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.module.css
new file mode 100644
index 0000000000..3e907cf91f
--- /dev/null
+++ b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.module.css
@@ -0,0 +1,525 @@
+.claimNamePageContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.claimNamePageContainer .card {
+  background-color: var(--card);
+  border-radius: 16px;
+  padding: 24px;
+  margin-top: 12px;
+}
+
+.claimNamePage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.claimNamePage .card.claimContainer :global(.dcl.close) {
+  position: absolute;
+  background: none;
+  right: 12px;
+  top: 12px;
+}
+
+.claimNamePage .buttons {
+  display: flex;
+  height: 100%;
+  padding: 46px 0;
+}
+
+.claimNamePage .buttons > div + div {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  text-align: start;
+  margin-left: 38px;
+  justify-content: center;
+}
+
+.claimNamePage .buttons > div + div :global(.ui.button:hover) {
+  background-color: white;
+  color: black;
+}
+
+.claimNamePage .buttons img {
+  padding-left: 44px;
+}
+
+.claimNamePage .buttons :global(.button) {
+  margin-top: 16px;
+}
+
+.claimNamePage .buttons :global(.ui.button + .ui.button) {
+  margin-left: 0;
+}
+
+.claimNamePage .availableContainer {
+  background-color: rgba(32, 17, 22, 0.75);
+  padding: 16px;
+  border-radius: 4px;
+  display: flex;
+  position: absolute;
+  top: 54px;
+  width: 100%;
+}
+
+.claimNamePage .cardsContainer button,
+.claimNamePage .cardsContainer :global(.ui.button.inverted) {
+  background-color: white;
+  color: #161518;
+  margin-top: 12px;
+}
+
+.claimNamePage .nameTakenCard {
+  display: flex;
+  align-items: center;
+  height: 250px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #ff2d55 0%, #c640cd 100%);
+  margin-right: 19px;
+  flex: 1;
+}
+
+.claimNamePage .manageNames {
+  display: flex;
+  align-items: center;
+  height: 250px;
+  border-radius: 8px;
+  background: linear-gradient(244deg, #ff2d55 -11.67%, #ffbc5b 88.23%);
+  flex: 1;
+}
+
+.claimNamePage > div + div {
+  display: flex;
+}
+
+.claimNamePage .marketplaceLinkContainer {
+  margin-left: 4px;
+  text-decoration: underline;
+  font-weight: bold;
+  color: white;
+  display: flex;
+}
+
+.claimNamePage .marketplaceLinkContainer :global(.icon) {
+  margin-left: 4px;
+}
+
+.claimNamePage .availableContainer :global(.check.icon::before) {
+  color: #34ce76;
+}
+
+.claimNamePage .availableContainer :global(.close.icon::before) {
+  color: #ff2d55;
+}
+
+.claimNamePage .nameCostNetwork {
+  color: #a09ba8;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.claimNamePage .nameCost {
+  margin-top: 74px;
+  transition: opacity 1s ease; /* Adjust the duration as needed */
+  position: relative;
+  margin-left: -14px;
+}
+
+.claimNamePage .mainContainer .claimContainer .nameCost img {
+  opacity: 1;
+  left: 100%;
+  top: 6px;
+  cursor: pointer;
+  margin-left: 4px;
+}
+
+.claimNamePage .nameCost :global(.dcl.mana .symbol) {
+  padding: 0;
+}
+
+.claimNamePage .fadeOut {
+  opacity: 0;
+}
+
+.claimNamePage .claimContainer {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--divider);
+  margin-right: 16px;
+  border-radius: 16px;
+  border: 3px solid var(--DCL-Gradients-Highlight-stroke, #ffbc5b);
+  background: linear-gradient(
+    116deg,
+    rgba(255, 188, 91, 0.1) 0%,
+    rgba(255, 45, 85, 0.1) 50.52%,
+    rgba(198, 64, 205, 0.1) 100%
+  );
+  width: 100%;
+  height: 524px;
+  position: relative;
+  align-items: center;
+}
+
+.claimNamePage .mainContainer .claimContainer {
+  position: relative;
+}
+
+.claimNamePage .mainContainer .imageContainer {
+  position: relative;
+  height: 192px;
+  display: flex;
+}
+
+.claimNamePage .mainContainer .imagePassportContainer {
+  display: flex;
+  flex-direction: column;
+  margin-top: auto;
+}
+
+.claimNamePage .mainContainer .claimContainer img {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 45px);
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.claimNamePage .mainContainer .claimContainer img.banner {
+  left: 90px;
+}
+
+.claimNamePage .claimContainer .banner {
+  height: 200px;
+}
+
+.claimNamePage .claimContainer img.visible {
+  opacity: 1;
+}
+
+.claimNamePage .claimContainer .passportLogo {
+  margin-top: 10px;
+}
+
+.claimNamePage .claimContainer h2 {
+  color: #fff;
+  font-size: 48px;
+  font-weight: 700;
+  line-height: normal;
+  margin-bottom: 8px;
+}
+
+.claimNamePage .claimContainer .subtitle {
+  font-size: 24px;
+  line-height: 36px;
+}
+
+.claimNamePage .claimInput {
+  position: relative;
+  display: flex;
+  margin-top: 40px;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  height: 46px;
+  cursor: pointer;
+}
+
+.claimNamePage .claimInput :global(.ui.input) {
+  align-items: baseline;
+}
+
+.claimNamePage .claimInput :global(.dcl.field.simple) {
+  display: flex;
+  align-items: center;
+  padding-left: 24px;
+  border: 1px solid var(--bluish-steel);
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  border-right: none;
+}
+
+.claimNamePage .claimContainer :global(.dcl.field .ui.input input::after) {
+  content: '.dcl.eth';
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  color: red; /* Suffix color */
+  background: white; /* Match input field background color */
+  padding: 0 12px; /* Suffix padding */
+  pointer-events: none; /* Ignore pointer events */
+}
+
+.claimNamePage .claimContainer :global(.dcl.field .ui.input input) {
+  border-bottom: 0;
+  padding: 0;
+}
+
+.claimNamePage .claimContainer .remainingCharactersContainer {
+  position: absolute;
+  right: 170px;
+  top: 13px;
+}
+
+.claimNamePage
+  .claimContainer
+  .remainingCharactersContainer
+  :global(.ui.tiny.active.inline.loader) {
+  margin-right: 12px;
+}
+
+.claimNamePage .claimContainer .remainingCharacters {
+  color: #a09ba8;
+  font-size: 12px;
+  font-weight: 700;
+  font-style: normal;
+  line-height: normal;
+  top: 13px;
+}
+
+.claimNamePage .claimContainer .inputSuffix {
+  color: #a09ba8;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.claimNamePage .claimContainer :global(.ui.primary.button) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.claimNamePage .claimContainer :global(.message) {
+  display: none;
+}
+
+.claimNamePage .mainContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.claimNamePage .ctasContainer {
+  text-align: center;
+  width: 100%;
+  margin-top: 40px;
+}
+
+.claimNamePage .ctasContainer h1 {
+  margin-bottom: 16px;
+}
+
+.claimNamePage .ctasContainer .cardsContainer {
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: column;
+  margin-bottom: 52px;
+}
+
+.claimNamePage .ctasContainer .card {
+  background-color: #242129;
+  height: 209px;
+  width: 305px;
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.claimNamePage .ctasContainer .card span {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.claimNamePage .ctasContainer .learnMore {
+  color: #ffa25a;
+}
+
+.claimNamePage .ctasContainer .voting {
+  color: #ecebed;
+}
+
+.claimNamePage .ctasContainer .nameLink {
+  color: #ecebed;
+  text-decoration: underline;
+}
+
+.claimNamePage .ctasContainer .card p {
+  color: #a09ba8;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  padding-top: 2px;
+}
+
+.claimNamePage .ctasContainer .whyImgContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 103px;
+  background-color: #2d2c2f;
+}
+
+.claimNamePage .ctasContainer .whyImgContainer img {
+  height: 100%;
+}
+
+.claimNamePage .ctasContainer .whyTextContainer {
+  height: 116px;
+  text-align: left;
+  padding: 16px 12px;
+}
+
+.claimNamePage .ctasContainer .whyImgContainer.standOut {
+  align-items: flex-end;
+}
+
+.claimNamePage .warningIcon {
+  color: #ffa25a;
+  margin-right: 8px;
+}
+
+.claimNamePage .informationTooltip {
+  width: 14px;
+  height: 14px;
+}
+
+@media (max-width: 768px) {
+  .claimNamePage .claimContainer {
+    height: 587px;
+    margin: 0;
+    padding: 12px;
+  }
+
+  .claimNamePage .mainContainer .imageContainer {
+    height: 222px;
+  }
+
+  .claimNamePage .mainContainer:global(.ui.container) {
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 12px;
+  }
+
+  .claimNamePage .claimContainer h2 {
+    font-size: 30px;
+    text-align: center;
+  }
+
+  .claimNamePage .claimContainer .subtitle {
+    font-size: 20px;
+  }
+
+  .claimNamePage .ctasContainer .cardsContainer {
+    width: 100%;
+    overflow-x: scroll;
+    padding: 0 16px;
+  }
+
+  .claimNamePage .ctasContainer .cardsContainer:last-of-type {
+    grid-auto-flow: row;
+    overflow: visible;
+  }
+
+  .claimNamePage .nameTakenCard {
+    margin-right: 0;
+    margin-bottom: 16px;
+    justify-content: center;
+    height: unset;
+    padding: 0 12px;
+  }
+
+  .claimNamePage .nameTakenCard .buttons,
+  .claimNamePage .manageNames .buttons {
+    flex-direction: column;
+  }
+
+  .claimNamePage .manageNames .buttons,
+  .claimNamePage .nameTakenCard .buttons div {
+    align-items: center;
+  }
+
+  .claimNamePage .buttons > div + div {
+    margin-left: 0;
+  }
+
+  .claimNamePage .nameTakenCard .buttons div button {
+    margin-top: 28px;
+  }
+
+  .claimNamePage .claimInput {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .claimNamePage .claimContainer .remainingCharactersContainer {
+    right: 12px;
+    top: 6px;
+  }
+
+  .claimNamePage .claimContainer :global(.ui.primary.button) {
+    min-height: 48px;
+    border-radius: 6px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  .claimNamePage .claimInput :global(.dcl.field.simple) {
+    min-height: 100%;
+    min-width: 100%;
+    border: 1px solid var(--bluish-steel);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: none;
+  }
+
+  .claimNamePage .nameCost {
+    text-align: center;
+    margin-top: 72px;
+    margin-left: 0;
+  }
+
+  .claimNamePage .mainContainer .claimContainer .nameCost img {
+    left: 92%;
+  }
+
+  .claimNamePage .mainContainer .claimContainer img.banner {
+    left: 0;
+    width: 340px;
+    height: 129px;
+    top: 50px;
+  }
+
+  .claimNamePage .mainContainer .ctasContainer .card {
+    margin-right: 20px;
+  }
+
+  .claimNamePage .manageNames {
+    justify-content: center;
+    height: unset;
+    padding: 0 12px;
+  }
+
+  .claimNamePage .buttons img {
+    padding-left: 0;
+  }
+
+  .claimNamePage .availableContainer {
+    top: 97px;
+  }
+
+  .claimNamePage .ctasContainer .card {
+    min-width: 305px;
+  }
+}
diff --git a/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.spec.tsx b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.spec.tsx
new file mode 100644
index 0000000000..7f15a650ab
--- /dev/null
+++ b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.spec.tsx
@@ -0,0 +1,157 @@
+import { fireEvent, waitFor } from '@testing-library/react'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
+import { renderWithProviders } from '../../../utils/test'
+import { MAX_NAME_SIZE, isNameAvailable } from '../../../modules/ens/utils'
+import { Props } from './ClaimNamePage.types'
+import ClaimNamePage from './ClaimNamePage'
+
+jest.mock('../../../modules/ens/utils', () => ({
+  ...jest.requireActual('../../../modules/ens/utils'),
+  isNameAvailable: jest.fn()
+}))
+
+describe('ClaimNamePage', () => {
+  let walletMock: Wallet
+  let currentManaMock: number
+  let onBrowseMock: Props['onBrowse']
+  let onClaimMock: Props['onClaim']
+  let onRedirectMock: Props['onRedirect']
+
+  const renderAndTypeText = async (text: string) => {
+    const matchers = renderWithProviders(
+      <ClaimNamePage
+        currentMana={currentManaMock}
+        wallet={walletMock}
+        isConnecting={false}
+        onClaim={onClaimMock}
+        onBrowse={onBrowseMock}
+        onRedirect={onRedirectMock}
+      />
+    )
+    const { getByDisplayValue, getByText } = matchers
+    const nameInput = getByDisplayValue(
+      t('names_page.your_name')
+    ) as HTMLInputElement
+    fireEvent.change(nameInput, { target: { value: text } })
+
+    await waitFor(() => {
+      expect(nameInput.value).toBe(text)
+    })
+
+    const claimButton = getByText(t('names_page.claim_a_name'))
+    expect(claimButton).toHaveAttribute('disabled')
+
+    return matchers
+  }
+
+  describe('when typing an invalid NAME', () => {
+    let invalidName: string
+    describe('and the name has a not supported character', () => {
+      beforeEach(() => {
+        invalidName = 'test!'
+      })
+      it('should have the claim name disabled and show the proper warning message', async () => {
+        const { getByText } = await renderAndTypeText(invalidName)
+
+        expect(
+          getByText(t('names_page.invalid_characters'))
+        ).toBeInTheDocument()
+      })
+    })
+    describe('and the name has a space', () => {
+      beforeEach(() => {
+        invalidName = 'te st'
+      })
+      it('should have the claim name disabled and show the proper warning message', async () => {
+        const { getByText } = await renderAndTypeText(invalidName)
+
+        expect(getByText(t('names_page.has_spaces'))).toBeInTheDocument()
+      })
+    })
+    describe('and the name is too short', () => {
+      beforeEach(() => {
+        invalidName = 't'
+      })
+      it('should have the claim name disabled and show the proper warning message', async () => {
+        const { getByText } = await renderAndTypeText(invalidName)
+
+        expect(getByText(t('names_page.name_too_short'))).toBeInTheDocument()
+      })
+    })
+    describe('and the name is too long', () => {
+      beforeEach(() => {
+        invalidName = Array(MAX_NAME_SIZE + 1)
+          .fill('t')
+          .toString()
+      })
+      it('should have the claim name disabled and show the proper warning message', async () => {
+        const { getByText } = await renderAndTypeText(invalidName)
+
+        expect(getByText(t('names_page.name_too_long'))).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('when typing a valid NAME', () => {
+    let validName: string
+    beforeEach(() => {
+      validName = 'test'
+    })
+
+    describe('and its available', () => {
+      beforeEach(() => {
+        ;(isNameAvailable as jest.Mock).mockResolvedValue(true)
+      })
+      describe('and has enough funds to claim the NAME', () => {
+        beforeEach(() => {
+          currentManaMock = 100
+          walletMock = {} as Wallet
+          onClaimMock = jest.fn()
+        })
+        it('should have the claim name enabled and call the onClaim when clicking it', async () => {
+          const { getByText } = await renderAndTypeText(validName)
+          const claimButton = getByText(t('names_page.claim_a_name'))
+          await waitFor(() =>
+            expect(claimButton).not.toHaveAttribute('disabled')
+          )
+          fireEvent.click(claimButton)
+          await waitFor(() =>
+            expect(onClaimMock).toHaveBeenCalledWith(validName)
+          )
+        })
+      })
+      describe('and does not have enough funds to claim the NAME', () => {
+        beforeEach(() => {
+          currentManaMock = 99 // 100 is the mana needed
+          walletMock = {} as Wallet
+          onClaimMock = jest.fn()
+        })
+        it('should have the claim name disabled and not call the onClaim when clicking it', async () => {
+          const { getByText } = await renderAndTypeText(validName)
+          const claimButton = getByText(t('names_page.claim_a_name'))
+          await waitFor(() => expect(claimButton).toHaveAttribute('disabled'))
+          fireEvent.click(claimButton)
+          await waitFor(() =>
+            expect(onClaimMock).not.toHaveBeenCalledWith(validName)
+          )
+        })
+      })
+    })
+
+    describe('and its not available', () => {
+      beforeEach(() => {
+        ;(isNameAvailable as jest.Mock).mockResolvedValue(false)
+      })
+      it('should have the claim name disabled', async () => {
+        const { getByText } = await renderAndTypeText(validName)
+
+        await waitFor(() =>
+          expect(getByText(t('names_page.claim_a_name'))).toHaveAttribute(
+            'disabled'
+          )
+        )
+      })
+    })
+  })
+})
diff --git a/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.tsx b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.tsx
new file mode 100644
index 0000000000..d8b08ace40
--- /dev/null
+++ b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.tsx
@@ -0,0 +1,513 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import classNames from 'classnames'
+import {
+  Button,
+  Close,
+  Container,
+  Field,
+  Icon,
+  Loader,
+  Popup
+} from 'decentraland-ui'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import infoIcon from '../../../images/infoIcon.png'
+import ClaimNameImage from '../../../images/claim-name.svg'
+import ClaimNameBanner from '../../../images/claim-name-banner.png'
+import CreateImg from '../../../images/names/create.png'
+import GovernanceImg from '../../../images/names/governance.png'
+import LandmarkImg from '../../../images/names/landmark.png'
+import OwnSpaceImg from '../../../images/names/own-space.png'
+import Chest from '../../../images/names/chest.png'
+import Passports from '../../../images/names/passports.png'
+import { lists } from '../../../modules/vendor/decentraland/lists/api'
+import { SortBy } from '../../../modules/routing/types'
+import {
+  MAX_NAME_SIZE,
+  NameInvalidType,
+  getNameInvalidType,
+  hasNameMinLength,
+  isEnoughClaimMana,
+  isNameAvailable,
+  isNameValid
+} from '../../../modules/ens/utils'
+import { locations } from '../../../modules/routing/locations'
+import { Section } from '../../../modules/vendor/decentraland'
+import { NavigationTab } from '../../Navigation/Navigation.types'
+import { builderUrl } from '../../../lib/environment'
+import { Mana } from '../../Mana'
+import { Props } from './ClaimNamePage.types'
+import styles from './ClaimNamePage.module.css'
+import { PageLayout } from '../../PageLayout'
+
+const PLACEHOLDER_WIDTH = '94px'
+
+const ClaimNamePage = (props: Props) => {
+  const PLACEHOLDER_NAME = t('names_page.your_name')
+  const {
+    wallet,
+    isConnecting,
+    currentMana,
+    onClaim,
+    onBrowse,
+    onRedirect
+  } = props
+  const location = useLocation()
+  const [isLoadingStatus, setIsLoadingStatus] = useState(false)
+  const [bannedNames, setBannedNames] = useState<string[]>()
+  const [isAvailable, setIsAvailable] = useState<boolean | undefined>(undefined)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const bannedNames = await lists.fetchBannedNames()
+        setBannedNames(bannedNames)
+      } catch (error) {}
+    })()
+  }, [])
+
+  const [name, setName] = useState(PLACEHOLDER_NAME)
+
+  const handleNameChange = useCallback(
+    async text => {
+      const valid = isNameValid(text)
+      const minLength = hasNameMinLength(text)
+      if (valid && minLength) {
+        try {
+          if (bannedNames?.includes(text.toLocaleLowerCase())) {
+            setIsAvailable(undefined)
+          } else {
+            const isAvailable = await isNameAvailable(text)
+            setIsAvailable(isAvailable)
+          }
+          setIsLoadingStatus(false)
+        } catch (error) {
+          console.log('error: ', error)
+          setIsLoadingStatus(false)
+        }
+      }
+    },
+    [bannedNames]
+  )
+
+  const handleDebouncedChange = useCallback(
+    text => {
+      setName(text)
+      const timeoutId = setTimeout(() => {
+        if (debounceRef.current === timeoutId) {
+          handleNameChange(text)
+        }
+      }, 1000)
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+      }
+      debounceRef.current = timeoutId
+    },
+    [handleNameChange]
+  )
+
+  useEffect(() => {
+    if (
+      name !== PLACEHOLDER_NAME &&
+      name.length &&
+      hasNameMinLength(name) &&
+      isNameValid(name)
+    ) {
+      setIsLoadingStatus(true)
+    } else if (!isNameValid(name)) {
+      // turn off loading if an invalid character is typed
+      setIsLoadingStatus(false)
+    }
+  }, [PLACEHOLDER_NAME, name])
+
+  const handleClaim = useCallback(() => {
+    if (!isConnecting && !wallet) {
+      onRedirect(locations.signIn(`${location.pathname}`))
+    } else {
+      const isValid = isNameValid(name)
+      const isEnoughMana =
+        wallet && currentMana && isEnoughClaimMana(currentMana)
+
+      if (!isValid || !isEnoughMana) return
+
+      onClaim(name)
+    }
+  }, [
+    isConnecting,
+    wallet,
+    name,
+    currentMana,
+    onClaim,
+    onRedirect,
+    location.pathname
+  ])
+
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [inputWidth, setInputWidth] = useState(PLACEHOLDER_WIDTH)
+
+  // this fn is used to update the width of the input field so it has the suffix in the right place
+  const updateWidth = (value: string) => {
+    if (inputRef.current) {
+      // Use a temporary span to measure the width of the input's content
+      const tempSpan = document.createElement('span')
+      tempSpan.innerHTML = value
+      // Apply same font properties to the span
+      tempSpan.style.fontSize = getComputedStyle(inputRef.current).fontSize
+      tempSpan.style.fontFamily = getComputedStyle(inputRef.current).fontFamily
+      tempSpan.style.visibility = 'hidden' // Hide the span element
+      document.body.appendChild(tempSpan)
+      // Update the width state to the width of the content plus a little extra space
+      setInputWidth(`${tempSpan.offsetWidth + 2}px`)
+      document.body.removeChild(tempSpan) // Clean up
+    }
+  }
+
+  const [isInputFocus, setIsInputFocus] = useState(false)
+
+  const onFieldClick = useCallback(() => {
+    inputRef.current?.focus()
+    setIsInputFocus(true)
+  }, [])
+
+  const onFieldFocus = useCallback(() => {
+    const inputValue = inputRef.current?.value
+    if (inputValue === PLACEHOLDER_NAME) {
+      setName('')
+    }
+  }, [PLACEHOLDER_NAME])
+
+  const renderRemainingCharacters = useCallback(() => {
+    if (name !== PLACEHOLDER_NAME) {
+      return (
+        <span
+          className={styles.remainingCharacters}
+        >{`${name.length}/${MAX_NAME_SIZE}`}</span>
+      )
+    }
+  }, [PLACEHOLDER_NAME, name])
+
+  const nameInvalidType = useMemo(() => {
+    return getNameInvalidType(name)
+  }, [name])
+
+  const onFieldChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      handleDebouncedChange(event.target.value)
+      updateWidth(event.target.value)
+    },
+    [handleDebouncedChange]
+  )
+
+  const cards = useMemo(() => {
+    return [
+      {
+        image: CreateImg,
+        title: t('names_page.why.stand_out.title'),
+        description: t('names_page.why.stand_out.description'),
+        className: styles.standOut
+      },
+      {
+        image: OwnSpaceImg,
+        title: t('names_page.why.unlock.title'),
+        description: t('names_page.why.unlock.description', {
+          link: (
+            <a
+              href="https://decentraland.org/blog/about-decentraland/decentraland-worlds-your-own-virtual-space"
+              className={styles.learnMore}
+            >
+              {t('global.learn_more')}
+            </a>
+          )
+        })
+      },
+      {
+        image: GovernanceImg,
+        title: t('names_page.why.governance.title'),
+        description: t('names_page.why.governance.description', {
+          b: (children: React.ReactChildren) => (
+            <b className={styles.voting}>{children}</b>
+          ),
+          link: (
+            <a
+              href="https://docs.decentraland.org/player/general/dao/overview/what-is-the-dao"
+              className={styles.learnMore}
+            >
+              {t('global.learn_more')}
+            </a>
+          )
+        })
+      },
+      {
+        image: LandmarkImg,
+        title: t('names_page.why.get_url.title'),
+        description: t('names_page.why.get_url.description', {
+          b: (children: React.ReactChildren) => (
+            <b className={styles.nameLink}>{children}</b>
+          )
+        })
+      }
+    ]
+  }, [])
+
+  return (
+    <PageLayout activeTab={NavigationTab.NAMES}>
+      <div className={styles.claimNamePageContainer}>
+        <div className={styles.claimNamePage}>
+          <Container className={styles.mainContainer}>
+            <div className={classNames(styles.claimContainer, styles.card)}>
+              {isInputFocus ? (
+                <Close onClick={() => setIsInputFocus(false)} />
+              ) : null}
+              <div className={styles.imageContainer}>
+                <div className={styles.imagePassportContainer}>
+                  <img
+                    className={classNames(
+                      !isInputFocus && styles.visible,
+                      styles.passportLogo
+                    )}
+                    src={ClaimNameImage}
+                    alt="Claim name"
+                  />
+                  <h2 className={classNames(isInputFocus && styles.fadeOut)}>
+                    {t('names_page.title')}
+                  </h2>
+                </div>
+                <img
+                  className={classNames(
+                    styles.banner,
+                    isInputFocus && styles.visible
+                  )}
+                  src={ClaimNameBanner}
+                  alt="Banner"
+                />
+              </div>
+
+              <span className={styles.subtitle}>
+                {t('names_page.subtitle')}
+              </span>
+              <div className={styles.claimInput} onClick={onFieldClick}>
+                <Field
+                  onClick={onFieldClick}
+                  value={name}
+                  placeholder={t('names_page.name_placeholder')}
+                  action={`${name.length}/${MAX_NAME_SIZE}`}
+                  children={
+                    <>
+                      <input
+                        ref={inputRef}
+                        value={name}
+                        style={{
+                          maxWidth: name.length ? inputWidth : '1px'
+                        }}
+                        onFocus={onFieldFocus}
+                        onChange={onFieldChange}
+                      />
+                      <span className={styles.inputSuffix}>.dcl.eth</span>
+                    </>
+                  }
+                />
+                <div className={styles.remainingCharactersContainer}>
+                  {isLoadingStatus ? (
+                    <Loader active inline size="tiny" />
+                  ) : null}
+                  {renderRemainingCharacters()}
+                </div>
+                <Popup
+                  className="modal-tooltip"
+                  content={t('names_page.not_enough_mana')}
+                  position="top center"
+                  trigger={
+                    <div className="popup-button">
+                      <Button
+                        primary
+                        onClick={handleClaim}
+                        disabled={
+                          !isAvailable ||
+                          nameInvalidType !== null ||
+                          (currentMana !== undefined &&
+                            !isEnoughClaimMana(currentMana))
+                        }
+                      >
+                        {t('names_page.claim_a_name')}
+                      </Button>
+                    </div>
+                  }
+                  disabled={
+                    !!(wallet && currentMana && isEnoughClaimMana(currentMana))
+                  }
+                  hideOnScroll={true}
+                  on="hover"
+                  inverted
+                />
+
+                {name &&
+                hasNameMinLength(name) &&
+                isNameValid(name) &&
+                isInputFocus &&
+                name !== PLACEHOLDER_NAME &&
+                isAvailable !== undefined &&
+                bannedNames !== undefined &&
+                !isLoadingStatus ? (
+                  <div className={styles.availableContainer}>
+                    {isAvailable ? (
+                      <>
+                        <Icon name="check" />
+                        {t('names_page.available')}
+                      </>
+                    ) : (
+                      <>
+                        <Icon name="close" />
+                        {t('names_page.not_available', {
+                          link: (
+                            <a
+                              className={styles.marketplaceLinkContainer}
+                              href={locations.names({
+                                search: name,
+                                onlyOnSale: false,
+                                sortBy: SortBy.NEWEST,
+                                section: Section.ENS
+                              })}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              {t('names_page.marketplace')}
+                              <Icon name="external" />
+                            </a>
+                          )
+                        })}
+                      </>
+                    )}
+                  </div>
+                ) : name && (!hasNameMinLength(name) || !isNameValid(name)) ? (
+                  <div className={styles.availableContainer}>
+                    <Icon
+                      className={styles.warningIcon}
+                      name={
+                        nameInvalidType === NameInvalidType.TOO_SHORT
+                          ? 'exclamation triangle'
+                          : 'close'
+                      }
+                    />
+                    {nameInvalidType === NameInvalidType.TOO_SHORT
+                      ? t('names_page.name_too_short')
+                      : nameInvalidType === NameInvalidType.TOO_LONG
+                      ? t('names_page.name_too_long')
+                      : nameInvalidType === NameInvalidType.HAS_SPACES
+                      ? t('names_page.has_spaces')
+                      : t('names_page.invalid_characters')}
+                  </div>
+                ) : null}
+              </div>
+
+              <span
+                className={classNames(
+                  styles.nameCost,
+                  isInputFocus && styles.fadeOut
+                )}
+              >
+                {t('names_page.name_cost', {
+                  mana: (
+                    <>
+                      <Mana inline /> 100 MANA
+                    </>
+                  ),
+                  network: (
+                    <span className={styles.nameCostNetwork}>
+                      {t('names_page.ethereum_mainnet_network')}
+                    </span>
+                  )
+                })}
+                <Popup
+                  content={t('names_page.dao_tooltip', {
+                    link: (
+                      <a
+                        href="https://decentraland.zone/governance/proposal/?id=a3bdc100-9b34-11ed-ae61-5f6dd0bf8358"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {t('global.learn_more')}
+                      </a>
+                    )
+                  })}
+                  position="top center"
+                  hoverable
+                  mouseLeaveDelay={500}
+                  trigger={
+                    <img
+                      src={infoIcon}
+                      alt="info"
+                      className={styles.informationTooltip}
+                    />
+                  }
+                  on="hover"
+                />
+              </span>
+            </div>
+            <div className={styles.ctasContainer}>
+              <h1>{t('names_page.why_names')}</h1>
+              <div className={styles.cardsContainer}>
+                {cards.map((card, index) => (
+                  <div key={index} className={styles.card}>
+                    <div
+                      className={classNames(
+                        styles.whyImgContainer,
+                        card.className
+                      )}
+                    >
+                      <img src={card.image} alt={card.title} />
+                    </div>
+                    <div className={styles.whyTextContainer}>
+                      <span>{card.title}</span>
+                      <p>{card.description}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className={styles.cardsContainer}>
+                <div className={styles.nameTakenCard}>
+                  <div className={styles.buttons}>
+                    <div>
+                      <img src={Chest} alt="Chest" />
+                    </div>
+                    <div>
+                      <h2> {t('names_page.ctas.name_taken.title')}</h2>
+                      <span>
+                        {' '}
+                        {t('names_page.ctas.name_taken.description')}
+                      </span>
+                      <Button onClick={() => onBrowse()}>
+                        {t('names_page.browse_names_being_resold')}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+                <div className={styles.manageNames}>
+                  <div className={styles.buttons}>
+                    <div>
+                      <img src={Passports} alt="passports" />
+                    </div>
+                    <div style={{ justifyContent: 'center' }}>
+                      <h2> {t('names_page.ctas.manage.title')}</h2>
+                      <Button
+                        inverted
+                        as={'a'}
+                        target="_blank"
+                        href={`${builderUrl}/claim-name`}
+                      >
+                        {t('names_page.manage_your_names')}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Container>
+        </div>
+      </div>
+    </PageLayout>
+  )
+}
+
+export default React.memo(ClaimNamePage)
diff --git a/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.types.ts b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.types.ts
new file mode 100644
index 0000000000..16c0865a8e
--- /dev/null
+++ b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.types.ts
@@ -0,0 +1,24 @@
+import { Dispatch } from 'react'
+import { CallHistoryMethodAction } from 'connected-react-router'
+import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
+import { OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
+import { BrowseOptions } from '../../../modules/routing/types'
+
+export type Props = {
+  currentMana: number | undefined
+  wallet: Wallet | null
+  isConnecting: boolean
+  onBrowse: (options?: BrowseOptions) => void
+  onClaim: (name: string) => void
+  onRedirect: (path: string) => void
+}
+
+export type MapStateProps = Pick<
+  Props,
+  'currentMana' | 'wallet' | 'isConnecting'
+>
+export type MapDispatchProps = Pick<
+  Props,
+  'onBrowse' | 'onClaim' | 'onRedirect'
+>
+export type MapDispatch = Dispatch<CallHistoryMethodAction | OpenModalAction>
diff --git a/webapp/src/components/NamesPage/ClaimNamePage/index.ts b/webapp/src/components/NamesPage/ClaimNamePage/index.ts
new file mode 100644
index 0000000000..5c7c6cb58f
--- /dev/null
+++ b/webapp/src/components/NamesPage/ClaimNamePage/index.ts
@@ -0,0 +1,2 @@
+import ClaimNamePage from './ClaimNamePage.container'
+export { ClaimNamePage }
diff --git a/webapp/src/components/NamesPage/NamesPage.module.css b/webapp/src/components/NamesPage/NamesPage.module.css
new file mode 100644
index 0000000000..9394069b8c
--- /dev/null
+++ b/webapp/src/components/NamesPage/NamesPage.module.css
@@ -0,0 +1,4 @@
+.namesPageContainer {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/webapp/src/components/NamesPage/NamesPage.tsx b/webapp/src/components/NamesPage/NamesPage.tsx
new file mode 100644
index 0000000000..16663816a9
--- /dev/null
+++ b/webapp/src/components/NamesPage/NamesPage.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { VendorName } from '../../modules/vendor/types'
+import { View } from '../../modules/ui/types'
+import { NavigationTab } from '../Navigation/Navigation.types'
+import { Section } from '../../modules/vendor/decentraland'
+import { AssetBrowse } from '../AssetBrowse'
+import { PageLayout } from '../PageLayout'
+
+const NamesPage = () => {
+  return (
+    <PageLayout activeTab={NavigationTab.NAMES}>
+      <AssetBrowse
+        vendor={VendorName.DECENTRALAND}
+        view={View.MARKET}
+        section={Section.ENS}
+        sections={[Section.ENS]}
+      />
+    </PageLayout>
+  )
+}
+
+export default React.memo(NamesPage)
diff --git a/webapp/src/components/NamesPage/NamesPage.types.ts b/webapp/src/components/NamesPage/NamesPage.types.ts
new file mode 100644
index 0000000000..808d48c15c
--- /dev/null
+++ b/webapp/src/components/NamesPage/NamesPage.types.ts
@@ -0,0 +1,7 @@
+export type Props = {
+  isFullscreen: boolean
+  isMap: boolean
+  onBrowse: () => void
+}
+
+export type MapStateProps = Pick<Props, 'isMap' | 'isFullscreen'>
diff --git a/webapp/src/components/NamesPage/index.ts b/webapp/src/components/NamesPage/index.ts
new file mode 100644
index 0000000000..7a8f04630a
--- /dev/null
+++ b/webapp/src/components/NamesPage/index.ts
@@ -0,0 +1,2 @@
+import NamesPage from './NamesPage'
+export { NamesPage }
diff --git a/webapp/src/components/Navigation/Navigation.tsx b/webapp/src/components/Navigation/Navigation.tsx
index 6b6e93fd6e..5471080873 100644
--- a/webapp/src/components/Navigation/Navigation.tsx
+++ b/webapp/src/components/Navigation/Navigation.tsx
@@ -83,6 +83,11 @@ const Navigation = (props: Props) => {
               {t('navigation.land')}
             </Tabs.Tab>
           </Link>
+          <Link to={locations.claimName()}>
+            <Tabs.Tab active={activeTab === NavigationTab.NAMES}>
+              {t('navigation.names')}
+            </Tabs.Tab>
+          </Link>
           <Link to={locations.defaultCurrentAccount()}>
             <Tabs.Tab active={activeTab === NavigationTab.MY_STORE}>
               {t('navigation.my_assets')}
diff --git a/webapp/src/components/Navigation/Navigation.types.ts b/webapp/src/components/Navigation/Navigation.types.ts
index b7496fbd08..b7fba98853 100644
--- a/webapp/src/components/Navigation/Navigation.types.ts
+++ b/webapp/src/components/Navigation/Navigation.types.ts
@@ -9,6 +9,7 @@ export enum NavigationTab {
   OVERVIEW = 'overview',
   CAMPAIGN_BROWSER = 'campaign-browser',
   LANDS = 'lands',
+  NAMES = 'names',
   BROWSE = 'browse',
   COLLECTIBLES = 'collectibles',
   MY_STORE = 'my_store',
diff --git a/webapp/src/components/Routes/Routes.tsx b/webapp/src/components/Routes/Routes.tsx
index 64b5dfeac6..0898856702 100644
--- a/webapp/src/components/Routes/Routes.tsx
+++ b/webapp/src/components/Routes/Routes.tsx
@@ -21,6 +21,7 @@ import { ActivityPage } from '../ActivityPage'
 import { HomePage } from '../HomePage'
 import { LegacyNFTPage } from '../LegacyNFTPage'
 import { LandsPage } from '../LandsPage'
+import { NamesPage } from '../NamesPage'
 import { CollectionPage } from '../CollectionPage'
 import { Navbar } from '../Navbar'
 import { ManageAssetPage } from '../ManageAssetPage'
@@ -31,6 +32,7 @@ import { StatusPage } from '../BuyPage/StatusPage'
 import { ListPage } from '../ListPage'
 import { ProtectedRoute } from '../ProtectedRoute'
 import { ListsPage } from '../ListsPage'
+import { ClaimNamePage } from '../NamesPage/ClaimNamePage'
 import { Props } from './Routes.types'
 
 const Routes = ({ inMaintenance }: Props) => {
@@ -61,6 +63,8 @@ const Routes = ({ inMaintenance }: Props) => {
     <>
       <Switch>
         <Route exact path={locations.lands()} component={LandsPage} />
+        <Route exact path={locations.claimName()} component={ClaimNamePage} />
+        <Route exact path={locations.names()} component={NamesPage} />
         <Route exact path={locations.browse()} component={BrowsePage} />
         <Route path={locations.campaign()} component={CampaignBrowserPage} />
         <Route
diff --git a/webapp/src/components/SuccessPage/SuccessPage.container.ts b/webapp/src/components/SuccessPage/SuccessPage.container.ts
index 9fbe06978c..6c27dd253f 100644
--- a/webapp/src/components/SuccessPage/SuccessPage.container.ts
+++ b/webapp/src/components/SuccessPage/SuccessPage.container.ts
@@ -1,24 +1,36 @@
 import { connect } from 'react-redux'
+import { Dispatch } from 'redux'
 import { getSearch } from 'connected-react-router'
 import { ChainId } from '@dcl/schemas'
+import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { getTransaction } from 'decentraland-dapps/dist/modules/transaction/selectors'
 import { TransactionStatus } from 'decentraland-dapps/dist/modules/transaction/types'
+import { getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { getProfileOfAddress } from 'decentraland-dapps/dist/modules/profile/selectors'
 import { RootState } from '../../modules/reducer'
 import { getTokenIdFromLogs } from './utils'
-import {
-  MapStateProps,
-} from './SuccessPage.types'
+import { MapDispatchProps, MapStateProps } from './SuccessPage.types'
 import { SuccessPage } from './SuccessPage'
 
 const mapState = (state: RootState): MapStateProps => {
   const search = new URLSearchParams(getSearch(state))
   const transaction = getTransaction(state, search.get('txHash') || '')
+  const address = getAddress(state)
   return {
     isLoading: Boolean(
       transaction && transaction.status !== TransactionStatus.CONFIRMED
     ),
-    mintedTokenId: getTokenIdFromLogs(ChainId.MATIC_MUMBAI, transaction?.receipt?.logs)
+    mintedTokenId: getTokenIdFromLogs(
+      ChainId.MATIC_MUMBAI,
+      transaction?.receipt?.logs
+    ),
+    profile: !!address ? getProfileOfAddress(state, address) : undefined
   }
 }
 
-export default connect(mapState)(SuccessPage)
+const mapDispatch = (dispatch: Dispatch): MapDispatchProps => ({
+  onSetNameAsAlias: (name: string) =>
+    dispatch(openModal('SetNameAsAliasModal', { name }))
+})
+
+export default connect(mapState, mapDispatch)(SuccessPage)
diff --git a/webapp/src/components/SuccessPage/SuccessPage.spec.tsx b/webapp/src/components/SuccessPage/SuccessPage.spec.tsx
index 9a25b21127..12d70e51b7 100644
--- a/webapp/src/components/SuccessPage/SuccessPage.spec.tsx
+++ b/webapp/src/components/SuccessPage/SuccessPage.spec.tsx
@@ -1,5 +1,5 @@
 import { RenderResult } from '@testing-library/react'
-import { NFTCategory, Rarity } from '@dcl/schemas'
+import { NFTCategory, Profile, Rarity } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import {
   renderWithProviders,
@@ -22,20 +22,23 @@ jest.mock('react-router-dom', () => {
 
 jest.mock('lottie-react', () => () => <div>LOTTIE</div>)
 
-function renderSuccessPage(props: Partial<Props> = {}): RenderResult {
+function renderSuccessPage(
+  props: Partial<Props> = {},
+  preloadedNFTData?: Record<string, NFT>
+): RenderResult {
   return renderWithProviders(
     <SuccessPage isLoading={false} mintedTokenId={null} {...props} />,
     {
       preloadedState: {
         nft: {
-          data: {
+          data: preloadedNFTData || {
             'address-1': {
               data: {
                 wearable: {
                   rarity: Rarity.COMMON
                 }
               },
-              category: NFTCategory.WEARABLE,
+              category: NFTCategory.WEARABLE
             } as NFT
           },
           loading: [],
@@ -64,15 +67,83 @@ describe('when transaction is still loading', () => {
 })
 
 describe('when transaction finishes successfully', () => {
-  beforeEach(async () => {
+  beforeEach(() => {
     props = { isLoading: false }
-    screen = renderSuccessPage(props)
-    await waitForComponentToFinishLoading(screen)
   })
 
-  it('should render transaction confirmed message', () => {
-    expect(
-      screen.getByText(t('success_page.success_state.status'))
-    ).toBeInTheDocument()
+  describe('and its an ENS type of asset', () => {
+    describe('and the user has a profile set', () => {
+      beforeEach(async () => {
+        screen = renderSuccessPage(
+          {
+            ...props,
+            profile: {} as Profile
+          },
+          {
+            'address-1': {
+              data: {
+                ens: {
+                  subdomain: 'bondi'
+                }
+              },
+              category: NFTCategory.ENS
+            } as NFT
+          }
+        )
+        await waitForComponentToFinishLoading(screen)
+      })
+      it('should show the CTAs to mint more names and set as primary name', () => {
+        expect(
+          screen.getByText(t('success_page.success_state.mint_more_names'))
+        ).toBeInTheDocument()
+        expect(
+          screen.getByText(t('success_page.success_state.set_as_primary_name'))
+        ).toBeInTheDocument()
+      })
+    })
+    describe('and the user has not profile set yet', () => {
+      beforeEach(async () => {
+        screen = renderSuccessPage(
+          {
+            ...props,
+            profile: undefined
+          },
+          {
+            'address-1': {
+              data: {
+                ens: {
+                  subdomain: 'bondi'
+                }
+              },
+              category: NFTCategory.ENS
+            } as NFT
+          }
+        )
+        await waitForComponentToFinishLoading(screen)
+      })
+      it('should show the CTAs to mint more names only', () => {
+        expect(
+          screen.getByText(t('success_page.success_state.mint_more_names'))
+        ).toBeInTheDocument()
+        expect(
+          screen.queryByText(
+            t('success_page.success_state.set_as_primary_name')
+          )
+        ).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('and its not an ENS type of asset', () => {
+    beforeEach(async () => {
+      props = { isLoading: false }
+      screen = renderSuccessPage(props)
+      await waitForComponentToFinishLoading(screen)
+    })
+    it('should render transaction confirmed message', () => {
+      expect(
+        screen.getByText(t('success_page.success_state.status'))
+      ).toBeInTheDocument()
+    })
   })
 })
diff --git a/webapp/src/components/SuccessPage/SuccessPage.tsx b/webapp/src/components/SuccessPage/SuccessPage.tsx
index 6400c96654..8579482e66 100644
--- a/webapp/src/components/SuccessPage/SuccessPage.tsx
+++ b/webapp/src/components/SuccessPage/SuccessPage.tsx
@@ -18,7 +18,7 @@ import styles from './SuccessPage.module.css'
 const EXPLORER_URL = config.get('EXPLORER_URL', '')
 
 export function SuccessPage(props: Props) {
-  const { isLoading, mintedTokenId } = props
+  const { isLoading, mintedTokenId, profile, onSetNameAsAlias } = props
   const search = new URLSearchParams(useLocation().search)
   const contractAddress = search.get('contractAddress')
   const tokenId = search.get('tokenId')
@@ -84,7 +84,9 @@ export function SuccessPage(props: Props) {
                     {t('success_page.success_state.status')}
                   </span>
                   <div className={styles.actionContainer}>
-                    {assetType === AssetType.ITEM && !isLoading && mintedTokenId ? (
+                    {assetType === AssetType.ITEM &&
+                    !isLoading &&
+                    mintedTokenId ? (
                       <AssetProvider
                         retry
                         type={AssetType.NFT}
@@ -104,18 +106,44 @@ export function SuccessPage(props: Props) {
                         )}
                       </AssetProvider>
                     ) : (
-                      <Button
-                        as={Link}
-                        className={styles.successButton}
-                        secondary
-                        to={
-                          assetType === AssetType.ITEM
-                            ? locations.item(contractAddress, tokenId)
-                            : locations.nft(contractAddress, tokenId)
-                        }
-                      >
-                        {t('success_page.success_state.view_item')}
-                      </Button>
+                      <>
+                        {asset.category === NFTCategory.ENS ? (
+                          <>
+                            <Button
+                              as={Link}
+                              className={styles.successButton}
+                              secondary
+                              to={locations.claimName()}
+                            >
+                              {t('success_page.success_state.mint_more_names')}
+                            </Button>
+                            {!!profile && (
+                              <Button
+                                className={styles.successButton}
+                                primary
+                                onClick={() => onSetNameAsAlias(asset.name)}
+                              >
+                                {t(
+                                  'success_page.success_state.set_as_primary_name'
+                                )}
+                              </Button>
+                            )}
+                          </>
+                        ) : (
+                          <Button
+                            as={Link}
+                            className={styles.successButton}
+                            secondary
+                            to={
+                              assetType === AssetType.ITEM
+                                ? locations.item(contractAddress, tokenId)
+                                : locations.nft(contractAddress, tokenId)
+                            }
+                          >
+                            {t('success_page.success_state.view_item')}
+                          </Button>
+                        )}
+                      </>
                     )}
 
                     {(asset.category === NFTCategory.WEARABLE ||
diff --git a/webapp/src/components/SuccessPage/SuccessPage.types.ts b/webapp/src/components/SuccessPage/SuccessPage.types.ts
index 0ee247f01c..a5c01e211f 100644
--- a/webapp/src/components/SuccessPage/SuccessPage.types.ts
+++ b/webapp/src/components/SuccessPage/SuccessPage.types.ts
@@ -1,8 +1,12 @@
-import { BigNumber } from "ethers"
+import { BigNumber } from 'ethers'
+import { Profile } from '@dcl/schemas'
 
 export type Props = {
   isLoading: boolean
   mintedTokenId: BigNumber | null
+  onSetNameAsAlias: (name: string) => void
+  profile: Profile | undefined
 }
 
-export type MapStateProps = Pick<Props, 'isLoading' | 'mintedTokenId'>
+export type MapStateProps = Pick<Props, 'isLoading' | 'mintedTokenId' | 'profile'>
+export type MapDispatchProps = Pick<Props, 'onSetNameAsAlias'>
diff --git a/webapp/src/config/env/dev.json b/webapp/src/config/env/dev.json
index 0b8ca45e2b..868a666d28 100644
--- a/webapp/src/config/env/dev.json
+++ b/webapp/src/config/env/dev.json
@@ -29,6 +29,8 @@
   "MAX_PRICE_INCREASE_PERCENTAGE": "15",
   "MANA_ADDRESS": "0x2a8fd99c19271f4f04b1b7b9c4f7cf264b626edb",
   "CONVERTER_ADDRESS": "0x2782eb28Dcb1eF4E7632273cd4e347e130Ce4646",
+  "REGISTRAR_CONTRACT_ADDRESS": "0x7518456ae93eb98f3e64571b689c626616bb7f30",
+  "CONTROLLER_V2_CONTRACT_ADDRESS": "0xd2046364317c21fa8d121d84185c39e6e910cf89",
   "CONVERTER_EXCHANGE": "uniswap_v2",
   "INTERCOM_APP_ID": "z0h94kay",
   "SEGMENT_API_KEY": "gMnkewUBzA6J879kAtMvp2WhohEk36uy",
@@ -42,5 +44,6 @@
   "SUBGRAPH_WORKER": "https://subgraph.decentraland.zone",
   "SENTRY_DSN": "https://1dc401149e1c819b8477565c9cdd9b70@o4504361728212992.ingest.sentry.io/4505743351676928",
   "SQUID_API_URL": "https://testnet.v2.api.squidrouter.com/",
+  "DCL_LISTS_SERVER": "https://dcl-lists.decentraland.zone",
   "AUTH_URL": "/auth"
 }
diff --git a/webapp/src/config/env/prod.json b/webapp/src/config/env/prod.json
index 4c99ebf0d5..f630e038be 100644
--- a/webapp/src/config/env/prod.json
+++ b/webapp/src/config/env/prod.json
@@ -29,6 +29,8 @@
   "MAX_PRICE_INCREASE_PERCENTAGE": "15",
   "MANA_ADDRESS": "0x0f5d2fb29fb7d3cfee444a200298f468908cc942",
   "CONVERTER_ADDRESS": "0x2859581da59bd4e16a866dd06b461b76d8e489a4",
+  "REGISTRAR_CONTRACT_ADDRESS": "0x2a187453064356c898cae034eaed119e1663acb8",
+  "CONTROLLER_V2_CONTRACT_ADDRESS": "0xbe92b49aee993adea3a002adcda189a2b7dec56c",
   "CONVERTER_EXCHANGE": "uniswap_v2",
   "INTERCOM_APP_ID": "z0h94kay",
   "SEGMENT_API_KEY": "WijgHCmOGJjV04XBGghZGEadMD4454R3",
@@ -42,5 +44,6 @@
   "SUBGRAPH_WORKER": "https://subgraph.decentraland.org",
   "SENTRY_DSN": "https://1dc401149e1c819b8477565c9cdd9b70@o4504361728212992.ingest.sentry.io/4505743351676928",
   "SQUID_API_URL": "https://v2.api.squidrouter.com",
+  "DCL_LISTS_SERVER": "https://dcl-lists.decentraland.org",
   "AUTH_URL": "/auth"
 }
diff --git a/webapp/src/config/env/stg.json b/webapp/src/config/env/stg.json
index 3488adb55f..1ca5b8216b 100644
--- a/webapp/src/config/env/stg.json
+++ b/webapp/src/config/env/stg.json
@@ -29,6 +29,8 @@
   "MAX_PRICE_INCREASE_PERCENTAGE": "15",
   "MANA_ADDRESS": "0x0f5d2fb29fb7d3cfee444a200298f468908cc942",
   "CONVERTER_ADDRESS": "0x2859581da59bd4e16a866dd06b461b76d8e489a4",
+  "REGISTRAR_CONTRACT_ADDRESS": "0x7518456ae93eb98f3e64571b689c626616bb7f30",
+  "CONTROLLER_V2_CONTRACT_ADDRESS": "0xbe92b49aee993adea3a002adcda189a2b7dec56c",
   "CONVERTER_EXCHANGE": "uniswap_v2",
   "INTERCOM_APP_ID": "z0h94kay",
   "SEGMENT_API_KEY": "WijgHCmOGJjV04XBGghZGEadMD4454R3",
@@ -42,5 +44,6 @@
   "SUBGRAPH_WORKER": "https://subgraph.decentraland.today",
   "SENTRY_DSN": "https://1dc401149e1c819b8477565c9cdd9b70@o4504361728212992.ingest.sentry.io/4505743351676928",
   "SQUID_API_URL": "https://v2.api.squidrouter.com",
+  "DCL_LISTS_SERVER": "https://dcl-lists.decentraland.today",
   "AUTH_URL": "/auth"
 }
diff --git a/webapp/src/contracts/DCLController.ts b/webapp/src/contracts/DCLController.ts
new file mode 100644
index 0000000000..05f1a787b9
--- /dev/null
+++ b/webapp/src/contracts/DCLController.ts
@@ -0,0 +1,385 @@
+/* Autogenerated file. Do not edit manually. */
+/* tslint:disable */
+/* eslint-disable */
+import type {
+  BaseContract,
+  BigNumber,
+  BigNumberish,
+  BytesLike,
+  CallOverrides,
+  ContractTransaction,
+  Overrides,
+  PopulatedTransaction,
+  Signer,
+  utils,
+} from "ethers";
+import type {
+  FunctionFragment,
+  Result,
+  EventFragment,
+} from "@ethersproject/abi";
+import type { Listener, Provider } from "@ethersproject/providers";
+import type {
+  TypedEventFilter,
+  TypedEvent,
+  TypedListener,
+  OnEvent,
+  PromiseOrValue,
+} from "./common";
+
+export interface DCLControllerInterface extends utils.Interface {
+  functions: {
+    "PRICE()": FunctionFragment;
+    "acceptedToken()": FunctionFragment;
+    "isOwner()": FunctionFragment;
+    "maxGasPrice()": FunctionFragment;
+    "owner()": FunctionFragment;
+    "register(string,address)": FunctionFragment;
+    "registrar()": FunctionFragment;
+    "renounceOwnership()": FunctionFragment;
+    "transferOwnership(address)": FunctionFragment;
+    "updateMaxGasPrice(uint256)": FunctionFragment;
+  };
+
+  getFunction(
+    nameOrSignatureOrTopic:
+      | "PRICE"
+      | "acceptedToken"
+      | "isOwner"
+      | "maxGasPrice"
+      | "owner"
+      | "register"
+      | "registrar"
+      | "renounceOwnership"
+      | "transferOwnership"
+      | "updateMaxGasPrice"
+  ): FunctionFragment;
+
+  encodeFunctionData(functionFragment: "PRICE", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "acceptedToken",
+    values?: undefined
+  ): string;
+  encodeFunctionData(functionFragment: "isOwner", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "maxGasPrice",
+    values?: undefined
+  ): string;
+  encodeFunctionData(functionFragment: "owner", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "register",
+    values: [PromiseOrValue<string>, PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(functionFragment: "registrar", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "renounceOwnership",
+    values?: undefined
+  ): string;
+  encodeFunctionData(
+    functionFragment: "transferOwnership",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "updateMaxGasPrice",
+    values: [PromiseOrValue<BigNumberish>]
+  ): string;
+
+  decodeFunctionResult(functionFragment: "PRICE", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "acceptedToken",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "isOwner", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "maxGasPrice",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "owner", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "register", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "registrar", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "renounceOwnership",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "transferOwnership",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "updateMaxGasPrice",
+    data: BytesLike
+  ): Result;
+
+  events: {
+    "MaxGasPriceChanged(uint256,uint256)": EventFragment;
+    "NameBought(address,address,uint256,string)": EventFragment;
+    "OwnershipTransferred(address,address)": EventFragment;
+  };
+
+  getEvent(nameOrSignatureOrTopic: "MaxGasPriceChanged"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "NameBought"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "OwnershipTransferred"): EventFragment;
+}
+
+export interface MaxGasPriceChangedEventObject {
+  _oldMaxGasPrice: BigNumber;
+  _newMaxGasPrice: BigNumber;
+}
+export type MaxGasPriceChangedEvent = TypedEvent<
+  [BigNumber, BigNumber],
+  MaxGasPriceChangedEventObject
+>;
+
+export type MaxGasPriceChangedEventFilter =
+  TypedEventFilter<MaxGasPriceChangedEvent>;
+
+export interface NameBoughtEventObject {
+  _caller: string;
+  _beneficiary: string;
+  _price: BigNumber;
+  _name: string;
+}
+export type NameBoughtEvent = TypedEvent<
+  [string, string, BigNumber, string],
+  NameBoughtEventObject
+>;
+
+export type NameBoughtEventFilter = TypedEventFilter<NameBoughtEvent>;
+
+export interface OwnershipTransferredEventObject {
+  previousOwner: string;
+  newOwner: string;
+}
+export type OwnershipTransferredEvent = TypedEvent<
+  [string, string],
+  OwnershipTransferredEventObject
+>;
+
+export type OwnershipTransferredEventFilter =
+  TypedEventFilter<OwnershipTransferredEvent>;
+
+export interface DCLController extends BaseContract {
+  connect(signerOrProvider: Signer | Provider | string): this;
+  attach(addressOrName: string): this;
+  deployed(): Promise<this>;
+
+  interface: DCLControllerInterface;
+
+  queryFilter<TEvent extends TypedEvent>(
+    event: TypedEventFilter<TEvent>,
+    fromBlockOrBlockhash?: string | number | undefined,
+    toBlock?: string | number | undefined
+  ): Promise<Array<TEvent>>;
+
+  listeners<TEvent extends TypedEvent>(
+    eventFilter?: TypedEventFilter<TEvent>
+  ): Array<TypedListener<TEvent>>;
+  listeners(eventName?: string): Array<Listener>;
+  removeAllListeners<TEvent extends TypedEvent>(
+    eventFilter: TypedEventFilter<TEvent>
+  ): this;
+  removeAllListeners(eventName?: string): this;
+  off: OnEvent<this>;
+  on: OnEvent<this>;
+  once: OnEvent<this>;
+  removeListener: OnEvent<this>;
+
+  functions: {
+    PRICE(overrides?: CallOverrides): Promise<[BigNumber]>;
+
+    acceptedToken(overrides?: CallOverrides): Promise<[string]>;
+
+    isOwner(overrides?: CallOverrides): Promise<[boolean]>;
+
+    maxGasPrice(overrides?: CallOverrides): Promise<[BigNumber]>;
+
+    owner(overrides?: CallOverrides): Promise<[string]>;
+
+    register(
+      _name: PromiseOrValue<string>,
+      _beneficiary: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    registrar(overrides?: CallOverrides): Promise<[string]>;
+
+    renounceOwnership(
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    transferOwnership(
+      newOwner: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    updateMaxGasPrice(
+      _maxGasPrice: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+  };
+
+  PRICE(overrides?: CallOverrides): Promise<BigNumber>;
+
+  acceptedToken(overrides?: CallOverrides): Promise<string>;
+
+  isOwner(overrides?: CallOverrides): Promise<boolean>;
+
+  maxGasPrice(overrides?: CallOverrides): Promise<BigNumber>;
+
+  owner(overrides?: CallOverrides): Promise<string>;
+
+  register(
+    _name: PromiseOrValue<string>,
+    _beneficiary: PromiseOrValue<string>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  registrar(overrides?: CallOverrides): Promise<string>;
+
+  renounceOwnership(
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  transferOwnership(
+    newOwner: PromiseOrValue<string>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  updateMaxGasPrice(
+    _maxGasPrice: PromiseOrValue<BigNumberish>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  callStatic: {
+    PRICE(overrides?: CallOverrides): Promise<BigNumber>;
+
+    acceptedToken(overrides?: CallOverrides): Promise<string>;
+
+    isOwner(overrides?: CallOverrides): Promise<boolean>;
+
+    maxGasPrice(overrides?: CallOverrides): Promise<BigNumber>;
+
+    owner(overrides?: CallOverrides): Promise<string>;
+
+    register(
+      _name: PromiseOrValue<string>,
+      _beneficiary: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    registrar(overrides?: CallOverrides): Promise<string>;
+
+    renounceOwnership(overrides?: CallOverrides): Promise<void>;
+
+    transferOwnership(
+      newOwner: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    updateMaxGasPrice(
+      _maxGasPrice: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+  };
+
+  filters: {
+    "MaxGasPriceChanged(uint256,uint256)"(
+      _oldMaxGasPrice?: PromiseOrValue<BigNumberish> | null,
+      _newMaxGasPrice?: PromiseOrValue<BigNumberish> | null
+    ): MaxGasPriceChangedEventFilter;
+    MaxGasPriceChanged(
+      _oldMaxGasPrice?: PromiseOrValue<BigNumberish> | null,
+      _newMaxGasPrice?: PromiseOrValue<BigNumberish> | null
+    ): MaxGasPriceChangedEventFilter;
+
+    "NameBought(address,address,uint256,string)"(
+      _caller?: PromiseOrValue<string> | null,
+      _beneficiary?: PromiseOrValue<string> | null,
+      _price?: null,
+      _name?: null
+    ): NameBoughtEventFilter;
+    NameBought(
+      _caller?: PromiseOrValue<string> | null,
+      _beneficiary?: PromiseOrValue<string> | null,
+      _price?: null,
+      _name?: null
+    ): NameBoughtEventFilter;
+
+    "OwnershipTransferred(address,address)"(
+      previousOwner?: PromiseOrValue<string> | null,
+      newOwner?: PromiseOrValue<string> | null
+    ): OwnershipTransferredEventFilter;
+    OwnershipTransferred(
+      previousOwner?: PromiseOrValue<string> | null,
+      newOwner?: PromiseOrValue<string> | null
+    ): OwnershipTransferredEventFilter;
+  };
+
+  estimateGas: {
+    PRICE(overrides?: CallOverrides): Promise<BigNumber>;
+
+    acceptedToken(overrides?: CallOverrides): Promise<BigNumber>;
+
+    isOwner(overrides?: CallOverrides): Promise<BigNumber>;
+
+    maxGasPrice(overrides?: CallOverrides): Promise<BigNumber>;
+
+    owner(overrides?: CallOverrides): Promise<BigNumber>;
+
+    register(
+      _name: PromiseOrValue<string>,
+      _beneficiary: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    registrar(overrides?: CallOverrides): Promise<BigNumber>;
+
+    renounceOwnership(
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    transferOwnership(
+      newOwner: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    updateMaxGasPrice(
+      _maxGasPrice: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+  };
+
+  populateTransaction: {
+    PRICE(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    acceptedToken(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    isOwner(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    maxGasPrice(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    owner(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    register(
+      _name: PromiseOrValue<string>,
+      _beneficiary: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    registrar(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    renounceOwnership(
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    transferOwnership(
+      newOwner: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    updateMaxGasPrice(
+      _maxGasPrice: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+  };
+}
diff --git a/webapp/src/contracts/DCLRegistrar.ts b/webapp/src/contracts/DCLRegistrar.ts
new file mode 100644
index 0000000000..1d9c1f9712
--- /dev/null
+++ b/webapp/src/contracts/DCLRegistrar.ts
@@ -0,0 +1,1799 @@
+/* Autogenerated file. Do not edit manually. */
+/* tslint:disable */
+/* eslint-disable */
+import type {
+  BaseContract,
+  BigNumber,
+  BigNumberish,
+  BytesLike,
+  CallOverrides,
+  ContractTransaction,
+  Overrides,
+  PopulatedTransaction,
+  Signer,
+  utils,
+} from "ethers";
+import type {
+  FunctionFragment,
+  Result,
+  EventFragment,
+} from "@ethersproject/abi";
+import type { Listener, Provider } from "@ethersproject/providers";
+import type {
+  TypedEventFilter,
+  TypedEvent,
+  TypedListener,
+  OnEvent,
+  PromiseOrValue,
+} from "./common";
+
+export interface DCLRegistrarInterface extends utils.Interface {
+  functions: {
+    "ERC721_RECEIVED()": FunctionFragment;
+    "addController(address)": FunctionFragment;
+    "approve(address,uint256)": FunctionFragment;
+    "available(string)": FunctionFragment;
+    "balanceOf(address)": FunctionFragment;
+    "base()": FunctionFragment;
+    "baseURI()": FunctionFragment;
+    "controllers(address)": FunctionFragment;
+    "domain()": FunctionFragment;
+    "domainNameHash()": FunctionFragment;
+    "getApproved(uint256)": FunctionFragment;
+    "getOwnerOf(string)": FunctionFragment;
+    "getTokenId(string)": FunctionFragment;
+    "isApprovedForAll(address,address)": FunctionFragment;
+    "isOwner()": FunctionFragment;
+    "migrateNames(bytes32[],address[],uint256[])": FunctionFragment;
+    "migrated()": FunctionFragment;
+    "migrationFinished()": FunctionFragment;
+    "name()": FunctionFragment;
+    "onERC721Received(address,address,uint256,bytes)": FunctionFragment;
+    "owner()": FunctionFragment;
+    "ownerOf(uint256)": FunctionFragment;
+    "reclaim(uint256,address)": FunctionFragment;
+    "reclaimDomain(uint256)": FunctionFragment;
+    "register(string,address)": FunctionFragment;
+    "registry()": FunctionFragment;
+    "removeController(address)": FunctionFragment;
+    "renounceOwnership()": FunctionFragment;
+    "safeTransferFrom(address,address,uint256)": FunctionFragment;
+    "safeTransferFrom(address,address,uint256,bytes)": FunctionFragment;
+    "setApprovalForAll(address,bool)": FunctionFragment;
+    "subdomains(bytes32)": FunctionFragment;
+    "supportsInterface(bytes4)": FunctionFragment;
+    "symbol()": FunctionFragment;
+    "tokenByIndex(uint256)": FunctionFragment;
+    "tokenOfOwnerByIndex(address,uint256)": FunctionFragment;
+    "tokenURI(uint256)": FunctionFragment;
+    "topdomain()": FunctionFragment;
+    "topdomainNameHash()": FunctionFragment;
+    "totalSupply()": FunctionFragment;
+    "transferDomainOwnership(address,uint256)": FunctionFragment;
+    "transferFrom(address,address,uint256)": FunctionFragment;
+    "transferOwnership(address)": FunctionFragment;
+    "updateBase(address)": FunctionFragment;
+    "updateBaseURI(string)": FunctionFragment;
+    "updateRegistry(address)": FunctionFragment;
+  };
+
+  getFunction(
+    nameOrSignatureOrTopic:
+      | "ERC721_RECEIVED"
+      | "addController"
+      | "approve"
+      | "available"
+      | "balanceOf"
+      | "base"
+      | "baseURI"
+      | "controllers"
+      | "domain"
+      | "domainNameHash"
+      | "getApproved"
+      | "getOwnerOf"
+      | "getTokenId"
+      | "isApprovedForAll"
+      | "isOwner"
+      | "migrateNames"
+      | "migrated"
+      | "migrationFinished"
+      | "name"
+      | "onERC721Received"
+      | "owner"
+      | "ownerOf"
+      | "reclaim"
+      | "reclaimDomain"
+      | "register"
+      | "registry"
+      | "removeController"
+      | "renounceOwnership"
+      | "safeTransferFrom(address,address,uint256)"
+      | "safeTransferFrom(address,address,uint256,bytes)"
+      | "setApprovalForAll"
+      | "subdomains"
+      | "supportsInterface"
+      | "symbol"
+      | "tokenByIndex"
+      | "tokenOfOwnerByIndex"
+      | "tokenURI"
+      | "topdomain"
+      | "topdomainNameHash"
+      | "totalSupply"
+      | "transferDomainOwnership"
+      | "transferFrom"
+      | "transferOwnership"
+      | "updateBase"
+      | "updateBaseURI"
+      | "updateRegistry"
+  ): FunctionFragment;
+
+  encodeFunctionData(
+    functionFragment: "ERC721_RECEIVED",
+    values?: undefined
+  ): string;
+  encodeFunctionData(
+    functionFragment: "addController",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "approve",
+    values: [PromiseOrValue<string>, PromiseOrValue<BigNumberish>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "available",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "balanceOf",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(functionFragment: "base", values?: undefined): string;
+  encodeFunctionData(functionFragment: "baseURI", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "controllers",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(functionFragment: "domain", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "domainNameHash",
+    values?: undefined
+  ): string;
+  encodeFunctionData(
+    functionFragment: "getApproved",
+    values: [PromiseOrValue<BigNumberish>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "getOwnerOf",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "getTokenId",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "isApprovedForAll",
+    values: [PromiseOrValue<string>, PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(functionFragment: "isOwner", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "migrateNames",
+    values: [
+      PromiseOrValue<BytesLike>[],
+      PromiseOrValue<string>[],
+      PromiseOrValue<BigNumberish>[]
+    ]
+  ): string;
+  encodeFunctionData(functionFragment: "migrated", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "migrationFinished",
+    values?: undefined
+  ): string;
+  encodeFunctionData(functionFragment: "name", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "onERC721Received",
+    values: [
+      PromiseOrValue<string>,
+      PromiseOrValue<string>,
+      PromiseOrValue<BigNumberish>,
+      PromiseOrValue<BytesLike>
+    ]
+  ): string;
+  encodeFunctionData(functionFragment: "owner", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "ownerOf",
+    values: [PromiseOrValue<BigNumberish>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "reclaim",
+    values: [PromiseOrValue<BigNumberish>, PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "reclaimDomain",
+    values: [PromiseOrValue<BigNumberish>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "register",
+    values: [PromiseOrValue<string>, PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(functionFragment: "registry", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "removeController",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "renounceOwnership",
+    values?: undefined
+  ): string;
+  encodeFunctionData(
+    functionFragment: "safeTransferFrom(address,address,uint256)",
+    values: [
+      PromiseOrValue<string>,
+      PromiseOrValue<string>,
+      PromiseOrValue<BigNumberish>
+    ]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "safeTransferFrom(address,address,uint256,bytes)",
+    values: [
+      PromiseOrValue<string>,
+      PromiseOrValue<string>,
+      PromiseOrValue<BigNumberish>,
+      PromiseOrValue<BytesLike>
+    ]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "setApprovalForAll",
+    values: [PromiseOrValue<string>, PromiseOrValue<boolean>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "subdomains",
+    values: [PromiseOrValue<BytesLike>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "supportsInterface",
+    values: [PromiseOrValue<BytesLike>]
+  ): string;
+  encodeFunctionData(functionFragment: "symbol", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "tokenByIndex",
+    values: [PromiseOrValue<BigNumberish>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "tokenOfOwnerByIndex",
+    values: [PromiseOrValue<string>, PromiseOrValue<BigNumberish>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "tokenURI",
+    values: [PromiseOrValue<BigNumberish>]
+  ): string;
+  encodeFunctionData(functionFragment: "topdomain", values?: undefined): string;
+  encodeFunctionData(
+    functionFragment: "topdomainNameHash",
+    values?: undefined
+  ): string;
+  encodeFunctionData(
+    functionFragment: "totalSupply",
+    values?: undefined
+  ): string;
+  encodeFunctionData(
+    functionFragment: "transferDomainOwnership",
+    values: [PromiseOrValue<string>, PromiseOrValue<BigNumberish>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "transferFrom",
+    values: [
+      PromiseOrValue<string>,
+      PromiseOrValue<string>,
+      PromiseOrValue<BigNumberish>
+    ]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "transferOwnership",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "updateBase",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "updateBaseURI",
+    values: [PromiseOrValue<string>]
+  ): string;
+  encodeFunctionData(
+    functionFragment: "updateRegistry",
+    values: [PromiseOrValue<string>]
+  ): string;
+
+  decodeFunctionResult(
+    functionFragment: "ERC721_RECEIVED",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "addController",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "approve", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "available", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "balanceOf", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "base", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "baseURI", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "controllers",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "domain", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "domainNameHash",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "getApproved",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "getOwnerOf", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "getTokenId", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "isApprovedForAll",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "isOwner", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "migrateNames",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "migrated", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "migrationFinished",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "name", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "onERC721Received",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "owner", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "ownerOf", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "reclaim", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "reclaimDomain",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "register", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "registry", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "removeController",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "renounceOwnership",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "safeTransferFrom(address,address,uint256)",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "safeTransferFrom(address,address,uint256,bytes)",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "setApprovalForAll",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "subdomains", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "supportsInterface",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "symbol", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "tokenByIndex",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "tokenOfOwnerByIndex",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "tokenURI", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: "topdomain", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "topdomainNameHash",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "totalSupply",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "transferDomainOwnership",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "transferFrom",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "transferOwnership",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(functionFragment: "updateBase", data: BytesLike): Result;
+  decodeFunctionResult(
+    functionFragment: "updateBaseURI",
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: "updateRegistry",
+    data: BytesLike
+  ): Result;
+
+  events: {
+    "Approval(address,address,uint256)": EventFragment;
+    "ApprovalForAll(address,address,bool)": EventFragment;
+    "BaseURI(string,string)": EventFragment;
+    "BaseUpdated(address,address)": EventFragment;
+    "ControllerAdded(address)": EventFragment;
+    "ControllerRemoved(address)": EventFragment;
+    "DomainReclaimed(uint256)": EventFragment;
+    "DomainTransferred(address,uint256)": EventFragment;
+    "MigrationFinished()": EventFragment;
+    "NameRegistered(address,address,bytes32,string,uint256)": EventFragment;
+    "OwnershipTransferred(address,address)": EventFragment;
+    "Reclaimed(address,address,uint256)": EventFragment;
+    "RegistryUpdated(address,address)": EventFragment;
+    "Transfer(address,address,uint256)": EventFragment;
+  };
+
+  getEvent(nameOrSignatureOrTopic: "Approval"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "ApprovalForAll"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "BaseURI"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "BaseUpdated"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "ControllerAdded"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "ControllerRemoved"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "DomainReclaimed"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "DomainTransferred"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "MigrationFinished"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "NameRegistered"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "OwnershipTransferred"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "Reclaimed"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "RegistryUpdated"): EventFragment;
+  getEvent(nameOrSignatureOrTopic: "Transfer"): EventFragment;
+}
+
+export interface ApprovalEventObject {
+  owner: string;
+  approved: string;
+  tokenId: BigNumber;
+}
+export type ApprovalEvent = TypedEvent<
+  [string, string, BigNumber],
+  ApprovalEventObject
+>;
+
+export type ApprovalEventFilter = TypedEventFilter<ApprovalEvent>;
+
+export interface ApprovalForAllEventObject {
+  owner: string;
+  operator: string;
+  approved: boolean;
+}
+export type ApprovalForAllEvent = TypedEvent<
+  [string, string, boolean],
+  ApprovalForAllEventObject
+>;
+
+export type ApprovalForAllEventFilter = TypedEventFilter<ApprovalForAllEvent>;
+
+export interface BaseURIEventObject {
+  _oldBaseURI: string;
+  _newBaseURI: string;
+}
+export type BaseURIEvent = TypedEvent<[string, string], BaseURIEventObject>;
+
+export type BaseURIEventFilter = TypedEventFilter<BaseURIEvent>;
+
+export interface BaseUpdatedEventObject {
+  _previousBase: string;
+  _newBase: string;
+}
+export type BaseUpdatedEvent = TypedEvent<
+  [string, string],
+  BaseUpdatedEventObject
+>;
+
+export type BaseUpdatedEventFilter = TypedEventFilter<BaseUpdatedEvent>;
+
+export interface ControllerAddedEventObject {
+  _controller: string;
+}
+export type ControllerAddedEvent = TypedEvent<
+  [string],
+  ControllerAddedEventObject
+>;
+
+export type ControllerAddedEventFilter = TypedEventFilter<ControllerAddedEvent>;
+
+export interface ControllerRemovedEventObject {
+  _controller: string;
+}
+export type ControllerRemovedEvent = TypedEvent<
+  [string],
+  ControllerRemovedEventObject
+>;
+
+export type ControllerRemovedEventFilter =
+  TypedEventFilter<ControllerRemovedEvent>;
+
+export interface DomainReclaimedEventObject {
+  _tokenId: BigNumber;
+}
+export type DomainReclaimedEvent = TypedEvent<
+  [BigNumber],
+  DomainReclaimedEventObject
+>;
+
+export type DomainReclaimedEventFilter = TypedEventFilter<DomainReclaimedEvent>;
+
+export interface DomainTransferredEventObject {
+  _newOwner: string;
+  _tokenId: BigNumber;
+}
+export type DomainTransferredEvent = TypedEvent<
+  [string, BigNumber],
+  DomainTransferredEventObject
+>;
+
+export type DomainTransferredEventFilter =
+  TypedEventFilter<DomainTransferredEvent>;
+
+export interface MigrationFinishedEventObject {}
+export type MigrationFinishedEvent = TypedEvent<
+  [],
+  MigrationFinishedEventObject
+>;
+
+export type MigrationFinishedEventFilter =
+  TypedEventFilter<MigrationFinishedEvent>;
+
+export interface NameRegisteredEventObject {
+  _caller: string;
+  _beneficiary: string;
+  _labelHash: string;
+  _subdomain: string;
+  _createdDate: BigNumber;
+}
+export type NameRegisteredEvent = TypedEvent<
+  [string, string, string, string, BigNumber],
+  NameRegisteredEventObject
+>;
+
+export type NameRegisteredEventFilter = TypedEventFilter<NameRegisteredEvent>;
+
+export interface OwnershipTransferredEventObject {
+  previousOwner: string;
+  newOwner: string;
+}
+export type OwnershipTransferredEvent = TypedEvent<
+  [string, string],
+  OwnershipTransferredEventObject
+>;
+
+export type OwnershipTransferredEventFilter =
+  TypedEventFilter<OwnershipTransferredEvent>;
+
+export interface ReclaimedEventObject {
+  _caller: string;
+  _owner: string;
+  _tokenId: BigNumber;
+}
+export type ReclaimedEvent = TypedEvent<
+  [string, string, BigNumber],
+  ReclaimedEventObject
+>;
+
+export type ReclaimedEventFilter = TypedEventFilter<ReclaimedEvent>;
+
+export interface RegistryUpdatedEventObject {
+  _previousRegistry: string;
+  _newRegistry: string;
+}
+export type RegistryUpdatedEvent = TypedEvent<
+  [string, string],
+  RegistryUpdatedEventObject
+>;
+
+export type RegistryUpdatedEventFilter = TypedEventFilter<RegistryUpdatedEvent>;
+
+export interface TransferEventObject {
+  from: string;
+  to: string;
+  tokenId: BigNumber;
+}
+export type TransferEvent = TypedEvent<
+  [string, string, BigNumber],
+  TransferEventObject
+>;
+
+export type TransferEventFilter = TypedEventFilter<TransferEvent>;
+
+export interface DCLRegistrar extends BaseContract {
+  connect(signerOrProvider: Signer | Provider | string): this;
+  attach(addressOrName: string): this;
+  deployed(): Promise<this>;
+
+  interface: DCLRegistrarInterface;
+
+  queryFilter<TEvent extends TypedEvent>(
+    event: TypedEventFilter<TEvent>,
+    fromBlockOrBlockhash?: string | number | undefined,
+    toBlock?: string | number | undefined
+  ): Promise<Array<TEvent>>;
+
+  listeners<TEvent extends TypedEvent>(
+    eventFilter?: TypedEventFilter<TEvent>
+  ): Array<TypedListener<TEvent>>;
+  listeners(eventName?: string): Array<Listener>;
+  removeAllListeners<TEvent extends TypedEvent>(
+    eventFilter: TypedEventFilter<TEvent>
+  ): this;
+  removeAllListeners(eventName?: string): this;
+  off: OnEvent<this>;
+  on: OnEvent<this>;
+  once: OnEvent<this>;
+  removeListener: OnEvent<this>;
+
+  functions: {
+    ERC721_RECEIVED(overrides?: CallOverrides): Promise<[string]>;
+
+    addController(
+      controller: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    approve(
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    available(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<[boolean]>;
+
+    balanceOf(
+      owner: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<[BigNumber]>;
+
+    base(overrides?: CallOverrides): Promise<[string]>;
+
+    baseURI(overrides?: CallOverrides): Promise<[string]>;
+
+    controllers(
+      arg0: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<[boolean]>;
+
+    domain(overrides?: CallOverrides): Promise<[string]>;
+
+    domainNameHash(overrides?: CallOverrides): Promise<[string]>;
+
+    getApproved(
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<[string]>;
+
+    getOwnerOf(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<[string]>;
+
+    getTokenId(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<[BigNumber]>;
+
+    isApprovedForAll(
+      owner: PromiseOrValue<string>,
+      operator: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<[boolean]>;
+
+    isOwner(overrides?: CallOverrides): Promise<[boolean]>;
+
+    migrateNames(
+      _names: PromiseOrValue<BytesLike>[],
+      _beneficiaries: PromiseOrValue<string>[],
+      _createdDates: PromiseOrValue<BigNumberish>[],
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    migrated(overrides?: CallOverrides): Promise<[boolean]>;
+
+    migrationFinished(
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    name(overrides?: CallOverrides): Promise<[string]>;
+
+    onERC721Received(
+      arg0: PromiseOrValue<string>,
+      arg1: PromiseOrValue<string>,
+      _tokenId: PromiseOrValue<BigNumberish>,
+      arg3: PromiseOrValue<BytesLike>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    owner(overrides?: CallOverrides): Promise<[string]>;
+
+    ownerOf(
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<[string]>;
+
+    reclaim(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      _owner: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    reclaimDomain(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    register(
+      _subdomain: PromiseOrValue<string>,
+      _beneficiary: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    registry(overrides?: CallOverrides): Promise<[string]>;
+
+    removeController(
+      controller: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    renounceOwnership(
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    "safeTransferFrom(address,address,uint256)"(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    "safeTransferFrom(address,address,uint256,bytes)"(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      _data: PromiseOrValue<BytesLike>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    setApprovalForAll(
+      to: PromiseOrValue<string>,
+      approved: PromiseOrValue<boolean>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    subdomains(
+      arg0: PromiseOrValue<BytesLike>,
+      overrides?: CallOverrides
+    ): Promise<[string]>;
+
+    supportsInterface(
+      interfaceId: PromiseOrValue<BytesLike>,
+      overrides?: CallOverrides
+    ): Promise<[boolean]>;
+
+    symbol(overrides?: CallOverrides): Promise<[string]>;
+
+    tokenByIndex(
+      index: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<[BigNumber]>;
+
+    tokenOfOwnerByIndex(
+      owner: PromiseOrValue<string>,
+      index: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<[BigNumber]>;
+
+    tokenURI(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<[string]>;
+
+    topdomain(overrides?: CallOverrides): Promise<[string]>;
+
+    topdomainNameHash(overrides?: CallOverrides): Promise<[string]>;
+
+    totalSupply(overrides?: CallOverrides): Promise<[BigNumber]>;
+
+    transferDomainOwnership(
+      _owner: PromiseOrValue<string>,
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    transferFrom(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    transferOwnership(
+      newOwner: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    updateBase(
+      _base: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    updateBaseURI(
+      _baseURI: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+
+    updateRegistry(
+      _registry: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<ContractTransaction>;
+  };
+
+  ERC721_RECEIVED(overrides?: CallOverrides): Promise<string>;
+
+  addController(
+    controller: PromiseOrValue<string>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  approve(
+    to: PromiseOrValue<string>,
+    tokenId: PromiseOrValue<BigNumberish>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  available(
+    _subdomain: PromiseOrValue<string>,
+    overrides?: CallOverrides
+  ): Promise<boolean>;
+
+  balanceOf(
+    owner: PromiseOrValue<string>,
+    overrides?: CallOverrides
+  ): Promise<BigNumber>;
+
+  base(overrides?: CallOverrides): Promise<string>;
+
+  baseURI(overrides?: CallOverrides): Promise<string>;
+
+  controllers(
+    arg0: PromiseOrValue<string>,
+    overrides?: CallOverrides
+  ): Promise<boolean>;
+
+  domain(overrides?: CallOverrides): Promise<string>;
+
+  domainNameHash(overrides?: CallOverrides): Promise<string>;
+
+  getApproved(
+    tokenId: PromiseOrValue<BigNumberish>,
+    overrides?: CallOverrides
+  ): Promise<string>;
+
+  getOwnerOf(
+    _subdomain: PromiseOrValue<string>,
+    overrides?: CallOverrides
+  ): Promise<string>;
+
+  getTokenId(
+    _subdomain: PromiseOrValue<string>,
+    overrides?: CallOverrides
+  ): Promise<BigNumber>;
+
+  isApprovedForAll(
+    owner: PromiseOrValue<string>,
+    operator: PromiseOrValue<string>,
+    overrides?: CallOverrides
+  ): Promise<boolean>;
+
+  isOwner(overrides?: CallOverrides): Promise<boolean>;
+
+  migrateNames(
+    _names: PromiseOrValue<BytesLike>[],
+    _beneficiaries: PromiseOrValue<string>[],
+    _createdDates: PromiseOrValue<BigNumberish>[],
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  migrated(overrides?: CallOverrides): Promise<boolean>;
+
+  migrationFinished(
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  name(overrides?: CallOverrides): Promise<string>;
+
+  onERC721Received(
+    arg0: PromiseOrValue<string>,
+    arg1: PromiseOrValue<string>,
+    _tokenId: PromiseOrValue<BigNumberish>,
+    arg3: PromiseOrValue<BytesLike>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  owner(overrides?: CallOverrides): Promise<string>;
+
+  ownerOf(
+    tokenId: PromiseOrValue<BigNumberish>,
+    overrides?: CallOverrides
+  ): Promise<string>;
+
+  reclaim(
+    _tokenId: PromiseOrValue<BigNumberish>,
+    _owner: PromiseOrValue<string>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  reclaimDomain(
+    _tokenId: PromiseOrValue<BigNumberish>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  register(
+    _subdomain: PromiseOrValue<string>,
+    _beneficiary: PromiseOrValue<string>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  registry(overrides?: CallOverrides): Promise<string>;
+
+  removeController(
+    controller: PromiseOrValue<string>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  renounceOwnership(
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  "safeTransferFrom(address,address,uint256)"(
+    from: PromiseOrValue<string>,
+    to: PromiseOrValue<string>,
+    tokenId: PromiseOrValue<BigNumberish>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  "safeTransferFrom(address,address,uint256,bytes)"(
+    from: PromiseOrValue<string>,
+    to: PromiseOrValue<string>,
+    tokenId: PromiseOrValue<BigNumberish>,
+    _data: PromiseOrValue<BytesLike>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  setApprovalForAll(
+    to: PromiseOrValue<string>,
+    approved: PromiseOrValue<boolean>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  subdomains(
+    arg0: PromiseOrValue<BytesLike>,
+    overrides?: CallOverrides
+  ): Promise<string>;
+
+  supportsInterface(
+    interfaceId: PromiseOrValue<BytesLike>,
+    overrides?: CallOverrides
+  ): Promise<boolean>;
+
+  symbol(overrides?: CallOverrides): Promise<string>;
+
+  tokenByIndex(
+    index: PromiseOrValue<BigNumberish>,
+    overrides?: CallOverrides
+  ): Promise<BigNumber>;
+
+  tokenOfOwnerByIndex(
+    owner: PromiseOrValue<string>,
+    index: PromiseOrValue<BigNumberish>,
+    overrides?: CallOverrides
+  ): Promise<BigNumber>;
+
+  tokenURI(
+    _tokenId: PromiseOrValue<BigNumberish>,
+    overrides?: CallOverrides
+  ): Promise<string>;
+
+  topdomain(overrides?: CallOverrides): Promise<string>;
+
+  topdomainNameHash(overrides?: CallOverrides): Promise<string>;
+
+  totalSupply(overrides?: CallOverrides): Promise<BigNumber>;
+
+  transferDomainOwnership(
+    _owner: PromiseOrValue<string>,
+    _tokenId: PromiseOrValue<BigNumberish>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  transferFrom(
+    from: PromiseOrValue<string>,
+    to: PromiseOrValue<string>,
+    tokenId: PromiseOrValue<BigNumberish>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  transferOwnership(
+    newOwner: PromiseOrValue<string>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  updateBase(
+    _base: PromiseOrValue<string>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  updateBaseURI(
+    _baseURI: PromiseOrValue<string>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  updateRegistry(
+    _registry: PromiseOrValue<string>,
+    overrides?: Overrides & { from?: PromiseOrValue<string> }
+  ): Promise<ContractTransaction>;
+
+  callStatic: {
+    ERC721_RECEIVED(overrides?: CallOverrides): Promise<string>;
+
+    addController(
+      controller: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    approve(
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    available(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<boolean>;
+
+    balanceOf(
+      owner: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    base(overrides?: CallOverrides): Promise<string>;
+
+    baseURI(overrides?: CallOverrides): Promise<string>;
+
+    controllers(
+      arg0: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<boolean>;
+
+    domain(overrides?: CallOverrides): Promise<string>;
+
+    domainNameHash(overrides?: CallOverrides): Promise<string>;
+
+    getApproved(
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<string>;
+
+    getOwnerOf(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<string>;
+
+    getTokenId(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    isApprovedForAll(
+      owner: PromiseOrValue<string>,
+      operator: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<boolean>;
+
+    isOwner(overrides?: CallOverrides): Promise<boolean>;
+
+    migrateNames(
+      _names: PromiseOrValue<BytesLike>[],
+      _beneficiaries: PromiseOrValue<string>[],
+      _createdDates: PromiseOrValue<BigNumberish>[],
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    migrated(overrides?: CallOverrides): Promise<boolean>;
+
+    migrationFinished(overrides?: CallOverrides): Promise<void>;
+
+    name(overrides?: CallOverrides): Promise<string>;
+
+    onERC721Received(
+      arg0: PromiseOrValue<string>,
+      arg1: PromiseOrValue<string>,
+      _tokenId: PromiseOrValue<BigNumberish>,
+      arg3: PromiseOrValue<BytesLike>,
+      overrides?: CallOverrides
+    ): Promise<string>;
+
+    owner(overrides?: CallOverrides): Promise<string>;
+
+    ownerOf(
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<string>;
+
+    reclaim(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      _owner: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    reclaimDomain(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    register(
+      _subdomain: PromiseOrValue<string>,
+      _beneficiary: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    registry(overrides?: CallOverrides): Promise<string>;
+
+    removeController(
+      controller: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    renounceOwnership(overrides?: CallOverrides): Promise<void>;
+
+    "safeTransferFrom(address,address,uint256)"(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    "safeTransferFrom(address,address,uint256,bytes)"(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      _data: PromiseOrValue<BytesLike>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    setApprovalForAll(
+      to: PromiseOrValue<string>,
+      approved: PromiseOrValue<boolean>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    subdomains(
+      arg0: PromiseOrValue<BytesLike>,
+      overrides?: CallOverrides
+    ): Promise<string>;
+
+    supportsInterface(
+      interfaceId: PromiseOrValue<BytesLike>,
+      overrides?: CallOverrides
+    ): Promise<boolean>;
+
+    symbol(overrides?: CallOverrides): Promise<string>;
+
+    tokenByIndex(
+      index: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    tokenOfOwnerByIndex(
+      owner: PromiseOrValue<string>,
+      index: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    tokenURI(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<string>;
+
+    topdomain(overrides?: CallOverrides): Promise<string>;
+
+    topdomainNameHash(overrides?: CallOverrides): Promise<string>;
+
+    totalSupply(overrides?: CallOverrides): Promise<BigNumber>;
+
+    transferDomainOwnership(
+      _owner: PromiseOrValue<string>,
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    transferFrom(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    transferOwnership(
+      newOwner: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    updateBase(
+      _base: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    updateBaseURI(
+      _baseURI: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+
+    updateRegistry(
+      _registry: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<void>;
+  };
+
+  filters: {
+    "Approval(address,address,uint256)"(
+      owner?: PromiseOrValue<string> | null,
+      approved?: PromiseOrValue<string> | null,
+      tokenId?: PromiseOrValue<BigNumberish> | null
+    ): ApprovalEventFilter;
+    Approval(
+      owner?: PromiseOrValue<string> | null,
+      approved?: PromiseOrValue<string> | null,
+      tokenId?: PromiseOrValue<BigNumberish> | null
+    ): ApprovalEventFilter;
+
+    "ApprovalForAll(address,address,bool)"(
+      owner?: PromiseOrValue<string> | null,
+      operator?: PromiseOrValue<string> | null,
+      approved?: null
+    ): ApprovalForAllEventFilter;
+    ApprovalForAll(
+      owner?: PromiseOrValue<string> | null,
+      operator?: PromiseOrValue<string> | null,
+      approved?: null
+    ): ApprovalForAllEventFilter;
+
+    "BaseURI(string,string)"(
+      _oldBaseURI?: null,
+      _newBaseURI?: null
+    ): BaseURIEventFilter;
+    BaseURI(_oldBaseURI?: null, _newBaseURI?: null): BaseURIEventFilter;
+
+    "BaseUpdated(address,address)"(
+      _previousBase?: PromiseOrValue<string> | null,
+      _newBase?: PromiseOrValue<string> | null
+    ): BaseUpdatedEventFilter;
+    BaseUpdated(
+      _previousBase?: PromiseOrValue<string> | null,
+      _newBase?: PromiseOrValue<string> | null
+    ): BaseUpdatedEventFilter;
+
+    "ControllerAdded(address)"(
+      _controller?: PromiseOrValue<string> | null
+    ): ControllerAddedEventFilter;
+    ControllerAdded(
+      _controller?: PromiseOrValue<string> | null
+    ): ControllerAddedEventFilter;
+
+    "ControllerRemoved(address)"(
+      _controller?: PromiseOrValue<string> | null
+    ): ControllerRemovedEventFilter;
+    ControllerRemoved(
+      _controller?: PromiseOrValue<string> | null
+    ): ControllerRemovedEventFilter;
+
+    "DomainReclaimed(uint256)"(
+      _tokenId?: PromiseOrValue<BigNumberish> | null
+    ): DomainReclaimedEventFilter;
+    DomainReclaimed(
+      _tokenId?: PromiseOrValue<BigNumberish> | null
+    ): DomainReclaimedEventFilter;
+
+    "DomainTransferred(address,uint256)"(
+      _newOwner?: PromiseOrValue<string> | null,
+      _tokenId?: PromiseOrValue<BigNumberish> | null
+    ): DomainTransferredEventFilter;
+    DomainTransferred(
+      _newOwner?: PromiseOrValue<string> | null,
+      _tokenId?: PromiseOrValue<BigNumberish> | null
+    ): DomainTransferredEventFilter;
+
+    "MigrationFinished()"(): MigrationFinishedEventFilter;
+    MigrationFinished(): MigrationFinishedEventFilter;
+
+    "NameRegistered(address,address,bytes32,string,uint256)"(
+      _caller?: PromiseOrValue<string> | null,
+      _beneficiary?: PromiseOrValue<string> | null,
+      _labelHash?: PromiseOrValue<BytesLike> | null,
+      _subdomain?: null,
+      _createdDate?: null
+    ): NameRegisteredEventFilter;
+    NameRegistered(
+      _caller?: PromiseOrValue<string> | null,
+      _beneficiary?: PromiseOrValue<string> | null,
+      _labelHash?: PromiseOrValue<BytesLike> | null,
+      _subdomain?: null,
+      _createdDate?: null
+    ): NameRegisteredEventFilter;
+
+    "OwnershipTransferred(address,address)"(
+      previousOwner?: PromiseOrValue<string> | null,
+      newOwner?: PromiseOrValue<string> | null
+    ): OwnershipTransferredEventFilter;
+    OwnershipTransferred(
+      previousOwner?: PromiseOrValue<string> | null,
+      newOwner?: PromiseOrValue<string> | null
+    ): OwnershipTransferredEventFilter;
+
+    "Reclaimed(address,address,uint256)"(
+      _caller?: PromiseOrValue<string> | null,
+      _owner?: PromiseOrValue<string> | null,
+      _tokenId?: PromiseOrValue<BigNumberish> | null
+    ): ReclaimedEventFilter;
+    Reclaimed(
+      _caller?: PromiseOrValue<string> | null,
+      _owner?: PromiseOrValue<string> | null,
+      _tokenId?: PromiseOrValue<BigNumberish> | null
+    ): ReclaimedEventFilter;
+
+    "RegistryUpdated(address,address)"(
+      _previousRegistry?: PromiseOrValue<string> | null,
+      _newRegistry?: PromiseOrValue<string> | null
+    ): RegistryUpdatedEventFilter;
+    RegistryUpdated(
+      _previousRegistry?: PromiseOrValue<string> | null,
+      _newRegistry?: PromiseOrValue<string> | null
+    ): RegistryUpdatedEventFilter;
+
+    "Transfer(address,address,uint256)"(
+      from?: PromiseOrValue<string> | null,
+      to?: PromiseOrValue<string> | null,
+      tokenId?: PromiseOrValue<BigNumberish> | null
+    ): TransferEventFilter;
+    Transfer(
+      from?: PromiseOrValue<string> | null,
+      to?: PromiseOrValue<string> | null,
+      tokenId?: PromiseOrValue<BigNumberish> | null
+    ): TransferEventFilter;
+  };
+
+  estimateGas: {
+    ERC721_RECEIVED(overrides?: CallOverrides): Promise<BigNumber>;
+
+    addController(
+      controller: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    approve(
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    available(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    balanceOf(
+      owner: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    base(overrides?: CallOverrides): Promise<BigNumber>;
+
+    baseURI(overrides?: CallOverrides): Promise<BigNumber>;
+
+    controllers(
+      arg0: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    domain(overrides?: CallOverrides): Promise<BigNumber>;
+
+    domainNameHash(overrides?: CallOverrides): Promise<BigNumber>;
+
+    getApproved(
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    getOwnerOf(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    getTokenId(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    isApprovedForAll(
+      owner: PromiseOrValue<string>,
+      operator: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    isOwner(overrides?: CallOverrides): Promise<BigNumber>;
+
+    migrateNames(
+      _names: PromiseOrValue<BytesLike>[],
+      _beneficiaries: PromiseOrValue<string>[],
+      _createdDates: PromiseOrValue<BigNumberish>[],
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    migrated(overrides?: CallOverrides): Promise<BigNumber>;
+
+    migrationFinished(
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    name(overrides?: CallOverrides): Promise<BigNumber>;
+
+    onERC721Received(
+      arg0: PromiseOrValue<string>,
+      arg1: PromiseOrValue<string>,
+      _tokenId: PromiseOrValue<BigNumberish>,
+      arg3: PromiseOrValue<BytesLike>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    owner(overrides?: CallOverrides): Promise<BigNumber>;
+
+    ownerOf(
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    reclaim(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      _owner: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    reclaimDomain(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    register(
+      _subdomain: PromiseOrValue<string>,
+      _beneficiary: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    registry(overrides?: CallOverrides): Promise<BigNumber>;
+
+    removeController(
+      controller: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    renounceOwnership(
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    "safeTransferFrom(address,address,uint256)"(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    "safeTransferFrom(address,address,uint256,bytes)"(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      _data: PromiseOrValue<BytesLike>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    setApprovalForAll(
+      to: PromiseOrValue<string>,
+      approved: PromiseOrValue<boolean>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    subdomains(
+      arg0: PromiseOrValue<BytesLike>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    supportsInterface(
+      interfaceId: PromiseOrValue<BytesLike>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    symbol(overrides?: CallOverrides): Promise<BigNumber>;
+
+    tokenByIndex(
+      index: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    tokenOfOwnerByIndex(
+      owner: PromiseOrValue<string>,
+      index: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    tokenURI(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<BigNumber>;
+
+    topdomain(overrides?: CallOverrides): Promise<BigNumber>;
+
+    topdomainNameHash(overrides?: CallOverrides): Promise<BigNumber>;
+
+    totalSupply(overrides?: CallOverrides): Promise<BigNumber>;
+
+    transferDomainOwnership(
+      _owner: PromiseOrValue<string>,
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    transferFrom(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    transferOwnership(
+      newOwner: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    updateBase(
+      _base: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    updateBaseURI(
+      _baseURI: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+
+    updateRegistry(
+      _registry: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<BigNumber>;
+  };
+
+  populateTransaction: {
+    ERC721_RECEIVED(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    addController(
+      controller: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    approve(
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    available(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    balanceOf(
+      owner: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    base(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    baseURI(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    controllers(
+      arg0: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    domain(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    domainNameHash(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    getApproved(
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    getOwnerOf(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    getTokenId(
+      _subdomain: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    isApprovedForAll(
+      owner: PromiseOrValue<string>,
+      operator: PromiseOrValue<string>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    isOwner(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    migrateNames(
+      _names: PromiseOrValue<BytesLike>[],
+      _beneficiaries: PromiseOrValue<string>[],
+      _createdDates: PromiseOrValue<BigNumberish>[],
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    migrated(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    migrationFinished(
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    name(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    onERC721Received(
+      arg0: PromiseOrValue<string>,
+      arg1: PromiseOrValue<string>,
+      _tokenId: PromiseOrValue<BigNumberish>,
+      arg3: PromiseOrValue<BytesLike>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    owner(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    ownerOf(
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    reclaim(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      _owner: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    reclaimDomain(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    register(
+      _subdomain: PromiseOrValue<string>,
+      _beneficiary: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    registry(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    removeController(
+      controller: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    renounceOwnership(
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    "safeTransferFrom(address,address,uint256)"(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    "safeTransferFrom(address,address,uint256,bytes)"(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      _data: PromiseOrValue<BytesLike>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    setApprovalForAll(
+      to: PromiseOrValue<string>,
+      approved: PromiseOrValue<boolean>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    subdomains(
+      arg0: PromiseOrValue<BytesLike>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    supportsInterface(
+      interfaceId: PromiseOrValue<BytesLike>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    symbol(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    tokenByIndex(
+      index: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    tokenOfOwnerByIndex(
+      owner: PromiseOrValue<string>,
+      index: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    tokenURI(
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: CallOverrides
+    ): Promise<PopulatedTransaction>;
+
+    topdomain(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    topdomainNameHash(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    totalSupply(overrides?: CallOverrides): Promise<PopulatedTransaction>;
+
+    transferDomainOwnership(
+      _owner: PromiseOrValue<string>,
+      _tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    transferFrom(
+      from: PromiseOrValue<string>,
+      to: PromiseOrValue<string>,
+      tokenId: PromiseOrValue<BigNumberish>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    transferOwnership(
+      newOwner: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    updateBase(
+      _base: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    updateBaseURI(
+      _baseURI: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+
+    updateRegistry(
+      _registry: PromiseOrValue<string>,
+      overrides?: Overrides & { from?: PromiseOrValue<string> }
+    ): Promise<PopulatedTransaction>;
+  };
+}
diff --git a/webapp/src/contracts/common.ts b/webapp/src/contracts/common.ts
index 2fc40c7fb1..b1242c082c 100644
--- a/webapp/src/contracts/common.ts
+++ b/webapp/src/contracts/common.ts
@@ -42,3 +42,5 @@ export type GetContractTypeFromFactory<F> = F extends MinEthersFactory<
 export type GetARGsTypeFromFactory<F> = F extends MinEthersFactory<any, any>
   ? Parameters<F["deploy"]>
   : never;
+
+export type PromiseOrValue<T> = T | Promise<T>;
\ No newline at end of file
diff --git a/webapp/src/contracts/factories/DCLController__factory.ts b/webapp/src/contracts/factories/DCLController__factory.ts
new file mode 100644
index 0000000000..8837897e5e
--- /dev/null
+++ b/webapp/src/contracts/factories/DCLController__factory.ts
@@ -0,0 +1,258 @@
+/* Autogenerated file. Do not edit manually. */
+/* tslint:disable */
+/* eslint-disable */
+
+import { Contract, Signer, utils } from "ethers";
+import type { Provider } from "@ethersproject/providers";
+import type { DCLController, DCLControllerInterface } from "../DCLController";
+
+const _abi = [
+  {
+    inputs: [
+      {
+        internalType: "contract IERC20Token",
+        name: "_acceptedToken",
+        type: "address",
+      },
+      {
+        internalType: "contract IDCLRegistrar",
+        name: "_registrar",
+        type: "address",
+      },
+    ],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "constructor",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "_oldMaxGasPrice",
+        type: "uint256",
+      },
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "_newMaxGasPrice",
+        type: "uint256",
+      },
+    ],
+    name: "MaxGasPriceChanged",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "_caller",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "_beneficiary",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "uint256",
+        name: "_price",
+        type: "uint256",
+      },
+      {
+        indexed: false,
+        internalType: "string",
+        name: "_name",
+        type: "string",
+      },
+    ],
+    name: "NameBought",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "previousOwner",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "newOwner",
+        type: "address",
+      },
+    ],
+    name: "OwnershipTransferred",
+    type: "event",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "PRICE",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "acceptedToken",
+    outputs: [
+      {
+        internalType: "contract IERC20Token",
+        name: "",
+        type: "address",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "isOwner",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "maxGasPrice",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "owner",
+    outputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "string",
+        name: "_name",
+        type: "string",
+      },
+      {
+        internalType: "address",
+        name: "_beneficiary",
+        type: "address",
+      },
+    ],
+    name: "register",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "registrar",
+    outputs: [
+      {
+        internalType: "contract IDCLRegistrar",
+        name: "",
+        type: "address",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [],
+    name: "renounceOwnership",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "newOwner",
+        type: "address",
+      },
+    ],
+    name: "transferOwnership",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "_maxGasPrice",
+        type: "uint256",
+      },
+    ],
+    name: "updateMaxGasPrice",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+];
+
+export class DCLController__factory {
+  static readonly abi = _abi;
+  static createInterface(): DCLControllerInterface {
+    return new utils.Interface(_abi) as DCLControllerInterface;
+  }
+  static connect(
+    address: string,
+    signerOrProvider: Signer | Provider
+  ): DCLController {
+    return new Contract(address, _abi, signerOrProvider) as DCLController;
+  }
+}
diff --git a/webapp/src/contracts/factories/DCLRegistrar__factory.ts b/webapp/src/contracts/factories/DCLRegistrar__factory.ts
new file mode 100644
index 0000000000..e0e2c8aceb
--- /dev/null
+++ b/webapp/src/contracts/factories/DCLRegistrar__factory.ts
@@ -0,0 +1,1189 @@
+/* Autogenerated file. Do not edit manually. */
+/* tslint:disable */
+/* eslint-disable */
+
+import { Contract, Signer, utils } from "ethers";
+import type { Provider } from "@ethersproject/providers";
+import type { DCLRegistrar, DCLRegistrarInterface } from "../DCLRegistrar";
+
+const _abi = [
+  {
+    inputs: [
+      {
+        internalType: "contract IENSRegistry",
+        name: "_registry",
+        type: "address",
+      },
+      {
+        internalType: "contract IBaseRegistrar",
+        name: "_base",
+        type: "address",
+      },
+      {
+        internalType: "string",
+        name: "_topdomain",
+        type: "string",
+      },
+      {
+        internalType: "string",
+        name: "_domain",
+        type: "string",
+      },
+      {
+        internalType: "string",
+        name: "_baseURI",
+        type: "string",
+      },
+    ],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "constructor",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "owner",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "approved",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "Approval",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "owner",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "operator",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "bool",
+        name: "approved",
+        type: "bool",
+      },
+    ],
+    name: "ApprovalForAll",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: "string",
+        name: "_oldBaseURI",
+        type: "string",
+      },
+      {
+        indexed: false,
+        internalType: "string",
+        name: "_newBaseURI",
+        type: "string",
+      },
+    ],
+    name: "BaseURI",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "contract IBaseRegistrar",
+        name: "_previousBase",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "contract IBaseRegistrar",
+        name: "_newBase",
+        type: "address",
+      },
+    ],
+    name: "BaseUpdated",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "_controller",
+        type: "address",
+      },
+    ],
+    name: "ControllerAdded",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "_controller",
+        type: "address",
+      },
+    ],
+    name: "ControllerRemoved",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "_tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "DomainReclaimed",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "_newOwner",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "_tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "DomainTransferred",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [],
+    name: "MigrationFinished",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "_caller",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "_beneficiary",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "bytes32",
+        name: "_labelHash",
+        type: "bytes32",
+      },
+      {
+        indexed: false,
+        internalType: "string",
+        name: "_subdomain",
+        type: "string",
+      },
+      {
+        indexed: false,
+        internalType: "uint256",
+        name: "_createdDate",
+        type: "uint256",
+      },
+    ],
+    name: "NameRegistered",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "previousOwner",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "newOwner",
+        type: "address",
+      },
+    ],
+    name: "OwnershipTransferred",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "_caller",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "_owner",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "_tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "Reclaimed",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "contract IENSRegistry",
+        name: "_previousRegistry",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "contract IENSRegistry",
+        name: "_newRegistry",
+        type: "address",
+      },
+    ],
+    name: "RegistryUpdated",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "from",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "Transfer",
+    type: "event",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "ERC721_RECEIVED",
+    outputs: [
+      {
+        internalType: "bytes4",
+        name: "",
+        type: "bytes4",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "controller",
+        type: "address",
+      },
+    ],
+    name: "addController",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "approve",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "string",
+        name: "_subdomain",
+        type: "string",
+      },
+    ],
+    name: "available",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "address",
+        name: "owner",
+        type: "address",
+      },
+    ],
+    name: "balanceOf",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "base",
+    outputs: [
+      {
+        internalType: "contract IBaseRegistrar",
+        name: "",
+        type: "address",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "baseURI",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+    ],
+    name: "controllers",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "domain",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "domainNameHash",
+    outputs: [
+      {
+        internalType: "bytes32",
+        name: "",
+        type: "bytes32",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "getApproved",
+    outputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "string",
+        name: "_subdomain",
+        type: "string",
+      },
+    ],
+    name: "getOwnerOf",
+    outputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "string",
+        name: "_subdomain",
+        type: "string",
+      },
+    ],
+    name: "getTokenId",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "address",
+        name: "owner",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "operator",
+        type: "address",
+      },
+    ],
+    name: "isApprovedForAll",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "isOwner",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "bytes32[]",
+        name: "_names",
+        type: "bytes32[]",
+      },
+      {
+        internalType: "address[]",
+        name: "_beneficiaries",
+        type: "address[]",
+      },
+      {
+        internalType: "uint256[]",
+        name: "_createdDates",
+        type: "uint256[]",
+      },
+    ],
+    name: "migrateNames",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "migrated",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [],
+    name: "migrationFinished",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "name",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "_tokenId",
+        type: "uint256",
+      },
+      {
+        internalType: "bytes",
+        name: "",
+        type: "bytes",
+      },
+    ],
+    name: "onERC721Received",
+    outputs: [
+      {
+        internalType: "bytes4",
+        name: "",
+        type: "bytes4",
+      },
+    ],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "owner",
+    outputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "ownerOf",
+    outputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "_tokenId",
+        type: "uint256",
+      },
+      {
+        internalType: "address",
+        name: "_owner",
+        type: "address",
+      },
+    ],
+    name: "reclaim",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "_tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "reclaimDomain",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "string",
+        name: "_subdomain",
+        type: "string",
+      },
+      {
+        internalType: "address",
+        name: "_beneficiary",
+        type: "address",
+      },
+    ],
+    name: "register",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "registry",
+    outputs: [
+      {
+        internalType: "contract IENSRegistry",
+        name: "",
+        type: "address",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "controller",
+        type: "address",
+      },
+    ],
+    name: "removeController",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [],
+    name: "renounceOwnership",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "from",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "safeTransferFrom",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "from",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+      {
+        internalType: "bytes",
+        name: "_data",
+        type: "bytes",
+      },
+    ],
+    name: "safeTransferFrom",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        internalType: "bool",
+        name: "approved",
+        type: "bool",
+      },
+    ],
+    name: "setApprovalForAll",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "bytes32",
+        name: "",
+        type: "bytes32",
+      },
+    ],
+    name: "subdomains",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "bytes4",
+        name: "interfaceId",
+        type: "bytes4",
+      },
+    ],
+    name: "supportsInterface",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "symbol",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "index",
+        type: "uint256",
+      },
+    ],
+    name: "tokenByIndex",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "address",
+        name: "owner",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "index",
+        type: "uint256",
+      },
+    ],
+    name: "tokenOfOwnerByIndex",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "_tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "tokenURI",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "topdomain",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "topdomainNameHash",
+    outputs: [
+      {
+        internalType: "bytes32",
+        name: "",
+        type: "bytes32",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "totalSupply",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "_owner",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "_tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "transferDomainOwnership",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "from",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "transferFrom",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "address",
+        name: "newOwner",
+        type: "address",
+      },
+    ],
+    name: "transferOwnership",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "contract IBaseRegistrar",
+        name: "_base",
+        type: "address",
+      },
+    ],
+    name: "updateBase",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "string",
+        name: "_baseURI",
+        type: "string",
+      },
+    ],
+    name: "updateBaseURI",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: "contract IENSRegistry",
+        name: "_registry",
+        type: "address",
+      },
+    ],
+    name: "updateRegistry",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+];
+
+export class DCLRegistrar__factory {
+  static readonly abi = _abi;
+  static createInterface(): DCLRegistrarInterface {
+    return new utils.Interface(_abi) as DCLRegistrarInterface;
+  }
+  static connect(
+    address: string,
+    signerOrProvider: Signer | Provider
+  ): DCLRegistrar {
+    return new Contract(address, _abi, signerOrProvider) as DCLRegistrar;
+  }
+}
diff --git a/webapp/src/contracts/factories/index.ts b/webapp/src/contracts/factories/index.ts
index c82199c80f..d9beffb6ae 100644
--- a/webapp/src/contracts/factories/index.ts
+++ b/webapp/src/contracts/factories/index.ts
@@ -5,3 +5,5 @@ export { Converter__factory } from "./Converter__factory";
 export { ERC721__factory } from "./ERC721__factory";
 export { EstateRegistry__factory } from "./EstateRegistry__factory";
 export { MarketplaceAdapter__factory } from "./MarketplaceAdapter__factory";
+export { DCLController__factory } from "./DCLController__factory";
+export { DCLRegistrar__factory } from "./DCLRegistrar__factory";
diff --git a/webapp/src/contracts/index.ts b/webapp/src/contracts/index.ts
index 2bd9d7bd8c..ed30d23bd4 100644
--- a/webapp/src/contracts/index.ts
+++ b/webapp/src/contracts/index.ts
@@ -5,6 +5,7 @@ export type { Converter } from "./Converter";
 export type { ERC721 } from "./ERC721";
 export type { EstateRegistry } from "./EstateRegistry";
 export type { MarketplaceAdapter } from "./MarketplaceAdapter";
+export type { DCLController } from "./DCLController";
 export * as factories from "./factories";
 export { Converter__factory } from "./factories/Converter__factory";
 export { ERC721__factory } from "./factories/ERC721__factory";
diff --git a/webapp/src/images/claim-name-banner.png b/webapp/src/images/claim-name-banner.png
new file mode 100644
index 0000000000..8c5f7c4c27
Binary files /dev/null and b/webapp/src/images/claim-name-banner.png differ
diff --git a/webapp/src/images/claim-name-banner2.png b/webapp/src/images/claim-name-banner2.png
new file mode 100644
index 0000000000..303951782c
Binary files /dev/null and b/webapp/src/images/claim-name-banner2.png differ
diff --git a/webapp/src/images/claim-name.svg b/webapp/src/images/claim-name.svg
new file mode 100644
index 0000000000..b561993f71
--- /dev/null
+++ b/webapp/src/images/claim-name.svg
@@ -0,0 +1,344 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="97" height="106" viewBox="0 0 97 106" fill="none">
+  <g clip-path="url(#clip0_164_30892)">
+    <rect width="74.6246" height="89.3695" rx="12.1119" transform="matrix(0.929926 0.367747 -0.371634 0.928379 30.3319 -2.89655)" fill="url(#paint0_linear_164_30892)"/>
+    <rect width="74.6246" height="89.3695" rx="12.1119" transform="matrix(0.929926 0.367747 -0.371634 0.928379 30.3319 -2.89655)" fill="url(#paint1_linear_164_30892)"/>
+    <g filter="url(#filter0_df_164_30892)">
+      <rect width="71.3801" height="87.216" rx="12.1119" transform="matrix(0.929926 0.367747 -0.371634 0.928379 30.3319 -2.89655)" fill="url(#paint2_linear_164_30892)"/>
+    </g>
+    <g filter="url(#filter1_f_164_30892)">
+      <rect x="0.140874" y="0.327052" width="70.8754" height="86.7114" rx="11.8595" transform="matrix(0.929926 0.367747 -0.371634 0.928379 30.4633 -2.92493)" stroke="url(#paint3_linear_164_30892)" stroke-width="0.504661"/>
+    </g>
+    <rect width="73.9924" height="88.4752" rx="12" transform="matrix(0.995328 0.0965522 -0.0977241 0.995214 12.5964 10.2374)" fill="url(#paint4_linear_164_30892)"/>
+    <rect width="73.9924" height="88.4752" rx="12" transform="matrix(0.995328 0.0965522 -0.0977241 0.995214 12.5964 10.2374)" fill="url(#paint5_linear_164_30892)"/>
+    <g filter="url(#filter2_df_164_30892)">
+      <rect width="70.7754" height="86.3433" rx="12" transform="matrix(0.995328 0.0965522 -0.0977241 0.995214 12.5964 10.2374)" fill="url(#paint6_linear_164_30892)"/>
+    </g>
+    <g filter="url(#filter3_f_164_30892)">
+      <rect x="0.224401" y="0.272941" width="70.2754" height="85.8433" rx="11.75" transform="matrix(0.995328 0.0965522 -0.0977241 0.995214 12.6242 10.2171)" stroke="url(#paint7_linear_164_30892)" stroke-width="0.5"/>
+    </g>
+    <g filter="url(#filter4_dd_164_30892)">
+      <rect width="46.7735" height="5.34486" rx="2.67243" transform="matrix(0.994931 0.100566 -0.102415 0.994742 19.7046 69.7293)" fill="url(#paint8_linear_164_30892)"/>
+    </g>
+    <g filter="url(#filter5_f_164_30892)">
+      <rect width="46.7735" height="5.34486" rx="2.67243" transform="matrix(0.994931 0.100566 -0.102415 0.994742 19.7046 69.7293)" fill="url(#paint9_linear_164_30892)"/>
+      <rect x="0.446258" y="0.547654" width="45.7735" height="4.34486" rx="2.17243" transform="matrix(0.994931 0.100566 -0.102415 0.994742 19.763 69.6873)" stroke="url(#paint10_linear_164_30892)"/>
+    </g>
+    <g style="mix-blend-mode:overlay" opacity="0.3">
+      <rect width="46.7735" height="5.34486" rx="2.67243" transform="matrix(0.994931 0.100566 -0.102415 0.994742 19.7046 69.7293)" fill="url(#paint11_linear_164_30892)"/>
+    </g>
+    <g style="mix-blend-mode:overlay">
+      <rect x="0.173951" y="0.213475" width="46.3837" height="4.95506" rx="2.47753" transform="matrix(0.994931 0.100566 -0.102415 0.994742 19.7274 69.713)" stroke="url(#paint12_linear_164_30892)" stroke-width="0.389799"/>
+    </g>
+    <g filter="url(#filter6_dd_164_30892)">
+      <rect width="46.7735" height="5.34486" rx="2.67243" transform="matrix(0.994931 0.100566 -0.102415 0.994742 18.7573 79.3768)" fill="url(#paint13_linear_164_30892)"/>
+    </g>
+    <g filter="url(#filter7_f_164_30892)">
+      <rect width="46.7735" height="5.34486" rx="2.67243" transform="matrix(0.994931 0.100566 -0.102415 0.994742 18.7573 79.3768)" fill="url(#paint14_linear_164_30892)"/>
+      <rect x="0.446258" y="0.547654" width="45.7735" height="4.34486" rx="2.17243" transform="matrix(0.994931 0.100566 -0.102415 0.994742 18.8157 79.3348)" stroke="url(#paint15_linear_164_30892)"/>
+    </g>
+    <g style="mix-blend-mode:overlay" opacity="0.3">
+      <rect width="46.7735" height="5.34486" rx="2.67243" transform="matrix(0.994931 0.100566 -0.102415 0.994742 18.7573 79.3768)" fill="url(#paint16_linear_164_30892)"/>
+    </g>
+    <g style="mix-blend-mode:overlay">
+      <rect x="0.173951" y="0.213475" width="46.3837" height="4.95506" rx="2.47753" transform="matrix(0.994931 0.100566 -0.102415 0.994742 18.7898 79.2607)" stroke="url(#paint17_linear_164_30892)" stroke-width="0.389799"/>
+    </g>
+    <g opacity="0.6" filter="url(#filter8_f_164_30892)">
+      <path d="M46.9394 25.9442C48.3717 26.0397 49.7699 26.4198 51.0512 27.062C52.3325 27.7043 53.4707 28.5957 54.3984 29.6832C55.3261 30.7708 56.0245 32.0326 56.4521 33.3936C56.8797 34.7547 57.0279 36.1874 56.8878 37.6069C56.7477 39.0263 56.3222 40.4037 55.6366 41.6573C54.951 42.9109 54.0191 44.0152 52.8963 44.9048C51.7734 45.7945 50.4824 46.4513 49.0997 46.8364C47.7171 47.2215 46.2709 47.327 44.847 47.1467C43.4146 47.0513 42.0164 46.6712 40.7351 46.0289C39.4538 45.3866 38.3156 44.4953 37.3879 43.4077C36.4602 42.3201 35.7618 41.0584 35.3342 39.6973C34.9066 38.3363 34.7584 36.9035 34.8985 35.484C35.0386 34.0646 35.4641 32.6872 36.1497 31.4336C36.8354 30.1801 37.7672 29.0757 38.8901 28.1861C40.0129 27.2965 41.3039 26.6396 42.6866 26.2545C44.0692 25.8694 45.5154 25.7639 46.9394 25.9442Z" fill="#D31CDD"/>
+    </g>
+    <path d="M46.9175 24.9867C48.3498 25.0821 49.7481 25.4623 51.0293 26.1045C52.3106 26.7468 53.4488 27.6381 54.3765 28.7257C55.3043 29.8133 56.0026 31.075 56.4302 32.4361C56.8578 33.7972 57.006 35.2299 56.8659 36.6493C56.7258 38.0688 56.3004 39.4462 55.6147 40.6998C54.9291 41.9534 53.9972 43.0577 52.8744 43.9473C51.7515 44.8369 50.4605 45.4938 49.0779 45.8789C47.6952 46.264 46.249 46.3695 44.8251 46.1892C43.3927 46.0938 41.9945 45.7136 40.7132 45.0714C39.432 44.4291 38.2938 43.5378 37.366 42.4502C36.4383 41.3626 35.7399 40.1009 35.3123 38.7398C34.8847 37.3787 34.7366 35.946 34.8767 34.5265C35.0167 33.1071 35.4422 31.7297 36.1278 30.4761C36.8135 29.2225 37.7453 28.1182 38.8682 27.2286C39.991 26.3389 41.282 25.6821 42.6647 25.297C44.0473 24.9119 45.4935 24.8064 46.9175 24.9867Z" fill="#D31CDD"/>
+    <path d="M46.8677 25.3733L46.8792 25.3748L46.8907 25.3755C48.2714 25.4675 49.6191 25.8339 50.854 26.453C52.0888 27.072 53.1857 27.931 54.0796 28.9789C54.9736 30.0269 55.6463 31.2425 56.0582 32.5536C56.4702 33.8647 56.6128 35.2447 56.4779 36.6119C56.343 37.9791 55.9332 39.3058 55.2727 40.5134C54.6123 41.7209 53.7145 42.7849 52.6326 43.6421C51.5507 44.4993 50.3065 45.1323 48.9739 45.5035C47.6413 45.8746 46.2474 45.9764 44.8749 45.8026L44.8634 45.8011L44.8518 45.8004C43.4712 45.7083 42.1235 45.3419 40.8886 44.7229C39.6537 44.1039 38.5568 43.2449 37.6629 42.1969C36.769 41.149 36.0962 39.9334 35.6843 38.6223C35.2724 37.3112 35.1297 35.9312 35.2646 34.564C35.3996 33.1968 35.8094 31.8701 36.4698 30.6625C37.1303 29.455 38.028 28.391 39.11 27.5338C40.1919 26.6766 41.436 26.0436 42.7686 25.6724C44.1012 25.3013 45.4951 25.1995 46.8677 25.3733Z" fill="url(#paint18_linear_164_30892)" stroke="url(#paint19_linear_164_30892)" stroke-width="0.779599"/>
+    <g style="mix-blend-mode:overlay">
+      <path d="M46.7041 26.0261L46.704 26.0265L46.7154 26.0272C48.0559 26.1173 49.3649 26.4692 50.5646 27.0621C51.7644 27.6549 52.8304 28.4766 53.6997 29.4782C54.5689 30.4797 55.2237 31.6408 55.6255 32.8924C56.0273 34.1441 56.1679 35.4609 56.0392 36.7651C55.9105 38.0692 55.515 39.3344 54.8761 40.4855C54.2372 41.6367 53.3678 42.6506 52.3192 43.467C51.2705 44.2835 50.0639 44.8857 48.7709 45.238C47.4779 45.5902 46.1248 45.6851 44.792 45.5171L44.7921 45.5167L44.7807 45.516C43.4402 45.4259 42.1313 45.074 40.9315 44.4812C39.7317 43.8883 38.6657 43.0666 37.7965 42.065C36.9272 41.0635 36.2724 39.9024 35.8706 38.6508C35.4689 37.3992 35.3282 36.0823 35.4569 34.7781C35.5856 33.4739 35.9811 32.2088 36.62 31.0577C37.2589 29.9065 38.1283 28.8926 39.177 28.0762C40.2256 27.2598 41.4322 26.6575 42.7252 26.3052C44.0182 25.953 45.3713 25.8581 46.7041 26.0261Z" stroke="url(#paint20_linear_164_30892)" stroke-width="0.389799"/>
+    </g>
+    <g opacity="0.6" filter="url(#filter9_f_164_30892)">
+      <path d="M58.4279 64.4728C58.4256 64.6552 58.384 64.8351 58.3058 65.0003C58.2276 65.1654 58.1146 65.312 57.9746 65.4301C57.8345 65.5482 57.6706 65.6352 57.4939 65.685C57.3172 65.7349 57.1318 65.7465 56.9503 65.7191L27.5649 62.7424C27.3819 62.7346 27.2027 62.6888 27.0387 62.608C26.8747 62.5273 26.7295 62.4133 26.6126 62.2734C26.4956 62.1335 26.4094 61.9708 26.3596 61.7958C26.3097 61.6208 26.2972 61.4373 26.323 61.2572C27.0516 57.3153 29.226 53.7809 32.4254 51.3383C35.6247 48.8958 39.6214 47.7187 43.6415 48.0352C51.9328 48.7722 58.2612 55.9212 58.4279 64.4728Z" fill="#D31CDD"/>
+    </g>
+    <path d="M59.4247 62.6451C59.4224 62.8276 59.3808 63.0075 59.3026 63.1726C59.2243 63.3378 59.1114 63.4844 58.9714 63.6025C58.8313 63.7206 58.6674 63.8076 58.4907 63.8574C58.314 63.9072 58.1286 63.9189 57.9471 63.8915L28.5617 60.9148C28.3787 60.9069 28.1995 60.8612 28.0355 60.7804C27.8715 60.6997 27.7263 60.5857 27.6094 60.4458C27.4924 60.3059 27.4062 60.1432 27.3563 59.9682C27.3065 59.7932 27.294 59.6097 27.3198 59.4296C28.0483 55.4877 30.2228 51.9533 33.4222 49.5107C36.6215 47.0681 40.6182 45.8911 44.6383 46.2076C52.9295 46.9445 59.2579 54.0936 59.4247 62.6451Z" fill="#D31CDD"/>
+    <path d="M58.0061 63.5061L57.9966 63.5047L57.9871 63.5037L28.6017 60.527L28.5904 60.5259L28.579 60.5254C28.4501 60.5199 28.3238 60.4876 28.2083 60.4307C28.0928 60.3739 27.9908 60.2937 27.9087 60.1955C27.8266 60.0973 27.7662 59.9833 27.7313 59.8608C27.6971 59.7406 27.6881 59.6149 27.7047 59.4912C28.4171 55.6484 30.5381 52.2025 33.6584 49.8203C36.7805 47.4367 40.681 46.2875 44.605 46.5959C52.6809 47.3148 58.8684 54.2828 59.0348 62.6467C59.0324 62.7711 59.0036 62.8937 58.9502 63.0064C58.896 63.1209 58.8177 63.2227 58.7203 63.3048L58.9714 63.6025L58.7203 63.3048C58.6229 63.387 58.5087 63.4476 58.3855 63.4823C58.2622 63.5171 58.1328 63.5252 58.0061 63.5061Z" fill="url(#paint21_linear_164_30892)" stroke="url(#paint22_linear_164_30892)" stroke-width="0.779599"/>
+    <g style="mix-blend-mode:overlay">
+      <path d="M56.8939 63.0731L56.8939 63.0729L56.8846 63.072L29.806 60.3375L29.8061 60.3372L29.7949 60.3367C29.6529 60.3306 29.5138 60.2954 29.3866 60.2336C29.2594 60.1718 29.1471 60.0849 29.0568 59.9785L28.9096 60.1036L29.0568 59.9785C28.9664 59.8722 28.9 59.7489 28.8616 59.6166C28.8235 59.4855 28.8136 59.3484 28.8325 59.2137C29.4908 55.6885 31.4627 52.5286 34.3679 50.346C37.2742 48.1626 40.9076 47.1127 44.5648 47.4004C52.0998 48.0698 57.8663 54.4752 58.0296 62.1379C58.0276 62.2739 57.9961 62.408 57.9369 62.5312C57.8774 62.6554 57.7911 62.7658 57.6836 62.855C57.5762 62.9442 57.4501 63.0101 57.3138 63.0478C57.1774 63.0855 57.0342 63.0942 56.8939 63.0731Z" stroke="url(#paint23_linear_164_30892)" stroke-width="0.389799"/>
+    </g>
+    <g filter="url(#filter10_f_164_30892)">
+      <ellipse cx="13.4044" cy="13.3246" rx="13.4044" ry="13.3246" transform="matrix(0.995328 0.0965522 -0.0977241 0.995214 7.36391 8.659)" fill="url(#paint24_linear_164_30892)"/>
+    </g>
+    <g filter="url(#filter11_f_164_30892)">
+      <ellipse cx="13.4044" cy="13.3246" rx="13.4044" ry="13.3246" transform="matrix(0.995328 0.0965522 -0.0977241 0.995214 5.43756 6.33017)" fill="url(#paint25_linear_164_30892)"/>
+    </g>
+    <ellipse cx="14.4768" cy="14.3905" rx="14.4768" ry="14.3905" transform="matrix(0.995328 0.0965522 -0.0977241 0.995214 3.61539 2.94052)" fill="url(#paint26_linear_164_30892)"/>
+    <ellipse cx="13.9406" cy="14.3905" rx="13.9406" ry="14.3905" transform="matrix(0.995328 0.0965522 -0.0977241 0.995214 2.54804 2.83698)" fill="url(#paint27_linear_164_30892)"/>
+    <g filter="url(#filter12_bi_164_30892)">
+      <ellipse cx="11.2597" cy="11.1926" rx="11.2597" ry="11.1926" transform="matrix(0.995328 0.0965522 -0.0977241 0.995214 4.37022 6.22665)" fill="url(#paint28_linear_164_30892)"/>
+      <path d="M25.4418 19.5159C24.8514 25.529 19.4677 29.9304 13.4142 29.3432C7.36069 28.7559 2.93481 23.403 3.52526 17.3899C4.11571 11.3767 9.49941 6.97539 15.5529 7.56261C21.6064 8.14983 26.0323 13.5028 25.4418 19.5159Z" stroke="url(#paint29_linear_164_30892)" stroke-width="0.5"/>
+    </g>
+    <g filter="url(#filter13_i_164_30892)">
+      <ellipse cx="10.7235" cy="10.6597" rx="10.7235" ry="10.6597" transform="matrix(0.995328 0.0965522 -0.0977241 0.995214 5.43756 6.33017)" fill="url(#paint30_linear_164_30892)"/>
+    </g>
+    <g filter="url(#filter14_f_164_30892)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.5692 15.1413C21.8543 15.4764 21.8148 15.979 21.4809 16.2662L12.9549 23.5994C12.6139 23.8928 12.0983 23.8479 11.8139 23.5L8.96736 20.019C8.68888 19.6785 8.73815 19.1766 9.07762 18.896L9.36373 18.6595C9.70576 18.3768 10.2122 18.426 10.4928 18.7691L12.5812 21.323L20.198 14.7718C20.5344 14.4824 21.0418 14.5216 21.329 14.8591L21.5692 15.1413Z" fill="#2336DE"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.5692 15.1413C21.8543 15.4764 21.8148 15.979 21.4809 16.2662L12.9549 23.5994C12.6139 23.8928 12.0983 23.8479 11.8139 23.5L8.96736 20.019C8.68888 19.6785 8.73815 19.1766 9.07762 18.896L9.36373 18.6595C9.70576 18.3768 10.2122 18.426 10.4928 18.7691L12.5812 21.323L20.198 14.7718C20.5344 14.4824 21.0418 14.5216 21.329 14.8591L21.5692 15.1413Z" stroke="#2336DE"/>
+    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.6733 14.0805C21.9584 14.4155 21.919 14.9182 21.5851 15.2054L13.0591 22.5386C12.718 22.8319 12.2025 22.787 11.9181 22.4391L9.07152 18.9581C8.79304 18.6176 8.84232 18.1158 9.18179 17.8352L9.4679 17.5987C9.80992 17.3159 10.3164 17.3651 10.597 17.7082L12.6854 20.2621L20.3022 13.7109C20.6386 13.4215 21.1459 13.4607 21.4332 13.7983L21.6733 14.0805Z" fill="url(#paint31_linear_164_30892)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.6733 14.0805C21.9584 14.4155 21.919 14.9182 21.5851 15.2054L13.0591 22.5386C12.718 22.8319 12.2025 22.787 11.9181 22.4391L9.07152 18.9581C8.79304 18.6176 8.84232 18.1158 9.18179 17.8352L9.4679 17.5987C9.80992 17.3159 10.3164 17.3651 10.597 17.7082L12.6854 20.2621L20.3022 13.7109C20.6386 13.4215 21.1459 13.4607 21.4332 13.7983L21.6733 14.0805Z" stroke="white"/>
+  </g>
+  <defs>
+    <filter id="filter0_df_164_30892" x="-0.467374" y="-1.31436" width="97.5829" height="106.074" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="1.00932" dy="1.00932"/>
+      <feGaussianBlur stdDeviation="1.51398"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_164_30892"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_164_30892" result="shape"/>
+      <feGaussianBlur stdDeviation="0.504661" result="effect2_foregroundBlur_164_30892"/>
+    </filter>
+    <filter id="filter1_f_164_30892" x="0.541948" y="-0.305037" width="93.5457" height="102.036" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="0.504661" result="effect1_foregroundBlur_164_30892"/>
+    </filter>
+    <filter id="filter2_df_164_30892" x="3.27301" y="9.33914" width="82.6537" height="96.5601" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="1" dy="1"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_164_30892"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_164_30892" result="shape"/>
+      <feGaussianBlur stdDeviation="0.5" result="effect2_foregroundBlur_164_30892"/>
+    </filter>
+    <filter id="filter3_f_164_30892" x="4.27301" y="10.3391" width="78.6537" height="92.5601" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_164_30892"/>
+    </filter>
+    <filter id="filter4_dd_164_30892" x="15.8532" y="68.4208" width="53.6918" height="16.6376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1.78174"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.766667 0 0 0 0 0.450873 0 0 0 0 0.214028 0 0 0 0.5 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_164_30892"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.459524 0 0 0 0 0.0541667 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow_164_30892" result="effect2_dropShadow_164_30892"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_164_30892" result="shape"/>
+    </filter>
+    <filter id="filter5_f_164_30892" x="18.3827" y="68.9503" width="48.6329" height="11.5786" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="0.517" result="effect1_foregroundBlur_164_30892"/>
+    </filter>
+    <filter id="filter6_dd_164_30892" x="14.9059" y="78.0683" width="53.6918" height="16.6376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1.78174"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.766667 0 0 0 0 0.450873 0 0 0 0 0.214028 0 0 0 0.5 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_164_30892"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.459524 0 0 0 0 0.0541667 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow_164_30892" result="effect2_dropShadow_164_30892"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_164_30892" result="shape"/>
+    </filter>
+    <filter id="filter7_f_164_30892" x="17.4354" y="78.5978" width="48.6329" height="11.5786" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="0.517" result="effect1_foregroundBlur_164_30892"/>
+    </filter>
+    <filter id="filter8_f_164_30892" x="31.7289" y="22.7403" width="28.3284" height="27.6103" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="1.5592" result="effect1_foregroundBlur_164_30892"/>
+    </filter>
+    <filter id="filter9_f_164_30892" x="23.1915" y="44.8662" width="38.3548" height="23.9857" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="1.5592" result="effect1_foregroundBlur_164_30892"/>
+    </filter>
+    <filter id="filter10_f_164_30892" x="-4.00258" y="-0.110748" width="46.8123" height="46.6495" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_164_30892"/>
+    </filter>
+    <filter id="filter11_f_164_30892" x="1.07108" y="4.56042" width="32.8123" height="32.6495" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_164_30892"/>
+    </filter>
+    <filter id="filter12_bi_164_30892" x="1.22237" y="5.26007" width="26.5223" height="26.3856" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="1"/>
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_164_30892"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_164_30892" result="shape"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.225313 0 0 0 0 0.364577 0 0 0 0 0.858333 0 0 0 0.25 0"/>
+      <feBlend mode="normal" in2="shape" result="effect2_innerShadow_164_30892"/>
+    </filter>
+    <filter id="filter13_i_164_30892" x="4.34438" y="7.31439" width="21.4498" height="23.3196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.225313 0 0 0 0 0.364577 0 0 0 0 0.858333 0 0 0 0.7 0"/>
+      <feBlend mode="normal" in2="shape" result="effect1_innerShadow_164_30892"/>
+    </filter>
+    <filter id="filter14_f_164_30892" x="5.28683" y="11.078" width="19.9729" height="16.2151" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_164_30892"/>
+    </filter>
+    <linearGradient id="paint0_linear_164_30892" x1="20.0081" y1="89.3695" x2="74.4159" y2="41.7544" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#574F67"/>
+      <stop offset="0.401042" stop-color="#574F67"/>
+      <stop offset="0.53125" stop-color="#574F67"/>
+      <stop offset="0.671875" stop-color="#574F67"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_164_30892" x1="56.7796" y1="-1.05675e-06" x2="49.273" y2="36.6223" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#9288A6"/>
+      <stop offset="1" stop-color="#7A708F" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_164_30892" x1="35.69" y1="0" x2="35.69" y2="87.216" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#7A708F"/>
+      <stop offset="1" stop-color="#666171"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_164_30892" x1="56.7796" y1="4.15314" x2="18.0787" y2="36.4443" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint4_linear_164_30892" x1="19.8386" y1="88.4752" x2="73.713" y2="41.2539" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFA25A"/>
+      <stop offset="0.401042" stop-color="#EC9937"/>
+      <stop offset="0.53125" stop-color="#D88538"/>
+      <stop offset="0.671875" stop-color="#FFA25A"/>
+    </linearGradient>
+    <linearGradient id="paint5_linear_164_30892" x1="56.2986" y1="-1.04617e-06" x2="48.8777" y2="36.2604" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFD15A"/>
+      <stop offset="1" stop-color="#FFA25A" stop-opacity="0"/>
+      <stop offset="1" stop-color="#FFD15A" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint6_linear_164_30892" x1="35.3877" y1="0" x2="35.3877" y2="86.3433" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFD15B"/>
+      <stop offset="0.994792" stop-color="#FFB45B"/>
+    </linearGradient>
+    <linearGradient id="paint7_linear_164_30892" x1="56.2986" y1="4.11158" x2="17.9743" y2="36.138" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint8_linear_164_30892" x1="23.3867" y1="0" x2="23.3867" y2="5.34486" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#E6F9FF"/>
+    </linearGradient>
+    <linearGradient id="paint9_linear_164_30892" x1="23.3867" y1="0" x2="23.3867" y2="5.34486" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#DFFBFF"/>
+      <stop offset="1" stop-color="#E9EFFF"/>
+    </linearGradient>
+    <linearGradient id="paint10_linear_164_30892" x1="30.335" y1="-5.29071e-08" x2="30.1304" y2="5.59158" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#C8CFE9"/>
+    </linearGradient>
+    <linearGradient id="paint11_linear_164_30892" x1="23.3867" y1="0" x2="23.3867" y2="5.34486" gradientUnits="userSpaceOnUse">
+      <stop offset="0.489583" stop-opacity="0"/>
+      <stop offset="1"/>
+    </linearGradient>
+    <linearGradient id="paint12_linear_164_30892" x1="37.2062" y1="0.254517" x2="36.6724" y2="5.01609" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="0.130208" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint13_linear_164_30892" x1="23.3867" y1="0" x2="23.3867" y2="5.34486" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#E6F9FF"/>
+    </linearGradient>
+    <linearGradient id="paint14_linear_164_30892" x1="23.3867" y1="0" x2="23.3867" y2="5.34486" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#DFFBFF"/>
+      <stop offset="1" stop-color="#E9EFFF"/>
+    </linearGradient>
+    <linearGradient id="paint15_linear_164_30892" x1="30.335" y1="-5.29071e-08" x2="30.1304" y2="5.59158" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#C8CFE9"/>
+    </linearGradient>
+    <linearGradient id="paint16_linear_164_30892" x1="23.3867" y1="0" x2="23.3867" y2="5.34486" gradientUnits="userSpaceOnUse">
+      <stop offset="0.489583" stop-opacity="0"/>
+      <stop offset="1"/>
+    </linearGradient>
+    <linearGradient id="paint17_linear_164_30892" x1="37.2062" y1="0.254517" x2="36.6724" y2="5.01609" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="0.130208" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint18_linear_164_30892" x1="51.018" y1="26.2429" x2="40.1079" y2="35.4079" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F873FF"/>
+      <stop offset="0.0729167" stop-color="#EA24F4"/>
+      <stop offset="1" stop-color="#C41CCD"/>
+    </linearGradient>
+    <linearGradient id="paint19_linear_164_30892" x1="57.9126" y1="26.0433" x2="45.2453" y2="35.1075" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F75BFF"/>
+      <stop offset="0.734375" stop-color="#D71FE1"/>
+      <stop offset="1" stop-color="#BB17C4"/>
+    </linearGradient>
+    <linearGradient id="paint20_linear_164_30892" x1="52.8316" y1="27.3735" x2="42.9361" y2="36.1266" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="0.130208" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint21_linear_164_30892" x1="49.6788" y1="48.4772" x2="43.3583" y2="58.9969" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F873FF"/>
+      <stop offset="0.0729167" stop-color="#EA24F4"/>
+      <stop offset="1" stop-color="#C41CCD"/>
+    </linearGradient>
+    <linearGradient id="paint22_linear_164_30892" x1="60.6812" y1="47.5042" x2="51.4616" y2="60.2134" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F75BFF"/>
+      <stop offset="0.734375" stop-color="#D71FE1"/>
+      <stop offset="1" stop-color="#BB17C4"/>
+    </linearGradient>
+    <linearGradient id="paint23_linear_164_30892" x1="52.6956" y1="50.876" x2="47.1483" y2="59.0885" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="0.130208" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint24_linear_164_30892" x1="13.9009" y1="9.37656" x2="26.6759" y2="41.9998" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#B76E2E"/>
+      <stop offset="1" stop-color="#F1A15C" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint25_linear_164_30892" x1="13.9009" y1="9.37656" x2="26.6759" y2="41.9998" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#753E10"/>
+      <stop offset="1" stop-color="#854F21" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint26_linear_164_30892" x1="14.4768" y1="6.35365e-08" x2="12.3575" y2="38.3762" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C2C8FF"/>
+      <stop offset="1" stop-color="#6A75DA"/>
+    </linearGradient>
+    <linearGradient id="paint27_linear_164_30892" x1="13.9406" y1="0" x2="13.9406" y2="28.7811" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A6AFFF"/>
+      <stop offset="1" stop-color="#B9C0FF"/>
+    </linearGradient>
+    <linearGradient id="paint28_linear_164_30892" x1="5.62986" y1="22.3853" x2="15.5252" y2="6.4317" gradientUnits="userSpaceOnUse">
+      <stop offset="0.399267" stop-color="#B9C0FF"/>
+      <stop offset="1" stop-color="#9AA4FC"/>
+    </linearGradient>
+    <linearGradient id="paint29_linear_164_30892" x1="15.5773" y1="7.3138" x2="13.416" y2="29.5945" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FCFCFC" stop-opacity="0"/>
+      <stop offset="1" stop-color="#C1D3FF"/>
+    </linearGradient>
+    <linearGradient id="paint30_linear_164_30892" x1="10.7235" y1="0" x2="10.7235" y2="21.3193" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#909BFD"/>
+      <stop offset="1" stop-color="#A5AEFF"/>
+    </linearGradient>
+    <linearGradient id="paint31_linear_164_30892" x1="15.7544" y1="12.6858" x2="14.7251" y2="23.2957" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#ECEBED"/>
+    </linearGradient>
+    <clipPath id="clip0_164_30892">
+      <rect width="96.5174" height="105.525" fill="white" transform="translate(0.0798645 0.0733337)"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/webapp/src/images/names/chest.png b/webapp/src/images/names/chest.png
new file mode 100644
index 0000000000..85dd01e552
Binary files /dev/null and b/webapp/src/images/names/chest.png differ
diff --git a/webapp/src/images/names/create.png b/webapp/src/images/names/create.png
new file mode 100644
index 0000000000..f687f5a41e
Binary files /dev/null and b/webapp/src/images/names/create.png differ
diff --git a/webapp/src/images/names/get-url.svg b/webapp/src/images/names/get-url.svg
new file mode 100644
index 0000000000..79836523a4
--- /dev/null
+++ b/webapp/src/images/names/get-url.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="54" height="51" viewBox="0 0 54 51" fill="none">
+  <path d="M13.5948 43.7153L6.63934 42.2181C6.00703 42.0934 5.50117 41.7706 5.12178 41.25C4.74239 40.731 4.59485 40.1596 4.67916 39.5357L5.37471 32.4867L0.632319 27.1219C0.210773 26.6644 0 26.1238 0 25.5C0 24.8762 0.210773 24.3356 0.632319 23.8781L5.37471 18.5133L4.67916 11.4643C4.59485 10.8404 4.74239 10.269 5.12178 9.75003C5.50117 9.22935 6.00703 8.90663 6.63934 8.78187L13.5948 7.28472L17.2623 1.17138C17.5995 0.630742 18.0632 0.277249 18.6534 0.1109C19.2436 -0.0554498 19.8337 -0.0346562 20.4239 0.173281L27 2.91805L33.5761 0.173281C34.1663 -0.0346562 34.7564 -0.0554498 35.3466 0.1109C35.9368 0.277249 36.4005 0.630742 36.7377 1.17138L40.4052 7.28472L47.3607 8.78187C47.993 8.90663 48.4988 9.22935 48.8782 9.75003C49.2576 10.269 49.4052 10.8404 49.3208 11.4643L48.6253 18.5133L53.3677 23.8781C53.7892 24.3356 54 24.8762 54 25.5C54 26.1238 53.7892 26.6644 53.3677 27.1219L48.6253 32.4867L49.3208 39.5357C49.4052 40.1596 49.2576 40.731 48.8782 41.25C48.4988 41.7706 47.993 42.0934 47.3607 42.2181L40.4052 43.7153L36.7377 49.8286C36.4005 50.3693 35.9368 50.7227 35.3466 50.8891C34.7564 51.0554 34.1663 51.0347 33.5761 50.8267L27 48.082L20.4239 50.8267C19.8337 51.0347 19.2436 51.0554 18.6534 50.8891C18.0632 50.7227 17.5995 50.3693 17.2623 49.8286L13.5948 43.7153ZM22.5738 32.6114C23.0375 33.0689 23.6276 33.2976 24.3443 33.2976C25.0609 33.2976 25.6511 33.0689 26.1148 32.6114L36.8642 22.0067C37.37 21.5076 37.623 20.9146 37.623 20.2276C37.623 19.5422 37.37 18.95 36.8642 18.4509C36.3583 17.9519 35.758 17.7024 35.0633 17.7024C34.3669 17.7024 33.7658 17.9519 33.26 18.4509L24.3443 27.2467L20.6768 23.6909C20.171 23.2335 19.5707 23.0147 18.876 23.0347C18.1796 23.0563 17.5995 23.2959 17.1358 23.7533C16.6721 24.2108 16.4403 24.793 16.4403 25.5C16.4403 26.207 16.6721 26.7892 17.1358 27.2467L22.5738 32.6114Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/webapp/src/images/names/governance.png b/webapp/src/images/names/governance.png
new file mode 100644
index 0000000000..f7a7afdf74
Binary files /dev/null and b/webapp/src/images/names/governance.png differ
diff --git a/webapp/src/images/names/governance.svg b/webapp/src/images/names/governance.svg
new file mode 100644
index 0000000000..ffac123683
--- /dev/null
+++ b/webapp/src/images/names/governance.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="110" height="34" viewBox="0 0 110 34" fill="none">
+  <path d="M106.022 8.73603C106.022 12.1152 103.3 14.818 99.8971 14.818C96.4941 14.818 93.7719 12.1151 93.7719 8.73603C93.7719 5.357 96.4941 2.65411 99.8971 2.65411C103.298 2.60132 106.022 5.357 106.022 8.73603Z" fill="white"/>
+  <path d="M87.9593 0.00175457C89.4257 -0.0510431 90.6304 1.09431 90.6304 2.54827V4.10787C90.5261 9.51344 91.7307 13.4124 94.0335 15.338C94.3485 15.598 94.6614 15.8051 94.9232 16.065C96.3364 17.0012 98.0113 17.5718 99.8438 17.5718C101.938 17.5718 103.928 16.8448 105.445 15.5959C108.01 16.7392 110 18.8715 110 22.4072V31.7703C110 32.4973 109.423 33.0171 108.744 33.0171H90.9965C90.2644 33.0171 89.7408 32.4445 89.7408 31.7703L89.7388 21.6802C89.8963 19.8607 89.477 18.094 88.4831 16.5851C86.442 13.5694 85.446 9.35998 85.5503 4.00483V2.65235C85.5503 1.30189 86.5972 0.054573 87.9593 0.00175457Z" fill="white"/>
+  <path d="M77.5651 8.73603C77.5651 12.1152 74.843 14.818 71.44 14.818C68.0369 14.818 65.3148 12.1151 65.3148 8.73603C65.3148 5.357 68.0369 2.65411 71.44 2.65411C74.8411 2.60132 77.5651 5.357 77.5651 8.73603Z" fill="white"/>
+  <path d="M59.5022 0.00175457C60.9686 -0.0510431 62.1732 1.09431 62.1732 2.54827V4.10787C62.0689 9.51344 63.2735 13.4124 65.5764 15.338C65.8913 15.598 66.2042 15.8051 66.466 16.065C67.8792 17.0012 69.5542 17.5718 71.3867 17.5718C73.4809 17.5718 75.4709 16.8448 76.9883 15.5959C79.5529 16.7392 81.5428 18.8715 81.5428 22.4072V31.7703C81.5428 32.4973 80.9661 33.0171 80.2871 33.0171H62.5394C61.8072 33.0171 61.2837 32.4445 61.2837 31.7703L61.2816 21.6802C61.4391 19.8607 61.0198 18.094 60.0259 16.5851C57.9849 13.5694 56.9888 9.35998 57.0931 4.00483V2.65235C57.0931 1.30189 58.1401 0.054573 59.5022 0.00175457Z" fill="white"/>
+  <path d="M49.108 8.73603C49.108 12.1152 46.3859 14.818 42.9828 14.818C39.5798 14.818 36.8577 12.1151 36.8577 8.73603C36.8577 5.357 39.5798 2.65411 42.9828 2.65411C46.3839 2.60132 49.108 5.357 49.108 8.73603Z" fill="white"/>
+  <path d="M31.0451 0.00175457C32.5115 -0.0510431 33.7161 1.09431 33.7161 2.54827V4.10787C33.6118 9.51344 34.8164 13.4124 37.1192 15.338C37.4342 15.598 37.7471 15.8051 38.0089 16.065C39.4221 17.0012 41.0971 17.5718 42.9295 17.5718C45.0238 17.5718 47.0137 16.8448 48.5311 15.5959C51.0957 16.7392 53.0857 18.8715 53.0857 22.4072V31.7703C53.0857 32.4973 52.5089 33.0171 51.83 33.0171H34.0822C33.3501 33.0171 32.8265 32.4445 32.8265 31.7703L32.8245 21.6802C32.982 19.8607 32.5627 18.094 31.5688 16.5851C29.5277 13.5694 28.5317 9.35998 28.636 4.00483V2.65235C28.636 1.30189 29.683 0.054573 31.0451 0.00175457Z" fill="white"/>
+  <path d="M20.6509 8.73603C20.6509 12.1152 17.9287 14.818 14.5257 14.818C11.1226 14.818 8.40052 12.1151 8.40052 8.73603C8.40052 5.357 11.1226 2.65411 14.5257 2.65411C17.9268 2.60132 20.6509 5.357 20.6509 8.73603Z" fill="white"/>
+  <path d="M2.58792 0.00175457C4.05431 -0.0510431 5.25893 1.09431 5.25893 2.54827V4.10787C5.15462 9.51344 6.35925 13.4124 8.66209 15.338C8.97705 15.598 9.28995 15.8051 9.55173 16.065C10.9649 17.0012 12.6399 17.5718 14.4724 17.5718C16.5666 17.5718 18.5566 16.8448 20.074 15.5959C22.6386 16.7392 24.6286 18.8715 24.6286 22.4072V31.7703C24.6286 32.4973 24.0518 33.0171 23.3729 33.0171H5.62511C4.89296 33.0171 4.36939 32.4445 4.36939 31.7703L4.36735 21.6802C4.52483 19.8607 4.10557 18.094 3.11164 16.5851C1.07058 13.5694 0.0745506 9.35998 0.178844 4.00483V2.65235C0.178844 1.30189 1.22581 0.054573 2.58792 0.00175457Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/webapp/src/images/names/landmark.png b/webapp/src/images/names/landmark.png
new file mode 100644
index 0000000000..04ed4aaa98
Binary files /dev/null and b/webapp/src/images/names/landmark.png differ
diff --git a/webapp/src/images/names/own-space.png b/webapp/src/images/names/own-space.png
new file mode 100644
index 0000000000..fc4d1fbdd3
Binary files /dev/null and b/webapp/src/images/names/own-space.png differ
diff --git a/webapp/src/images/names/passports.png b/webapp/src/images/names/passports.png
new file mode 100644
index 0000000000..6eb7da2c1b
Binary files /dev/null and b/webapp/src/images/names/passports.png differ
diff --git a/webapp/src/images/names/stand-out.svg b/webapp/src/images/names/stand-out.svg
new file mode 100644
index 0000000000..9c1722bc13
--- /dev/null
+++ b/webapp/src/images/names/stand-out.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="67" height="83" viewBox="0 0 67 83" fill="none">
+  <path d="M34.7423 37.3186V46.6186H40.3111C40.3926 46.4025 40.442 46.1714 40.442 45.9253L40.4391 19.3C40.4127 19.3 49.9541 12.0283 49.9541 12.0283C49.9541 12.0283 51.3848 9.72962 49.954 8.36716C49.4044 7.84497 48.7007 7.5899 47.9883 7.5899C47.3456 7.5899 46.6971 7.79697 46.1504 8.19912L38.2857 13.487C36.5748 14.7499 30.5476 14.8402 28.7143 13.487L20.8481 8.19912C19.6953 7.35116 18.0613 7.20791 17.0159 8.20112C15.5851 9.56357 17.0159 12.0283 17.0159 12.0283L26.5593 19.3V45.9284C26.5593 46.1745 26.6088 46.4056 26.6902 46.6217H32.259V37.3186H34.7423Z" fill="white"/>
+  <path d="M63.7496 63.7184H47.418V49.5213C47.418 47.9217 46.1559 46.6193 44.606 46.6193H22.2957C20.7458 46.6193 19.4837 47.9217 19.4837 49.5213V63.7184H3.25114C1.45986 63.7184 0 65.2249 0 67.0736L0 83H67V67.0736C67 65.2249 65.541 63.7184 63.7496 63.7184Z" fill="white"/>
+  <path d="M33.5006 11.5061C36.5743 11.5061 39.0752 8.9252 39.0752 5.75307C39.0752 2.58094 36.5743 0 33.5006 0C30.4269 0 27.926 2.58094 27.926 5.75307C27.926 8.9252 30.4269 11.5061 33.5006 11.5061Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/webapp/src/images/names/unlock.svg b/webapp/src/images/names/unlock.svg
new file mode 100644
index 0000000000..ad177804ff
--- /dev/null
+++ b/webapp/src/images/names/unlock.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79" height="80" viewBox="0 0 79 80" fill="none">
+  <path d="M41.6104 7.41024C41.6104 12.3502 34.1922 12.3502 34.1922 7.41024C34.1922 2.47026 41.6104 2.47026 41.6104 7.41024Z" fill="white"/>
+  <path d="M78.9681 51.2741C78.6321 48.3273 75.931 45.3804 59.1513 45.5481C56.6214 41.4238 52.9124 38.1381 48.4426 36.2865V21.217C48.9498 21.0492 49.3715 20.6282 49.5395 20.1217C49.7931 19.2798 49.3715 18.2701 48.4426 18.0168H48.3569V10.8601C49.7075 10.6924 50.801 11.0278 52.066 11.3666C53.1629 11.7021 54.3421 12.0408 55.6927 12.0408C56.368 12.0408 57.0433 11.9553 57.7152 11.7876C58.2225 11.7021 58.5585 11.1989 58.5585 10.6924V3.87109C58.5585 3.53562 58.3905 3.19686 58.1368 3.02912C57.8832 2.86139 57.5472 2.77588 57.2079 2.86139C55.4357 3.28237 54.1708 2.9469 52.6556 2.52591C51.3907 2.19044 50.0401 1.76946 48.3535 1.93719L48.3568 1.09523C48.3568 0.50651 47.8496 0 47.2599 0C46.6703 0 46.163 0.506493 46.163 1.09523V17.346L45.4054 17.0928L42.9612 14.0603C42.118 12.9651 40.7674 12.3764 39.4202 12.3764H36.1328C32.2524 12.3764 29.3866 18.9444 28.5433 20.9636C28.2073 21.8056 28.629 22.8153 29.4723 23.1541C29.6403 23.2396 29.8939 23.2396 30.0619 23.2396C30.7372 23.2396 31.3268 22.8186 31.6628 22.1444C32.338 20.4604 33.2636 18.6909 34.1926 17.5135L33.9389 24.0816L31.3235 36.1225C24.7453 38.6484 19.7715 44.1212 17.7451 50.771C1.38736 54.7276 -0.299182 58.4343 0.0364393 61.2956C1.13337 69.6297 28.7936 67.0216 40.5994 65.5054C52.573 64.0748 80.0652 59.6113 78.9681 51.2741ZM7.45794 60.3682C9.14448 59.5262 12.0959 58.3488 16.9877 57.0003C16.9877 58.01 16.9877 59.0197 17.1557 60.1149C17.2414 60.5359 17.3237 60.8714 17.4094 61.2924C12.7714 61.2101 9.3983 60.8747 7.45794 60.3682ZM43.2143 19.5329C43.3823 19.7861 43.7216 19.9538 43.9719 20.0394L46.2481 20.7958V35.4443C44.8975 35.0233 43.5503 34.7701 42.1174 34.6024V24.1637L41.8638 17.8489L43.2143 19.5329ZM37.733 25.0056H38.4907V34.6024C37.9834 34.6024 37.3937 34.6879 36.8898 34.7701C36.4682 34.8556 36.0465 34.9378 35.6249 35.0233L37.733 25.0056ZM38.1547 45.3804C33.1807 46.0546 29.0465 49.7579 27.9494 54.642C27.7814 55.6517 26.9382 56.3259 26.0092 56.4936H25.1659C23.901 56.2404 23.1434 54.9774 23.3937 53.7145C24.9123 46.8932 30.6472 41.6735 37.5615 40.8316C38.8264 40.6638 40.0056 41.588 40.177 42.8509C40.345 44.0349 39.5019 45.2127 38.1547 45.3804ZM62.3557 55.5698C62.3557 55.1489 62.3557 54.8134 62.27 54.3924C62.102 53.2972 61.934 52.3731 61.5948 51.36C66.6544 51.4455 69.8595 51.8665 71.628 52.2875C69.9447 53.2117 66.8256 54.3924 62.3557 55.5698Z" fill="white"/>
+  <path d="M22.2152 71.7347C27.0211 77.543 34.5286 80.8288 42.5397 79.819C50.5507 78.8091 57.0431 73.7575 60.2483 66.936C55.103 68.1134 48.8642 69.2087 41.3608 70.1362C33.7713 71.1459 27.5295 71.6524 22.216 71.7346L22.2152 71.7347Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/webapp/src/images/user-circle.svg b/webapp/src/images/user-circle.svg
new file mode 100644
index 0000000000..fc2a57e438
--- /dev/null
+++ b/webapp/src/images/user-circle.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
+  <g clip-path="url(#clip0_166_33435)">
+    <path d="M10.334 1C5.09419 1 0.833984 5.2602 0.833984 10.5C0.833984 15.7398 5.09419 20 10.334 20C15.5738 20 19.834 15.7398 19.834 10.5C19.834 5.2602 15.5738 1 10.334 1ZM10.334 5.1602C11.634 5.1602 12.6942 6.22036 12.6942 7.5204C12.6942 8.82044 11.634 9.8806 10.334 9.8806C9.03395 9.8806 7.97379 8.82044 7.97379 7.5204C7.97379 6.22036 9.03395 5.1602 10.334 5.1602ZM14.2136 14.8204C14.2136 15.0407 14.0339 15.2407 13.7933 15.2407L6.87366 15.2399C6.65335 15.2399 6.45335 15.0603 6.45335 14.8196V14.5399C6.45335 12.4001 8.19319 10.6603 10.3329 10.6603C12.4727 10.6603 14.2125 12.4002 14.2125 14.5399L14.2136 14.8204Z" fill="#A09BA8"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_166_33435">
+      <rect width="20" height="20" fill="white" transform="translate(0.333984 0.5)"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/webapp/src/images/verified.svg b/webapp/src/images/verified.svg
new file mode 100644
index 0000000000..53ae2cbc54
--- /dev/null
+++ b/webapp/src/images/verified.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23" fill="none">
+  <path d="M6.29749 18.3207L3.72804 17.7601C3.49446 17.7134 3.30759 17.5925 3.16744 17.3976C3.02728 17.2032 2.97278 16.9893 3.00393 16.7557L3.26087 14.1162L1.50898 12.1073C1.35325 11.936 1.27539 11.7336 1.27539 11.5C1.27539 11.2664 1.35325 11.064 1.50898 10.8927L3.26087 8.88383L3.00393 6.24431C2.97278 6.01073 3.02728 5.79676 3.16744 5.60242C3.30759 5.40745 3.49446 5.28661 3.72804 5.23989L6.29749 4.67929L7.65228 2.39015C7.77686 2.1877 7.94816 2.05534 8.16617 1.99305C8.38419 1.93076 8.6022 1.93855 8.82021 2.01641L11.2495 3.04419L13.6788 2.01641C13.8968 1.93855 14.1148 1.93076 14.3328 1.99305C14.5509 2.05534 14.7221 2.1877 14.8467 2.39015L16.2015 4.67929L18.771 5.23989C19.0046 5.28661 19.1914 5.40745 19.3316 5.60242C19.4717 5.79676 19.5262 6.01073 19.4951 6.24431L19.2381 8.88383L20.99 10.8927C21.1458 11.064 21.2236 11.2664 21.2236 11.5C21.2236 11.7336 21.1458 11.936 20.99 12.1073L19.2381 14.1162L19.4951 16.7557C19.5262 16.9893 19.4717 17.2032 19.3316 17.3976C19.1914 17.5925 19.0046 17.7134 18.771 17.7601L16.2015 18.3207L14.8467 20.6098C14.7221 20.8123 14.5509 20.9446 14.3328 21.0069C14.1148 21.0692 13.8968 21.0614 13.6788 20.9836L11.2495 19.9558L8.82021 20.9836C8.6022 21.0614 8.38419 21.0692 8.16617 21.0069C7.94816 20.9446 7.77686 20.8123 7.65228 20.6098L6.29749 18.3207ZM9.6144 14.1629C9.7857 14.3342 10.0037 14.4198 10.2684 14.4198C10.5332 14.4198 10.7512 14.3342 10.9225 14.1629L14.8934 10.1919C15.0803 10.005 15.1737 9.78298 15.1737 9.52572C15.1737 9.26909 15.0803 9.04734 14.8934 8.86047C14.7066 8.6736 14.4848 8.58017 14.2282 8.58017C13.9709 8.58017 13.7489 8.6736 13.562 8.86047L10.2684 12.154L8.91365 10.8226C8.72678 10.6513 8.50503 10.5694 8.2484 10.5769C7.99114 10.585 7.77686 10.6747 7.60557 10.846C7.43427 11.0172 7.34862 11.2353 7.34862 11.5C7.34862 11.7647 7.43427 11.9827 7.60557 12.154L9.6144 14.1629Z" fill="#FCFCFC"/>
+</svg>
\ No newline at end of file
diff --git a/webapp/src/modules/ens/actions.spec.ts b/webapp/src/modules/ens/actions.spec.ts
new file mode 100644
index 0000000000..b539454c68
--- /dev/null
+++ b/webapp/src/modules/ens/actions.spec.ts
@@ -0,0 +1,95 @@
+import { ChainId } from '@dcl/schemas'
+import { buildTransactionPayload } from 'decentraland-dapps/dist/modules/transaction/utils'
+import {
+  CLAIM_NAME_REQUEST,
+  claimNameRequest,
+  CLAIM_NAME_TRANSACTION_SUBMITTED,
+  claimNameTransactionSubmitted,
+  CLAIM_NAME_SUCCESS,
+  claimNameSuccess,
+  CLAIM_NAME_FAILURE,
+  claimNameFailure,
+  CLAIM_NAME_CLEAR,
+  claimNameClear
+} from './actions'
+import { ENS, ENSError } from './types'
+
+describe('claimName actions', () => {
+  let name: string
+  let subdomain: string
+  let address: string
+  let chainId: ChainId
+  let txHash: string
+  let ens: ENS
+  beforeEach(() => {
+    subdomain = 'example'
+    address = '0xExampleAddress'
+    chainId = ChainId.ETHEREUM_MAINNET // Replace with actual ChainId
+  })
+  describe('when handling the CLAIM_NAME_REQUEST action', () => {
+    beforeEach(() => {
+      name = 'exampleName'
+    })
+    it('should create an action to request a name claim', () => {
+      expect(claimNameRequest(name)).toEqual({
+        type: CLAIM_NAME_REQUEST,
+        payload: { name }
+      })
+    })
+  })
+
+  describe('when handling the CLAIM_NAME_TRANSACTION_SUBMITTED action', () => {
+    beforeEach(() => {
+      txHash = '0xExampleTxHash'
+      subdomain = 'exampleSubdomain'
+      address = '0xExampleAddress'
+      chainId = ChainId.ETHEREUM_MAINNET // Replace with actual ChainId
+    })
+    it('should create an action when a name claim transaction is submitted', () => {
+      expect(
+        claimNameTransactionSubmitted(subdomain, address, chainId, txHash)
+      ).toEqual({
+        type: CLAIM_NAME_TRANSACTION_SUBMITTED,
+        payload: {
+          ...buildTransactionPayload(chainId, txHash, { subdomain, address })
+        }
+      })
+    })
+  })
+
+  describe('when handling the CLAIM_NAME_SUCCESS action', () => {
+    beforeEach(() => {
+      name = 'exampleName'
+      txHash = '0xExampleTxHash'
+      ens = {} as ENS
+    })
+    it('should create an action when a name claim is successful', () => {
+      expect(claimNameSuccess({} as ENS, name, txHash)).toEqual({
+        type: CLAIM_NAME_SUCCESS,
+        payload: { ens, name, txHash }
+      })
+    })
+  })
+
+  describe('when handling the CLAIM_NAME_FAILURE action', () => {
+    beforeEach(() => {
+      name = 'exampleName'
+    })
+    it('should create an action when a name claim fails', () => {
+      const error = {} as ENSError
+      expect(claimNameFailure(error)).toEqual({
+        type: CLAIM_NAME_FAILURE,
+        payload: { error }
+      })
+    })
+  })
+
+  describe('when handling the CLAIM_NAME_CLEAR action', () => {
+    it('should create an action to clear name claim data', () => {
+      expect(claimNameClear()).toEqual({
+        type: CLAIM_NAME_CLEAR,
+        payload: undefined
+      })
+    })
+  })
+})
diff --git a/webapp/src/modules/ens/actions.ts b/webapp/src/modules/ens/actions.ts
new file mode 100644
index 0000000000..78975061f5
--- /dev/null
+++ b/webapp/src/modules/ens/actions.ts
@@ -0,0 +1,43 @@
+import { action } from 'typesafe-actions'
+import { ChainId } from '@dcl/schemas'
+import { buildTransactionPayload } from 'decentraland-dapps/dist/modules/transaction/utils'
+import { ENS, ENSError } from './types'
+
+// Claim a new name
+export const CLAIM_NAME_REQUEST = '[Request] Claim Name'
+export const CLAIM_NAME_SUCCESS = '[Success] Claim Name'
+export const CLAIM_NAME_FAILURE = '[Failure] Claim Name'
+export const CLAIM_NAME_TRANSACTION_SUBMITTED = '[Submitted] Claim Name'
+export const CLAIM_NAME_CLEAR = '[Clear] Claim Name'
+
+export const claimNameRequest = (name: string) =>
+  action(CLAIM_NAME_REQUEST, { name })
+
+export const claimNameTransactionSubmitted = (
+  subdomain: string,
+  address: string,
+  chainId: ChainId,
+  txHash: string
+) =>
+  action(CLAIM_NAME_TRANSACTION_SUBMITTED, {
+    ...buildTransactionPayload(chainId, txHash, { subdomain, address })
+  })
+
+export const claimNameSuccess = (ens: ENS, name: string, txHash: string) =>
+  action(CLAIM_NAME_SUCCESS, {
+    ens,
+    name,
+    txHash
+  })
+
+export const claimNameFailure = (error: ENSError) =>
+  action(CLAIM_NAME_FAILURE, { error })
+export const claimNameClear = () => action(CLAIM_NAME_CLEAR)
+
+export type ClaimNameRequestAction = ReturnType<typeof claimNameRequest>
+export type ClaimNameSuccessAction = ReturnType<typeof claimNameSuccess>
+export type ClaimNameFailureAction = ReturnType<typeof claimNameFailure>
+export type ClaimNameTransactionSubmittedAction = ReturnType<
+  typeof claimNameTransactionSubmitted
+>
+export type ClaimNameClearAction = ReturnType<typeof claimNameClear>
diff --git a/webapp/src/modules/ens/reducer.spec.ts b/webapp/src/modules/ens/reducer.spec.ts
new file mode 100644
index 0000000000..57cd97afe9
--- /dev/null
+++ b/webapp/src/modules/ens/reducer.spec.ts
@@ -0,0 +1,68 @@
+import { loadingReducer } from 'decentraland-dapps/dist/modules/loading/reducer'
+import { claimNameSuccess, claimNameFailure, claimNameClear } from './actions'
+import { ENSState, ensReducer } from './reducer'
+import { ENS, ENSError } from './types'
+
+describe('ENS Reducer', () => {
+  const INITIAL_STATE = {
+    data: {},
+    authorizations: {},
+    loading: [],
+    error: null
+  }
+
+  let ens: ENS
+  let successAction: ReturnType<typeof claimNameSuccess>
+  let failureAction: ReturnType<typeof claimNameFailure>
+  let clearAction: ReturnType<typeof claimNameClear>
+  let initialState: ENSState
+
+  describe('when handling the CLAIM_NAME_SUCCESS action', () => {
+    beforeEach(() => {
+      ens = { subdomain: 'example' } as ENS
+      successAction = claimNameSuccess(ens, ens.subdomain, 'aTxHash')
+      initialState = { ...INITIAL_STATE } as ENSState
+    })
+    it('should return an state with the loading action removed and the new ens subdomain added to the data', () => {
+      expect(ensReducer(initialState, successAction)).toEqual({
+        ...initialState,
+        loading: loadingReducer(initialState.loading, successAction),
+        data: {
+          ...initialState.data,
+          [ens.subdomain]: {
+            ...initialState.data[ens.subdomain],
+            ...ens
+          }
+        }
+      })
+    })
+  })
+
+  describe('when handling the CLAIM_NAME_FAILURE action', () => {
+    const ensError = {} as ENSError
+    beforeEach(() => {
+      failureAction = claimNameFailure(ensError)
+      initialState = { ...INITIAL_STATE } as ENSState
+    })
+    it('should return an state with the loading action removed and the error set', () => {
+      expect(ensReducer(initialState, failureAction)).toEqual({
+        ...initialState,
+        loading: loadingReducer(initialState.loading, failureAction),
+        error: ensError
+      })
+    })
+  })
+  describe('when handling the CLAIM_NAME_CLEAR action', () => {
+    beforeEach(() => {
+      clearAction = claimNameClear()
+      initialState = { ...INITIAL_STATE, error: {} as ENSError } as ENSState
+    })
+    it('should return a state with the error cleared', () => {
+      expect(ensReducer(initialState, clearAction)).toEqual({
+        ...initialState,
+        loading: loadingReducer(initialState.loading, failureAction),
+        error: null
+      })
+    })
+  })
+})
diff --git a/webapp/src/modules/ens/reducer.ts b/webapp/src/modules/ens/reducer.ts
new file mode 100644
index 0000000000..61f872b65d
--- /dev/null
+++ b/webapp/src/modules/ens/reducer.ts
@@ -0,0 +1,74 @@
+import {
+  LoadingState,
+  loadingReducer
+} from 'decentraland-dapps/dist/modules/loading/reducer'
+import { FetchTransactionSuccessAction } from 'decentraland-dapps/dist/modules/transaction/actions'
+import {
+  ClaimNameRequestAction,
+  ClaimNameFailureAction,
+  ClaimNameSuccessAction,
+  CLAIM_NAME_SUCCESS,
+  CLAIM_NAME_CLEAR,
+  ClaimNameClearAction,
+  CLAIM_NAME_FAILURE
+} from './actions'
+import { ENS, ENSError, Authorization } from './types'
+
+export type ENSState = {
+  data: Record<string, ENS>
+  authorizations: Record<string, Authorization>
+  loading: LoadingState
+  error: ENSError | null
+}
+
+const INITIAL_STATE: ENSState = {
+  data: {},
+  authorizations: {},
+  loading: [],
+  error: null
+}
+
+export type ENSReducerAction =
+  | FetchTransactionSuccessAction
+  | ClaimNameRequestAction
+  | ClaimNameFailureAction
+  | ClaimNameSuccessAction
+  | ClaimNameClearAction
+
+export function ensReducer(
+  state: ENSState = INITIAL_STATE,
+  action: ENSReducerAction
+): ENSState {
+  switch (action.type) {
+    case CLAIM_NAME_SUCCESS: {
+      const { ens } = action.payload
+      return {
+        ...state,
+        loading: loadingReducer(state.loading, action),
+        data: {
+          ...state.data,
+          [ens.subdomain]: {
+            ...state.data[ens.subdomain],
+            ...ens
+          }
+        }
+      }
+    }
+    case CLAIM_NAME_FAILURE: {
+      return {
+        ...state,
+        loading: loadingReducer(state.loading, action),
+        error: { ...action.payload.error }
+      }
+    }
+    case CLAIM_NAME_CLEAR: {
+      return {
+        ...state,
+        error: null
+      }
+    }
+
+    default:
+      return state
+  }
+}
diff --git a/webapp/src/modules/ens/sagas.spec.ts b/webapp/src/modules/ens/sagas.spec.ts
new file mode 100644
index 0000000000..6c60715166
--- /dev/null
+++ b/webapp/src/modules/ens/sagas.spec.ts
@@ -0,0 +1,138 @@
+import { expectSaga } from 'redux-saga-test-plan'
+import { call, select } from 'redux-saga/effects'
+import { ethers, BigNumber } from 'ethers'
+import { getSigner } from 'decentraland-dapps/dist/lib/eth'
+import { waitForTx } from 'decentraland-dapps/dist/modules/transaction/utils'
+import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
+import { closeModal } from 'decentraland-dapps/dist/modules/modal/actions'
+import { ensSaga } from './sagas'
+import {
+  CLAIM_NAME_REQUEST,
+  claimNameSuccess,
+  claimNameFailure,
+  claimNameTransactionSubmitted,
+  claimNameRequest
+} from './actions'
+import { getWallet } from '../wallet/selectors'
+import { DCLController__factory } from '../../contracts/factories/DCLController__factory'
+import { DCLRegistrar__factory } from '../../contracts/factories'
+import { config } from '../../config'
+import { getDomainFromName } from './utils'
+import { ENS } from './types'
+
+export const REGISTRAR_ADDRESS = config.get('REGISTRAR_CONTRACT_ADDRESS', '')
+const CONTROLLER_V2_ADDRESS = config.get('CONTROLLER_V2_CONTRACT_ADDRESS', '')
+
+describe('ENS Saga', () => {
+  describe('handleClaimNameRequest', () => {
+    let mockName: string
+    let mockAction: ReturnType<typeof claimNameRequest>
+    let mockWallet: Wallet
+    let mockTransaction: ethers.ContractTransaction
+    let mockTokenId: BigNumber
+    let dclRegistrarContract: { address: string }
+    let mockENS: ENS
+    let signer: ethers.Signer
+
+    beforeEach(() => {
+      mockName = 'example'
+      mockAction = {
+        type: CLAIM_NAME_REQUEST,
+        payload: { name: mockName }
+      }
+      mockWallet = { address: '0xWalletAddress', chainId: 1 } as Wallet
+      mockTransaction = {
+        hash: '0xTransactionHash'
+      } as ethers.ContractTransaction
+      mockTokenId = BigNumber.from(1)
+      dclRegistrarContract = { address: '0xAnAddress' }
+      mockENS = {
+        name: mockName,
+        tokenId: mockTokenId.toString(),
+        ensOwnerAddress: mockWallet.address,
+        nftOwnerAddress: mockWallet.address,
+        subdomain: getDomainFromName(mockName),
+        resolver: ethers.constants.AddressZero,
+        content: ethers.constants.AddressZero,
+        contractAddress: dclRegistrarContract.address
+      }
+      signer = {} as ethers.Signer
+    })
+
+    describe('and the claim name succeeds', () => {
+      it('should handle a successful name claim', () => {
+        return expectSaga(ensSaga)
+          .provide([
+            [select(getWallet), mockWallet],
+            [call(getSigner), signer],
+            [
+              call(
+                [DCLController__factory, 'connect'],
+                CONTROLLER_V2_ADDRESS,
+                signer
+              ),
+              { register: () => Promise.resolve(mockTransaction) }
+            ],
+            [
+              call(
+                [DCLRegistrar__factory, 'connect'],
+                REGISTRAR_ADDRESS,
+                signer
+              ),
+              {
+                ...dclRegistrarContract,
+                getTokenId: () => mockTokenId
+              }
+            ],
+
+            [call(waitForTx, mockTransaction.hash), null]
+          ])
+          .put(
+            claimNameTransactionSubmitted(
+              mockName,
+              mockWallet.address,
+              mockWallet.chainId,
+              mockTransaction.hash
+            )
+          )
+          .put(claimNameSuccess(mockENS, mockName, mockTransaction.hash))
+          .put(closeModal('ClaimNameFatFingerModal'))
+          .dispatch(claimNameRequest(mockName))
+          .silentRun()
+      })
+    })
+
+    describe('and the claim fails', () => {
+      it('should handle a failure in name claim', () => {
+        const error = new Error('Failed to claim name')
+        return expectSaga(ensSaga)
+          .provide([
+            [select(getWallet), mockWallet],
+            [call(getSigner), {}],
+            [
+              call(
+                [DCLController__factory, 'connect'],
+                CONTROLLER_V2_ADDRESS,
+                signer
+              ),
+              { register: () => Promise.reject(error) }
+            ],
+            [
+              call(
+                [DCLRegistrar__factory, 'connect'],
+                REGISTRAR_ADDRESS,
+                signer
+              ),
+              {
+                ...dclRegistrarContract,
+                getTokenId: () => mockTokenId
+              }
+            ]
+          ])
+          .put(claimNameFailure({ message: error.message }))
+          .dispatch(mockAction)
+          .silentRun()
+      })
+    })
+  })
+})
diff --git a/webapp/src/modules/ens/sagas.ts b/webapp/src/modules/ens/sagas.ts
new file mode 100644
index 0000000000..a1c312f582
--- /dev/null
+++ b/webapp/src/modules/ens/sagas.ts
@@ -0,0 +1,87 @@
+import { BigNumber, ethers } from 'ethers'
+import { call, put, select, takeEvery } from 'redux-saga/effects'
+import { getSigner } from 'decentraland-dapps/dist/lib/eth'
+import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
+import { waitForTx } from 'decentraland-dapps/dist/modules/transaction/utils'
+import { closeModal } from 'decentraland-dapps/dist/modules/modal/actions'
+import { DCLController } from '../../contracts'
+import { DCLRegistrar__factory } from '../../contracts/factories/DCLRegistrar__factory'
+import { DCLController__factory } from '../../contracts/factories/DCLController__factory'
+import { DCLRegistrar } from '../../contracts/DCLRegistrar'
+import {
+  CLAIM_NAME_REQUEST,
+  ClaimNameRequestAction,
+  claimNameSuccess,
+  claimNameFailure,
+  claimNameTransactionSubmitted
+} from './actions'
+import { ENS, ENSError } from './types'
+import { getDomainFromName } from './utils'
+import { config } from '../../config'
+import { getWallet } from '../wallet/selectors'
+import { isErrorWithMessage } from '../../lib/error'
+
+export const CONTROLLER_V2_ADDRESS = config.get(
+  'CONTROLLER_V2_CONTRACT_ADDRESS',
+  ''
+)
+export const REGISTRAR_ADDRESS = config.get('REGISTRAR_CONTRACT_ADDRESS', '')
+
+export function* ensSaga() {
+  yield takeEvery(CLAIM_NAME_REQUEST, handleClaimNameRequest)
+
+  function* handleClaimNameRequest(action: ClaimNameRequestAction) {
+    const { name } = action.payload
+    try {
+      const wallet: Wallet = yield select(getWallet)
+      const signer: ethers.Signer = yield call(getSigner)
+      const from = wallet.address
+
+      const controllerContract: DCLController = yield call(
+        [DCLController__factory, 'connect'],
+        CONTROLLER_V2_ADDRESS,
+        signer
+      )
+      const dclRegistrarContract: DCLRegistrar = yield call(
+        [DCLRegistrar__factory, 'connect'],
+        REGISTRAR_ADDRESS,
+        signer
+      )
+      const transaction: ethers.ContractTransaction = yield call(
+        [controllerContract, 'register'],
+        name,
+        from
+      )
+      yield put(
+        claimNameTransactionSubmitted(
+          name,
+          wallet.address,
+          wallet.chainId,
+          transaction.hash
+        )
+      )
+      yield call(waitForTx, transaction.hash)
+      const tokenId: BigNumber = yield call(
+        [dclRegistrarContract, 'getTokenId'],
+        name
+      )
+      const ens: ENS = {
+        name: name,
+        tokenId: tokenId.toString(),
+        ensOwnerAddress: wallet.address,
+        nftOwnerAddress: wallet.address,
+        subdomain: getDomainFromName(name),
+        resolver: ethers.constants.AddressZero,
+        content: ethers.constants.AddressZero,
+        contractAddress: dclRegistrarContract.address
+      }
+      yield put(claimNameSuccess(ens, name, transaction.hash))
+      yield put(closeModal('ClaimNameFatFingerModal'))
+    } catch (error) {
+      const ensError: ENSError = {
+        message: isErrorWithMessage(error) ? error.message : 'Unknown error'
+      }
+      yield put(claimNameFailure(ensError))
+    }
+  }
+}
diff --git a/webapp/src/modules/ens/selectors.spec.ts b/webapp/src/modules/ens/selectors.spec.ts
new file mode 100644
index 0000000000..d3e7afc0d7
--- /dev/null
+++ b/webapp/src/modules/ens/selectors.spec.ts
@@ -0,0 +1,148 @@
+import { Transaction } from 'decentraland-dapps/dist/modules/transaction/types'
+import { AuthorizationStepStatus } from 'decentraland-ui'
+import { RootState } from '../reducer'
+import {
+  getState,
+  getData,
+  getAuthorizations,
+  getError,
+  getLoading,
+  isWaitingTxClaimName,
+  getClaimNameStatus,
+  getErrorMessage
+} from './selectors'
+import { CLAIM_NAME_REQUEST, CLAIM_NAME_TRANSACTION_SUBMITTED } from './actions'
+
+let state: RootState
+
+beforeEach(() => {
+  state = {
+    wallet: {
+      data: {
+        address: 'anAddress'
+      }
+    },
+    ens: {
+      data: {},
+      authorizations: {},
+      loading: [],
+      error: null
+    },
+    transaction: {
+      data: [],
+      loading: [],
+      error: null
+    }
+  } as any
+})
+
+describe('ENS Selectors', () => {
+  describe('getState', () => {
+    it('should return the ENS state', () => {
+      expect(getState(state)).toEqual(state.ens)
+    })
+  })
+
+  describe('getData', () => {
+    it('should return the ENS data', () => {
+      expect(getData(state)).toEqual(state.ens.data)
+    })
+  })
+
+  describe('getAuthorizations', () => {
+    it('should return the ENS authorizations', () => {
+      expect(getAuthorizations(state)).toEqual(state.ens.authorizations)
+    })
+  })
+
+  describe('getError', () => {
+    it('should return the ENS error', () => {
+      expect(getError(state)).toEqual(state.ens.error)
+    })
+  })
+
+  describe('getLoading', () => {
+    it('should return the ENS loading state', () => {
+      expect(getLoading(state)).toEqual(state.ens.loading)
+    })
+  })
+
+  describe('isWaitingTxClaimName', () => {
+    describe('and it is waiting for transaction to claim a name', () => {
+      beforeEach(() => {
+        state.transaction.data = [
+          {
+            actionType: CLAIM_NAME_TRANSACTION_SUBMITTED,
+            from: state.wallet?.data?.address
+          } as Transaction
+        ]
+      })
+      it('should return true', () => {
+        expect(isWaitingTxClaimName(state)).toBe(true)
+      })
+    })
+    describe('and it is not waiting for transaction to claim a name', () => {
+      beforeEach(() => {
+        state.transaction.data = [
+          {
+            actionType: 'anotherTypeOfAction',
+            from: state.wallet?.data?.address
+          } as Transaction
+        ]
+      })
+      it('should return true', () => {
+        expect(isWaitingTxClaimName(state)).toBe(false)
+      })
+    })
+  })
+
+  describe('getErrorMessage', () => {
+    it('should return the ENS error message if present', () => {
+      state.ens.error = { message: 'An error occurred' }
+      expect(getErrorMessage(state)).toEqual('An error occurred')
+    })
+
+    it('should return null if there is no error', () => {
+      state.ens.error = null
+      expect(getErrorMessage(state)).toBeNull()
+    })
+  })
+
+  describe('getClaimNameStatus', () => {
+    describe('and CLAIM_NAME_REQUEST is loading', () => {
+      beforeEach(() => {
+        state.ens.loading = [{ type: CLAIM_NAME_REQUEST }]
+      })
+      it('should return WAITING', () => {
+        expect(getClaimNameStatus(state)).toBe(AuthorizationStepStatus.WAITING)
+      })
+    })
+
+    describe('and a transaction to claim a name is pending', () => {
+      it('should return PROCESSING ', () => {
+        state.transaction.data = [
+          {
+            actionType: CLAIM_NAME_TRANSACTION_SUBMITTED,
+            from: state.wallet?.data?.address
+          } as Transaction
+        ]
+        expect(getClaimNameStatus(state)).toBe(
+          AuthorizationStepStatus.PROCESSING
+        )
+      })
+    })
+
+    describe('and there is an error in the ENS state', () => {
+      it('should return ERROR', () => {
+        state.ens.error = { message: 'An error occurred' }
+        expect(getClaimNameStatus(state)).toBe(AuthorizationStepStatus.ERROR)
+      })
+    })
+
+    describe('and no action is in progress or error', () => {
+      it('should return PENDING', () => {
+        expect(getClaimNameStatus(state)).toBe(AuthorizationStepStatus.PENDING)
+      })
+    })
+  })
+})
diff --git a/webapp/src/modules/ens/selectors.ts b/webapp/src/modules/ens/selectors.ts
new file mode 100644
index 0000000000..72880c2398
--- /dev/null
+++ b/webapp/src/modules/ens/selectors.ts
@@ -0,0 +1,49 @@
+import { createSelector } from 'reselect'
+import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
+import { Transaction } from 'decentraland-dapps/dist/modules/transaction/types'
+import { AuthorizationStepStatus } from 'decentraland-ui'
+import { getPendingTransactions } from '../transaction/selectors'
+import { RootState } from '../reducer'
+import { CLAIM_NAME_REQUEST, CLAIM_NAME_TRANSACTION_SUBMITTED } from './actions'
+
+export const getState = (state: RootState) => state.ens
+export const getData = (state: RootState) => getState(state).data
+export const getAuthorizations = (state: RootState) =>
+  getState(state).authorizations
+export const getError = (state: RootState) => getState(state).error
+export const getLoading = (state: RootState) => getState(state).loading
+
+export const isWaitingTxClaimName = createSelector<
+  RootState,
+  Transaction[],
+  boolean
+>(getPendingTransactions, transactions =>
+  transactions.some(
+    transaction => CLAIM_NAME_TRANSACTION_SUBMITTED === transaction.actionType
+  )
+)
+
+export const getClaimNameStatus = (state: RootState) => {
+  if (isLoadingType(getLoading(state), CLAIM_NAME_REQUEST)) {
+    return AuthorizationStepStatus.WAITING
+  }
+
+  if (isWaitingTxClaimName(state)) {
+    return AuthorizationStepStatus.PROCESSING
+  }
+
+  if (getError(state)) {
+    return AuthorizationStepStatus.ERROR
+  }
+
+  return AuthorizationStepStatus.PENDING
+}
+
+export const getErrorMessage = (state: RootState) => {
+  const error = getError(state)
+  if (error) {
+    return error.message
+  }
+
+  return null
+}
diff --git a/webapp/src/modules/ens/types.ts b/webapp/src/modules/ens/types.ts
new file mode 100644
index 0000000000..a54caf936e
--- /dev/null
+++ b/webapp/src/modules/ens/types.ts
@@ -0,0 +1,49 @@
+export type ENS = {
+  /** The NFT owner address */
+  nftOwnerAddress: string
+  /** The ENS name owner address */
+  ensOwnerAddress: string
+  /** The ENS name */
+  name: string
+  /** The ENS subdomain name */
+  subdomain: string
+  /** The NFT's token id that represents the ENS name */
+  tokenId: string
+  resolver: string
+  content: string
+
+  ipfsHash?: string
+
+  // We'll need to change `landId` eventually so it can handle different content types. We could use:
+  //   contentId?: string
+  //   contentType?: ENSContent {LAND = 'land', (...)}
+  landId?: string
+
+  worldStatus?: WorldStatus | null
+
+  /** Registrar contract address */
+  contractAddress: string
+}
+
+export type ENSError = {
+  message: string
+  code?: number
+  origin?: ENSOrigin
+}
+
+export enum ENSOrigin {
+  RESOLVER = 'Resolver',
+  CONTENT = 'Content'
+}
+
+export type Authorization = {
+  allowance: string
+}
+
+export type WorldStatus = {
+  healthy: boolean
+  scene: {
+    urn: string
+    entityId: string
+  }
+}
diff --git a/webapp/src/modules/ens/utils.spec.ts b/webapp/src/modules/ens/utils.spec.ts
new file mode 100644
index 0000000000..dc33fbca5b
--- /dev/null
+++ b/webapp/src/modules/ens/utils.spec.ts
@@ -0,0 +1,187 @@
+import {
+  isNameAvailable,
+  isNameValid,
+  getNameInvalidType,
+  hasNameMinLength,
+  isEnoughClaimMana,
+  NameInvalidType
+} from './utils'
+import { DCLRegistrar__factory } from '../../contracts/factories/DCLRegistrar__factory'
+
+jest.mock('../../contracts/factories/DCLRegistrar__factory')
+
+describe('Name Management Tests', () => {
+  describe('isNameAvailable', () => {
+    describe('and the name is available', () => {
+      beforeEach(() => {
+        // Mock the contract call to simulate an available name
+        const mockAvailable = jest.fn().mockResolvedValue(true)
+        ;(DCLRegistrar__factory.connect as jest.Mock).mockImplementation(() => {
+          return { available: mockAvailable }
+        })
+      })
+      it('should return true', async () => {
+        const result = await isNameAvailable('availableName')
+        expect(result).toBe(true)
+      })
+    })
+
+    describe('and the name is not available', () => {
+      beforeEach(() => {
+        // Mock the contract call to simulate an available name
+        const mockAvailable = jest.fn().mockResolvedValue(false)
+        ;(DCLRegistrar__factory.connect as jest.Mock).mockImplementation(() => {
+          return { available: mockAvailable }
+        })
+      })
+      it('should return false', async () => {
+        const result = await isNameAvailable('unavailableName')
+        expect(result).toBe(false)
+      })
+    })
+
+    describe('and providing an empty name', () => {
+      it('should return false', async () => {
+        const result = await isNameAvailable('')
+        expect(result).toBe(false)
+      })
+    })
+  })
+
+  describe('isNameValid', () => {
+    let name: string
+    describe('when the name is valid', () => {
+      beforeEach(() => {
+        name = 'validName123'
+      })
+      it('should return true', () => {
+        expect(isNameValid(name)).toBe(true)
+      })
+    })
+
+    describe('when the name is too short', () => {
+      beforeEach(() => {
+        name = 'a'
+      })
+      it('should return false', () => {
+        expect(isNameValid('a')).toBe(false)
+      })
+    })
+    describe('when the name is too long', () => {
+      beforeEach(() => {
+        name = 'averylongnamethatiswaytoobig'
+      })
+      it('should return false', () => {
+        expect(isNameValid('averylongnamethatiswaytoobig')).toBe(false)
+      })
+    })
+    describe('when the name has invalid characters', () => {
+      beforeEach(() => {
+        name = 'invalid#Name'
+      })
+      it('should return false', () => {
+        expect(isNameValid(name)).toBe(false)
+      })
+    })
+    describe('when the name has whitespaces', () => {
+      beforeEach(() => {
+        name = 'invalid name'
+      })
+      it('should return false', () => {
+        expect(isNameValid(name)).toBe(false)
+      })
+    })
+  })
+
+  describe('getNameInvalidType', () => {
+    let name: string
+    describe('when the name is valid', () => {
+      beforeEach(() => {
+        name = 'validName'
+      })
+      it('should return null', () => {
+        expect(getNameInvalidType(name)).toBeNull()
+      })
+    })
+
+    describe('when the name is too long', () => {
+      beforeEach(() => {
+        name = 'averylongnamethatiswaytoobig'
+      })
+      it('should return TOO_LONG', () => {
+        expect(getNameInvalidType(name)).toBe(NameInvalidType.TOO_LONG)
+      })
+    })
+
+    describe('when the name is too short', () => {
+      beforeEach(() => {
+        name = 'a'
+      })
+      it('should return TOO_SHORT', () => {
+        expect(getNameInvalidType(name)).toBe(NameInvalidType.TOO_SHORT)
+      })
+    })
+
+    describe('when the name has spaces', () => {
+      beforeEach(() => {
+        name = 'invalid name'
+      })
+      it('should return HAS_SPACES', () => {
+        expect(getNameInvalidType(name)).toBe(NameInvalidType.HAS_SPACES)
+      })
+    })
+
+    describe('when the name has invalid characters', () => {
+      beforeEach(() => {
+        name = 'invalid#Name'
+      })
+      it('should return INVALID_CHARACTERS', () => {
+        expect(getNameInvalidType(name)).toBe(
+          NameInvalidType.INVALID_CHARACTERS
+        )
+      })
+    })
+  })
+
+  describe('hasNameMinLength', () => {
+    let name: string
+    describe('and the name has length equal or above minimum', () => {
+      beforeEach(() => {
+        name = 'va'
+      })
+      it('should return true', () => {
+        expect(hasNameMinLength(name)).toBe(true)
+      })
+    })
+
+    describe('and the name has length below the minimum', () => {
+      beforeEach(() => {
+        name = 'v'
+      })
+      it('should return false', () => {
+        expect(hasNameMinLength(name)).toBe(false)
+      })
+    })
+  })
+
+  describe('isEnoughClaimMana', () => {
+    let mana: number
+    describe('and has sufficient MANA', () => {
+      beforeEach(() => {
+        mana = 100
+      })
+      it('should return true', () => {
+        expect(isEnoughClaimMana(mana)).toBe(true)
+      })
+    })
+
+    describe('and has insufficient MANA', () => {
+      beforeEach(() => {
+        mana = 99
+      })
+      it('should return false', () => {
+        expect(isEnoughClaimMana(mana)).toBe(false)
+      })
+    })
+  })
+})
diff --git a/webapp/src/modules/ens/utils.ts b/webapp/src/modules/ens/utils.ts
new file mode 100644
index 0000000000..f7a72768b4
--- /dev/null
+++ b/webapp/src/modules/ens/utils.ts
@@ -0,0 +1,72 @@
+import { ethers } from 'ethers'
+import { ChainId } from '@dcl/schemas'
+import { getNetworkProvider } from 'decentraland-dapps/dist/lib/eth'
+import { getConfiguration } from 'decentraland-connect/dist/configuration'
+import { DCLRegistrar__factory } from '../../contracts/factories/DCLRegistrar__factory'
+import { config } from '../../config'
+
+const REGISTRAR_ADDRESS = config.get('REGISTRAR_CONTRACT_ADDRESS', '')
+
+export const PRICE_IN_WEI = '100000000000000000000' // 100 MANA
+export const PRICE = ethers.utils.formatEther(PRICE_IN_WEI)
+export const MAX_NAME_SIZE = 15
+export const MIN_NAME_SIZE = 2
+
+const nameRegex = new RegExp(`^([a-zA-Z0-9]){2,${MAX_NAME_SIZE}}$`)
+
+export function getDomainFromName(name: string): string {
+  return `${name.toLowerCase()}.dcl.eth`
+}
+
+export async function isNameAvailable(name: string): Promise<boolean> {
+  if (!name) {
+    return false
+  }
+  const chainId = Number(config.get('CHAIN_ID')) as ChainId
+  const networkProvider = await getNetworkProvider(chainId)
+  const configuration = getConfiguration()
+  const provider = networkProvider
+    ? new ethers.providers.Web3Provider(networkProvider)
+    : new ethers.providers.JsonRpcProvider(configuration.network.urls[chainId])
+  const contractDCLRegistrar = DCLRegistrar__factory.connect(
+    REGISTRAR_ADDRESS,
+    provider
+  )
+  return contractDCLRegistrar.available(name)
+}
+
+export function isNameValid(name: string): boolean {
+  return nameRegex.test(name)
+}
+
+export enum NameInvalidType {
+  INVALID_CHARACTERS,
+  HAS_SPACES,
+  TOO_LONG,
+  TOO_SHORT
+}
+
+export function getNameInvalidType(name: string): NameInvalidType | null {
+  if (isNameValid(name)) {
+    return null
+  } else if (name.length > MAX_NAME_SIZE) {
+    return NameInvalidType.TOO_LONG
+  } else if (name.length < MIN_NAME_SIZE) {
+    return NameInvalidType.TOO_SHORT
+  }
+  const hasSpaces = /\s/.test(name)
+  return hasSpaces
+    ? NameInvalidType.HAS_SPACES
+    : NameInvalidType.INVALID_CHARACTERS
+}
+
+export function hasNameMinLength(name: string): boolean {
+  return name.length >= MIN_NAME_SIZE
+}
+
+export function isEnoughClaimMana(mana: number) {
+  // 100 is the minimum amount of MANA the user needs to claim a new Name
+  // We're checking against this instead of 0 when checking the allowance too because
+  // we do not yet support the double transaction needed to set the user's allowance to 0 first and then bump it up to wichever number
+  return mana >= 100
+}
diff --git a/webapp/src/modules/reducer.ts b/webapp/src/modules/reducer.ts
index 2d3dba4658..0029acd6e7 100644
--- a/webapp/src/modules/reducer.ts
+++ b/webapp/src/modules/reducer.ts
@@ -31,6 +31,7 @@ import { eventReducer as event } from './event/reducer'
 import { contractReducer as contract } from './contract/reducer'
 import { favoritesReducer as favorites } from './favorites/reducer'
 import { assetReducer as asset } from './asset/reducer'
+import { ensReducer as ens } from './ens/reducer'
 
 export const createRootReducer = (history: History) =>
   combineReducers({
@@ -63,7 +64,8 @@ export const createRootReducer = (history: History) =>
     modal,
     contract,
     gateway,
-    favorites
+    favorites,
+    ens
   })
 
 export type RootState = ReturnType<ReturnType<typeof createRootReducer>>
diff --git a/webapp/src/modules/routing/locations.ts b/webapp/src/modules/routing/locations.ts
index 8011c15a81..468b7729f5 100644
--- a/webapp/src/modules/routing/locations.ts
+++ b/webapp/src/modules/routing/locations.ts
@@ -18,6 +18,13 @@ export const locations = {
     const params = getSearchParams(options)
     return params ? `/lands?${params.toString()}` : '/lands'
   },
+  names: (options?: BrowseOptions) => {
+    const params = getSearchParams(options)
+    return params ? `/names/browse?${params.toString()}` : '/names/browse'
+  },
+  claimName: () => {
+    return '/names/claim'
+  },
   collection: (contractAddress: string = ':contractAddress') =>
     `/collections/${contractAddress}`,
   browse: (options?: BrowseOptions) => {
diff --git a/webapp/src/modules/routing/sagas.spec.ts b/webapp/src/modules/routing/sagas.spec.ts
index 8170e60c8e..a313604002 100644
--- a/webapp/src/modules/routing/sagas.spec.ts
+++ b/webapp/src/modules/routing/sagas.spec.ts
@@ -44,6 +44,8 @@ import { NFT } from '../nft/types'
 import { openModal } from '../modal/actions'
 import { fetchNFTsRequest, fetchNFTsSuccess } from '../nft/actions'
 import { getWallet } from '../wallet/selectors'
+import { ENS } from '../ens/types'
+import { claimNameSuccess } from '../ens/actions'
 import { EXPIRED_LISTINGS_MODAL_KEY } from '../ui/utils'
 import {
   browse,
@@ -1317,6 +1319,30 @@ describe('handleRedirectToSuccessPage saga', () => {
         .run({ silenceTimeout: true })
     })
   })
+
+  describe('when handling the claim name success action', () => {
+    let ens: ENS
+    beforeEach(() => {
+      ens = {
+        subdomain: 'aSubdomain',
+        tokenId: 'aTokenId',
+        contractAddress: 'aContractAddress'
+      } as ENS
+      searchParams = {
+        txHash: 'txHash',
+        tokenId: ens.tokenId,
+        assetType: AssetType.NFT,
+        contractAddress: ens.contractAddress
+      }
+    })
+
+    it('should redirect to success page with the correct query params', () => {
+      return expectSaga(routingSaga)
+        .put(push(locations.success(searchParams)))
+        .dispatch(claimNameSuccess(ens, 'aName', searchParams.txHash))
+        .run({ silenceTimeout: true })
+    })
+  })
 })
 
 describe('when handling the connect wallet success action', () => {
@@ -1543,11 +1569,13 @@ describe.each([
 
   it('should redirect to the default activity location when redirectTo is not present', () => {
     const location = { search: '' }
-    return expectSaga(routingSaga)
-      .provide([[select(getLocation), location]])
-      //@ts-ignore
-      .dispatch(action(...args))
-      .put(push(locations.activity()))
-      .run()
+    return (
+      expectSaga(routingSaga)
+        .provide([[select(getLocation), location]])
+        //@ts-ignore
+        .dispatch(action(...args))
+        .put(push(locations.activity()))
+        .run()
+    )
   })
 })
diff --git a/webapp/src/modules/routing/sagas.ts b/webapp/src/modules/routing/sagas.ts
index 446d8b74b0..f05ebdd5d3 100644
--- a/webapp/src/modules/routing/sagas.ts
+++ b/webapp/src/modules/routing/sagas.ts
@@ -131,6 +131,7 @@ import { getPage, getView } from '../ui/browse/selectors'
 import { fetchFavoritedItemsRequest } from '../favorites/actions'
 import { AssetStatusFilter } from '../../utils/filters'
 import { buildBrowseURL } from './utils'
+import { CLAIM_NAME_SUCCESS, ClaimNameSuccessAction } from '../ens/actions'
 
 export function* routingSaga() {
   yield takeEvery(LOCATION_CHANGE, handleLocationChange)
@@ -151,7 +152,12 @@ export function* routingSaga() {
   )
 
   yield takeEvery(
-    [EXECUTE_ORDER_SUCCESS, BUY_ITEM_SUCCESS, BUY_ITEM_CROSS_CHAIN_SUCCESS],
+    [
+      EXECUTE_ORDER_SUCCESS,
+      BUY_ITEM_SUCCESS,
+      BUY_ITEM_CROSS_CHAIN_SUCCESS,
+      CLAIM_NAME_SUCCESS
+    ],
     handleRedirectToSuccessPage
   )
   yield takeEvery(CONNECT_WALLET_SUCCESS, handleConnectWalletSuccess)
@@ -715,19 +721,33 @@ function* handleRedirectToActivity() {
 }
 
 function* handleRedirectToSuccessPage(
-  action: ExecuteOrderSuccessAction | BuyItemSuccessAction
+  action:
+    | ExecuteOrderSuccessAction
+    | BuyItemSuccessAction
+    | ClaimNameSuccessAction
 ) {
   const payload = action.payload
   yield put(
     push(
       locations.success({
         txHash: payload.txHash,
-        tokenId: 'item' in payload ? payload.item.itemId : payload.nft.tokenId,
+        tokenId:
+          'item' in payload
+            ? payload.item.itemId
+            : 'nft' in payload
+            ? payload.nft.tokenId
+            : 'ens' in payload
+            ? payload.ens.tokenId
+            : '',
         assetType: 'item' in payload ? AssetType.ITEM : AssetType.NFT,
         contractAddress:
           'item' in payload
             ? payload.item.contractAddress
-            : payload.nft.contractAddress
+            : 'nft' in payload
+            ? payload.nft.contractAddress
+            : 'ens' in payload
+            ? payload.ens.contractAddress
+            : ''
       })
     )
   )
diff --git a/webapp/src/modules/routing/selectors.ts b/webapp/src/modules/routing/selectors.ts
index cfefbf655c..f20de84203 100644
--- a/webapp/src/modules/routing/selectors.ts
+++ b/webapp/src/modules/routing/selectors.ts
@@ -730,6 +730,8 @@ export const getPageName = createSelector<RootState, string, PageName>(
       return PageName.SETTINGS
     } else if (matchPath(pathname, locations.lands())) {
       return PageName.LANDS
+    } else if (matchPath(pathname, locations.names())) {
+      return PageName.NAMES
     } else if (matchPath(pathname, locations.collection())) {
       return PageName.COLLECTION
     } else if (matchPath(pathname, locations.browse())) {
diff --git a/webapp/src/modules/routing/types.ts b/webapp/src/modules/routing/types.ts
index 9fc6bab598..8351e15da4 100644
--- a/webapp/src/modules/routing/types.ts
+++ b/webapp/src/modules/routing/types.ts
@@ -83,6 +83,8 @@ export enum PageName {
   SIGN_IN,
   SETTINGS,
   LANDS,
+  NAMES,
+  MINT_NAME,
   COLLECTION,
   BROWSE,
   CAMPAIGN,
diff --git a/webapp/src/modules/sagas.ts b/webapp/src/modules/sagas.ts
index 79559ad228..5d2e5a5462 100644
--- a/webapp/src/modules/sagas.ts
+++ b/webapp/src/modules/sagas.ts
@@ -40,8 +40,11 @@ import { transakSaga } from './transak/sagas'
 import { assetSaga } from './asset/sagas'
 import { favoritesSaga } from './favorites/sagas'
 import { loginSaga } from './login/sagas'
+import { ensSaga } from './ens/sagas'
 
 const analyticsSaga = createAnalyticsSaga()
+const profileSaga = (getIdentity: () => AuthIdentity | undefined) =>
+  createProfileSaga({ getIdentity, peerUrl })
 const lambdasClient = createLambdasClient({
   url: `${peerUrl}/lambdas`,
   fetcher: createFetchComponent()
@@ -79,7 +82,7 @@ export function* rootSaga(getIdentity: () => AuthIdentity | undefined) {
     itemSaga(getIdentity),
     nftSaga(getIdentity),
     orderSaga(),
-    createProfileSaga({ peerUrl, getIdentity })(),
+    profileSaga(getIdentity)(),
     proximitySaga(),
     routingSaga(),
     tileSaga(),
@@ -109,6 +112,7 @@ export function* rootSaga(getIdentity: () => AuthIdentity | undefined) {
     locationSaga(),
     transakSaga(),
     favoritesSaga(getIdentity),
-    loginSaga()
+    loginSaga(),
+    ensSaga()
   ])
 }
diff --git a/webapp/src/modules/toast/sagas.spec.ts b/webapp/src/modules/toast/sagas.spec.ts
index c508848f5d..2e589ac753 100644
--- a/webapp/src/modules/toast/sagas.spec.ts
+++ b/webapp/src/modules/toast/sagas.spec.ts
@@ -44,7 +44,8 @@ import {
   getDeleteListFailureToast,
   getBulkPickItemSuccessToast,
   getBulkPickItemFailureToast,
-  getUpdateListSuccessToast
+  getUpdateListSuccessToast,
+  getNameClaimSuccessToast
 } from '../toast/toasts'
 import { ItemBrowseOptions } from '../item/types'
 import { FetchNFTsFailureAction, fetchNFTsFailure } from '../nft/actions'
@@ -55,6 +56,8 @@ import {
 } from '../vendor/decentraland/favorites/types'
 import { toastSaga } from './sagas'
 import { toastDispatchableActionsChannel } from './utils'
+import { claimNameSuccess } from '../ens/actions'
+import { ENS } from '../ens/types'
 
 let nft: NFT
 let rental: RentalListing
@@ -303,3 +306,13 @@ describe('when handling a put into the toastDispatchableActionsChannel', () => {
       .silentRun()
   })
 })
+
+describe('when handling a success claiming actiono', () => {
+  it('should call the showToast', () => {
+    return expectSaga(toastSaga)
+      .provide([[select(getState), []]])
+      .dispatch(claimNameSuccess({} as ENS, 'aNAME', '0xaHash'))
+      .put(showToast(getNameClaimSuccessToast()))
+      .silentRun()
+  })
+})
diff --git a/webapp/src/modules/toast/sagas.ts b/webapp/src/modules/toast/sagas.ts
index a454ce15e6..50991a5185 100644
--- a/webapp/src/modules/toast/sagas.ts
+++ b/webapp/src/modules/toast/sagas.ts
@@ -28,6 +28,7 @@ import {
   getBuyNFTWithCardErrorToast,
   getDeleteListFailureToast,
   getDeleteListSuccessToast,
+  getNameClaimSuccessToast,
   getExecuteOrderFailureToast,
   getFetchAssetsFailureToast,
   getLandClaimedBackSuccessToast,
@@ -51,6 +52,7 @@ import {
 import { FETCH_NFTS_FAILURE, FetchNFTsFailureAction } from '../nft/actions'
 import { toastDispatchableActionsChannel } from './utils'
 import { DispatchableFromToastActions } from './types'
+import { CLAIM_NAME_SUCCESS } from '../ens/actions'
 
 export function* toastSaga() {
   yield all([baseToastSaga(), customToastSaga()])
@@ -61,6 +63,7 @@ function* customToastSaga() {
 }
 
 function* successToastSagas() {
+  yield takeEvery(CLAIM_NAME_SUCCESS, handleClaimNameSuccess)
   yield takeEvery(UPDATE_STORE_SUCCESS, handleStoreUpdateSuccess)
   yield takeEvery(REMOVE_RENTAL_SUCCESS, handleRemoveRentalSuccess)
   yield takeEvery(CLAIM_ASSET_SUCCESS, handleClaimLandBackSuccess)
@@ -88,6 +91,10 @@ function* successToastSagas() {
   }
 }
 
+function* handleClaimNameSuccess() {
+  yield put(showToast(getNameClaimSuccessToast()))
+}
+
 function* handleStoreUpdateSuccess() {
   yield put(showToast(getStoreUpdateSuccessToast()))
 }
diff --git a/webapp/src/modules/toast/toasts.tsx b/webapp/src/modules/toast/toasts.tsx
index a4622bcd09..ed10b36618 100644
--- a/webapp/src/modules/toast/toasts.tsx
+++ b/webapp/src/modules/toast/toasts.tsx
@@ -4,6 +4,7 @@ import { Item } from '@dcl/schemas'
 import { Button, Icon, ToastType } from 'decentraland-ui'
 import { Toast } from 'decentraland-dapps/dist/modules/toast/types'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { builderUrl } from '../../lib/environment'
 import { config } from '../../config'
 import { getAssetName } from '../asset/utils'
 import { UpsertRentalOptType } from '../rental/types'
@@ -47,6 +48,23 @@ const ToastCTA = ({
   )
 }
 
+export function getNameClaimSuccessToast(): Omit<Toast, 'id'> {
+  return {
+    type: ToastType.INFO,
+    title: t('toast.store_update_success.title'),
+    body: (
+      <div>
+        <p>{t('toast.claim_name_success.body')}</p>
+        <Button as="a" href={`${builderUrl}/worlds`}>
+          {t('toast.claim_name_success.cta')}
+        </Button>
+      </div>
+    ),
+    timeout: DEFAULT_TIMEOUT,
+    closable: true
+  }
+}
+
 export function getStoreUpdateSuccessToast(): Omit<Toast, 'id'> {
   return {
     type: ToastType.INFO,
diff --git a/webapp/src/modules/transaction/selectors.ts b/webapp/src/modules/transaction/selectors.ts
index f01dcaaa2c..f4583d6cac 100644
--- a/webapp/src/modules/transaction/selectors.ts
+++ b/webapp/src/modules/transaction/selectors.ts
@@ -44,3 +44,11 @@ export const getPendingAuthorizationTransactions = createSelector<
         transaction.actionType === REVOKE_TOKEN_SUCCESS)
   )
 )
+
+export const getPendingTransactions = createSelector<
+  RootState,
+  Transaction[],
+  Transaction[]
+>(getTransactions, transactions =>
+  transactions.filter(transaction => isPending(transaction.status))
+)
diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json
index 7222e07ea8..ed8b8994da 100644
--- a/webapp/src/modules/translation/locales/en.json
+++ b/webapp/src/modules/translation/locales/en.json
@@ -70,7 +70,9 @@
     "of": "of",
     "now": "now",
     "actions": "Actions",
-    "action_required": "Action required"
+    "action_required": "Action required",
+    "finish": "Finish",
+    "guest": "Guest"
   },
   "search_dropdown": {
     "recent": "Recent",
@@ -100,6 +102,7 @@
     "overview": "Overview",
     "mvmf": "Metaverse Music Festival",
     "land": "Land",
+    "names": "NAMEs",
     "collectibles": "Collectibles",
     "partners": "Partners",
     "my_assets": "My Assets",
@@ -1181,6 +1184,11 @@
         },
         "try_again": "Try again"
       }
+    },
+    "claim_name_success": {
+      "title": "You gained access to a World!",
+      "body": "Build your personal space in the metaverse.",
+      "cta": "View my worlds"
     }
   },
   "maintainance": {
@@ -1482,7 +1490,9 @@
       "title": "All done!",
       "status": "Transaction confirmed",
       "view_item": "View my item",
-      "try_genesis_city": "Try it in Genesis city"
+      "try_genesis_city": "Try it in Genesis city",
+      "mint_more_names": "Mint more names",
+      "set_as_primary_name": "Set as Primary Name"
     },
     "error_state": {
       "title": "Oops",
@@ -1549,5 +1559,76 @@
   "atlas_updated_warning": {
     "info": "<strong>Map data may be outdated</strong>Find the most recent LAND details in the section below this map. Refreshing this page may update the information. If the problem persists, please contact our support team.",
     "fingerprint_missmatch": "The information of this LAND may not be updated. Please refresh the page to get the latest information. If the problem persists, please contact our support team."
+  },
+  "names_page": {
+    "title": "Claim your Decentraland NAME",
+    "subtitle": "Activate the full potential of Decentraland citizenship with a unique NAME, voting power, & your own World!",
+    "claim_a_name": "Claim name",
+    "browse_names_being_resold": "Browse NAMEs being resold",
+    "manage_your_names": "Manage your NAMEs",
+    "name_label": "Name",
+    "name_placeholder": "Your name goes here",
+    "repeated_message": "This name is not available.",
+    "claim_button": "Claim",
+    "available": "NAME available",
+    "not_available": "Unavailable NAME. {link}",
+    "marketplace": "See if it's on sale in the Marketplace.",
+    "name_cost": "A NAME costs {mana} {network}",
+    "ethereum_mainnet_network": "Ethereum Mainnet Network",
+    "dao_tooltip": "All proceeds from NAME sales are redirected to the DAO treasury. {link}",
+    "why_names": "Why get a NAME?",
+    "name_too_short": "NAME too short: NAMEs must be at least 2 characters long.",
+    "has_spaces": "NAMEs can't contain spaces.",
+    "name_too_long": "NAMEs can contain up to 15 characters.",
+    "invalid_characters": "NAMEs can only contain alphanumeric characters.",
+    "not_enough_mana": "You don't have enough MANA to claim a new name",
+    "claim_name_fat_finger_modal": {
+      "title": "Please confirm your new name",
+      "description": "You have chosen {name}. Re-enter your NAME to confirm your selection.",
+      "ok_message": "Congratulations the name {name} is yours.",
+      "caps_warning": "The capitalization of NAMEs cannot be modified once claimed.",
+      "name_placeholder": "Your unique NAME",
+      "names_different": "Names do not match",
+      "authorization": {
+        "title_action": "purchase",
+        "action": "claim"
+      }
+    },
+    "your_name": "yourName",
+    "why": {
+      "stand_out": {
+        "title": "Stand out with a unique alias for your avatar",
+        "description": "Own your presence in the metaverse with a username free from numbers on the end (e.g. Genesis#1234)."
+      },
+      "unlock": {
+        "title": "Unlock your own World",
+        "description": "GCustomize your own virtual 3D space in the metaverse. Host events, build, and experiment. {link}"
+      },
+      "governance": {
+        "title": "Participate in Governance",
+        "description": "Shape the future of Decentraland—each NAME grants you <b>100 Voting Power</b> when voting on DAO proposals. {link}"
+      },
+      "get_url": {
+        "title": "A dedicated URL for your virtual spaces",
+        "description": "Guide visitors with an exclusive, memorable URL for your LAND or Worlds <b>https://name.dcl.eth</b>"
+      }
+    },
+    "ctas": {
+      "name_taken": {
+        "title": "Has your chosen NAME already been claimed?",
+        "description": "Claimed NAMEs can be sold in the Marketplace—see if the NAME you want is available.",
+        "cta": "Browse Marketplace NAMEs"
+      },
+      "manage": {
+        "title": "Already have Decentraland NAMEs",
+        "cta": "Manage your names"
+      }
+    }
+  },
+  "set_name_as_alias_modal": {
+    "title": "Use NAME as Alias",
+    "description": "Your current username will be updated immediately.",
+    "success_title": "All Done!",
+    "success_description": "Your username has been updated"
   }
 }
diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json
index 072aff8d0a..8ec0326f3a 100644
--- a/webapp/src/modules/translation/locales/es.json
+++ b/webapp/src/modules/translation/locales/es.json
@@ -68,7 +68,9 @@
     "of": "de",
     "now": "ahora",
     "actions": "Acciones",
-    "action_required": "Acción requerida"
+    "action_required": "Acción requerida",
+    "finish": "Terminar",
+    "guest": "Invitado"
   },
   "search_dropdown": {
     "recent": "Reciente",
@@ -98,6 +100,7 @@
     "overview": "Resumen",
     "mvmf": "Metaverse Music Festival",
     "land": "Land",
+    "names": "NAMEs",
     "collectibles": "Coleccionables",
     "partners": "Socios",
     "my_assets": "Mis Objetos",
@@ -1165,6 +1168,11 @@
         },
         "try_again": "Intentar de nuevo"
       }
+    },
+    "claim_name_success": {
+      "title": "Ganaste acceso a Worlds!",
+      "body": "Construí tu espacio personal en el metaverso.",
+      "cta": "Ver mis worlds"
     }
   },
   "maintainance": {
@@ -1469,7 +1477,9 @@
       "title": "Todo listo!",
       "status": "Transacción confirmada",
       "view_item": "Ver mi artículo",
-      "try_genesis_city": "Pruébalo en Genesis City"
+      "try_genesis_city": "Pruébalo en Genesis City",
+      "mint_more_names": "Acuñar más nombres",
+      "set_as_primary_name": "Elegir como nombre primario"
     },
     "error_state": {
       "title": "Ups",
@@ -1536,5 +1546,76 @@
   "atlas_updated_warning": {
     "info": "<strong>Los datos del mapa pueden estar desactualizados</strong>Encuentre los detalles de la LAND más recientes en la sección debajo de este mapa. Refrescar esta página puede actualizar la información. Si el problema persiste, comuníquese con nuestro equipo de soporte.",
     "fingerprint_missmatch": "La información de esta LAND puede no estar actualizada. Actualice la página para obtener la información más reciente. Si el problema persiste, comuníquese con nuestro equipo de soporte."
+  },
+  "names_page": {
+    "title": "Convertite en un ciudadano de Decentraland!",
+    "subtitle": "Obtené tu nombre único",
+    "claim_a_name": "Obtener nombre",
+    "browse_names_being_resold": "Buscar nombres siendo revendidos",
+    "manage_your_names": "Administrar tus nombres",
+    "name_label": "Nombre",
+    "name_placeholder": "Tu nombre va aquí",
+    "repeated_message": "Este nombre no está disponible.",
+    "claim_button": "Obtener",
+    "available": "Nombre disponible",
+    "not_available": "Nombre NO Disponible. Pero aún puedes conseguirlo, visita {link}",
+    "marketplace": "Marketplace",
+    "name_cost": "Cada nombre cuesta {mana} {network}",
+    "ethereum_mainnet_network": "Red Principal de Ethereum",
+    "dao_tooltip": "Todo lo generado por las ventas de Nombres es redirigido al tesoro de la DAO. {link}",
+    "why_names": "Por qué Nombres?",
+    "name_too_short": "Nombre demasiado corto: debe contener por lo menos 2 caracteres",
+    "has_spaces": "Los Nombres no peuden contener espacios",
+    "name_too_long": "Los Nombres pueden tener hasta 15 caracteres",
+    "invalid_characters": "Los nombres no pueden contener caraceteres no alfa-numericos",
+    "not_enough_mana": "No tienes suficiente MANA para reclamar un nuevo nombre",
+    "claim_name_fat_finger_modal": {
+      "title": "Por favor confirmar tu nombre",
+      "description": "Eelegiste {name}. Entra nuevamente el nombre para confirmar tu selección.",
+      "ok_message": "Felicitaciones, el nombre {name} es tuyo.",
+      "caps_warning": "La capitalización de los nombres no puede ser modificada una vez de adquirido el nombre.",
+      "name_placeholder": "Tu nombre único",
+      "names_different": "Nombres no coinciden",
+      "authorization": {
+        "title_action": "comprar",
+        "action": "obtener"
+      }
+    },
+    "your_name": "tuNombre",
+    "why": {
+      "stand_out": {
+        "title": "Destaca con un alias único para tu avatar",
+        "description": "Dile adiós a esos números al final de tu apodo."
+      },
+      "unlock": {
+        "title": "Desbloquea tu propio espacio personal 3D",
+        "description": "Obtén acceso a tu propio espacio 3D en el Metaverso. {link}"
+      },
+      "governance": {
+        "title": "Participar en la gobernanza",
+        "description": "Cada NOMBRE le otorga <b>100 poder de voto (VP)</b> para participar en propuestas DAO."
+      },
+      "get_url": {
+        "title": "Consigue la URL de tu LAND",
+        "description": "Facilite a los visitantes encontrar su TIERRA con una URL memorable como <b>https://name.dcl.eth</b>"
+      }
+    },
+    "ctas": {
+      "name_taken": {
+        "title": "Tu NOMBRE ya está en uso?",
+        "description": "No te preocupes, siempre puedes visitar nuestro Marketplace",
+        "cta": "Explorar nombres que se revenden"
+      },
+      "manage": {
+        "title": "Ya tengo Nombres de Decentraland",
+        "cta": "Gestiona tus nombres"
+      }
+    }
+  },
+  "set_name_as_alias_modal": {
+    "title": "Utilice NOMBRE como alias",
+    "description": "Su alias actual se actualizará inmediatamente.",
+    "success_title": "Todo listo!",
+    "success_description": "Tu alias fue actualizado"
   }
 }
diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json
index 85c8d99f91..2b281fc579 100644
--- a/webapp/src/modules/translation/locales/zh.json
+++ b/webapp/src/modules/translation/locales/zh.json
@@ -68,7 +68,9 @@
     "of": "的",
     "now": "现在",
     "actions": "行动",
-    "action_required": "需要采取的行动"
+    "action_required": "需要采取的行动",
+    "finish": "结束",
+    "guest": "客人"
   },
   "search_dropdown": {
     "recent": "最近的",
@@ -98,6 +100,7 @@
     "overview": "概述",
     "mvmf": "元界音乐节",
     "land": "土地",
+    "names": "姓名",
     "collectibles": "收藏品",
     "partners": "伙伴",
     "my_assets": "我的资产",
@@ -1170,6 +1173,11 @@
         },
         "try_again": "Try again"
       }
+    },
+    "claim_name_success": {
+      "title": "你获得了进入一个世界的机会",
+      "body": "在虚拟宇宙中建立您的个人空间。",
+      "cta": "查看我的世界"
     }
   },
   "maintainance": {
@@ -1474,7 +1482,9 @@
       "title": "全做完了！",
       "status": "交易确认",
       "view_item": "查看我的物品",
-      "try_genesis_city": "在创世纪尝试"
+      "try_genesis_city": "在创世纪尝试",
+      "mint_more_names": "铸造更多名字",
+      "set_as_primary_name": "设置为主名称"
     },
     "error_state": {
       "title": "糟糕",
@@ -1541,5 +1551,75 @@
   "atlas_updated_warning": {
     "info": "<strong>地图数据可能过时</strong>Find the moST在此地图下方的部分中的最新土地详细信息。刷新此页面可能会更新信息。如果问题仍然存在，请联系我们的支持团队。",
     "fingerprint_missmatch": "这片土地的信息可能不会更新。请刷新页面以获取最新信息。如果问题仍然存在，请联系我们的支持团队。"
+  },
+  "names_page": {
+    "title": "索取您的 Decentraland NAME",
+    "subtitle": "通过独特的名称、投票权和您自己的世界，充分发挥 Decentraland 公民身份的潜力！",
+    "claim_a_name": "索赔名称",
+    "browse_names_being_resold": "浏览正在转售的 NAME",
+    "manage_your_names": "管理您的姓名",
+    "name_label": "姓名",
+    "name_placeholder": "你的名字在这里",
+    "repeated_message": "这个名称不可用。",
+    "claim_button": "宣称",
+    "available": "姓名可用",
+    "not_available": "不可用的域名。但您仍然可以获得它，请访问{link}",
+    "marketplace": "查看市场上是否有售。",
+    "name_cost": "名字成本 {mana} {network}",
+    "ethereum_mainnet_network": "以太坊主网网络",
+    "dao_tooltip": "NAME 销售的所有收益都将转入 DAO 金库。{link}",
+    "why_names": "为什么要获取 NAME？",
+    "name_too_short": "名称太短：名称的长度必须至少为 2 个字符。",
+    "has_spaces": "NAME 不能包含空格。",
+    "name_too_long": "名称最多可包含 15 个字符。",
+    "invalid_characters": "名称只能包含字母数字字符。",
+    "not_enough_mana": "您没有足够的 MANA 来申请新名称",
+    "claim_name_fat_finger_modal": {
+      "title": "请确认您的新名称",
+      "description": "您已选择{name}。重新输入您的姓名以确认您的选择",
+      "ok_message": "恭喜您获得了名称 {name}。",
+      "name_placeholder": "你独特的名字",
+      "names_different": "姓名不匹配",
+      "authorization": {
+        "title_action": "购买",
+        "action": "宣称"
+      }
+    },
+    "your_name": "yourName",
+    "why": {
+      "stand_out": {
+        "title": "为您的头像设置一个独特的别名，让您脱颖而出",
+        "description": "使用末尾不带数字的用户名（例如 Genesis#1234）来拥有您在虚拟宇宙中的存在。"
+      },
+      "unlock": {
+        "title": "解锁你自己的世界",
+        "description": "在元宇宙中定制您自己的虚拟 3D 空间。举办活动、构建和实验。{link}"
+      },
+      "governance": {
+        "title": "参与治理",
+        "description": "塑造 Decentraland 的未来——在对 DAO 提案进行投票时，每个 NAME 都会授予您<b>100 投票权</b>。 {关联}"
+      },
+      "get_url": {
+        "title": "您的虚拟空间的专用 URL",
+        "description": "使用您的 LAND 或世界的独特且令人难忘的 URL 来引导访问者<b>https://name.dcl.eth</b>"
+      }
+    },
+    "ctas": {
+      "name_taken": {
+        "title": "您选择的NAME 已被认领吗？",
+        "description": "已领取的 NAME 可以在市场中出售 - 查看您想要的 NAME 是否可用。",
+        "cta": "浏览市场名称"
+      },
+      "manage": {
+        "title": "已有 Decentraland 名称",
+        "cta": "管理你的名字"
+      }
+    }
+  },
+  "set_name_as_alias_modal": {
+    "title": "使用 NAME 作为别名",
+    "description": "您当前的别名将立即更新。",
+    "success_title": "全做完了！",
+    "success_description": "您的用户名已更新"
   }
 }
diff --git a/webapp/src/modules/ui/browse/reducer.spec.ts b/webapp/src/modules/ui/browse/reducer.spec.ts
index 7680a34705..4c1363d088 100644
--- a/webapp/src/modules/ui/browse/reducer.spec.ts
+++ b/webapp/src/modules/ui/browse/reducer.spec.ts
@@ -247,7 +247,7 @@ describe('when reducing the fetch NFTs success action', () => {
       'and the view is %s',
       (view: View) => {
         beforeEach(() => {
-          initialState = { ...initialState, lastTimestamp: 2 }
+          initialState = { ...initialState, lastTimestamp: 2, view }
           nftsFetchOptions = {
             ...nftsFetchOptions,
             view
diff --git a/webapp/src/modules/ui/browse/reducer.ts b/webapp/src/modules/ui/browse/reducer.ts
index 7541b7e332..6cfe9388b4 100644
--- a/webapp/src/modules/ui/browse/reducer.ts
+++ b/webapp/src/modules/ui/browse/reducer.ts
@@ -120,22 +120,25 @@ export function browseReducer(
       const nftIds = isLoadingMoreResults(state, page)
         ? [...state.nftIds, ...newNftIds]
         : newNftIds
-      switch (view) {
-        case View.MARKET:
-        case View.CURRENT_ACCOUNT:
-        case View.ACCOUNT: {
-          return {
-            ...state,
-            view,
-            page,
-            nftIds,
-            count: count,
-            lastTimestamp: timestamp
+      if (view === state.view) {
+        switch (view) {
+          case View.MARKET:
+          case View.CURRENT_ACCOUNT:
+          case View.ACCOUNT: {
+            return {
+              ...state,
+              view,
+              page,
+              nftIds,
+              count: count,
+              lastTimestamp: timestamp
+            }
           }
+          default:
+            return state
         }
-        default:
-          return state
       }
+      return state
     }
 
     case FETCH_NFTS_REQUEST:
@@ -147,7 +150,10 @@ export function browseReducer(
           : action.payload
 
       const isDifferentView = view !== state.view
-      if (isDifferentView) {
+      if (
+        isDifferentView &&
+        !(view === View.ATLAS && state.view === View.MARKET) // exception for atlas request on the view market, it should not override the nftIds
+      ) {
         return {
           ...state,
           [key]: [],
diff --git a/webapp/src/modules/vendor/decentraland/lists/api.ts b/webapp/src/modules/vendor/decentraland/lists/api.ts
new file mode 100644
index 0000000000..93d8758bbd
--- /dev/null
+++ b/webapp/src/modules/vendor/decentraland/lists/api.ts
@@ -0,0 +1,16 @@
+import { BaseAPI } from 'decentraland-dapps/dist/lib/api'
+import { config } from '../../../../config'
+
+export const DCL_LISTS_URL = config.get('DCL_LISTS_SERVER', '')
+
+export class DclListsAPI extends BaseAPI {
+  public async fetchBannedNames(): Promise<string[]> {
+    const response: { data: string[] } = await this.request(
+      'POST',
+      '/banned-names'
+    )
+    return response.data
+  }
+}
+
+export const lists = new DclListsAPI(DCL_LISTS_URL)
diff --git a/webapp/src/modules/vendor/decentraland/routing/types.ts b/webapp/src/modules/vendor/decentraland/routing/types.ts
index 26a40f4701..b352a44bba 100644
--- a/webapp/src/modules/vendor/decentraland/routing/types.ts
+++ b/webapp/src/modules/vendor/decentraland/routing/types.ts
@@ -2,6 +2,7 @@ export enum Section {
   ALL = 'all',
 
   LAND = 'land',
+  NAMES = 'names',
   PARCELS = 'parcels',
   ESTATES = 'estates',
   WEARABLES = 'wearables',