diff --git a/content/subprojects/docs/index.md b/content/subprojects/docs/index.md
index 18ba5a6..036e61a 100644
--- a/content/subprojects/docs/index.md
+++ b/content/subprojects/docs/index.md
@@ -6,6 +6,7 @@ description = "No need for a separate documentation page - coming soon!"
 tags = ["Demo", "Test"]
 [extra]
 preview = "pond.jpg"
+badge = "Coming Soon"
 +++
 
 This feature is not yet implemented. Coming soon!
diff --git a/content/subprojects/subproject/index.md b/content/subprojects/subproject/index.md
index db23ff3..e2ae254 100644
--- a/content/subprojects/subproject/index.md
+++ b/content/subprojects/subproject/index.md
@@ -6,6 +6,7 @@ description = "Showcase parts of your project!"
 tags = ["Demo", "Test"]
 [extra]
 preview = "duckling.jpg"
+badge = "New"
 +++
 
 I'm an example for a subproject!
diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index fca0f3c..3de2319 100644
--- a/sass/_article-list.scss
+++ b/sass/_article-list.scss
@@ -191,8 +191,11 @@
 				}
 			}
 
-			.badge {
+			.badge:not(.subproject-badge) {
 				background-color: var(--accent-color-alpha);
+			}
+
+			.badge {
 				color: var(--accent-color);
 
 				.icon {
diff --git a/sass/_subproject-list.scss b/sass/_subproject-list.scss
index 6466916..7753083 100644
--- a/sass/_subproject-list.scss
+++ b/sass/_subproject-list.scss
@@ -21,4 +21,14 @@
 			padding: 1.5rem;
 		}
 	}
+
+	.badge {
+		color: var(--accent-color);
+		pointer-events: none;
+		position: absolute;
+		z-index: 10;
+		margin: 20px;
+		right: 0;
+		background-color: var(--bg-color)
+	}
 }
diff --git a/templates/partials/subprojects.html b/templates/partials/subprojects.html
index 2c91edd..124e263 100644
--- a/templates/partials/subprojects.html
+++ b/templates/partials/subprojects.html
@@ -2,11 +2,18 @@
 	{%- for page in section.pages %}
 		<article>
 			<a href="{{ page.permalink | safe }}"></a>
+			{% if page.extra.badge %}
+					<span class="badge subproject-badge">
+						{{ page.extra.badge }}
+					</span>
+				{%- 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>
+				<h3>
+					{{ page.title }}
+				</h3>
 				{%- if page.description %}
 					{{ page.description | markdown | safe }}
 				{%- endif %}