diff --git a/web/app/src/components/ui/DropdownMenu/DropdownMenu.css b/web/app/src/components/ui/DropdownMenu/DropdownMenu.css
index 0d15575f..7fb30513 100644
--- a/web/app/src/components/ui/DropdownMenu/DropdownMenu.css
+++ b/web/app/src/components/ui/DropdownMenu/DropdownMenu.css
@@ -15,7 +15,7 @@
   display: flex;
   min-height: 38px;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: 12px;
   padding: 8px 10px;
   border-radius: 8px;
@@ -27,12 +27,20 @@
   user-select: none;
 }
 
+.csg-dropdown-menu-item svg {
+  flex: 0 0 auto;
+}
+
 .csg-dropdown-menu-item:hover,
 .csg-dropdown-menu-item[data-highlighted] {
   background: var(--primary-soft);
   color: var(--text);
 }
 
+.csg-dropdown-menu-item:active {
+  background: color-mix(in oklab, var(--primary) 14%, transparent);
+}
+
 .csg-dropdown-menu-checkbox-item {
   position: relative;
   padding-left: 32px;
@@ -50,14 +58,32 @@
   line-height: 1;
 }
 
+.csg-dropdown-menu-item.warning {
+  color: var(--warning);
+}
+
+.csg-dropdown-menu-item.warning:hover,
+.csg-dropdown-menu-item.warning[data-highlighted] {
+  background: color-mix(in oklab, var(--warning) 12%, transparent);
+  color: color-mix(in oklab, var(--warning) 90%, var(--text));
+}
+
+.csg-dropdown-menu-item.warning:active {
+  background: color-mix(in oklab, var(--warning) 18%, transparent);
+}
+
 .csg-dropdown-menu-item.danger {
   color: var(--danger);
 }
 
 .csg-dropdown-menu-item.danger:hover,
 .csg-dropdown-menu-item.danger[data-highlighted] {
-  background: var(--error-50);
-  color: var(--danger);
+  background: color-mix(in oklab, var(--danger) 12%, transparent);
+  color: color-mix(in oklab, var(--danger) 90%, var(--text));
+}
+
+.csg-dropdown-menu-item.danger:active {
+  background: color-mix(in oklab, var(--danger) 18%, transparent);
 }
 
 .csg-dropdown-menu-item[data-disabled] {
@@ -66,6 +92,13 @@
   pointer-events: none;
 }
 
+.csg-dropdown-menu-item[data-disabled]:hover,
+.csg-dropdown-menu-item[data-disabled][data-highlighted],
+.csg-dropdown-menu-item[data-disabled]:active {
+  background: transparent;
+  color: var(--muted);
+}
+
 .csg-dropdown-menu-separator {
   height: 1px;
   margin: 5px 4px;
diff --git a/web/app/src/components/ui/DropdownMenu/DropdownMenu.tsx b/web/app/src/components/ui/DropdownMenu/DropdownMenu.tsx
index 855adddc..427d1842 100644
--- a/web/app/src/components/ui/DropdownMenu/DropdownMenu.tsx
+++ b/web/app/src/components/ui/DropdownMenu/DropdownMenu.tsx
@@ -39,16 +39,21 @@ export const DropdownMenuContent = forwardRef<ComponentRef<typeof RadixDropdownM
   },
 );
 
+export type DropdownMenuItemTone = "default" | "warning" | "danger";
+
 export type DropdownMenuItemProps = ComponentPropsWithoutRef<typeof RadixDropdownMenu.Item> & {
   danger?: boolean;
+  tone?: DropdownMenuItemTone;
 };
 
 export const DropdownMenuItem = forwardRef<ComponentRef<typeof RadixDropdownMenu.Item>, DropdownMenuItemProps>(
-  function DropdownMenuItem({ className, danger = false, ...props }, ref) {
+  function DropdownMenuItem({ className, danger = false, tone, ...props }, ref) {
+    const itemTone = tone ?? (danger ? "danger" : "default");
+
     return (
       <RadixDropdownMenu.Item
         ref={ref}
-        className={classNames("csg-dropdown-menu-item", danger && "danger", className)}
+        className={classNames("csg-dropdown-menu-item", itemTone !== "default" && itemTone, className)}
         {...props}
       />
     );
diff --git a/web/app/src/pages/AgentPage/components/AgentDetailPane/AgentDetailPane.css b/web/app/src/pages/AgentPage/components/AgentDetailPane/AgentDetailPane.css
index b38ca10c..3633cfe3 100644
--- a/web/app/src/pages/AgentPage/components/AgentDetailPane/AgentDetailPane.css
+++ b/web/app/src/pages/AgentPage/components/AgentDetailPane/AgentDetailPane.css
@@ -259,6 +259,7 @@
 }
 
 .agent-actions-menu-badge {
+  margin-left: auto;
   padding: 2px 6px;
   border-radius: var(--radius-full);
   background: var(--warning-50);
diff --git a/web/app/src/pages/AgentPage/components/AgentDetailPane/AgentDetailPane.tsx b/web/app/src/pages/AgentPage/components/AgentDetailPane/AgentDetailPane.tsx
index dc253094..695e94c9 100644
--- a/web/app/src/pages/AgentPage/components/AgentDetailPane/AgentDetailPane.tsx
+++ b/web/app/src/pages/AgentPage/components/AgentDetailPane/AgentDetailPane.tsx
@@ -7,11 +7,16 @@ import {
   FileCode2,
   Link2,
   MoreHorizontal,
+  Play,
   Plus,
   RefreshCw,
+  Save,
   Server,
+  Square,
   Trash2,
   Unlink2,
+  UploadCloud,
+  UserPlus,
 } from "lucide-react";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { errorMessage } from "@/api/client";
@@ -2008,21 +2013,29 @@ function AgentActionsMenu({
       <DropdownMenuContent className="agent-actions-menu" aria-label={t("agentMoreActions")}>
         {SHOW_AGENT_LIFECYCLE_ACTIONS ? (
           <DropdownMenuItem disabled={busy || incomplete} onSelect={() => (running ? onStop(item) : onStart(item))}>
-            {running ? t("agentStop") : t("agentStart")}
+            {running ? (
+              <Square aria-hidden="true" size={15} strokeWidth={2} />
+            ) : (
+              <Play aria-hidden="true" size={15} strokeWidth={2} />
+            )}
+            <span>{running ? t("agentStop") : t("agentStart")}</span>
           </DropdownMenuItem>
         ) : null}
-        <DropdownMenuItem danger disabled={busy || incomplete} onSelect={() => onRecreate(item)}>
-          {t("agentRecreate")}
+        <DropdownMenuItem disabled={busy || incomplete} onSelect={() => onRecreate(item)}>
+          <RefreshCw aria-hidden="true" size={15} strokeWidth={2} />
+          <span>{t("agentRecreate")}</span>
         </DropdownMenuItem>
         {SHOW_AGENT_LIFECYCLE_ACTIONS && activeRoom && !isManager ? (
           <DropdownMenuItem disabled={busy} onSelect={() => onInvite(item)}>
-            {t("inviteToRoom")}
+            <UserPlus aria-hidden="true" size={15} strokeWidth={2} />
+            <span>{t("inviteToRoom")}</span>
           </DropdownMenuItem>
         ) : null}
         {canPublishLocal ? (
           <>
             <DropdownMenuItem disabled={publishBusy} onSelect={() => onPublish?.("local")}>
-              {publishBusy ? t("agentPublishing") : t("agentSaveLocalTemplate")}
+              <Save aria-hidden="true" size={15} strokeWidth={2} />
+              <span>{publishBusy ? t("agentPublishing") : t("agentSaveLocalTemplate")}</span>
             </DropdownMenuItem>
             {canPublishCommunity ? (
               <DropdownMenuItem
@@ -2030,7 +2043,8 @@ function AgentActionsMenu({
                 title={publishDisabled ? t("agentPublishLoginRequired") : undefined}
                 onSelect={() => onPublish?.("official")}
               >
-                {publishBusy ? t("agentPublishing") : t("agentPublishCommunity")}
+                <UploadCloud aria-hidden="true" size={15} strokeWidth={2} />
+                <span>{publishBusy ? t("agentPublishing") : t("agentPublishCommunity")}</span>
               </DropdownMenuItem>
             ) : null}
           </>
@@ -2039,7 +2053,8 @@ function AgentActionsMenu({
           <>
             <DropdownMenuSeparator />
             <DropdownMenuItem danger disabled={busy} onSelect={() => onDelete(item)}>
-              {t("agentDelete")}
+              <Trash2 aria-hidden="true" size={15} strokeWidth={2} />
+              <span>{t("agentDelete")}</span>
             </DropdownMenuItem>
           </>
         ) : null}