diff --git a/ui/app/controllers/csi/plugins.js b/ui/app/controllers/csi/plugins.js
new file mode 100644
index 000000000..f4d0631dc
--- /dev/null
+++ b/ui/app/controllers/csi/plugins.js
@@ -0,0 +1,5 @@
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  isForbidden: false,
+});
diff --git a/ui/app/controllers/csi/plugins/index.js b/ui/app/controllers/csi/plugins/index.js
new file mode 100644
index 000000000..9902b3f22
--- /dev/null
+++ b/ui/app/controllers/csi/plugins/index.js
@@ -0,0 +1,40 @@
+import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
+import { alias, readOnly } from '@ember/object/computed';
+import Controller, { inject as controller } from '@ember/controller';
+import SortableFactory from 'nomad-ui/mixins/sortable-factory';
+
+export default Controller.extend(SortableFactory([]), {
+  userSettings: service(),
+  pluginsController: controller('csi/plugins'),
+
+  isForbidden: alias('pluginsController.isForbidden'),
+
+  queryParams: {
+    currentPage: 'page',
+    sortProperty: 'sort',
+    sortDescending: 'desc',
+  },
+
+  currentPage: 1,
+  pageSize: readOnly('userSettings.pageSize'),
+
+  sortProperty: 'id',
+  sortDescending: false,
+
+  listToSort: alias('model'),
+  sortedPlugins: alias('listSorted'),
+
+  // TODO: Remove once this page gets search capability
+  resetPagination() {
+    if (this.currentPage != null) {
+      this.set('currentPage', 1);
+    }
+  },
+
+  actions: {
+    gotoPlugin(plugin) {
+      this.transitionToRoute('csi.plugins.plugin', plugin.id);
+    },
+  },
+});
diff --git a/ui/app/routes/csi/plugins.js b/ui/app/routes/csi/plugins.js
new file mode 100644
index 000000000..9aaf2d516
--- /dev/null
+++ b/ui/app/routes/csi/plugins.js
@@ -0,0 +1,19 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import WithForbiddenState from 'nomad-ui/mixins/with-forbidden-state';
+import notifyForbidden from 'nomad-ui/utils/notify-forbidden';
+
+export default Route.extend(WithForbiddenState, {
+  store: service(),
+
+  breadcrumbs: [
+    {
+      label: 'Storage',
+      args: ['csi.index'],
+    },
+  ],
+
+  model() {
+    return this.store.query('plugin', { type: 'csi' }).catch(notifyForbidden(this));
+  },
+});
diff --git a/ui/app/routes/csi/plugins/index.js b/ui/app/routes/csi/plugins/index.js
new file mode 100644
index 000000000..2adff9d30
--- /dev/null
+++ b/ui/app/routes/csi/plugins/index.js
@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+import { collect } from '@ember/object/computed';
+import { watchQuery } from 'nomad-ui/utils/properties/watch';
+import WithWatchers from 'nomad-ui/mixins/with-watchers';
+
+export default Route.extend(WithWatchers, {
+  startWatchers(controller) {
+    controller.set('modelWatch', this.watch.perform({ type: 'csi' }));
+  },
+
+  watch: watchQuery('plugin'),
+  watchers: collect('watch'),
+});
diff --git a/ui/app/templates/csi/plugins.hbs b/ui/app/templates/csi/plugins.hbs
new file mode 100644
index 000000000..c24cd6895
--- /dev/null
+++ b/ui/app/templates/csi/plugins.hbs
@@ -0,0 +1 @@
+{{outlet}}
diff --git a/ui/app/templates/csi/plugins/index.hbs b/ui/app/templates/csi/plugins/index.hbs
new file mode 100644
index 000000000..d5d75773a
--- /dev/null
+++ b/ui/app/templates/csi/plugins/index.hbs
@@ -0,0 +1,13 @@
+{{title "CSI Plugins"}}
+<div class="tabs is-subnav">
+  <ul>
+    <li data-test-tab="volumes">{{#link-to "csi.volumes.index" activeClass="is-active"}}Volumes{{/link-to}}</li>
+    <li data-test-tab="plugins">{{#link-to "csi.plugins.index" activeClass="is-active"}}Plugins{{/link-to}}</li>
+  </ul>
+</div>
+<section class="section">
+  {{#if isForbidden}}
+    {{partial "partials/forbidden-message"}}
+  {{else}}
+  {{/if}}
+</section>