diff --git a/src/backend/utils/view-helpers/view-helpers.ts b/src/backend/utils/view-helpers/view-helpers.ts
index 71090dc54..141869df7 100644
--- a/src/backend/utils/view-helpers/view-helpers.ts
+++ b/src/backend/utils/view-helpers/view-helpers.ts
@@ -233,8 +233,10 @@ export class ViewHelpers {
    *
    * @return  {string}
    */
-  recordActionUrl({ resourceId, recordId, actionName, search }: RecordActionParams): string {
-    return this.urlBuilder(['resources', resourceId, 'records', recordId, actionName], search)
+  recordActionUrl({ resourceId, recordId, actionName, search, noURIEncode }: RecordActionParams & {
+    noURIEncode?: boolean;
+  }): string {
+    return this.urlBuilder(['resources', resourceId, 'records', noURIEncode ? recordId : encodeURIComponent(recordId), actionName], search)
   }
 
   /**
diff --git a/src/frontend/components/application.tsx b/src/frontend/components/application.tsx
index 5140adeab..b8906650b 100644
--- a/src/frontend/components/application.tsx
+++ b/src/frontend/components/application.tsx
@@ -43,7 +43,7 @@ const App: React.FC = () => {
   const pageName = ':pageName'
 
   const dashboardUrl = h.dashboardUrl()
-  const recordActionUrl = h.recordActionUrl({ resourceId, recordId, actionName })
+  const recordActionUrl = h.recordActionUrl({ resourceId, recordId, actionName, noURIEncode: true })
   const resourceActionUrl = h.resourceActionUrl({ resourceId, actionName })
   const bulkActionUrl = h.bulkActionUrl({ resourceId, actionName })
   const resourceUrl = h.resourceUrl({ resourceId })
diff --git a/src/frontend/components/routes/resource.tsx b/src/frontend/components/routes/resource.tsx
index b8c7497b4..fe012a4a9 100644
--- a/src/frontend/components/routes/resource.tsx
+++ b/src/frontend/components/routes/resource.tsx
@@ -30,7 +30,7 @@ const getAction = (resource: ResourceJSON): ActionJSON | undefined => {
   const actionName = ':actionName'
   const recordId = ':recordId'
 
-  const recordActionUrl = h.recordActionUrl({ resourceId, recordId, actionName })
+  const recordActionUrl = h.recordActionUrl({ resourceId, recordId, actionName, noURIEncode: true })
   const resourceActionUrl = h.resourceActionUrl({ resourceId, actionName })
   const bulkActionUrl = h.bulkActionUrl({ resourceId, actionName })
 
diff --git a/src/frontend/utils/api-client.ts b/src/frontend/utils/api-client.ts
index a8afeb243..df0af781d 100644
--- a/src/frontend/utils/api-client.ts
+++ b/src/frontend/utils/api-client.ts
@@ -190,7 +190,7 @@ class ApiClient {
   async recordAction(options: RecordActionAPIParams): Promise<AxiosResponse<RecordActionResponse>> {
     const { resourceId, recordId, actionName, data, ...axiosParams } = options
     const response = await this.client.request({
-      url: `/api/resources/${resourceId}/records/${recordId}/${actionName}`,
+      url: `/api/resources/${resourceId}/records/${encodeURIComponent(recordId)}/${actionName}`,
       method: data ? 'POST' : 'GET',
       ...axiosParams,
       data,