diff --git a/public/locales/en/transactionFlow.json b/public/locales/en/transactionFlow.json
index d61128554..425e81d08 100644
--- a/public/locales/en/transactionFlow.json
+++ b/public/locales/en/transactionFlow.json
@@ -3,9 +3,12 @@
     "profileEditor": {
       "tabs": {
         "avatar": {
+          "change": "Change avatar",
+          "label": "Avatar",
           "dropdown": {
             "selectNFT": "Select NFT",
-            "uploadImage": "Upload Image"
+            "uploadImage": "Upload Image",
+            "enterManually": "Enter manually"
           },
           "nft": {
             "title": "Select an NFT",
diff --git a/src/components/@molecules/ProfileEditor/Avatar/AvatarButton.tsx b/src/components/@molecules/ProfileEditor/Avatar/AvatarButton.tsx
index 31b270ab0..380a640c8 100644
--- a/src/components/@molecules/ProfileEditor/Avatar/AvatarButton.tsx
+++ b/src/components/@molecules/ProfileEditor/Avatar/AvatarButton.tsx
@@ -2,17 +2,17 @@ import { ComponentProps, Dispatch, SetStateAction, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import { Avatar, Dropdown } from '@ensdomains/thorin'
+import { Avatar, Button, Dropdown } from '@ensdomains/thorin'
 import { DropdownItem } from '@ensdomains/thorin/dist/types/components/molecules/Dropdown/Dropdown'
 
 import CameraIcon from '@app/assets/Camera.svg'
 import { LegacyDropdown } from '@app/components/@molecules/LegacyDropdown/LegacyDropdown'
 
-const Container = styled.button<{ $error?: boolean; $validated?: boolean; $dirty?: boolean }>(
+const AvatarWrapper = styled.button<{ $error?: boolean; $validated?: boolean; $dirty?: boolean }>(
   ({ theme, $validated, $dirty, $error }) => css`
     position: relative;
-    width: 90px;
-    height: 90px;
+    width: 120px;
+    height: 120px;
     border-radius: 50%;
     background-color: ${theme.colors.backgroundPrimary};
     cursor: pointer;
@@ -66,8 +66,8 @@ const IconMask = styled.div(
     position: absolute;
     top: 0;
     left: 0;
-    width: 90px;
-    height: 90px;
+    width: 120px;
+    height: 120px;
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -83,7 +83,25 @@ const IconMask = styled.div(
   `,
 )
 
-export type AvatarClickType = 'upload' | 'nft'
+const ActionContainer = styled.div(
+  ({ theme }) => css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space[2]};
+    max-width: 200px;
+  `,
+)
+
+const Container = styled.div(
+  ({ theme }) => css`
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: ${theme.space[4]};
+  `,
+)
+
+export type AvatarClickType = 'upload' | 'nft' | 'manual'
 
 type PickedDropdownProps = Pick<ComponentProps<typeof Dropdown>, 'isOpen' | 'setIsOpen'>
 
@@ -100,8 +118,8 @@ type Props = {
 
 const AvatarButton = ({
   validated,
-  dirty,
   error,
+  dirty,
   src,
   onSelectOption,
   onAvatarChange,
@@ -129,41 +147,56 @@ const AvatarButton = ({
     : ({} as { isOpen: never; setIsOpen: never })
 
   return (
-    <LegacyDropdown
-      items={
-        [
-          {
-            label: t('input.profileEditor.tabs.avatar.dropdown.selectNFT'),
-            color: 'black',
-            onClick: handleSelectOption('nft'),
-          },
-          {
-            label: t('input.profileEditor.tabs.avatar.dropdown.uploadImage'),
-            color: 'black',
-            onClick: handleSelectOption('upload'),
-          },
-          ...(validated
-            ? [
-                {
-                  label: t('action.remove', { ns: 'common' }),
-                  color: 'red',
-                  onClick: handleSelectOption('remove'),
-                },
-              ]
-            : []),
-        ] as DropdownItem[]
-      }
-      keepMenuOnTop
-      shortThrow
-      {...dropdownProps}
-    >
-      <Container $validated={validated && dirty} $error={error} $dirty={dirty} type="button">
+    <Container>
+      <AvatarWrapper $validated={validated && dirty} $error={error} $dirty={dirty} type="button">
         <Avatar label="profile-button-avatar" src={src} noBorder />
         {!validated && !error && (
           <IconMask>
             <CameraIcon />
           </IconMask>
         )}
+      </AvatarWrapper>
+      <LegacyDropdown
+        items={
+          [
+            {
+              label: t('input.profileEditor.tabs.avatar.dropdown.selectNFT'),
+              color: 'black',
+              onClick: handleSelectOption('nft'),
+            },
+            {
+              label: t('input.profileEditor.tabs.avatar.dropdown.uploadImage'),
+              color: 'black',
+              onClick: handleSelectOption('upload'),
+            },
+            {
+              label: t('input.profileEditor.tabs.avatar.dropdown.enterManually'),
+              color: 'black',
+              onClick: handleSelectOption('manual'),
+            },
+            ...(validated
+              ? [
+                  {
+                    label: t('action.remove', { ns: 'common' }),
+                    color: 'red',
+                    onClick: handleSelectOption('remove'),
+                  },
+                ]
+              : []),
+          ] as DropdownItem[]
+        }
+        keepMenuOnTop
+        shortThrow
+        {...dropdownProps}
+      >
+        <ActionContainer>
+          <Button disabled colorStyle="accentSecondary">
+            {src}
+          </Button>
+          <Button colorStyle="accentSecondary">
+            {t('input.profileEditor.tabs.avatar.change')}
+          </Button>
+        </ActionContainer>
         <input
           type="file"
           style={{ display: 'none' }}
@@ -176,8 +209,8 @@ const AvatarButton = ({
             }
           }}
         />
-      </Container>
-    </LegacyDropdown>
+      </LegacyDropdown>
+    </Container>
   )
 }
 
diff --git a/src/components/@molecules/ProfileEditor/Avatar/AvatarManual.tsx b/src/components/@molecules/ProfileEditor/Avatar/AvatarManual.tsx
new file mode 100644
index 000000000..d6d156f11
--- /dev/null
+++ b/src/components/@molecules/ProfileEditor/Avatar/AvatarManual.tsx
@@ -0,0 +1,94 @@
+/* eslint-disable no-multi-assign */
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Button, Dialog, Helper, Input } from '@ensdomains/thorin'
+
+import { useUploadAvatar } from './useUploadAvatar'
+
+type AvatarManualProps = {
+  name: string
+  handleCancel: () => void
+  handleSubmit: (type: 'manual', uri: string, display?: string) => void
+}
+
+function isValidHttpUrl(value: string) {
+  let url
+
+  try {
+    url = new URL(value)
+  } catch (_) {
+    return false
+  }
+
+  return url.protocol === 'http:' || url.protocol === 'https:'
+}
+
+export function AvatarManual({ name, handleCancel, handleSubmit }: AvatarManualProps) {
+  const { t } = useTranslation('transactionFlow')
+
+  const [value, setValue] = useState<string>('')
+
+  const { signAndUpload, isPending, error } = useUploadAvatar()
+
+  const handleUpload = async () => {
+    try {
+      const dataURL = await fetch(value)
+        .then((res) => res.blob())
+        .then((blob) => {
+          return new Promise<string>((res) => {
+            const reader = new FileReader()
+
+            reader.onload = (e) => {
+              if (e.target) res(e.target.result as string)
+            }
+
+            reader.readAsDataURL(blob)
+          })
+        })
+
+      const endpoint = await signAndUpload({ dataURL, name })
+
+      if (endpoint) {
+        handleSubmit('manual', endpoint, value)
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  return (
+    <>
+      <Dialog.Heading title={t('input.profileEditor.tabs.avatar.dropdown.enterManually')} />
+      <Dialog.Content>
+        <Input
+          label={t('input.profileEditor.tabs.avatar.label')}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </Dialog.Content>
+      {error && (
+        <Helper data-testid="avatar-upload-error" type="error">
+          {error.message}
+        </Helper>
+      )}
+      <Dialog.Footer
+        leading={
+          <Button colorStyle="accentSecondary" onClick={() => handleCancel()}>
+            {t('action.back', { ns: 'common' })}
+          </Button>
+        }
+        trailing={
+          <Button
+            disabled={isPending || !isValidHttpUrl(value)}
+            colorStyle={error ? 'redSecondary' : undefined}
+            onClick={handleUpload}
+          >
+            {error ? t('action.tryAgain', { ns: 'common' }) : t('action.confirm', { ns: 'common' })}
+          </Button>
+        }
+      />
+    </>
+  )
+}
diff --git a/src/components/@molecules/ProfileEditor/Avatar/AvatarUpload.tsx b/src/components/@molecules/ProfileEditor/Avatar/AvatarUpload.tsx
index 6959e53e9..36c33a47d 100644
--- a/src/components/@molecules/ProfileEditor/Avatar/AvatarUpload.tsx
+++ b/src/components/@molecules/ProfileEditor/Avatar/AvatarUpload.tsx
@@ -1,17 +1,12 @@
 /* eslint-disable no-multi-assign */
-import { sha256 } from '@noble/hashes/sha256'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
-import { bytesToHex } from 'viem'
-import { useAccount, useSignTypedData } from 'wagmi'
 
 import { Button, Dialog, Helper } from '@ensdomains/thorin'
 
-import { useChainName } from '@app/hooks/chain/useChainName'
-
 import { AvCancelButton, CropComponent } from './AvatarCrop'
+import { useUploadAvatar } from './useUploadAvatar'
 
 const CroppedImagePreview = styled.img(
   ({ theme }) => css`
@@ -22,21 +17,6 @@ const CroppedImagePreview = styled.img(
   `,
 )
 
-const dataURLToBytes = (dataURL: string) => {
-  const base64 = dataURL.split(',')[1]
-  const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0))
-  return bytes
-}
-
-type AvatarUploadResult =
-  | {
-      message: string
-    }
-  | {
-      error: string
-      status: number
-    }
-
 const UploadComponent = ({
   dataURL,
   handleCancel,
@@ -49,82 +29,16 @@ const UploadComponent = ({
   name: string
 }) => {
   const { t } = useTranslation('transactionFlow')
-  const queryClient = useQueryClient()
-  const chainName = useChainName()
 
-  const { address } = useAccount()
-  const { signTypedDataAsync } = useSignTypedData()
+  const { signAndUpload, isPending, error } = useUploadAvatar()
 
-  const {
-    mutate: signAndUpload,
-    isPending,
-    error,
-  } = useMutation<void, Error>({
-    mutationFn: async () => {
-      let baseURL = process.env.NEXT_PUBLIC_AVUP_ENDPOINT || `https://euc.li`
-      if (chainName !== 'mainnet') {
-        baseURL = `${baseURL}/${chainName}`
-      }
-      const endpoint = `${baseURL}/${name}`
+  const handleUpload = async () => {
+    const endpoint = await signAndUpload({ dataURL, name })
 
-      const urlHash = bytesToHex(sha256(dataURLToBytes(dataURL)))
-      const expiry = `${Date.now() + 1000 * 60 * 60 * 24 * 7}`
-
-      const sig = await signTypedDataAsync({
-        primaryType: 'Upload',
-        domain: {
-          name: 'Ethereum Name Service',
-          version: '1',
-        },
-        types: {
-          Upload: [
-            { name: 'upload', type: 'string' },
-            { name: 'expiry', type: 'string' },
-            { name: 'name', type: 'string' },
-            { name: 'hash', type: 'string' },
-          ],
-        },
-        message: {
-          upload: 'avatar',
-          expiry,
-          name,
-          hash: urlHash,
-        },
-      })
-      const fetched = (await fetch(endpoint, {
-        method: 'PUT',
-        headers: {
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          expiry,
-          dataURL,
-          sig,
-          unverifiedAddress: address,
-        }),
-      }).then((res) => res.json())) as AvatarUploadResult
-
-      if ('message' in fetched && fetched.message === 'uploaded') {
-        queryClient.invalidateQueries({
-          predicate: (query) => {
-            const {
-              queryKey: [params],
-            } = query
-            if (params !== 'ensAvatar') return false
-            return true
-          },
-        })
-        return handleSubmit('upload', endpoint, dataURL)
-      }
-
-      if ('error' in fetched) {
-        throw new Error(fetched.error)
-      }
-
-      throw new Error('Unknown error')
-    },
-  })
+    if (endpoint) {
+      handleSubmit('upload', endpoint, dataURL)
+    }
+  }
 
   return (
     <>
@@ -146,7 +60,7 @@ const UploadComponent = ({
           <Button
             disabled={isPending}
             colorStyle={error ? 'redSecondary' : undefined}
-            onClick={() => signAndUpload()}
+            onClick={handleUpload}
             data-testid="upload-button"
           >
             {error
diff --git a/src/components/@molecules/ProfileEditor/Avatar/AvatarViewManager.tsx b/src/components/@molecules/ProfileEditor/Avatar/AvatarViewManager.tsx
index 486f0307e..b0881b7bf 100644
--- a/src/components/@molecules/ProfileEditor/Avatar/AvatarViewManager.tsx
+++ b/src/components/@molecules/ProfileEditor/Avatar/AvatarViewManager.tsx
@@ -1,20 +1,27 @@
+import { AvatarManual } from './AvatarManual'
 import { AvatarNFT } from './AvatarNFT'
 import { AvatarUpload } from './AvatarUpload'
 
+type AvatarViewManagerType = 'upload' | 'manual' | 'nft'
+
 export const AvatarViewManager = ({
   type,
   avatarFile,
   ...props
 }: {
   handleCancel: () => void
-  handleSubmit: (type: 'upload' | 'nft', uri: string, display?: string) => void
+  handleSubmit: (type: AvatarViewManagerType, uri: string, display?: string) => void
   name: string
   avatarFile?: File
-  type: 'upload' | 'nft'
+  type: AvatarViewManagerType
 }) => {
-  return type === 'upload' ? (
-    <AvatarUpload avatar={avatarFile!} {...props} />
-  ) : (
-    <AvatarNFT {...props} />
-  )
+  if (type === 'upload') {
+    return <AvatarUpload avatar={avatarFile!} {...props} />
+  }
+
+  if (type === 'manual') {
+    return <AvatarManual {...props} />
+  }
+
+  return <AvatarNFT {...props} />
 }
diff --git a/src/components/@molecules/ProfileEditor/Avatar/useUploadAvatar.ts b/src/components/@molecules/ProfileEditor/Avatar/useUploadAvatar.ts
new file mode 100644
index 000000000..d82ff994c
--- /dev/null
+++ b/src/components/@molecules/ProfileEditor/Avatar/useUploadAvatar.ts
@@ -0,0 +1,111 @@
+/* eslint-disable no-multi-assign */
+
+import { sha256 } from '@noble/hashes/sha256'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { bytesToHex } from 'viem'
+import { useAccount, useSignTypedData } from 'wagmi'
+
+import { useChainName } from '@app/hooks/chain/useChainName'
+
+type AvatarUploadResult =
+  | {
+      message: string
+    }
+  | {
+      error: string
+      status: number
+    }
+
+const dataURLToBytes = (dataURL: string) => {
+  const base64 = dataURL.split(',')[1]
+  const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0))
+  return bytes
+}
+
+export function useUploadAvatar() {
+  const queryClient = useQueryClient()
+  const chainName = useChainName()
+
+  const { address } = useAccount()
+  const { signTypedDataAsync } = useSignTypedData()
+
+  const {
+    mutateAsync: signAndUpload,
+    isPending,
+    error,
+  } = useMutation({
+    mutationFn: async ({ dataURL, name }: { dataURL: string; name: string }) => {
+      let baseURL = process.env.NEXT_PUBLIC_AVUP_ENDPOINT || `https://euc.li`
+      if (chainName !== 'mainnet') {
+        baseURL = `${baseURL}/${chainName}`
+      }
+      const endpoint = `${baseURL}/${name}`
+
+      const urlHash = bytesToHex(sha256(dataURLToBytes(dataURL)))
+      const expiry = `${Date.now() + 1000 * 60 * 60 * 24 * 7}`
+
+      const sig = await signTypedDataAsync({
+        primaryType: 'Upload',
+        domain: {
+          name: 'Ethereum Name Service',
+          version: '1',
+        },
+        types: {
+          Upload: [
+            { name: 'upload', type: 'string' },
+            { name: 'expiry', type: 'string' },
+            { name: 'name', type: 'string' },
+            { name: 'hash', type: 'string' },
+          ],
+        },
+        message: {
+          upload: 'avatar',
+          expiry,
+          name,
+          hash: urlHash,
+        },
+      })
+
+      const fetched = (await fetch(endpoint, {
+        method: 'PUT',
+        headers: {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          expiry,
+          dataURL,
+          sig,
+          unverifiedAddress: address,
+        }),
+      }).then((res) => res.json())) as AvatarUploadResult
+
+      if ('message' in fetched && fetched.message === 'uploaded') {
+        queryClient.invalidateQueries({
+          predicate: (query) => {
+            const {
+              queryKey: [params],
+            } = query
+
+            if (params !== 'ensAvatar') return false
+            return true
+          },
+        })
+
+        return endpoint
+      }
+
+      if ('error' in fetched) {
+        throw new Error(fetched.error)
+      }
+
+      throw new Error('Unknown error')
+    },
+  })
+
+  return {
+    signAndUpload,
+    isPending,
+    error,
+  }
+}
diff --git a/src/components/pages/profile/[name]/registration/steps/Profile/Profile.tsx b/src/components/pages/profile/[name]/registration/steps/Profile/Profile.tsx
index bbabfbad7..5fbce56dc 100644
--- a/src/components/pages/profile/[name]/registration/steps/Profile/Profile.tsx
+++ b/src/components/pages/profile/[name]/registration/steps/Profile/Profile.tsx
@@ -202,13 +202,13 @@ const Profile = ({ name, callback, registrationData, resolverExists }: Props) =>
         open={modalOpen}
       >
         {match(modalOption)
-          .with('upload', 'nft', (_modalOption) => (
+          .with('upload', 'nft', 'manual', (_modalOption) => (
             <AvatarViewManager
               name={name}
               avatarFile={avatarFile}
               handleCancel={() => setModalOpen(false)}
               type={_modalOption}
-              handleSubmit={(type: 'nft' | 'upload', uri: string, display?: string) => {
+              handleSubmit={(type, uri, display) => {
                 setAvatar(uri)
                 setAvatarSrc(display)
                 setModalOpen(false)
diff --git a/src/transaction-flow/input/ProfileEditor/ProfileEditor-flow.tsx b/src/transaction-flow/input/ProfileEditor/ProfileEditor-flow.tsx
index 57823fc13..789bd897c 100644
--- a/src/transaction-flow/input/ProfileEditor/ProfileEditor-flow.tsx
+++ b/src/transaction-flow/input/ProfileEditor/ProfileEditor-flow.tsx
@@ -33,13 +33,6 @@ import { getResolverWrapperAwareness } from '@app/utils/utils'
 import ResolverWarningOverlay from './ResolverWarningOverlay'
 import { WrappedAvatarButton } from './WrappedAvatarButton'
 
-const AvatarWrapper = styled.div(
-  () => css`
-    display: flex;
-    justify-content: center;
-  `,
-)
-
 const ButtonContainer = styled.div(
   ({ theme }) => css`
     display: flex;
@@ -112,7 +105,9 @@ const ProfileEditor = ({ data = {}, transactions = [], dispatch, onDismiss }: Pr
   const { t } = useTranslation('register')
 
   const formRef = useRef<HTMLFormElement>(null)
-  const [view, setView] = useState<'editor' | 'upload' | 'nft' | 'addRecord' | 'warning'>('editor')
+  const [view, setView] = useState<
+    'editor' | 'upload' | 'manual' | 'nft' | 'addRecord' | 'warning'
+  >('editor')
 
   const { name = '', resumable = false } = data
 
@@ -144,6 +139,7 @@ const ProfileEditor = ({ data = {}, transactions = [], dispatch, onDismiss }: Pr
 
   // Update profile records if transaction data exists
   const [isRecordsUpdated, setIsRecordsUpdated] = useState(false)
+
   useEffect(() => {
     const updateProfileRecordsWithTransactionData = () => {
       const transaction = transactions.find(
@@ -239,6 +235,13 @@ const ProfileEditor = ({ data = {}, transactions = [], dispatch, onDismiss }: Pr
 
   if (isLoading || resolverStatus.isLoading || !isRecordsUpdated) return <TransactionLoader />
 
+  const handleConfirm = (uri: string, display?: string) => {
+    setAvatar(uri)
+    setAvatarSrc(display)
+    setView('editor')
+    trigger()
+  }
+
   return (
     <>
       {match(view)
@@ -254,17 +257,15 @@ const ProfileEditor = ({ data = {}, transactions = [], dispatch, onDismiss }: Pr
               })}
               alwaysShowDividers={{ bottom: true }}
             >
-              <AvatarWrapper>
-                <WrappedAvatarButton
-                  name={name}
-                  control={control}
-                  src={avatarSrc}
-                  onSelectOption={(option) => setView(option)}
-                  onAvatarChange={(avatar) => setAvatar(avatar)}
-                  onAvatarFileChange={(file) => setAvatarFile(file)}
-                  onAvatarSrcChange={(src) => setAvatarSrc(src)}
-                />
-              </AvatarWrapper>
+              <WrappedAvatarButton
+                name={name}
+                control={control}
+                src={avatarSrc}
+                onSelectOption={(option) => setView(option)}
+                onAvatarChange={(avatar) => setAvatar(avatar)}
+                onAvatarFileChange={(file) => setAvatarFile(file)}
+                onAvatarSrcChange={(src) => setAvatarSrc(src)}
+              />
               {profileRecords.map((field, index) =>
                 field.group === 'custom' ? (
                   <CustomProfileRecordInput
@@ -384,11 +385,19 @@ const ProfileEditor = ({ data = {}, transactions = [], dispatch, onDismiss }: Pr
             avatarFile={avatarFile}
             handleCancel={() => setView('editor')}
             type="upload"
-            handleSubmit={(type: 'upload' | 'nft', uri: string, display?: string) => {
-              setAvatar(uri)
-              setAvatarSrc(display)
-              setView('editor')
-              trigger()
+            handleSubmit={(type, uri, display) => {
+              handleConfirm(uri, display)
+            }}
+          />
+        ))
+        .with('manual', () => (
+          <AvatarViewManager
+            name={name}
+            avatarFile={avatarFile}
+            handleCancel={() => setView('editor')}
+            type="manual"
+            handleSubmit={(type, uri, display) => {
+              handleConfirm(uri, display)
             }}
           />
         ))
@@ -398,11 +407,8 @@ const ProfileEditor = ({ data = {}, transactions = [], dispatch, onDismiss }: Pr
             avatarFile={avatarFile}
             handleCancel={() => setView('editor')}
             type="nft"
-            handleSubmit={(type: 'upload' | 'nft', uri: string, display?: string) => {
-              setAvatar(uri)
-              setAvatarSrc(display)
-              setView('editor')
-              trigger()
+            handleSubmit={(type, uri, display) => {
+              handleConfirm(uri, display)
             }}
           />
         ))
diff --git a/src/transaction-flow/input/ProfileEditor/WrappedAvatarButton.tsx b/src/transaction-flow/input/ProfileEditor/WrappedAvatarButton.tsx
index 69f17ff0f..7f382b96a 100644
--- a/src/transaction-flow/input/ProfileEditor/WrappedAvatarButton.tsx
+++ b/src/transaction-flow/input/ProfileEditor/WrappedAvatarButton.tsx
@@ -1,7 +1,10 @@
 import { ComponentProps } from 'react'
 import { Control, useFormState } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { useEnsAvatar } from 'wagmi'
 
+import { Field } from '@ensdomains/thorin'
+
 import AvatarButton from '@app/components/@molecules/ProfileEditor/Avatar/AvatarButton'
 import { ProfileEditorForm } from '@app/hooks/useProfileEditorForm'
 import { ensAvatarConfig } from '@app/utils/query/ipfsGateway'
@@ -12,6 +15,8 @@ type Props = {
 } & Omit<ComponentProps<typeof AvatarButton>, 'validated'>
 
 export const WrappedAvatarButton = ({ control, name, src, ...props }: Props) => {
+  const { t } = useTranslation('transactionFlow')
+
   const { data: avatar } = useEnsAvatar({ ...ensAvatarConfig, name })
   const formState = useFormState<ProfileEditorForm>({
     control,
@@ -20,7 +25,10 @@ export const WrappedAvatarButton = ({ control, name, src, ...props }: Props) =>
   const isValidated = !!src || !!avatar
   const isDirty = !!formState.dirtyFields.avatar
   const currentOrUpdatedSrc = isDirty ? src : (avatar as string | undefined)
+
   return (
-    <AvatarButton {...props} src={currentOrUpdatedSrc} validated={isValidated} dirty={isDirty} />
+    <Field label={t('input.profileEditor.tabs.avatar.label')}>
+      <AvatarButton {...props} src={currentOrUpdatedSrc} validated={isValidated} dirty={isDirty} />
+    </Field>
   )
 }