diff --git a/src/renderer/components/notifications/AccountNotifications.tsx b/src/renderer/components/notifications/AccountNotifications.tsx
index a749bfaae..2329e8fc7 100644
--- a/src/renderer/components/notifications/AccountNotifications.tsx
+++ b/src/renderer/components/notifications/AccountNotifications.tsx
@@ -103,7 +103,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
               />
             </Button>
 
-            <HoverGroup bgColor="bg-gitify-account-rest">
+            <HoverGroup bgColor="group-hover:bg-gitify-account-rest">
               <HoverButton
                 label="My Issues"
                 icon={IssueOpenedIcon}
diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx
index 0fcfcd6b2..14c9ebcaa 100644
--- a/src/renderer/components/notifications/NotificationRow.tsx
+++ b/src/renderer/components/notifications/NotificationRow.tsx
@@ -153,7 +153,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         </Stack>
 
         {!animateExit && (
-          <HoverGroup bgColor="bg-gitify-notification-hover">
+          <HoverGroup bgColor="group-hover:bg-gitify-notification-hover">
             <HoverButton
               label="Mark as done"
               icon={CheckIcon}
diff --git a/src/renderer/components/notifications/RepositoryNotifications.tsx b/src/renderer/components/notifications/RepositoryNotifications.tsx
index ec227e663..f2285dbcc 100644
--- a/src/renderer/components/notifications/RepositoryNotifications.tsx
+++ b/src/renderer/components/notifications/RepositoryNotifications.tsx
@@ -94,7 +94,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           </Button>
 
           {!animateExit && (
-            <HoverGroup bgColor="bg-gitify-repository">
+            <HoverGroup bgColor="group-hover:bg-gitify-repository">
               <HoverButton
                 label="Mark repository as done"
                 icon={CheckIcon}
diff --git a/src/renderer/components/primitives/HoverGroup.test.tsx b/src/renderer/components/primitives/HoverGroup.test.tsx
index 40eef7485..5ab612f3a 100644
--- a/src/renderer/components/primitives/HoverGroup.test.tsx
+++ b/src/renderer/components/primitives/HoverGroup.test.tsx
@@ -3,7 +3,11 @@ import { HoverGroup } from './HoverGroup';
 
 describe('renderer/components/primitives/HoverGroup.tsx', () => {
   it('should render', () => {
-    const tree = render(<HoverGroup bgColor="white">Hover Group</HoverGroup>);
+    const tree = render(
+      <HoverGroup bgColor="group-hover:bg-gitify-repository">
+        Hover Group
+      </HoverGroup>,
+    );
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/renderer/components/primitives/HoverGroup.tsx b/src/renderer/components/primitives/HoverGroup.tsx
index 7d6e18b16..1b04fca2d 100644
--- a/src/renderer/components/primitives/HoverGroup.tsx
+++ b/src/renderer/components/primitives/HoverGroup.tsx
@@ -4,8 +4,11 @@ import { Stack } from '@primer/react';
 import { cn } from '../../utils/cn';
 
 interface IHoverGroup {
-  bgColor: string;
   children: ReactNode;
+  bgColor:
+    | 'group-hover:bg-gitify-account-rest'
+    | 'group-hover:bg-gitify-repository'
+    | 'group-hover:bg-gitify-notification-hover';
 }
 
 export const HoverGroup: FC<IHoverGroup> = ({
@@ -20,7 +23,7 @@ export const HoverGroup: FC<IHoverGroup> = ({
       className={cn(
         'absolute right-0 h-full',
         'opacity-0 transition-opacity group-hover:opacity-100',
-        `group-hover:${bgColor}`,
+        bgColor,
       )}
     >
       {children}
diff --git a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
index 23d473a89..c2cf373c5 100644
--- a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/primitives/HoverGroup.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:white"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
@@ -20,7 +20,7 @@ exports[`renderer/components/primitives/HoverGroup.tsx should render 1`] = `
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:white"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository"
       data-align="center"
       data-direction="horizontal"
       data-gap="none"