diff --git a/packages/app/src/session/composer/activity-chips.css b/packages/app/src/session/composer/activity-chips.css
index c97a3079fd8..5933398a17e 100644
--- a/packages/app/src/session/composer/activity-chips.css
+++ b/packages/app/src/session/composer/activity-chips.css
@@ -2,7 +2,26 @@
   background: var(--v2-background-bg-layer-01);
 }
 
+/* The composer buttons' overlays and focus ring, with overlays layered over the capsule's own surface. */
 [data-slot="session-activity-chip"] {
+  &:focus-visible {
+    outline: 2px solid var(--v2-border-border-focus);
+    outline-offset: 2.5px;
+  }
+
+  @media (hover: hover) {
+    &:hover:not(:active, [data-expanded]) {
+      background-image: linear-gradient(var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover));
+    }
+  }
+
+  &:is(:active, [data-expanded]) {
+    background-image: linear-gradient(
+      var(--v2-overlay-simple-overlay-pressed),
+      var(--v2-overlay-simple-overlay-pressed)
+    );
+  }
+
   &[data-orb="true"] {
     position: relative;
     height: 28px;
diff --git a/packages/app/src/session/composer/activity-chips.tsx b/packages/app/src/session/composer/activity-chips.tsx
index 5f9e79638f6..79335f48a11 100644
--- a/packages/app/src/session/composer/activity-chips.tsx
+++ b/packages/app/src/session/composer/activity-chips.tsx
@@ -177,7 +177,7 @@ export function SessionActivityChips(props: {
             data-orb={experiment.chip === "orb"}
             style={{ "--activity-chip-radius": experiment.corners === "capsule" ? "9999px" : "var(--radius-xl)" }}
             aria-label={label()}
-            class="pointer-events-auto flex h-7 min-w-0 max-w-full items-center gap-2 rounded-[12px] border-[0.5px] border-v2-border-border-muted bg-v2-background-bg-base ps-2.5 pe-2.5 text-[13px] font-[530] leading-text-compact tracking-[-0.04px] whitespace-nowrap tabular-nums text-v2-text-text-base shadow-[var(--v2-elevation-raised)] outline-none duration-150 ease-out motion-reduce:animate-none hover:bg-v2-background-bg-layer-01 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-v2-border-border-focus"
+            class="pointer-events-auto flex h-7 min-w-0 max-w-full items-center gap-2 rounded-[12px] border-[0.5px] border-v2-border-border-muted bg-v2-background-bg-base ps-2.5 pe-2.5 text-[13px] font-[530] leading-text-compact tracking-[-0.04px] whitespace-nowrap tabular-nums text-v2-text-text-base shadow-[var(--v2-elevation-raised)] outline-none duration-150 ease-out motion-reduce:animate-none"
             classList={{ "animate-in fade-in": enter() }}
           >
             <ActivityGlyph />