diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css
index 677c86b..4afc6a6 100644
--- a/piggy/static/css/styles.css
+++ b/piggy/static/css/styles.css
@@ -239,7 +239,7 @@ h6 {
 }
 
 /* TODO: Consider a better solution for extra-card and resource card */
-.extra-card {
+.card-type-extra .card {
   background: linear-gradient(
     45deg,
     var(--piggy-extra-card-start) 0%,
@@ -248,8 +248,12 @@ h6 {
   border: var(--piggy-card-border-width) solid var(--piggy-extra-card-border);
 }
 
-.resource-card {
-  background-color: var(--piggy-resource-card-start);
+.card-type-resource .card {
+  background: linear-gradient(
+    45deg,
+    var(--piggy-resource-card-start) 0%,
+    var(--piggy-resource-card-end) 100%
+  );
   border: var(--piggy-card-border-width) solid var(--piggy-resource-card-border);
 }
 
diff --git a/piggy/static/css/themes/dark.css b/piggy/static/css/themes/dark.css
index 77c4d25..e80aa2e 100644
--- a/piggy/static/css/themes/dark.css
+++ b/piggy/static/css/themes/dark.css
@@ -31,8 +31,8 @@ description: The default dark theme.
   --piggy-extra-card-border: var(--piggy-extra-card-start);
   --piggy-text-extra-card: #ffffff;
 
-  --piggy-resource-card-start: rgba(212, 195, 98, 0.3); /* Gentle blues */
-  --piggy-resource-card-end: rgba(228, 213, 128, 0.3);
+  --piggy-resource-card-start: rgba(65, 59, 26, 0.3); /* Gentle blues */
+  --piggy-resource-card-end: rgba(201, 182, 75, 0.3);
   --piggy-resource-card-border: var(--piggy-resource-card-start);
   --piggy-text-resource-card: #4f4f4f; /* A gentle gray for contrast */
 
diff --git a/piggy/templates/assignments/3-subject.html b/piggy/templates/assignments/3-subject.html
index f1aefb7..4a5492e 100644
--- a/piggy/templates/assignments/3-subject.html
+++ b/piggy/templates/assignments/3-subject.html
@@ -1,34 +1,35 @@
 {% extends "layout.html" %}
-{% set ns = namespace(extra_content = false) %}
+{%
+  set types = [''] + segment.items()
+  | selectattr("1.meta.type", "defined")
+  | map(attribute="1.meta.type")
+  | list
+%}
 
 {% block base %}
   <h1 class="page-title font-extrabold text-center my-6">{{ meta.name }}</h1>
   {% include 'partials/search_box.html' %}
 
-  <div class="card-grid-wrapper">
-    <div class="card-grid-container">
-      {% if segment.items()|length > 0 %}
-        {% for item, data in segment.items() %}
-          {% if data.meta.type != "extra" %}
-            {% include 'objects/card-topic.html' %}
-          {% else %}
-            {% set ns.extra_content = true %}
-          {% endif %}
-        {% endfor %}
-      {% else %}
-        Hmm... There doesn't seem to be anything here!
-      {% endif %}
-    </div>
-    {% if ns.extra_content %}
-      <br />
-      <h3 class="extra-title text-2xl text-extrabold">Ekstra:</h3>
-      <div class="card-grid-container">
-        {% for item, data in segment.items() %}
-          {% if data.meta.type == "extra" %}
+  {% if segment.items()|length > 0 %}
+    {% for type in types %}
+      <div class="card-grid-wrapper">
+        {% if type != '' %}
+          <h3 class="extra-title text-2xl text-extrabold">
+            {{ type|capitalize }}:
+          </h3>
+        {% endif %}
+        <div
+          class="card-grid-container {% if type != '' %}card-type-{{ type }}{% endif %}"
+        >
+          {% for item, data in segment.items() if data.meta.type == type or (type == '' and data.meta.type is not defined) %}
             {% include 'objects/card-topic.html' %}
-          {% endif %}
-        {% endfor %}
+          {% endfor %}
+        </div>
       </div>
-    {% endif %}
-  </div>
+    {% endfor %}
+  {% else %}
+    <div class="card-grid-container">
+      Hmm... There doesn't seem to be anything here!
+    </div>
+  {% endif %}
 {% endblock %}
diff --git a/piggy/templates/objects/card-topic.html b/piggy/templates/objects/card-topic.html
index fc4326f..2b9fda5 100644
--- a/piggy/templates/objects/card-topic.html
+++ b/piggy/templates/objects/card-topic.html
@@ -9,7 +9,7 @@
     description = data.meta.description,
     thumbnail = media_abspath ~ "/" ~ item ~ "/media/header." + img_fmt,
     thumbnail_alt = "Header image for " ~ item,
-    extra_classes = 'extra-card' if data.meta.type == 'extra' else '',
+    extra_classes = 'card-type-' + data.meta.type if data.meta.type else '',
     difficulty = data.meta.difficulty,
     tags = data.meta.tags
   )