diff --git a/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget.vue b/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget.vue
index 01e0eb52303afd2edec6f1b0544e8ff6373f49aa..66bd8909b53546bcdafb07ff87bd7c73ed8094d6 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget.vue
@@ -229,7 +229,6 @@ export default {
           :header-text="headerText"
           :toggle-text="toggleText"
           :no-results-text="$options.i18n.noMatchingResults"
-          positioning-strategy="fixed"
           :items="listItems"
           :selected="localSelectedItem"
           :reset-button-label="resetButton"
diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue
index 575de918f9add2c4b3cdba71721b4642f2096df2..6e9e53ce0335f9ac5f28af5fe5b852b86e653e26 100644
--- a/app/assets/javascripts/work_items/components/work_item_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_actions.vue
@@ -483,7 +483,7 @@ export default {
           @action="handleDelete"
         >
           <template #list-item>
-            <span class="gl-font-bold gl-text-danger">{{ i18n.deleteWorkItem }}</span>
+            <span class="gl-text-danger">{{ i18n.deleteWorkItem }}</span>
           </template>
         </gl-disclosure-dropdown-item>
       </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue
index dc5f00d560349b831e2020e2a200bd69e7debf09..1c8212065cf56af1a81c729763bca163127ff301 100644
--- a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue
+++ b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue
@@ -182,7 +182,7 @@ export default {
   <div class="work-item-attributes-wrapper">
     <template v-if="workItemAssignees">
       <work-item-assignees
-        class="js-assignee gl-mb-5"
+        class="js-assignee work-item-attributes-item"
         :can-update="canUpdate"
         :full-path="fullPath"
         :work-item-id="workItem.id"
@@ -200,7 +200,7 @@ export default {
     </template>
     <template v-if="workItemLabels">
       <work-item-labels
-        class="js-labels gl-mb-5"
+        class="js-labels work-item-attributes-item"
         :can-update="canUpdate"
         :full-path="fullPath"
         :work-item-id="workItem.id"
@@ -212,7 +212,7 @@ export default {
     </template>
     <template v-if="isWorkItemWeightEditable">
       <work-item-weight
-        class="gl-mb-5"
+        class="work-item-attributes-item"
         :can-update="canUpdate"
         :weight="workItemWeight.weight"
         :work-item-id="workItem.id"
@@ -223,6 +223,7 @@ export default {
     </template>
     <template v-if="workItemRolledupDates && showRolledupDates">
       <work-item-rolledup-dates
+        class="work-item-attributes-item"
         :can-update="canUpdate"
         :full-path="fullPath"
         :due-date-is-fixed="workItemRolledupDates.dueDateIsFixed"
@@ -238,7 +239,7 @@ export default {
     </template>
     <template v-if="workItemMilestone">
       <work-item-milestone
-        class="js-milestone gl-mb-5"
+        class="js-milestone work-item-attributes-item"
         :full-path="fullPath"
         :work-item-id="workItem.id"
         :work-item-milestone="workItemMilestone.milestone"
@@ -252,7 +253,7 @@ export default {
     </template>
     <template v-if="workItemIteration">
       <work-item-iteration
-        class="gl-mb-5"
+        class="work-item-attributes-item"
         :full-path="fullPath"
         :iteration="workItemIteration.iteration"
         :can-update="canUpdate"
@@ -267,6 +268,7 @@ export default {
     </template>
     <template v-if="workItemDueDate && !showRolledupDates">
       <work-item-due-date
+        class="work-item-attributes-item"
         :can-update="canUpdate"
         :due-date="workItemDueDate.dueDate"
         :start-date="workItemDueDate.startDate"
@@ -278,7 +280,7 @@ export default {
     </template>
     <template v-if="workItemProgress">
       <work-item-progress
-        class="gl-mb-5"
+        class="work-item-attributes-item"
         :can-update="canUpdate"
         :progress="workItemProgress.progress"
         :work-item-id="workItem.id"
@@ -288,7 +290,7 @@ export default {
     </template>
     <template v-if="workItemHealthStatus">
       <work-item-health-status
-        class="gl-mb-5"
+        class="work-item-attributes-item"
         :work-item-id="workItem.id"
         :work-item-iid="workItem.iid"
         :work-item-type="workItemType"
@@ -298,7 +300,7 @@ export default {
     </template>
     <template v-if="workItemColor">
       <work-item-color
-        class="gl-mb-5"
+        class="work-item-attributes-item"
         :work-item="workItem"
         :full-path="fullPath"
         :can-update="canUpdate"
@@ -307,7 +309,7 @@ export default {
     </template>
     <template v-if="workItemHierarchy && showParent">
       <work-item-parent
-        class="gl-border-t gl-mb-5 gl-border-gray-50 gl-pt-5"
+        class="work-item-attributes-item"
         :can-update="canUpdate"
         :work-item-id="workItem.id"
         :work-item-type="workItemType"
@@ -325,7 +327,7 @@ export default {
     />
     <work-item-time-tracking
       v-if="workItemTimeTracking"
-      class="gl-border-t gl-mb-5 gl-border-gray-50 gl-pt-5"
+      class="work-item-attributes-item"
       :can-update="canUpdate"
       :time-estimate="workItemTimeTracking.timeEstimate"
       :timelogs="workItemTimeTracking.timelogs.nodes"
@@ -345,7 +347,7 @@ export default {
     </template>
     <participants
       v-if="workItemParticipants.length"
-      class="gl-border-t gl-mb-5 gl-border-gray-50 gl-pt-5"
+      class="work-item-attributes-item"
       :participants="workItemParticipants"
     />
   </div>
diff --git a/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue b/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue
index ed6345f580977a6580a7001eb5200cdc803c0645..9356112ae69a9dfa3900524188a4fda083e50652 100644
--- a/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue
+++ b/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue
@@ -138,51 +138,49 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <gl-loading-icon v-if="isLoading" class="gl-my-2" />
-    <div v-if="shouldShowDevWidget" class="gl-border-t gl-mb-5 gl-border-gray-50 gl-pt-5">
-      <div class="gl-flex gl-items-center gl-justify-between gl-gap-3">
-        <h3
-          class="gl-heading-5 !gl-mb-0 gl-flex gl-items-center gl-gap-2"
-          data-testid="dev-widget-label"
-        >
-          {{ $options.i18n.development }}
-          <gl-button
-            v-if="showAutoCloseInformation"
-            v-gl-tooltip
-            class="!gl-p-0 hover:!gl-bg-transparent"
-            category="tertiary"
-            :title="tooltipText"
-            :aria-label="tooltipText"
-            data-testid="more-information"
-          >
-            <gl-icon name="information-o" class="!gl-text-blue-500" />
-          </gl-button>
-        </h3>
+  <gl-loading-icon v-if="isLoading" class="gl-my-2" />
+  <div v-else-if="shouldShowDevWidget" class="work-item-attributes-item">
+    <div class="gl-flex gl-items-center gl-justify-between gl-gap-3">
+      <h3
+        class="gl-heading-5 !gl-mb-0 gl-flex gl-items-center gl-gap-2"
+        data-testid="dev-widget-label"
+      >
+        {{ $options.i18n.development }}
         <gl-button
-          v-if="showAddButton"
-          v-gl-modal="$options.createMRModalId"
-          v-gl-tooltip.top
+          v-if="showAutoCloseInformation"
+          v-gl-tooltip
+          class="!gl-p-0 hover:!gl-bg-transparent"
           category="tertiary"
-          icon="plus"
-          size="small"
-          data-testid="add-item"
-          :title="__('Add branch or merge request')"
-          :aria-label="__('Add branch or merge request')"
-        />
-      </div>
-      <template v-if="isRelatedDevelopmentListEmpty">
-        <span v-if="!canUpdate" class="gl-text-secondary">{{ __('None') }}</span>
-        <template v-else>
-          <gl-button category="secondary" size="small" data-testid="create-mr-button">{{
-            $options.i18n.createMergeRequest
-          }}</gl-button>
-          <gl-button category="tertiary" size="small" data-testid="create-branch-button">{{
-            $options.i18n.createBranch
-          }}</gl-button>
-        </template>
-      </template>
-      <work-item-development-relationship-list v-else :work-item-dev-widget="workItemDevelopment" />
+          :title="tooltipText"
+          :aria-label="tooltipText"
+          data-testid="more-information"
+        >
+          <gl-icon name="information-o" class="!gl-text-blue-500" />
+        </gl-button>
+      </h3>
+      <gl-button
+        v-if="showAddButton"
+        v-gl-modal="$options.createMRModalId"
+        v-gl-tooltip.top
+        category="tertiary"
+        icon="plus"
+        size="small"
+        data-testid="add-item"
+        :title="__('Add branch or merge request')"
+        :aria-label="__('Add branch or merge request')"
+      />
     </div>
+    <template v-if="isRelatedDevelopmentListEmpty">
+      <span v-if="!canUpdate" class="gl-text-secondary">{{ __('None') }}</span>
+      <template v-else>
+        <gl-button category="secondary" size="small" data-testid="create-mr-button">{{
+          $options.i18n.createMergeRequest
+        }}</gl-button>
+        <gl-button category="tertiary" size="small" data-testid="create-branch-button">{{
+          $options.i18n.createBranch
+        }}</gl-button>
+      </template>
+    </template>
+    <work-item-development-relationship-list v-else :work-item-dev-widget="workItemDevelopment" />
   </div>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_due_date.vue b/app/assets/javascripts/work_items/components/work_item_due_date.vue
index 27f80a5cafc5cf4d5f81e69a68619bef628b66eb..4f52a7bf648ea82adc65d121abebe4a1110e1b45 100644
--- a/app/assets/javascripts/work_items/components/work_item_due_date.vue
+++ b/app/assets/javascripts/work_items/components/work_item_due_date.vue
@@ -217,7 +217,7 @@ export default {
 </script>
 
 <template>
-  <section class="gl-pb-4" data-testid="work-item-start-due-dates">
+  <section data-testid="work-item-start-due-dates">
     <div class="gl-flex gl-items-center gl-gap-3">
       <h3 :class="{ 'gl-sr-only': isEditing }" class="gl-heading-5 !gl-mb-0">
         {{ $options.i18n.dates }}
diff --git a/app/assets/javascripts/work_items/components/work_item_time_tracking.vue b/app/assets/javascripts/work_items/components/work_item_time_tracking.vue
index 3d0b708a29f75636673c20781abaf1a8deecf31f..023ce117a2509826635bc076355b7eb17c803b67 100644
--- a/app/assets/javascripts/work_items/components/work_item_time_tracking.vue
+++ b/app/assets/javascripts/work_items/components/work_item_time_tracking.vue
@@ -125,12 +125,11 @@ export default {
 
     <div class="gl-flex gl-items-center gl-gap-2 gl-text-sm" data-testid="time-tracking-body">
       <template v-if="totalTimeSpent || timeEstimate">
-        <span class="gl-text-secondary">{{ s__('TimeTracking|Spent') }}</span>
+        <span class="gl-text-subtle">{{ s__('TimeTracking|Spent') }}</span>
         <gl-button
           v-if="canUpdate"
           v-gl-modal="'time-tracking-report'"
           v-gl-tooltip="s__('TimeTracking|View time tracking report')"
-          class="!gl-text-sm"
           variant="link"
         >
           {{ humanTotalTimeSpent }}
@@ -145,12 +144,11 @@ export default {
             :value="timeRemainingPercent"
             :variant="progressBarVariant"
           />
-          <span class="gl-text-secondary">{{ s__('TimeTracking|Estimate') }}</span>
+          <span class="gl-text-subtle">{{ s__('TimeTracking|Estimate') }}</span>
           <gl-button
             v-if="canUpdate"
             v-gl-modal="$options.setTimeEstimateModalId"
             v-gl-tooltip="s__('TimeTracking|Set estimate')"
-            class="!gl-text-sm"
             variant="link"
           >
             {{ humanTimeEstimate }}
@@ -162,18 +160,18 @@ export default {
         <gl-button
           v-else-if="canUpdate"
           v-gl-modal="$options.setTimeEstimateModalId"
-          class="gl-ml-auto !gl-text-sm"
+          class="gl-ml-auto"
           variant="link"
         >
           {{ s__('TimeTracking|Add estimate') }}
         </gl-button>
       </template>
-      <span v-else-if="canUpdate" class="gl-text-secondary">
+      <span v-else-if="canUpdate" class="gl-text-subtle">
         <gl-sprintf :message="$options.i18n.addTimeTrackingMessage">
           <template #estimate="{ content }">
             <gl-button
               v-gl-modal="$options.setTimeEstimateModalId"
-              class="gl-align-baseline !gl-text-sm"
+              class="gl-align-baseline"
               variant="link"
             >
               {{ content }}
@@ -182,7 +180,7 @@ export default {
           <template #timeSpent="{ content }">
             <gl-button
               v-gl-modal="$options.createTimelogModalId"
-              class="gl-align-baseline !gl-text-sm"
+              class="gl-align-baseline"
               variant="link"
             >
               {{ content }}
@@ -190,7 +188,7 @@ export default {
           </template>
         </gl-sprintf>
       </span>
-      <span v-else class="gl-text-secondary">
+      <span v-else class="gl-text-subtle">
         {{ __('No estimate or time spent') }}
       </span>
     </div>
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index db3c26f2691b6c8504c5a0e095b66cc83bc999b1..3fecc4e2fc69f1f2d1db9d680b1c99feedbb0b2d 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -235,7 +235,7 @@
       z-index: 1;
       position: relative;
       padding: $gl-padding-4 0;
-      
+
       &.opened {
         color: $green-500;
       }
@@ -243,7 +243,7 @@
       &.closed {
         color: $blue-500;
       }
-      
+
       svg {
         vertical-align: baseline;
       }
@@ -411,7 +411,8 @@
   .issuable-sidebar-header {
     @include clearfix;
     padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5;
-    border-bottom: 1px solid $border-color;
+    @apply gl-border-b;
+    @apply gl-border-subtle;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
     width: $right-sidebar-inner-width;
@@ -506,7 +507,7 @@
             top: calc(#{$calc-application-header-height} + #{$mr-sticky-header-height});
             height: calc(#{$calc-application-viewport-height} - #{$mr-sticky-header-height} - var(--mr-review-bar-height));
             position: sticky;
-            padding: 0 15px;
+            padding: 0 $gl-spacing-scale-3;
             margin-bottom: calc((#{$content-wrapper-padding} * -1) + var(--mr-review-bar-height));
             overflow-y: auto;
             overscroll-behavior: contain;
diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss
index 598479e856ca997ff256ad80b7307910ef275a49..f067c1aa2c57ac360b8e9cac21b635ac5daa4f71 100644
--- a/app/assets/stylesheets/page_bundles/project.scss
+++ b/app/assets/stylesheets/page_bundles/project.scss
@@ -170,26 +170,19 @@
 
     .project-page-layout-sidebar {
       order: 2;
-      overflow-x: clip;
-      margin-right: -$gl-padding-8;
     }
 
     .project-page-sidebar {
       position: sticky;
       top: calc(#{$calc-application-header-height} + #{$gl-spacing-scale-4});
-      width: calc(100% + 100px);
+      width: 100%;
       height: calc(
         #{$calc-application-viewport-height} - #{$gl-spacing-scale-4}
       );
-      padding-inline: $gl-padding-4;
+      padding-inline: $gl-spacing-scale-3;
       padding-block-end: $gl-spacing-scale-11;
-      overflow-y: scroll;
-      overflow-x: hidden;
-      -webkit-overflow-scrolling: touch;
-
-      .project-page-sidebar-block {
-        width: $right-sidebar-width - 1px;
-      }
+      overflow-y: auto;
+      overscroll-behavior: contain;
 
       .nav {
         > li {
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index 4a18009fff111baad53c7f488934cd5be20377d7..6b6f68a5f3d280ccdd7177377eaeb71a078526a2 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -2,7 +2,7 @@
 @import './notes/system_notes_v2';
 
 $work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important;
-$work-item-overview-right-sidebar-width: 20rem;
+$work-item-overview-right-sidebar-width: px-to-rem(290px);
 $work-item-sticky-header-height: 52px;
 $work-item-overview-gap-width: 2rem;
 
@@ -62,6 +62,16 @@ $work-item-overview-gap-width: 2rem;
 
 .work-item-overview-right-sidebar {
   margin-top: $gl-spacing-scale-5;
+
+  .work-item-attributes-item {
+    @apply gl-mb-4;
+
+    &:not(:first-child) {
+      @apply gl-pt-4;
+      @apply gl-border-t;
+      @apply gl-border-subtle;
+    }
+  }
 }
 
 @include container-and-media("min-width: #{calc($breakpoint-md)}") {
@@ -69,7 +79,7 @@ $work-item-overview-gap-width: 2rem;
     top: calc(#{$calc-application-header-height} + #{$work-item-sticky-header-height});
     height: calc(#{$calc-application-viewport-height} - #{$work-item-sticky-header-height});
     margin-bottom: calc(#{$content-wrapper-padding} * -1);
-    padding-inline: 0.5rem;
+    padding-inline: $gl-spacing-scale-3;
     position: sticky;
     overflow-y: auto;
     overflow-x: hidden;
@@ -261,7 +271,7 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem;
 // stylelint-disable-next-line gitlab/no-gl-class
 .work-item-sidebar-dropdown .gl-new-dropdown-panel {
     width: 100% !important;
-    max-width: 19rem !important;
+    max-width: 17rem !important;
 }
 
 .container-limited {
diff --git a/ee/app/assets/javascripts/work_items/components/work_item_rolledup_dates.vue b/ee/app/assets/javascripts/work_items/components/work_item_rolledup_dates.vue
index 0f9125a84c281147f694b68f24a60227925c8dd0..77d723aa1ee74dbca90fbd93720bc4bcd9b3c7e3 100644
--- a/ee/app/assets/javascripts/work_items/components/work_item_rolledup_dates.vue
+++ b/ee/app/assets/javascripts/work_items/components/work_item_rolledup_dates.vue
@@ -349,7 +349,7 @@ export default {
 </script>
 
 <template>
-  <section class="gl-pb-4" data-testid="work-item-rolledup-dates">
+  <section data-testid="work-item-rolledup-dates">
     <div class="gl-flex gl-items-center gl-gap-3">
       <h3 :class="{ 'gl-sr-only': isEditing }" class="gl-heading-5 !gl-mb-0">
         {{ $options.i18n.dates }}