diff --git a/hub/services/templates/services/article_detail.html b/hub/services/templates/services/article_detail.html
index 3727c08..3d864e8 100644
--- a/hub/services/templates/services/article_detail.html
+++ b/hub/services/templates/services/article_detail.html
@@ -97,15 +97,32 @@
                     <h3>Related Articles</h3>
                     <div class="row">
                         {% for related_article in related_articles %}
-                        <div class="col-12 col-md-4 mb-4">
-                            <div class="card h-100 clickable-card" onclick="cardClicked(event, '{{ related_article.get_absolute_url }}')">
+                        <div class="col-12 col-md-4 mb-30">
+                            <div class="card h-100 d-flex flex-column clickable-card" onclick="cardClicked(event, '{{ related_article.get_absolute_url }}')">
                                 {% if related_article.get_image %}
-                                <img src="{{ related_article.get_image.url }}" class="card-img-top mb-2" alt="{{ related_article.title }}" style="height: 200px; object-fit: cover;">
+                                <div class="d-flex justify-content-between mb-3">
+                                    <div class="card__image flex-shrink-0">
+                                        <img src="{{ related_article.get_image.url }}" alt="{{ related_article.title }}" class="img-fluid">
+                                    </div>
+                                </div>
                                 {% endif %}
-                                <div class="card-body d-flex flex-column">
-                                    <h5 class="card-title">{{ related_article.title }}</h5>
-                                    <p class="card-text flex-grow-1">{{ related_article.excerpt|truncatewords:15 }}</p>
-                                    <small class="text-muted">{{ related_article.created_at|date:"M d, Y" }}</small>
+                                <div class="card__content d-flex flex-column flex-grow-1">
+                                    <div class="card__header">
+                                        <h3 class="card__title">
+                                            {{ related_article.title }}
+                                        </h3>
+                                        <p class="card__subtitle">
+                                            <span class="text-muted">
+                                                By {{ related_article.author.get_full_name|default:related_article.author.username }}
+                                            </span>
+                                            <span class="text-muted ms-2">
+                                                {{ related_article.article_date|date:"M d, Y" }}
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <div class="card__desc flex-grow-1">
+                                        <p class="mb-0">{{ related_article.excerpt|truncatewords:15 }}</p>
+                                    </div>
                                 </div>
                             </div>
                         </div>