diff --git a/assets/scss/pages/index.scss b/assets/scss/pages/index.scss
index 5dc1351..8e1ad8b 100644
--- a/assets/scss/pages/index.scss
+++ b/assets/scss/pages/index.scss
@@ -99,6 +99,23 @@
 	margin-bottom: 2em;
 }
 
+/* latest media */
+
+.media-list {
+	display: grid;
+	grid-gap: 1em;
+	grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
+}
+.media-item {
+	padding: 1em;
+	background: #ddd;
+	color: inherit;
+	text-decoration: none;
+	transition: opacity 0.2s ease-in-out;
+	&:hover {opacity: 0.6}
+	font-size: 1.25em;
+}
+
 /* contact section */
 #contact {background: #eee;}
 #contact .container {display: flex; flex-flow: column; align-items: center;}
diff --git a/layouts/index.html b/layouts/index.html
index 40859d0..ec956e3 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -33,6 +33,11 @@
 			{{ with .Params.latest }}
 			<h2 class="section-header">{{.}}</h2>
 			{{ end }}
+			<ul class="media-list">
+			{{- range ( where site.RegularPages "Section" "media" | first 6 ) }}
+			<a href="{{.Permalink}}" class="media-item"><li>{{.Title}}</li></a>
+			{{- end }}
+			</ul>
 		</div>
 	</section>
 	<section class="section" id="contact">
@@ -53,4 +58,4 @@
 		</div>
 	</section>
 </main>
-{{ end }}
+{{ end }}
\ No newline at end of file