diff --git a/src/components/frontend/locker/Wardrobe.tsx b/src/components/frontend/locker/Wardrobe.tsx
index 642e84d..75c5460 100644
--- a/src/components/frontend/locker/Wardrobe.tsx
+++ b/src/components/frontend/locker/Wardrobe.tsx
@@ -114,6 +114,7 @@ export function Wardrobe({
                 side="right"
                 sideOffset={8}
                 className="bg-popover text-popover-foreground border border-border text-sm px-3.5 py-2"
+                arrowClassName="bg-popover fill-popover"
               >
                 <div className="flex flex-col gap-0.5">
                   <span className="font-semibold">{layout.label}</span>
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index a4e90d4..2d803a5 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -36,10 +36,11 @@ function TooltipTrigger({
 
 function TooltipContent({
   className,
+  arrowClassName,
   sideOffset = 0,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & { arrowClassName?: string }) {
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
@@ -52,7 +53,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className={cn("bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]", arrowClassName)} />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )