diff --git a/content/subprojects/blog/duckling.jpg b/content/subprojects/blog/duckling.jpg
new file mode 100644
index 0000000..3d25d00
Binary files /dev/null and b/content/subprojects/blog/duckling.jpg differ
diff --git a/content/subprojects/blog/index.md b/content/subprojects/blog/index.md
index b8989c4..d6f06d4 100644
--- a/content/subprojects/blog/index.md
+++ b/content/subprojects/blog/index.md
@@ -4,6 +4,8 @@ title = "Blogs"
 description = "Duckling offers the blogs feature borrowed from Duckquill 🦆"
 [taxonomies]
 tags = ["Demo", "Test"]
+[extra]
+preview = "duckling.jpg"
 +++
 
 Check out the [sample blog](/blog) to see the blogging feature in action!
diff --git a/content/subprojects/docs/index.md b/content/subprojects/docs/index.md
index 254060c..18ba5a6 100644
--- a/content/subprojects/docs/index.md
+++ b/content/subprojects/docs/index.md
@@ -5,7 +5,7 @@ description = "No need for a separate documentation page - coming soon!"
 [taxonomies]
 tags = ["Demo", "Test"]
 [extra]
-featured = true
+preview = "pond.jpg"
 +++
 
 This feature is not yet implemented. Coming soon!
diff --git a/content/subprojects/docs/pond.jpg b/content/subprojects/docs/pond.jpg
new file mode 100644
index 0000000..113fdaf
Binary files /dev/null and b/content/subprojects/docs/pond.jpg differ
diff --git a/content/subprojects/subproject/duckling.jpg b/content/subprojects/subproject/duckling.jpg
new file mode 100644
index 0000000..a7591c9
Binary files /dev/null and b/content/subprojects/subproject/duckling.jpg differ
diff --git a/content/subprojects/subproject/index.md b/content/subprojects/subproject/index.md
index 0da15cb..db23ff3 100644
--- a/content/subprojects/subproject/index.md
+++ b/content/subprojects/subproject/index.md
@@ -4,6 +4,8 @@ title = "Subprojects"
 description = "Showcase parts of your project!"
 [taxonomies]
 tags = ["Demo", "Test"]
+[extra]
+preview = "duckling.jpg"
 +++
 
 I'm an example for a subproject!
diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index d7859db..fca0f3c 100644
--- a/sass/_article-list.scss
+++ b/sass/_article-list.scss
@@ -2,6 +2,12 @@
 	flex-direction: column;
 }
 
+#article-list {
+	article {
+		padding: 1.5rem;
+	}
+}
+
 #article-list, #subproject-list {
 	display: flex;
 	gap: 1rem;
@@ -11,11 +17,10 @@
 		--bg-overlay: var(--accent-color-alpha);
 		position: relative;
 		transition: var(--transition);
-		border-radius: var(--rounded-corner);
 		background-position: center;
 		background-size: cover;
 		background-color: var(--fg-contrast-soft);
-		padding: 1.5rem;
+		border-radius: var(--rounded-corner);
 		overflow: hidden;
 
 		&:hover {
diff --git a/sass/_media.scss b/sass/_media.scss
index 07fab24..af1f235 100644
--- a/sass/_media.scss
+++ b/sass/_media.scss
@@ -103,7 +103,7 @@ video {
 	}
 }
 
-img {
+img:not(.preview) {
 	transition: var(--transition-longer);
 
 	&:not(
diff --git a/sass/_subproject-list.scss b/sass/_subproject-list.scss
index e0185a0..6466916 100644
--- a/sass/_subproject-list.scss
+++ b/sass/_subproject-list.scss
@@ -6,6 +6,19 @@
 		width: calc(50% - 0.5rem);
 		min-width: 300px;
 		flex-grow: 1;
+
+		img {
+			margin: 0;
+			border-bottom-left-radius: 0px;
+			border-bottom-right-radius: 0px;
+			box-shadow: none;
+			object-fit: cover;
+			height: 200px;
+			width: 100%;
+		}
+
+		#subproject-info {
+			padding: 1.5rem;
+		}
 	}
 }
-
diff --git a/templates/partials/subprojects.html b/templates/partials/subprojects.html
index 48cb1e3..1676a3d 100644
--- a/templates/partials/subprojects.html
+++ b/templates/partials/subprojects.html
@@ -24,10 +24,15 @@
 					{{- article_string -}}
 				</span>
 			{%- endif %}
-			<h3>{{ page.title }}</h3>
-			{%- if page.description %}
-				{{ page.description | markdown | safe }}
-			{%- endif %}
+			{%- if page.extra.preview -%}
+				<img class="preview" src="{{ current_url ~ page.slug ~ "/" ~ page.extra.preview }}" {% if config.markdown.lazy_async_image %}decoding="async" loading="lazy"{% endif %} />
+			{%- endif -%}
+			<div id="subproject-info">
+				<h3>{{ page.title }}</h3>
+				{%- if page.description %}
+					{{ page.description | markdown | safe }}
+				{%- endif %}
+			 </div>
 		</article>
 	{%- endfor %}
 </div>