diff --git a/hooks/useL2Delegate.ts b/hooks/useL2Delegate.ts
index 26d6432..3b0a74c 100644
--- a/hooks/useL2Delegate.ts
+++ b/hooks/useL2Delegate.ts
@@ -6,9 +6,10 @@ import { parseAbi } from 'viem';
 
 type Props = {
   delegatorAddress?: `0x${string}`;
+  enabled?: boolean;
 };
 
-export const useL2Delegate = ({ delegatorAddress }: Props) => {
+export const useL2Delegate = ({ delegatorAddress, enabled }: Props) => {
   let { address } = useAccount();
   if (delegatorAddress !== undefined) {
     address = delegatorAddress;
@@ -23,6 +24,8 @@ export const useL2Delegate = ({ delegatorAddress }: Props) => {
     functionName: 'delegates',
     args: [address],
     chainId: l2.chain.id,
+    watch: true,
+    enabled: enabled,
   });
   return { data, error, isLoading };
 };
diff --git a/pages/[id]/delegate.tsx b/pages/[id]/delegate.tsx
index acf66f3..5bdfd29 100644
--- a/pages/[id]/delegate.tsx
+++ b/pages/[id]/delegate.tsx
@@ -18,6 +18,7 @@ import { ZERO_ADDRESS } from '@/util/constants';
 import CardWithHeader from '@/components/CardWithHeader';
 import Spinner from '@/components/Spinner';
 import { switchChain } from '@/util';
+import { getEnsAddress } from '@/util/ens';
 import { Tooltip } from 'react-tooltip';
 import { useTokenInfo } from '@/hooks/useTokenInfo';
 
@@ -34,11 +35,6 @@ const Delegate: NextPage = () => {
   const { data: walletClient, isLoading: walletIsLoading } = useWalletClient();
   const { chain } = useNetwork();
   const [delegateAddress, setDelegateAddress] = useState(address);
-  const { data: delegatee } = useL2Delegate({});
-	const {data: delegateEnsName} = useEnsName({address: delegatee, chainId: 1});
-	const {data: delegateEnsAvatar} = useEnsAvatar({address: delegatee, chainId: 1});
-	console.log(delegateEnsName);
-	console.log(delegatee);
   const { data: l2VotingWeight } = useL2CurrentVotingWeight({
     voterAddress: address || ZERO_ADDRESS,
   });
@@ -50,8 +46,11 @@ const Delegate: NextPage = () => {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isValid },
   } = useForm<FormData>({ mode: 'onChange' });
+  const { data: delegatee } = useL2Delegate({ enabled: isValid });
+  const { data: delegateEnsName } = useEnsName({ address: delegatee, chainId: 1 });
+  const { data: delegateEnsAvatar } = useEnsAvatar({ name: delegateEnsName, chainId: 1 });
 
   const l2VotingWeightFormatted = formatUnits(
     l2VotingWeight || BigInt(0),
@@ -125,6 +124,13 @@ const Delegate: NextPage = () => {
                       <div className="self-center">
                         {mounted && delegatee !== ZERO_ADDRESS ? (
                           <div className="flex items-start gap-1">
+                            {delegateEnsAvatar && (
+                              <img
+                                className="inline-block h-6 w-6 rounded-full"
+                                src={delegateEnsAvatar}
+                                alt=""
+                              />
+                            )}
                             {delegateEnsName || delegatee}{' '}
                             <InformationCircleIcon
                               id="delegate-address-information"
@@ -157,10 +163,18 @@ const Delegate: NextPage = () => {
                         aria-invalid="true"
                         aria-describedby="address-error"
                         {...register('delegateAddress', {
-                          onChange: (e) => {
-                            setDelegateAddress(e.target.value);
+                          onChange: async (e) => {
+                            const val = await getEnsAddress(e.target.value);
+                            setDelegateAddress(val || e.target.value);
                           },
                           validate: async (value) => {
+                            if (value?.includes('.eth')) {
+                              const val = await getEnsAddress(value);
+                              if (val !== null) {
+                                value = val;
+                              }
+                            }
+
                             const validAddress = isAddress(value);
                             const isBalanceNonzero = (l2.token?.value || BigInt(0)) > BigInt(0);
                             if (validAddress && isBalanceNonzero) return true;
diff --git a/util/ens.ts b/util/ens.ts
new file mode 100644
index 0000000..dc7bece
--- /dev/null
+++ b/util/ens.ts
@@ -0,0 +1,20 @@
+import { normalize } from 'viem/ens';
+import { createPublicClient, http } from 'viem';
+import { mainnet } from 'viem/chains';
+
+export const getEnsAddress = async (name: string) => {
+  const client = createPublicClient({
+    chain: mainnet,
+    transport: http(),
+  });
+  try {
+    const ensAddress = await client.getEnsAddress({
+      name: normalize(name),
+    });
+    return ensAddress;
+  } catch (e) {
+    const err = e as Error;
+    console.error(err.message);
+  }
+  return null;
+};