diff --git a/ee/app/assets/javascripts/pages/security/dashboard/show/index.js b/ee/app/assets/javascripts/pages/security/dashboard/show/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cfe1db5db1bd75d9a0ce792c527cbfbd4f147bff
--- /dev/null
+++ b/ee/app/assets/javascripts/pages/security/dashboard/show/index.js
@@ -0,0 +1,49 @@
+import Vue from 'vue';
+import createRouter from 'ee/security_dashboard/store/router';
+import projectSelector from 'ee/security_dashboard/store/plugins/project_selector';
+import syncWithRouter from 'ee/security_dashboard/store/plugins/sync_with_router';
+import createStore from 'ee/security_dashboard/store';
+import InstanceSecurityDashboard from 'ee/security_dashboard/components/instance_security_dashboard.vue';
+
+if (gon.features && gon.features.securityDashboard) {
+  document.addEventListener('DOMContentLoaded', () => {
+    const el = document.querySelector('#js-security');
+    const {
+      dashboardDocumentation,
+      emptyStateSvgPath,
+      emptyDashboardStateSvgPath,
+      projectAddEndpoint,
+      projectListEndpoint,
+      vulnerabilitiesCountEndpoint,
+      vulnerabilitiesEndpoint,
+      vulnerabilitiesHistoryEndpoint,
+      vulnerabilityFeedbackHelpPath,
+    } = el.dataset;
+    const router = createRouter();
+    const store = createStore({ plugins: [projectSelector, syncWithRouter(router)] });
+
+    return new Vue({
+      el,
+      router,
+      store,
+      components: {
+        InstanceSecurityDashboard,
+      },
+      render(createElement) {
+        return createElement(InstanceSecurityDashboard, {
+          props: {
+            dashboardDocumentation,
+            emptyStateSvgPath,
+            emptyDashboardStateSvgPath,
+            projectAddEndpoint,
+            projectListEndpoint,
+            vulnerabilitiesCountEndpoint,
+            vulnerabilitiesEndpoint,
+            vulnerabilitiesHistoryEndpoint,
+            vulnerabilityFeedbackHelpPath,
+          },
+        });
+      },
+    });
+  });
+}
diff --git a/ee/app/assets/javascripts/pages/security/index.js b/ee/app/assets/javascripts/pages/security/index.js
deleted file mode 100644
index db010145eec25058cfcf9d70a6b74609d3618a17..0000000000000000000000000000000000000000
--- a/ee/app/assets/javascripts/pages/security/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Vue from 'vue';
-import createStore from 'ee/security_dashboard/store';
-import router from 'ee/security_dashboard/store/router';
-import DashboardComponent from 'ee/security_dashboard/components/app.vue';
-
-if (gon.features && gon.features.securityDashboard) {
-  document.addEventListener(
-    'DOMContentLoaded',
-    () =>
-      new Vue({
-        el: '#js-security',
-        store: createStore(),
-        router,
-        components: {
-          DashboardComponent,
-        },
-        render(createElement) {
-          return createElement(DashboardComponent, {
-            props: {},
-          });
-        },
-      }),
-  );
-}
diff --git a/ee/app/controllers/security/dashboard_controller.rb b/ee/app/controllers/security/dashboard_controller.rb
index 0c3bbbd0772079f25077e867f1f379474e032486..a74e08cbecaef21dbed5f098d12fcce5253a4ccb 100644
--- a/ee/app/controllers/security/dashboard_controller.rb
+++ b/ee/app/controllers/security/dashboard_controller.rb
@@ -2,8 +2,5 @@
 
 module Security
   class DashboardController < ::Security::ApplicationController
-    def show
-      head :ok
-    end
   end
 end
diff --git a/ee/app/views/security/dashboard/show.html.haml b/ee/app/views/security/dashboard/show.html.haml
new file mode 100644
index 0000000000000000000000000000000000000000..44426876021dc404f9675348fd075270b451a519
--- /dev/null
+++ b/ee/app/views/security/dashboard/show.html.haml
@@ -0,0 +1,12 @@
+- page_title _('Security Dashboard')
+- @hide_breadcrumbs = true
+
+#js-security{ data: { vulnerabilities_endpoint: '/groups/gitlab-org/-/security/vulnerabilities',
+  vulnerabilities_count_endpoint: '/groups/gitlab-org/-/security/vulnerabilities/summary',
+  vulnerabilities_history_endpoint: '/groups/gitlab-org/-/security/vulnerabilities/history',
+  project_add_endpoint: add_operations_project_path,
+  project_list_endpoint: operations_list_path,
+  vulnerability_feedback_help_path: help_page_path('user/application_security/index', anchor: 'interacting-with-the-vulnerabilities'),
+  empty_state_svg_path: image_path('illustrations/operations-dashboard_empty.svg'),
+  empty_dashboard_state_svg_path: image_path('illustrations/security-dashboard-empty-state.svg'),
+  dashboard_documentation: help_page_path('user/application_security/security_dashboard/index', anchor: 'instance-security-dashboard') } }
diff --git a/ee/app/views/security/index.html.haml b/ee/app/views/security/index.html.haml
deleted file mode 100644
index 48a2c63137292d597bfa152fdccfaba82e34f87b..0000000000000000000000000000000000000000
--- a/ee/app/views/security/index.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-- page_title _('Security Dashboard')
-- @hide_breadcrumbs = true
-
-#js-security