diff --git a/grafana-plugin/src/components/ScheduleBorderedAvatar/ScheduleBorderedAvatar.module.scss b/grafana-plugin/src/components/ScheduleBorderedAvatar/ScheduleBorderedAvatar.module.scss
index 657b81d0..0e179253 100644
--- a/grafana-plugin/src/components/ScheduleBorderedAvatar/ScheduleBorderedAvatar.module.scss
+++ b/grafana-plugin/src/components/ScheduleBorderedAvatar/ScheduleBorderedAvatar.module.scss
@@ -7,3 +7,7 @@
   left: 0px;
   z-index: -1;
 }
+.icon {
+  position: relative;
+  top: -8px;
+}
diff --git a/grafana-plugin/src/components/ScheduleBorderedAvatar/ScheduleBorderedAvatar.tsx b/grafana-plugin/src/components/ScheduleBorderedAvatar/ScheduleBorderedAvatar.tsx
index 538365d2..e6c287e0 100644
--- a/grafana-plugin/src/components/ScheduleBorderedAvatar/ScheduleBorderedAvatar.tsx
+++ b/grafana-plugin/src/components/ScheduleBorderedAvatar/ScheduleBorderedAvatar.tsx
@@ -1,9 +1,15 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
+import { FadeTransition } from '@grafana/ui';
 import cn from 'classnames/bind';
+import dayjs from 'dayjs';
+import { CSSTransition } from 'react-transition-group';
 
 import styles from './ScheduleBorderedAvatar.module.scss';
 
+import animationStyles from 'containers/Rotations/Rotations.module.css';
+
+
 const cx = cn.bind(styles);
 
 interface ScheduleBorderedAvatarProps {
@@ -36,7 +42,7 @@ export default function ScheduleBorderedAvatar({
     return (
       <>
         <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width={width} height={height} viewBox="-14 -8 240 230">
-          <g fill="none" strokeWidth="28" transform="translate(100,100)">
+          <g fill="none" strokeWidth="25" transform="translate(100,100)">
             {renderColorPaths(colors)}
           </g>
         </svg>
@@ -46,10 +52,11 @@ export default function ScheduleBorderedAvatar({
   }
 
   function renderColorPaths(colors: string[]) {
-    if (!colors?.length) return null;
+    if (!colors?.length) {return null;}
 
     const colorSchemeList = colors;
-    if (colors.length === 1) { // minimum is 2 arcs to round the circle
+    if (colors.length === 1) {
+      // minimum is 2 arcs to round the circle
       colorSchemeList.push(colors[0]);
     }
 
diff --git a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
index 0ef053c1..e6601e90 100644
--- a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
+++ b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
@@ -1,26 +1,18 @@
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { HorizontalGroup, InlineSwitch, Tooltip } from '@grafana/ui';
+import { HorizontalGroup, Tooltip } from '@grafana/ui';
 import cn from 'classnames/bind';
-import dayjs, { Dayjs } from 'dayjs';
-import { toJS } from 'mobx';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import Avatar from 'components/Avatar/Avatar';
 import ScheduleBorderedAvatar from 'components/ScheduleBorderedAvatar/ScheduleBorderedAvatar';
 import ScheduleUserDetails from 'components/ScheduleUserDetails/ScheduleUserDetails';
 import Text from 'components/Text/Text';
-import { findColor } from 'containers/Rotations/Rotations.helpers';
 import { IsOncallIcon } from 'icons';
-import {
-  getLayersFromStore,
-  getOverrideColor,
-  getOverridesFromStore,
-  getShiftsFromStore,
-} from 'models/schedule/schedule.helpers';
 import { Event, Layer, Schedule } from 'models/schedule/schedule.types';
 import { Timezone } from 'models/timezone/timezone.types';
 import { User } from 'models/user/user.types';
+import { getColorSchemeMappingForUsers } from 'pages/schedule/Schedule.helpers';
 import { RootStore } from 'state';
 import { useStore } from 'state/useStore';
 
@@ -315,37 +307,4 @@ const AvatarGroup = (props: AvatarGroupProps) => {
   );
 };
 
-function getColorSchemeMappingForUsers(store: RootStore, scheduleId: string, startMoment: dayjs.Dayjs): { [userId: string]: Set<string> } {
-  const usersColorSchemeHash: { [userId: string]: Set<string> } = {};
-
-  const shifts = getShiftsFromStore(store, scheduleId, startMoment);
-  const layers = getLayersFromStore(store, scheduleId, startMoment);
-  const overrides = getOverridesFromStore(store, scheduleId, startMoment);
-
-  if (!shifts?.length || !layers?.length) {
-    return usersColorSchemeHash;
-  }
-
-  shifts.forEach(({ shiftId, events }, rotationIndex) => {
-    populateUserHashSet(events, shiftId, false);
-    populateUserHashSet(events, rotationIndex, true);
-  });
-
-  return usersColorSchemeHash;
-
-  function populateUserHashSet(events: Event[], id: string | number, isOverride: boolean) {
-    events.forEach((event) => {
-      event.users.forEach((user) => {
-        if (!usersColorSchemeHash[user.pk]) {
-          usersColorSchemeHash[user.pk] = new Set<string>();
-        }
-
-        usersColorSchemeHash[user.pk].add(
-          isOverride ? getOverrideColor(id as number) : findColor(id as string, layers, overrides)
-        );
-      });
-    });
-  }
-}
-
 export default UsersTimezones;
diff --git a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
index 94e967eb..1f9e98e5 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
+++ b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
@@ -1,7 +1,10 @@
-import { DateTime, dateTime } from '@grafana/data';
 import dayjs from 'dayjs';
 
+import { findColor } from 'containers/Rotations/Rotations.helpers';
+import { getLayersFromStore, getOverridesFromStore, getShiftsFromStore } from 'models/schedule/schedule.helpers';
+import { Event } from 'models/schedule/schedule.types';
 import { Timezone } from 'models/timezone/timezone.types';
+import { RootStore } from 'state';
 
 export const getStartOfWeek = (tz: Timezone) => {
   return dayjs().tz(tz).utcOffset() === 0 ? dayjs().utc().startOf('isoWeek') : dayjs().tz(tz).startOf('isoWeek');
@@ -14,3 +17,36 @@ export const getUTCString = (moment: dayjs.Dayjs) => {
 export const getDateTime = (date: string) => {
   return dayjs(date);
 };
+
+
+export const getColorSchemeMappingForUsers = (
+  store: RootStore,
+  scheduleId: string,
+  startMoment: dayjs.Dayjs
+): { [userId: string]: Set<string> } => {
+  const usersColorSchemeHash: { [userId: string]: Set<string> } = {};
+
+  const shifts = getShiftsFromStore(store, scheduleId, startMoment);
+  const layers = getLayersFromStore(store, scheduleId, startMoment);
+  const overrides = getOverridesFromStore(store, scheduleId, startMoment);
+
+  if (!shifts?.length || !layers?.length) {
+    return usersColorSchemeHash;
+  }
+
+  shifts.forEach(({ shiftId, events }) => populateUserHashSet(events, shiftId));
+
+  return usersColorSchemeHash;
+
+  function populateUserHashSet(events: Event[], id: string) {
+    events.forEach((event) => {
+      event.users.forEach((user) => {
+        if (!usersColorSchemeHash[user.pk]) {
+          usersColorSchemeHash[user.pk] = new Set<string>();
+        }
+
+        usersColorSchemeHash[user.pk].add(findColor(id as string, layers, overrides));
+      });
+    });
+  }
+}