diff --git a/deployables/app/app/components/ZodiacMod.tsx b/deployables/app/app/components/ZodiacMod.tsx
index 6371753eb..9c1721e82 100644
--- a/deployables/app/app/components/ZodiacMod.tsx
+++ b/deployables/app/app/components/ZodiacMod.tsx
@@ -1,12 +1,13 @@
 import {
   decodeRoleKey,
+  encodeRoleKey,
   SupportedZodiacModuleType,
   ZODIAC_MODULE_NAMES,
   type ZodiacModule,
 } from '@zodiac/modules'
 import type { Waypoints } from '@zodiac/schema'
 import { TextInput } from '@zodiac/ui'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useFetcher } from 'react-router'
 import {
   AccountType,
@@ -147,16 +148,33 @@ export const ZodiacMod = ({
       )}
 
       {selectedModule?.type === SupportedZodiacModuleType.ROLES_V2 && (
-        <TextInput
-          label="Role Key"
-          defaultValue={getRoleKey(waypoints) ?? ''}
-          placeholder="Enter key as bytes32 hex string or in human-readable decoding"
-        />
+        <RoleKey waypoints={waypoints} />
       )}
     </>
   )
 }
 
+type RoleKeyProps = {
+  waypoints?: Waypoints
+}
+
+const RoleKey = ({ waypoints }: RoleKeyProps) => {
+  const [value, setValue] = useState(getRoleKey(waypoints) ?? '')
+
+  return (
+    <>
+      <input type="hidden" name="roleId" value={encodeRoleKey(value)} />
+
+      <TextInput
+        label="Role Key"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        placeholder="Enter key as bytes32 hex string or in human-readable decoding"
+      />
+    </>
+  )
+}
+
 const getModuleAddress = (waypoints?: Waypoints) => {
   const moduleWaypoint = getModuleWaypoint(waypoints)
 
diff --git a/deployables/app/app/routes/edit-route.$data.spec.ts b/deployables/app/app/routes/edit-route.$data.spec.ts
index 3765a50dd..b0e38efc4 100644
--- a/deployables/app/app/routes/edit-route.$data.spec.ts
+++ b/deployables/app/app/routes/edit-route.$data.spec.ts
@@ -403,6 +403,40 @@ describe('Edit route', () => {
             'TEST-KEY',
           )
         })
+
+        it('is possible to update the role key', async () => {
+          const moduleAddress = randomAddress()
+
+          mockFetchZodiacModules.mockResolvedValue([
+            {
+              type: SupportedZodiacModuleType.ROLES_V2,
+              moduleAddress,
+            },
+          ])
+
+          const route = createMockExecutionRoute({
+            avatar: randomPrefixedAddress(),
+            providerType: ProviderType.InjectedWallet,
+            waypoints: [
+              createStartingWaypoint(),
+              createMockRoleWaypoint({ moduleAddress, version: 2 }),
+            ],
+          })
+
+          await render(`/edit-route/${btoa(JSON.stringify(route))}`)
+
+          await userEvent.type(
+            screen.getByRole('textbox', { name: 'Role Key' }),
+            'MANAGER',
+          )
+
+          await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+          expect(chromeMock.runtime.sendMessage).toHaveBeenCalledWith(
+            expect.anything(),
+            updateRoleId(route, encodeRoleKey('MANAGER')),
+          )
+        })
       })
     })
   })