diff --git a/.changelog/361.feature.md b/.changelog/361.feature.md
new file mode 100644
index 00000000..1175b273
--- /dev/null
+++ b/.changelog/361.feature.md
@@ -0,0 +1 @@
+Add initial ERC-8004 support
diff --git a/src/backend/api.ts b/src/backend/api.ts
index 31a281af..8ee3d754 100644
--- a/src/backend/api.ts
+++ b/src/backend/api.ts
@@ -20,6 +20,7 @@ import { toast } from 'sonner'
 import { isMachineRemoved } from '../components/MachineStatusIcon/isMachineRemoved.ts'
 import { trackEvent } from 'fathom-client'
 import { getOasisAddressBytesFromEvm } from '../utils/helpers.ts'
+import { addRofl8004ServiceToCompose, hasRofl8004ServiceSecrets } from '../utils/rofl-8004.ts'
 
 const BACKEND_URL = import.meta.env.VITE_ROFL_APP_BACKEND
 
@@ -432,7 +433,12 @@ export function useCreateAndDeployApp() {
       const manifest = yaml.stringify(
         fillTemplate(roflTemplateYaml, appData.metadata!, build, network, appId, address),
       )
-      const compose = template.yaml.compose
+
+      let compose = template.yaml.compose
+      if (hasRofl8004ServiceSecrets(appData)) {
+        compose = addRofl8004ServiceToCompose(template.yaml.compose, appData)
+      }
+
       console.log('Build?')
       setCurrentStep('building')
 
diff --git a/src/components/CodeDisplay/index.tsx b/src/components/CodeDisplay/index.tsx
index 28b4da37..73384f18 100644
--- a/src/components/CodeDisplay/index.tsx
+++ b/src/components/CodeDisplay/index.tsx
@@ -15,14 +15,26 @@ const MonacoEditor = lazy(async () => {
   try {
     const monaco = await import('monaco-editor')
     const monacoReact = await import('@monaco-editor/react')
+
     window.MonacoEnvironment = {
-      getWorker() {
+      getWorker(_, label) {
+        // JSON worker
+        if (label === 'json') {
+          return new Worker(
+            new URL(
+              '../../../node_modules/monaco-editor/esm/vs/language/json/json.worker.js',
+              import.meta.url,
+            ),
+            { type: 'module' },
+          )
+        }
         return new Worker(
           new URL('../../../node_modules/monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url),
           { type: 'module' },
         )
       },
     }
+
     monacoReact.loader.config({ monaco })
 
     return monacoReact
@@ -43,6 +55,7 @@ type CodeDisplayProps = {
   onChange?: (value: string | undefined) => void
   // CSS white-space set in index.css for proper placeholder rendering
   placeholder?: string
+  language?: 'yaml' | 'json'
 }
 
 export const CodeDisplay: FC<CodeDisplayProps> = ({
@@ -51,6 +64,7 @@ export const CodeDisplay: FC<CodeDisplayProps> = ({
   readOnly = true,
   onChange,
   placeholder,
+  language = 'yaml',
 }) => {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
   const monacoInstanceRef = useRef<typeof monaco | null>(null)
@@ -130,6 +144,25 @@ export const CodeDisplay: FC<CodeDisplayProps> = ({
     monacoInstance.editor.setModelMarkers(model, 'highlightYamlErrors', markers)
   }
 
+  const highlightJsonErrors = (newData: string | undefined) => {
+    const monacoInstance = monacoInstanceRef.current
+    if (!monacoInstance || !editorRef.current || newData === undefined) {
+      return
+    }
+    const model = editorRef.current.getModel()
+    if (!model) return
+
+    const markers: monaco.editor.IMarkerData[] = []
+
+    try {
+      JSON.parse(newData)
+    } catch (e) {
+      console.warn(e)
+    }
+
+    monacoInstance.editor.setModelMarkers(model, 'highlightJsonErrors', markers)
+  }
+
   const handleEditorDidMount = (
     editor: monaco.editor.IStandaloneCodeEditor,
     monacoInstance: typeof monaco,
@@ -140,7 +173,13 @@ export const CodeDisplay: FC<CodeDisplayProps> = ({
   }
 
   const handleEditorChange = (newData: string | undefined) => {
-    if (!readOnly) highlightYamlErrors(newData)
+    if (!readOnly) {
+      if (language === 'yaml') {
+        highlightYamlErrors(newData)
+      } else if (language === 'json') {
+        highlightJsonErrors(newData)
+      }
+    }
 
     highlightErrorLogs(newData)
 
@@ -152,7 +191,7 @@ export const CodeDisplay: FC<CodeDisplayProps> = ({
       <Suspense fallback={<TextAreaFallback value={data} />}>
         <MonacoEditor
           loading={<TextAreaFallback value={data} />}
-          language="yaml"
+          language={language}
           value={data}
           theme="customTheme"
           beforeMount={handleEditorWillMount}
diff --git a/src/components/InputFormField/index.tsx b/src/components/InputFormField/index.tsx
index a0485534..2d2a8071 100644
--- a/src/components/InputFormField/index.tsx
+++ b/src/components/InputFormField/index.tsx
@@ -4,7 +4,13 @@ import { Input } from '@oasisprotocol/ui-library/src/components/ui/input'
 import { Textarea } from '@oasisprotocol/ui-library/src/components/ui/textarea'
 import { Label } from '@oasisprotocol/ui-library/src/components/ui/label'
 import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
-import { Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff, Info } from 'lucide-react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from '@oasisprotocol/ui-library/src/components/ui/tooltip'
 
 type InputFormFieldProps<T extends FieldValues> = {
   control: Control<T>
@@ -14,6 +20,7 @@ type InputFormFieldProps<T extends FieldValues> = {
   type?: 'input' | 'password' | 'number' | 'textarea'
   disabled?: boolean
   min?: number
+  info?: string
 }
 
 export const InputFormField = <T extends FieldValues>({
@@ -24,6 +31,7 @@ export const InputFormField = <T extends FieldValues>({
   type = 'input',
   disabled = false,
   min,
+  info,
 }: InputFormFieldProps<T>): ReactNode => {
   const [showPassword, setShowPassword] = useState(false)
 
@@ -40,7 +48,21 @@ export const InputFormField = <T extends FieldValues>({
 
   return (
     <div className="grid gap-2">
-      {label && <Label htmlFor={name}>{label}</Label>}
+      {label && (
+        <div className="flex items-center gap-1.5">
+          <Label htmlFor={name}>{label}</Label>
+          {info && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="h-4 w-4 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent>{info}</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+        </div>
+      )}
       <Controller
         control={control}
         name={name}
@@ -78,7 +100,13 @@ export const InputFormField = <T extends FieldValues>({
                 )}
               </div>
             ) : (
-              <Textarea id={name} placeholder={placeholder} {...field} aria-invalid={!!fieldState.error} />
+              <Textarea
+                id={name}
+                placeholder={placeholder}
+                {...field}
+                aria-invalid={!!fieldState.error}
+                disabled={disabled}
+              />
             )}
             {fieldState.error && <div className="text-destructive text-sm">{fieldState.error.message}</div>}
           </>
diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
new file mode 100644
index 00000000..a60af171
--- /dev/null
+++ b/src/constants/rofl-8004.ts
@@ -0,0 +1,22 @@
+import { sepolia } from 'viem/chains'
+
+export const ROFL_8004_DOCKER_IMAGE =
+  'ghcr.io/oasisprotocol/rofl-8004:latest@sha256:671633f634402e147f90115d1c139ba4d955842276eadf95e29a9034d14a7d49'
+export const ROFL_8004_SERVICE_NAME = 'rofl-8004'
+export const ROFL_8004_VOLUME_NAME = 'rofl-8004-volume'
+export const ROFL_8004_SERVICE_ENV_PREFIX = 'ERC8004'
+
+export const ROFL_8004_METADATA_KEY = 'net.oasis.app.erc8004_agent_id' // "{chainId}:{agentId}"
+
+export const ROFL_8004_SUPPORTED_CHAINS = {
+  [sepolia.id.toString()]: {
+    chain: sepolia,
+    identityContract: '0x8004a6090cd10a7288092483047b097295fb8847',
+    rpcUrl: ['https://ethereum-sepolia-rpc.publicnode.com'],
+    validatorAddress: '0x7cd2eccd146b6626c8a500ab5644b1a506115e6f',
+  },
+}
+
+export const ERC_8004_ETHEREUM_EIP_URL = 'https://eips.ethereum.org/EIPS/eip-8004'
+export const get8004ScanUrl = (chainName: string, agentId: string) =>
+  `https://www.8004scan.io/agents/${chainName}/${agentId}`
diff --git a/src/contracts/ERC-8004_ABI.json b/src/contracts/ERC-8004_ABI.json
new file mode 100644
index 00000000..f84ef535
--- /dev/null
+++ b/src/contracts/ERC-8004_ABI.json
@@ -0,0 +1,19 @@
+[
+  {
+    "inputs": [
+      { "name": "agentId", "type": "uint256" },
+      { "name": "key", "type": "string" }
+    ],
+    "name": "getMetadata",
+    "outputs": [{ "name": "", "type": "bytes" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "name": "tokenId", "type": "uint256" }],
+    "name": "tokenURI",
+    "outputs": [{ "name": "", "type": "string" }],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]
diff --git a/src/contracts/erc-8004.ts b/src/contracts/erc-8004.ts
new file mode 100644
index 00000000..79b9b90a
--- /dev/null
+++ b/src/contracts/erc-8004.ts
@@ -0,0 +1,45 @@
+import ERC_8004_ABI from './ERC-8004_ABI.json'
+import { ROFL_8004_SUPPORTED_CHAINS } from '../constants/rofl-8004.ts'
+import { createPublicClient, http } from 'viem'
+
+export const getMetadata = async (
+  chainId: number | string,
+  agentId: bigint,
+  key?: string,
+): Promise<`0x${string}`> => {
+  const supportedNetwork = ROFL_8004_SUPPORTED_CHAINS[chainId.toString()]
+
+  try {
+    return (await createPublicClient({
+      chain: supportedNetwork.chain,
+      transport: http(supportedNetwork.rpcUrl[0]),
+    }).readContract({
+      address: supportedNetwork.identityContract as `0x${string}`,
+      abi: ERC_8004_ABI,
+      functionName: 'getMetadata',
+      args: [agentId, key],
+    })) as `0x${string}`
+  } catch (error) {
+    console.error(`Error fetching metadata for agent ${agentId}`, error)
+    throw error
+  }
+}
+
+export const getTokenURI = async (chainId: number | string, agentId: bigint): Promise<string> => {
+  const supportedNetwork = ROFL_8004_SUPPORTED_CHAINS[chainId.toString()]
+
+  try {
+    return (await createPublicClient({
+      chain: supportedNetwork.chain,
+      transport: http(supportedNetwork.rpcUrl[0]),
+    }).readContract({
+      address: supportedNetwork.identityContract as `0x${string}`,
+      abi: ERC_8004_ABI,
+      functionName: 'tokenURI',
+      args: [agentId],
+    })) as string
+  } catch (error) {
+    console.error(`Error fetching tokenURI for agent ${agentId}:`, error)
+    throw error
+  }
+}
diff --git a/src/hooks/useERC8004TokenURI.ts b/src/hooks/useERC8004TokenURI.ts
new file mode 100644
index 00000000..867361dd
--- /dev/null
+++ b/src/hooks/useERC8004TokenURI.ts
@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react'
+import { getTokenURI } from '../contracts/erc-8004.ts'
+
+interface UseERC8004TokenURIReturnType {
+  data: string | null
+  isLoading: boolean
+  error: Error | null
+  refetch: () => void
+}
+
+export function useERC8004TokenURI(
+  chainId: number | string,
+  agentId: bigint | undefined,
+  enabled = true,
+): UseERC8004TokenURIReturnType {
+  const [data, setData] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  const fetchTokenURI = async () => {
+    if (!agentId) return
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const result = await getTokenURI(chainId, agentId)
+
+      setData(result)
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch token URI'))
+      console.error('Error fetching ERC-8004 token URI:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (enabled && chainId && agentId) {
+      fetchTokenURI()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agentId, chainId && enabled])
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchTokenURI,
+  }
+}
diff --git a/src/pages/CreateApp/BuildStep.tsx b/src/pages/CreateApp/BuildStep.tsx
index 07fe1544..133fa225 100644
--- a/src/pages/CreateApp/BuildStep.tsx
+++ b/src/pages/CreateApp/BuildStep.tsx
@@ -38,7 +38,7 @@ export const BuildStep: FC<BuildStepProps> = ({
 
   return (
     <CreateLayout
-      currentStep={3}
+      currentStep={4}
       selectedTemplateName={selectedTemplateName}
       selectedTemplateId={selectedTemplateId}
       customStepTitle={customStepTitle}
diff --git a/src/pages/CreateApp/CreateLayout.tsx b/src/pages/CreateApp/CreateLayout.tsx
index a9faf6ff..e1af1ee6 100644
--- a/src/pages/CreateApp/CreateLayout.tsx
+++ b/src/pages/CreateApp/CreateLayout.tsx
@@ -40,8 +40,12 @@ export const CreateLayout: FC<CreateLayoutProps> = ({
   const sidebarItems = [
     { label: 'Input Metadata', active: currentStep === 1 },
     { label: customStepTitle, active: currentStep === 2 },
-    { label: 'Configure Machine', active: currentStep === 3 },
-    { label: 'Payment', active: currentStep === 4 },
+    { label: 'Setup ERC-8004', active: currentStep === 3 },
+    { label: 'Configure Machine', active: currentStep === 4 },
+    {
+      label: 'Payment',
+      active: currentStep === 5,
+    },
   ]
 
   return (
diff --git a/src/pages/CreateApp/CustomBuildSetupForm.tsx b/src/pages/CreateApp/CustomBuildSetupForm.tsx
index 78d29a4d..bcccdb3f 100644
--- a/src/pages/CreateApp/CustomBuildSetupForm.tsx
+++ b/src/pages/CreateApp/CustomBuildSetupForm.tsx
@@ -2,7 +2,7 @@ import { type FC, useState } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { CreateFormNavigation } from './CreateFormNavigation'
-import { customBuildFormSchema, type CustomBuildFormData } from './types'
+import { customBuildFormSchema, type CustomBuildFormData, ERC8004FormData } from './types'
 import { SecretsTable } from '../../components/SecretsTable'
 import { CodeDisplay } from '../../components/CodeDisplay'
 import { type RoflAppSecrets } from '../../nexus/api'
@@ -10,12 +10,13 @@ import { AddSecretFormContent } from '../../components/SecretsTable/AddSecretFor
 import { useComposeValidation } from './useComposeValidation'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 import { composePlaceholder } from './composePlaceholder'
+import { ROFL_8004_SERVICE_ENV_PREFIX } from '../../constants/rofl-8004.ts'
 
 type CustomBuildSetupFormProps = {
   handleNext: () => void
   handleBack: () => void
-  inputs?: CustomBuildFormData
-  setAppDataForm: (data: { inputs: CustomBuildFormData }) => void
+  inputs?: CustomBuildFormData & ERC8004FormData
+  setAppDataForm: (data: { inputs: CustomBuildFormData & ERC8004FormData }) => void
 }
 
 export const CustomBuildSetupForm: FC<CustomBuildSetupFormProps> = ({
@@ -59,13 +60,13 @@ export const CustomBuildSetupForm: FC<CustomBuildSetupFormProps> = ({
     const isValid = await validateCompose(compose)
 
     if (isValid) {
-      setAppDataForm({ inputs: { compose, secrets } as CustomBuildFormData })
+      setAppDataForm({ inputs: { compose, secrets } as CustomBuildFormData & ERC8004FormData })
       handleNext()
     }
   }
 
   const navigateBack = () => {
-    setAppDataForm({ inputs: { compose, secrets } as CustomBuildFormData })
+    setAppDataForm({ inputs: { compose, secrets } as CustomBuildFormData & ERC8004FormData })
     handleBack()
   }
 
@@ -91,6 +92,14 @@ export const CustomBuildSetupForm: FC<CustomBuildSetupFormProps> = ({
       hasError = true
     }
 
+    if (name && name.startsWith(ROFL_8004_SERVICE_ENV_PREFIX)) {
+      form.setError('name', {
+        type: 'manual',
+        message: `Secret names starting with "${ROFL_8004_SERVICE_ENV_PREFIX}" are reserved and cannot be used.`,
+      })
+      hasError = true
+    }
+
     if (!value || value.trim() === '') {
       form.setError('value', { type: 'manual', message: 'Secret is required.' })
       hasError = true
diff --git a/src/pages/CreateApp/CustomInputsStep.tsx b/src/pages/CreateApp/CustomInputsStep.tsx
index d08b1bfc..c5716c70 100644
--- a/src/pages/CreateApp/CustomInputsStep.tsx
+++ b/src/pages/CreateApp/CustomInputsStep.tsx
@@ -9,16 +9,16 @@ import {
   type XAgentFormData,
   type HlCopyTraderFormData,
   type CustomBuildFormData,
+  type AppDataInputs,
+  ERC8004FormData,
 } from './types'
 import { CustomBuildSetupForm } from './CustomBuildSetupForm'
 
 type CustomInputsStepProps = {
   handleNext: () => void
   handleBack: () => void
-  inputs?: AgentFormData | XAgentFormData | HlCopyTraderFormData | CustomBuildFormData
-  setAppDataForm: (data: {
-    inputs: AgentFormData | XAgentFormData | HlCopyTraderFormData | CustomBuildFormData
-  }) => void
+  inputs?: AppDataInputs
+  setAppDataForm: (data: { inputs: AppDataInputs }) => void
   selectedTemplateName?: string
   selectedTemplateId?: string
   customStepTitle: string
@@ -33,6 +33,20 @@ export const CustomInputsStep: FC<CustomInputsStepProps> = ({
   selectedTemplateId,
   customStepTitle,
 }) => {
+  const setAppDataInputs = (appDataInputs: { inputs: AppDataInputs }) => {
+    // Merge secrets, so the ERC-8004 configuration is not overridden
+    setAppDataForm({
+      inputs: {
+        ...(inputs ?? {}),
+        ...appDataInputs.inputs,
+        secrets: {
+          ...(inputs?.secrets ?? {}),
+          ...appDataInputs.inputs.secrets,
+        },
+      } as AppDataInputs,
+    })
+  }
+
   return (
     <CreateLayout
       currentStep={2}
@@ -46,8 +60,8 @@ export const CustomInputsStep: FC<CustomInputsStepProps> = ({
         <CustomBuildSetupForm
           handleNext={handleNext}
           handleBack={handleBack}
-          inputs={inputs as CustomBuildFormData}
-          setAppDataForm={setAppDataForm}
+          inputs={inputs as CustomBuildFormData & ERC8004FormData}
+          setAppDataForm={setAppDataInputs}
         />
       )}
 
@@ -55,24 +69,24 @@ export const CustomInputsStep: FC<CustomInputsStepProps> = ({
         <TgbotAgentForm
           handleNext={handleNext}
           handleBack={handleBack}
-          inputs={inputs as AgentFormData}
-          setAppDataForm={setAppDataForm}
+          inputs={inputs as AgentFormData & ERC8004FormData}
+          setAppDataForm={setAppDataInputs}
         />
       )}
       {selectedTemplateId === 'x-agent' && (
         <XAgentForm
           handleNext={handleNext}
           handleBack={handleBack}
-          inputs={inputs as XAgentFormData}
-          setAppDataForm={setAppDataForm}
+          inputs={inputs as XAgentFormData & ERC8004FormData}
+          setAppDataForm={setAppDataInputs}
         />
       )}
       {selectedTemplateId === 'hl-copy-trader' && (
         <HlCopyTraderForm
           handleNext={handleNext}
           handleBack={handleBack}
-          inputs={inputs as HlCopyTraderFormData}
-          setAppDataForm={setAppDataForm}
+          inputs={inputs as HlCopyTraderFormData & ERC8004FormData}
+          setAppDataForm={setAppDataInputs}
         />
       )}
     </CreateLayout>
diff --git a/src/pages/CreateApp/ERC8004Form.tsx b/src/pages/CreateApp/ERC8004Form.tsx
new file mode 100644
index 00000000..c2ed204f
--- /dev/null
+++ b/src/pages/CreateApp/ERC8004Form.tsx
@@ -0,0 +1,228 @@
+import { type FC, useState } from 'react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { CreateFormNavigation } from './CreateFormNavigation'
+import { erc8004Schema, type ERC8004FormData, type AppDataInputs, type MetadataFormData } from './types'
+import { InputFormField } from '../../components/InputFormField'
+import { Label } from '@oasisprotocol/ui-library/src/components/ui/label'
+import { Checkbox } from '@oasisprotocol/ui-library/src/components/ui/checkbox'
+import { ROFL_8004_SUPPORTED_CHAINS } from '../../constants/rofl-8004.ts'
+import { SelectFormField } from '../../components/SelectFormField'
+
+type Props = {
+  handleNext: () => void
+  handleBack: () => void
+  metadata?: MetadataFormData
+  inputs?: AppDataInputs
+  setAppDataForm: (data: { inputs: AppDataInputs }) => void
+}
+
+export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadata, setAppDataForm }) => {
+  const [enableERC8004, setEnableERC8004] = useState(false)
+
+  const form = useForm<ERC8004FormData>({
+    resolver: enableERC8004 ? zodResolver(erc8004Schema) : undefined,
+    defaultValues: {
+      secrets: {
+        ERC8004_CHAIN_SELECTION: '11155111',
+        ERC8004_RPC_URL: inputs?.secrets?.ERC8004_RPC_URL ?? '',
+        ERC8004_PINATA_JWT: '',
+        ERC8004_SIGNING_KEY: '',
+        ERC8004_AGENT_NAME: metadata?.name ?? '',
+        ERC8004_AGENT_DESCRIPTION: metadata?.description ?? '',
+        ERC8004_AGENT_VERSION: metadata?.version ?? '',
+        ERC8004_AGENT_CATEGORY: '',
+        ERC8004_AGENT_IMAGE: '',
+        ERC8004_AGENT_MCP: '',
+        ERC8004_AGENT_A2A: '',
+        ERC8004_AGENT_ENS: '',
+        ...inputs?.secrets,
+      },
+    },
+  })
+
+  const chainSelection = form.watch('secrets.ERC8004_CHAIN_SELECTION')
+  const isCustomChain = chainSelection === 'custom'
+
+  const chainOptions = [
+    ...Object.entries(ROFL_8004_SUPPORTED_CHAINS).map(([key, config]) => ({
+      value: key,
+      label: config.chain.name,
+    })),
+    { value: 'custom', label: 'Custom RPC URL' },
+  ]
+
+  function onSubmit(values: ERC8004FormData) {
+    if (!enableERC8004) {
+      setAppDataForm({
+        inputs: {
+          secrets: {},
+        } as AppDataInputs,
+      })
+    } else {
+      const nonEmptySecrets = Object.fromEntries(
+        Object.entries({
+          ...values.secrets,
+          ERC8004_RPC_URL:
+            values.secrets.ERC8004_CHAIN_SELECTION !== 'custom'
+              ? ROFL_8004_SUPPORTED_CHAINS[
+                  values.secrets.ERC8004_CHAIN_SELECTION as keyof typeof ROFL_8004_SUPPORTED_CHAINS
+                ]?.rpcUrl
+              : values.secrets.ERC8004_RPC_URL,
+          ERC8004_VALIDATOR_ADDRESS:
+            values.secrets.ERC8004_CHAIN_SELECTION !== 'custom'
+              ? ROFL_8004_SUPPORTED_CHAINS[
+                  values.secrets.ERC8004_CHAIN_SELECTION as keyof typeof ROFL_8004_SUPPORTED_CHAINS
+                ]?.validatorAddress
+              : values.secrets.ERC8004_VALIDATOR_ADDRESS,
+        }).filter(
+          ([key, value]) =>
+            !['ERC8004_CHAIN_SELECTION'].includes(key) &&
+            value !== '' &&
+            value !== null &&
+            value !== undefined,
+        ),
+      ) as ERC8004FormData['secrets']
+
+      setAppDataForm({
+        inputs: {
+          ...values,
+          secrets: nonEmptySecrets,
+        } as AppDataInputs,
+      })
+    }
+    handleNext()
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 mb-6 w-full">
+      <div className="flex items-center gap-2 mb-4">
+        <Checkbox
+          id="enable-erc-8004"
+          checked={enableERC8004}
+          onCheckedChange={checked => setEnableERC8004(checked === true)}
+        />
+        <Label htmlFor="enable-erc-8004">Enable ERC-8004 Identity Registration</Label>
+      </div>
+
+      {enableERC8004 && (
+        <>
+          <hr />
+
+          <SelectFormField
+            control={form.control}
+            name="secrets.ERC8004_CHAIN_SELECTION"
+            label="Chain for trustless agent registration"
+            placeholder="Select chain"
+            options={chainOptions}
+          />
+
+          {isCustomChain && (
+            <>
+              <InputFormField
+                control={form.control}
+                type="input"
+                name="secrets.ERC8004_RPC_URL"
+                label="Custom RPC URL"
+                placeholder="https://your-rpc-url.com"
+                info="Enter the full RPC URL for trustless agent registration"
+              />
+
+              <InputFormField
+                control={form.control}
+                type="input"
+                name="secrets.ERC8004_VALIDATOR_ADDRESS"
+                label="Validator address (Optional)"
+                placeholder="0x1234567890abcde1234567890abcde1234567890"
+              />
+            </>
+          )}
+
+          <InputFormField
+            control={form.control}
+            type="textarea"
+            name="secrets.ERC8004_PINATA_JWT"
+            label="Pinata JWT Token"
+            placeholder="1234567890abcde..."
+            info="Your Pinata JWT token is used to pin agent metadata to IPFS. Get it from pinata.cloud"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_NAME"
+            label="Agent Name (Optional)"
+            placeholder="rofl-agent"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="textarea"
+            name="secrets.ERC8004_AGENT_DESCRIPTION"
+            label="Agent Description (Optional)"
+            placeholder="Oasis ROFL-powered trustless agent"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_IMAGE"
+            label="Agent Image URL (Optional)"
+            placeholder="https://example.com/logo.png"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_VERSION"
+            label="Agent Version (Optional)"
+            placeholder="0.1.0"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_CATEGORY"
+            label="Agent Category (Optional)"
+            placeholder="rofl"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_MCP"
+            label="Agent MCP (Optonal)"
+            placeholder="https://mcp.agent.com"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_A2A"
+            label="Agent A2A (Optonal)"
+            placeholder="https://agent.example/.well-known/agent-card.json"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_ENS"
+            label="Agent ENS (Optonal)"
+            placeholder="agent.eth"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="password"
+            name="secrets.ERC8004_SIGNING_KEY"
+            label="Private key for trustless agent registration (Optional)"
+            placeholder="1234567890abcde1234567890abcde1234567890abcde1234567890abcde123"
+            info="Optional private key used to sign and submit your agent to the ERC-8004 registry. If not provided, a fresh keypair will be generated inside ROFL and its address reported in the erc8004_signing_key replica metadata field."
+          />
+        </>
+      )}
+
+      <CreateFormNavigation handleBack={handleBack} disabled={form.formState.isSubmitting} />
+    </form>
+  )
+}
diff --git a/src/pages/CreateApp/ERC8004Step.tsx b/src/pages/CreateApp/ERC8004Step.tsx
new file mode 100644
index 00000000..d9c29445
--- /dev/null
+++ b/src/pages/CreateApp/ERC8004Step.tsx
@@ -0,0 +1,72 @@
+import { type FC } from 'react'
+import { CreateLayout } from './CreateLayout'
+import { CreateFormHeader } from './CreateFormHeader'
+import { AppDataInputs, type MetadataFormData } from './types'
+import { ERC8004Form } from './ERC8004Form.tsx'
+import { ERC_8004_ETHEREUM_EIP_URL } from '../../constants/rofl-8004.ts'
+
+type CustomInputsStepProps = {
+  handleNext: () => void
+  handleBack: () => void
+  metadata?: MetadataFormData
+  inputs?: AppDataInputs
+  setAppDataForm: (data: { inputs: AppDataInputs }) => void
+  selectedTemplateName?: string
+  selectedTemplateId?: string
+  customStepTitle: string
+}
+
+export const ERC8004Step: FC<CustomInputsStepProps> = ({
+  handleNext,
+  handleBack,
+  metadata,
+  inputs,
+  setAppDataForm,
+  selectedTemplateName,
+  selectedTemplateId,
+  customStepTitle,
+}) => (
+  <CreateLayout
+    currentStep={3}
+    selectedTemplateName={selectedTemplateName}
+    selectedTemplateId={selectedTemplateId}
+    customStepTitle={customStepTitle}
+  >
+    <CreateFormHeader
+      title="Trustless agents registration"
+      description={
+        <>
+          <a
+            href={ERC_8004_ETHEREUM_EIP_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary"
+          >
+            ERC-8004
+          </a>
+          &nbsp; introduces a blockchain-based framework for discovering and trusting agents across
+          organizations without prior relationships. It defines identity, reputation, and validation
+          registries to enable secure, transparent agent economies where trust is established through
+          feedback, cryptographic proofs, or validator checks.
+        </>
+      }
+    />
+    <ERC8004Form
+      handleNext={handleNext}
+      handleBack={handleBack}
+      metadata={metadata}
+      inputs={inputs}
+      setAppDataForm={erc8004Inputs => {
+        setAppDataForm({
+          inputs: {
+            ...inputs,
+            secrets: {
+              ...inputs!.secrets,
+              ...erc8004Inputs.inputs.secrets,
+            },
+          } as AppDataInputs,
+        })
+      }}
+    />
+  </CreateLayout>
+)
diff --git a/src/pages/CreateApp/HlCopyTraderForm.tsx b/src/pages/CreateApp/HlCopyTraderForm.tsx
index bd9919cc..0404477f 100644
--- a/src/pages/CreateApp/HlCopyTraderForm.tsx
+++ b/src/pages/CreateApp/HlCopyTraderForm.tsx
@@ -2,14 +2,14 @@ import { type FC } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { CreateFormNavigation } from './CreateFormNavigation'
-import { hlCopyTraderFormSchema, type HlCopyTraderFormData } from './types'
+import { hlCopyTraderFormSchema, type HlCopyTraderFormData, type ERC8004FormData } from './types'
 import { InputFormField } from '../../components/InputFormField'
 
 type HlCopyTraderFormProps = {
   handleNext: () => void
   handleBack: () => void
-  inputs?: HlCopyTraderFormData
-  setAppDataForm: (data: { inputs: HlCopyTraderFormData }) => void
+  inputs?: HlCopyTraderFormData & ERC8004FormData
+  setAppDataForm: (data: { inputs: HlCopyTraderFormData & ERC8004FormData }) => void
 }
 
 export const HlCopyTraderForm: FC<HlCopyTraderFormProps> = ({
@@ -31,7 +31,7 @@ export const HlCopyTraderForm: FC<HlCopyTraderFormProps> = ({
   })
 
   function onSubmit(values: HlCopyTraderFormData) {
-    setAppDataForm({ inputs: values })
+    setAppDataForm({ inputs: values as HlCopyTraderFormData & ERC8004FormData })
     handleNext()
   }
 
diff --git a/src/pages/CreateApp/PaymentStep.tsx b/src/pages/CreateApp/PaymentStep.tsx
index 1c58d454..57056b9b 100644
--- a/src/pages/CreateApp/PaymentStep.tsx
+++ b/src/pages/CreateApp/PaymentStep.tsx
@@ -78,7 +78,7 @@ export const PaymentStep: FC<PaymentStepProps> = ({
 
   return (
     <CreateLayout
-      currentStep={4}
+      currentStep={5}
       selectedTemplateName={selectedTemplateName}
       selectedTemplateId={selectedTemplateId}
       customStepTitle={customStepTitle}
diff --git a/src/pages/CreateApp/TgbotAgentForm.tsx b/src/pages/CreateApp/TgbotAgentForm.tsx
index 9e9dc5ed..fcc66845 100644
--- a/src/pages/CreateApp/TgbotAgentForm.tsx
+++ b/src/pages/CreateApp/TgbotAgentForm.tsx
@@ -3,14 +3,14 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { SelectFormField } from '../../components/SelectFormField'
 import { CreateFormNavigation } from './CreateFormNavigation'
-import { tgbotFormSchema, type AgentFormData } from './types'
+import { tgbotFormSchema, type AgentFormData, type ERC8004FormData } from './types'
 import { InputFormField } from '../../components/InputFormField'
 
 type TgbotAgentFormProps = {
   handleNext: () => void
   handleBack: () => void
-  inputs?: AgentFormData
-  setAppDataForm: (data: { inputs: AgentFormData }) => void
+  inputs?: AgentFormData & ERC8004FormData
+  setAppDataForm: (data: { inputs: AgentFormData & ERC8004FormData }) => void
 }
 
 export const TgbotAgentForm: FC<TgbotAgentFormProps> = ({
@@ -32,7 +32,7 @@ export const TgbotAgentForm: FC<TgbotAgentFormProps> = ({
   })
 
   function onSubmit(values: AgentFormData) {
-    setAppDataForm({ inputs: values })
+    setAppDataForm({ inputs: values as AgentFormData & ERC8004FormData })
     handleNext()
   }
 
diff --git a/src/pages/CreateApp/XAgentForm.tsx b/src/pages/CreateApp/XAgentForm.tsx
index c70e5434..232624b0 100644
--- a/src/pages/CreateApp/XAgentForm.tsx
+++ b/src/pages/CreateApp/XAgentForm.tsx
@@ -3,14 +3,14 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { SelectFormField } from '../../components/SelectFormField'
 import { CreateFormNavigation } from './CreateFormNavigation'
-import { xAgentFormSchema, type XAgentFormData } from './types'
+import { xAgentFormSchema, type XAgentFormData, type ERC8004FormData } from './types'
 import { InputFormField } from '../../components/InputFormField'
 
 type XAgentFormProps = {
   handleNext: () => void
   handleBack: () => void
-  inputs?: XAgentFormData
-  setAppDataForm: (data: { inputs: XAgentFormData }) => void
+  inputs?: XAgentFormData & ERC8004FormData
+  setAppDataForm: (data: { inputs: XAgentFormData & ERC8004FormData }) => void
 }
 
 export const XAgentForm: FC<XAgentFormProps> = ({ handleNext, handleBack, inputs, setAppDataForm }) => {
@@ -32,7 +32,7 @@ export const XAgentForm: FC<XAgentFormProps> = ({ handleNext, handleBack, inputs
   })
 
   function onSubmit(values: XAgentFormData) {
-    setAppDataForm({ inputs: values })
+    setAppDataForm({ inputs: values as XAgentFormData & ERC8004FormData })
     handleNext()
   }
 
diff --git a/src/pages/CreateApp/index.tsx b/src/pages/CreateApp/index.tsx
index d0a74d97..e122b2a8 100644
--- a/src/pages/CreateApp/index.tsx
+++ b/src/pages/CreateApp/index.tsx
@@ -9,6 +9,7 @@ import { BootstrapStep } from './BootstrapStep'
 import { getCustomTemplate, getTemplateById } from './templates'
 import { trackEvent } from 'fathom-client'
 import type { CustomBuildFormData } from './types'
+import { ERC8004Step } from './ERC8004Step.tsx'
 
 export const Create: FC = () => {
   const { currentStep, setCurrentStep, appData, setAppDataForm } = useCreate()
@@ -16,6 +17,7 @@ export const Create: FC = () => {
     { component: TemplateStep },
     { component: MetadataStep },
     { component: CustomInputsStep },
+    { component: ERC8004Step },
     { component: BuildStep },
     { component: PaymentStep },
     { component: BootstrapStep },
@@ -38,8 +40,11 @@ export const Create: FC = () => {
       trackEvent(`Create app flow/3/agent/${appData?.templateId}`)
       trackedEvents.current.add(3)
     } else if (currentStep === 4 && !trackedEvents.current.has(4)) {
-      trackEvent(`Create app flow/4/payment/${appData?.templateId}`)
+      trackEvent(`Create app flow/4/erc-8004/${appData?.templateId}`)
       trackedEvents.current.add(4)
+    } else if (currentStep === 5 && !trackedEvents.current.has(5)) {
+      trackEvent(`Create app flow/5/payment/${appData?.templateId}`)
+      trackedEvents.current.add(5)
     }
   }, [currentStep, appData?.templateId])
 
@@ -80,6 +85,18 @@ export const Create: FC = () => {
         />
       )}
       {currentStep === 3 && selectedTemplate && (
+        <ERC8004Step
+          handleNext={handleNext}
+          handleBack={handleBack}
+          inputs={appData?.inputs}
+          metadata={appData?.metadata}
+          setAppDataForm={setAppDataForm}
+          selectedTemplateName={selectedTemplate.name}
+          selectedTemplateId={selectedTemplate.id}
+          customStepTitle={selectedTemplate.customStepTitle}
+        />
+      )}
+      {currentStep === 4 && selectedTemplate && (
         <BuildStep
           handleNext={handleNext}
           handleBack={handleBack}
@@ -96,7 +113,7 @@ export const Create: FC = () => {
           customStepTitle={selectedTemplate.customStepTitle}
         />
       )}
-      {currentStep === 4 && selectedTemplate && (
+      {currentStep === 5 && selectedTemplate && (
         <PaymentStep
           handleNext={handleNext}
           handleBack={handleBack}
@@ -106,7 +123,7 @@ export const Create: FC = () => {
           customStepTitle={selectedTemplate.customStepTitle}
         />
       )}
-      {currentStep === 5 && <BootstrapStep appData={appData} template={selectedTemplate} />}
+      {currentStep === 6 && <BootstrapStep appData={appData} template={selectedTemplate} />}
     </div>
   )
 }
diff --git a/src/pages/CreateApp/types.ts b/src/pages/CreateApp/types.ts
index 27621e76..b6e68846 100644
--- a/src/pages/CreateApp/types.ts
+++ b/src/pages/CreateApp/types.ts
@@ -1,6 +1,7 @@
 import { z, RefinementCtx } from 'zod'
 import { BuildFormData } from '../../types/build-form.ts'
 import * as yaml from 'yaml'
+import { sepolia } from 'viem/chains'
 
 /**
  * This is like z.string().url(), but also accepts domain names without the protocol prefix,
@@ -133,6 +134,78 @@ export const customBuildFormSchema = z.object({
   value: z.string().default(''),
 })
 
+// Make sure that the secrets object contains variables prefixed with (const ROFL_8004_SERVICE_ENV_PREFIX)
+export const erc8004Schema = z
+  .object({
+    secrets: z.object({
+      ERC8004_CHAIN_SELECTION: z.enum([sepolia.id.toString(), 'custom']).optional(),
+      ERC8004_RPC_URL: z
+        .string()
+        .url({ message: 'Please enter a valid URL.' })
+        .max(200, {
+          message: 'RPC URL must be less than 200 characters.',
+        })
+        .optional()
+        .or(z.literal('')),
+      ERC8004_VALIDATOR_ADDRESS: z
+        .string()
+        .optional()
+        .or(z.literal(''))
+        .refine(
+          value => {
+            if (!value || value === '') return true
+            return /^0x[a-fA-F0-9]{40}$/.test(value)
+          },
+          {
+            message: 'Please enter a valid address.',
+          },
+        ),
+      ERC8004_PINATA_JWT: z
+        .string()
+        .min(1, {
+          message: 'Pinata JWT is required.',
+        })
+        .max(1000, {
+          message: 'Pinata JWT must be less than 1000 characters.',
+        }),
+      ERC8004_SIGNING_KEY: z
+        .string()
+        .optional()
+        .or(z.literal(''))
+        .refine(
+          value => {
+            if (!value || value === '') return true
+            return /^[a-fA-F0-9]{64}$/.test(value)
+          },
+          {
+            message: 'Please enter a valid private key (64 hexadecimal characters).',
+          },
+        ),
+      ERC8004_AGENT_NAME: z.string().optional(),
+      ERC8004_AGENT_DESCRIPTION: z.string().optional(),
+      ERC8004_AGENT_IMAGE: z
+        .string()
+        .url({ message: 'Please enter a valid URL.' })
+        .optional()
+        .or(z.literal('')),
+      ERC8004_AGENT_VERSION: z.string().optional(),
+      ERC8004_AGENT_CATEGORY: z.string().optional(),
+      ERC8004_AGENT_MCP: z.string().optional(),
+      ERC8004_AGENT_A2A: z.string().optional(),
+      ERC8004_AGENT_ENS: z.string().optional(),
+    }),
+  })
+  .superRefine((data, ctx) => {
+    // Custom validation: if using custom chain, RPC URL is required
+    if (data.secrets.ERC8004_CHAIN_SELECTION === 'custom' && !data.secrets.ERC8004_RPC_URL) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'RPC URL is required when using a custom chain.',
+        path: ['secrets', 'ERC8004_RPC_URL'],
+      })
+    }
+  })
+
 export const tgbotFormSchema = z.object({
   secrets: z.object({
     OLLAMA_MODEL: z.string().min(1, {
@@ -203,17 +276,20 @@ export const hlCopyTraderFormSchema = z.object({
   }),
 })
 
-export type TemplateFormData = string
 export type MetadataFormData = z.infer<typeof metadataFormSchema>
 export type CustomBuildFormData = z.infer<typeof customBuildFormSchema>
+export type ERC8004FormData = z.infer<typeof erc8004Schema>
 export type AgentFormData = z.infer<typeof tgbotFormSchema>
 export type XAgentFormData = z.infer<typeof xAgentFormSchema>
 export type HlCopyTraderFormData = z.infer<typeof hlCopyTraderFormSchema>
 
+export type AppDataInputs = (CustomBuildFormData | AgentFormData | XAgentFormData | HlCopyTraderFormData) &
+  ERC8004FormData
+
 export type AppData = {
   templateId?: string
   metadata?: MetadataFormData
-  inputs?: CustomBuildFormData | AgentFormData | XAgentFormData | HlCopyTraderFormData
+  inputs?: AppDataInputs
   network: 'mainnet' | 'testnet'
   build?: BuildFormData
 }
diff --git a/src/pages/CreateApp/useComposeValidation.ts b/src/pages/CreateApp/useComposeValidation.ts
index 6978ec8e..31a3e5db 100644
--- a/src/pages/CreateApp/useComposeValidation.ts
+++ b/src/pages/CreateApp/useComposeValidation.ts
@@ -1,6 +1,8 @@
+import * as yaml from 'yaml'
 import { useState } from 'react'
 import { useValidateRofl } from '../../backend/api'
 import { useRoflAppBackendAuthContext } from '../../contexts/RoflAppBackendAuth/hooks'
+import { ROFL_8004_SERVICE_NAME, ROFL_8004_VOLUME_NAME } from '../../constants/rofl-8004.ts'
 
 type ValidationState = {
   isValidating: boolean
@@ -34,6 +36,28 @@ export function useComposeValidation() {
       validationError: null,
     })
 
+    try {
+      const parsed = yaml.parse(compose)
+      if (parsed?.services?.[ROFL_8004_SERVICE_NAME]) {
+        setValidationState({
+          isValidating: false,
+          validationError: `Service name "${ROFL_8004_SERVICE_NAME}" is reserved and cannot be used.`,
+        })
+        return false
+      }
+
+      if (parsed?.volumes?.[ROFL_8004_VOLUME_NAME]) {
+        setValidationState({
+          isValidating: false,
+          validationError: `Volume name "${ROFL_8004_VOLUME_NAME}" is reserved and cannot be used.`,
+        })
+        return false
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- ignore YAML parsing error
+    } catch (_err) {
+      // Let backend validation handle the error
+    }
+
     try {
       const response = (await validateRofl({ compose })) as RoflValidateApiResponse
 
diff --git a/src/pages/CreateApp/useCreate.ts b/src/pages/CreateApp/useCreate.ts
index 69ad2a71..e9555c6d 100644
--- a/src/pages/CreateApp/useCreate.ts
+++ b/src/pages/CreateApp/useCreate.ts
@@ -36,7 +36,7 @@ export const useCreate = () => {
   }
 
   if (appData.network !== network) {
-    setCurrentStep(step => (step > 3 ? 3 : step))
+    setCurrentStep(step => (step > 4 ? 4 : step))
     // If user switches chain then reset provider + offer id
     const initData = initAppDataState(network)
     setAppData(prevData => ({
diff --git a/src/pages/Dashboard/AppDetails/AppERC8004.tsx b/src/pages/Dashboard/AppDetails/AppERC8004.tsx
new file mode 100644
index 00000000..70be3aa6
--- /dev/null
+++ b/src/pages/Dashboard/AppDetails/AppERC8004.tsx
@@ -0,0 +1,60 @@
+import { type FC } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import axios from 'axios'
+import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
+import { RoflInstance } from '../../../nexus/generated/api.ts'
+import { useERC8004TokenURI } from '../../../hooks/useERC8004TokenURI.ts'
+import { fromMetadataToAgentMetadata, tokenURIToLink } from '../../../utils/rofl-8004.ts'
+import { CodeDisplay } from '../../../components/CodeDisplay'
+
+type Props = {
+  instancesWithERC8004Token: RoflInstance[]
+}
+
+export const AppERC8004: FC<Props> = ({ instancesWithERC8004Token }) => {
+  const [instance] = instancesWithERC8004Token
+  const agentMetadata = fromMetadataToAgentMetadata(instance.metadata)
+  const agentChainId = agentMetadata?.chainId
+  const agentTokenId = agentMetadata?.agentId
+
+  const {
+    isLoading: isLoadingTokenURI,
+    data: tokenURI,
+    error: tokenURIError,
+  } = useERC8004TokenURI(agentChainId!, agentTokenId!, !!agentChainId && !!agentTokenId)
+
+  const {
+    data: metadata,
+    isLoading: isLoadingMetadata,
+    error: metadataError,
+  } = useQuery({
+    queryKey: ['erc8004-metadata', tokenURI],
+    queryFn: async () => {
+      if (!tokenURI) throw new Error('No tokenURI available')
+      const httpLink = tokenURIToLink(tokenURI)
+      const response = await axios.get(httpLink)
+      return response.data
+    },
+    enabled: !!tokenURI,
+  })
+
+  const isLoading = isLoadingTokenURI || isLoadingMetadata
+  const error = tokenURIError || metadataError
+
+  return (
+    <div className="space-y-6">
+      {isLoading && <Skeleton className="w-full h-[400px]" />}
+      {!isLoading && (
+        <>
+          {metadata && (
+            <div>
+              <h3 className="text-lg font-semibold mb-2">ERC-8004 Metadata</h3>
+              <CodeDisplay data={JSON.stringify(metadata, null, '\t')} language="json" />
+            </div>
+          )}
+          {error && <div className="text-red-500">Error loading metadata: {error.message}</div>}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/src/pages/Dashboard/AppDetails/AppMetadata.tsx b/src/pages/Dashboard/AppDetails/AppMetadata.tsx
index 7f115f16..13c54966 100644
--- a/src/pages/Dashboard/AppDetails/AppMetadata.tsx
+++ b/src/pages/Dashboard/AppDetails/AppMetadata.tsx
@@ -5,6 +5,7 @@ import {
   useGetRuntimeRoflAppsIdTransactions,
   useGetRuntimeRoflmarketInstances,
   type RoflAppPolicy,
+  RoflInstance,
 } from '../../../nexus/api'
 import { useNetwork } from '../../../hooks/useNetwork'
 import { isUrlSafe } from '../../../utils/url'
@@ -25,6 +26,8 @@ import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 import { useAccount } from 'wagmi'
 import { getEvmBech32Address } from '../../../utils/helpers'
 import { useRoflAppDomains } from '../../../backend/useRoflAppDomains'
+import { fromMetadataToAgentMetadata } from '../../../utils/rofl-8004.ts'
+import { get8004ScanUrl } from '../../../constants/rofl-8004.ts'
 
 type AppMetadataProps = {
   id: string
@@ -33,6 +36,7 @@ type AppMetadataProps = {
   policy: RoflAppPolicy
   setViewMetadataState: (state: ViewMetadataState) => void
   editEnabled?: boolean
+  instancesWithERC8004Token: RoflInstance[]
 }
 
 export const AppMetadata: FC<AppMetadataProps> = ({
@@ -42,6 +46,7 @@ export const AppMetadata: FC<AppMetadataProps> = ({
   policy,
   setViewMetadataState,
   editEnabled,
+  instancesWithERC8004Token,
 }) => {
   const network = useNetwork()
   const { data } = useGetRuntimeRoflAppsIdTransactions(network, 'sapphire', id, {
@@ -64,6 +69,11 @@ export const AppMetadata: FC<AppMetadataProps> = ({
 
   const appDomains = useRoflAppDomains(network, id)
 
+  const [instance] = instancesWithERC8004Token
+  const agentMetadata = instance ? fromMetadataToAgentMetadata(instance.metadata) : undefined
+  const agentChainName = agentMetadata?.chainName
+  const agentTokenId = agentMetadata?.agentId
+
   return (
     <div className="space-y-4">
       {isMachineLoading && <Skeleton className="w-full h-60px]" />}
@@ -188,6 +198,18 @@ export const AppMetadata: FC<AppMetadataProps> = ({
           ))}
         </div>
       </DetailsSectionRow>
+      {agentChainName && agentTokenId && (
+        <DetailsSectionRow label="ERC-8004 agent registration">
+          <a
+            href={get8004ScanUrl(agentChainName, agentTokenId.toString())}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary"
+          >
+            {get8004ScanUrl(agentChainName, agentTokenId.toString())}
+          </a>
+        </DetailsSectionRow>
+      )}
       <div className="text-xl font-bold">Policy</div>
       <DetailsSectionRow label="Who can run this app">
         <Endorsements endorsements={policy.endorsements} />
diff --git a/src/pages/Dashboard/AppDetails/index.tsx b/src/pages/Dashboard/AppDetails/index.tsx
index 735c4509..333d40c7 100644
--- a/src/pages/Dashboard/AppDetails/index.tsx
+++ b/src/pages/Dashboard/AppDetails/index.tsx
@@ -20,6 +20,8 @@ import { Dialog, DialogContent } from '@oasisprotocol/ui-library/src/components/
 import { HelpWidget } from '../../CreateApp/HelpWidget'
 import { AddSecret } from '../../../components/SecretsTable/AddSecret'
 import { useAccount } from 'wagmi'
+import { ROFL_8004_METADATA_KEY } from '../../../constants/rofl-8004.ts'
+import { AppERC8004 } from './AppERC8004.tsx'
 
 function setDefaultMetadataViewState(metadata: RoflAppMetadata | undefined = {}): ViewMetadataState {
   return {
@@ -65,6 +67,10 @@ export const AppDetails: FC = () => {
   )
   const { data: readme } = useDownloadArtifact(`${id}-readme-md`, token)
 
+  const instancesWithERC8004Token =
+    roflApp?.active_instances.filter(({ metadata }) => metadata?.[ROFL_8004_METADATA_KEY]) ?? []
+  const hasInstancesWithERC8004Token = instancesWithERC8004Token.length > 0
+
   const editEnabled = !!token && !roflApp?.removed && roflApp?.admin_eth === account.address
   const removeApp = useRemoveApp()
   const updateApp = useUpdateApp()
@@ -179,6 +185,7 @@ export const AppDetails: FC = () => {
                       <TabsTrigger value="details">Details</TabsTrigger>
                       <TabsTrigger value="secrets">Secrets</TabsTrigger>
                       <TabsTrigger value="compose">Manifest</TabsTrigger>
+                      {hasInstancesWithERC8004Token && <TabsTrigger value="erc-8004">ERC-8004</TabsTrigger>}
                     </TabsList>
                   </div>
                 </div>
@@ -191,6 +198,7 @@ export const AppDetails: FC = () => {
                   policy={roflApp.policy}
                   setViewMetadataState={setViewMetadataState}
                   editEnabled={editEnabled}
+                  instancesWithERC8004Token={instancesWithERC8004Token}
                 />
               </TabsContent>
               <TabsContent value="secrets" className="relative pt-10">
@@ -214,6 +222,11 @@ export const AppDetails: FC = () => {
                   composeYaml={composeYaml}
                 />
               </TabsContent>
+              {hasInstancesWithERC8004Token && (
+                <TabsContent value="erc-8004">
+                  <AppERC8004 instancesWithERC8004Token={instancesWithERC8004Token} />
+                </TabsContent>
+              )}
             </Tabs>
           </div>
         </>
diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
new file mode 100644
index 00000000..3c52848b
--- /dev/null
+++ b/src/utils/rofl-8004.ts
@@ -0,0 +1,90 @@
+import {
+  ROFL_8004_DOCKER_IMAGE,
+  ROFL_8004_METADATA_KEY,
+  ROFL_8004_SERVICE_ENV_PREFIX,
+  ROFL_8004_SERVICE_NAME,
+  ROFL_8004_SUPPORTED_CHAINS,
+  ROFL_8004_VOLUME_NAME,
+} from '../constants/rofl-8004.ts'
+import { RoflInstance } from '../nexus/generated/api.ts'
+import { AppData, ERC8004FormData } from '../pages/CreateApp/types.ts'
+import * as yaml from 'yaml'
+import { parse } from 'yaml'
+
+interface ComposeFile {
+  services: Record<string, unknown>
+  volumes?: Record<string, unknown | null>
+  [key: string]: unknown
+}
+
+export const fromMetadataToAgentMetadata = (
+  metadata: RoflInstance['metadata'],
+): { chainId: number | null; agentId: bigint | null; chainName: string | null } | null => {
+  const agentId = metadata?.[ROFL_8004_METADATA_KEY] as string
+  const splitAgentId = agentId?.split(':')
+  const chainId = Number(splitAgentId[0])
+
+  if (!Object.keys(ROFL_8004_SUPPORTED_CHAINS).includes(chainId.toString())) {
+    console.warn(
+      `Invalid chainId: ${chainId}. Expected: ${Object.keys(ROFL_8004_SUPPORTED_CHAINS).join(',')}`,
+    )
+    // Silently fail
+    return null
+  }
+
+  return {
+    chainId,
+    chainName: ROFL_8004_SUPPORTED_CHAINS[chainId.toString()].chain.name.toLowerCase(),
+    agentId: BigInt(splitAgentId[1]),
+  }
+}
+
+export const tokenURIToLink = (tokenURI: string) => tokenURI.replace('ipfs://', 'https://ipfs.io/ipfs/')
+
+export const hasRofl8004ServiceSecrets = (appData: AppData) => {
+  return Object.keys(appData.inputs?.secrets ?? {}).some(key =>
+    key.toUpperCase().startsWith(ROFL_8004_SERVICE_ENV_PREFIX),
+  )
+}
+
+export const addRofl8004ServiceToCompose = (composeYaml: string, appData: AppData): string => {
+  const compose = parse(composeYaml) as ComposeFile
+
+  const environment = Object.keys(appData.inputs?.secrets ?? {})
+    .filter(key => key.toUpperCase().startsWith(ROFL_8004_SERVICE_ENV_PREFIX))
+    .reduce(
+      (acc, key) => {
+        const erc8004Key = key as keyof ERC8004FormData['secrets']
+
+        if (appData.inputs?.secrets?.[erc8004Key]) {
+          // Exception: ERC8004_SIGNING_KEY does not need to strip the prefix
+          const envKey = ['ERC8004_SIGNING_KEY'].includes(key)
+            ? key
+            : key.replace(`${ROFL_8004_SERVICE_ENV_PREFIX}_`, '')
+          acc[envKey] = `\${${key}}`
+        }
+
+        return acc
+      },
+      {
+        // Pre-existing agent ID, if it is already registered.
+        AGENT_ID: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_AGENT_ID-}`,
+        // Additional TEE-derived public keys to be stored inside ROFL Metadata
+        PUBLIC_KEY_IDS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PUBLIC_KEY_IDS-}`,
+      } as Record<string, string>,
+    )
+
+  compose.services[ROFL_8004_SERVICE_NAME] = {
+    image: ROFL_8004_DOCKER_IMAGE,
+    platform: 'linux/amd64',
+    environment,
+    volumes: ['/run/rofl-appd.sock:/run/rofl-appd.sock', `${ROFL_8004_VOLUME_NAME}:/root/.rofl-8004`],
+  }
+
+  if (!compose.volumes) {
+    compose.volumes = {}
+  }
+  compose.volumes[ROFL_8004_VOLUME_NAME] = null
+
+  return yaml.stringify(compose)
+}