diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index 405339b3d365cf229dc3a8e3c683d9a412fe9acf..b7d496db137e9d14750d1d4010cf1451d8d5f87f 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -17,7 +17,7 @@ export default {
   inject: [
     'emptyStateImage',
     'projectPath',
-    'agentDocsUrl',
+    'multipleClustersDocsUrl',
     'installDocsUrl',
     'getStartedDocsUrl',
     'integrationDocsUrl',
@@ -27,6 +27,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
   },
   computed: {
     repositoryPath() {
@@ -37,22 +42,29 @@ export default {
 </script>
 
 <template>
-  <gl-empty-state
-    :svg-path="emptyStateImage"
-    :title="s__('ClusterAgents|Integrate Kubernetes with a GitLab Agent')"
-    class="empty-state--agent"
-  >
+  <gl-empty-state :svg-path="emptyStateImage" title="" class="empty-state--agent">
     <template #description>
-      <p class="mw-460 gl-mx-auto">
+      <p class="mw-460 gl-mx-auto gl-text-left">
+        {{
+          s__(
+            'ClusterAgents|Use GitLab Agents to more securely integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more.',
+          )
+        }}
+      </p>
+      <p class="mw-460 gl-mx-auto gl-text-left">
         <gl-sprintf
           :message="
             s__(
-              'ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}',
+              'ClusterAgents|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
             )
           "
         >
           <template #link="{ content }">
-            <gl-link :href="agentDocsUrl" target="_blank" data-testid="agent-docs-link">
+            <gl-link
+              :href="multipleClustersDocsUrl"
+              target="_blank"
+              data-testid="multiple-clusters-docs-link"
+            >
               {{ content }}
             </gl-link>
           </template>
@@ -60,19 +72,9 @@ export default {
       </p>
 
       <p class="mw-460 gl-mx-auto">
-        <gl-sprintf
-          :message="
-            s__(
-              'ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}',
-            )
-          "
-        >
-          <template #link="{ content }">
-            <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
-              {{ content }}
-            </gl-link>
-          </template>
-        </gl-sprintf>
+        <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
+          {{ s__('ClusterAgents|Learn more about the GitLab Kubernetes Agent.') }}
+        </gl-link>
       </p>
 
       <gl-alert
@@ -106,11 +108,12 @@ export default {
 
     <template #actions>
       <gl-button
+        v-if="!childComponent"
         v-gl-modal-directive="$options.modalId"
         :disabled="!hasConfigurations"
         data-testid="integration-primary-button"
         category="primary"
-        variant="success"
+        variant="confirm"
       >
         {{ s__('ClusterAgents|Integrate with the GitLab Agent') }}
       </gl-button>
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 487e512c06d50fb379ac5c7368ed138297c45530..c31778ffdde56c238c5fa3780294d01a2e3e9707 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -1,22 +1,12 @@
 <script>
-import {
-  GlButton,
-  GlLink,
-  GlModalDirective,
-  GlTable,
-  GlIcon,
-  GlSprintf,
-  GlTooltip,
-  GlPopover,
-} from '@gitlab/ui';
+import { GlLink, GlTable, GlIcon, GlSprintf, GlTooltip, GlPopover } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import { INSTALL_AGENT_MODAL_ID, AGENT_STATUSES, TROUBLESHOOTING_LINK } from '../constants';
+import { AGENT_STATUSES, TROUBLESHOOTING_LINK } from '../constants';
 
 export default {
   components: {
-    GlButton,
     GlLink,
     GlTable,
     GlIcon,
@@ -25,12 +15,8 @@ export default {
     GlPopover,
     TimeAgoTooltip,
   },
-  directives: {
-    GlModalDirective,
-  },
   mixins: [timeagoMixin],
   inject: ['integrationDocsUrl'],
-  INSTALL_AGENT_MODAL_ID,
   AGENT_STATUSES,
   TROUBLESHOOTING_LINK,
   props: {
@@ -45,18 +31,22 @@ export default {
         {
           key: 'name',
           label: s__('ClusterAgents|Name'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'status',
           label: s__('ClusterAgents|Connection status'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'lastContact',
           label: s__('ClusterAgents|Last contact'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'configuration',
           label: s__('ClusterAgents|Configuration'),
+          tdClass: 'gl-py-5!',
         },
       ];
     },
@@ -65,88 +55,78 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div class="gl-display-block gl-text-right gl-my-3">
-      <gl-button
-        v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-        variant="confirm"
-        category="primary"
-        >{{ s__('ClusterAgents|Install a new GitLab Agent') }}
-      </gl-button>
-    </div>
-
-    <gl-table
-      :items="agents"
-      :fields="fields"
-      stacked="md"
-      head-variant="white"
-      thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
-      data-testid="cluster-agent-list-table"
-    >
-      <template #cell(name)="{ item }">
-        <gl-link :href="item.webPath" data-testid="cluster-agent-name-link">
-          {{ item.name }}
-        </gl-link>
-      </template>
+  <gl-table
+    :items="agents"
+    :fields="fields"
+    stacked="md"
+    head-variant="white"
+    thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
+    class="gl-mb-4!"
+    data-testid="cluster-agent-list-table"
+  >
+    <template #cell(name)="{ item }">
+      <gl-link :href="item.webPath" data-testid="cluster-agent-name-link">
+        {{ item.name }}
+      </gl-link>
+    </template>
 
-      <template #cell(status)="{ item }">
-        <span
-          :id="`connection-status-${item.name}`"
-          class="gl-pr-5"
-          data-testid="cluster-agent-connection-status"
-        >
-          <span :class="$options.AGENT_STATUSES[item.status].class" class="gl-mr-3">
-            <gl-icon :name="$options.AGENT_STATUSES[item.status].icon" :size="12" /></span
-          >{{ $options.AGENT_STATUSES[item.status].name }}
-        </span>
-        <gl-tooltip
-          v-if="item.status === 'active'"
-          :target="`connection-status-${item.name}`"
-          placement="right"
-        >
-          <gl-sprintf :message="$options.AGENT_STATUSES[item.status].tooltip.title"
-            ><template #timeAgo>{{ timeFormatted(item.lastContact) }}</template>
-          </gl-sprintf>
-        </gl-tooltip>
-        <gl-popover
-          v-else
-          :target="`connection-status-${item.name}`"
-          :title="$options.AGENT_STATUSES[item.status].tooltip.title"
-          placement="right"
-          container="viewport"
-        >
-          <p>
-            <gl-sprintf :message="$options.AGENT_STATUSES[item.status].tooltip.body"
-              ><template #timeAgo>{{ timeFormatted(item.lastContact) }}</template></gl-sprintf
-            >
-          </p>
-          <p class="gl-mb-0">
-            {{ s__('ClusterAgents|For more troubleshooting information go to') }}
-            <gl-link :href="$options.TROUBLESHOOTING_LINK" target="_blank" class="gl-font-sm">
-              {{ $options.TROUBLESHOOTING_LINK }}</gl-link
-            >
-          </p>
-        </gl-popover>
-      </template>
+    <template #cell(status)="{ item }">
+      <span
+        :id="`connection-status-${item.name}`"
+        class="gl-md-pr-5"
+        data-testid="cluster-agent-connection-status"
+      >
+        <span :class="$options.AGENT_STATUSES[item.status].class" class="gl-mr-3">
+          <gl-icon :name="$options.AGENT_STATUSES[item.status].icon" :size="12" /></span
+        >{{ $options.AGENT_STATUSES[item.status].name }}
+      </span>
+      <gl-tooltip
+        v-if="item.status === 'active'"
+        :target="`connection-status-${item.name}`"
+        placement="right"
+      >
+        <gl-sprintf :message="$options.AGENT_STATUSES[item.status].tooltip.title"
+          ><template #timeAgo>{{ timeFormatted(item.lastContact) }}</template>
+        </gl-sprintf>
+      </gl-tooltip>
+      <gl-popover
+        v-else
+        :target="`connection-status-${item.name}`"
+        :title="$options.AGENT_STATUSES[item.status].tooltip.title"
+        placement="right"
+        container="viewport"
+      >
+        <p>
+          <gl-sprintf :message="$options.AGENT_STATUSES[item.status].tooltip.body"
+            ><template #timeAgo>{{ timeFormatted(item.lastContact) }}</template></gl-sprintf
+          >
+        </p>
+        <p class="gl-mb-0">
+          {{ s__('ClusterAgents|For more troubleshooting information go to') }}
+          <gl-link :href="$options.TROUBLESHOOTING_LINK" target="_blank" class="gl-font-sm">
+            {{ $options.TROUBLESHOOTING_LINK }}</gl-link
+          >
+        </p>
+      </gl-popover>
+    </template>
 
-      <template #cell(lastContact)="{ item }">
-        <span data-testid="cluster-agent-last-contact">
-          <time-ago-tooltip v-if="item.lastContact" :time="item.lastContact" />
-          <span v-else>{{ s__('ClusterAgents|Never') }}</span>
-        </span>
-      </template>
+    <template #cell(lastContact)="{ item }">
+      <span data-testid="cluster-agent-last-contact">
+        <time-ago-tooltip v-if="item.lastContact" :time="item.lastContact" />
+        <span v-else>{{ s__('ClusterAgents|Never') }}</span>
+      </span>
+    </template>
 
-      <template #cell(configuration)="{ item }">
-        <span data-testid="cluster-agent-configuration-link">
-          <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
-          <gl-link v-if="item.configFolder" :href="item.configFolder.webPath">
-            .gitlab/agents/{{ item.name }}
-          </gl-link>
+    <template #cell(configuration)="{ item }">
+      <span data-testid="cluster-agent-configuration-link">
+        <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+        <gl-link v-if="item.configFolder" :href="item.configFolder.webPath">
+          .gitlab/agents/{{ item.name }}
+        </gl-link>
 
-          <span v-else>.gitlab/agents/{{ item.name }}</span>
-          <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
-        </span>
-      </template>
-    </gl-table>
-  </div>
+        <span v-else>.gitlab/agents/{{ item.name }}</span>
+        <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
+      </span>
+    </template>
+  </gl-table>
 </template>
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index ed44c1f5fa795da02922ed1b8747c524bf5762e3..2834c7272ee3f7dde021511bbe1d4a2203436555 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -2,9 +2,9 @@
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
 import { MAX_LIST_COUNT, ACTIVE_CONNECTION_TIME } from '../constants';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
+import eventHub from '../eventhub';
 import AgentEmptyState from './agent_empty_state.vue';
 import AgentTable from './agent_table.vue';
-import InstallAgentModal from './install_agent_modal.vue';
 
 export default {
   apollo: {
@@ -21,12 +21,14 @@ export default {
         this.updateTreeList(data);
         return data;
       },
+      result() {
+        this.emitAgentsLoaded();
+      },
     },
   },
   components: {
     AgentEmptyState,
     AgentTable,
-    InstallAgentModal,
     GlAlert,
     GlKeysetPagination,
     GlLoadingIcon,
@@ -38,11 +40,21 @@ export default {
       required: false,
       type: String,
     },
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    limit: {
+      default: null,
+      required: false,
+      type: Number,
+    },
   },
   data() {
     return {
       cursor: {
-        first: MAX_LIST_COUNT,
+        first: this.limit ? this.limit : MAX_LIST_COUNT,
         last: null,
       },
       folderList: {},
@@ -70,7 +82,7 @@ export default {
       return this.$apollo.queries.agents.loading;
     },
     showPagination() {
-      return this.agentPageInfo.hasPreviousPage || this.agentPageInfo.hasNextPage;
+      return !this.limit && (this.agentPageInfo.hasPreviousPage || this.agentPageInfo.hasNextPage);
     },
     treePageInfo() {
       return this.agents?.project?.repository?.tree?.trees?.pageInfo || {};
@@ -79,6 +91,9 @@ export default {
       return Boolean(this.agents?.project?.repository?.tree?.trees?.nodes?.length);
     },
   },
+  mounted() {
+    eventHub.$on('agentRegistered', this.reloadAgents);
+  },
   methods: {
     reloadAgents() {
       this.$apollo.queries.agents.refetch();
@@ -130,14 +145,18 @@ export default {
       }
       return 'unused';
     },
+    emitAgentsLoaded() {
+      const count = this.agents?.project?.clusterAgents?.count;
+      this.$emit('onAgentsLoad', count);
+    },
   },
 };
 </script>
 
 <template>
-  <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" />
+  <gl-loading-icon v-if="isLoading" size="md" />
 
-  <section v-else-if="agentList" class="gl-mt-3">
+  <section v-else-if="agentList">
     <div v-if="agentList.length">
       <AgentTable :agents="agentList" />
 
@@ -146,8 +165,11 @@ export default {
       </div>
     </div>
 
-    <AgentEmptyState v-else :has-configurations="hasConfigurations" />
-    <InstallAgentModal @agentRegistered="reloadAgents" />
+    <AgentEmptyState
+      v-else
+      :has-configurations="hasConfigurations"
+      :child-component="childComponent"
+    />
   </section>
 
   <gl-alert v-else variant="danger" :dismissible="false">
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 0d1534d20e066cc97404a359d9005a249af3c84f..6ea87588e4bfe0f9f18f3980fba858e862ce3e07 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -14,6 +14,7 @@ import { __, sprintf } from '~/locale';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import AncestorNotice from './ancestor_notice.vue';
 import NodeErrorHelpText from './node_error_help_text.vue';
+import ClustersEmptyState from './clusters_empty_state.vue';
 
 export default {
   nodeMemoryText: __('%{totalMemory} (%{freeSpacePercentage}%{percentSymbol} free)'),
@@ -28,10 +29,23 @@ export default {
     GlSprintf,
     GlTable,
     NodeErrorHelpText,
+    ClustersEmptyState,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  props: {
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    limit: {
+      default: null,
+      required: false,
+      type: Number,
+    },
+  },
   computed: {
     ...mapState([
       'clusters',
@@ -40,7 +54,7 @@ export default {
       'loadingNodes',
       'page',
       'providers',
-      'totalCulsters',
+      'totalClusters',
     ]),
     contentAlignClasses() {
       return 'gl-display-flex gl-align-items-center gl-justify-content-end gl-justify-content-md-start';
@@ -59,39 +73,52 @@ export default {
         {
           key: 'name',
           label: __('Kubernetes cluster'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'environment_scope',
           label: __('Environment scope'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'node_size',
           label: __('Nodes'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'total_cpu',
           label: __('Total cores (CPUs)'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'total_memory',
           label: __('Total memory (GB)'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'cluster_type',
           label: __('Cluster level'),
+          tdClass: 'gl-py-5!',
           formatter: (value) => CLUSTER_TYPES[value],
         },
       ];
     },
-    hasClusters() {
+    hasClustersPerPage() {
       return this.clustersPerPage > 0;
     },
+    hasClusters() {
+      return this.totalClusters > 0;
+    },
   },
   mounted() {
+    if (this.limit) {
+      this.setClustersPerPage(this.limit);
+    }
+
     this.fetchClusters();
   },
   methods: {
-    ...mapActions(['fetchClusters', 'reportSentryError', 'setPage']),
+    ...mapActions(['fetchClusters', 'reportSentryError', 'setPage', 'setClustersPerPage']),
     k8sQuantityToGb(quantity) {
       if (!quantity) {
         return 0;
@@ -196,18 +223,20 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="loadingClusters" size="md" class="gl-mt-3" />
+  <gl-loading-icon v-if="loadingClusters" size="md" />
 
   <section v-else>
     <ancestor-notice />
 
     <gl-table
+      v-if="hasClusters"
       :items="clusters"
       :fields="fields"
+      fixed
       stacked="md"
       head-variant="white"
-      thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
-      class="qa-clusters-table"
+      thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
+      class="qa-clusters-table gl-mb-4!"
       data-testid="cluster_list_table"
     >
       <template #cell(name)="{ item }">
@@ -298,11 +327,13 @@ export default {
       </template>
     </gl-table>
 
+    <ClustersEmptyState v-else :child-component="childComponent" />
+
     <gl-pagination
-      v-if="hasClusters"
+      v-if="hasClustersPerPage && !limit"
       v-model="currentPage"
       :per-page="clustersPerPage"
-      :total-items="totalCulsters"
+      :total-items="totalClusters"
       :prev-text="__('Prev')"
       :next-text="__('Next')"
       align="center"
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c7cb3afc16db01c552fe2f4036d21b2d8dd5b8b8
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -0,0 +1,44 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlModalDirective } from '@gitlab/ui';
+import { AGENT_CARD_INFO, INSTALL_AGENT_MODAL_ID } from '../constants';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  inject: ['newClusterPath', 'addClusterPath'],
+  AGENT_CARD_INFO,
+  INSTALL_AGENT_MODAL_ID,
+};
+</script>
+
+<template>
+  <div class="nav-controls gl-ml-auto">
+    <gl-dropdown
+      ref="dropdown"
+      v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
+      category="primary"
+      variant="confirm"
+      :text="s__('ClusterAgents|Actions')"
+      split
+      right
+    >
+      <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link">
+        {{ s__('ClusterAgents|Create new cluster') }}
+      </gl-dropdown-item>
+      <gl-dropdown-item
+        v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
+        data-testid="connect-new-agent-link"
+      >
+        {{ s__('ClusterAgents|Connect with Agent') }}
+      </gl-dropdown-item>
+      <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link">
+        {{ s__('ClusterAgents|Connect with certificate') }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+  </div>
+</template>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
new file mode 100644
index 0000000000000000000000000000000000000000..455eb4f4c527c78f9ff51869c7df21d272cc4ef9
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -0,0 +1,79 @@
+<script>
+import { GlEmptyState, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
+import { mapState } from 'vuex';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  components: {
+    GlEmptyState,
+    GlButton,
+    GlLink,
+    GlSprintf,
+  },
+  inject: ['clustersEmptyStateImage', 'newClusterPath'],
+  props: {
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+  },
+  learnMoreHelpUrl: helpPagePath('user/project/clusters/index'),
+  multipleClustersHelpUrl: helpPagePath('user/project/clusters/multiple_kubernetes_clusters'),
+  computed: {
+    ...mapState(['canAddCluster']),
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state :svg-path="clustersEmptyStateImage" title="">
+    <template #description>
+      <p class="mw-460 gl-mx-auto gl-text-left">
+        {{
+          s__(
+            'ClusterIntegration|Use certificates to integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more in an easy way.',
+          )
+        }}
+      </p>
+      <p class="mw-460 gl-mx-auto gl-text-left">
+        <gl-sprintf
+          :message="
+            s__(
+              'ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
+            )
+          "
+        >
+          <template #link="{ content }">
+            <gl-link
+              :href="$options.multipleClustersHelpUrl"
+              target="_blank"
+              data-testid="multiple-clusters-docs-link"
+            >
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
+      <p class="mw-460 gl-mx-auto">
+        <gl-link :href="$options.learnMoreHelpUrl" target="_blank" data-testid="clusters-docs-link">
+          {{ s__('ClusterIntegration|Learn more about the GitLab managed clusters') }}
+        </gl-link>
+      </p>
+    </template>
+
+    <template #actions>
+      <gl-button
+        v-if="!childComponent"
+        data-testid="integration-primary-button"
+        data-qa-selector="add_kubernetes_cluster_link"
+        category="primary"
+        variant="confirm"
+        :disabled="!canAddCluster"
+        :href="newClusterPath"
+      >
+        {{ s__('ClusterIntegration|Integrate with a cluster certificate') }}
+      </gl-button>
+    </template>
+  </gl-empty-state>
+</template>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5f8d5569a596ec0a05c8d7194d999eecc275a455
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
@@ -0,0 +1,70 @@
+<script>
+import { GlTabs, GlTab } from '@gitlab/ui';
+import { CLUSTERS_TABS } from '../constants';
+import Agents from './agents.vue';
+import InstallAgentModal from './install_agent_modal.vue';
+import ClustersActions from './clusters_actions.vue';
+import Clusters from './clusters.vue';
+import ClustersViewAll from './clusters_view_all.vue';
+
+export default {
+  components: {
+    GlTabs,
+    GlTab,
+    ClustersActions,
+    ClustersViewAll,
+    Clusters,
+    Agents,
+    InstallAgentModal,
+  },
+  CLUSTERS_TABS,
+  props: {
+    defaultBranchName: {
+      default: '.noBranch',
+      required: false,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      selectedTabIndex: 0,
+    };
+  },
+  methods: {
+    onTabChange(tabName) {
+      this.selectedTabIndex = CLUSTERS_TABS.findIndex((tab) => tab.queryParamValue === tabName);
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-tabs
+      v-model="selectedTabIndex"
+      sync-active-tab-with-query-params
+      nav-class="gl-flex-grow-1 gl-align-items-center"
+      lazy
+    >
+      <gl-tab
+        v-for="(tab, idx) in $options.CLUSTERS_TABS"
+        :key="idx"
+        :title="tab.title"
+        :query-param-value="tab.queryParamValue"
+        class="gl-line-height-20 gl-mt-5"
+      >
+        <component
+          :is="tab.component"
+          :default-branch-name="defaultBranchName"
+          data-testid="clusters-tab-component"
+          @changeTab="onTabChange"
+        />
+      </gl-tab>
+
+      <template #tabs-end>
+        <ClustersActions />
+      </template>
+    </gl-tabs>
+
+    <install-agent-modal />
+  </div>
+</template>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
new file mode 100644
index 0000000000000000000000000000000000000000..21d67ff949102cb3cdb2ae89ecd9c0c8aa0c11c5
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -0,0 +1,210 @@
+<script>
+import {
+  GlCard,
+  GlSprintf,
+  GlPopover,
+  GlLink,
+  GlButton,
+  GlLoadingIcon,
+  GlModalDirective,
+} from '@gitlab/ui';
+import { mapState } from 'vuex';
+import { sprintf } from '~/locale';
+import {
+  AGENT_CARD_INFO,
+  CERTIFICATE_BASED_CARD_INFO,
+  MAX_CLUSTERS_LIST,
+  INSTALL_AGENT_MODAL_ID,
+} from '../constants';
+import Clusters from './clusters.vue';
+import Agents from './agents.vue';
+
+export default {
+  components: {
+    GlCard,
+    GlSprintf,
+    GlPopover,
+    GlLink,
+    GlButton,
+    GlLoadingIcon,
+    Clusters,
+    Agents,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  AGENT_CARD_INFO,
+  CERTIFICATE_BASED_CARD_INFO,
+  MAX_CLUSTERS_LIST,
+  INSTALL_AGENT_MODAL_ID,
+  inject: ['addClusterPath'],
+  props: {
+    defaultBranchName: {
+      default: '.noBranch',
+      required: false,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      loadingAgents: true,
+      totalAgents: null,
+    };
+  },
+  computed: {
+    ...mapState(['loadingClusters', 'totalClusters']),
+    isLoading() {
+      return this.loadingAgents || this.loadingClusters;
+    },
+  },
+  methods: {
+    cardTitle(card) {
+      let clustersNumber;
+      let title;
+      let emptyTitle;
+      let cardTitle;
+
+      if (card === 'agent') {
+        clustersNumber = this.totalAgents;
+        title = AGENT_CARD_INFO.title;
+        emptyTitle = AGENT_CARD_INFO.emptyTitle;
+      } else if (card === 'certificate_based') {
+        clustersNumber = this.totalClusters;
+        title = CERTIFICATE_BASED_CARD_INFO.title;
+        emptyTitle = CERTIFICATE_BASED_CARD_INFO.emptyTitle;
+      }
+      if (clustersNumber > 0) {
+        cardTitle = sprintf(title, {
+          number: clustersNumber < MAX_CLUSTERS_LIST ? clustersNumber : MAX_CLUSTERS_LIST,
+          total: clustersNumber,
+        });
+      } else {
+        cardTitle = emptyTitle;
+      }
+      return cardTitle;
+    },
+    cardFooterNumber(number) {
+      return number > MAX_CLUSTERS_LIST ? number : '';
+    },
+    onAgentsLoad(number) {
+      this.totalAgents = number;
+      this.loadingAgents = false;
+    },
+    changeTab($event, tab) {
+      $event.preventDefault();
+      this.$emit('changeTab', tab);
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-loading-icon v-if="isLoading" size="md" />
+    <div
+      data-testid="clusters-cards-container"
+      :class="{
+        'gl-display-none': isLoading,
+      }"
+    >
+      <gl-card
+        header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between gl-py-4"
+        body-class="gl-pb-0"
+        footer-class="gl-text-right"
+      >
+        <template #header>
+          <h3 data-testid="agent-card-title" class="gl-my-0 gl-font-weight-normal gl-font-size-h2">
+            {{ cardTitle('agent') }}
+          </h3>
+
+          <span
+            id="clusters-recommended-badge"
+            data-testid="clusters-recommended-badge"
+            class="btn button-recommended"
+            >{{ $options.AGENT_CARD_INFO.tooltip.label }}</span
+          >
+          <gl-popover
+            target="clusters-recommended-badge"
+            container="viewport"
+            placement="bottom"
+            :title="$options.AGENT_CARD_INFO.tooltip.title"
+          >
+            <p class="gl-mb-0">
+              <gl-sprintf :message="$options.AGENT_CARD_INFO.tooltip.text">
+                <template #link="{ content }">
+                  <gl-link
+                    :href="$options.AGENT_CARD_INFO.tooltip.link"
+                    target="_blank"
+                    class="gl-font-sm"
+                  >
+                    {{ content }}</gl-link
+                  >
+                </template>
+              </gl-sprintf>
+            </p>
+          </gl-popover>
+        </template>
+
+        <Agents
+          :limit="$options.MAX_CLUSTERS_LIST"
+          :default-branch-name="defaultBranchName"
+          :child-component="true"
+          @onAgentsLoad="onAgentsLoad"
+        />
+
+        <template #footer>
+          <gl-link
+            v-if="totalAgents"
+            data-testid="agents-tab-footer-link"
+            :href="`?tab=${$options.AGENT_CARD_INFO.tabName}`"
+            @click="changeTab($event, $options.AGENT_CARD_INFO.tabName)"
+            ><gl-sprintf :message="$options.AGENT_CARD_INFO.footerText"
+              ><template #number>{{ cardFooterNumber(totalAgents) }}</template></gl-sprintf
+            ></gl-link
+          ><gl-button
+            v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
+            class="gl-ml-4"
+            category="secondary"
+            variant="confirm"
+            >{{ $options.AGENT_CARD_INFO.actionText }}</gl-button
+          >
+        </template>
+      </gl-card>
+
+      <gl-card
+        class="gl-mt-6"
+        header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between"
+        body-class="gl-pb-0"
+        footer-class="gl-text-right"
+      >
+        <template #header>
+          <h3
+            class="gl-my-1 gl-font-weight-normal gl-font-size-h2"
+            data-testid="clusters-card-title"
+          >
+            {{ cardTitle('certificate_based') }}
+          </h3>
+        </template>
+
+        <Clusters :limit="$options.MAX_CLUSTERS_LIST" :child-component="true" />
+
+        <template #footer>
+          <gl-link
+            v-if="totalClusters"
+            data-testid="clusters-tab-footer-link"
+            :href="`?tab=${$options.CERTIFICATE_BASED_CARD_INFO.tabName}`"
+            @click="changeTab($event, $options.CERTIFICATE_BASED_CARD_INFO.tabName)"
+            ><gl-sprintf :message="$options.CERTIFICATE_BASED_CARD_INFO.footerText"
+              ><template #number>{{ cardFooterNumber(totalClusters) }}</template></gl-sprintf
+            ></gl-link
+          ><gl-button
+            category="secondary"
+            variant="confirm"
+            class="gl-ml-4"
+            :href="addClusterPath"
+            >{{ $options.CERTIFICATE_BASED_CARD_INFO.actionText }}</gl-button
+          >
+        </template>
+      </gl-card>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
index 5f192fe4d5a652984cca6130993592ae8b63b6ae..e487eed1981063772abc24743bb08ceb6756e650 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -15,6 +15,7 @@ import { generateAgentRegistrationCommand } from '../clusters_util';
 import { INSTALL_AGENT_MODAL_ID, I18N_INSTALL_AGENT_MODAL } from '../constants';
 import createAgent from '../graphql/mutations/create_agent.mutation.graphql';
 import createAgentToken from '../graphql/mutations/create_agent_token.mutation.graphql';
+import eventHub from '../eventhub';
 import AvailableAgentsDropdown from './available_agents_dropdown.vue';
 
 export default {
@@ -71,11 +72,11 @@ export default {
       this.$refs.modal.hide();
     },
     doneClicked() {
-      this.$emit('agentRegistered');
+      eventHub.$emit('agentRegistered');
       this.$refs.modal.hide();
     },
     resetModal() {
-      this.registering = null;
+      this.registering = false;
       this.agentName = null;
       this.agentToken = null;
       this.error = null;
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 0bade1fc281c73d8e42be6cd9905f87f96d3725b..094675a5667c916e2f1fa57eb6eb2b0cebaa74c5 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -1,4 +1,5 @@
 import { __, s__, sprintf } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export const MAX_LIST_COUNT = 25;
 export const INSTALL_AGENT_MODAL_ID = 'install-agent';
@@ -141,3 +142,51 @@ export const AGENT_STATUSES = {
     },
   },
 };
+
+export const AGENT_CARD_INFO = {
+  tabName: 'agent',
+  title: sprintf(s__('ClusterAgents|%{number} of %{total} Agent based integrations')),
+  emptyTitle: s__('ClusterAgents|No Agent based integrations'),
+  tooltip: {
+    label: s__('ClusterAgents|Recommended'),
+    title: s__('ClusterAgents|GitLab Agents'),
+    text: sprintf(
+      s__(
+        'ClusterAgents|GitLab Agents provide an increased level of security when integrating with clusters. %{linkStart}Learn more about the GitLab Kubernetes Agent.%{linkEnd}',
+      ),
+    ),
+    link: helpPagePath('user/clusters/agent/index'),
+  },
+  actionText: s__('ClusterAgents|Install new Agent'),
+  footerText: sprintf(s__('View all %{number} Agent based integrations')),
+};
+
+export const CERTIFICATE_BASED_CARD_INFO = {
+  tabName: 'certificate_based',
+  title: sprintf(s__('ClusterAgents|%{number} of %{total} Certificate based integrations')),
+  emptyTitle: s__('ClusterAgents|No Certificate based integrations'),
+  actionText: s__('ClusterAgents|Connect existing cluster'),
+  footerText: sprintf(s__('View all %{number} Certificate based integrations')),
+};
+
+export const MAX_CLUSTERS_LIST = 6;
+
+export const CLUSTERS_TABS = [
+  {
+    title: s__('ClusterAgents|All'),
+    component: 'ClustersViewAll',
+    queryParamValue: 'all',
+  },
+  {
+    title: s__('ClusterAgents|Agent'),
+    /* eslint-disable-next-line @gitlab/require-i18n-strings */
+    component: 'Agents',
+    queryParamValue: 'agent',
+  },
+  {
+    title: s__('ClusterAgents|Certificate based'),
+    /* eslint-disable-next-line @gitlab/require-i18n-strings */
+    component: 'Clusters',
+    queryParamValue: 'certificate_based',
+  },
+];
diff --git a/app/assets/javascripts/clusters_list/eventhub.js b/app/assets/javascripts/clusters_list/eventhub.js
new file mode 100644
index 0000000000000000000000000000000000000000..e31806ad199a1105985ed7045009d84e33856386
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/eventhub.js
@@ -0,0 +1,3 @@
+import createEventHub from '~/helpers/event_hub_factory';
+
+export default createEventHub();
diff --git a/app/assets/javascripts/clusters_list/graphql/queries/get_agents.query.graphql b/app/assets/javascripts/clusters_list/graphql/queries/get_agents.query.graphql
index 61989e00d9e3965c0b368266ddf5e01d095df910..56a82f17236de31f6df6bdb7e7c344059bc2da22 100644
--- a/app/assets/javascripts/clusters_list/graphql/queries/get_agents.query.graphql
+++ b/app/assets/javascripts/clusters_list/graphql/queries/get_agents.query.graphql
@@ -26,6 +26,8 @@ query getAgents(
       pageInfo {
         ...PageInfo
       }
+
+      count
     }
 
     repository {
diff --git a/app/assets/javascripts/clusters_list/index.js b/app/assets/javascripts/clusters_list/index.js
index de18965abbd9a0b39691843465b8b5578868b31a..7f1ef37814b073c8ad69db6db51a720bc60eaafd 100644
--- a/app/assets/javascripts/clusters_list/index.js
+++ b/app/assets/javascripts/clusters_list/index.js
@@ -1,11 +1,11 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import loadClusters from './load_clusters';
-import loadAgents from './load_agents';
+import loadMainView from './load_main_view';
 
 Vue.use(VueApollo);
 
 export default () => {
   loadClusters(Vue);
-  loadAgents(Vue, VueApollo);
+  loadMainView(Vue, VueApollo);
 };
diff --git a/app/assets/javascripts/clusters_list/load_agents.js b/app/assets/javascripts/clusters_list/load_agents.js
deleted file mode 100644
index b77d386df203bd94575cf755d4b9ff03367a160b..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/clusters_list/load_agents.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import createDefaultClient from '~/lib/graphql';
-import Agents from './components/agents.vue';
-
-export default (Vue, VueApollo) => {
-  const el = document.querySelector('#js-cluster-agents-list');
-
-  if (!el) {
-    return null;
-  }
-
-  const defaultClient = createDefaultClient({}, { assumeImmutableResults: true });
-
-  const {
-    emptyStateImage,
-    defaultBranchName,
-    projectPath,
-    agentDocsUrl,
-    installDocsUrl,
-    getStartedDocsUrl,
-    integrationDocsUrl,
-    kasAddress,
-  } = el.dataset;
-
-  return new Vue({
-    el,
-    apolloProvider: new VueApollo({ defaultClient }),
-    provide: {
-      emptyStateImage,
-      projectPath,
-      agentDocsUrl,
-      installDocsUrl,
-      getStartedDocsUrl,
-      integrationDocsUrl,
-      kasAddress,
-    },
-    render(createElement) {
-      return createElement(Agents, {
-        props: {
-          defaultBranchName,
-        },
-      });
-    },
-  });
-};
diff --git a/app/assets/javascripts/clusters_list/load_clusters.js b/app/assets/javascripts/clusters_list/load_clusters.js
index 014302308793c4daa703980b26a03cdd1990e38e..4cf48581d5705b0ab576760e9436d094bc9cce02 100644
--- a/app/assets/javascripts/clusters_list/load_clusters.js
+++ b/app/assets/javascripts/clusters_list/load_clusters.js
@@ -7,9 +7,14 @@ export default (Vue) => {
   if (!el) {
     return null;
   }
+  const { clustersEmptyStateImage, newClusterPath } = el.dataset;
 
   return new Vue({
     el,
+    provide: {
+      clustersEmptyStateImage,
+      newClusterPath,
+    },
     store: createStore(el.dataset),
     render(createElement) {
       return createElement(Clusters);
diff --git a/app/assets/javascripts/clusters_list/load_main_view.js b/app/assets/javascripts/clusters_list/load_main_view.js
new file mode 100644
index 0000000000000000000000000000000000000000..224683e29ea48f682b4777790b48f71538711d36
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/load_main_view.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import ClustersMainView from './components/clusters_main_view.vue';
+import { createStore } from './store';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
+});
+
+export default () => {
+  const el = document.querySelector('.js-clusters-main-view');
+
+  if (!el) {
+    return false;
+  }
+
+  const {
+    emptyStateImage,
+    defaultBranchName,
+    projectPath,
+    multipleClustersDocsUrl,
+    installDocsUrl,
+    getStartedDocsUrl,
+    integrationDocsUrl,
+    kasAddress,
+    newClusterPath,
+    addClusterPath,
+    clustersEmptyStateImage,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      emptyStateImage,
+      projectPath,
+      multipleClustersDocsUrl,
+      installDocsUrl,
+      getStartedDocsUrl,
+      integrationDocsUrl,
+      kasAddress,
+      newClusterPath,
+      addClusterPath,
+      clustersEmptyStateImage,
+    },
+    store: createStore(el.dataset),
+    render: (createElement) =>
+      createElement(ClustersMainView, {
+        props: {
+          defaultBranchName,
+        },
+      }),
+  });
+};
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index 5f35a0b26f3034ded8ef7fc69f426bc1dc2bf892..d70b36e63bc9b0df9555c9df8dfab45c2d0a3ffa 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -3,7 +3,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import Poll from '~/lib/utils/poll';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 import { MAX_REQUESTS } from '../constants';
 import * as types from './mutation_types';
 
@@ -30,7 +30,13 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
 
   const poll = new Poll({
     resource: {
-      fetchClusters: (paginatedEndPoint) => axios.get(paginatedEndPoint),
+      fetchClusters: (paginatedEndPoint) =>
+        axios.get(paginatedEndPoint, {
+          params: {
+            page: state.page,
+            per_page: state.clustersPerPage,
+          },
+        }),
     },
     data: `${state.endpoint}?page=${state.page}`,
     method: 'fetchClusters',
@@ -65,7 +71,7 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
       commit(types.SET_LOADING_CLUSTERS, false);
       commit(types.SET_LOADING_NODES, false);
       createFlash({
-        message: __('Clusters|An error occurred while loading clusters'),
+        message: s__('Clusters|An error occurred while loading clusters'),
       });
 
       dispatch('reportSentryError', { error: response, tag: 'fetchClustersErrorCallback' });
@@ -78,3 +84,7 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
 export const setPage = ({ commit }, page) => {
   commit(types.SET_PAGE, page);
 };
+
+export const setClustersPerPage = ({ commit }, limit) => {
+  commit(types.SET_CLUSTERS_PER_PAGE, limit);
+};
diff --git a/app/assets/javascripts/clusters_list/store/mutation_types.js b/app/assets/javascripts/clusters_list/store/mutation_types.js
index beb4388c93e3b6bc32445b22f8fad243803ea9bd..e88d4c74761784779ff24d425991f35b3058c2d8 100644
--- a/app/assets/javascripts/clusters_list/store/mutation_types.js
+++ b/app/assets/javascripts/clusters_list/store/mutation_types.js
@@ -2,3 +2,4 @@ export const SET_CLUSTERS_DATA = 'SET_CLUSTERS_DATA';
 export const SET_LOADING_CLUSTERS = 'SET_LOADING_CLUSTERS';
 export const SET_LOADING_NODES = 'SET_LOADING_NODES';
 export const SET_PAGE = 'SET_PAGE';
+export const SET_CLUSTERS_PER_PAGE = 'SET_CLUSTERS_PER_PAGE';
diff --git a/app/assets/javascripts/clusters_list/store/mutations.js b/app/assets/javascripts/clusters_list/store/mutations.js
index 5b46292851859481ad0b82faf28edaeffd2a7be2..93156c9200fbba770fa56207e5e60d89f513141b 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -12,10 +12,13 @@ export default {
       clusters: data.clusters,
       clustersPerPage: paginationInformation.perPage,
       hasAncestorClusters: data.has_ancestor_clusters,
-      totalCulsters: paginationInformation.total,
+      totalClusters: paginationInformation.total,
     });
   },
   [types.SET_PAGE](state, value) {
     state.page = Number(value) || 1;
   },
+  [types.SET_CLUSTERS_PER_PAGE](state, value) {
+    state.clustersPerPage = Number(value) || 1;
+  },
 };
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index 51fafd49479fbde625f8e3c1df19279eb69caa7f..763d7389d0f22dab284cb7659ada42abf2d7fb2b 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -1,9 +1,11 @@
+import { parseBoolean } from '~/lib/utils/common_utils';
+
 export default (initialState = {}) => ({
   ancestorHelperPath: initialState.ancestorHelpPath,
   endpoint: initialState.endpoint,
   hasAncestorClusters: false,
   clusters: [],
-  clustersPerPage: 0,
+  clustersPerPage: 20,
   loadingClusters: true,
   loadingNodes: true,
   page: 1,
@@ -12,5 +14,6 @@ export default (initialState = {}) => ({
     default: { path: initialState.imgTagsDefaultPath, text: initialState.imgTagsDefaultText },
     gcp: { path: initialState.imgTagsGcpPath, text: initialState.imgTagsGcpText },
   },
-  totalCulsters: 0,
+  totalClusters: 0,
+  canAddCluster: parseBoolean(initialState.canAddCluster),
 });
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index de27ca2e5e86e634b94200540f59fbd0352d85b9..cbf5448dd6f15c706a3cc65ea2459a22d66b5b81 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -1,6 +1,10 @@
 .clusters-container {
-  .empty-state .svg-content img {
-    width: 145px;
+  .empty-state .svg-content {
+    @include gl-pb-0;
+
+    img {
+      width: 100px;
+    }
   }
 
   .empty-state--agent {
@@ -16,4 +20,29 @@
       @include gl-flex-wrap;
     }
   }
+
+  .button-recommended {
+    @include gl-text-white;
+    background-color: $purple-500;
+    border-radius: $border-radius-large;
+  }
+
+  .gl-card-body {
+    @include media-breakpoint-up(sm) {
+      @include gl-pt-2;
+      min-height: 372px;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .nav-controls {
+      @include gl-w-full;
+      order: -1;
+
+      .gl-new-dropdown,
+      .split-content-button {
+        @include gl-w-full;
+      }
+    }
+  }
 }
diff --git a/app/helpers/clusters_helper.rb b/app/helpers/clusters_helper.rb
index c355fa5cc67ac5031f6e1e1b03c586087448875e..6af2c2dee189ac6b68a0b98e0d2e799e126d2201 100644
--- a/app/helpers/clusters_helper.rb
+++ b/app/helpers/clusters_helper.rb
@@ -16,31 +16,35 @@ def display_cluster_agents?(_clusterable)
     false
   end
 
-  def js_cluster_agents_list_data(clusterable_project)
+  def js_clusters_list_data(clusterable)
     {
-      default_branch_name: clusterable_project.default_branch,
-      empty_state_image: image_path('illustrations/clusters_empty.svg'),
-      project_path: clusterable_project.full_path,
-      agent_docs_url: help_page_path('user/clusters/agent/index'),
-      install_docs_url: help_page_path('administration/clusters/kas'),
-      get_started_docs_url: help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'),
-      integration_docs_url: help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'),
-      kas_address: Gitlab::Kas.external_url
-    }
-  end
-
-  def js_clusters_list_data(path = nil)
-    {
-      ancestor_help_path: help_page_path('user/group/clusters/index', anchor: 'cluster-precedence'),
-      endpoint: path,
+      endpoint: clusterable.index_path(format: :json),
       img_tags: {
         aws: { path: image_path('illustrations/logos/amazon_eks.svg'), text: s_('ClusterIntegration|Amazon EKS') },
         default: { path: image_path('illustrations/logos/kubernetes.svg'), text: _('Kubernetes Cluster') },
         gcp: { path: image_path('illustrations/logos/google_gke.svg'), text: s_('ClusterIntegration|Google GKE') }
-      }
+      },
+      ancestor_help_path: help_page_path('user/group/clusters/index', anchor: 'cluster-precedence'),
+      clusters_empty_state_image: image_path('illustrations/clusters_empty.svg'),
+      new_cluster_path: clusterable.new_path(tab: 'create'),
+      can_add_cluster: clusterable.can_add_cluster?.to_s
     }
   end
 
+  def js_clusters_data(clusterable)
+    {
+      default_branch_name: clusterable.default_branch,
+      empty_state_image: image_path('illustrations/clusters_empty.svg'),
+      project_path: clusterable.full_path,
+      multiple_clusters_docs_url: help_page_path('user/project/clusters/multiple_kubernetes_clusters'),
+      install_docs_url: help_page_path('administration/clusters/kas'),
+      get_started_docs_url: help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'),
+      integration_docs_url: help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'),
+      add_cluster_path: clusterable.new_path(tab: 'add'),
+      kas_address: Gitlab::Kas.external_url
+    }.merge(js_clusters_list_data(clusterable))
+  end
+
   def js_cluster_form_data(cluster, can_edit)
     {
       enabled: cluster.enabled?.to_s,
diff --git a/app/views/clusters/clusters/_cluster_list.html.haml b/app/views/clusters/clusters/_cluster_list.html.haml
index 38ed7e334c954d9143f35f5a5ca5af3babca266f..674ff988b5804d048b8d4cd0b120418f36756ea6 100644
--- a/app/views/clusters/clusters/_cluster_list.html.haml
+++ b/app/views/clusters/clusters/_cluster_list.html.haml
@@ -1,12 +1,9 @@
-- if clusters.empty?
-  = render 'empty_state'
-- else
-  .top-area.adjust
-    .gl-display-block.gl-text-right.gl-my-4.gl-w-full
-      - if clusterable.can_add_cluster?
-        = link_to s_('ClusterIntegration|Connect cluster with certificate'), clusterable.new_path, class: 'btn gl-button btn-confirm js-add-cluster gl-py-2', qa_selector: :integrate_kubernetes_cluster_button
-      - else
-        %span.btn.gl-button.btn-confirm.js-add-cluster.disabled.gl-py-2
-          = s_("ClusterIntegration|Connect cluster with certificate")
+.top-area.adjust
+  .gl-display-block.gl-text-right.gl-my-4.gl-w-full
+    - if clusterable.can_add_cluster?
+      = link_to s_('ClusterIntegration|Connect cluster with certificate'), clusterable.new_path, class: 'btn gl-button btn-confirm js-add-cluster gl-py-2', qa_selector: :integrate_kubernetes_cluster_button
+    - else
+      %span.btn.gl-button.btn-confirm.js-add-cluster.disabled.gl-py-2
+        = s_("ClusterIntegration|Connect cluster with certificate")
 
-  #js-clusters-list-app{ data: js_clusters_list_data(clusterable.index_path(format: :json)) }
+#js-clusters-list-app{ data: js_clusters_list_data(clusterable) }
diff --git a/app/views/clusters/clusters/_empty_state.html.haml b/app/views/clusters/clusters/_empty_state.html.haml
deleted file mode 100644
index feef3e0027fbef7265cd66ef60ed30ad8bc5c3ce..0000000000000000000000000000000000000000
--- a/app/views/clusters/clusters/_empty_state.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-.row.empty-state
-  .col-12
-    .svg-content= image_tag 'illustrations/clusters_empty.svg'
-  .col-12
-    .text-content
-      %h4.gl-text-center= s_('ClusterIntegration|Integrate Kubernetes with a cluster certificate')
-      %p.gl-text-center
-        = s_('ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way.')
-        = clusterable.empty_state_help_text
-        = clusterable.learn_more_link
-
-      - if clusterable.can_add_cluster?
-        .gl-text-center
-          = link_to s_('ClusterIntegration|Integrate with a cluster certificate'), clusterable.new_path, class: 'gl-button btn btn-confirm', data: { qa_selector: 'add_kubernetes_cluster_link' }
diff --git a/app/views/clusters/clusters/index.html.haml b/app/views/clusters/clusters/index.html.haml
index 45287a01cc90461076fb9e476816a6d9d0a9f67e..457e34b306a38ed73e0f4b5bdc0f462dbe05c873 100644
--- a/app/views/clusters/clusters/index.html.haml
+++ b/app/views/clusters/clusters/index.html.haml
@@ -3,24 +3,10 @@
 
 = render_gcp_signup_offer
 
-.clusters-container.gl-my-2
+.clusters-container
   - if display_cluster_agents?(clusterable)
-    .js-toggle-container
-      %ul.nav-links.nav-tabs.nav{ role: 'tablist' }
-        %li.nav-item{ role: 'presentation' }
-          %a.nav-link.active{ href: "#certificate-clusters-pane", id: "certificate-clusters-tab", data: { toggle: 'tab' }, role: 'tab' }
-            %span= s_('ClusterIntegration|Clusters connected with a certificate')
-
-        %li.nav-item{ role: 'presentation' }
-          %a.nav-link{ href: "#agent-clusters-pane", id: "agent-clusters-tab", data: { toggle: 'tab' }, role: 'tab' }
-            %span= s_('ClusterIntegration|GitLab Agent managed clusters')
-
-      .tab-content
-        .tab-pane.active{ id: 'certificate-clusters-pane', role: 'tabpanel' }
-          = render 'cluster_list', clusters: @clusters
-
-        .tab-pane{ id: 'agent-clusters-pane', role: 'tabpanel' }
-          #js-cluster-agents-list{ data: js_cluster_agents_list_data(clusterable) }
+    .gl-my-6
+      .js-clusters-main-view{ data: js_clusters_data(clusterable) }
 
   - else
     = render 'cluster_list', clusters: @clusters
diff --git a/app/views/clusters/clusters/new.html.haml b/app/views/clusters/clusters/new.html.haml
index 74e336723ba2ee83ddb0cb440ef701e396ae274b..f8d2b286b673d9531f927f7ccc36d5176703c5b8 100644
--- a/app/views/clusters/clusters/new.html.haml
+++ b/app/views/clusters/clusters/new.html.haml
@@ -1,6 +1,6 @@
 - breadcrumb_title _('Kubernetes')
 - page_title _('Kubernetes Cluster')
-- active_tab = local_assigns.fetch(:active_tab, 'create')
+- active_tab = params[:tab] || local_assigns.fetch(:active_tab, 'create')
 - provider = params[:provider]
 
 = render_gcp_signup_offer
diff --git a/ee/spec/features/clusters/create_agent_spec.rb b/ee/spec/features/clusters/create_agent_spec.rb
index c42db3b02b8b3be5bf5c9782c89e345d868269a2..7e1150e25cce6db3bf158c13e4d909f4b1dce6c2 100644
--- a/ee/spec/features/clusters/create_agent_spec.rb
+++ b/ee/spec/features/clusters/create_agent_spec.rb
@@ -26,9 +26,7 @@
   end
 
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
-    click_link('GitLab Agent managed clusters')
-
-    click_button('Integrate with the GitLab Agent')
+    click_button('Actions')
     expect(page).to have_content('Install new Agent')
 
     click_button('Select an Agent')
@@ -41,6 +39,5 @@
 
     click_button('Done')
     expect(page).to have_link('example-agent-2')
-    expect(page).to have_no_content('Install new Agent')
   end
 end
diff --git a/ee/spec/features/projects/cluster_agents_spec.rb b/ee/spec/features/projects/cluster_agents_spec.rb
index 068064ec5df250385a39a1b833eeda5e9534e098..45d63dbc912b4adb67e5a319ad1d67817409b25c 100644
--- a/ee/spec/features/projects/cluster_agents_spec.rb
+++ b/ee/spec/features/projects/cluster_agents_spec.rb
@@ -27,9 +27,7 @@
       end
 
       it 'displays empty state', :aggregate_failures do
-        click_link 'GitLab Agent managed clusters'
-
-        expect(page).to have_content('Integrate with the GitLab Agent')
+        expect(page).to have_content('Install new Agent')
         expect(page).to have_selector('.empty-state')
       end
     end
@@ -41,8 +39,6 @@
         end
 
         it 'displays a table with agent', :aggregate_failures do
-          click_link 'GitLab Agent managed clusters'
-
           expect(page).to have_content(agent.name)
           expect(page).to have_selector('[data-testid="cluster-agent-list-table"] tbody tr', count: 1)
         end
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ed26616e8e485e48e52f69fa1c90f2a0433f64fd..54a1ac21767e821ef6c4aa9ce4934dac3ab7ea77 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7253,15 +7253,30 @@ msgstr ""
 msgid "Cluster type must be specificed for Stages::ClusterEndpointInserter"
 msgstr ""
 
+msgid "ClusterAgents|%{number} of %{total} Agent based integrations"
+msgstr ""
+
+msgid "ClusterAgents|%{number} of %{total} Certificate based integrations"
+msgstr ""
+
 msgid "ClusterAgents|Access tokens"
 msgstr ""
 
+msgid "ClusterAgents|Actions"
+msgstr ""
+
+msgid "ClusterAgents|Agent"
+msgstr ""
+
 msgid "ClusterAgents|Agent might not be connected to GitLab"
 msgstr ""
 
 msgid "ClusterAgents|Agent never connected to GitLab"
 msgstr ""
 
+msgid "ClusterAgents|All"
+msgstr ""
+
 msgid "ClusterAgents|Alternative installation methods"
 msgstr ""
 
@@ -7274,9 +7289,21 @@ msgstr ""
 msgid "ClusterAgents|An unknown error occurred. Please try again."
 msgstr ""
 
+msgid "ClusterAgents|Certificate based"
+msgstr ""
+
 msgid "ClusterAgents|Configuration"
 msgstr ""
 
+msgid "ClusterAgents|Connect existing cluster"
+msgstr ""
+
+msgid "ClusterAgents|Connect with Agent"
+msgstr ""
+
+msgid "ClusterAgents|Connect with certificate"
+msgstr ""
+
 msgid "ClusterAgents|Connected"
 msgstr ""
 
@@ -7286,6 +7313,9 @@ msgstr ""
 msgid "ClusterAgents|Copy token"
 msgstr ""
 
+msgid "ClusterAgents|Create new cluster"
+msgstr ""
+
 msgid "ClusterAgents|Created by"
 msgstr ""
 
@@ -7304,16 +7334,19 @@ msgstr ""
 msgid "ClusterAgents|For more troubleshooting information go to"
 msgstr ""
 
-msgid "ClusterAgents|Go to the repository"
+msgid "ClusterAgents|GitLab Agents"
 msgstr ""
 
-msgid "ClusterAgents|Install a new GitLab Agent"
+msgid "ClusterAgents|GitLab Agents provide an increased level of security when integrating with clusters. %{linkStart}Learn more about the GitLab Kubernetes Agent.%{linkEnd}"
 msgstr ""
 
-msgid "ClusterAgents|Install new Agent"
+msgid "ClusterAgents|Go to the repository"
+msgstr ""
+
+msgid "ClusterAgents|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}"
 msgstr ""
 
-msgid "ClusterAgents|Integrate Kubernetes with a GitLab Agent"
+msgid "ClusterAgents|Install new Agent"
 msgstr ""
 
 msgid "ClusterAgents|Integrate with the GitLab Agent"
@@ -7328,6 +7361,9 @@ msgstr ""
 msgid "ClusterAgents|Learn how to create an agent access token"
 msgstr ""
 
+msgid "ClusterAgents|Learn more about the GitLab Kubernetes Agent."
+msgstr ""
+
 msgid "ClusterAgents|Make sure you are using a valid token."
 msgstr ""
 
@@ -7340,12 +7376,21 @@ msgstr ""
 msgid "ClusterAgents|Never connected"
 msgstr ""
 
+msgid "ClusterAgents|No Agent based integrations"
+msgstr ""
+
+msgid "ClusterAgents|No Certificate based integrations"
+msgstr ""
+
 msgid "ClusterAgents|Not connected"
 msgstr ""
 
 msgid "ClusterAgents|Read more about getting started"
 msgstr ""
 
+msgid "ClusterAgents|Recommended"
+msgstr ""
+
 msgid "ClusterAgents|Recommended installation method"
 msgstr ""
 
@@ -7367,12 +7412,6 @@ msgstr ""
 msgid "ClusterAgents|The Agent has not been connected in a long time. There might be a connectivity issue. Last contact was %{timeAgo}."
 msgstr ""
 
-msgid "ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}"
-msgstr ""
-
-msgid "ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}"
-msgstr ""
-
 msgid "ClusterAgents|The recommended installation method provided below includes the token. If you want to follow the alternative installation method provided in the docs make sure you save the token value before you close the window."
 msgstr ""
 
@@ -7391,6 +7430,9 @@ msgstr ""
 msgid "ClusterAgents|Unknown user"
 msgstr ""
 
+msgid "ClusterAgents|Use GitLab Agents to more securely integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more."
+msgstr ""
+
 msgid "ClusterAgents|You will need to create a token to connect to your agent"
 msgstr ""
 
@@ -7535,9 +7577,6 @@ msgstr ""
 msgid "ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters. %{linkStart}More information%{linkEnd}"
 msgstr ""
 
-msgid "ClusterIntegration|Clusters connected with a certificate"
-msgstr ""
-
 msgid "ClusterIntegration|Connect cluster with certificate"
 msgstr ""
 
@@ -7670,9 +7709,6 @@ msgstr ""
 msgid "ClusterIntegration|Fetching zones"
 msgstr ""
 
-msgid "ClusterIntegration|GitLab Agent managed clusters"
-msgstr ""
-
 msgid "ClusterIntegration|GitLab Integration"
 msgstr ""
 
@@ -7706,6 +7742,9 @@ msgstr ""
 msgid "ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{help_link_start}read this first%{help_link_end}."
 msgstr ""
 
+msgid "ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}"
+msgstr ""
+
 msgid "ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration."
 msgstr ""
 
@@ -7718,9 +7757,6 @@ msgstr ""
 msgid "ClusterIntegration|Instance type"
 msgstr ""
 
-msgid "ClusterIntegration|Integrate Kubernetes with a cluster certificate"
-msgstr ""
-
 msgid "ClusterIntegration|Integrate with a cluster certificate"
 msgstr ""
 
@@ -7745,9 +7781,6 @@ msgstr ""
 msgid "ClusterIntegration|Kubernetes cluster was successfully created."
 msgstr ""
 
-msgid "ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way."
-msgstr ""
-
 msgid "ClusterIntegration|Kubernetes version"
 msgstr ""
 
@@ -7769,6 +7802,9 @@ msgstr ""
 msgid "ClusterIntegration|Learn more about instance Kubernetes clusters"
 msgstr ""
 
+msgid "ClusterIntegration|Learn more about the GitLab managed clusters"
+msgstr ""
+
 msgid "ClusterIntegration|Loading IAM Roles"
 msgstr ""
 
@@ -8102,6 +8138,9 @@ msgstr ""
 msgid "ClusterIntegration|Unknown Error"
 msgstr ""
 
+msgid "ClusterIntegration|Use certificates to integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more in an easy way."
+msgstr ""
+
 msgid "ClusterIntegration|Uses the Cloud Run, Istio, and HTTP Load Balancing addons for this cluster."
 msgstr ""
 
@@ -37693,6 +37732,12 @@ msgstr ""
 msgid "View alert details."
 msgstr ""
 
+msgid "View all %{number} Agent based integrations"
+msgstr ""
+
+msgid "View all %{number} Certificate based integrations"
+msgstr ""
+
 msgid "View all environments."
 msgstr ""
 
diff --git a/qa/qa/page/project/infrastructure/kubernetes/index.rb b/qa/qa/page/project/infrastructure/kubernetes/index.rb
index bdcaf7ffaff152a0d6b88efb80181cc49e9da4bd..0f6497b1ce993eb8ce88960f57ed9da0f442080e 100644
--- a/qa/qa/page/project/infrastructure/kubernetes/index.rb
+++ b/qa/qa/page/project/infrastructure/kubernetes/index.rb
@@ -6,7 +6,7 @@ module Project
       module Infrastructure
         module Kubernetes
           class Index < Page::Base
-            view 'app/views/clusters/clusters/_empty_state.html.haml' do
+            view 'app/assets/javascripts/clusters_list/components/clusters_empty_state.vue' do
               element :add_kubernetes_cluster_link
             end
 
diff --git a/spec/frontend/clusters_list/components/agent_empty_state_spec.js b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
index a548721588e2e8199ca289c4c082677f233e2831..3518ca8359449f5caffbdda5f4029b60eda3a1d2 100644
--- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
@@ -4,7 +4,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 const emptyStateImage = '/path/to/image';
 const projectPath = 'path/to/project';
-const agentDocsUrl = 'path/to/agentDocs';
+const multipleClustersDocsUrl = 'path/to/miltipleClustersDocs';
 const installDocsUrl = 'path/to/installDocs';
 const getStartedDocsUrl = 'path/to/getStartedDocs';
 const integrationDocsUrl = 'path/to/integrationDocs';
@@ -18,16 +18,15 @@ describe('AgentEmptyStateComponent', () => {
   const provideData = {
     emptyStateImage,
     projectPath,
-    agentDocsUrl,
+    multipleClustersDocsUrl,
     installDocsUrl,
     getStartedDocsUrl,
     integrationDocsUrl,
   };
 
   const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
-  const findAgentDocsLink = () => wrapper.findByTestId('agent-docs-link');
+  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
   const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link');
-  const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
 
   beforeEach(() => {
@@ -46,7 +45,7 @@ describe('AgentEmptyStateComponent', () => {
   });
 
   it('renders correct href attributes for the links', () => {
-    expect(findAgentDocsLink().attributes('href')).toBe(agentDocsUrl);
+    expect(findMultipleClustersDocsLink().attributes('href')).toBe(multipleClustersDocsUrl);
     expect(findInstallDocsLink().attributes('href')).toBe(installDocsUrl);
   });
 
@@ -54,10 +53,6 @@ describe('AgentEmptyStateComponent', () => {
     it('should render notification message box', () => {
       expect(findConfigurationsAlert().exists()).toBe(true);
     });
-
-    it('should disable integration button', () => {
-      expect(findIntegrationButton().attributes('disabled')).toBe('true');
-    });
   });
 
   describe('when there is a list of agent configurations', () => {
@@ -71,7 +66,6 @@ describe('AgentEmptyStateComponent', () => {
     it('should render content without notification message box', () => {
       expect(findEmptyState().exists()).toBe(true);
       expect(findConfigurationsAlert().exists()).toBe(false);
-      expect(findIntegrationButton().attributes('disabled')).toBeUndefined();
     });
   });
 });
diff --git a/spec/frontend/clusters_list/components/agent_table_spec.js b/spec/frontend/clusters_list/components/agent_table_spec.js
index e3b90584f2947a71f5d98cc600dd1f2391e86668..60184a56ea2c521843d215ec51a17e507b24cd64 100644
--- a/spec/frontend/clusters_list/components/agent_table_spec.js
+++ b/spec/frontend/clusters_list/components/agent_table_spec.js
@@ -1,4 +1,4 @@
-import { GlButton, GlLink, GlIcon } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
@@ -70,10 +70,6 @@ describe('AgentTable', () => {
     }
   });
 
-  it('displays header button', () => {
-    expect(wrapper.find(GlButton).text()).toBe('Install a new GitLab Agent');
-  });
-
   describe('agent table', () => {
     it.each`
       agentName    | link          | lineNumber
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 54d5ae94172795daa4573f9fcfa78878de36e13c..1f4da2746af294ae9f32ef0eddd59cb09cd3b043 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -7,6 +7,7 @@ import Agents from '~/clusters_list/components/agents.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import eventHub from '~/clusters_list/eventhub';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -22,12 +23,12 @@ describe('Agents', () => {
     kasAddress: 'kas.example.com',
   };
 
-  const createWrapper = ({ agents = [], pageInfo = null, trees = [] }) => {
+  const createWrapper = ({ agents = [], pageInfo = null, trees = [], count = 0 }) => {
     const provide = provideData;
     const apolloQueryResponse = {
       data: {
         project: {
-          clusterAgents: { nodes: agents, pageInfo, tokens: { nodes: [] } },
+          clusterAgents: { nodes: agents, pageInfo, tokens: { nodes: [] }, count },
           repository: { tree: { trees: { nodes: trees, pageInfo } } },
         },
       },
@@ -81,6 +82,8 @@ describe('Agents', () => {
       },
     ];
 
+    const count = 2;
+
     const trees = [
       {
         name: 'agent-2',
@@ -121,7 +124,7 @@ describe('Agents', () => {
     ];
 
     beforeEach(() => {
-      return createWrapper({ agents, trees });
+      return createWrapper({ agents, count, trees });
     });
 
     it('should render agent table', () => {
@@ -133,6 +136,10 @@ describe('Agents', () => {
       expect(findAgentTable().props('agents')).toMatchObject(expectedAgentsList);
     });
 
+    it('should emit agents count to the parent component', () => {
+      expect(wrapper.emitted().onAgentsLoad).toEqual([[count]]);
+    });
+
     describe('when the agent has recently connected tokens', () => {
       it('should set agent status to active', () => {
         expect(findAgentTable().props('agents')).toMatchObject(expectedAgentsList);
@@ -180,6 +187,36 @@ describe('Agents', () => {
       it('should pass pageInfo to the pagination component', () => {
         expect(findPaginationButtons().props()).toMatchObject(pageInfo);
       });
+
+      describe('when limit is passed from the parent conponent', () => {
+        beforeEach(() => {
+          propsData.limit = 6;
+
+          return createWrapper({
+            agents,
+            pageInfo,
+          });
+        });
+
+        it('should not render pagination buttons', () => {
+          expect(findPaginationButtons().exists()).toBe(false);
+        });
+      });
+    });
+  });
+
+  describe('when agentRegistered event emitted from InstalAgentModal', () => {
+    const reloadAgentsSpy = jest.fn();
+    eventHub.$once('agentRegistered', reloadAgentsSpy);
+
+    beforeEach(() => {
+      return createWrapper({});
+    });
+
+    it('should reload agents list', () => {
+      eventHub.$emit('agentRegistered');
+
+      expect(reloadAgentsSpy).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/clusters_list/components/clusters_actions_spec.js b/spec/frontend/clusters_list/components/clusters_actions_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..4caf9d38ef8c1d2ccf96f2723dbfbf27ef4aed9a
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_actions_spec.js
@@ -0,0 +1,55 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ClustersActions from '~/clusters_list/components/clusters_actions.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { INSTALL_AGENT_MODAL_ID } from '~/clusters_list/constants';
+
+describe('ClustersActionsComponent', () => {
+  let wrapper;
+
+  const newClusterPath = 'path/to/create/cluster';
+  const addClusterPath = 'path/to/connect/existing/cluster';
+
+  const provideData = {
+    newClusterPath,
+    addClusterPath,
+  };
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findNewClusterLink = () => wrapper.findByTestId('new-cluster-link');
+  const findConnectClusterLink = () => wrapper.findByTestId('connect-cluster-link');
+  const findConnectNewAgentLink = () => wrapper.findByTestId('connect-new-agent-link');
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(ClustersActions, {
+      provide: provideData,
+      directives: {
+        GlModalDirective: createMockDirective(),
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders actions menu', () => {
+    expect(findDropdown().props('text')).toBe('Actions');
+  });
+
+  it('renders a dropdown with 3 actions items', () => {
+    expect(findDropdownItems()).toHaveLength(3);
+  });
+
+  it('renders correct href attributes for the links', () => {
+    expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
+    expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
+  });
+
+  it('renders correct modal id for the agent link', () => {
+    const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive');
+
+    expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+  });
+});
diff --git a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..c27feb8a7cdf788059c22b4ae8e2c281aa40a82a
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
@@ -0,0 +1,79 @@
+import { GlEmptyState, GlSprintf, GlButton } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state.vue';
+import ClusterStore from '~/clusters_list/store';
+
+const clustersEmptyStateImage = 'path/to/svg';
+const newClusterPath = '/path/to/connect/cluster';
+const canAddCluster = true;
+
+describe('ClustersEmptyStateComponent', () => {
+  let wrapper;
+
+  const propsData = {
+    childComponent: false,
+  };
+
+  const provideData = {
+    clustersEmptyStateImage,
+    newClusterPath,
+  };
+
+  const entryData = {
+    canAddCluster,
+  };
+
+  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
+  const findClustersDocsLink = () => wrapper.findByTestId('clusters-docs-link');
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(ClustersEmptyState, {
+      store: ClusterStore(entryData),
+      propsData,
+      provide: provideData,
+      stubs: { GlEmptyState, GlSprintf },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders correct href attributes for the links', () => {
+    expect(findMultipleClustersDocsLink().attributes('href')).toBe(
+      wrapper.vm.$options.multipleClustersHelpUrl,
+    );
+    expect(findClustersDocsLink().attributes('href')).toBe(wrapper.vm.$options.learnMoreHelpUrl);
+  });
+
+  describe('when the component is loaded independantly', () => {
+    it('should render the action button', () => {
+      expect(findButton().exists()).toBe(true);
+    });
+
+    describe('when the user cannot add clusters', () => {
+      beforeEach(() => {
+        wrapper.vm.$store.state.canAddCluster = false;
+      });
+      it('should disable the button', () => {
+        expect(findButton().props('disabled')).toBe(true);
+      });
+    });
+  });
+
+  describe('when the component is loaded as a child component', () => {
+    beforeEach(() => {
+      propsData.childComponent = true;
+      wrapper = shallowMountExtended(ClustersEmptyState, {
+        store: ClusterStore(entryData),
+        propsData,
+        provide: provideData,
+      });
+    });
+
+    it('should not render the action button', () => {
+      expect(findButton().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..252d66a17322a55d502f68f2e0f84a2d84389b64
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
@@ -0,0 +1,66 @@
+import { GlTabs, GlTab } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ClustersMainView from '~/clusters_list/components/clusters_main_view.vue';
+import { CLUSTERS_TABS } from '~/clusters_list/constants';
+
+const defaultBranchName = 'default-branch';
+
+describe('ClustersMainViewComponent', () => {
+  let wrapper;
+
+  const propsData = {
+    defaultBranchName,
+  };
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(ClustersMainView, {
+      propsData,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findTabs = () => wrapper.findComponent(GlTabs);
+  const findAllTabs = () => wrapper.findAllComponents(GlTab);
+  const findGlTabAtIndex = (index) => findAllTabs().at(index);
+  const findComponent = () => wrapper.findByTestId('clusters-tab-component');
+
+  it('renders `GlTabs` with `syncActiveTabWithQueryParams` and `queryParamName` props set', () => {
+    expect(findTabs().exists()).toBe(true);
+    expect(findTabs().props('syncActiveTabWithQueryParams')).toBe(true);
+  });
+
+  it('renders correct number of tabs', () => {
+    expect(findAllTabs().length).toBe(CLUSTERS_TABS.length);
+  });
+
+  it('passes child-component param to the component', () => {
+    expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName);
+  });
+
+  describe('tabs', () => {
+    it.each`
+      tabTitle               | queryParamValue        | lineNumber
+      ${'All'}               | ${'all'}               | ${0}
+      ${'Agent'}             | ${'agent'}             | ${1}
+      ${'Certificate based'} | ${'certificate_based'} | ${2}
+    `(
+      'renders correct tab title and query param value',
+      ({ tabTitle, queryParamValue, lineNumber }) => {
+        expect(findGlTabAtIndex(lineNumber).attributes('title')).toBe(tabTitle);
+        expect(findGlTabAtIndex(lineNumber).props('queryParamValue')).toBe(queryParamValue);
+      },
+    );
+  });
+
+  describe('when the child component emits the tab change event', () => {
+    beforeEach(() => {
+      findComponent().vm.$emit('changeTab', 'agent');
+    });
+    it('changes the tab', () => {
+      expect(wrapper.vm.$data.selectedTabIndex).toBe(1);
+    });
+  });
+});
diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js
index 941a3adb6258685b0770222937d905dab12167db..6ecc67998167e25cab0d6781208ffe9723a0e3f8 100644
--- a/spec/frontend/clusters_list/components/clusters_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_spec.js
@@ -8,6 +8,7 @@ import * as Sentry from '@sentry/browser';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Clusters from '~/clusters_list/components/clusters.vue';
+import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state.vue';
 import ClusterStore from '~/clusters_list/store';
 import axios from '~/lib/utils/axios_utils';
 import { apiData } from '../mock_data';
@@ -18,18 +19,28 @@ describe('Clusters', () => {
   let wrapper;
 
   const endpoint = 'some/endpoint';
+  const totalClustersNumber = 6;
+  const clustersEmptyStateImage = 'path/to/svg';
+  const newClusterPath = '/path/to/new/cluster';
 
   const entryData = {
     endpoint,
     imgTagsAwsText: 'AWS Icon',
     imgTagsDefaultText: 'Default Icon',
     imgTagsGcpText: 'GCP Icon',
+    totalClusters: totalClustersNumber,
+  };
+
+  const provideData = {
+    clustersEmptyStateImage,
+    newClusterPath,
   };
 
   const findLoader = () => wrapper.find(GlLoadingIcon);
   const findPaginatedButtons = () => wrapper.find(GlPagination);
   const findTable = () => wrapper.find(GlTable);
   const findStatuses = () => findTable().findAll('.js-status');
+  const findEmptyState = () => wrapper.findComponent(ClustersEmptyState);
 
   const mockPollingApi = (response, body, header) => {
     mock.onGet(`${endpoint}?page=${header['x-page']}`).reply(response, body, header);
@@ -37,7 +48,7 @@ describe('Clusters', () => {
 
   const mountWrapper = () => {
     store = ClusterStore(entryData);
-    wrapper = mount(Clusters, { store });
+    wrapper = mount(Clusters, { provide: provideData, store, stubs: { GlTable } });
     return axios.waitForAll();
   };
 
@@ -70,7 +81,6 @@ describe('Clusters', () => {
     describe('when data is loading', () => {
       beforeEach(() => {
         wrapper.vm.$store.state.loadingClusters = true;
-        return wrapper.vm.$nextTick();
       });
 
       it('displays a loader instead of the table while loading', () => {
@@ -79,23 +89,44 @@ describe('Clusters', () => {
       });
     });
 
-    it('displays a table component', () => {
-      expect(findTable().exists()).toBe(true);
-    });
+    describe('when clusters are present', () => {
+      it('displays a table component', () => {
+        expect(findTable().exists()).toBe(true);
+      });
 
-    it('renders the correct table headers', () => {
-      const tableHeaders = wrapper.vm.fields;
-      const headers = findTable().findAll('th');
+      it('renders the correct table headers', () => {
+        const tableHeaders = wrapper.vm.fields;
+        const headers = findTable().findAll('th');
 
-      expect(headers.length).toBe(tableHeaders.length);
+        expect(headers.length).toBe(tableHeaders.length);
 
-      tableHeaders.forEach((headerText, i) =>
-        expect(headers.at(i).text()).toEqual(headerText.label),
-      );
+        tableHeaders.forEach((headerText, i) =>
+          expect(headers.at(i).text()).toEqual(headerText.label),
+        );
+      });
+
+      it('should stack on smaller devices', () => {
+        expect(findTable().classes()).toContain('b-table-stacked-md');
+      });
     });
 
-    it('should stack on smaller devices', () => {
-      expect(findTable().classes()).toContain('b-table-stacked-md');
+    describe('when is loaded as a child component', () => {
+      beforeEach(() => {
+        wrapper.setProps({ limit: 6 });
+      });
+
+      it("shouldn't render pagination buttons", () => {
+        expect(findPaginatedButtons().exists()).toBe(false);
+      });
+    });
+
+    describe('when there are no clusters', () => {
+      beforeEach(() => {
+        wrapper.vm.$store.state.totalClusters = 0;
+      });
+      it('should render empty state', () => {
+        expect(findEmptyState().exists()).toBe(true);
+      });
     });
   });
 
diff --git a/spec/frontend/clusters_list/components/clusters_view_all_spec.js b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..52802cae8d8bf75f3f0fc7972adead59d62f2642
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
@@ -0,0 +1,218 @@
+import { GlCard, GlLoadingIcon, GlButton, GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ClustersViewAll from '~/clusters_list/components/clusters_view_all.vue';
+import Agents from '~/clusters_list/components/agents.vue';
+import Clusters from '~/clusters_list/components/clusters.vue';
+import ClusterStore from '~/clusters_list/store';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import {
+  AGENT_CARD_INFO,
+  CERTIFICATE_BASED_CARD_INFO,
+  MAX_CLUSTERS_LIST,
+  INSTALL_AGENT_MODAL_ID,
+} from '~/clusters_list/constants';
+import { sprintf } from '~/locale';
+
+const loadingClusters = true;
+const totalClusters = 0;
+const addClusterPath = '/path/to/add/cluster';
+const defaultBranchName = 'default-branch';
+
+describe('ClustersViewAllComponent', () => {
+  let wrapper;
+  let changeTabSpy;
+
+  const event = {
+    preventDefault: jest.fn(),
+  };
+
+  const propsData = {
+    defaultBranchName,
+  };
+
+  const provideData = {
+    addClusterPath,
+  };
+
+  const entryData = {
+    loadingClusters,
+    totalClusters,
+  };
+
+  const findCards = () => wrapper.findAllComponents(GlCard);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findAgentsComponent = () => wrapper.findComponent(Agents);
+  const findClustersComponent = () => wrapper.findComponent(Clusters);
+  const findCardsContainer = () => wrapper.findByTestId('clusters-cards-container');
+  const findAgentCardTitle = () => wrapper.findByTestId('agent-card-title');
+  const findRecommendedBadge = () => wrapper.findByTestId('clusters-recommended-badge');
+  const findClustersCardTitle = () => wrapper.findByTestId('clusters-card-title');
+  const findFooterButton = (line) => findCards().at(line).findComponent(GlButton);
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(ClustersViewAll, {
+      store: ClusterStore(entryData),
+      propsData,
+      provide: provideData,
+      directives: {
+        GlModalDirective: createMockDirective(),
+      },
+      stubs: { GlCard, GlSprintf },
+    });
+
+    changeTabSpy = jest.spyOn(wrapper.vm, 'changeTab');
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render 2 cards', () => {
+    expect(findCards().length).toBe(2);
+  });
+
+  describe('when agents and clusters are not loaded', () => {
+    it('should show the loading icon', () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+    });
+  });
+
+  describe('when both agents and clusters are loaded', () => {
+    beforeEach(() => {
+      wrapper.vm.$store.state.loadingClusters = false;
+      findAgentsComponent().vm.$emit('onAgentsLoad', 6);
+    });
+
+    it("shouldn't show the loading icon", () => {
+      expect(findLoadingIcon().exists()).toBe(false);
+    });
+
+    it('should make content visible', () => {
+      expect(findCardsContainer().classes('gl-display-none')).toBe(false);
+    });
+  });
+
+  describe('agents card', () => {
+    it('should show recommended badge', () => {
+      expect(findRecommendedBadge().exists()).toBe(true);
+    });
+
+    it('should render Agents component', () => {
+      expect(findAgentsComponent().exists()).toBe(true);
+    });
+
+    it('should pass the limit prop', () => {
+      expect(findAgentsComponent().props('limit')).toBe(MAX_CLUSTERS_LIST);
+    });
+
+    it('should pass the default-branch-name prop', () => {
+      expect(findAgentsComponent().props('defaultBranchName')).toBe(defaultBranchName);
+    });
+
+    describe('when there are no agents', () => {
+      it('should show the empty title', () => {
+        expect(findAgentCardTitle().text()).toBe(AGENT_CARD_INFO.emptyTitle);
+      });
+
+      it('should show install new Agent button in the footer', () => {
+        expect(findFooterButton(0).exists()).toBe(true);
+      });
+
+      it('should render correct modal id for the agent link', () => {
+        const binding = getBinding(findFooterButton(0).element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      });
+    });
+
+    describe('when the agents are present', () => {
+      const findFooterLink = () => wrapper.findByTestId('agents-tab-footer-link');
+      const agentsNumber = 7;
+      beforeEach(() => {
+        findAgentsComponent().vm.$emit('onAgentsLoad', agentsNumber);
+      });
+
+      it('should show the correct title', () => {
+        expect(findAgentCardTitle().text()).toBe(
+          sprintf(AGENT_CARD_INFO.title, { number: MAX_CLUSTERS_LIST, total: agentsNumber }),
+        );
+      });
+
+      it('should show the link to the Agents tab in the footer', () => {
+        expect(findFooterLink().exists()).toBe(true);
+        expect(findFooterLink().text()).toBe(
+          sprintf(AGENT_CARD_INFO.footerText, { number: agentsNumber }),
+        );
+        expect(findFooterLink().attributes('href')).toBe('?tab=agent');
+      });
+
+      describe('when clicking on the footer link', () => {
+        beforeEach(() => {
+          findFooterLink().vm.$emit('click', event);
+        });
+
+        it('should trigger tab change', () => {
+          expect(changeTabSpy).toHaveBeenCalledWith(event, 'agent');
+        });
+      });
+    });
+  });
+
+  describe('clusters tab', () => {
+    it('should pass the limit prop', () => {
+      expect(findClustersComponent().props('limit')).toBe(MAX_CLUSTERS_LIST);
+    });
+
+    it('should pass the child-component prop', () => {
+      expect(findClustersComponent().props('childComponent')).toBe(true);
+    });
+
+    describe('when there are no clusters', () => {
+      it('should show the empty title', () => {
+        expect(findClustersCardTitle().text()).toBe(CERTIFICATE_BASED_CARD_INFO.emptyTitle);
+      });
+
+      it('should show install new Agent button in the footer', () => {
+        expect(findFooterButton(1).exists()).toBe(true);
+      });
+
+      it('should render correct href for the button in the footer', () => {
+        expect(findFooterButton(1).attributes('href')).toBe(addClusterPath);
+      });
+    });
+
+    describe('when the clusters are present', () => {
+      const findFooterLink = () => wrapper.findByTestId('clusters-tab-footer-link');
+      const clustersNumber = 7;
+      beforeEach(() => {
+        wrapper.vm.$store.state.totalClusters = clustersNumber;
+      });
+
+      it('should show the correct title', () => {
+        expect(findClustersCardTitle().text()).toBe(
+          sprintf(CERTIFICATE_BASED_CARD_INFO.title, {
+            number: MAX_CLUSTERS_LIST,
+            total: clustersNumber,
+          }),
+        );
+      });
+
+      it('should show the link to the Clusters tab in the footer', () => {
+        expect(findFooterLink().exists()).toBe(true);
+        expect(findFooterLink().text()).toBe(
+          sprintf(CERTIFICATE_BASED_CARD_INFO.footerText, { number: clustersNumber }),
+        );
+      });
+
+      describe('when clicking on the footer link', () => {
+        beforeEach(() => {
+          findFooterLink().vm.$emit('click', event);
+        });
+
+        it('should trigger tab change', () => {
+          expect(changeTabSpy).toHaveBeenCalledWith(event, 'certificate_based');
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/clusters_list/store/mutations_spec.js b/spec/frontend/clusters_list/store/mutations_spec.js
index c0fe634a70360068d66a2ec021acaf1633e91384..ae264eee4496cdb749df20b5858c461179670d43 100644
--- a/spec/frontend/clusters_list/store/mutations_spec.js
+++ b/spec/frontend/clusters_list/store/mutations_spec.js
@@ -26,7 +26,7 @@ describe('Admin statistics panel mutations', () => {
       expect(state.clusters).toBe(apiData.clusters);
       expect(state.clustersPerPage).toBe(paginationInformation.perPage);
       expect(state.hasAncestorClusters).toBe(apiData.has_ancestor_clusters);
-      expect(state.totalCulsters).toBe(paginationInformation.total);
+      expect(state.totalClusters).toBe(paginationInformation.total);
     });
   });
 
@@ -57,4 +57,12 @@ describe('Admin statistics panel mutations', () => {
       expect(state.page).toBe(123);
     });
   });
+
+  describe(`${types.SET_CLUSTERS_PER_PAGE}`, () => {
+    it('changes clustersPerPage value', () => {
+      mutations[types.SET_CLUSTERS_PER_PAGE](state, 123);
+
+      expect(state.clustersPerPage).toBe(123);
+    });
+  });
 });
diff --git a/spec/helpers/clusters_helper_spec.rb b/spec/helpers/clusters_helper_spec.rb
index f1e19f17c72abee05d4ad8abe1ee75f62005f83f..be6a18174ce4476b4ec4c152632af46bd192c3ad 100644
--- a/spec/helpers/clusters_helper_spec.rb
+++ b/spec/helpers/clusters_helper_spec.rb
@@ -59,13 +59,15 @@
     end
   end
 
-  describe '#js_cluster_agents_list_data' do
-    let_it_be(:project) { build(:project, :repository) }
+  describe '#js_clusters_data' do
+    let_it_be(:current_user) { create(:user) }
+    let_it_be(:project) { build(:project) }
+    let_it_be(:clusterable) { ClusterablePresenter.fabricate(project, current_user: current_user) }
 
-    subject { helper.js_cluster_agents_list_data(project) }
+    subject { helper.js_clusters_data(clusterable) }
 
     it 'displays project default branch' do
-      expect(subject[:default_branch_name]).to eq(project.default_branch)
+      expect(subject[:default_branch_name]).to eq(clusterable.default_branch)
     end
 
     it 'displays image path' do
@@ -73,26 +75,34 @@
     end
 
     it 'displays project path' do
-      expect(subject[:project_path]).to eq(project.full_path)
+      expect(subject[:project_path]).to eq(clusterable.full_path)
     end
 
     it 'generates docs urls' do
-      expect(subject[:agent_docs_url]).to eq(help_page_path('user/clusters/agent/index'))
+      expect(subject[:multiple_clusters_docs_url]).to eq(help_page_path('user/project/clusters/multiple_kubernetes_clusters'))
       expect(subject[:install_docs_url]).to eq(help_page_path('administration/clusters/kas'))
       expect(subject[:get_started_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'))
       expect(subject[:integration_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'))
     end
 
+    it 'displays add existing cluster using certificate path' do
+      expect(subject[:add_cluster_path]).to match(clusterable.new_path(tab: 'add'))
+    end
+
     it 'displays kas address' do
       expect(subject[:kas_address]).to eq(Gitlab::Kas.external_url)
     end
   end
 
   describe '#js_clusters_list_data' do
-    subject { helper.js_clusters_list_data('/path') }
+    let_it_be(:current_user) { create(:user) }
+    let_it_be(:project) { build(:project) }
+    let_it_be(:clusterable) { ClusterablePresenter.fabricate(project, current_user: current_user) }
+
+    subject { helper.js_clusters_list_data(clusterable) }
 
     it 'displays endpoint path' do
-      expect(subject[:endpoint]).to eq('/path')
+      expect(subject[:endpoint]).to eq(clusterable.index_path(format: :json))
     end
 
     it 'generates svg image data', :aggregate_failures do
@@ -108,6 +118,18 @@
     it 'displays and ancestor_help_path' do
       expect(subject[:ancestor_help_path]).to eq(help_page_path('user/group/clusters/index', anchor: 'cluster-precedence'))
     end
+
+    it 'displays empty image path' do
+      expect(subject[:clusters_empty_state_image]).to match(%r(/illustrations/logos/clusters_empty|svg))
+    end
+
+    it 'displays create cluster using certificate path' do
+      expect(subject[:new_cluster_path]).to match(clusterable.new_path(tab: 'create'))
+    end
+
+    it 'displays whether the user can add cluster' do
+      expect(subject[:can_add_cluster]).to match(clusterable.can_add_cluster?.to_s)
+    end
   end
 
   describe '#js_cluster_new' do