diff --git a/app/assets/javascripts/issues/list/components/issues_list_app.vue b/app/assets/javascripts/issues/list/components/issues_list_app.vue
index 5fb83dfd1ab14eb200648f06dd0bb27d1e772e9e..c8703fb3ab894dd1744b48ffce0d97db8f61a0dd 100644
--- a/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -6,8 +6,11 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlDropdownDivider,
+  GlDrawer,
+  GlLink,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
+import produce from 'immer';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import { isEmpty } from 'lodash';
 import IssueCardStatistics from 'ee_else_ce/issues/list/components/issue_card_statistics.vue';
@@ -62,6 +65,14 @@ import IssuableList from '~/vue_shared/issuable/list/components/issuable_list_ro
 import { DEFAULT_PAGE_SIZE, issuableListTabs } from '~/vue_shared/issuable/list/constants';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import NewResourceDropdown from '~/vue_shared/components/new_resource_dropdown/new_resource_dropdown.vue';
+import WorkItemDetail from '~/work_items/components/work_item_detail.vue';
+import {
+  WIDGET_TYPE_ASSIGNEES,
+  WIDGET_TYPE_LABELS,
+  WIDGET_TYPE_START_AND_DUE_DATE,
+  WIDGET_TYPE_WEIGHT,
+  WIDGET_TYPE_MILESTONE,
+} from '~/work_items/constants';
 import {
   CREATED_DESC,
   defaultTypeTokenOptions,
@@ -124,11 +135,14 @@ export default {
     GlDropdown,
     GlDropdownDivider,
     GlDropdownItem,
+    GlDrawer,
     IssuableByEmail,
     IssuableList,
     IssueCardStatistics,
     IssueCardTimeInfo,
     NewResourceDropdown,
+    WorkItemDetail,
+    GlLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -194,6 +208,7 @@ export default {
       sortKey: CREATED_DESC,
       state: STATUS_OPEN,
       pageSize: DEFAULT_PAGE_SIZE,
+      activeIssuable: null,
     };
   },
   apollo: {
@@ -504,6 +519,9 @@ export default {
         })
       );
     },
+    isIssuableSelected() {
+      return !isEmpty(this.activeIssuable);
+    },
   },
   watch: {
     $route(newValue, oldValue) {
@@ -764,12 +782,61 @@ export default {
       this.sortKey = sortKey;
       this.state = state || STATUS_OPEN;
     },
+    handleSelectIssuable(issuable) {
+      this.activeIssuable = issuable;
+    },
+    updateIssuablesCache(workItem) {
+      const client = this.$apollo.provider.clients.defaultClient;
+      const issuesList = client.readQuery({
+        query: getIssuesQuery,
+        variables: this.queryVariables,
+      });
+
+      const data = produce(issuesList, (draftData) => {
+        const activeIssue = draftData.project.issues.nodes.find(
+          (issue) => issue.iid === workItem.iid,
+        );
+
+        activeIssue.title = workItem.title;
+        activeIssue.assignees = workItem?.widgets?.find(
+          (widget) => widget.type === WIDGET_TYPE_ASSIGNEES,
+        ).assignees;
+        activeIssue.labels = workItem?.widgets?.find(
+          (widget) => widget.type === WIDGET_TYPE_LABELS,
+        ).labels;
+        activeIssue.milestone = workItem?.widgets?.find(
+          (widget) => widget.type === WIDGET_TYPE_MILESTONE,
+        ).milestone;
+        activeIssue.weight = workItem?.widgets?.find(
+          (widget) => widget.type === WIDGET_TYPE_WEIGHT,
+        ).weight;
+        activeIssue.dueDate = workItem?.widgets?.find(
+          (widget) => widget.type === WIDGET_TYPE_START_AND_DUE_DATE,
+        ).dueDate;
+      });
+
+      client.writeQuery({ query: getIssuesQuery, variables: this.queryVariables, data });
+    },
   },
 };
 </script>
 
 <template>
   <div>
+    <gl-drawer :open="isIssuableSelected" class="gl-pt-12 gl-w-40p" @close="activeIssuable = null">
+      <template #title>
+        <gl-link :href="activeIssuable.webUrl" class="gl-text-black-normal">{{
+          __('Open full view')
+        }}</gl-link>
+      </template>
+      <template #default>
+        <work-item-detail
+          :key="activeIssuable.iid"
+          :work-item-iid="activeIssuable.iid"
+          @work-item-updated="updateIssuablesCache"
+        />
+      </template>
+    </gl-drawer>
     <issuable-list
       v-if="hasAnyIssues"
       :namespace="fullPath"
@@ -808,6 +875,7 @@ export default {
       @sort="handleSort"
       @update-legacy-bulk-edit="handleUpdateLegacyBulkEdit"
       @page-size-change="handlePageSizeChange"
+      @selectIssuable="handleSelectIssuable"
     >
       <template #nav-actions>
         <gl-button
diff --git a/app/assets/javascripts/issues/list/graphql.js b/app/assets/javascripts/issues/list/graphql.js
index e64870152bd1967a3d674c7ec3396d565c745509..6e9a566cb5c445dd90fef13a39567eca69592e84 100644
--- a/app/assets/javascripts/issues/list/graphql.js
+++ b/app/assets/javascripts/issues/list/graphql.js
@@ -1,6 +1,7 @@
 import produce from 'immer';
 import createDefaultClient, { createApolloClientWithCaching } from '~/lib/graphql';
 import getIssuesQuery from 'ee_else_ce/issues/list/queries/get_issues.query.graphql';
+import { config } from '~/graphql_shared/issuable_client';
 
 let client;
 
@@ -27,7 +28,7 @@ const resolvers = {
 export async function gqlClient() {
   if (client) return client;
   client = gon.features?.frontendCaching
-    ? await createApolloClientWithCaching(resolvers, { localCacheKey: 'issues_list' })
-    : createDefaultClient(resolvers);
+    ? await createApolloClientWithCaching(resolvers, { localCacheKey: 'issues_list', ...config })
+    : createDefaultClient(resolvers, config);
   return client;
 }
diff --git a/app/assets/javascripts/issues/list/index.js b/app/assets/javascripts/issues/list/index.js
index a97b59c1e4f58ddaf7e3fe8cf66c1f579e8d0d55..a9de1f9f309fb8548bf289c356f909d4929d3f71 100644
--- a/app/assets/javascripts/issues/list/index.js
+++ b/app/assets/javascripts/issues/list/index.js
@@ -116,7 +116,9 @@ export async function mountIssuesListApp() {
       canReadCrmOrganization: parseBoolean(canReadCrmOrganization),
       emptyStateSvgPath,
       fullPath,
+      projectPath: fullPath,
       groupPath,
+      reportAbusePath: '',
       hasAnyIssues: parseBoolean(hasAnyIssues),
       hasAnyProjects: parseBoolean(hasAnyProjects),
       hasBlockedIssuesFeature: parseBoolean(hasBlockedIssuesFeature),
diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
index 62a32d8942ab8f7b16ef9265259b53ea1c9b3be8..f7ad967d0292bb8e14bffaccff58bd8eaa2ae38f 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
@@ -178,6 +178,13 @@ export default {
       }
       return '';
     },
+    handleIssuableItemClick(e) {
+      if (e.metaKey || e.ctrlKey) {
+        return;
+      }
+      e.preventDefault();
+      this.$emit('selectIssuable', { iid: this.issuableIid, webUrl: this.webUrl });
+    },
   },
 };
 </script>
@@ -228,6 +235,7 @@ export default {
           :href="webUrl"
           data-qa-selector="issuable_title_link"
           v-bind="issuableTitleProps"
+          @click="handleIssuableItemClick"
         >
           {{ issuable.title }}
           <gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2" />
diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
index 95108933a0b73d178531611e02942b8bfdaba18f..9147c6a274b49a4595c44347c0dbc21232adec59 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
+++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
@@ -362,6 +362,7 @@ export default {
           :checked="issuableChecked(issuable)"
           :show-work-item-type-icon="showWorkItemTypeIcon"
           @checked-input="handleIssuableCheckedInput(issuable, $event)"
+          @selectIssuable="$emit('selectIssuable', $event)"
         >
           <template #reference>
             <slot name="reference" :issuable="issuable"></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 5abc4da38ee7ceee70fe8aa92d172541ee45c9d2..2d110e3842b528425049ecc8d8e9463f1904cafe 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -158,6 +158,7 @@ export default {
         if (!res.data) {
           return;
         }
+        this.$emit('work-item-updated', this.workItem);
         if (isEmpty(this.workItem)) {
           this.setEmptyState();
         }
diff --git a/app/assets/javascripts/work_items/graphql/milestone.fragment.graphql b/app/assets/javascripts/work_items/graphql/milestone.fragment.graphql
index 5c93370aac9356f1d7666dab344e11ee8c3fd1c8..9828363990b525f4fe21cda6fd9585a396b7a991 100644
--- a/app/assets/javascripts/work_items/graphql/milestone.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/milestone.fragment.graphql
@@ -5,4 +5,5 @@ fragment MilestoneFragment on Milestone {
   state
   startDate
   dueDate
+  webPath
 }
diff --git a/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
index 25eb8099251e8dd5ec2cef5023109f16fdb4b8a4..b92489dd982c4ec8431180cbcb5ec907e2411e67 100644
--- a/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
@@ -1,7 +1,7 @@
 #import "./work_item.fragment.graphql"
 
 mutation workItemUpdate($input: WorkItemUpdateInput!) {
-  workItemUpdate(input: $input) {
+  workItemUpdate(input: $input) @persist {
     workItem {
       ...WorkItem
     }
diff --git a/app/assets/javascripts/work_items/graphql/work_item.query.graphql b/app/assets/javascripts/work_items/graphql/work_item.query.graphql
index 3b46fed97ec20d801f56bd0c69edf21e53f2415b..002655bb04ef29591425d7ffbc2e6d6f73a3819d 100644
--- a/app/assets/javascripts/work_items/graphql/work_item.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item.query.graphql
@@ -1,7 +1,7 @@
 #import "./work_item.fragment.graphql"
 
 query workItem($id: WorkItemID!) {
-  workItem(id: $id) {
+  workItem(id: $id) @persist {
     ...WorkItem
   }
 }
diff --git a/app/assets/javascripts/work_items/graphql/work_item_by_iid.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_by_iid.query.graphql
index 4c3be007d96643ba6191689e89981d1a66777bec..66ac9dcd8d1800c6ed2865c55c36d56cacb3cdd1 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_by_iid.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_by_iid.query.graphql
@@ -1,7 +1,7 @@
 #import "./work_item.fragment.graphql"
 
 query workItemByIid($fullPath: ID!, $iid: String) {
-  workspace: project(fullPath: $fullPath) {
+  workspace: project(fullPath: $fullPath) @persist {
     id
     workItems(iid: $iid) {
       nodes {
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 8039ef53f98f351bc147a9ee937953437c56cccc..e757f3d8ef3cb21f1feba93b13240de1b88f4203 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
@@ -20,6 +20,7 @@ fragment WorkItemWidgets on WorkItemWidget {
     canInviteMembers
     assignees {
       nodes {
+        __persist
         ...User
       }
     }
@@ -28,6 +29,7 @@ fragment WorkItemWidgets on WorkItemWidget {
     type
     labels {
       nodes {
+        __persist
         ...Label
       }
     }
diff --git a/app/assets/stylesheets/page_bundles/issues_list.scss b/app/assets/stylesheets/page_bundles/issues_list.scss
index f39dee12126739644a663bd2e7eeec9327f0d5ca..b5afb8cdf4dc00dc013656177f2258a1d1e06399 100644
--- a/app/assets/stylesheets/page_bundles/issues_list.scss
+++ b/app/assets/stylesheets/page_bundles/issues_list.scss
@@ -34,3 +34,13 @@
   opacity: 0.3;
   pointer-events: none;
 }
+
+.work-item-labels {
+  .gl-token {
+    padding-left: $gl-spacing-scale-1;
+  }
+
+  .gl-token-close {
+    display: none;
+  }
+}
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 492584a65e59bd34dd2226b289151958fbf96802..8682217d4f58a5e6cd567fe2587caaae7e33dfcc 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
@@ -21,6 +21,7 @@ fragment WorkItemWidgets on WorkItemWidget {
     canInviteMembers
     assignees {
       nodes {
+        __persist
         ...User
       }
     }
@@ -30,6 +31,7 @@ fragment WorkItemWidgets on WorkItemWidget {
     allowsScopedLabels
     labels {
       nodes {
+        __persist
         ...Label
       }
     }
@@ -100,6 +102,7 @@ fragment WorkItemWidgets on WorkItemWidget {
   ... on WorkItemWidgetMilestone {
     type
     milestone {
+      __persist
       ...MilestoneFragment
     }
   }