diff --git a/frontend/src/components/common/TagBadges.tsx b/frontend/src/components/common/TagBadges.tsx
index 2cb22eb2..75723814 100644
--- a/frontend/src/components/common/TagBadges.tsx
+++ b/frontend/src/components/common/TagBadges.tsx
@@ -34,11 +34,11 @@ export function TagBadges({
           }}
           disabled={!onTagClick}
           className={cn(
-            'rounded-full font-sans text-xs transition-colors',
+            'rounded-full font-sans transition-colors',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
             variant === 'default'
-              ? 'bg-accent text-muted-foreground hover:bg-accent'
-              : 'bg-accent/50 text-muted-foreground hover:bg-accent',
+              ? 'bg-[var(--color-bg-elevated)] text-muted-foreground border border-border hover:text-foreground hover:border-[var(--color-border-hover)]'
+              : 'bg-[rgba(255,255,255,0.04)] text-muted-foreground border border-border hover:text-foreground',
             !onTagClick && 'cursor-default'
           )}
         >
@@ -48,9 +48,9 @@ export function TagBadges({
       {hiddenCount > 0 && (
         <span
           className={cn(
-            'rounded-full font-sans text-xs',
+            'rounded-full font-sans',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
-            'bg-accent/50 text-muted-foreground'
+            'bg-[rgba(255,255,255,0.04)] text-muted-foreground border border-border'
           )}
           title={tags.slice(maxVisible).join(', ')}
         >
diff --git a/frontend/src/components/step-library/StepDetailModal.tsx b/frontend/src/components/step-library/StepDetailModal.tsx
index 36e6139c..8d39cb3f 100644
--- a/frontend/src/components/step-library/StepDetailModal.tsx
+++ b/frontend/src/components/step-library/StepDetailModal.tsx
@@ -208,8 +208,8 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                             className={cn(
                               'flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors',
                               copiedCommandIndex === index
-                                ? 'bg-emerald-400/10 text-emerald-400'
-                                : 'bg-accent text-muted-foreground hover:bg-accent hover:text-foreground'
+                                ? 'bg-success-dim text-success'
+                                : 'border border-border bg-[var(--color-bg-elevated)] text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]'
                             )}
                           >
                             {copiedCommandIndex === index ? (
diff --git a/frontend/src/components/step-library/StepForm.tsx b/frontend/src/components/step-library/StepForm.tsx
index 0611f5b6..9d9cfec0 100644
--- a/frontend/src/components/step-library/StepForm.tsx
+++ b/frontend/src/components/step-library/StepForm.tsx
@@ -224,7 +224,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           <button
             type="button"
             onClick={addCommand}
-            className="flex items-center gap-1 rounded-md bg-accent px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex items-center gap-1 rounded-md border border-border bg-[var(--color-bg-elevated)] px-2 py-1 text-xs font-medium text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]"
           >
             <Plus className="h-3 w-3" />
             Add Command
@@ -304,7 +304,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           <button
             type="button"
             onClick={addTag}
-            className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded-md border border-border bg-[var(--color-bg-elevated)] px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]"
           >
             Add
           </button>
diff --git a/frontend/src/components/step-library/StepLibraryBrowser.tsx b/frontend/src/components/step-library/StepLibraryBrowser.tsx
index 3026800a..bb8b99f8 100644
--- a/frontend/src/components/step-library/StepLibraryBrowser.tsx
+++ b/frontend/src/components/step-library/StepLibraryBrowser.tsx
@@ -226,7 +226,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                     'rounded-full px-2.5 py-1 text-xs transition-colors',
                     selectedTag === tag.tag
                       ? 'bg-primary text-white'
-                      : 'bg-accent text-muted-foreground hover:bg-accent'
+                      : 'border border-border bg-[var(--color-bg-elevated)] text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]'
                   )}
                 >
                   {tag.tag} ({tag.count})