diff --git a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
index 437f319b944de676f3b46dc3f201bcc772b8189c..d7d03b95cff1bed44797a5830cbdf689b257135e 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
@@ -73,7 +73,7 @@ export default {
     rotations: {
       query: getShiftsForRotations,
       variables() {
-        this.timeframeStartDate.setHours(0, 0, 0, 0);
+        this.timeframeStartDate.setHours(1, 0, 0, 0);
         const startsAt = this.timeframeStartDate;
         const endsAt = nWeeksAfter(startsAt, 2);
 
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
index 563d1f7eb536f62a524d758e01234cb6d90d3cc3..dbf086cbf6522330300d25be3656ebe7bb6beb2e 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlToken, GlAvatar, GlPopover } from '@gitlab/ui';
+import { GlAvatar, GlPopover } from '@gitlab/ui';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { truncate } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
@@ -10,11 +10,13 @@ export const SHIFT_WIDTHS = {
   xs: 40,
 };
 
+const ROTATION_CENTER_CLASS = 'gl-display-flex gl-justify-content-center gl-align-items-center';
+
 export default {
+  ROTATION_CENTER_CLASS,
   components: {
     GlAvatar,
     GlPopover,
-    GlToken,
   },
   props: {
     assignee: {
@@ -39,32 +41,32 @@ export default {
     },
   },
   computed: {
+    assigneeName() {
+      if (this.shiftWidth <= SHIFT_WIDTHS.sm) {
+        return truncate(this.assignee.user.username, 3);
+      }
+
+      return this.assignee.user.username;
+    },
     chevronClass() {
       return `gl-bg-data-viz-${this.assignee.colorPalette}-${this.assignee.colorWeight}`;
     },
-    startsAt() {
-      return sprintf(__('Starts: %{startsAt}'), {
-        startsAt: formatDate(this.rotationAssigneeStartsAt, 'mmmm d, yyyy, h:MMtt Z'),
+    endsAt() {
+      return sprintf(__('Ends: %{endsAt}'), {
+        endsAt: formatDate(this.rotationAssigneeEndsAt, 'mmmm d, yyyy, h:MMtt Z'),
       });
     },
     rotationAssigneeUniqueID() {
       const { _uid } = this;
       return `${this.assignee.user.id}-${_uid}`;
     },
-    endsAt() {
-      return sprintf(__('Ends: %{endsAt}'), {
-        endsAt: formatDate(this.rotationAssigneeEndsAt, 'mmmm d, yyyy, h:MMtt Z'),
-      });
-    },
     rotationMobileView() {
       return this.shiftWidth <= SHIFT_WIDTHS.xs;
     },
-    assigneeName() {
-      if (this.shiftWidth <= SHIFT_WIDTHS.sm) {
-        return truncate(this.assignee.user.username, 3);
-      }
-
-      return this.assignee.user.username;
+    startsAt() {
+      return sprintf(__('Starts: %{startsAt}'), {
+        startsAt: formatDate(this.rotationAssigneeStartsAt, 'mmmm d, yyyy, h:MMtt Z'),
+      });
     },
   },
 };
@@ -72,19 +74,19 @@ export default {
 
 <template>
   <div class="gl-absolute gl-h-7 gl-mt-3" :style="rotationAssigneeStyle">
-    <gl-token
+    <div
       :id="rotationAssigneeUniqueID"
-      class="gl-w-full gl-h-6 gl-align-items-center"
-      :class="chevronClass"
-      :view-only="true"
+      class="gl-h-6"
+      :class="[chevronClass, $options.ROTATION_CENTER_CLASS]"
+      data-testid="rotation-assignee"
     >
-      <div class="gl-display-flex gl-text-white gl-font-weight-normal">
+      <div class="gl-text-white" :class="$options.ROTATION_CENTER_CLASS">
         <gl-avatar :src="assignee.user.avatarUrl" :size="16" />
         <span v-if="!rotationMobileView" class="gl-ml-2" data-testid="rotation-assignee-name">{{
           assigneeName
         }}</span>
       </div>
-    </gl-token>
+    </div>
     <gl-popover
       :target="rotationAssigneeUniqueID"
       :title="assignee.user.username"
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js
index 381d9e2eabc26b834296c9e4700253a4d7557539..4ae4f87bda39406cbb5b4c3614a1d03bff65a7d4 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js
@@ -50,8 +50,8 @@ export const currentTimeframeEndsAt = (timeframeStart, presetType) => {
  * => true
  *
  */
-export const shiftShouldRender = (shiftRangeOverlap = {}) => {
-  return Boolean(shiftRangeOverlap?.hoursOverlap);
+export const shiftShouldRender = (shiftRangeOverlap) => {
+  return Boolean(shiftRangeOverlap.hoursOverlap);
 };
 
 /**
@@ -225,7 +225,7 @@ export const weekDisplayShiftLeft = (
  * @returns {Number}
  *
  * @example
- * weekDisplayShiftWidth(false, { daysOverlap: 3 }, false , 50)
+ * weekDisplayShiftWidth(false, { daysOverlap: 3, hoursOverlap: 72, overlapEndDate: 1610496000000 }, false , 50)
  * => 148
  *
  */
@@ -242,7 +242,7 @@ export const weekDisplayShiftWidth = (
     );
   }
 
-  const widthOffset = shiftStartDateOutOfRange ? 1 : 0;
-
+  const shiftEndsAtMidnight = new Date(shiftRangeOverlap.overlapEndDate).getHours() === 0;
+  const widthOffset = shiftStartDateOutOfRange && !shiftEndsAtMidnight ? 1 : 0;
   return shiftTimeUnitWidth * (shiftRangeOverlap.daysOverlap - widthOffset) - ASSIGNEE_SPACER;
 };
diff --git a/ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js b/ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js
index 50a82dfc63a30aa150b140270abe1db036a04fa3..d629666ace0fce5ccc2bcd75f3c7279cb8799e25 100644
--- a/ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js
+++ b/ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js
@@ -1,4 +1,4 @@
-import { GlToken, GlAvatar, GlPopover } from '@gitlab/ui';
+import { GlAvatar, GlPopover } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import RotationAssignee, {
   SHIFT_WIDTHS,
@@ -13,7 +13,7 @@ describe('RotationAssignee', () => {
 
   const shiftWidth = 100;
   const assignee = mockRotations[0].shifts.nodes[0];
-  const findToken = () => wrapper.findComponent(GlToken);
+  const findToken = () => wrapper.findByTestId('rotation-assignee');
   const findAvatar = () => wrapper.findComponent(GlAvatar);
   const findPopOver = () => wrapper.findComponent(GlPopover);
   const findStartsAt = () => wrapper.findByTestId('rotation-assignee-starts-at');
diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap b/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
index de1efd60cf0837de53660048c239f6252d7f0ebe..90fbb5c5907876c352eac6e72620b97d2b6e5c09 100644
--- a/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
+++ b/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
@@ -80,28 +80,23 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
             class="gl-absolute gl-h-7 gl-mt-3"
             style="left: 0px; width: -2px;"
           >
-            <span
-              class="gl-w-full gl-h-6 gl-align-items-center gl-token gl-token-default-variant gl-bg-data-viz-blue-500"
+            <div
+              class="gl-h-6 gl-bg-data-viz-blue-500 gl-display-flex gl-justify-content-center gl-align-items-center"
+              data-testid="rotation-assignee"
               id="1-12"
             >
-              <span
-                class="gl-token-content"
+              <div
+                class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
               >
-                <div
-                  class="gl-display-flex gl-text-white gl-font-weight-normal"
-                >
-                  <img
-                    alt="avatar"
-                    class="gl-avatar gl-avatar-circle gl-avatar-s16"
-                    src="/url"
-                  />
-                   
-                  <!---->
-                </div>
+                <img
+                  alt="avatar"
+                  class="gl-avatar gl-avatar-circle gl-avatar-s16"
+                  src="/url"
+                />
                  
                 <!---->
-              </span>
-            </span>
+              </div>
+            </div>
              
             <div
               class="gl-popover"
@@ -126,28 +121,23 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
             class="gl-absolute gl-h-7 gl-mt-3"
             style="left: 0px; width: -2px;"
           >
-            <span
-              class="gl-w-full gl-h-6 gl-align-items-center gl-token gl-token-default-variant gl-bg-data-viz-orange-500"
-              id="2-17"
+            <div
+              class="gl-h-6 gl-bg-data-viz-orange-500 gl-display-flex gl-justify-content-center gl-align-items-center"
+              data-testid="rotation-assignee"
+              id="2-16"
             >
-              <span
-                class="gl-token-content"
+              <div
+                class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
               >
-                <div
-                  class="gl-display-flex gl-text-white gl-font-weight-normal"
-                >
-                  <img
-                    alt="avatar"
-                    class="gl-avatar gl-avatar-circle gl-avatar-s16"
-                    src="/url"
-                  />
-                   
-                  <!---->
-                </div>
+                <img
+                  alt="avatar"
+                  class="gl-avatar gl-avatar-circle gl-avatar-s16"
+                  src="/url"
+                />
                  
                 <!---->
-              </span>
-            </span>
+              </div>
+            </div>
              
             <div
               class="gl-popover"
diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js b/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js
index 54b987e4567e96d1ab53a7d750534354c943ec77..7eee7e885070ae12b4b11f600026419621148cb6 100644
--- a/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js
+++ b/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js
@@ -209,9 +209,10 @@ describe('~ee/oncall_schedules/components/schedule/components/shifts/components/
 
   describe('weekDisplayShiftWidth', () => {
     const shiftTimeUnitWidth = 50;
+    const mockTimeframeInitialDate = new Date('2018-01-01T00:00:00');
 
     it.each`
-      shiftUnitIsHour | shiftRangeOverlap                       | shiftStartDateOutOfRange | value
+      shiftUnitIsHour | shiftRangeOverlapObject                 | shiftStartDateOutOfRange | value
       ${true}         | ${{ daysOverlap: 1, hoursOverlap: 4 }}  | ${false}                 | ${6}
       ${true}         | ${{ daysOverlap: 1, hoursOverlap: 8 }}  | ${false}                 | ${14}
       ${true}         | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${false}                 | ${48}
@@ -219,14 +220,23 @@ describe('~ee/oncall_schedules/components/schedule/components/shifts/components/
       ${false}        | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${false}                 | ${48}
       ${false}        | ${{ daysOverlap: 2, hoursOverlap: 48 }} | ${false}                 | ${98}
       ${false}        | ${{ daysOverlap: 3, hoursOverlap: 72 }} | ${false}                 | ${148}
-      ${false}        | ${{ daysOverlap: 3, hoursOverlap: 72 }} | ${true}                  | ${98}
+      ${false}        | ${{ daysOverlap: 3, hoursOverlap: 72 }} | ${true}                  | ${148}
     `(
       `returns $value px as the rotation width when shiftUnitIsHour is $shiftUnitIsHour, shiftStartDateOutOfRange is $shiftStartDateOutOfRange and shiftTimeUnitWidth is ${shiftTimeUnitWidth}`,
-      ({ shiftUnitIsHour, shiftRangeOverlap, shiftStartDateOutOfRange, value }) => {
+      ({
+        shiftUnitIsHour,
+        shiftRangeOverlapObject: { daysOverlap, hoursOverlap },
+        shiftStartDateOutOfRange,
+        value,
+      }) => {
         expect(
           weekDisplayShiftWidth(
             shiftUnitIsHour,
-            shiftRangeOverlap,
+            {
+              overlapEndDate: mockTimeStamp(mockTimeframeInitialDate, daysOverlap),
+              daysOverlap,
+              hoursOverlap,
+            },
             shiftStartDateOutOfRange,
             shiftTimeUnitWidth,
           ),
@@ -234,4 +244,17 @@ describe('~ee/oncall_schedules/components/schedule/components/shifts/components/
       },
     );
   });
+
+  it('returns with an offset of 1 day width less only when the shift start date is before the timeframe start and the shift does not end at midnight', () => {
+    const mockOverlapEndDateNotAtMidnight = new Date('2018-01-01T03:02:01');
+
+    expect(
+      weekDisplayShiftWidth(
+        false,
+        { overlapEndDate: mockOverlapEndDateNotAtMidnight, daysOverlap: 3, hoursOverlap: 72 },
+        true,
+        50,
+      ),
+    ).toBe(98);
+  });
 });