diff --git a/archon-ui-main/src/features/style-guide/layouts/AgentWorkOrderExample.tsx b/archon-ui-main/src/features/style-guide/layouts/AgentWorkOrderExample.tsx
index 04befa6c..a00a403a 100644
--- a/archon-ui-main/src/features/style-guide/layouts/AgentWorkOrderExample.tsx
+++ b/archon-ui-main/src/features/style-guide/layouts/AgentWorkOrderExample.tsx
@@ -127,7 +127,11 @@ export const AgentWorkOrderExample = () => {
             className="text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/10"
             aria-label={showDetails ? "Hide details" : "Show details"}
           >
-            {showDetails ? <ChevronUp className="w-4 h-4 mr-1" /> : <ChevronDown className="w-4 h-4 mr-1" />}
+            {showDetails ? (
+              <ChevronUp className="w-4 h-4 mr-1" aria-hidden="true" />
+            ) : (
+              <ChevronDown className="w-4 h-4 mr-1" aria-hidden="true" />
+            )}
             Details
           </Button>
         </div>
@@ -177,7 +181,7 @@ export const AgentWorkOrderExample = () => {
                             className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-orange-500 hover:bg-orange-600 rounded-full p-1.5 shadow-lg shadow-orange-500/50 border-2 border-orange-400 transition-colors cursor-pointer"
                             aria-label="Remove Human-in-Loop checkpoint"
                           >
-                            <User className="w-3.5 h-3.5 text-white" />
+                            <User className="w-3.5 h-3.5 text-white" aria-hidden="true" />
                           </button>
                         </TooltipTrigger>
                         <TooltipContent>Click to remove</TooltipContent>
@@ -196,7 +200,7 @@ export const AgentWorkOrderExample = () => {
                             className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-orange-500 hover:bg-orange-600 transition-colors shadow-lg shadow-orange-500/50 flex items-center justify-center text-white"
                             aria-label="Add Human-in-Loop step"
                           >
-                            <Plus className="w-4 h-4" />
+                            <Plus className="w-4 h-4" aria-hidden="true" />
                           </button>
                         </TooltipTrigger>
                         <TooltipContent>Add Human-in-Loop</TooltipContent>
@@ -237,7 +241,7 @@ export const AgentWorkOrderExample = () => {
                   duration: 0.2,
                   ease: "easeOut",
                 }}
-                className="grid grid-cols-2 gap-6 pt-6 border-t border-gray-200/50 dark:border-gray-700/30"
+                className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-6 border-t border-gray-200/50 dark:border-gray-700/30"
               >
                 {/* Left Column */}
                 <div className="space-y-4">
@@ -263,7 +267,7 @@ export const AgentWorkOrderExample = () => {
                           className="text-sm font-medium text-cyan-600 dark:text-cyan-400 hover:underline inline-flex items-center gap-1 mt-0.5"
                         >
                           https://github.com/Wirasm/dylan
-                          <ExternalLink className="w-3 h-3" />
+                          <ExternalLink className="w-3 h-3" aria-hidden="true" />
                         </a>
                       </div>
                       <div>
diff --git a/archon-ui-main/src/features/style-guide/layouts/components/StepHistoryCard.tsx b/archon-ui-main/src/features/style-guide/layouts/components/StepHistoryCard.tsx
index 368f44a5..b4437399 100644
--- a/archon-ui-main/src/features/style-guide/layouts/components/StepHistoryCard.tsx
+++ b/archon-ui-main/src/features/style-guide/layouts/components/StepHistoryCard.tsx
@@ -66,7 +66,7 @@ export const StepHistoryCard = ({ step, isExpanded, onToggle, document }: StepHi
             <h4 className="font-semibold text-gray-900 dark:text-white">{step.stepName}</h4>
             {step.isHumanInLoop && (
               <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20">
-                <AlertCircle className="w-3 h-3" />
+                <AlertCircle className="w-3 h-3" aria-hidden="true" />
                 Human-in-Loop
               </span>
             )}
@@ -249,7 +249,7 @@ export const StepHistoryCard = ({ step, isExpanded, onToggle, document }: StepHi
                           "shadow-lg shadow-green-500/20",
                         )}
                       >
-                        <CheckCircle2 className="w-4 h-4 mr-2" />
+                        <CheckCircle2 className="w-4 h-4 mr-2" aria-hidden="true" />
                         Approve and Move to Next Step
                       </Button>
                     </div>
diff --git a/archon-ui-main/src/features/style-guide/layouts/components/WorkflowStepButton.tsx b/archon-ui-main/src/features/style-guide/layouts/components/WorkflowStepButton.tsx
index 1fb9a6f2..0d1657e3 100644
--- a/archon-ui-main/src/features/style-guide/layouts/components/WorkflowStepButton.tsx
+++ b/archon-ui-main/src/features/style-guide/layouts/components/WorkflowStepButton.tsx
@@ -14,7 +14,7 @@ interface WorkflowStepButtonProps {
 const getColorValue = (color: string) => {
   const colorValues = {
     purple: "rgb(168,85,247)",
-    green: "rgb(16,185,129)",
+    green: "rgb(34,197,94)",
     blue: "rgb(59,130,246)",
     cyan: "rgb(34,211,238)",
   };
@@ -38,11 +38,11 @@ export const WorkflowStepButton: React.FC<WorkflowStepButtonProps> = ({
       innerGlow: "shadow-[inset_0_0_10px_rgba(168,85,247,0.8)]",
     },
     green: {
-      border: "border-emerald-400",
-      glow: "shadow-[0_0_15px_rgba(16,185,129,0.8)]",
-      glowHover: "hover:shadow-[0_0_25px_rgba(16,185,129,1)]",
-      fill: "bg-emerald-400",
-      innerGlow: "shadow-[inset_0_0_10px_rgba(16,185,129,0.8)]",
+      border: "border-green-400",
+      glow: "shadow-[0_0_15px_rgba(34,197,94,0.8)]",
+      glowHover: "hover:shadow-[0_0_25px_rgba(34,197,94,1)]",
+      fill: "bg-green-400",
+      innerGlow: "shadow-[inset_0_0_10px_rgba(34,197,94,0.8)]",
     },
     blue: {
       border: "border-blue-400",