4 files changed, 75 insertions, 10 deletions
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 91976ca1f56..17096e25207 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -348,12 +348,3 @@
     }
   }
 }
-
-.flex-container-block {
-  display: -webkit-flex;
-  display: flex;
-}
-
-.flex-right {
-  margin-left: auto;
-}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 5e4ddf366ef..4316b1e87ae 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -454,3 +454,11 @@ img.emoji {
 .inline { display: inline-block; }
 .center { text-align: center; }
 .vertical-align-middle { vertical-align: middle; }
+
+.flex-justify-content-center { justify-content: center; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-right { margin-left: auto; }
+.flex-container-block {
+  display: -webkit-flex;
+  display: flex;
+}
diff --git a/app/views/projects/clusters/_empty_state.html.haml b/app/views/projects/clusters/_empty_state.html.haml
new file mode 100644
index 00000000000..44f13a009b9
--- /dev/null
+++ b/app/views/projects/clusters/_empty_state.html.haml
@@ -0,0 +1,10 @@
+.empty-state.flex-justify-content-center.flex-container-block.flex-wrap
+  %div
+    %h2= s_('ClusterIntegration|Integrate cluster automation')
+    - link_to_help_page = link_to(s_('ClusterIntegration|Learn more about Clusters'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
+    %p= s_('ClusterIntegration|Clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way. %{link_to_help_page}').html_safe % { link_to_help_page: link_to_help_page}
+
+    %p
+      = link_to s_('ClusterIntegration|Add cluster'), '', class: 'btn btn-success', title: 'Add cluster'
+  .svg-content
+    = image_tag 'illustrations/labels.svg'
diff --git a/app/views/projects/clusters/index.html.haml b/app/views/projects/clusters/index.html.haml
index 980a0d5f19a..6b7fbb44c4a 100644
--- a/app/views/projects/clusters/index.html.haml
+++ b/app/views/projects/clusters/index.html.haml
@@ -1 +1,57 @@
-Hello World!
+- if @clusters.empty?
+  = render "empty_state"
+- else
+  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
+    .fade-left= icon('angle-left')
+    .fade-right= icon('angle-right')
+    %ul.nav-links.scrolling-tabs
+      %li
+        %a
+          = s_('ClusterIntegration|Active')
+          %span.badge
+            0
+      %li
+        %a
+          = s_('ClusterIntegration|Inactive')
+          %span.badge
+            0
+      %li
+        %a
+          = s_('ClusterIntegration|All')
+          %span.badge
+            0
+    .nav-controls
+      = link_to s_('ClusterIntegration|Add cluster'), '', class: 'btn btn-success', title: 'Add cluster'
+  .ci-table
+    .gl-responsive-table-row.table-row-header{ role: 'row' }
+      .table-section.section-30{ role: 'rowheader' }
+        = s_('ClusterIntegration|Cluster')
+      .table-section.section-30{ role: 'rowheader' }
+        = s_('ClusterIntegration|Environment pattern')
+      .table-section.section-30{ role: 'rowheader' }
+        = s_('ClusterIntegration|Project namespace')
+      .table-section.section-10{ role: 'rowheader' }
+    .gl-responsive-table-row
+      .table-section.section-30
+        .table-mobile-header{ role: 'rowheader' }
+          = s_('ClusterIntegration|Cluster')
+        .table-mobile-content
+          Content goes here
+      .table-section.section-30
+        .table-mobile-header{ role: 'rowheader' }
+          = s_('ClusterIntegration|Environment pattern')
+        .table-mobile-content
+          Content goes here
+      .table-section.section-30
+        .table-mobile-header{ role: 'rowheader' }
+          = s_('ClusterIntegration|Project namespace')
+        .table-mobile-content
+          Content goes here
+      .table-section.section-10
+        .table-mobile-header{ role: 'rowheader' }
+        .table-mobile-content
+          %button{ type: 'button',
+            class: "js-toggle-cluster project-feature-toggle",
+            'aria-label': s_('ClusterIntegration|Toggle Cluster'),
+            data: { 'enabled-text': 'Enabled', 'disabled-text': 'Disabled' } }
+