diff --git a/src/routes/notifications.tsx b/src/routes/notifications.tsx
index a4d99ac..2c40219 100644
--- a/src/routes/notifications.tsx
+++ b/src/routes/notifications.tsx
@@ -88,8 +88,8 @@ export default function NotificationsTabs() {
         //console.log(wow);
         return wow;
       });
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -103,12 +103,15 @@ export default function NotificationsTabs() {
       >
         <TabsPrimitive.Trigger
           value="mentions"
+          className="m3tab"
           // styling is in app.css
         >
           Mentions
         </TabsPrimitive.Trigger>
-        <TabsPrimitive.Trigger value="follows">Follows</TabsPrimitive.Trigger>
-        <TabsPrimitive.Trigger value="postInteractions">
+        <TabsPrimitive.Trigger value="follows" className="m3tab">
+          Follows
+        </TabsPrimitive.Trigger>
+        <TabsPrimitive.Trigger value="postInteractions" className="m3tab">
           Post Interactions
         </TabsPrimitive.Trigger>
       </TabsPrimitive.List>
diff --git a/src/styles/app.css b/src/styles/app.css
index b747af7..53e59b3 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -237,7 +237,7 @@ body[data-scroll-locked]{
 
 /* radix tabs */
 
-[data-radix-collection-item] {
+.m3tab[data-radix-collection-item] {
   flex: 1;
   display: flex;
   padding: 12px 8px;
@@ -245,6 +245,10 @@ body[data-scroll-locked]{
   justify-content: center;
   color: var(--color-gray-500);
   font-weight: 500;
+  &:hover {
+    background-color: var(--color-gray-100);
+    cursor: pointer;
+  }
   &[aria-selected="true"] {
     color: var(--color-gray-950);
     &::before{
@@ -260,8 +264,12 @@ body[data-scroll-locked]{
 }
 
 @media (prefers-color-scheme: dark) {
-  [data-radix-collection-item] {
+  .m3tab[data-radix-collection-item] {
     color: var(--color-gray-400);
+    &:hover {
+      background-color: var(--color-gray-900);
+      cursor: pointer;
+    }
     &[aria-selected="true"] {
       color: var(--color-gray-50);
       &::before{