diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
index be0c843ef007c47fba0d9aaef8b7fd10c110f15e..ccdb47e31449652ecf23f4069f81648bb573b196 100644
--- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
@@ -146,6 +146,7 @@ export default {
             <span v-if="dueDate" class="order-md-1">
               <issue-due-date
                 :date="dueDate"
+                :closed="Boolean(closedAt)"
                 tooltip-placement="top"
                 css-class="item-due-date gl-display-flex gl-align-items-center"
               />
diff --git a/changelogs/unreleased/9202-dont-show-due-dates-in-red-if-issue-is-closed.yml b/changelogs/unreleased/9202-dont-show-due-dates-in-red-if-issue-is-closed.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8ef67d09439ce8b3469bd84c09110b7409794c4e
--- /dev/null
+++ b/changelogs/unreleased/9202-dont-show-due-dates-in-red-if-issue-is-closed.yml
@@ -0,0 +1,4 @@
+title: Don't show due dates in red if the issue is closed
+merge_request: 57647
+author: Daniel Ziegenberg <daniel@ziegenberg.at>
+type: fixed
diff --git a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
index 99bf0d84d0c4e48d300f9f5e19e60481f4b251f3..8738924f717c82a68621051a08c060dc17e26ed6 100644
--- a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
+++ b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
@@ -132,6 +132,35 @@ describe('RelatedIssuableItem', () => {
     it('renders due date component with correct due date', () => {
       expect(wrapper.find(IssueDueDate).props('date')).toBe(props.dueDate);
     });
+
+    it('does not render red icon for overdue issue that is closed', async () => {
+      mountComponent({
+        props: {
+          ...props,
+          closedAt: '2018-12-01T00:00:00.00Z',
+        },
+      });
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find(IssueDueDate).props('closed')).toBe(true);
+    });
+
+    it('should not contain the `.text-danger` css class for overdue issue that is closed', async () => {
+      mountComponent({
+        props: {
+          ...props,
+          closedAt: '2018-12-01T00:00:00.00Z',
+        },
+      });
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find(IssueDueDate).find('.board-card-info-icon').classes('text-danger')).toBe(
+        false,
+      );
+      expect(wrapper.find(IssueDueDate).find('.board-card-info-text').classes('text-danger')).toBe(
+        false,
+      );
+    });
   });
 
   describe('token assignees', () => {