diff --git a/studio/src/components/layout/dashboard-layout.tsx b/studio/src/components/layout/dashboard-layout.tsx
index fda8e16132..f4d52827be 100644
--- a/studio/src/components/layout/dashboard-layout.tsx
+++ b/studio/src/components/layout/dashboard-layout.tsx
@@ -247,9 +247,20 @@ export const DashboardLayout = ({ children }: LayoutProps) => {
         title: "Account",
       },
       {
-        title: "Invitations",
+        title: (
+          <>
+            Invitations
+            {user?.invitations?.length ? (
+              <div className="relative ml-auto">
+                <div aria-hidden="true" className="absolute h-2 w-2 animate-ping rounded-full bg-blue-400" />
+                <div aria-hidden="true" className="h-2 w-2 rounded-full bg-blue-400" />
+              </div>
+            ) : null}
+          </>
+        ),
         href: "/account/invitations",
         icon: <EnvelopeClosedIcon className="size-4" />,
+        className: 'flex justify-between items-center w-full gap-x-1',
       },
       {
         title: "Manage",
@@ -265,6 +276,7 @@ export const DashboardLayout = ({ children }: LayoutProps) => {
     user?.currentOrganization.slug,
     isAdmin,
     isAdminOrDeveloper,
+    user?.invitations,
   ]);
 
   return (
diff --git a/studio/src/components/layout/sidenav.tsx b/studio/src/components/layout/sidenav.tsx
index 5e8b126c5d..0e92fc4db5 100644
--- a/studio/src/components/layout/sidenav.tsx
+++ b/studio/src/components/layout/sidenav.tsx
@@ -3,21 +3,13 @@ import { cn } from "@/lib/utils";
 import {
   CaretSortIcon,
   Cross2Icon,
-  EnvelopeClosedIcon,
   HamburgerMenuIcon,
 } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { ReactNode, useContext, useMemo, useState } from "react";
+import { ReactNode, useContext, useState } from "react";
 import { UserContext } from "../app-provider";
 import { Logo } from "../logo";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
 import { Separator } from "../ui/separator";
 import { UserMenu, UserMenuMobile } from "../user-menu";
 import { LayoutProps } from "./layout";
@@ -36,7 +28,8 @@ import {
 } from "../ui/dropdown-menu";
 
 export type NavLink = {
-  title: string;
+  title: ReactNode;
+  className?: string;
   href: string;
   matchExact?: boolean;
   icon: ReactNode;
@@ -48,6 +41,7 @@ const isActive = (path: string, currentPath: string, exact = true) => {
 };
 
 const MobileNav = () => {
+  const user = useUser();
   return (
     <div
       className={cn(
@@ -56,7 +50,18 @@ const MobileNav = () => {
     >
       <div className="relative z-20 grid gap-6 rounded-md p-4 text-popover-foreground">
         <nav className="grid grid-flow-row auto-rows-max items-center justify-center space-y-2 text-center text-sm">
-          <Link href="/account/invitations">Invitations</Link>
+          <Link
+            href="/account/invitations"
+            className="flex justify-center items-center gap-x-2"
+          >
+            Invitations
+            {user?.invitations?.length && (
+              <div className="relative">
+                <div aria-hidden="true" className="absolute h-2 w-2 animate-ping rounded-full bg-blue-400" />
+                <div aria-hidden="true" className="h-2 w-2 rounded-full bg-blue-400" />
+              </div>
+            )}
+          </Link>
 
           <Link
             href={docsBaseURL}
@@ -205,7 +210,7 @@ export const SideNav = (props: SideNavLayoutProps) => {
                     >
                       {item.icon}
 
-                      <span className="whitespace-nowrap">{item.title}</span>
+                      <span className={cn("whitespace-nowrap", item.className)}>{item.title}</span>
                     </Link>
                   ) : (
                     <h4 className="hidden px-3 py-2 text-sm text-muted-foreground lg:block">
diff --git a/studio/src/components/user-menu.tsx b/studio/src/components/user-menu.tsx
index 5008c2b375..f45f317f8e 100644
--- a/studio/src/components/user-menu.tsx
+++ b/studio/src/components/user-menu.tsx
@@ -52,8 +52,9 @@ export const UserMenu = () => {
             </AvatarFallback>
           </Avatar>
           {hasInvitations ? (
-            <div className="absolute right-0 top-0 -translate-x-0.5 -translate-y-0.5 rounded-full border-2 border-background">
-              <div className="h-2 w-2 rounded-full bg-blue-400" />
+            <div className="absolute right-0 top-0 -translate-x-0.5 -translate-y-0.5 rounded-full border-2 border-background pointer-events-none">
+              <div className="absolute size-2 animate-ping rounded-full bg-blue-400" />
+              <div className="size-2 rounded-full bg-blue-400" />
             </div>
           ) : null}
         </div>
@@ -67,8 +68,8 @@ export const UserMenu = () => {
             Invitations
             {hasInvitations ? (
               <div className="relative ml-auto">
-                <div className="absolute h-2 w-2 animate-ping rounded-full bg-blue-400" />
-                <div className="h-2 w-2 rounded-full bg-blue-400" />
+                <div className="absolute size-2 animate-ping rounded-full bg-blue-400" />
+                <div className="size-2 rounded-full bg-blue-400" />
               </div>
             ) : null}
           </DropdownMenuItem>