diff --git a/plugins/vault-backend/package.json b/plugins/vault-backend/package.json
index 15e5be42a8..3ec616aa12 100644
--- a/plugins/vault-backend/package.json
+++ b/plugins/vault-backend/package.json
@@ -53,7 +53,7 @@
     "@backstage/cli": "^0.17.2-next.1",
     "@types/compression": "^1.7.2",
     "@types/supertest": "^2.0.8",
-    "msw": "^0.35.0",
+    "msw": "^0.42.0",
     "supertest": "^4.0.2"
   },
   "files": [
diff --git a/plugins/vault/dev/index.tsx b/plugins/vault/dev/index.tsx
index fd89e65889..f5056cd057 100644
--- a/plugins/vault/dev/index.tsx
+++ b/plugins/vault/dev/index.tsx
@@ -13,7 +13,72 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import { Entity } from '@backstage/catalog-model';
+import { Content, Header, HeaderLabel, Page } from '@backstage/core-components';
 import { createDevApp } from '@backstage/dev-utils';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { TestApiProvider } from '@backstage/test-utils';
+import { Box, Typography } from '@material-ui/core';
+import SomeIcon from '@material-ui/icons/Storage';
+import React from 'react';
+import { VaultApi, vaultApiRef } from '../src/api';
+import { EntityVaultCard } from '../src/components/EntityVaultCard';
+import { EntityVaultTable } from '../src/components/EntityVaultTable';
+import { VAULT_SECRET_PATH_ANNOTATION } from '../src/constants';
 import { vaultPlugin } from '../src/plugin';
 
-createDevApp().registerPlugin(vaultPlugin).render();
+const entity: Entity = {
+  apiVersion: 'backstage.io/v1alpha1',
+  kind: 'Component',
+  metadata: {
+    name: 'backstage',
+    annotations: { [VAULT_SECRET_PATH_ANNOTATION]: 'a/b' },
+  },
+  spec: {
+    type: 'service',
+  },
+};
+
+const mockedApi: VaultApi = {
+  async listSecrets() {
+    return [
+      {
+        name: 'a::b',
+        editUrl: 'https://example.com',
+        showUrl: 'https://example.com',
+      },
+      {
+        name: 'c::d',
+        editUrl: 'https://example.com',
+        showUrl: 'https://example.com',
+      },
+    ];
+  },
+};
+
+createDevApp()
+  .registerPlugin(vaultPlugin)
+  .addPage({
+    element: (
+      <TestApiProvider apis={[[vaultApiRef, mockedApi]]}>
+        <EntityProvider entity={entity}>
+          <Page themeId="service">
+            <Header title="Mocked Vault">
+              <HeaderLabel label="Mode" value="Development" />
+            </Header>
+            <Content>
+              <Typography variant="h3">As a card</Typography>
+              <EntityVaultCard />
+              <Box mt={4} />
+              <Typography variant="h3">As a table</Typography>
+              <EntityVaultTable entity={entity} />
+            </Content>
+          </Page>
+        </EntityProvider>
+      </TestApiProvider>
+    ),
+    title: 'Vault',
+    icon: SomeIcon,
+  })
+  .render();
diff --git a/plugins/vault/package.json b/plugins/vault/package.json
index 05b8da1df4..35f441e65e 100644
--- a/plugins/vault/package.json
+++ b/plugins/vault/package.json
@@ -58,7 +58,7 @@
     "@types/jest": "*",
     "@types/node": "*",
     "cross-fetch": "^3.1.5",
-    "msw": "^0.35.0"
+    "msw": "^0.42.0"
   },
   "files": [
     "dist"
diff --git a/plugins/vault/src/api.test.ts b/plugins/vault/src/api.test.ts
index 3452cbad38..70c6a553df 100644
--- a/plugins/vault/src/api.test.ts
+++ b/plugins/vault/src/api.test.ts
@@ -44,9 +44,9 @@ describe('api', () => {
     server.use(
       rest.get(`${mockBaseUrl}/v1/secrets/:path`, (req, res, ctx) => {
         const { path } = req.params;
-        if (path === 'test%2Fsuccess') {
+        if (path === 'test/success') {
           return res(ctx.json(mockSecretsResult));
-        } else if (path === 'test%2Ferror') {
+        } else if (path === 'test/error') {
           return res(ctx.json([]));
         }
         return res(ctx.status(400));
diff --git a/plugins/vault/src/components/EntityVaultTable/EntityVaultTable.test.tsx b/plugins/vault/src/components/EntityVaultTable/EntityVaultTable.test.tsx
index 3538d2e0ae..f2b181562a 100644
--- a/plugins/vault/src/components/EntityVaultTable/EntityVaultTable.test.tsx
+++ b/plugins/vault/src/components/EntityVaultTable/EntityVaultTable.test.tsx
@@ -27,7 +27,7 @@ import { ApiProvider, UrlPatternDiscovery } from '@backstage/core-app-api';
 import { VaultSecret, vaultApiRef, VaultClient } from '../../api';
 import { rest } from 'msw';
 
-describe('EntityVautTable', () => {
+describe('EntityVaultTable', () => {
   const server = setupServer();
   setupRequestMockHandlers(server);
   let apis: TestApiRegistry;
@@ -85,9 +85,9 @@ describe('EntityVautTable', () => {
     server.use(
       rest.get(`${mockBaseUrl}/v1/secrets/:path`, (req, res, ctx) => {
         const { path } = req.params;
-        if (path === 'test%2Fsuccess') {
+        if (path === 'test/success') {
           return res(ctx.json(mockSecretsResult));
-        } else if (path === 'test%2Ferror') {
+        } else if (path === 'test/error') {
           return res(ctx.json([]));
         }
         return res(ctx.status(400));