diff --git a/cypress/e2e/ResourceContainer.cy.ts b/cypress/e2e/ResourceContainer.cy.ts
new file mode 100644
index 000000000..ffd29bdea
--- /dev/null
+++ b/cypress/e2e/ResourceContainer.cy.ts
@@ -0,0 +1,135 @@
+import { Resource } from '@bbp/nexus-sdk';
+
+describe('Resource with id that contains URL encoded characters', () => {
+  const resourceIdWithEncodedCharacters =
+    'https://hello.lol/https%3A%2F%2Fencoded.url%2Fwow';
+  const displayName = 'https%3A%2F%2Fencoded.url%2Fwow';
+
+  before(() => {
+    if (
+      !Cypress.env('use_existing_delta_instance') ||
+      Cypress.env('use_existing_delta_instance') === false
+    ) {
+      cy.task('auth:createRealmsAndUsers', Cypress.env('users'));
+    }
+
+    cy.login(
+      `${Cypress.env('users').morty.username}-studio`,
+      Cypress.env('users').morty.realm,
+      Cypress.env('users').morty.username,
+      Cypress.env('users').morty.password
+    ).then(() => {
+      cy.window().then(win => {
+        const authToken = win.localStorage.getItem('nexus__token');
+        cy.wrap(authToken).as('nexusToken');
+
+        const orgLabel = Cypress.env('ORG_LABEL');
+        const projectLabelBase = Cypress.env('PROJECT_LABEL_BASE');
+
+        cy.task('project:setup', {
+          nexusApiUrl: Cypress.env('NEXUS_API_URL'),
+          authToken,
+          orgLabel,
+          projectLabelBase,
+        }).then(({ projectLabel }: { projectLabel: string }) => {
+          cy.wrap(projectLabel).as('projectLabel');
+          cy.fixture('ResourceWithEncodedCharactersId.json').then(
+            resourcePayload => {
+              cy.task('resource:create', {
+                nexusApiUrl: Cypress.env('NEXUS_API_URL'),
+                authToken,
+                orgLabel,
+                projectLabel,
+                resourcePayload,
+              }).then((resource: Resource) => {
+                cy.wrap(resource['@id']).as('fullResourceId');
+              });
+            }
+          );
+        });
+      });
+    });
+  });
+
+  beforeEach(() => {
+    cy.login(
+      `${Cypress.env('users').morty.username}-report-plugin`,
+      Cypress.env('users').morty.realm,
+      Cypress.env('users').morty.username,
+      Cypress.env('users').morty.password
+    );
+  });
+
+  after(function() {
+    cy.task('project:teardown', {
+      nexusApiUrl: Cypress.env('NEXUS_API_URL'),
+      authToken: this.nexusToken,
+      orgLabel: Cypress.env('ORG_LABEL'),
+      projectLabel: this.projectLabel,
+    });
+  });
+
+  function testResourceDataInJsonViewer() {
+    cy.findByText('Advanced View').click();
+
+    cy.contains(`"@id"`);
+    cy.contains(resourceIdWithEncodedCharacters);
+    cy.contains('type');
+    cy.contains('[]');
+  }
+
+  it('resource opens when user clicks on resource row in MyData table', function() {
+    cy.visit(`/`);
+
+    cy.findAllByText(new RegExp(displayName))
+      .first()
+      .click();
+
+    cy.findByTestId('resource-details').within(() => {
+      testResourceDataInJsonViewer();
+    });
+  });
+
+  it('resource opens when user directly navigates to resource page', function() {
+    const resourcePage = `/${Cypress.env('ORG_LABEL')}/${
+      this.projectLabel
+    }/resources/${encodeURIComponent(resourceIdWithEncodedCharacters)}`;
+
+    cy.visit(`${resourcePage}`);
+
+    cy.findByTestId('resource-details').within(() => {
+      testResourceDataInJsonViewer();
+    });
+  });
+
+  it('resource opens with id resolution page', function() {
+    const resolvePage = `/resolve/${encodeURIComponent(
+      resourceIdWithEncodedCharacters
+    )}`;
+    const resourcePage = `/${Cypress.env('ORG_LABEL')}/${
+      this.projectLabel
+    }/resources/${encodeURIComponent(resourceIdWithEncodedCharacters)}`;
+
+    cy.visit(resolvePage);
+
+    cy.intercept(`${Cypress.env('NEXUS_API_URL')}/${resolvePage}`).as(
+      'idResolution'
+    );
+
+    // If many e2e tests ran together there may be many resources with same id.
+    // In this case the id resolution page will look different. Test accordingly.
+    cy.wait('@idResolution').then(interception => {
+      const resolvedResources = interception.response.body._results;
+
+      if (resolvedResources.length === 1) {
+        testResourceDataInJsonViewer();
+      } else {
+        // Multiple resources with same id found.
+        cy.findByText('Open Resource', {
+          selector: `a[href="${resourcePage}"]`,
+        }).click();
+        testResourceDataInJsonViewer();
+      }
+    });
+  });
+});
diff --git a/cypress/fixtures/ResourceWithEncodedCharactersId.json b/cypress/fixtures/ResourceWithEncodedCharactersId.json
new file mode 100644
index 000000000..6b9d74260
--- /dev/null
+++ b/cypress/fixtures/ResourceWithEncodedCharactersId.json
@@ -0,0 +1,4 @@
+{
+  "@id": "https://hello.lol/https%3A%2F%2Fencoded.url%2Fwow",
+  "@type": []
+}
diff --git a/src/shared/containers/ResourceViewContainer.tsx b/src/shared/containers/ResourceViewContainer.tsx
index 3fbb8ae65..b33417838 100644
--- a/src/shared/containers/ResourceViewContainer.tsx
+++ b/src/shared/containers/ResourceViewContainer.tsx
@@ -688,7 +688,7 @@ const ResourceViewContainer: FC<{
 
   return (
     <>
-      <div className="resource-details">
+      <div className="resource-details" data-testid="resource-details">
         <Helmet
           title={`${
             resource ? getResourceLabel(resource) : resourceId