diff --git a/app/assets/javascripts/vue_shared/components/customizable_dashboard/dashboard_layout.stories.js b/app/assets/javascripts/vue_shared/components/customizable_dashboard/dashboard_layout.stories.js
index 3b34db6c21e05439070c77b05562fa77775c46b9..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/app/assets/javascripts/vue_shared/components/customizable_dashboard/dashboard_layout.stories.js
+++ b/app/assets/javascripts/vue_shared/components/customizable_dashboard/dashboard_layout.stories.js
@@ -1,126 +0,0 @@
-import DashboardLayout from './dashboard_layout.vue';
-import ExtendedDashboardPanel from './extended_dashboard_panel.vue';
-
-export default {
-  component: DashboardLayout,
-  title: 'vue_shared/components/customizable_dashboard/dashboard_layout',
-};
-
-const dashboardConfig = {
-  title: 'Dashboard title',
-  description: 'Dashboards made easy with a snap grid system',
-  panels: [
-    {
-      id: '1',
-      title: 'Dashboard panel',
-      gridAttributes: {
-        width: 6,
-        height: 1,
-        yPos: 0,
-        xPos: 3,
-      },
-    },
-    {
-      id: '2',
-      title: 'Another dashboard panel',
-      gridAttributes: {
-        width: 3,
-        height: 2,
-        yPos: 1,
-        xPos: 1,
-      },
-    },
-    {
-      id: '3',
-      title: 'I can be placed anywhere on the grid',
-      gridAttributes: {
-        width: 4,
-        height: 1,
-        yPos: 2,
-        xPos: 7,
-      },
-    },
-  ],
-};
-
-const Template = (args, { argTypes }) => ({
-  components: { DashboardLayout, ExtendedDashboardPanel },
-  props: Object.keys(argTypes),
-  template: `
-    <dashboard-layout v-bind="$props">
-      <template #panel="{ panel }">
-        <extended-dashboard-panel :title="panel.title" class="gl-h-full">
-          <template #body>
-            <p class="gl-text-tertiary">Your visualization here</p>
-          </template>
-        </extended-dashboard-panel>
-      </template>
-      <template #empty-state>
-        <p>No dashboard panels here 🕵</p>
-      </template>
-    </dashboard-layout>
-  `,
-});
-
-const SlotsTemplate = (args, { argTypes }) => ({
-  components: { DashboardLayout },
-  props: Object.keys(argTypes),
-  template: `
-    <dashboard-layout v-bind="$props">
-      <template #title>
-        <h2>
-          Custom dashboard <code>#title</code> 🚀
-        </h2>
-      </template>
-      <template #description>
-        <div class="gl-text-subtle">
-          This is the <code>#description</code> slot.
-        </div>
-      </template>
-      <template #filters>
-        <div class>
-          Add your dashboard-level filters in the <code>#filters</code> slot.
-        </div>
-      </template>
-      <template #actions>
-        <a href="#" class="gl-display-flex"><code>#actions</code></a>
-      </template>
-      <template #alert>
-        <div class="gl-text-danger">
-          Dashboard alerts go in the <code>#alert</code> slot.
-        </div>
-      </template>
-      <template #panel="{ panel }">
-        <div class="gl-bg-feedback-warning gl-h-full">
-          <p>The <code>#panel</code> slot.</p>
-        </div>
-      </template>
-      <template #empty-state>
-        <p>This dashboard has no panels</p>
-      </template>
-      <template #footer>
-        <div class="gl-text-subtle">
-          This is a custom <code>#footer</code>!
-        </div>
-      </template>
-    </dashboard-layout>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  config: { ...dashboardConfig },
-};
-
-export const EmptyState = Template.bind({});
-EmptyState.args = {
-  config: {
-    ...dashboardConfig,
-    panels: [],
-  },
-};
-
-export const Slots = SlotsTemplate.bind({});
-Slots.args = {
-  config: { ...dashboardConfig },
-};
diff --git a/app/assets/javascripts/vue_shared/components/customizable_dashboard/dashboard_layout.vue b/app/assets/javascripts/vue_shared/components/customizable_dashboard/dashboard_layout.vue
deleted file mode 100644
index 74ff4966448002bc9250e60c8e7e8a3984e80988..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/vue_shared/components/customizable_dashboard/dashboard_layout.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script>
-import GridstackWrapper from './gridstack_wrapper.vue';
-import { dashboardConfigValidator } from './utils';
-
-/**
- * The `DashboardLayout` component provides an easy way to render dashboards using a configuration, aligning with our [Pajamas guidelines](https://design.gitlab.com/patterns/dashboards).
- *
- * Please refer to the [documentation](https://docs.gitlab.com/development/fe_guide/dashboard_layout_framework) for more information.
- *
- */
-export default {
-  name: 'DashboardLayout',
-  components: {
-    GridstackWrapper,
-  },
-  props: {
-    /**
-     * The dashboard configuration object.
-     *
-     * @typedef {Object} Dashboard
-     * @property {string} title - The dashboard title to render. Expected if no #title slot is provided.
-     * @property {string} description - Optional: The dashboard description to render.
-     * @property {Array<Object>} panels - Optional: The dashboard panels. The entire object is passed to the #panel slot.
-     * @property {string} panels[].id - Each panel must have a unique ID.
-     * @property {string} panels[].title - The panel title to render.
-     * @property {Object} panels[].gridAttributes - Layout settings for the panel.
-     * @property {number} panels[].gridAttributes.width - Width of the panel in grid units.
-     * @property {number} panels[].gridAttributes.height - Height of the panel in grid units.
-     * @property {number} panels[].gridAttributes.xPos - X position of the panel in the grid, expressed in grid units, starts from 0.
-     * @property {number} panels[].gridAttributes.yPos - Y position of the panel in the grid, expressed in grid units, starts from 0.
-     *
-     * @type {Dashboard}
-     */
-    config: {
-      type: Object,
-      required: true,
-      validator: dashboardConfigValidator,
-    },
-  },
-  computed: {
-    dashboardHasPanels() {
-      return this.config.panels?.length > 0;
-    },
-    dashboardHasDescription() {
-      return this.$scopedSlots.description || Boolean(this.config.description);
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <section class="gl-my-4 gl-flex gl-items-center">
-      <div class="gl-flex gl-w-full gl-flex-col">
-        <!-- Dashboard title -->
-        <div class="gl-flex gl-items-center">
-          <!-- @slot Used to render custom dashboard titles. Replaces the default rendering. -->
-          <slot name="title">
-            <h2 data-testid="title" class="gl-my-0">{{ config.title }}</h2>
-          </slot>
-        </div>
-        <!-- Dashboard description -->
-        <div v-if="dashboardHasDescription" class="gl-mt-3 gl-flex">
-          <!-- @slot Used to render custom dashboard descriptions. Replaces the default rendering. -->
-          <slot name="description">
-            <p data-testid="description" class="gl-mb-0">
-              {{ config.description }}
-            </p>
-          </slot>
-        </div>
-      </div>
-      <div v-if="$scopedSlots.actions" data-testid="actions-container">
-        <!-- @slot Place dashboard actions inside this slot. -->
-        <slot name="actions"></slot>
-      </div>
-    </section>
-    <div class="gl-flex">
-      <div class="gl-flex gl-grow gl-flex-col">
-        <!-- @slot For dashboard-level alerts. -->
-        <slot name="alert"></slot>
-
-        <!-- Dashboard filters -->
-        <section
-          v-if="$scopedSlots.filters"
-          class="gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4"
-          data-testid="filters-container"
-        >
-          <!-- @slot Place dashboard filters inside this slot. -->
-          <slot name="filters"></slot>
-        </section>
-
-        <!-- Dashboard grid -->
-        <gridstack-wrapper v-if="dashboardHasPanels" :value="config" class="-gl-mx-3">
-          <template #panel="{ panel }">
-            <!-- @slot The contents to render inside each dashboard panel. -->
-            <slot name="panel" v-bind="{ panel }"></slot>
-          </template>
-        </gridstack-wrapper>
-
-        <!-- @slot Shown when a dashboard has no panels. -->
-        <slot v-else name="empty-state"></slot>
-      </div>
-    </div>
-    <!-- @slot Optional: The dashboard footer content. -->
-    <slot name="footer"></slot>
-  </div>
-</template>
diff --git a/doc/development/fe_guide/dashboard_layout_framework.md b/doc/development/fe_guide/dashboard_layout_framework.md
index 494660aea059e87a0268f6d589d4846c99f212f0..cef3ef2f58358eb74cd448f3077406e69ec33250 100644
--- a/doc/development/fe_guide/dashboard_layout_framework.md
+++ b/doc/development/fe_guide/dashboard_layout_framework.md
@@ -29,8 +29,6 @@ To render dashboard layouts it's recommended to use the [GlDashboardLayout](http
 component. It provides an easy way to render dashboards using
 a configuration which aligns with our [Pajamas guidelines](https://design.gitlab.com/patterns/dashboards/).
 
-Note that GlDashboardLayout supplants the deprecated `dashboard_layout.vue` component in the vue shared directory.
-
 ### Panel guidelines
 
 You are free to
@@ -51,7 +49,7 @@ and can keep existing visualizations. A typical migration path could look like t
 1. Create a new dashboard using GlDashboardLayout and `extended_dashboard_panel.vue`.
 1. Create a dashboard config object that mimics your old dashboard layout.
 1. Optionally, use GlDashboardLayout's slots to render your dashboard's
-filters, actions, or custom title or description.
+   filters, actions, or custom title or description.
 1. Ensure your new dashboard, panels, and visualizations render correctly.
 1. Remove the feature flag and your old dashboard.
 
@@ -62,4 +60,6 @@ for an example on how to render existing visualization components using the dash
 
 Real world implementations and migrations using the GlDashboardLayout component:
 
-- New security dashboard added in MR [!191974](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/191974)
+- New group security dashboard added in MR [!191974](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/191974)
+- New project security dashboard added in MR [!197626](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/197626)
+- New compliance center added in MR [!195759](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/195759)
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/dashboard/compliance_dashboard.vue b/ee/app/assets/javascripts/compliance_dashboard/components/dashboard/compliance_dashboard.vue
index b644ee929e9a8c77c4ba494f92da8996858404d7..90ca52659df64341bda72018dc7abf754667f9c6 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/dashboard/compliance_dashboard.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/dashboard/compliance_dashboard.vue
@@ -1,10 +1,10 @@
 <script>
+import { GlDashboardLayout } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { createAlert } from '~/alert';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { getSystemColorScheme } from '~/lib/utils/css_utils';
 
-import DashboardLayout from '~/vue_shared/components/customizable_dashboard/dashboard_layout.vue';
 import ExtendedDashboardPanel from '~/vue_shared/components/customizable_dashboard/extended_dashboard_panel.vue';
 
 import { isTopLevelGroup } from '../../utils';
@@ -26,7 +26,7 @@ const ATTENTION_FRAMEWORKS_PER_UNIT = 7;
 
 export default {
   components: {
-    DashboardLayout,
+    GlDashboardLayout,
     ExtendedDashboardPanel,
     FrameworkCoverage,
     FrameworksNeedsAttention,
@@ -231,7 +231,7 @@ export default {
 </script>
 
 <template>
-  <dashboard-layout :config="dashboardConfig">
+  <gl-dashboard-layout :config="dashboardConfig">
     <template #panel="{ panel }">
       <extended-dashboard-panel v-bind="panel.extendedDashboardPanelProps">
         <template #body>
@@ -243,5 +243,5 @@ export default {
         </template>
       </extended-dashboard-panel>
     </template>
-  </dashboard-layout>
+  </gl-dashboard-layout>
 </template>
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/group_security_dashboard_new.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/group_security_dashboard_new.vue
index 670dcc39bda10ac148d71e324393a3382a1988e5..6c1fe9acc326a6fbebca34ddc00aec8b946f56f9 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/group_security_dashboard_new.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/group_security_dashboard_new.vue
@@ -1,7 +1,7 @@
 <script>
+import { GlDashboardLayout } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { markRaw } from '~/lib/utils/vue3compat/mark_raw';
-import DashboardLayout from '~/vue_shared/components/customizable_dashboard/dashboard_layout.vue';
 import FilteredSearch from 'ee/security_dashboard/components/shared/security_dashboard_filtered_search/filtered_search.vue';
 import ProjectToken from 'ee/security_dashboard/components/shared/filtered_search_v2/tokens/project_token.vue';
 import GroupVulnerabilitiesOverTimePanel from 'ee/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue';
@@ -18,7 +18,7 @@ const PROJECT_TOKEN_DEFINITION = {
 
 export default {
   components: {
-    DashboardLayout,
+    GlDashboardLayout,
     FilteredSearch,
   },
   inject: ['groupFullPath'],
@@ -67,12 +67,12 @@ export default {
 </script>
 
 <template>
-  <dashboard-layout :config="dashboard" data-testid="group-security-dashboard-new">
+  <gl-dashboard-layout :config="dashboard" data-testid="group-security-dashboard-new">
     <template #filters>
       <filtered-search :tokens="$options.filteredSearchTokens" @filters-changed="updateFilters" />
     </template>
     <template #panel="{ panel }">
       <component :is="panel.component" v-bind="panel.componentProps" />
     </template>
-  </dashboard-layout>
+  </gl-dashboard-layout>
 </template>
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_dashboard_new.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_dashboard_new.vue
index 9a1feaad90fe47a8de957e7385392499f192394a..0de6b407c1d8bc1d5221106ef1ad0f74d7691319 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_dashboard_new.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_dashboard_new.vue
@@ -1,12 +1,12 @@
 <script>
+import { GlDashboardLayout } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { markRaw } from '~/lib/utils/vue3compat/mark_raw';
-import DashboardLayout from '~/vue_shared/components/customizable_dashboard/dashboard_layout.vue';
 import ProjectVulnerabilitiesOverTimePanel from 'ee/security_dashboard/components/shared/project_vulnerabilities_over_time_panel.vue';
 
 export default {
   components: {
-    DashboardLayout,
+    GlDashboardLayout,
   },
   computed: {
     dashboard() {
@@ -35,9 +35,9 @@ export default {
 </script>
 
 <template>
-  <dashboard-layout :config="dashboard" data-testid="project-security-dashboard-new">
+  <gl-dashboard-layout :config="dashboard" data-testid="project-security-dashboard-new">
     <template #panel="{ panel }">
       <component :is="panel.component" v-bind="panel.componentProps" />
     </template>
-  </dashboard-layout>
+  </gl-dashboard-layout>
 </template>
diff --git a/ee/spec/frontend/compliance_dashboard/components/dashboard/compliance_dashboard_spec.js b/ee/spec/frontend/compliance_dashboard/components/dashboard/compliance_dashboard_spec.js
index 599ac6c27315ec28315f763b5710c4d44f4e8064..8c05bd4058a5594fbe005d18ce6537c9e2b70797 100644
--- a/ee/spec/frontend/compliance_dashboard/components/dashboard/compliance_dashboard_spec.js
+++ b/ee/spec/frontend/compliance_dashboard/components/dashboard/compliance_dashboard_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
+import { GlDashboardLayout } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { getSystemColorScheme } from '~/lib/utils/css_utils';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -10,7 +11,6 @@ import FrameworkCoverage from 'ee/compliance_dashboard/components/dashboard/fram
 import FailedRequirements from 'ee/compliance_dashboard/components/dashboard/failed_requirements.vue';
 import FailedControls from 'ee/compliance_dashboard/components/dashboard/failed_controls.vue';
 import FrameworksNeedsAttention from 'ee/compliance_dashboard/components/dashboard/frameworks_needs_attention.vue';
-import DashboardLayout from '~/vue_shared/components/customizable_dashboard/dashboard_layout.vue';
 import frameworkCoverageQuery from 'ee/compliance_dashboard/components/dashboard/graphql/framework_coverage.query.graphql';
 import failedRequirementsQuery from 'ee/compliance_dashboard/components/dashboard/graphql/failed_requirements.query.graphql';
 import failedControlsQuery from 'ee/compliance_dashboard/components/dashboard/graphql/failed_controls.query.graphql';
@@ -122,7 +122,7 @@ describe('Compliance dashboard', () => {
     .fn()
     .mockImplementation(() => new Promise(() => {}));
 
-  const getDashboardConfig = () => wrapper.findComponent(DashboardLayout).props('config');
+  const getDashboardConfig = () => wrapper.findComponent(GlDashboardLayout).props('config');
 
   function createComponent() {
     const apolloProvider = createMockApollo([
diff --git a/ee/spec/frontend/security_dashboard/components/shared/group_security_dashboard_new_spec.js b/ee/spec/frontend/security_dashboard/components/shared/group_security_dashboard_new_spec.js
index a8ae3f4fc1526b5c01682614a21946868408e30c..ca6fecc349b418832ce8ef84abcb4dc2ed29ea1f 100644
--- a/ee/spec/frontend/security_dashboard/components/shared/group_security_dashboard_new_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/shared/group_security_dashboard_new_spec.js
@@ -1,7 +1,7 @@
 import { nextTick } from 'vue';
+import { GlDashboardLayout } from '@gitlab/ui';
 import { markRaw } from '~/lib/utils/vue3compat/mark_raw';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import DashboardLayout from '~/vue_shared/components/customizable_dashboard/dashboard_layout.vue';
 import { OPERATORS_OR } from '~/vue_shared/components/filtered_search_bar/constants';
 import FilteredSearch from 'ee/security_dashboard/components/shared/security_dashboard_filtered_search/filtered_search.vue';
 import GroupSecurityDashboardNew from 'ee/security_dashboard/components/shared/group_security_dashboard_new.vue';
@@ -26,7 +26,7 @@ describe('Group Security Dashboard (new version) - Component', () => {
     });
   };
 
-  const findDashboardLayout = () => wrapper.findComponent(DashboardLayout);
+  const findDashboardLayout = () => wrapper.findComponent(GlDashboardLayout);
   const findFilteredSearch = () => wrapper.findComponent(FilteredSearch);
   const getDashboardConfig = () => findDashboardLayout().props('config');
   const getFirstPanel = () => getDashboardConfig().panels[0];
diff --git a/ee/spec/frontend/security_dashboard/components/shared/project_security_dashboard_new_spec.js b/ee/spec/frontend/security_dashboard/components/shared/project_security_dashboard_new_spec.js
index 1280a0e3a0298c3b2c02151e91b3d21496f1ad17..503ded9c7ada079c4a3cc280fa4abd6e3d68e8c7 100644
--- a/ee/spec/frontend/security_dashboard/components/shared/project_security_dashboard_new_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/shared/project_security_dashboard_new_spec.js
@@ -1,5 +1,5 @@
+import { GlDashboardLayout } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import DashboardLayout from '~/vue_shared/components/customizable_dashboard/dashboard_layout.vue';
 import ProjectSecurityDashboardNew from 'ee/security_dashboard/components/shared/project_security_dashboard_new.vue';
 import ProjectVulnerabilitiesOverTimePanel from 'ee/security_dashboard/components/shared/project_vulnerabilities_over_time_panel.vue';
 
@@ -18,7 +18,7 @@ describe('Project Security Dashboard (new version) - Component', () => {
     });
   };
 
-  const findDashboardLayout = () => wrapper.findComponent(DashboardLayout);
+  const findDashboardLayout = () => wrapper.findComponent(GlDashboardLayout);
   const getDashboardConfig = () => findDashboardLayout().props('config');
   const getFirstPanel = () => getDashboardConfig().panels[0];
 
diff --git a/ee/spec/frontend_integration/security_dashboard/__snapshots__/security_dashboard_init_integration_spec.js.snap b/ee/spec/frontend_integration/security_dashboard/__snapshots__/security_dashboard_init_integration_spec.js.snap
index 6a9fec09e5b88a533bd62a4db3d545dedb137656..d1f6937d6f48c5becd7811f61bdfc2067a765746 100644
--- a/ee/spec/frontend_integration/security_dashboard/__snapshots__/security_dashboard_init_integration_spec.js.snap
+++ b/ee/spec/frontend_integration/security_dashboard/__snapshots__/security_dashboard_init_integration_spec.js.snap
@@ -235,51 +235,52 @@ exports[`Security Dashboard default states sets up group-level with \`groupSecur
           >
             <div
               class="grid-stack-item-content"
-            />
-          </div>
-          <div
-            class="gl-h-full"
-            data-testid="grid-stack-panel"
-            id="reference-0"
-          >
-            <div
-              class="!gl-overflow-visible gl-bg-white gl-border gl-h-full gl-p-4 gl-rounded-base grid-stack-item-content"
-              id="reference-1"
             >
               <div
-                class="gl-flex gl-flex-col gl-h-full"
+                class="gl-h-full"
+                data-testid="gridstack-panel"
+                id="reference-0"
               >
                 <div
-                  class="gl-flex gl-items-start gl-justify-between"
-                  data-testid="panel-title"
+                  class="!gl-overflow-visible gl-bg-white gl-border gl-h-full gl-p-4 gl-rounded-base grid-stack-item-content"
+                  id="reference-1"
                 >
                   <div
-                    class="gl-flex gl-items-center gl-overflow-hidden gl-pb-3"
+                    class="gl-flex gl-flex-col gl-h-full"
                   >
-                    <span
-                      class="gl-font-bold gl-text-default gl-truncate-component"
-                      data-testid="truncate-end-container"
-                      title="Vulnerabilities over time"
+                    <div
+                      class="gl-flex gl-items-start gl-justify-between"
+                      data-testid="panel-title"
                     >
-                      <span
-                        class="gl-truncate-end"
+                      <div
+                        class="gl-flex gl-items-center gl-overflow-hidden gl-pb-3"
                       >
-                        Vulnerabilities over time
-                      </span>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="gl-content-center gl-flex gl-flex-wrap gl-text-center"
-                >
-                  <div
-                    aria-label="Loading"
-                    class="gl-min-h-8 gl-spinner-container gl-w-full"
-                    role="status"
-                  >
-                    <span
-                      class="!gl-align-text-bottom gl-spinner gl-spinner-dark gl-spinner-lg"
-                    />
+                        <span
+                          class="gl-font-bold gl-text-default gl-truncate-component"
+                          data-testid="truncate-end-container"
+                          title="Vulnerabilities over time"
+                        >
+                          <span
+                            class="gl-truncate-end"
+                          >
+                            Vulnerabilities over time
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                    <div
+                      class="gl-content-center gl-flex gl-flex-wrap gl-text-center"
+                    >
+                      <div
+                        aria-label="Loading"
+                        class="gl-min-h-8 gl-spinner-container gl-w-full"
+                        role="status"
+                      >
+                        <span
+                          class="!gl-align-text-bottom gl-spinner gl-spinner-dark gl-spinner-lg"
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -521,51 +522,52 @@ exports[`Security Dashboard default states sets up project-level with \`projectS
           >
             <div
               class="grid-stack-item-content"
-            />
-          </div>
-          <div
-            class="gl-h-full"
-            data-testid="grid-stack-panel"
-            id="reference-0"
-          >
-            <div
-              class="!gl-overflow-visible gl-bg-white gl-border gl-h-full gl-p-4 gl-rounded-base grid-stack-item-content"
-              id="reference-1"
             >
               <div
-                class="gl-flex gl-flex-col gl-h-full"
+                class="gl-h-full"
+                data-testid="gridstack-panel"
+                id="reference-0"
               >
                 <div
-                  class="gl-flex gl-items-start gl-justify-between"
-                  data-testid="panel-title"
+                  class="!gl-overflow-visible gl-bg-white gl-border gl-h-full gl-p-4 gl-rounded-base grid-stack-item-content"
+                  id="reference-1"
                 >
                   <div
-                    class="gl-flex gl-items-center gl-overflow-hidden gl-pb-3"
+                    class="gl-flex gl-flex-col gl-h-full"
                   >
-                    <span
-                      class="gl-font-bold gl-text-default gl-truncate-component"
-                      data-testid="truncate-end-container"
-                      title="Vulnerabilities over time"
+                    <div
+                      class="gl-flex gl-items-start gl-justify-between"
+                      data-testid="panel-title"
                     >
-                      <span
-                        class="gl-truncate-end"
+                      <div
+                        class="gl-flex gl-items-center gl-overflow-hidden gl-pb-3"
                       >
-                        Vulnerabilities over time
-                      </span>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="gl-content-center gl-flex gl-flex-wrap gl-text-center"
-                >
-                  <div
-                    aria-label="Loading"
-                    class="gl-min-h-8 gl-spinner-container gl-w-full"
-                    role="status"
-                  >
-                    <span
-                      class="!gl-align-text-bottom gl-spinner gl-spinner-dark gl-spinner-lg"
-                    />
+                        <span
+                          class="gl-font-bold gl-text-default gl-truncate-component"
+                          data-testid="truncate-end-container"
+                          title="Vulnerabilities over time"
+                        >
+                          <span
+                            class="gl-truncate-end"
+                          >
+                            Vulnerabilities over time
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                    <div
+                      class="gl-content-center gl-flex gl-flex-wrap gl-text-center"
+                    >
+                      <div
+                        aria-label="Loading"
+                        class="gl-min-h-8 gl-spinner-container gl-w-full"
+                        role="status"
+                      >
+                        <span
+                          class="!gl-align-text-bottom gl-spinner gl-spinner-dark gl-spinner-lg"
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/spec/frontend/vue_shared/components/customizable_dashboard/dashboard_layout_spec.js b/spec/frontend/vue_shared/components/customizable_dashboard/dashboard_layout_spec.js
deleted file mode 100644
index de5640210a16ec3015852c119cd2cafa253ddf41..0000000000000000000000000000000000000000
--- a/spec/frontend/vue_shared/components/customizable_dashboard/dashboard_layout_spec.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import DashboardLayout from '~/vue_shared/components/customizable_dashboard/dashboard_layout.vue';
-import GridstackWrapper from '~/vue_shared/components/customizable_dashboard/gridstack_wrapper.vue';
-
-const dashboardConfig = {
-  title: 'Dashboard title',
-  description: 'This is my dashboard description',
-  panels: [
-    {
-      id: '1',
-      title: 'A dashboard panel',
-      gridAttributes: {
-        width: 6,
-        height: 1,
-        yPos: 0,
-        xPos: 3,
-      },
-    },
-  ],
-};
-
-describe('CustomizableDashboard', () => {
-  /** @type {import('helpers/vue_test_utils_helper').ExtendedWrapper} */
-  let wrapper;
-
-  const findTitle = () => wrapper.findByTestId('title');
-  const findDescription = () => wrapper.findByTestId('description');
-  const findActionsContainer = () => wrapper.findByTestId('actions-container');
-  const findFiltersContainer = () => wrapper.findByTestId('filters-container');
-  const findGrid = () => wrapper.findComponent(GridstackWrapper);
-
-  const panelSlotSpy = jest.fn();
-  const emptyStateSlotSpy = jest.fn();
-
-  const createWrapper = (props = {}, scopedSlots = {}) => {
-    wrapper = shallowMountExtended(DashboardLayout, {
-      propsData: {
-        config: dashboardConfig,
-        ...props,
-      },
-      scopedSlots: {
-        panel: panelSlotSpy,
-        'empty-state': emptyStateSlotSpy,
-        ...scopedSlots,
-      },
-    });
-  };
-
-  afterEach(() => {
-    panelSlotSpy.mockRestore();
-    emptyStateSlotSpy.mockRestore();
-  });
-
-  describe('default behaviour', () => {
-    beforeEach(() => {
-      createWrapper();
-    });
-
-    it('renders the dashboard title', () => {
-      expect(findTitle().text()).toContain('Dashboard title');
-    });
-
-    it('renders the dashboard description', () => {
-      expect(findDescription().text()).toContain('This is my dashboard description');
-    });
-
-    it('renders the dashboard grid with the config', () => {
-      expect(findGrid().props('value')).toMatchObject(dashboardConfig);
-    });
-
-    it('renders the panel slot for each panel', () => {
-      expect(panelSlotSpy).toHaveBeenCalledTimes(dashboardConfig.panels.length);
-    });
-
-    it('does not render the empty state', () => {
-      expect(emptyStateSlotSpy).not.toHaveBeenCalled();
-    });
-
-    it('does not render the filter or actions containers', () => {
-      expect(findFiltersContainer().exists()).toBe(false);
-      expect(findActionsContainer().exists()).toBe(false);
-    });
-  });
-
-  describe('when a dashboard has no panels', () => {
-    beforeEach(() => {
-      createWrapper({
-        config: {
-          ...dashboardConfig,
-          panels: undefined,
-        },
-      });
-    });
-
-    it('does not render the dashboard grid', () => {
-      expect(findGrid().exists()).toBe(false);
-    });
-
-    it('renders the empty state', () => {
-      expect(emptyStateSlotSpy).toHaveBeenCalled();
-    });
-  });
-
-  describe('when a dashboard has no description', () => {
-    beforeEach(() => {
-      createWrapper({
-        config: {
-          ...dashboardConfig,
-          description: undefined,
-        },
-      });
-    });
-
-    it('does not render the dashboard description', () => {
-      expect(findDescription().exists()).toBe(false);
-    });
-  });
-
-  describe('when a dashboard has title and description slots', () => {
-    const titleSlotSpy = jest.fn();
-    const descriptionSlotSpy = jest.fn();
-
-    beforeEach(() => {
-      createWrapper(
-        {},
-        {
-          title() {
-            titleSlotSpy();
-            return this.$createElement('div');
-          },
-          description() {
-            descriptionSlotSpy();
-            return this.$createElement('div');
-          },
-        },
-      );
-    });
-
-    afterEach(() => {
-      titleSlotSpy.mockRestore();
-      descriptionSlotSpy.mockRestore();
-    });
-
-    it('renders the title slot and not the config title', () => {
-      expect(titleSlotSpy).toHaveBeenCalled();
-      expect(findTitle().exists()).toBe(false);
-    });
-
-    it('renders the description slot and not the config description', () => {
-      expect(descriptionSlotSpy).toHaveBeenCalled();
-      expect(findDescription().exists()).toBe(false);
-    });
-  });
-
-  describe('when a dashboard has actions slot content', () => {
-    beforeEach(() => {
-      createWrapper({}, { actions: '<div>actions</div>' });
-    });
-
-    it('renders the action slots', () => {
-      expect(findActionsContainer().exists()).toBe(true);
-    });
-  });
-
-  describe('when a dashboard has filters slot content', () => {
-    beforeEach(() => {
-      createWrapper({}, { filters: '<div>filters</div>' });
-    });
-
-    it('renders the filters container', () => {
-      expect(findFiltersContainer().exists()).toBe(true);
-    });
-  });
-});