diff --git a/src/components/FormPopover.tsx b/src/components/FormPopover.tsx
new file mode 100644
index 0000000..a27148a
--- /dev/null
+++ b/src/components/FormPopover.tsx
@@ -0,0 +1,68 @@
+import * as Popover from '@radix-ui/react-popover'
+import { type ReactNode, useState } from 'react'
+
+import { Box, Button, Stack } from '~/design-system'
+import * as Form from './form'
+
+export function FormPopover({
+  children,
+  disabled,
+  onSubmit,
+}: {
+  children: ReactNode
+  disabled: boolean
+  onSubmit: (e: React.FormEvent) => void
+}) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Popover.Root open={open}>
+      <Popover.Trigger asChild>
+        <Box position="absolute" style={{ top: -6 }}>
+          <Button.Symbol
+            label="Edit"
+            height="16px"
+            onClick={() => setOpen(true)}
+            symbol="square.and.pencil"
+            variant="ghost primary"
+          />
+        </Box>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          onEscapeKeyDown={() => setOpen(false)}
+          onPointerDownOutside={() => setOpen(false)}
+          style={{ zIndex: 1 }}
+        >
+          <Box
+            backgroundColor="surface/secondary/elevated"
+            borderWidth="1px"
+            gap="4px"
+            padding="8px"
+            width="full"
+          >
+            <Form.Root
+              onSubmit={(e) => {
+                onSubmit(e)
+                setOpen(false)
+              }}
+            >
+              <Stack gap="8px">
+                {children}
+                <Button
+                  disabled={disabled}
+                  height="20px"
+                  type="submit"
+                  variant="stroked fill"
+                  width="fit"
+                >
+                  Update
+                </Button>
+              </Stack>
+            </Form.Root>
+          </Box>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index eebadff..91b9463 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -9,6 +9,7 @@ export { DecodedLogs } from './logs'
 export { TabsContent, TabsList } from './tabs'
 
 export { Container } from './Container'
+export { FormPopover } from './FormPopover'
 export { Header } from './Header'
 export { LabelledContent } from './LabelledContent'
 export { LoadMore } from './LoadMore'
diff --git a/src/screens/contract-details.tsx b/src/screens/contract-details.tsx
index 5af7640..ccc1377 100644
--- a/src/screens/contract-details.tsx
+++ b/src/screens/contract-details.tsx
@@ -2,15 +2,18 @@ import * as Tabs from '@radix-ui/react-tabs'
 import { useMutation } from '@tanstack/react-query'
 import type { Abi, AbiFunction } from 'abitype'
 import { useMemo } from 'react'
+import { useForm } from 'react-hook-form'
 import { useParams } from 'react-router'
 
 import {
   AbiFunctionsAccordion,
   Container,
+  FormPopover,
   LabelledContent,
   TabsContent,
   TabsList,
 } from '~/components'
+import * as Form from '~/components/form'
 import { Bleed, Box, Stack, Text } from '~/design-system'
 import { useAutoloadAbi } from '~/hooks/useAutoloadAbi'
 import { useContracts } from '~/hooks/useContracts'
@@ -20,11 +23,19 @@ export default function ContractDetails() {
   const { contracts, updateContract } = useContracts({ enabled: false })
   const contract = contracts.find((c) => c.address === contractAddress)
 
-  const {
-    data: autoloadAbi,
-    isLoading,
-    isFetched,
-  } = useAutoloadAbi({
+  ////////////////////////////////////////////////////////////////////////
+
+  const { formState, register, handleSubmit } = useForm({
+    defaultValues: { name: contract?.name },
+  })
+
+  const update = handleSubmit(({ name }) => {
+    updateContract({ address: contract?.address!, name })
+  })
+
+  ////////////////////////////////////////////////////////////////////////
+
+  const { data: autoloadAbi, isLoading } = useAutoloadAbi({
     address: contract?.address,
     enabled: Boolean(!contract?.abi && contract?.address),
   })
@@ -66,18 +77,40 @@ export default function ContractDetails() {
     return [read as {} as AbiFunction[], write as {} as AbiFunction[]]
   }, [abiFunctions, hasStateMutability])
 
+  ////////////////////////////////////////////////////////////////////////
+
   return (
     <Container dismissable header="Contract Details">
       <Stack gap="20px">
-        <Box>
-          <LabelledContent label="Contract Address">
-            <Text size="12px">{contract?.address}</Text>
-          </LabelledContent>
-        </Box>
+        <LabelledContent
+          label="Label"
+          labelRight={
+            <FormPopover disabled={!formState.isValid} onSubmit={update}>
+              <Form.InputField
+                label="Label"
+                height="24px"
+                hideLabel
+                register={register('name', {
+                  required: true,
+                })}
+                style={{ width: '360px' }}
+              />
+            </FormPopover>
+          }
+        >
+          <Text size="12px">{contract?.name ?? 'Unnamed Contract'}</Text>
+        </LabelledContent>
+        <LabelledContent label="Contract Address">
+          <Text size="12px">{contract?.address}</Text>
+        </LabelledContent>
         {(isGuessedAbi || contract?.abi) && (
           <UploadAbi
-            onUpload={({ abi }) =>
-              updateContract({ abi, address: contract?.address! })
+            onUpload={({ abi, file }) =>
+              updateContract({
+                abi,
+                address: contract?.address!,
+                name: file.name.replace('.json', ''),
+              })
             }
           />
         )}
@@ -98,7 +131,7 @@ export default function ContractDetails() {
             Loading...
           </Text>
         )}
-        {isFetched && (
+        {abi && (
           <Tabs.Root asChild defaultValue="read">
             <Box display="flex" flexDirection="column" height="full">
               {hasStateMutability ? (
@@ -150,7 +183,9 @@ export default function ContractDetails() {
   )
 }
 
-function UploadAbi({ onUpload }: { onUpload: (abi: { abi: Abi }) => void }) {
+function UploadAbi({
+  onUpload,
+}: { onUpload: (abi: { abi: Abi; file: File }) => void }) {
   const { error, mutateAsync: uploadAbi } = useMutation({
     async mutationFn(files: FileList | null) {
       if (!files) return
@@ -166,7 +201,7 @@ function UploadAbi({ onUpload }: { onUpload: (abi: { abi: Abi }) => void }) {
       if (!isAbi)
         throw new Error('ABI is not valid. Please upload a valid ABI.')
 
-      onUpload({ abi })
+      onUpload({ abi, file })
     },
   })
 
diff --git a/src/screens/index.tsx b/src/screens/index.tsx
index 3992c1c..20c8118 100644
--- a/src/screens/index.tsx
+++ b/src/screens/index.tsx
@@ -833,7 +833,7 @@ function Contracts() {
           (_, index) =>
             ({
               index,
-              size: 32,
+              size: 40,
               type: 'item',
             }) as const,
         ),
@@ -908,19 +908,39 @@ function Contracts() {
                     backgroundColor={{ hover: 'surface/fill/quarternary' }}
                     paddingHorizontal="8px"
                     paddingVertical="8px"
-                    height="full"
+                    style={{ minHeight: '40px' }}
                   >
-                    <Columns alignHorizontal="justify" gap="4px" width="full">
+                    <Columns
+                      alignHorizontal="justify"
+                      gap="4px"
+                      alignVertical="center"
+                      width="full"
+                    >
                       <Column alignVertical="center">
-                        {contract.address !== '0x' ? (
-                          <Text size="11px" wrap={false}>
-                            {contract.address}
-                          </Text>
-                        ) : (
-                          <Text color="text/tertiary" size="11px" wrap={false}>
-                            Deploying...
-                          </Text>
-                        )}
+                        <Stack gap="8px">
+                          {contract.address !== '0x' ? (
+                            <>
+                              <Text size="11px" wrap={false}>
+                                {contract.name || 'Unnamed Contract'}
+                              </Text>
+                              <Text
+                                color="text/secondary"
+                                size="9px"
+                                wrap={false}
+                              >
+                                {contract.address}
+                              </Text>
+                            </>
+                          ) : (
+                            <Text
+                              color="text/tertiary"
+                              size="11px"
+                              wrap={false}
+                            >
+                              Deploying...
+                            </Text>
+                          )}
+                        </Stack>
                       </Column>
                       <Column alignVertical="center" width="content">
                         <Button.Symbol
diff --git a/src/screens/pending-request.tsx b/src/screens/pending-request.tsx
index ff756f6..c290ba9 100644
--- a/src/screens/pending-request.tsx
+++ b/src/screens/pending-request.tsx
@@ -1,6 +1,5 @@
-import * as Popover from '@radix-ui/react-popover'
 import * as Tabs from '@radix-ui/react-tabs'
-import { type ReactNode, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { omitBy } from 'remeda'
 import {
@@ -22,6 +21,7 @@ import {
 import {
   Container,
   DecodedCalldata,
+  FormPopover,
   LabelledContent,
   TabsContent,
   TabsList,
@@ -250,10 +250,7 @@ function SendTransactionRequest(args: {
             <LabelledContent
               label="From"
               labelRight={
-                <UpdateFieldPopover
-                  disabled={!formState.isValid}
-                  onSubmit={update}
-                >
+                <FormPopover disabled={!formState.isValid} onSubmit={update}>
                   <Form.InputField
                     defaultValue={from}
                     label="From"
@@ -265,7 +262,7 @@ function SendTransactionRequest(args: {
                     })}
                     style={{ width: '360px' }}
                   />
-                </UpdateFieldPopover>
+                </FormPopover>
               }
             >
               <Tooltip label={from}>
@@ -277,10 +274,7 @@ function SendTransactionRequest(args: {
             <LabelledContent
               label="To"
               labelRight={
-                <UpdateFieldPopover
-                  disabled={!formState.isValid}
-                  onSubmit={update}
-                >
+                <FormPopover disabled={!formState.isValid} onSubmit={update}>
                   <Form.InputField
                     defaultValue={to ?? ''}
                     label="To"
@@ -292,7 +286,7 @@ function SendTransactionRequest(args: {
                     })}
                     style={{ width: '360px' }}
                   />
-                </UpdateFieldPopover>
+                </FormPopover>
               }
             >
               <Tooltip label={to}>
@@ -304,10 +298,7 @@ function SendTransactionRequest(args: {
             <LabelledContent
               label="Value"
               labelRight={
-                <UpdateFieldPopover
-                  disabled={!formState.isValid}
-                  onSubmit={update}
-                >
+                <FormPopover disabled={!formState.isValid} onSubmit={update}>
                   <Form.InputField
                     defaultValue={
                       typeof value === 'bigint'
@@ -323,7 +314,7 @@ function SendTransactionRequest(args: {
                     })}
                     type="number"
                   />
-                </UpdateFieldPopover>
+                </FormPopover>
               }
             >
               <Text size="12px">
@@ -340,10 +331,7 @@ function SendTransactionRequest(args: {
             <LabelledContent
               label="Gas Limit"
               labelRight={
-                <UpdateFieldPopover
-                  disabled={!formState.isValid}
-                  onSubmit={update}
-                >
+                <FormPopover disabled={!formState.isValid} onSubmit={update}>
                   <Form.InputField
                     defaultValue={typeof gas === 'bigint' ? gas.toString() : ''}
                     label="Gas Limit"
@@ -355,7 +343,7 @@ function SendTransactionRequest(args: {
                     })}
                     type="number"
                   />
-                </UpdateFieldPopover>
+                </FormPopover>
               }
             >
               <Text size="12px">
@@ -367,10 +355,7 @@ function SendTransactionRequest(args: {
             <LabelledContent
               label="Tip Per Gas"
               labelRight={
-                <UpdateFieldPopover
-                  disabled={!formState.isValid}
-                  onSubmit={update}
-                >
+                <FormPopover disabled={!formState.isValid} onSubmit={update}>
                   <Form.InputField
                     defaultValue={
                       typeof maxPriorityFeePerGas === 'bigint'
@@ -387,7 +372,7 @@ function SendTransactionRequest(args: {
                       min: 0,
                     })}
                   />
-                </UpdateFieldPopover>
+                </FormPopover>
               }
             >
               <Text size="12px">
@@ -406,10 +391,7 @@ function SendTransactionRequest(args: {
             <LabelledContent
               label="Max Fee Per Gas"
               labelRight={
-                <UpdateFieldPopover
-                  disabled={!formState.isValid}
-                  onSubmit={update}
-                >
+                <FormPopover disabled={!formState.isValid} onSubmit={update}>
                   <Form.InputField
                     defaultValue={
                       typeof maxFeePerGas === 'bigint'
@@ -426,7 +408,7 @@ function SendTransactionRequest(args: {
                       min: 0,
                     })}
                   />
-                </UpdateFieldPopover>
+                </FormPopover>
               }
             >
               <Text size="12px">
@@ -447,10 +429,7 @@ function SendTransactionRequest(args: {
             <LabelledContent
               label="Nonce"
               labelRight={
-                <UpdateFieldPopover
-                  disabled={!formState.isValid}
-                  onSubmit={update}
-                >
+                <FormPopover disabled={!formState.isValid} onSubmit={update}>
                   <Form.InputField
                     defaultValue={nonce}
                     label="Nonce"
@@ -462,7 +441,7 @@ function SendTransactionRequest(args: {
                     })}
                     type="number"
                   />
-                </UpdateFieldPopover>
+                </FormPopover>
               }
             >
               <Text size="12px">{nonce}</Text>
@@ -487,7 +466,7 @@ function SendTransactionRequest(args: {
                     address={to}
                     data={data || '0x'}
                     labelRight={
-                      <UpdateFieldPopover
+                      <FormPopover
                         disabled={!formState.isValid}
                         onSubmit={update}
                       >
@@ -502,7 +481,7 @@ function SendTransactionRequest(args: {
                           })}
                           style={{ width: '360px' }}
                         />
-                      </UpdateFieldPopover>
+                      </FormPopover>
                     }
                   />
                 </Box>
@@ -518,69 +497,6 @@ function SendTransactionRequest(args: {
   )
 }
 
-function UpdateFieldPopover({
-  children,
-  disabled,
-  onSubmit,
-}: {
-  children: ReactNode
-  disabled: boolean
-  onSubmit: (e: React.FormEvent) => void
-}) {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <Popover.Root open={open}>
-      <Popover.Trigger asChild>
-        <Box position="absolute" style={{ top: -6 }}>
-          <Button.Symbol
-            label="Edit"
-            height="16px"
-            onClick={() => setOpen(true)}
-            symbol="square.and.pencil"
-            variant="ghost primary"
-          />
-        </Box>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content
-          onEscapeKeyDown={() => setOpen(false)}
-          onPointerDownOutside={() => setOpen(false)}
-          style={{ zIndex: 1 }}
-        >
-          <Box
-            backgroundColor="surface/secondary/elevated"
-            borderWidth="1px"
-            gap="4px"
-            padding="8px"
-            width="full"
-          >
-            <Form.Root
-              onSubmit={(e) => {
-                onSubmit(e)
-                setOpen(false)
-              }}
-            >
-              <Stack gap="8px">
-                {children}
-                <Button
-                  disabled={disabled}
-                  height="20px"
-                  type="submit"
-                  variant="stroked fill"
-                  width="fit"
-                >
-                  Update
-                </Button>
-              </Stack>
-            </Form.Root>
-          </Box>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  )
-}
-
 ////////////////////////////////////////////////////////////////////////
 // Request Accounts View
 
diff --git a/src/zustand/contracts.ts b/src/zustand/contracts.ts
index 77324e2..d5ca6af 100644
--- a/src/zustand/contracts.ts
+++ b/src/zustand/contracts.ts
@@ -1,3 +1,4 @@
+import { selectorsFromBytecode } from '@shazow/whatsabi'
 import type { Abi, Address } from 'abitype'
 import type { Hex, TransactionReceipt } from 'viem'
 import { useStore } from 'zustand'
@@ -9,6 +10,7 @@ type Contract = {
   abi?: Abi
   address: Address
   bytecode?: Hex | null
+  name?: string
   key: string
   receipt?: TransactionReceipt
   state: 'loaded' | 'loading'
@@ -72,7 +74,14 @@ export const contractsStore = createStore<ContractsStore>(
       set((state) => {
         const contracts = { ...state.contracts }
 
+        const { abi, name } = getContractAbi({
+          contracts,
+          contract,
+        })
+
         const contract_ = {
+          abi,
+          name,
           key: `${contract.address}-${contract.bytecode}`,
           state: 'loaded',
           visible: true,
@@ -162,9 +171,15 @@ export const contractsStore = createStore<ContractsStore>(
           const exists = (contracts[serializedKey] || []).some(
             (x) => x.address === contract.address,
           )
-          if (!exists)
+          if (!exists) {
+            const { abi, name } = getContractAbi({
+              contracts,
+              contract,
+            })
             contracts[serializedKey] = [
               {
+                abi,
+                name,
                 ...contract,
                 key: contract.address,
                 state: 'loaded',
@@ -172,6 +187,7 @@ export const contractsStore = createStore<ContractsStore>(
               },
               ...(contracts[serializedKey] || []),
             ]
+          }
         }
 
         contracts[serializedKey] = contracts[serializedKey]?.filter(
@@ -194,3 +210,27 @@ export const contractsStore = createStore<ContractsStore>(
 )
 
 export const useContractsStore = () => useStore(contractsStore)
+
+///////////////////////////////////////////////////////////////
+
+function getContractAbi({
+  contracts,
+  contract,
+}: { contract: Partial<Contract>; contracts: ContractsState['contracts'] }) {
+  if (contract.abi) return contract
+
+  const allContracts = Object.values(contracts).flat()
+  const contracts_ = allContracts.filter(
+    (c) =>
+      c?.abi &&
+      c.bytecode &&
+      contract.bytecode &&
+      selectorsFromBytecode(c.bytecode).join() ===
+        selectorsFromBytecode(contract.bytecode).join(),
+  )
+  const contract_ = contracts_?.[0]
+  return {
+    abi: contract_?.abi,
+    name: contract_?.name,
+  }
+}