diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopover.component.tsx b/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopover.component.tsx
index ab3f8b616f1..44068b88e29 100644
--- a/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopover.component.tsx
+++ b/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopover.component.tsx
@@ -18,7 +18,7 @@
import { getJobAbbreviation } from '@/v5/store/jobs/jobs.helpers';
import { IJob } from '@/v5/store/jobs/jobs.types';
import { AvatarWrapper, Data, Heading, PopoverContainer } from '../userPopoverCircle/userPopover/userPopover.styles';
-import { PopoverCircle } from '../popoverCircle.styles';
+import { PopoverCircle } from '../popoverCircle.component';
interface IJobPopover {
job: IJob;
diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component.tsx b/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component.tsx
index 06eb99b5502..b1da9172c1a 100644
--- a/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component.tsx
+++ b/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component.tsx
@@ -18,7 +18,7 @@
import { HoverPopover } from '@controls/hoverPopover/hoverPopover.component';
import { getJobAbbreviation } from '@/v5/store/jobs/jobs.helpers';
import { IJob } from '@/v5/store/jobs/jobs.types';
-import { IPopoverCircle, PopoverCircle } from '../popoverCircle.styles';
+import { IPopoverCircle, PopoverCircle } from '../popoverCircle.component';
import { JobPopover } from './jobPopover.component';
type JobPopoverCircleProps = IPopoverCircle & {
diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.component.tsx b/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.component.tsx
new file mode 100644
index 00000000000..3fc8631b67a
--- /dev/null
+++ b/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.component.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (C) 2024 3D Repo Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+import { AvatarProps } from '@mui/material';
+import { forwardRef } from 'react';
+import { Popover } from './popoverCircle.styles';
+
+export type IPopoverCircle = AvatarProps & {
+ size?: 'small' | 'medium';
+ backgroundColor?: string;
+};
+
+export const PopoverCircle = forwardRef(({ backgroundColor, ...props }: IPopoverCircle, ref) => (
+
+));
diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.styles.ts b/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.styles.ts
index 260f70e841c..71507260841 100644
--- a/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.styles.ts
+++ b/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.styles.ts
@@ -16,7 +16,6 @@
*/
import { AuthAvatarMui } from '@components/authenticatedResource/authAvatarMui.component';
-import { AvatarProps } from '@mui/material';
import { contrastColor } from 'contrast-color';
import styled, { css } from 'styled-components';
@@ -27,15 +26,10 @@ const CIRCLE_SIZE = {
const isLight = (color) => contrastColor({ bgColor: color, threshold: 170 }) === '#FFFFFF';
-export type IPopoverCircle = AvatarProps & {
- size?: 'small' | 'medium';
- backgroundColor?: string;
-};
-
-export const PopoverCircle = styled(AuthAvatarMui)`
+export const Popover = styled(AuthAvatarMui)<{ $backgroundColor }>`
margin: 0;
- color: ${({ backgroundColor, theme }) => (isLight(backgroundColor) ? theme.palette.primary.contrast : theme.palette.secondary.main)};
- background-color: ${({ backgroundColor, theme }) => backgroundColor || theme.palette.primary.contrast};
+ color: ${({ $backgroundColor, theme }) => (isLight($backgroundColor) ? theme.palette.primary.contrast : theme.palette.secondary.main)};
+ background-color: ${({ $backgroundColor, theme }) => $backgroundColor || theme.palette.primary.contrast};
pointer-events: auto;
font-size: 9px;
${({ size = 'medium' }) => css`
diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component.tsx b/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component.tsx
index 32f2ba695f4..2948ec5a791 100644
--- a/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component.tsx
+++ b/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component.tsx
@@ -17,7 +17,7 @@
import { HoverPopover } from '@controls/hoverPopover/hoverPopover.component';
import { IUser } from '@/v5/store/users/users.redux';
-import { IPopoverCircle } from '../popoverCircle.styles';
+import { IPopoverCircle } from '../popoverCircle.component';
import { UserPopover } from './userPopover/userPopover.component';
import { UserCircle } from './userPopoverCircle.styles';
diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.styles.ts b/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.styles.ts
index 5e9d833f16a..fdc9995c5ca 100644
--- a/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.styles.ts
+++ b/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.styles.ts
@@ -18,7 +18,7 @@
import { getUserInitials } from '@/v5/store/users/users.helpers';
import styled from 'styled-components';
import { IUser } from '@/v5/store/users/users.redux';
-import { IPopoverCircle, PopoverCircle } from '../popoverCircle.styles';
+import { IPopoverCircle, PopoverCircle } from '../popoverCircle.component';
type IUserCircle = Omit & {
user: IUser;
diff --git a/frontend/src/v5/ui/controls/assigneesSelect/assigneeCircle/assigneeCircle.component.tsx b/frontend/src/v5/ui/controls/assigneesSelect/assigneeCircle/assigneeCircle.component.tsx
index e63deabc5c4..aba46ce069e 100644
--- a/frontend/src/v5/ui/controls/assigneesSelect/assigneeCircle/assigneeCircle.component.tsx
+++ b/frontend/src/v5/ui/controls/assigneesSelect/assigneeCircle/assigneeCircle.component.tsx
@@ -19,7 +19,7 @@ import { useSelector } from 'react-redux';
import { selectJobs } from '@/v4/modules/jobs/jobs.selectors';
import { JobPopoverCircle } from '@components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component';
import { UserPopoverCircle } from '@components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component';
-import { IPopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles';
+import { IPopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component';
import { UsersHooksSelectors, TeamspacesHooksSelectors } from '@/v5/services/selectorsHooks';
import { memo } from 'react';
diff --git a/frontend/src/v5/ui/controls/assigneesSelect/assigneesSelect.styles.ts b/frontend/src/v5/ui/controls/assigneesSelect/assigneesSelect.styles.ts
index e37cbfa5bdf..9e8beeda9f6 100644
--- a/frontend/src/v5/ui/controls/assigneesSelect/assigneesSelect.styles.ts
+++ b/frontend/src/v5/ui/controls/assigneesSelect/assigneesSelect.styles.ts
@@ -15,7 +15,7 @@
* along with this program. If not, see .
*/
-import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles';
+import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component';
import { Tooltip as TooltipBase } from '@mui/material';
import styled from 'styled-components';
diff --git a/frontend/src/v5/ui/controls/assigneesSelect/extraAssigneesCircle/extraAssignees.styles.ts b/frontend/src/v5/ui/controls/assigneesSelect/extraAssigneesCircle/extraAssignees.styles.ts
index 5e99f5aee4d..508bf0b6d71 100644
--- a/frontend/src/v5/ui/controls/assigneesSelect/extraAssigneesCircle/extraAssignees.styles.ts
+++ b/frontend/src/v5/ui/controls/assigneesSelect/extraAssigneesCircle/extraAssignees.styles.ts
@@ -15,7 +15,7 @@
* along with this program. If not, see .
*/
-import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles';
+import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component';
import styled from 'styled-components';
export const ExtraAssigneesList = styled.ul`
diff --git a/frontend/stories/info/PopoverCircle.stories.tsx b/frontend/stories/info/PopoverCircle.stories.tsx
index 08f2b2653b8..08d2cc0a01a 100644
--- a/frontend/stories/info/PopoverCircle.stories.tsx
+++ b/frontend/stories/info/PopoverCircle.stories.tsx
@@ -16,7 +16,7 @@
*/
import { HoverPopover } from '@controls/hoverPopover/hoverPopover.component';
import { Meta, StoryObj } from '@storybook/react';
-import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles';
+import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component';
export default {
title: 'Info/PopoverCircle',