diff --git a/package.json b/package.json
index 73ee06a..fc51894 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-turbo-eth",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Create web3 apps in turbo mode.",
   "author": "Vitor @marthendalnunes",
   "license": "MIT",
diff --git a/template/base/components/ui/form.tsx b/template/base/components/ui/form.tsx
new file mode 100644
index 0000000..1d3b8bc
--- /dev/null
+++ b/template/base/components/ui/form.tsx
@@ -0,0 +1,115 @@
+import * as React from 'react'
+
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form'
+
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
+
+const Form = FormProvider
+
+type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
+
+const FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>>(
+  ({ className, ...props }, ref) => {
+    const { error, formItemId } = useFormField()
+
+    return <Label ref={ref} className={cn(error && 'text-destructive', className)} htmlFor={formItemId} {...props} />
+  }
+)
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      id={formItemId}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return <p ref={ref} className={cn('text-sm text-muted-foreground', className)} id={formDescriptionId} {...props} />
+})
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p ref={ref} className={cn('text-sm font-medium text-destructive text-red-500', className)} id={formMessageId} {...props}>
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = 'FormMessage'
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }
diff --git a/template/base/package.json b/template/base/package.json
index 28eb52b..32e0100 100644
--- a/template/base/package.json
+++ b/template/base/package.json
@@ -37,6 +37,7 @@
   },
   "packageManager": "pnpm@7.1.8",
   "dependencies": {
+    "@hookform/resolvers": "^3.1.1",
     "@connext/nxtp-utils": "^2.0.3",
     "@connext/sdk": "2.0.4-alpha.2",
     "@lit-protocol/lit-node-client": "2.1.161",
@@ -63,6 +64,7 @@
     "@radix-ui/react-select": "^1.2.0",
     "@radix-ui/react-separator": "^1.0.1",
     "@radix-ui/react-slider": "^1.1.0",
+    "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.3",
diff --git a/template/base/pnpm-lock.yaml b/template/base/pnpm-lock.yaml
index 052b58a..30a22be 100644
--- a/template/base/pnpm-lock.yaml
+++ b/template/base/pnpm-lock.yaml
@@ -3,10 +3,13 @@ lockfileVersion: '6.0'
 dependencies:
   '@connext/nxtp-utils':
     specifier: ^2.0.3
-    version: 2.0.4(sinon@15.2.0)
+    version: 2.0.3(sinon@15.2.0)
   '@connext/sdk':
     specifier: 2.0.4-alpha.2
     version: 2.0.4-alpha.2(sinon@15.2.0)(ts-node@10.9.1)(typescript@4.9.4)
+  '@hookform/resolvers':
+    specifier: ^3.1.1
+    version: 3.1.1(react-hook-form@7.43.9)
   '@lit-protocol/lit-node-client':
     specifier: 2.1.161
     version: 2.1.161(@ethersproject/contracts@5.7.0)(@ethersproject/hash@5.7.0)(@ethersproject/providers@5.7.2)(@ethersproject/wallet@5.7.0)(react@18.2.0)
@@ -79,6 +82,9 @@ dependencies:
   '@radix-ui/react-slider':
     specifier: ^1.1.0
     version: 1.1.1(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-slot':
+    specifier: ^1.0.2
+    version: 1.0.2(@types/react@18.0.26)(react@18.2.0)
   '@radix-ui/react-switch':
     specifier: ^1.0.1
     version: 1.0.2(react-dom@18.2.0)(react@18.2.0)
@@ -263,7 +269,7 @@ devDependencies:
     version: 8.7.0(eslint@8.30.0)
   eslint-plugin-import:
     specifier: ^2.26.0
-    version: 2.27.5(@typescript-eslint/parser@5.59.11)(eslint@8.30.0)
+    version: 2.27.5(@typescript-eslint/parser@5.59.11)(eslint-import-resolver-typescript@3.5.5)(eslint@8.30.0)
   eslint-plugin-jest:
     specifier: ^26.4.6
     version: 26.9.0(@typescript-eslint/eslint-plugin@5.59.11)(eslint@8.30.0)(typescript@4.9.4)
@@ -367,7 +373,7 @@ packages:
       '@babel/traverse': 7.21.2
       '@babel/types': 7.21.2
       convert-source-map: 1.9.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.0
@@ -389,7 +395,7 @@ packages:
       '@babel/traverse': 7.21.2
       '@babel/types': 7.21.2
       convert-source-map: 1.9.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.0
@@ -496,7 +502,7 @@ packages:
       '@babel/core': 7.21.0
       '@babel/helper-compilation-targets': 7.20.7(@babel/core@7.21.0)
       '@babel/helper-plugin-utils': 7.20.2
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       lodash.debounce: 4.0.8
       resolve: 1.22.2
       semver: 6.3.0
@@ -1642,7 +1648,7 @@ packages:
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/parser': 7.21.2
       '@babel/types': 7.21.2
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -1659,7 +1665,7 @@ packages:
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/parser': 7.21.8
       '@babel/types': 7.21.5
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -1992,34 +1998,6 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@connext/nxtp-utils@2.0.4(sinon@15.2.0):
-    resolution: {integrity: sha512-aZmpxRBMhRr06TiKwJAZgnpsKZJDF3Tyx/8R9z+yMqlhkVW5Q1VGHPqSkPXz2/w3XCmeu5p08Vignd+FKiLr+A==}
-    dependencies:
-      '@maticnetwork/maticjs': 3.6.0-beta.11
-      '@maticnetwork/maticjs-web3': 1.0.4(@maticnetwork/maticjs@3.6.0-beta.11)
-      '@sinclair/typebox': 0.25.21
-      ajv: 8.12.0
-      ajv-formats: 2.1.1(ajv@8.12.0)
-      axios: 1.3.3
-      chai: 4.3.7
-      chai-as-promised: 7.1.1(chai@4.3.7)
-      chai-subset: 1.6.0
-      ethers: 5.7.2
-      hyperid: 3.1.1
-      interval-promise: 1.4.0
-      merkletreejs: 0.3.9
-      pino: 8.10.0
-      secp256k1: 4.0.3
-      sinon-chai: 3.7.0(chai@4.3.7)(sinon@15.2.0)
-    transitivePeerDependencies:
-      - bufferutil
-      - debug
-      - encoding
-      - sinon
-      - supports-color
-      - utf-8-validate
-    dev: false
-
   /@connext/sdk@2.0.4-alpha.2(sinon@15.2.0)(ts-node@10.9.1)(typescript@4.9.4):
     resolution: {integrity: sha512-FP8IBRVIAnhRouY+O+inTcIhsk18rWAexW2eLMMztgO3iJ7c7Oi7Nng+Nfbp+l8ls9+3tyX2DrEw2LHKGIE3jQ==}
     dependencies:
@@ -2231,7 +2209,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       espree: 9.5.0
       globals: 13.20.0
       ignore: 5.2.4
@@ -2250,7 +2228,7 @@ packages:
       '@openzeppelin/contracts': 4.7.3
       '@openzeppelin/contracts-upgradeable': 4.7.3
       ethers: 5.7.2
-      hardhat: 2.17.0(ts-node@10.9.1)(typescript@4.9.4)
+      hardhat: 2.16.1(ts-node@10.9.1)(typescript@4.9.4)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -2343,7 +2321,7 @@ packages:
   /@ethereumjs/tx@3.3.2:
     resolution: {integrity: sha512-6AaJhwg4ucmwTvw/1qLaZUX5miWrwZ4nLOUsKyb/HtzS3BMw/CasKhdi1ims9mBKeK9sOJCH4qGKOBGyJCeeog==}
     dependencies:
-      '@ethereumjs/common': 2.5.0
+      '@ethereumjs/common': 2.6.5
       ethereumjs-util: 7.1.5
     dev: false
 
@@ -2653,8 +2631,8 @@ packages:
       '@floating-ui/core': 0.7.3
     dev: false
 
-  /@floating-ui/dom@1.4.4:
-    resolution: {integrity: sha512-21hhDEPOiWkGp0Ys4Wi6Neriah7HweToKra626CIK712B5m9qkdz54OP9gVldUg+URnBTpv/j/bi/skmGdstXQ==}
+  /@floating-ui/dom@1.4.5:
+    resolution: {integrity: sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==}
     dependencies:
       '@floating-ui/core': 1.3.1
     dev: false
@@ -2679,17 +2657,25 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@floating-ui/dom': 1.4.4
+      '@floating-ui/dom': 1.4.5
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@hookform/resolvers@3.1.1(react-hook-form@7.43.9):
+    resolution: {integrity: sha512-tS16bAUkqjITNSvbJuO1x7MXbn7Oe8ZziDTJdA9mMvsoYthnOOiznOTGBYwbdlYBgU+tgpI/BtTU3paRbCuSlg==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+    dependencies:
+      react-hook-form: 7.43.9(react@18.2.0)
+    dev: false
+
   /@humanwhocodes/config-array@0.11.8:
     resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
     engines: {node: '>=10.10.0'}
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -3056,19 +3042,19 @@ packages:
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.1.1
 
-  /@livepeer/core-react@1.6.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-6lsrWJ/iJSF9bL3y8O+gkvRJ17tT6g9z3l1/E7pf30tIlELjwFb4KklK/k3SFtuYYskkx8v5DvU2LaOd2yhQYA==}
+  /@livepeer/core-react@1.8.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-DRciHEJgpALO2a9gHAy75g9VpaU6yszALP/gatO3W/+x9/o6MSR5PRhFg5eMDJA8o1ua39ZlaDu0/irLHIeE8g==}
     peerDependencies:
       react: '>=17.0.0'
     dependencies:
-      '@livepeer/core': 1.6.0(react@18.2.0)
-      '@tanstack/query-async-storage-persister': 4.22.4(@tanstack/query-core@4.22.4)
-      '@tanstack/query-core': 4.22.4
-      '@tanstack/react-query': 4.22.4(react-dom@18.2.0)(react@18.2.0)
-      '@tanstack/react-query-persist-client': 4.22.4(@tanstack/query-core@4.22.4)(@tanstack/react-query@4.22.4)
+      '@livepeer/core': 1.8.0(react@18.2.0)
+      '@tanstack/query-async-storage-persister': 4.29.23
+      '@tanstack/query-core': 4.29.23
+      '@tanstack/react-query': 4.29.23(react-dom@18.2.0)(react@18.2.0)
+      '@tanstack/react-query-persist-client': 4.29.23(@tanstack/react-query@4.29.23)
       react: 18.2.0
       use-sync-external-store: 1.2.0(react@18.2.0)
-      zustand: 4.3.8(react@18.2.0)
+      zustand: 4.3.9(react@18.2.0)
     transitivePeerDependencies:
       - encoding
       - immer
@@ -3076,20 +3062,20 @@ packages:
       - react-native
     dev: false
 
-  /@livepeer/core@1.6.0(react@18.2.0):
-    resolution: {integrity: sha512-MhyrtsXFrndnWn16GViavVG9UNjGroavw1FttgfstQ1IPWxrP2HEEvX52zATXF0JX/xfH5MCsfLNcVC9MF399g==}
+  /@livepeer/core@1.8.0(react@18.2.0):
+    resolution: {integrity: sha512-Sr+DplfGfhpv2Arh53tTTL9DyPEzlVAzy+eXd8+PMIlXLVOHTgGfDgpfpaeSCB8v8WlJtrgX50vFdSWyUyxi3g==}
     peerDependencies:
       react: '>=17.0.0'
     peerDependenciesMeta:
       react:
         optional: true
     dependencies:
-      cross-fetch: 3.1.5
+      cross-fetch: 4.0.0
       ms: 3.0.0-canary.1
       multiformats: 9.9.0
       react: 18.2.0
       tus-js-client: 3.1.0
-      zustand: 4.3.8(react@18.2.0)
+      zustand: 4.3.9(react@18.2.0)
     transitivePeerDependencies:
       - encoding
       - immer
@@ -3104,12 +3090,12 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@livepeer/core-react': 1.6.0(react-dom@18.2.0)(react@18.2.0)
+      '@livepeer/core-react': 1.8.0(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-popover': 1.0.6(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-select': 1.2.2(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0)(react@18.2.0)
       '@stitches/react': 1.2.8(react@18.2.0)
-      core-js: 3.31.0
+      core-js: 3.31.1
       livepeer: 2.6.0(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -3193,7 +3179,7 @@ packages:
     engines: {node: '>=14.0.0'}
     dependencies:
       '@types/debug': 4.1.7
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       semver: 7.5.0
       superstruct: 1.0.3
     transitivePeerDependencies:
@@ -3440,7 +3426,7 @@ packages:
       '@nomicfoundation/ethereumjs-tx': 5.0.1
       '@nomicfoundation/ethereumjs-util': 9.0.1
       abstract-level: 1.0.3
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       ethereum-cryptography: 0.1.3
       level: 8.0.0
       lru-cache: 5.1.1
@@ -3481,7 +3467,7 @@ packages:
       '@nomicfoundation/ethereumjs-common': 4.0.1
       '@nomicfoundation/ethereumjs-tx': 5.0.1
       '@nomicfoundation/ethereumjs-util': 9.0.1
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       ethereum-cryptography: 0.1.3
       mcl-wasm: 0.7.9
       rustbn.js: 0.2.0
@@ -3502,7 +3488,7 @@ packages:
     dependencies:
       '@nomicfoundation/ethereumjs-common': 4.0.1
       '@nomicfoundation/ethereumjs-rlp': 5.0.1
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       ethereum-cryptography: 0.1.3
       ethers: 5.7.2
       js-sdsl: 4.3.0
@@ -3560,7 +3546,7 @@ packages:
       '@nomicfoundation/ethereumjs-trie': 6.0.1
       '@nomicfoundation/ethereumjs-tx': 5.0.1
       '@nomicfoundation/ethereumjs-util': 9.0.1
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       ethereum-cryptography: 0.1.3
       mcl-wasm: 0.7.9
       rustbn.js: 0.2.0
@@ -5713,31 +5699,27 @@ packages:
       tailwindcss: 3.2.7(postcss@8.4.21)(ts-node@10.9.1)
     dev: false
 
-  /@tanstack/query-async-storage-persister@4.22.4(@tanstack/query-core@4.22.4):
-    resolution: {integrity: sha512-8DWEt+bmxyjp12aqGnYhpgroOZgvgzvs+mMqBIyZVET4eWQNKAuQSFXTlkztmq9/sxbvTnp+xu7KRZExyurZPA==}
+  /@tanstack/query-async-storage-persister@4.29.23:
+    resolution: {integrity: sha512-TlUCpJTwqzHyniiSCyyqe2Dw/oq5iKc7U5nQLLT3qFKUSFUa8Y7SzaNiCGm6WxOr0e3zlDze+Dh4uHx7s7CGTw==}
     dependencies:
-      '@tanstack/query-persist-client-core': 4.22.4(@tanstack/query-core@4.22.4)
-    transitivePeerDependencies:
-      - '@tanstack/query-core'
-    dev: false
-
-  /@tanstack/query-core@4.22.4:
-    resolution: {integrity: sha512-t79CMwlbBnj+yL82tEcmRN93bL4U3pae2ota4t5NN2z3cIeWw74pzdWrKRwOfTvLcd+b30tC+ciDlfYOKFPGUw==}
+      '@tanstack/query-persist-client-core': 4.29.23
     dev: false
 
   /@tanstack/query-core@4.26.1:
     resolution: {integrity: sha512-Zrx2pVQUP4ndnsu6+K/m8zerXSVY8QM+YSbxA1/jbBY21GeCd5oKfYl92oXPK0hPEUtoNuunIdiq0ZMqLos+Zg==}
     dev: false
 
+  /@tanstack/query-core@4.29.23:
+    resolution: {integrity: sha512-4BMHPrkfYmLP+NvqbbkV7Mk1nnphu+bNmxhhuB0+EMjKA7VfyFCfiyiTf55RRDgLaevyb9LrFK16lHW2owF52w==}
+    dev: false
+
   /@tanstack/query-core@4.29.5:
     resolution: {integrity: sha512-xXIiyQ/4r9KfaJ3k6kejqcaqFXXBTzN2aOJ5H1J6aTJE9hl/nbgAdfF6oiIu0CD5xowejJEJ6bBg8TO7BN4NuQ==}
 
-  /@tanstack/query-persist-client-core@4.22.4(@tanstack/query-core@4.22.4):
-    resolution: {integrity: sha512-F5rCLczSw8RjFlwWASD3oRR7D4oyG90QbBFaOqBCjGbvE3bcD+m/E4GGCp1qfACoLuH4KtxhdwdOFfE+e0TRZQ==}
-    peerDependencies:
-      '@tanstack/query-core': 4.22.4
+  /@tanstack/query-persist-client-core@4.29.23:
+    resolution: {integrity: sha512-u0P6y4DPeXeHEZnj0LEnhcgqX8x7iV7xbUDuoRPItUYsPn+anyLjXG3d3622+wLP3XKdevff0PhXkA7j9ZOWKg==}
     dependencies:
-      '@tanstack/query-core': 4.22.4
+      '@tanstack/query-core': 4.29.23
     dev: false
 
   /@tanstack/query-persist-client-core@4.29.5:
@@ -5750,15 +5732,13 @@ packages:
     dependencies:
       '@tanstack/query-persist-client-core': 4.29.5
 
-  /@tanstack/react-query-persist-client@4.22.4(@tanstack/query-core@4.22.4)(@tanstack/react-query@4.22.4):
-    resolution: {integrity: sha512-vnRD28T0BLsbDRlantC6W34eLCbjSoZEkYL4t2QYRyuEcmUya2Ddbn+DN+RfZHqxoMiSJNfMdmRXsMPpNHZ1QA==}
+  /@tanstack/react-query-persist-client@4.29.23(@tanstack/react-query@4.29.23):
+    resolution: {integrity: sha512-P23y5CMGfSM943pJoQjjOdQXSHH/ohjAl8vhQp+40M4Nz3lDq2d39flGRpajyh4dl4C5s0R8V6Iii7kkIQo8Jg==}
     peerDependencies:
-      '@tanstack/react-query': 4.22.4
+      '@tanstack/react-query': 4.29.23
     dependencies:
-      '@tanstack/query-persist-client-core': 4.22.4(@tanstack/query-core@4.22.4)
-      '@tanstack/react-query': 4.22.4(react-dom@18.2.0)(react@18.2.0)
-    transitivePeerDependencies:
-      - '@tanstack/query-core'
+      '@tanstack/query-persist-client-core': 4.29.23
+      '@tanstack/react-query': 4.29.23(react-dom@18.2.0)(react@18.2.0)
     dev: false
 
   /@tanstack/react-query-persist-client@4.29.5(@tanstack/react-query@4.29.5):
@@ -5769,8 +5749,8 @@ packages:
       '@tanstack/query-persist-client-core': 4.29.5
       '@tanstack/react-query': 4.29.5(react-dom@18.2.0)(react@18.2.0)
 
-  /@tanstack/react-query@4.22.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-e5j5Z88XUQGeEPMyz5XF1V0mMf6Da+6URXiTpZfUb9nuHs2nlNoA+EoIvnhccE5b9YT6Yg7kARhn2L7u94M/4A==}
+  /@tanstack/react-query@4.26.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-i3dnz4TOARGIXrXQ5P7S25Zfi4noii/bxhcwPurh2nrf5EUCcAt/95TB2HSmMweUBx206yIMWUMEQ7ptd6zwDg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5781,14 +5761,14 @@ packages:
       react-native:
         optional: true
     dependencies:
-      '@tanstack/query-core': 4.22.4
+      '@tanstack/query-core': 4.26.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
-  /@tanstack/react-query@4.26.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-i3dnz4TOARGIXrXQ5P7S25Zfi4noii/bxhcwPurh2nrf5EUCcAt/95TB2HSmMweUBx206yIMWUMEQ7ptd6zwDg==}
+  /@tanstack/react-query@4.29.23(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-u59dPBJHeyeRDSrHN3M8FT65yZDT0uPlaFDFd4K2wmDreHguRlk9t578X+cp1Cj+4oksQCE+wv09A5ZH7Odx6g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5799,7 +5779,7 @@ packages:
       react-native:
         optional: true
     dependencies:
-      '@tanstack/query-core': 4.26.1
+      '@tanstack/query-core': 4.29.23
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       use-sync-external-store: 1.2.0(react@18.2.0)
@@ -5827,7 +5807,7 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/runtime': 7.21.0
+      '@babel/runtime': 7.21.5
       '@types/aria-query': 5.0.1
       aria-query: 5.1.3
       chalk: 4.1.2
@@ -6159,7 +6139,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.59.11
       '@typescript-eslint/type-utils': 5.59.11(eslint@8.30.0)(typescript@4.9.4)
       '@typescript-eslint/utils': 5.59.11(eslint@8.30.0)(typescript@4.9.4)
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.30.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.4
@@ -6184,7 +6164,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.59.11
       '@typescript-eslint/types': 5.59.11
       '@typescript-eslint/typescript-estree': 5.59.11(typescript@4.9.4)
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.30.0
       typescript: 4.9.4
     transitivePeerDependencies:
@@ -6219,7 +6199,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 5.59.11(typescript@4.9.4)
       '@typescript-eslint/utils': 5.59.11(eslint@8.30.0)(typescript@4.9.4)
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.30.0
       tsutils: 3.21.0(typescript@4.9.4)
       typescript: 4.9.4
@@ -6248,7 +6228,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.54.1
       '@typescript-eslint/visitor-keys': 5.54.1
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.0
@@ -6269,7 +6249,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.59.11
       '@typescript-eslint/visitor-keys': 5.59.11
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.0
@@ -7134,7 +7114,7 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       buffer: 5.7.1
-      immediate: 3.2.3
+      immediate: 3.3.0
       level-concat-iterator: 2.0.1
       level-supports: 1.0.1
       xtend: 4.0.2
@@ -7145,7 +7125,7 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       buffer: 5.7.1
-      immediate: 3.2.3
+      immediate: 3.3.0
       level-concat-iterator: 2.0.1
       level-supports: 1.0.1
       xtend: 4.0.2
@@ -7207,7 +7187,7 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -7216,7 +7196,7 @@ packages:
     resolution: {integrity: sha512-7Epl1Blf4Sy37j4v9f9FjICCh4+KAQOyXgHEwlyBiAQLbhKdq/i2QQU3amQalS/wPhdPzDXPL5DMR5bkn+YeWg==}
     engines: {node: '>= 8.0.0'}
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       depd: 2.0.0
       humanize-ms: 1.2.1
     transitivePeerDependencies:
@@ -7505,14 +7485,14 @@ packages:
   /axios@0.21.4:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2(debug@4.3.4)
     transitivePeerDependencies:
       - debug
 
   /axios@1.3.3:
     resolution: {integrity: sha512-eYq77dYIFS77AQlhzEL937yUBSepBfPIe8FcgEDN35vMNZKMrs81pgnyrQpwfy4NF4b4XWX1Zgx7yX+25w8QJA==}
     dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2(debug@4.3.4)
       form-data: 4.0.0
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -7522,7 +7502,7 @@ packages:
   /axios@1.3.4:
     resolution: {integrity: sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==}
     dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2(debug@4.3.4)
       form-data: 4.0.0
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -8377,8 +8357,8 @@ packages:
       browserslist: 4.21.5
     dev: true
 
-  /core-js@3.31.0:
-    resolution: {integrity: sha512-NIp2TQSGfR6ba5aalZD+ZQ1fSxGhDo/s1w0nx3RYzf2pnJxt7YynxFlFScP6eV7+GZsKO95NSjGxyJsU3DZgeQ==}
+  /core-js@3.31.1:
+    resolution: {integrity: sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==}
     requiresBuild: true
     dev: false
 
@@ -8478,6 +8458,14 @@ packages:
     transitivePeerDependencies:
       - encoding
 
+  /cross-fetch@4.0.0:
+    resolution: {integrity: sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==}
+    dependencies:
+      node-fetch: 2.6.12
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -8610,17 +8598,6 @@ packages:
       ms: 2.1.3
     dev: true
 
-  /debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.2
-
   /debug@4.3.4(supports-color@8.1.1):
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -8632,7 +8609,6 @@ packages:
     dependencies:
       ms: 2.1.2
       supports-color: 8.1.1
-    dev: false
 
   /decamelize-keys@1.1.1:
     resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
@@ -8874,7 +8850,7 @@ packages:
   /dns-over-http-resolver@1.2.3(node-fetch@2.6.9):
     resolution: {integrity: sha512-miDiVSI6KSNbi4SVifzO/reD8rMnxgrlnkrlkugOLQpWQTe2qMdHsZp5DmfKjxNE+/T3VAAYLQUZMv9SMr6+AA==}
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       native-fetch: 3.0.0(node-fetch@2.6.9)
       receptacle: 1.3.2
     transitivePeerDependencies:
@@ -9487,7 +9463,7 @@ packages:
       eslint: '*'
       eslint-plugin-import: '*'
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       enhanced-resolve: 5.13.0
       eslint: 8.30.0
       eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.11)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.30.0)
@@ -9534,35 +9510,6 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.59.11)(eslint-import-resolver-node@0.3.7)(eslint@8.30.0):
-    resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 5.59.11(eslint@8.30.0)(typescript@4.9.4)
-      debug: 3.2.7
-      eslint: 8.30.0
-      eslint-import-resolver-node: 0.3.7
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.59.11)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.30.0):
     resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
     engines: {node: '>=4'}
@@ -9626,39 +9573,6 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.11)(eslint@8.30.0):
-    resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 5.59.11(eslint@8.30.0)(typescript@4.9.4)
-      array-includes: 3.1.6
-      array.prototype.flat: 1.3.1
-      array.prototype.flatmap: 1.3.1
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.30.0
-      eslint-import-resolver-node: 0.3.7
-      eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.11)(eslint-import-resolver-node@0.3.7)(eslint@8.30.0)
-      has: 1.0.3
-      is-core-module: 2.11.0
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.values: 1.1.6
-      resolve: 1.22.1
-      semver: 6.3.0
-      tsconfig-paths: 3.14.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: true
-
   /eslint-plugin-jest-dom@4.0.3(eslint@8.30.0):
     resolution: {integrity: sha512-9j+n8uj0+V0tmsoS7bYC7fLhQmIvjRqRYEcbDSi+TKPsTThLLXCyj5swMSSf/hTleeMktACnn+HFqXBr5gbcbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0, npm: '>=6', yarn: '>=1'}
@@ -9881,7 +9795,7 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
@@ -10439,7 +10353,7 @@ packages:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
     dev: true
 
-  /follow-redirects@1.15.2:
+  /follow-redirects@1.15.2(debug@4.3.4):
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
     peerDependencies:
@@ -10447,6 +10361,8 @@ packages:
     peerDependenciesMeta:
       debug:
         optional: true
+    dependencies:
+      debug: 4.3.4(supports-color@8.1.1)
 
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
@@ -10843,9 +10759,9 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /hardhat@2.17.0(ts-node@10.9.1)(typescript@4.9.4):
-    resolution: {integrity: sha512-CaEGa13tkJNe2/rdaBiive4pmdNShwxvdWVhr1zfb6aVpRhQt9VNO0l/UIBt/zzajz38ZFjvhfM2bj8LDXo9gw==}
-    engines: {node: '>=16.0.0'}
+  /hardhat@2.16.1(ts-node@10.9.1)(typescript@4.9.4):
+    resolution: {integrity: sha512-QpBjGXFhhSYoYBGEHyoau/A63crZOP+i3GbNxzLGkL6IklzT+piN14+wGnINNCg5BLSKisQI/RAySPzaWRcx/g==}
+    engines: {node: '>=14.0.0'}
     hasBin: true
     peerDependencies:
       ts-node: '*'
@@ -10879,7 +10795,7 @@ packages:
       chalk: 2.4.2
       chokidar: 3.5.3
       ci-info: 2.0.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       enquirer: 2.3.6
       env-paths: 2.2.1
       ethereum-cryptography: 1.2.0
@@ -10888,7 +10804,7 @@ packages:
       fp-ts: 1.19.3
       fs-extra: 7.0.1
       glob: 7.2.0
-      immutable: 4.3.1
+      immutable: 4.3.0
       io-ts: 1.10.4
       keccak: 3.0.3
       lodash: 4.17.21
@@ -10985,8 +10901,8 @@ packages:
   /hey-listen@1.0.8:
     resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
 
-  /hls.js@1.4.7:
-    resolution: {integrity: sha512-dvwJXLlYES6wb7DR42uuTrio5sUTsIoWbuNeQS4xHMqfVBZ0KAlJlBmjFAo4s20/0XRhsMjWf5bx0kq5Lgvv1w==}
+  /hls.js@1.4.10:
+    resolution: {integrity: sha512-wAVSj4Fm2MqOHy5+BlYnlKxXvJlv5IuZHjlzHu18QmjRzSDFQiUDWdHs5+NsFMQrgKEBwuWDcyvaMC9dUzJ5Uw==}
     dev: false
 
   /hmac-drbg@1.0.1:
@@ -11056,7 +10972,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -11140,8 +11056,12 @@ packages:
     resolution: {integrity: sha512-RrGCXRm/fRVqMIhqXrGEX9rRADavPiDFSoMb/k64i9XMk8uH4r/Omi5Ctierj6XzNecwDbO4WuFbDD1zmpl3Tg==}
     dev: false
 
-  /immutable@4.3.1:
-    resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==}
+  /immediate@3.3.0:
+    resolution: {integrity: sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==}
+    dev: false
+
+  /immutable@4.3.0:
+    resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
     dev: false
 
   /import-fresh@3.3.0:
@@ -11257,7 +11177,7 @@ packages:
       any-signal: 3.0.1
       blob-to-it: 1.0.4
       browser-readablestream-to-it: 1.0.3
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       err-code: 3.0.1
       ipfs-core-types: 0.10.3(node-fetch@2.6.9)
       ipfs-unixfs: 6.0.9
@@ -11289,7 +11209,7 @@ packages:
       '@ipld/dag-pb': 2.1.18
       any-signal: 3.0.1
       dag-jose: 1.0.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       err-code: 3.0.1
       ipfs-core-types: 0.10.3(node-fetch@2.6.9)
       ipfs-core-utils: 0.14.3(node-fetch@2.6.9)
@@ -12190,7 +12110,7 @@ packages:
       chalk: 5.2.0
       cli-truncate: 3.1.0
       commander: 10.0.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       execa: 7.1.0
       lilconfig: 2.1.0
       listr2: 5.0.8
@@ -12290,11 +12210,11 @@ packages:
       react:
         optional: true
     dependencies:
-      '@livepeer/core': 1.6.0(react@18.2.0)
+      '@livepeer/core': 1.8.0(react@18.2.0)
       '@stitches/core': 1.2.8
-      core-js: 3.31.0
+      core-js: 3.31.1
       cross-fetch: 3.1.5
-      hls.js: 1.4.7
+      hls.js: 1.4.10
       ms: 3.0.0-canary.1
       multiformats: 9.9.0
       react: 18.2.0
@@ -12904,7 +12824,7 @@ packages:
     resolution: {integrity: sha512-6Mj0yHLdUZjHnOPgr5xfWIMqMWS12zDN6iws9SLuSz76W8jTtAv24MN4/CL7gJrl5vtxGInkkqDv/JIoRsQOvA==}
     dependencies:
       '@types/debug': 4.1.7
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       decode-named-character-reference: 1.0.2
       micromark-core-commonmark: 1.0.6
       micromark-factory-space: 1.0.0
@@ -13362,6 +13282,18 @@ packages:
     engines: {node: '>=10.5.0'}
     dev: true
 
+  /node-fetch@2.6.12:
+    resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
   /node-fetch@2.6.7:
     resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
     engines: {node: 4.x || >=6.0.0}
@@ -14354,7 +14286,7 @@ packages:
     dependencies:
       '@assemblyscript/loader': 0.9.4
       bl: 5.1.0
-      debug: 4.3.4
+      debug: 4.3.4(supports-color@8.1.1)
       minimist: 1.2.8
       node-fetch: 2.6.9
       readable-stream: 3.6.2
@@ -15258,7 +15190,7 @@ packages:
     dependencies:
       command-exists: 1.2.9
       commander: 3.0.2
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2(debug@4.3.4)
       fs-extra: 0.30.0
       js-sha3: 0.8.0
       memorystream: 0.3.1
@@ -17084,3 +17016,19 @@ packages:
     dependencies:
       react: 18.2.0
       use-sync-external-store: 1.2.0(react@18.2.0)
+
+  /zustand@4.3.9(react@18.2.0):
+    resolution: {integrity: sha512-Tat5r8jOMG1Vcsj8uldMyqYKC5IZvQif8zetmLHs9WoZlntTHmIoNM8TpLRY31ExncuUvUOXehd0kvahkuHjDw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      immer: '>=9.0'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
diff --git a/template/integrations/disco/api/disco/issue-proof-of-hack/route.ts b/template/integrations/disco/api/disco/issue-proof-of-hack/route.ts
new file mode 100644
index 0000000..f91a883
--- /dev/null
+++ b/template/integrations/disco/api/disco/issue-proof-of-hack/route.ts
@@ -0,0 +1 @@
+export { POST } from '@/integrations/disco/api/issue-proof-of-hack'
diff --git a/template/integrations/disco/core/disco/api/issue-proof-of-hack.ts b/template/integrations/disco/core/disco/api/issue-proof-of-hack.ts
new file mode 100644
index 0000000..97cace5
--- /dev/null
+++ b/template/integrations/disco/core/disco/api/issue-proof-of-hack.ts
@@ -0,0 +1,58 @@
+import { getIronSession } from 'iron-session'
+import { z } from 'zod'
+
+import { SERVER_SESSION_SETTINGS } from '@/lib/session'
+
+import { discoIssueProofOfHack } from '../routes/issue-proof-of-hack'
+
+const discoSchema = z.object({
+  schemaUrl: z.string(),
+  subjectData: z.object({
+    eventDate: z.string().transform((value) => {
+      const date = new Date(value)
+      if (isNaN(date.getTime())) {
+        throw new Error('Invalid date format')
+      }
+      return date.toISOString().split('T')[0]
+    }),
+    eventName: z.string(),
+    place: z.string(),
+    projectName: z.string(),
+    sourceCodeUrl: z.string(),
+    teamName: z.string(),
+    usageLink: z.string(),
+    expDate: z.string().transform((value) => {
+      const date = new Date(value)
+      if (isNaN(date.getTime())) {
+        throw new Error('Invalid date format')
+      }
+      return date.toISOString().split('T')[0]
+    }),
+    recipientDid: z.string(),
+  }),
+  recipientDID: z.string(),
+})
+
+export async function POST(req: Request) {
+  try {
+    const res = new Response()
+    const prunedReq = discoSchema.parse(await req.json())
+    const session = await getIronSession(req, res, SERVER_SESSION_SETTINGS)
+
+    if (!session?.isAdmin) {
+      return new Response('Unauthorized. You need to be an app admin to issue a Proof of Hack', { status: 401 })
+    }
+
+    if (!prunedReq.recipientDID) {
+      return new Response('recipientDID not found', { status: 400 })
+    }
+    const info = await discoIssueProofOfHack(prunedReq)
+
+    if (info) {
+      return new Response(JSON.stringify(info), { status: 200, headers: { 'Content-Type': 'application/json' } })
+    }
+  } catch (e) {
+    const errorMessage = e instanceof Error ? e.message : String(e)
+    return new Response(errorMessage, { status: 500 })
+  }
+}
diff --git a/template/integrations/disco/core/disco/components/disco-profile-basic.tsx b/template/integrations/disco/core/disco/components/disco-profile-basic.tsx
index 6c34e13..24d77cb 100644
--- a/template/integrations/disco/core/disco/components/disco-profile-basic.tsx
+++ b/template/integrations/disco/core/disco/components/disco-profile-basic.tsx
@@ -1,10 +1,16 @@
 import { HTMLAttributes } from 'react'
 
+import Image from 'next/image'
+import { LuExternalLink } from 'react-icons/lu'
 import ReactMarkdown from 'react-markdown'
 import type { Address } from 'wagmi'
 
-import { useDiscoGetProfileFromAddress } from '@/integrations/disco/hooks/use-disco-get-profile-from-address'
+import { LinkComponent } from '@/components/shared/link-component'
 import { useUser } from '@/lib/hooks/use-user'
+import { cn } from '@/lib/utils'
+
+import { useDiscoGetProfileFromAddress } from '../hooks/use-disco-get-profile-from-address'
+import { DISCO_APP_URL } from '../utils/constants'
 
 interface DiscoProfileBasicProps extends HTMLAttributes<HTMLDivElement> {
   address?: Address
@@ -13,42 +19,63 @@ interface DiscoProfileBasicProps extends HTMLAttributes<HTMLDivElement> {
 export const DiscoProfileBasic = ({ className, address, ...props }: DiscoProfileBasicProps) => {
   const { user } = useUser()
   const { data, isLoading, isError, error } = useDiscoGetProfileFromAddress(address, user)
-  if (isLoading) return <div className={className}>Loading...</div>
-  if (isError) return <div className={className}>{error instanceof Error ? error.message : String(error)}</div>
+
+  if (isError) return <div className={cn('text-red-500 font-medium', className)}>{error instanceof Error ? error.message : String(error)}</div>
 
   return (
-    <div className={className} {...props}>
-      <div className="flex gap-2">
-        <div className="w-full max-w-[320px]">
-          <img alt="Profile Avatar" className="h-auto w-64 rounded-lg border-4 shadow-xl" src={data?.profile?.avatar} />
-        </div>
-        <div className="col-span-8">
-          {data?.profile?.name && (
-            <div className="text-3xl font-bold text-neutral-900 dark:text-white">{data?.linkages && data?.linkages?.[data?.profile?.name]?.id}</div>
-          )}
-          {data?.did && <div className="text-xl font-medium text-neutral-600 dark:text-neutral-400">{data?.did}</div>}
-          {data?.profile?.bio && (
-            <div className="mt-10 text-neutral-900 dark:text-white">
-              <ReactMarkdown
-                components={{
-                  a: ({ ...props }: HTMLAttributes<HTMLElement>) => (
-                    <a
-                      rel="noopener noreferrer"
-                      target="_blank"
-                      {...props}
-                      className="font-medium text-gray-800 underline transition-colors dark:text-blue-200"
-                    />
-                  ),
-
-                  code: ({ ...props }: HTMLAttributes<HTMLElement>) => (
-                    <code {...props} className="rounded-sm bg-gray-100 px-1 py-0.5 font-mono font-medium text-gray-800" />
-                  ),
-                }}>
-                {data?.profile?.bio}
-              </ReactMarkdown>
-            </div>
-          )}
-        </div>
+    <div className={cn('grid grid-cols-1 items-center justify-between gap-2 lg:grid-cols-4', className)} {...props}>
+      <div className="col-span-1">
+        {isLoading ? (
+          <div className="h-60 w-60 max-w-full animate-pulse rounded-lg border-4 bg-gray-500/80 shadow-xl dark:bg-gray-200" />
+        ) : (
+          <Image
+            alt="Profile Avatar"
+            className="mx-auto max-w-full rounded-lg border-4 shadow-xl lg:ml-0"
+            height={240}
+            loader={() => data?.profile?.avatar}
+            src={data?.profile?.avatar}
+            width={240}
+          />
+        )}
+      </div>
+      <div className="col-span-1 lg:col-span-3">
+        {isLoading ? (
+          <div className="mx-auto h-60 w-[800px] max-w-full animate-pulse rounded-lg bg-gray-500/80 shadow-xl dark:bg-gray-200 lg:w-full" />
+        ) : (
+          <div className="max-w-full">
+            {data?.profile?.name && (
+              <div className="text-3xl font-bold text-neutral-900 dark:text-white">{data?.linkages && data?.linkages?.[data?.profile?.name]?.id}</div>
+            )}
+            {data?.did && (
+              <LinkComponent href={`${DISCO_APP_URL}/${data?.did}`}>
+                <div className="flex max-w-full items-center text-xl font-medium text-neutral-600 transition-colors hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-neutral-300">
+                  <span className="overflow-x-auto break-words">{data?.did}</span> <LuExternalLink className="ml-2" size="20" />
+                </div>
+              </LinkComponent>
+            )}
+            {data?.profile?.bio && (
+              <div className="mt-10 text-neutral-900 dark:text-white">
+                <ReactMarkdown
+                  components={{
+                    a: ({ ...props }: HTMLAttributes<HTMLElement>) => (
+                      <a
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        {...props}
+                        className="font-medium text-gray-800 underline transition-colors dark:text-blue-200"
+                      />
+                    ),
+
+                    code: ({ ...props }: HTMLAttributes<HTMLElement>) => (
+                      <code {...props} className="rounded-sm bg-gray-100 px-1 py-0.5 font-mono font-medium text-gray-800" />
+                    ),
+                  }}>
+                  {data?.profile?.bio}
+                </ReactMarkdown>
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/template/integrations/disco/core/disco/components/disco-profile-credentials.tsx b/template/integrations/disco/core/disco/components/disco-profile-credentials.tsx
index 86675c3..23d7f39 100644
--- a/template/integrations/disco/core/disco/components/disco-profile-credentials.tsx
+++ b/template/integrations/disco/core/disco/components/disco-profile-credentials.tsx
@@ -2,9 +2,12 @@ import { HTMLAttributes } from 'react'
 
 import type { Address } from 'wagmi'
 
+import { LinkComponent } from '@/components/shared/link-component'
 import { useDiscoGetProfileFromAddress } from '@/integrations/disco/hooks/use-disco-get-profile-from-address'
 import { useUser } from '@/lib/hooks/use-user'
+import { cn } from '@/lib/utils'
 
+import { DISCO_APP_URL } from '../utils/constants'
 import { Credential } from '../utils/types'
 
 interface DiscoProfileCredentialsProps extends HTMLAttributes<HTMLDivElement> {
@@ -13,33 +16,38 @@ interface DiscoProfileCredentialsProps extends HTMLAttributes<HTMLDivElement> {
 
 export const DiscoProfileCredentials = ({ className, address, ...props }: DiscoProfileCredentialsProps) => {
   const { user } = useUser()
-  const { data, isLoading, isError } = useDiscoGetProfileFromAddress(address, user)
+  const { data, isLoading, isError, error } = useDiscoGetProfileFromAddress(address, user)
+
+  if (isError) return <div className={cn('text-red-500 font-medium', className)}>{error instanceof Error ? error.message : String(error)}</div>
 
-  if (isLoading) return <div className={className}>Loading...</div>
-  if (isError) return <div className={className}>No profile found. </div>
   return (
-    <div className={className} {...props}>
-      <div className="container mt-10 grid grid-cols-12 gap-10">
-        {data?.creds?.map((credential: Credential) => {
-          return (
-            <div key={credential.id} className="card col-span-12 lg:col-span-4">
-              <div className=" break-words font-bold text-neutral-900 dark:text-neutral-100">{`${credential?.type[1] || credential?.type[0]}`}</div>
-              <div className="mt-32">
+    <div className={cn('mt-10 grid grid-cols-1 items-center justify-center gap-3 md:grid-cols-2 lg:grid-cols-3', className)} {...props}>
+      {isLoading
+        ? Array.from({ length: 6 }, (_, index) => <CredentialCardSkeleton key={index} />)
+        : data?.creds?.map((credential: Credential) => (
+            <LinkComponent
+              key={credential.id}
+              className="card flex h-[224px] flex-col justify-between transition duration-300 hover:scale-105 dark:bg-neutral-500/80"
+              href={`${DISCO_APP_URL}/${credential.id}`}>
+              <div className="break-words font-bold text-neutral-900 dark:text-neutral-100">{`${credential?.type[1] || credential?.type[0]}`}</div>
+              <div>
                 <hr className="my-2" />
                 <ul className="flex flex-wrap gap-2">
                   {credential?.type?.map((type, idx) => {
                     return (
-                      <li key={idx} className="text-xs font-bold">
+                      <li key={idx} className="overflow-x-auto break-words text-xs font-bold">
                         {type}
                       </li>
                     )
                   })}
                 </ul>
               </div>
-            </div>
-          )
-        })}
-      </div>
+            </LinkComponent>
+          ))}
     </div>
   )
 }
+
+function CredentialCardSkeleton() {
+  return <div className="h-56 w-[600px] max-w-full animate-pulse rounded-lg bg-gray-500/80 dark:bg-gray-200"></div>
+}
diff --git a/template/integrations/disco/core/disco/components/form-issue-proof-of-hack/controls.ts b/template/integrations/disco/core/disco/components/form-issue-proof-of-hack/controls.ts
new file mode 100644
index 0000000..16dc32c
--- /dev/null
+++ b/template/integrations/disco/core/disco/components/form-issue-proof-of-hack/controls.ts
@@ -0,0 +1,58 @@
+export const issueProofOfHackFormControls = [
+  {
+    formfieldName: 'eventDate',
+    component: 'input',
+    label: 'Event Date',
+    attribute: { type: 'date', required: 'true', name: 'eventDate' },
+  },
+  {
+    formfieldName: 'eventName',
+    component: 'input',
+    label: 'Event Name',
+    placeholder: 'Place Event Name here',
+    attribute: { required: 'true' },
+  },
+  {
+    formfieldName: 'place',
+    component: 'input',
+    label: 'Place',
+    placeholder: 'Place Place here',
+  },
+  {
+    formfieldName: 'projectName',
+    component: 'input',
+    label: 'Project Name',
+    placeholder: 'Place Project Name here',
+    attribute: { required: 'true' },
+  },
+  {
+    formfieldName: 'sourceCodeUrl',
+    component: 'input',
+    label: 'Source Code Url',
+    placeholder: 'Place Source Code Url here',
+  },
+  {
+    formfieldName: 'teamName',
+    component: 'input',
+    label: 'Team Name',
+    placeholder: 'Place Team Name here',
+  },
+  {
+    formfieldName: 'usageLink',
+    component: 'input',
+    label: 'Usage Link',
+    placeholder: 'Place Usage Link here',
+  },
+  {
+    formfieldName: 'expDate',
+    component: 'input',
+    label: 'Expiration Date',
+    attribute: { type: 'date', name: 'expDate' },
+  },
+  {
+    formfieldName: 'recipientDid',
+    component: 'input',
+    label: 'Recipient DID',
+    placeholder: 'Place Recipient DID here',
+  },
+]
diff --git a/template/integrations/disco/core/disco/components/form-issue-proof-of-hack/hook.ts b/template/integrations/disco/core/disco/components/form-issue-proof-of-hack/hook.ts
new file mode 100644
index 0000000..e8c04ef
--- /dev/null
+++ b/template/integrations/disco/core/disco/components/form-issue-proof-of-hack/hook.ts
@@ -0,0 +1,77 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { useDiscoIssueProofOfHack } from '../../hooks/use-disco-issue-proof-of-hack'
+
+export const useDiscoIssueForm = () => {
+  const { mutate, data, isLoading, isError, error, isSuccess } = useDiscoIssueProofOfHack()
+  const discoSchema = z.object({
+    eventDate: z.string().transform((value) => {
+      const date = new Date(value)
+      if (isNaN(date.getTime())) {
+        throw new Error('Invalid date format')
+      }
+      return date.toISOString().split('T')[0]
+    }),
+    eventName: z.string(),
+    place: z.string(),
+    projectName: z.string(),
+    sourceCodeUrl: z.string(),
+    teamName: z.string(),
+    usageLink: z.string(),
+    expDate: z.string().transform((value) => {
+      const date = new Date(value)
+      if (isNaN(date.getTime())) {
+        throw new Error('Invalid date format')
+      }
+      return date.toISOString().split('T')[0]
+    }),
+    recipientDid: z.string(),
+  })
+
+  const form = useForm<z.infer<typeof discoSchema>>({
+    resolver: zodResolver(discoSchema),
+    defaultValues: {
+      eventDate: 'YYYY-MM-DD',
+      eventName: '',
+      place: '',
+      projectName: '',
+      sourceCodeUrl: '',
+      teamName: '',
+      usageLink: '',
+      expDate: 'YYYY-MM-DD',
+      recipientDid: '',
+    },
+  })
+
+  const onSubmit = async (values: z.infer<typeof discoSchema>) => {
+    try {
+      mutate({
+        eventDate: values.eventDate,
+        eventName: values.eventName,
+        place: values.place,
+        projectName: values.projectName,
+        sourceCodeUrl: values.sourceCodeUrl,
+        teamName: values.teamName,
+        usageLink: values.usageLink,
+        expDate: values.expDate,
+        recipientDid: values.recipientDid,
+      })
+      form.reset()
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  return {
+    error,
+    data,
+    isError,
+    isLoading,
+    isSuccess,
+    discoSchema,
+    form,
+    onSubmit,
+  }
+}
diff --git a/template/integrations/disco/core/disco/components/form-issue-proof-of-hack/index.tsx b/template/integrations/disco/core/disco/components/form-issue-proof-of-hack/index.tsx
new file mode 100644
index 0000000..a1f2004
--- /dev/null
+++ b/template/integrations/disco/core/disco/components/form-issue-proof-of-hack/index.tsx
@@ -0,0 +1,83 @@
+import CopyToClipboard from 'react-copy-to-clipboard'
+import { FaCopy } from 'react-icons/fa'
+
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { useToast } from '@/lib/hooks/use-toast'
+
+import { issueProofOfHackFormControls } from './controls'
+import { useDiscoIssueForm } from './hook'
+import { getComponent } from '../../utils/get-element-component'
+
+export function FormCredentialIssuanceProofOfHack() {
+  const { onSubmit, form, isLoading, isError, isSuccess, error, data } = useDiscoIssueForm()
+  const { handleSubmit, register } = form
+  const { toast, dismiss } = useToast()
+
+  const handleToast = () => {
+    toast({
+      title: 'Proof of Hack Copied',
+      description: 'The output has been copied to your clipboard.',
+    })
+
+    setTimeout(() => {
+      dismiss()
+    }, 4200)
+  }
+
+  return (
+    <>
+      <div className="card w-full">
+        <Form {...form}>
+          <form className="flex w-full flex-col space-y-8" onSubmit={handleSubmit(onSubmit)}>
+            {issueProofOfHackFormControls.map((item) => {
+              const Item = getComponent(item?.component)
+
+              return (
+                <FormField
+                  key={item?.label}
+                  control={form.control}
+                  name={item?.formfieldName as 'eventDate'}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{item?.label}</FormLabel>
+                      <FormControl className="input dark:border-gray-600 dark:text-gray-600 dark:[color-scheme:dark]">
+                        <Item {...item?.attribute} {...field} {...register(item?.formfieldName as 'eventDate')} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )
+            })}
+            <div>
+              {isError && <div className="mb-3 font-medium text-red-500">{error instanceof Error ? error.message : String(error)}</div>}
+              <button className="btn btn-emerald w-full" disabled={isLoading}>
+                {isLoading ? 'Loading...' : 'Issue Proof of Hack Credential'}
+              </button>
+            </div>
+          </form>
+        </Form>
+        <hr className="my-4" />
+        <div className="flex items-center justify-between">
+          <h3 className="text-center">Proof of Hack</h3>
+          <p className="text-center text-sm text-gray-500">Proof of Hack recognizes the holder for participating in a Hackathon</p>
+        </div>
+      </div>
+      {isSuccess && (
+        <div className="card container mt-10 w-full">
+          <div className="flex items-center justify-between">
+            <h3 className="text-2xl font-bold">Successfully Created Proof of Hack Credential</h3>
+            <CopyToClipboard text={JSON.stringify(data, null, 2)} onCopy={handleToast}>
+              <span className="flex-center flex h-7 w-7 cursor-pointer rounded-md bg-neutral-100 p-2 hover:bg-neutral-200 dark:bg-neutral-800 hover:dark:bg-neutral-900">
+                <FaCopy className=" text-neutral-600 dark:text-neutral-100" />
+              </span>
+            </CopyToClipboard>
+          </div>
+
+          <hr className="my-4" />
+          <textarea readOnly className="input h-96 dark:text-gray-600 dark:placeholder:text-neutral-400" value={JSON.stringify(data, null, 2)} />
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/template/integrations/disco/core/disco/hooks/use-disco-issue-proof-of-hack.ts b/template/integrations/disco/core/disco/hooks/use-disco-issue-proof-of-hack.ts
new file mode 100644
index 0000000..1434f3b
--- /dev/null
+++ b/template/integrations/disco/core/disco/hooks/use-disco-issue-proof-of-hack.ts
@@ -0,0 +1,12 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { appDiscoIssueProofOfHack } from '../routes/issue-proof-of-hack/client'
+import { EventData } from '../utils/types'
+
+export const useDiscoIssueProofOfHack = () => {
+  return useMutation({
+    mutationFn: (vars: EventData) => {
+      return appDiscoIssueProofOfHack(vars)
+    },
+  })
+}
diff --git a/template/integrations/disco/core/disco/routes/issue-proof-of-hack/client.ts b/template/integrations/disco/core/disco/routes/issue-proof-of-hack/client.ts
new file mode 100644
index 0000000..ab68c52
--- /dev/null
+++ b/template/integrations/disco/core/disco/routes/issue-proof-of-hack/client.ts
@@ -0,0 +1,24 @@
+import { PROOF_OF_HACK_SCHEMA_URL } from '../../utils/constants'
+import { EventData } from '../../utils/types'
+
+export async function appDiscoIssueProofOfHack(values: EventData) {
+  const payload = {
+    schemaUrl: PROOF_OF_HACK_SCHEMA_URL,
+    subjectData: { ...values },
+    recipientDID: values?.recipientDid,
+  }
+
+  const res = await fetch('/api/disco/issue-proof-of-hack', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  })
+
+  if (!res.ok && res.status !== 200) {
+    throw new Error(await res.text())
+  }
+
+  return res.json() as Promise<EventData>
+}
diff --git a/template/integrations/disco/core/disco/routes/issue-proof-of-hack/index.ts b/template/integrations/disco/core/disco/routes/issue-proof-of-hack/index.ts
new file mode 100644
index 0000000..61d5de7
--- /dev/null
+++ b/template/integrations/disco/core/disco/routes/issue-proof-of-hack/index.ts
@@ -0,0 +1,19 @@
+import { discoClient } from '@/integrations/disco/disco-client'
+
+import { PROOF_OF_HACK_SCHEMA_URL } from '../../utils/constants'
+import { IssueEntity, IssuedCredentials } from '../../utils/types'
+
+export async function discoIssueProofOfHack(val: IssueEntity) {
+  const payload = {
+    schemaUrl: PROOF_OF_HACK_SCHEMA_URL,
+    subjectData: { ...val?.subjectData },
+    recipientDID: val?.subjectData?.recipientDid,
+  }
+
+  const { data }: { data: IssuedCredentials } = await discoClient.post(`/credential`, JSON.stringify(payload), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+  return data
+}
diff --git a/template/integrations/disco/core/disco/utils/constants.ts b/template/integrations/disco/core/disco/utils/constants.ts
new file mode 100644
index 0000000..427af7e
--- /dev/null
+++ b/template/integrations/disco/core/disco/utils/constants.ts
@@ -0,0 +1,3 @@
+export const DISCO_APP_URL = 'https://app.disco.xyz'
+
+export const PROOF_OF_HACK_SCHEMA_URL = 'https://raw.githubusercontent.com/discoxyz/disco-schemas/main/json/ProofOfHackCredential/1-0-0.json'
diff --git a/template/integrations/disco/core/disco/utils/get-element-component.ts b/template/integrations/disco/core/disco/utils/get-element-component.ts
new file mode 100644
index 0000000..7bfbe76
--- /dev/null
+++ b/template/integrations/disco/core/disco/utils/get-element-component.ts
@@ -0,0 +1,13 @@
+import { Input } from '@/components/ui/input'
+import { Select } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+
+const getElement: { [key: string]: any } = {
+  textArea: Textarea,
+  input: Input,
+  select: Select,
+}
+
+export function getComponent(key: string): any {
+  return getElement[key] || Input
+}
diff --git a/template/integrations/disco/core/disco/utils/types.ts b/template/integrations/disco/core/disco/utils/types.ts
index 3c2e1b8..5ecdaec 100644
--- a/template/integrations/disco/core/disco/utils/types.ts
+++ b/template/integrations/disco/core/disco/utils/types.ts
@@ -79,3 +79,85 @@ export interface Profile {
   creds: Credential[]
   isDiscoOrg: boolean
 }
+
+export interface IssuedCredentials {
+  '@context': string[]
+  type: string[]
+  issuer: {
+    id: string
+  }
+  issuanceDate: string
+  id: string
+  credentialSubject: {
+    id: string
+  }
+  credentialSchema: {
+    id: string
+    type: string
+  }
+  proof: {
+    verificationMethod: string
+    created: string
+    proofPurpose: string
+    type: string
+    proofValue: string
+    eip712Domain: {
+      domain: {
+        chainId: number
+        name: string
+        version: string
+      }
+      messageSchema: {
+        EIP712Domain: {
+          name: string
+          type: string
+        }[]
+        Proof: {
+          name: string
+          type: string
+        }[]
+        Issuer: {
+          name: string
+          type: string
+        }[]
+        CredentialSubject: {
+          name: string
+          type: string
+        }[]
+        VerifiableCredential: {
+          name: string
+          type: string
+        }[]
+      }
+      primaryType: 'VerifiableCredential'
+    }
+  }
+}
+
+export interface IssueEntity {
+  schemaUrl: string
+  subjectData: {
+    eventDate: string
+    eventName: string
+    place: string
+    projectName: string
+    sourceCodeUrl: string
+    teamName: string
+    usageLink: string
+    expDate: string
+    recipientDid: string
+  }
+  recipientDID: string
+}
+
+export interface EventData {
+  eventDate: string
+  eventName: string
+  expDate: string
+  place: string
+  projectName: string
+  recipientDid: string
+  sourceCodeUrl: string
+  teamName: string
+  usageLink: string
+}
diff --git a/template/integrations/disco/pages/disco/layout.tsx b/template/integrations/disco/pages/disco/layout.tsx
new file mode 100644
index 0000000..4f3f3de
--- /dev/null
+++ b/template/integrations/disco/pages/disco/layout.tsx
@@ -0,0 +1,72 @@
+'use client'
+import { ReactNode } from 'react'
+
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import { usePathname } from 'next/navigation'
+import Balancer from 'react-wrap-balancer'
+
+import { IsDarkTheme } from '@/components/shared/is-dark-theme'
+import { IsLightTheme } from '@/components/shared/is-light-theme'
+import { LinkComponent } from '@/components/shared/link-component'
+import { FADE_DOWN_ANIMATION_VARIANTS } from '@/config/design'
+import { turboIntegrations } from '@/data/turbo-integrations'
+import { cn } from '@/lib/utils'
+
+const integrationData = turboIntegrations.disco
+const profilePath = '/integration/disco/profile'
+const proofOfHackPath = '/integration/disco/proof-of-hack'
+
+export default function LayoutIntegration({ children }: { children: ReactNode }) {
+  const pathname = usePathname()
+
+  return (
+    <>
+      <div className="flex-center flex-col items-center justify-center text-center">
+        <motion.div
+          animate="show"
+          className="max-w-3xl px-5 text-center xl:px-0"
+          initial="hidden"
+          viewport={{ once: true }}
+          whileInView="show"
+          variants={{
+            hidden: {},
+            show: {
+              transition: {
+                staggerChildren: 0.15,
+              },
+            },
+          }}>
+          <IsLightTheme>
+            <Image alt="Starter logo" className="mx-auto rounded-full" height={100} src={integrationData.imgDark} width={100} />
+          </IsLightTheme>
+          <IsDarkTheme>
+            <Image alt="Starter logo" className="mx-auto rounded-full" height={100} src={integrationData.imgLight} width={100} />
+          </IsDarkTheme>
+          <motion.h1
+            className="text-gradient-sand my-8 text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-8xl md:leading-[6rem]"
+            variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            {integrationData.name}
+          </motion.h1>
+          <motion.p className="my-4 text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            <Balancer>{integrationData.description}</Balancer>
+          </motion.p>
+          <motion.div className="my-4 text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            <LinkComponent className="btn btn-primary" href={integrationData.url}>
+              Documentation
+            </LinkComponent>
+          </motion.div>
+          <motion.div className="mt-8 flex flex-wrap justify-center gap-x-14 gap-y-4 text-2xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            <LinkComponent className={cn('btn hover:opacity-75', pathname === proofOfHackPath && 'opacity-50')} href={profilePath}>
+              Profile
+            </LinkComponent>
+            <LinkComponent className={cn('btn hover:opacity-75', pathname === profilePath && 'opacity-50')} href={proofOfHackPath}>
+              Proof of Hack
+            </LinkComponent>
+          </motion.div>
+        </motion.div>
+      </div>
+      {children}
+    </>
+  )
+}
diff --git a/template/integrations/disco/pages/disco/page.tsx b/template/integrations/disco/pages/disco/page.tsx
index de3a4e2..a17121b 100644
--- a/template/integrations/disco/pages/disco/page.tsx
+++ b/template/integrations/disco/pages/disco/page.tsx
@@ -1,94 +1,5 @@
-'use client'
-import { motion } from 'framer-motion'
-import Image from 'next/image'
-import Balancer from 'react-wrap-balancer'
-import { useAccount } from 'wagmi'
-
-import { WalletConnect } from '@/components/blockchain/wallet-connect'
-import { IsDarkTheme } from '@/components/shared/is-dark-theme'
-import { IsLightTheme } from '@/components/shared/is-light-theme'
-import { IsWalletConnected } from '@/components/shared/is-wallet-connected'
-import { IsWalletDisconnected } from '@/components/shared/is-wallet-disconnected'
-import { LinkComponent } from '@/components/shared/link-component'
-import { FADE_DOWN_ANIMATION_VARIANTS } from '@/config/design'
-import { turboIntegrations } from '@/data/turbo-integrations'
-import { DiscoProfileBasic } from '@/integrations/disco/components/disco-profile-basic'
-import { DiscoProfileCredentials } from '@/integrations/disco/components/disco-profile-credentials'
-import { ButtonSIWELogin } from '@/integrations/siwe/components/button-siwe-login'
-import { IsSignedIn } from '@/integrations/siwe/components/is-signed-in'
-import { IsSignedOut } from '@/integrations/siwe/components/is-signed-out'
+import { redirect } from 'next/navigation'
 
 export default function PageIntegration() {
-  const { address } = useAccount()
-  return (
-    <>
-      <div className="flex-center flex flex-1 flex-col items-center justify-center">
-        <motion.div
-          animate="show"
-          className="max-w-3xl px-5 text-center xl:px-0"
-          initial="hidden"
-          viewport={{ once: true }}
-          whileInView="show"
-          variants={{
-            hidden: {},
-            show: {
-              transition: {
-                staggerChildren: 0.15,
-              },
-            },
-          }}>
-          <IsLightTheme>
-            <Image alt="Disco logo" className="mx-auto rounded-full" height={100} src={turboIntegrations.disco.imgDark} width={100} />
-          </IsLightTheme>
-          <IsDarkTheme>
-            <Image alt="Disco logo" className="mx-auto rounded-full" height={100} src={turboIntegrations.disco.imgLight} width={100} />
-          </IsDarkTheme>
-          <motion.h1
-            className="text-gradient-sand my-8 text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-8xl md:leading-[6rem]"
-            variants={FADE_DOWN_ANIMATION_VARIANTS}>
-            {turboIntegrations.disco.name}
-          </motion.h1>
-          <motion.p className="my-4 text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
-            <Balancer>{turboIntegrations.disco.description}</Balancer>
-          </motion.p>
-          <motion.div className="my-4 text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
-            <LinkComponent isExternal className="btn btn-primary" href={turboIntegrations.disco.url}>
-              Documentation
-            </LinkComponent>
-          </motion.div>
-        </motion.div>
-
-        <hr className="my-5" />
-        <IsWalletConnected>
-          <IsSignedIn>
-            <div className="w-full">
-              <section className="flex flex-col gap-y-10">
-                <div className="card container max-w-screen-xl">
-                  <h3 className="text-4xl font-bold">Disco Profile</h3>
-                  <hr className="my-4" />
-                  <DiscoProfileBasic address={address} />
-                </div>
-                <div className="card container max-w-screen-xl">
-                  <h3 className="text-4xl font-bold">Disco Verifiable Credentials</h3>
-                  <hr className="my-4" />
-                  <DiscoProfileCredentials address={address} />
-                </div>
-              </section>
-            </div>
-          </IsSignedIn>
-          <IsSignedOut>
-            <div className="text-center">
-              <ButtonSIWELogin className="btn btn-emerald" label="Sign-In With Ethereum" />
-              <p className="mt-4 text-sm text-neutral-600 dark:text-neutral-200">
-                Accessing the Disco API requires authenticating with an Ethereum Account.
-              </p>
-            </div>
-          </IsSignedOut>
-        </IsWalletConnected>
-        <IsWalletDisconnected>
-          <WalletConnect className="mx-auto inline-block" />
-        </IsWalletDisconnected>
-      </div>
-    </>
-  )
+  redirect('/integration/disco/profile')
 }
diff --git a/template/integrations/disco/pages/disco/profile/page.tsx b/template/integrations/disco/pages/disco/profile/page.tsx
new file mode 100644
index 0000000..8f2364c
--- /dev/null
+++ b/template/integrations/disco/pages/disco/profile/page.tsx
@@ -0,0 +1,47 @@
+'use client'
+import { useAccount } from 'wagmi'
+
+import { WalletConnect } from '@/components/blockchain/wallet-connect'
+import { IsWalletConnected } from '@/components/shared/is-wallet-connected'
+import { IsWalletDisconnected } from '@/components/shared/is-wallet-disconnected'
+import { DiscoProfileBasic } from '@/integrations/disco/components/disco-profile-basic'
+import { DiscoProfileCredentials } from '@/integrations/disco/components/disco-profile-credentials'
+import { ButtonSIWELogin } from '@/integrations/siwe/components/button-siwe-login'
+import { IsSignedIn } from '@/integrations/siwe/components/is-signed-in'
+import { IsSignedOut } from '@/integrations/siwe/components/is-signed-out'
+
+export default function PageIntegration() {
+  const { address } = useAccount()
+
+  return (
+    <div className="mx-auto mt-10 flex w-full max-w-screen-xl flex-col justify-center px-5">
+      <IsWalletConnected>
+        <IsSignedIn>
+          <section className="flex w-full flex-col gap-y-10">
+            <div className="card container w-full">
+              <h3 className="text-4xl font-bold">Disco Profile</h3>
+              <hr className="my-4" />
+              <DiscoProfileBasic address={address} />
+            </div>
+            <div className="card container max-w-full">
+              <h3 className="text-4xl font-bold">Disco Verifiable Credentials</h3>
+              <hr className="my-4" />
+              <DiscoProfileCredentials address={address} />
+            </div>
+          </section>
+        </IsSignedIn>
+        <IsSignedOut>
+          <div className="text-center">
+            <ButtonSIWELogin className="btn btn-emerald" label="Sign-In With Ethereum" />
+            <p className="mt-4 text-sm text-neutral-600 dark:text-neutral-200">
+              Accessing the Disco API requires authenticating with an Ethereum Account.
+            </p>
+          </div>
+        </IsSignedOut>
+      </IsWalletConnected>
+      <IsWalletDisconnected>
+        <WalletConnect className="mx-auto inline-block" />
+      </IsWalletDisconnected>
+    </div>
+  )
+}
diff --git a/template/integrations/disco/pages/disco/proof-of-hack/page.tsx b/template/integrations/disco/pages/disco/proof-of-hack/page.tsx
new file mode 100644
index 0000000..374e23b
--- /dev/null
+++ b/template/integrations/disco/pages/disco/proof-of-hack/page.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { WalletConnect } from '@/components/blockchain/wallet-connect'
+import { IsWalletConnected } from '@/components/shared/is-wallet-connected'
+import { IsWalletDisconnected } from '@/components/shared/is-wallet-disconnected'
+import { FormCredentialIssuanceProofOfHack } from '@/integrations/disco/components/form-issue-proof-of-hack'
+import { ButtonSIWELogin } from '@/integrations/siwe/components/button-siwe-login'
+import { IsSignedIn } from '@/integrations/siwe/components/is-signed-in'
+import { IsSignedOut } from '@/integrations/siwe/components/is-signed-out'
+
+export default function PageIntegration() {
+  return (
+    <div className="mx-auto mt-10 flex w-full max-w-screen-lg flex-col justify-center px-5">
+      <IsWalletConnected>
+        <IsSignedIn>
+          <FormCredentialIssuanceProofOfHack />
+        </IsSignedIn>
+        <IsSignedOut>
+          <div className="text-center">
+            <ButtonSIWELogin className="btn btn-emerald" label="Sign-In With Ethereum" />
+            <p className="mt-4 text-sm text-neutral-600 dark:text-neutral-200">
+              Accessing the Disco API requires authenticating with an Ethereum Account.
+            </p>
+          </div>
+        </IsSignedOut>
+      </IsWalletConnected>
+      <IsWalletDisconnected>
+        <WalletConnect className="mx-auto inline-block" />
+      </IsWalletDisconnected>
+    </div>
+  )
+}