diff --git a/web/components/Sidebar.tsx b/web/components/Sidebar.tsx
index 387bf2d..8f0e838 100644
--- a/web/components/Sidebar.tsx
+++ b/web/components/Sidebar.tsx
@@ -60,11 +60,20 @@ function SettingsIcon() {
   );
 }
 
+function StepsIcon() {
+  return (
+    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 6.75A.75.75 0 016.75 6h10.5a.75.75 0 010 1.5H6.75A.75.75 0 016 6.75zm0 5.25a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H6.75A.75.75 0 016 12zm0 5.25a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H6.75A.75.75 0 016 17.25zM3 6.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM3 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 5.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+    </svg>
+  );
+}
+
 const navItems: NavItem[] = [
   { href: "/servers", label: "Servers", icon: <ServerIcon /> },
   { href: "/keys", label: "SSH Keys", icon: <KeyIcon /> },
   { href: "/secrets", label: "Secrets", icon: <SecretIcon /> },
   { href: "/workflows", label: "Workflows", icon: <WorkflowIcon /> },
+  { href: "/steps", label: "Steps", icon: <StepsIcon /> },
   { href: "/audit", label: "Audit Log", icon: <AuditIcon /> },
   { href: "/settings", label: "Settings", icon: <SettingsIcon /> },
 ];