diff --git a/client/helpers/get-escaped-forward-slash.js b/client/helpers/get-escaped-forward-slash.js
new file mode 100644
index 00000000..0878ce6d
--- /dev/null
+++ b/client/helpers/get-escaped-forward-slash.js
@@ -0,0 +1,2 @@
+const getEscapedForwardSlash = (str) => str.replace(/\//g, '%2F');
+export default getEscapedForwardSlash;
diff --git a/client/helpers/get-escaped-forward-slash.spec.js b/client/helpers/get-escaped-forward-slash.spec.js
new file mode 100644
index 00000000..ddd5e548
--- /dev/null
+++ b/client/helpers/get-escaped-forward-slash.spec.js
@@ -0,0 +1,27 @@
+import getEscapedForwardSlash from './get-escaped-forward-slash';
+
+describe('getEscapedForwardSlash', () => {
+  it('should escape one forward slash and convert to %2F.', () => {
+    const input = '/';
+    const output = getEscapedForwardSlash(input);
+    expect(output).toEqual('%2F');
+  });
+
+  it('should escape many forward slashes and convert each to %2F.', () => {
+    const input = '///';
+    const output = getEscapedForwardSlash(input);
+    expect(output).toEqual('%2F%2F%2F');
+  });
+
+  it('should convert forward slashes in a string containing other characters with forward slashes.', () => {
+    const input = 'hello/world';
+    const output = getEscapedForwardSlash(input);
+    expect(output).toEqual('hello%2Fworld');
+  });
+
+  it('should not do anything if string does not contain forward slash.', () => {
+    const input = 'hello\world';
+    const output = getEscapedForwardSlash(input);
+    expect(output).toEqual('hello\world');
+  });
+});
diff --git a/client/helpers/index.js b/client/helpers/index.js
index 8a3840b7..64e5b786 100644
--- a/client/helpers/index.js
+++ b/client/helpers/index.js
@@ -4,6 +4,7 @@ export { default as getEnvironment } from './get-environment';
 export { default as getEnvironmentList } from './get-environment-list';
 export { default as getEnvironmentLocation } from './get-environment-location';
 export { default as getErrorMessage } from './get-error-message';
+export { default as getEscapedForwardSlash } from './get-escaped-forward-slash';
 export { default as getJsonStringObject } from './get-json-string-object';
 export { default as getKeyValuePairs } from './get-key-value-pairs';
 export { default as getLatestNewsItems } from './get-latest-news-items';
diff --git a/client/main.js b/client/main.js
index 661ba20d..4ad87b63 100644
--- a/client/main.js
+++ b/client/main.js
@@ -34,7 +34,7 @@ import WorkflowList from './routes/domain/workflow-list';
 import WorkflowSummary from './routes/workflow/summary';
 import WorkflowTabs from './routes/workflow';
 
-import { http, injectMomentDurationFormat, jsonTryParse } from '~helpers';
+import { getEscapedForwardSlash, http, injectMomentDurationFormat, jsonTryParse } from '~helpers';
 
 const routeOpts = {
   mode: 'history',
@@ -138,7 +138,7 @@ const routeOpts = {
       props: ({ params }) => ({
         domain: params.domain,
         runId: params.runId,
-        workflowId: params.workflowId,
+        workflowId: getEscapedForwardSlash(params.workflowId),
       }),
       children: [
         {
@@ -150,7 +150,7 @@ const routeOpts = {
           props: {
             summary: ({ params }) => ({
               runId: params.runId,
-              workflowId: params.workflowId,
+              workflowId: getEscapedForwardSlash(params.workflowId),
             }),
           },
         },
@@ -167,7 +167,7 @@ const routeOpts = {
               format: query.format || 'grid',
               runId: params.runId,
               showGraph: Boolean(query.showGraph) === true,
-              workflowId: params.workflowId,
+              workflowId: getEscapedForwardSlash(params.workflowId),
             }),
           },
         },
diff --git a/client/routes/workflow/index.vue b/client/routes/workflow/index.vue
index b3d0b883..62866467 100644
--- a/client/routes/workflow/index.vue
+++ b/client/routes/workflow/index.vue
@@ -135,10 +135,7 @@ export default {
   computed: {
     baseAPIURL() {
       const { domain, workflowId, runId } = this;
-
-      return `/api/domains/${domain}/workflows/${encodeURIComponent(
-        workflowId
-      )}/${encodeURIComponent(runId)}`;
+      return `/api/domains/${domain}/workflows/${workflowId}/${runId}`;
     },
     historyEvents() {
       const {