diff --git a/app/templates/index.html b/app/templates/index.html
index 62bdb94e..4887b319 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -24,22 +24,7 @@ Dashboard
 </header>
 
 <main>
-	<ul class="packagegrid">
-		{% for p in packages %}
-			<li><a href="{{ p.getDetailsURL() }}"
-				style="background-image: url({{ p.getMainScreenshotURL() or '/static/placeholder.png' }});">
-				<div class="packagegridscrub"></div>
-				<div class="packagegridinfo">
-					<h3>{{ p.title }} by {{ p.author.display_name }}</h3>
-
-					<p>
-						{{ p.shortDesc }}
-					</p>
-				</div>
-			</a></li>
-		{% else %}
-			<li><i>No packages available</i></ul>
-		{% endfor %}
-	</ul>
+	{% from "macros/packagegridtile.html" import render_pkggrid %}
+	{{ render_pkggrid(packages) }}
 </main>
 {% endblock %}
diff --git a/app/templates/macros/packagegridtile.html b/app/templates/macros/packagegridtile.html
new file mode 100644
index 00000000..0ba39dbb
--- /dev/null
+++ b/app/templates/macros/packagegridtile.html
@@ -0,0 +1,23 @@
+{% macro render_pkgtile(package) -%}
+	<li><a href="{{ package.getDetailsURL() }}"
+		style="background-image: url({{ package.getMainScreenshotURL() or '/static/placeholder.png' }});">
+		<div class="packagegridscrub"></div>
+		<div class="packagegridinfo">
+			<h3>{{ package.title }} by {{ package.author.display_name }}</h3>
+
+			<p>
+				{{ package.shortDesc }}
+			</p>
+		</div>
+	</a></li>
+{% endmacro %}
+
+{% macro render_pkggrid(packages) -%}
+	<ul class="packagegrid">
+		{% for p in packages %}
+			{{ render_pkgtile(p) }}
+		{% else %}
+			<li><i>No packages available</i></ul>
+		{% endfor %}
+	</ul>
+{% endmacro %}