diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 7cf4f25cd..f7c1e37f1 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -21,19 +21,6 @@
 
 .projects-overview {
   margin: sizing.rems(l);
-
-  .projects {
-    display: flex;
-    padding: 20px 0;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    .project {
-      display: flex;
-      flex-direction: row;
-      padding: 10px 10px 10px 0;
-    }
-  }
 }
 
 .project-overview,
diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs
index 70873beaf..f141c2649 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -1,4 +1,5 @@
 <Rose::Layout::Page class="projects-overview" as |page|>
+
   <page.header>
     <h2>{{t "resources.projects"}}</h2>
   </page.header>
@@ -8,17 +9,17 @@
   </page.actions>
 
   <page.body>
-    <ul class="projects">
+    <Rose::Cards as |cards|>
       {{#each @model as |project|}}
-        <li class="project">
-          <Rose::Card::Link @title={{project.name}}
-            @subtitle={{project.id}}
-            @description={{project.description}}
-            @route="orgs.org.projects.project"
-            @model={{project}}
-          />
-        </li>
+        <cards.link
+          @title={{project.name}}
+          @subtitle={{project.id}}
+          @description={{project.description}}
+          @route="orgs.org.projects.project"
+          @model={{project}}
+        />
       {{/each}}
-    </ul>
+    </Rose::Cards>
   </page.body>
+
 </Rose::Layout::Page>