diff --git a/src/_includes/partials/components/card.liquid b/src/_includes/partials/components/card.liquid
new file mode 100644
index 0000000..d69638f
--- /dev/null
+++ b/src/_includes/partials/components/card.liquid
@@ -0,0 +1,16 @@
+<li>
+  <article class="card" {% if background %}style="--background: {{ background }}"{% endif %}>
+    <div class="top">
+      <span></span>
+      <div class="links">
+        {%- for link in links -%}
+          <a href="{{ link.link }}" target="_blank" title="{{ link.title }}" class="{{ link.icon }}"></a>
+        {%- endfor -%}
+      </div>
+    </div>
+    <div class="content">
+      <h3>{{ title }}</h3>
+      <p>{{ description }}</p>
+    </div>
+  </article>
+</li>
\ No newline at end of file
diff --git a/src/_includes/partials/components/project-grid.liquid b/src/_includes/partials/components/project-grid.liquid
new file mode 100644
index 0000000..816f2a9
--- /dev/null
+++ b/src/_includes/partials/components/project-grid.liquid
@@ -0,0 +1,12 @@
+{% if projects %}
+  <ul class="project-grid">
+    {%- for project in projects -%}
+      {% assign data = project.data %}
+      {% render "partials/components/card", 
+          background: data.background, 
+          links: data.links, 
+          title: data.title, 
+          description: data.description %}
+    {%- endfor -%}
+  </ul>
+{% endif %}
\ No newline at end of file
diff --git a/src/_includes/partials/project.liquid b/src/_includes/partials/project.liquid
deleted file mode 100644
index adc839c..0000000
--- a/src/_includes/partials/project.liquid
+++ /dev/null
@@ -1,20 +0,0 @@
-<ul>
-  {%- for project in projects -%}
-    <li>
-      <article {% if project.data.background %}style="--background: {{ project.data.background }}"{% endif %}>
-        <div class="top">
-          <span></span>
-          <div class="links">
-            {%- for link in project.data.links -%}
-              <a href="{{ link.link }}" target="_blank" title="{{ link.title }}" class="{{ link.icon }}"></a>
-            {%- endfor -%}
-          </div>
-        </div>
-        <div class="content">
-          <h3>{{ project.data.title }}</h3>
-          <p>{{ project.data.description }}</p>
-        </div>
-      </article>
-    </li>
-  {%- endfor -%}
-</ul>
\ No newline at end of file