diff --git a/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
index b10a3727e9f638be8e4d743729aa632c8835774a..f50cfac90f734583832f9932487bed1cf0f2544f 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
@@ -149,7 +149,7 @@ export default {
           </span>
           <gl-link
             :href="childPath"
-            class="gl-text-truncate gl-text-black-normal! gl-font-weight-semibold"
+            class="gl-text-truncate gl-font-weight-semibold"
             data-testid="item-title"
             @click="$emit('click', $event)"
             @mouseover="$emit('mouseover')"
diff --git a/app/assets/javascripts/work_items/components/widget_wrapper.vue b/app/assets/javascripts/work_items/components/widget_wrapper.vue
index f343f78735817aa3965b5074cacbb04ef589abe3..27de858fe4eabd947bfadc143c37918adc34ffb1 100644
--- a/app/assets/javascripts/work_items/components/widget_wrapper.vue
+++ b/app/assets/javascripts/work_items/components/widget_wrapper.vue
@@ -14,6 +14,11 @@ export default {
       required: false,
       default: '',
     },
+    widgetName: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -30,6 +35,12 @@ export default {
     isOpenString() {
       return this.isOpen ? 'true' : 'false';
     },
+    anchorLink() {
+      return `#${this.widgetName}`;
+    },
+    anchorLinkId() {
+      return `user-content-${this.widgetName}-links`;
+    },
   },
   methods: {
     hide() {
@@ -46,14 +57,14 @@ export default {
 </script>
 
 <template>
-  <div id="tasks" class="gl-new-card" :aria-expanded="isOpenString">
+  <div :id="widgetName" class="gl-new-card" :aria-expanded="isOpenString">
     <div class="gl-new-card-header">
       <div class="gl-new-card-title-wrapper">
         <h3 class="gl-new-card-title">
           <gl-link
-            id="user-content-tasks-links"
-            class="anchor position-absolute gl-text-decoration-none"
-            href="#tasks"
+            :id="anchorLinkId"
+            class="gl-text-decoration-none"
+            :href="anchorLink"
             aria-hidden="true"
           />
           <slot name="header"></slot>
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 6beca682f8f441ac13fb10380289faf3466c0003..edecd7addcc727e70e68e12ed9e44e0a33c58141 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -606,7 +606,8 @@ export default {
             <work-item-relationships
               v-if="showWorkItemLinkedItems"
               :work-item-iid="workItemIid"
-              :work-item-fullpath="workItem.project.fullPath"
+              :work-item-full-path="workItem.project.fullPath"
+              @showModal="openInModal"
             />
             <work-item-notes
               v-if="workItemNotes"
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue
index bf427feaa3567e6aae992aa8cc2a9b403dccd46e..9d9414b53993cdc58cff55c7a3ac878f8a20d449 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue
@@ -56,14 +56,14 @@ export default {
       return isLoggedIn() && this.canUpdate;
     },
     treeRootWrapper() {
-      return this.canReorder ? Draggable : 'div';
+      return this.canReorder ? Draggable : 'ul';
     },
     treeRootOptions() {
       const options = {
         ...defaultSortableOptions,
         fallbackOnBody: false,
         group: 'sortable-container',
-        tag: 'div',
+        tag: 'ul',
         'ghost-class': 'tree-item-drag-active',
         'data-parent-id': this.workItemId,
         value: this.children,
@@ -248,6 +248,7 @@ export default {
   <component
     :is="treeRootWrapper"
     v-bind="treeRootOptions"
+    class="content-list"
     :class="{ 'gl-cursor-grab sortable-container': canReorder }"
     @end="handleDragOnEnd"
   >
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
index 4c85652178f102e00675751b23bcefdd813ad9cc..679287338c810d585f5046382b2fbc1ec39bc5dd 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
@@ -213,7 +213,7 @@ export default {
 </script>
 
 <template>
-  <div class="tree-item">
+  <li class="tree-item">
     <div
       class="gl-display-flex gl-align-items-flex-start"
       :class="{ 'gl-ml-6': canHaveChildren && !hasChildren && hasIndirectChildren }"
@@ -250,5 +250,5 @@ export default {
       @removeChild="removeChild"
       @click="$emit('click', $event)"
     />
-  </div>
+  </li>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
index a0ff693e1569ae834e6a87c847f53ac3b50f726c..eb836007e75b26e988600d4481a0b8e5e5fa4526 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
@@ -103,6 +103,7 @@ export default {
       isReportDrawerOpen: false,
       reportedUserId: 0,
       reportedUrl: '',
+      widgetName: 'tasks',
     };
   },
   computed: {
@@ -166,7 +167,6 @@ export default {
       this.updateWorkItemIdUrlQuery(child);
     },
     async closeModal() {
-      this.activeChild = {};
       this.updateWorkItemIdUrlQuery();
     },
     handleWorkItemDeleted(child) {
@@ -206,6 +206,7 @@ export default {
   <widget-wrapper
     ref="wrapper"
     :error="error"
+    :widget-name="widgetName"
     data-testid="work-item-links"
     @dismissAlert="error = undefined"
   >
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
index 246eac82c784115bc78479284cc2be8f6683ac6a..bc3f5201fb8fc3f6e7373f7ebb652ce8ddb606ad 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
@@ -64,6 +64,7 @@ export default {
       isShownAddForm: false,
       formType: null,
       childType: null,
+      widgetName: 'tasks',
     };
   },
   computed: {
@@ -101,6 +102,7 @@ export default {
 <template>
   <widget-wrapper
     ref="wrapper"
+    :widget-name="widgetName"
     :error="error"
     data-testid="work-item-tree"
     @dismissAlert="error = undefined"
diff --git a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cbe830f9565ae77192857ac104d6dbe6ee173a77
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationship_list.vue
@@ -0,0 +1,61 @@
+<script>
+import WorkItemLinkChildContents from '../shared/work_item_link_child_contents.vue';
+import { workItemPath } from '../../utils';
+
+export default {
+  components: {
+    WorkItemLinkChildContents,
+  },
+  props: {
+    linkedItems: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    heading: {
+      type: String,
+      required: true,
+    },
+    canUpdate: {
+      type: Boolean,
+      required: true,
+    },
+    workItemFullPath: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    linkedItemPath(fullPath, id) {
+      return workItemPath(fullPath, id);
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <h4
+      v-if="heading"
+      data-testid="work-items-list-heading"
+      class="gl-font-sm gl-font-weight-semibold gl-text-gray-700 gl-mx-2 gl-mt-3 gl-mb-2"
+    >
+      {{ heading }}
+    </h4>
+    <div class="work-items-list-body">
+      <ul ref="list" class="work-items-list content-list">
+        <li
+          v-for="linkedItem in linkedItems"
+          :key="linkedItem.workItem.id"
+          class="gl-pt-0! gl-pb-0! gl-border-b-0!"
+        >
+          <work-item-link-child-contents
+            :child-item="linkedItem.workItem"
+            :can-update="canUpdate"
+            :child-path="linkedItemPath(workItemFullPath, linkedItem.workItem.iid)"
+            @click="$emit('showModal', { event: $event, child: linkedItem.workItem })"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
index 7e58627b92fce6d0fe3046f4253f641e8309fe92..4f6879e9605f4f3314074cba39a6f7aff0f3a7e0 100644
--- a/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
+++ b/app/assets/javascripts/work_items/components/work_item_relationships/work_item_relationships.vue
@@ -1,37 +1,135 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon, GlButton } from '@gitlab/ui';
 
 import { s__ } from '~/locale';
 
+import workItemByIidQuery from '../../graphql/work_item_by_iid.query.graphql';
+import { WIDGET_TYPE_LINKED_ITEMS, LINKED_CATEGORIES_MAP } from '../../constants';
+
 import WidgetWrapper from '../widget_wrapper.vue';
+import WorkItemRelationshipList from './work_item_relationship_list.vue';
 
 export default {
   components: {
-    WidgetWrapper,
+    GlLoadingIcon,
+    GlIcon,
     GlButton,
+    WidgetWrapper,
+    WorkItemRelationshipList,
   },
   props: {
     workItemIid: {
       type: String,
       required: true,
     },
-    workItemFullpath: {
+    workItemFullPath: {
       type: String,
       required: true,
     },
   },
+  apollo: {
+    workItem: {
+      query: workItemByIidQuery,
+      variables() {
+        return {
+          fullPath: this.workItemFullPath,
+          iid: this.workItemIid,
+        };
+      },
+      update(data) {
+        return data.workspace.workItems.nodes[0] ?? {};
+      },
+      context: {
+        isSingleRequest: true,
+      },
+      skip() {
+        return !this.workItemIid;
+      },
+      error(e) {
+        this.error = e.message || this.$options.i18n.fetchError;
+      },
+      async result() {
+        // When work items are switched in a modal, the data props are not getting reset.
+        // Thus, duplicating the work items in the list.
+        // Here, the existing list are cleared before the new items are pushed.
+        this.linksRelatesTo = [];
+        this.linksIsBlockedBy = [];
+        this.linksBlocks = [];
+
+        this.linkedWorkItems.forEach((item) => {
+          if (item.linkType === LINKED_CATEGORIES_MAP.RELATES_TO) {
+            this.linksRelatesTo.push(item);
+          } else if (item.linkType === LINKED_CATEGORIES_MAP.IS_BLOCKED_BY) {
+            this.linksIsBlockedBy.push(item);
+          } else if (item.linkType === LINKED_CATEGORIES_MAP.BLOCKS) {
+            this.linksBlocks.push(item);
+          }
+        });
+      },
+    },
+  },
+  data() {
+    return {
+      error: '',
+      linksRelatesTo: [],
+      linksIsBlockedBy: [],
+      linksBlocks: [],
+      widgetName: 'linkeditems',
+    };
+  },
+  computed: {
+    canUpdate() {
+      // This will be false untill we implement remove item mutation
+      return false;
+    },
+    isLoading() {
+      return this.$apollo.queries.workItem.loading;
+    },
+    linkedWorkItemsWidget() {
+      return this.workItem?.widgets?.find((widget) => widget.type === WIDGET_TYPE_LINKED_ITEMS);
+    },
+    linkedWorkItems() {
+      return this.linkedWorkItemsWidget?.linkedItems?.nodes || [];
+    },
+    linkedWorkItemsCount() {
+      return this.linkedWorkItems.length;
+    },
+    isEmptyRelatedWorkItems() {
+      return !this.error && this.linkedWorkItems.length === 0;
+    },
+  },
   i18n: {
     title: s__('WorkItem|Linked Items'),
+    fetchError: s__('WorkItem|Something went wrong when fetching tasks. Please refresh this page.'),
     emptyStateMessage: s__(
       "WorkItem|Link work items together to show that they're related or that one is blocking others.",
     ),
+    addChildButtonLabel: s__('WorkItem|Add'),
+    relatedToTitle: s__('WorkItem|Related to'),
+    blockingTitle: s__('WorkItem|Blocking'),
+    blockedByTitle: s__('WorkItem|Blocked by'),
     addLinkedWorkItemButtonLabel: s__('WorkItem|Add'),
   },
 };
 </script>
 <template>
-  <widget-wrapper class="work-item-relationships">
-    <template #header>{{ $options.i18n.title }}</template>
+  <widget-wrapper
+    :error="error"
+    class="work-item-relationships"
+    :widget-name="widgetName"
+    @dismissAlert="error = undefined"
+  >
+    <template #header>
+      <div class="gl-new-card-title-wrapper">
+        <h3 class="gl-new-card-title">
+          {{ $options.i18n.title }}
+        </h3>
+        <div v-if="linkedWorkItemsCount" class="gl-new-card-count">
+          <gl-icon name="link" class="gl-mr-2" />
+          <span data-testid="linked-items-count">{{ linkedWorkItemsCount }}</span>
+        </div>
+      </div>
+    </template>
     <template #header-right>
       <gl-button size="small" class="gl-ml-3">
         <slot name="add-button-text">{{ $options.i18n.addLinkedWorkItemButtonLabel }}</slot>
@@ -39,11 +137,48 @@ export default {
     </template>
     <template #body>
       <div class="gl-new-card-content">
-        <div data-testid="links-empty">
-          <p class="gl-new-card-empty">
-            {{ $options.i18n.emptyStateMessage }}
-          </p>
-        </div>
+        <gl-loading-icon v-if="isLoading" color="dark" class="gl-my-2" />
+        <template v-else>
+          <div v-if="isEmptyRelatedWorkItems" data-testid="links-empty">
+            <p class="gl-new-card-empty">
+              {{ $options.i18n.emptyStateMessage }}
+            </p>
+          </div>
+          <template v-else>
+            <work-item-relationship-list
+              v-if="linksBlocks.length"
+              :class="{
+                'gl-pb-3 gl-mb-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100':
+                  linksIsBlockedBy.length,
+              }"
+              :linked-items="linksBlocks"
+              :heading="$options.i18n.blockingTitle"
+              :work-item-full-path="workItemFullPath"
+              :can-update="canUpdate"
+              @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
+            />
+            <work-item-relationship-list
+              v-if="linksIsBlockedBy.length"
+              :class="{
+                'gl-pb-3 gl-mb-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100':
+                  linksRelatesTo.length,
+              }"
+              :linked-items="linksIsBlockedBy"
+              :heading="$options.i18n.blockedByTitle"
+              :work-item-full-path="workItemFullPath"
+              :can-update="canUpdate"
+              @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
+            />
+            <work-item-relationship-list
+              v-if="linksRelatesTo.length"
+              :linked-items="linksRelatesTo"
+              :heading="$options.i18n.relatedToTitle"
+              :work-item-full-path="workItemFullPath"
+              :can-update="canUpdate"
+              @showModal="$emit('showModal', { event: $event.event, modalWorkItem: $event.child })"
+            />
+          </template>
+        </template>
       </div>
     </template>
   </widget-wrapper>
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 2834799e4e8cf76a07ff24d579df3a0cff03f70c..2b11824742628112586b86571248eef3f6921427 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -256,3 +256,9 @@ export const WORK_ITEM_TO_ISSUE_MAP = {
   [WIDGET_TYPE_HEALTH_STATUS]: 'healthStatus',
   [WIDGET_TYPE_AWARD_EMOJI]: 'awardEmoji',
 };
+
+export const LINKED_CATEGORIES_MAP = {
+  RELATES_TO: 'relates_to',
+  IS_BLOCKED_BY: 'is_blocked_by',
+  BLOCKS: 'blocks',
+};
diff --git a/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
index 14cb6f8415c423bea0a6c34f12c8c1358524376c..ffc9fe2f7f73b42452e9098f7ed5e1f05d98eaa7 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
@@ -103,5 +103,28 @@ fragment WorkItemWidgets on WorkItemWidget {
 
   ... on WorkItemWidgetLinkedItems {
     type
+    linkedItems {
+      nodes {
+        linkId
+        linkType
+        workItem {
+          id
+          iid
+          confidential
+          workItemType {
+            id
+            name
+            iconName
+          }
+          title
+          state
+          createdAt
+          closedAt
+          widgets {
+            ...WorkItemMetadataWidgets
+          }
+        }
+      }
+    }
   }
 }
diff --git a/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql b/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
index 0c7e85131e9a185d54c0a160a0d015bf49e0b17f..8d71e43db856c65b0abff6db170c41bc8701d21d 100644
--- a/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
+++ b/ee/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
@@ -125,8 +125,30 @@ fragment WorkItemWidgets on WorkItemWidget {
   ... on WorkItemWidgetAwardEmoji {
     type
   }
-
   ... on WorkItemWidgetLinkedItems {
     type
+    linkedItems {
+      nodes {
+        linkId
+        linkType
+        workItem {
+          id
+          iid
+          confidential
+          workItemType {
+            id
+            name
+            iconName
+          }
+          title
+          state
+          createdAt
+          closedAt
+          widgets {
+            ...WorkItemMetadataWidgets
+          }
+        }
+      }
+    }
   }
 }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 879f03519b060b118064ec789a4911af8afe6494..42d3797f669834f8bfab29de8905ea6659e5dda3 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -53493,6 +53493,12 @@ msgid_plural "WorkItem|Assignees"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "WorkItem|Blocked by"
+msgstr ""
+
+msgid "WorkItem|Blocking"
+msgstr ""
+
 msgid "WorkItem|Cancel"
 msgstr ""
 
@@ -53616,6 +53622,9 @@ msgstr ""
 msgid "WorkItem|Promoted to objective."
 msgstr ""
 
+msgid "WorkItem|Related to"
+msgstr ""
+
 msgid "WorkItem|Remove"
 msgstr ""
 
diff --git a/spec/frontend/work_items/components/shared/work_item_link_child_contents_spec.js b/spec/frontend/work_items/components/shared/work_item_link_child_contents_spec.js
index 9a20e2ec98fe099ba59ebe5a65dad671df508aac..b86f9ff34aeb0b81bb9e41ff44658a46bf2a0f51 100644
--- a/spec/frontend/work_items/components/shared/work_item_link_child_contents_spec.js
+++ b/spec/frontend/work_items/components/shared/work_item_link_child_contents_spec.js
@@ -10,7 +10,7 @@ import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip
 
 import WorkItemLinkChildContents from '~/work_items/components/shared/work_item_link_child_contents.vue';
 import WorkItemLinksMenu from '~/work_items/components/shared/work_item_links_menu.vue';
-import { TASK_TYPE_NAME, WORK_ITEM_TYPE_VALUE_OBJECTIVE } from '~/work_items/constants';
+import { WORK_ITEM_TYPE_VALUE_OBJECTIVE } from '~/work_items/constants';
 
 import {
   workItemTask,
@@ -26,11 +26,9 @@ jest.mock('~/alert');
 describe('WorkItemLinkChildContents', () => {
   Vue.use(VueApollo);
 
-  const WORK_ITEM_ID = 'gid://gitlab/WorkItem/2';
   let wrapper;
   const { LABELS } = workItemObjectiveMetadataWidgets;
   const mockLabels = LABELS.labels.nodes;
-  const mockFullPath = 'gitlab-org/gitlab-test';
 
   const findStatusIconComponent = () =>
     wrapper.findByTestId('item-status-icon').findComponent(GlIcon);
@@ -43,19 +41,11 @@ describe('WorkItemLinkChildContents', () => {
   const findScopedLabel = () => findAllLabels().at(1);
   const findLinksMenuComponent = () => wrapper.findComponent(WorkItemLinksMenu);
 
-  const createComponent = ({
-    canUpdate = true,
-    parentWorkItemId = WORK_ITEM_ID,
-    childItem = workItemTask,
-    workItemType = TASK_TYPE_NAME,
-  } = {}) => {
+  const createComponent = ({ canUpdate = true, childItem = workItemTask } = {}) => {
     wrapper = shallowMountExtended(WorkItemLinkChildContents, {
       propsData: {
         canUpdate,
-        parentWorkItemId,
         childItem,
-        workItemType,
-        fullPath: mockFullPath,
         childPath: '/gitlab-org/gitlab-test/-/work_items/4',
       },
     });
diff --git a/spec/frontend/work_items/components/work_item_detail_spec.js b/spec/frontend/work_items/components/work_item_detail_spec.js
index 638a92dbd17bb4fd7bf7469da5a5be4693245b53..fec6d0673c6e82d0fd3b99739c15213cd359766c 100644
--- a/spec/frontend/work_items/components/work_item_detail_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_spec.js
@@ -20,6 +20,7 @@ import WorkItemCreatedUpdated from '~/work_items/components/work_item_created_up
 import WorkItemAttributesWrapper from '~/work_items/components/work_item_attributes_wrapper.vue';
 import WorkItemTitle from '~/work_items/components/work_item_title.vue';
 import WorkItemTree from '~/work_items/components/work_item_links/work_item_tree.vue';
+import WorkItemRelationships from '~/work_items/components/work_item_relationships/work_item_relationships.vue';
 import WorkItemNotes from '~/work_items/components/work_item_notes.vue';
 import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
 import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
@@ -37,6 +38,7 @@ import {
   workItemByIidResponseFactory,
   objectiveType,
   mockWorkItemCommentNote,
+  mockBlockingLinkedItem,
 } from '../mock_data';
 
 jest.mock('~/lib/utils/common_utils');
@@ -76,6 +78,7 @@ describe('WorkItemDetail component', () => {
   const findCloseButton = () => wrapper.findByTestId('work-item-close');
   const findWorkItemType = () => wrapper.findByTestId('work-item-type');
   const findHierarchyTree = () => wrapper.findComponent(WorkItemTree);
+  const findWorkItemRelationships = () => wrapper.findComponent(WorkItemRelationships);
   const findNotesWidget = () => wrapper.findComponent(WorkItemNotes);
   const findModal = () => wrapper.findComponent(WorkItemDetailModal);
   const findAbuseCategorySelector = () => wrapper.findComponent(AbuseCategorySelector);
@@ -96,6 +99,7 @@ describe('WorkItemDetail component', () => {
     confidentialityMock = [updateWorkItemMutation, jest.fn()],
     error = undefined,
     workItemsMvc2Enabled = false,
+    linkedWorkItemsEnabled = false,
   } = {}) => {
     const handlers = [
       [workItemByIidQuery, handler],
@@ -119,6 +123,7 @@ describe('WorkItemDetail component', () => {
       provide: {
         glFeatures: {
           workItemsMvc2: workItemsMvc2Enabled,
+          linkedWorkItems: linkedWorkItemsEnabled,
         },
         hasIssueWeightsFeature: true,
         hasIterationsFeature: true,
@@ -581,6 +586,82 @@ describe('WorkItemDetail component', () => {
     });
   });
 
+  describe('relationship widget', () => {
+    it('does not render linked items by default', async () => {
+      createComponent();
+      await waitForPromises();
+
+      expect(findWorkItemRelationships().exists()).toBe(false);
+    });
+
+    describe('work item has children', () => {
+      const mockWorkItemLinkedItem = workItemByIidResponseFactory({
+        linkedItems: mockBlockingLinkedItem,
+      });
+      const handler = jest.fn().mockResolvedValue(mockWorkItemLinkedItem);
+
+      it('renders relationship widget when work item has linked items', async () => {
+        createComponent({ handler, linkedWorkItemsEnabled: true });
+        await waitForPromises();
+
+        expect(findWorkItemRelationships().exists()).toBe(true);
+      });
+
+      it('opens the modal with the linked item when `showModal` is emitted', async () => {
+        createComponent({
+          handler,
+          linkedWorkItemsEnabled: true,
+          workItemsMvc2Enabled: true,
+        });
+        await waitForPromises();
+
+        const event = {
+          preventDefault: jest.fn(),
+        };
+
+        findWorkItemRelationships().vm.$emit('showModal', {
+          event,
+          modalWorkItem: { id: 'childWorkItemId' },
+        });
+        await waitForPromises();
+
+        expect(findModal().props().workItemId).toBe('childWorkItemId');
+        expect(showModalHandler).toHaveBeenCalled();
+      });
+
+      describe('linked work item is rendered in a modal and has linked items', () => {
+        beforeEach(async () => {
+          createComponent({
+            isModal: true,
+            handler,
+            workItemsMvc2Enabled: true,
+            linkedWorkItemsEnabled: true,
+          });
+
+          await waitForPromises();
+        });
+
+        it('does not render a new modal', () => {
+          expect(findModal().exists()).toBe(false);
+        });
+
+        it('emits `update-modal` when `show-modal` is emitted', async () => {
+          const event = {
+            preventDefault: jest.fn(),
+          };
+
+          findWorkItemRelationships().vm.$emit('showModal', {
+            event,
+            modalWorkItem: { id: 'childWorkItemId' },
+          });
+          await waitForPromises();
+
+          expect(wrapper.emitted('update-modal')).toBeDefined();
+        });
+      });
+    });
+  });
+
   describe('notes widget', () => {
     it('renders notes by default', async () => {
       createComponent();
diff --git a/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap b/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..9105e4de5e0a96f4333e518e9188cec9f3a57cfa
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_relationships/__snapshots__/work_item_relationship_list_spec.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkItemRelationshipList renders linked item list 1`] = `
+<div>
+  <h4
+    class="gl-font-sm gl-font-weight-semibold gl-mb-2 gl-mt-3 gl-mx-2 gl-text-gray-700"
+    data-testid="work-items-list-heading"
+  >
+    Blocking
+  </h4>
+  <div
+    class="work-items-list-body"
+  >
+    <ul
+      class="content-list work-items-list"
+    >
+      <li
+        class="gl-border-b-0! gl-pb-0! gl-pt-0!"
+      >
+        <work-item-link-child-contents-stub
+          canupdate="true"
+          childitem="[object Object]"
+          childpath="/test-project-path/-/work_items/83"
+        />
+      </li>
+    </ul>
+  </div>
+</div>
+`;
diff --git a/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js b/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..759ab7e14dacfea31fa289011b1000bb7b56a385
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_relationships/work_item_relationship_list_spec.js
@@ -0,0 +1,41 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import WorkItemRelationshipList from '~/work_items/components/work_item_relationships/work_item_relationship_list.vue';
+import WorkItemLinkChildContents from '~/work_items/components/shared/work_item_link_child_contents.vue';
+
+import { mockBlockingLinkedItem } from '../../mock_data';
+
+describe('WorkItemRelationshipList', () => {
+  let wrapper;
+  const mockLinkedItems = mockBlockingLinkedItem.linkedItems.nodes;
+
+  const createComponent = ({ linkedItems = [], heading = 'Blocking', canUpdate = true } = {}) => {
+    wrapper = shallowMountExtended(WorkItemRelationshipList, {
+      propsData: {
+        linkedItems,
+        heading,
+        canUpdate,
+        workItemFullPath: 'test-project-path',
+      },
+    });
+  };
+
+  const findHeading = () => wrapper.findByTestId('work-items-list-heading');
+  const findWorkItemLinkChildContents = () => wrapper.findComponent(WorkItemLinkChildContents);
+
+  beforeEach(() => {
+    createComponent({ linkedItems: mockLinkedItems });
+  });
+
+  it('renders linked item list', () => {
+    expect(findHeading().text()).toBe('Blocking');
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('renders work item link child contents with correct props', () => {
+    expect(findWorkItemLinkChildContents().props()).toMatchObject({
+      childItem: mockLinkedItems[0].workItem,
+      canUpdate: true,
+      childPath: '/test-project-path/-/work_items/83',
+    });
+  });
+});
diff --git a/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js b/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js
index 18d13aa251e762cafa16e6394c435ef6aa3151a8..c9a2499b127db0f00f8a98b7ca1e0ec90f241529 100644
--- a/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js
+++ b/spec/frontend/work_items/components/work_item_relationships/work_item_relationships_spec.js
@@ -1,25 +1,93 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlLoadingIcon } from '@gitlab/ui';
+
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+
+import WidgetWrapper from '~/work_items/components/widget_wrapper.vue';
 import WorkItemRelationships from '~/work_items/components/work_item_relationships/work_item_relationships.vue';
+import WorkItemRelationshipList from '~/work_items/components/work_item_relationships/work_item_relationship_list.vue';
+import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
+
+import {
+  workItemByIidResponseFactory,
+  mockLinkedItems,
+  mockBlockingLinkedItem,
+} from '../../mock_data';
 
 describe('WorkItemRelationships', () => {
+  Vue.use(VueApollo);
+
   let wrapper;
+  const emptyLinkedWorkItemsQueryHandler = jest
+    .fn()
+    .mockResolvedValue(workItemByIidResponseFactory());
+  const linkedWorkItemsQueryHandler = jest
+    .fn()
+    .mockResolvedValue(workItemByIidResponseFactory({ linkedItems: mockLinkedItems }));
+  const blockingLinkedWorkItemQueryHandler = jest
+    .fn()
+    .mockResolvedValue(workItemByIidResponseFactory({ linkedItems: mockBlockingLinkedItem }));
+
+  const createComponent = async ({
+    workItemQueryHandler = emptyLinkedWorkItemsQueryHandler,
+  } = {}) => {
+    const mockApollo = createMockApollo([[workItemByIidQuery, workItemQueryHandler]]);
 
-  const createComponent = async () => {
     wrapper = shallowMountExtended(WorkItemRelationships, {
+      apolloProvider: mockApollo,
       propsData: {
-        workItem: {},
         workItemIid: '1',
-        workItemFullpath: 'gitlab/path',
+        workItemFullPath: 'test-project-path',
       },
     });
 
     await waitForPromises();
   };
 
-  it('renders the component', () => {
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findWidgetWrapper = () => wrapper.findComponent(WidgetWrapper);
+  const findEmptyRelatedMessageContainer = () => wrapper.findByTestId('links-empty');
+  const findLinkedItemsCountContainer = () => wrapper.findByTestId('linked-items-count');
+  const findAllWorkItemRelationshipListComponents = () =>
+    wrapper.findAllComponents(WorkItemRelationshipList);
+
+  it('shows loading icon when query is not processed', () => {
     createComponent();
 
+    expect(findLoadingIcon().exists()).toBe(true);
+  });
+
+  it('renders the component with empty message when there are no items', async () => {
+    await createComponent();
+
     expect(wrapper.find('.work-item-relationships').exists()).toBe(true);
+    expect(findEmptyRelatedMessageContainer().exists()).toBe(true);
+  });
+
+  it('renders blocking linked item lists', async () => {
+    await createComponent({ workItemQueryHandler: blockingLinkedWorkItemQueryHandler });
+
+    expect(findAllWorkItemRelationshipListComponents().length).toBe(1);
+    expect(findLinkedItemsCountContainer().text()).toBe('1');
+  });
+
+  it('renders blocking, blocked by and related to linked item lists with proper count', async () => {
+    await createComponent({ workItemQueryHandler: linkedWorkItemsQueryHandler });
+
+    // renders all 3 lists: blocking, blocked by and related to
+    expect(findAllWorkItemRelationshipListComponents().length).toBe(3);
+    expect(findLinkedItemsCountContainer().text()).toBe('3');
+  });
+
+  it('shows an alert when list loading fails', async () => {
+    const errorMessage = 'Some error';
+    await createComponent({
+      workItemQueryHandler: jest.fn().mockRejectedValue(new Error(errorMessage)),
+    });
+
+    expect(findWidgetWrapper().props('error')).toBe(errorMessage);
   });
 });
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index ea4115f178f5a1e99f775573c5b43e8ca6b66338..77d2027d537cc0f55456b7f10641c0891ac83c06 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -1,3 +1,5 @@
+import { WIDGET_TYPE_LINKED_ITEMS } from '~/work_items/constants';
+
 export const mockAssignees = [
   {
     __typename: 'UserCore',
@@ -451,6 +453,126 @@ export const objectiveType = {
   iconName: 'issue-type-objective',
 };
 
+export const mockEmptyLinkedItems = {
+  type: WIDGET_TYPE_LINKED_ITEMS,
+  blocked: false,
+  blockedByCount: 0,
+  blockingCount: 0,
+  linkedItems: {
+    nodes: [],
+    __typename: 'LinkedWorkItemTypeConnection',
+  },
+  __typename: 'WorkItemWidgetLinkedItems',
+};
+
+export const mockBlockingLinkedItem = {
+  type: WIDGET_TYPE_LINKED_ITEMS,
+  linkedItems: {
+    nodes: [
+      {
+        linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/8',
+        linkType: 'blocks',
+        workItem: {
+          id: 'gid://gitlab/WorkItem/675',
+          iid: '83',
+          confidential: true,
+          workItemType: {
+            id: 'gid://gitlab/WorkItems::Type/5',
+            name: 'Task',
+            iconName: 'issue-type-task',
+            __typename: 'WorkItemType',
+          },
+          title: 'Task 1201',
+          state: 'OPEN',
+          createdAt: '2023-03-28T10:50:16Z',
+          closedAt: null,
+          widgets: [],
+          __typename: 'WorkItem',
+        },
+        __typename: 'LinkedWorkItemType',
+      },
+    ],
+    __typename: 'LinkedWorkItemTypeConnection',
+  },
+  __typename: 'WorkItemWidgetLinkedItems',
+};
+
+export const mockLinkedItems = {
+  type: WIDGET_TYPE_LINKED_ITEMS,
+  linkedItems: {
+    nodes: [
+      {
+        linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/8',
+        linkType: 'relates_to',
+        workItem: {
+          id: 'gid://gitlab/WorkItem/675',
+          iid: '83',
+          confidential: true,
+          workItemType: {
+            id: 'gid://gitlab/WorkItems::Type/5',
+            name: 'Task',
+            iconName: 'issue-type-task',
+            __typename: 'WorkItemType',
+          },
+          title: 'Task 1201',
+          state: 'OPEN',
+          createdAt: '2023-03-28T10:50:16Z',
+          closedAt: null,
+          widgets: [],
+          __typename: 'WorkItem',
+        },
+        __typename: 'LinkedWorkItemType',
+      },
+      {
+        linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/9',
+        linkType: 'is_blocked_by',
+        workItem: {
+          id: 'gid://gitlab/WorkItem/646',
+          iid: '55',
+          confidential: true,
+          workItemType: {
+            id: 'gid://gitlab/WorkItems::Type/6',
+            name: 'Objective',
+            iconName: 'issue-type-objective',
+            __typename: 'WorkItemType',
+          },
+          title: 'Multilevel Objective 1',
+          state: 'OPEN',
+          createdAt: '2023-03-28T10:50:16Z',
+          closedAt: null,
+          widgets: [],
+          __typename: 'WorkItem',
+        },
+        __typename: 'LinkedWorkItemType',
+      },
+      {
+        linkId: 'gid://gitlab/WorkItems::RelatedWorkItemLink/10',
+        linkType: 'blocks',
+        workItem: {
+          id: 'gid://gitlab/WorkItem/647',
+          iid: '56',
+          confidential: true,
+          workItemType: {
+            id: 'gid://gitlab/WorkItems::Type/6',
+            name: 'Objective',
+            iconName: 'issue-type-objective',
+            __typename: 'WorkItemType',
+          },
+          title: 'Multilevel Objective 2',
+          state: 'OPEN',
+          createdAt: '2023-03-28T10:50:16Z',
+          closedAt: null,
+          widgets: [],
+          __typename: 'WorkItem',
+        },
+        __typename: 'LinkedWorkItemType',
+      },
+    ],
+    __typename: 'LinkedWorkItemTypeConnection',
+  },
+  __typename: 'WorkItemWidgetLinkedItems',
+};
+
 export const workItemResponseFactory = ({
   iid = '1',
   canUpdate = false,
@@ -473,6 +595,7 @@ export const workItemResponseFactory = ({
   confidential = false,
   canInviteMembers = false,
   labelsWidgetPresent = true,
+  linkedItemsWidgetPresent = true,
   labels = mockLabels,
   allowsScopedLabels = false,
   lastEditedAt = null,
@@ -485,6 +608,7 @@ export const workItemResponseFactory = ({
   updatedAt = '2022-08-08T12:32:54Z',
   awardEmoji = mockAwardsWidget,
   state = 'OPEN',
+  linkedItems = mockEmptyLinkedItems,
 } = {}) => ({
   data: {
     workItem: {
@@ -683,6 +807,7 @@ export const workItemResponseFactory = ({
               awardEmoji,
             }
           : { type: 'MOCK TYPE' },
+        linkedItemsWidgetPresent ? linkedItems : { type: 'MOCK TYPE' },
       ],
     },
   },