diff --git a/packages/ui/package.json b/packages/ui/package.json
index eba02dd..d22584f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -32,7 +32,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^2.5.3",
-    "zod": "^3.25.76"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.16",
diff --git a/packages/ui/src/components/Progress.tsx b/packages/ui/src/components/Progress.tsx
index cb19df1..a1b2a19 100644
--- a/packages/ui/src/components/Progress.tsx
+++ b/packages/ui/src/components/Progress.tsx
@@ -8,7 +8,7 @@ import {
   useContext,
   useState,
 } from "react";
-import { z } from "zod";
+import { z } from "zod/v4";
 
 interface ProgressContextValue {
   currentStep: number;
@@ -32,6 +32,7 @@ export const stepStateSchema = z.enum([
   "completed",
   "pending",
   "error",
+  "disabled",
 ]);
 
 export const stepPropsSchema = z.object({
@@ -39,6 +40,7 @@ export const stepPropsSchema = z.object({
   children: z.any().optional(),
   index: z.number().int().nonnegative().optional(),
   state: stepStateSchema.optional(),
+  disabled: z.boolean().optional(),
 });
 
 export type StepProps = z.infer<typeof stepPropsSchema>;
@@ -65,13 +67,14 @@ const getStepPropsFromElement = (element: ReactElement): StepProps | null => {
   return validateStepProps(element.props);
 };
 
-const stepContainerVariants = cva("flex items-center space-x-2", {
+const stepContainerVariants = cva("flex items-center space-x-2 transition-colors duration-200", {
   variants: {
     state: {
       selected: "text-ctp-blue",
       completed: "text-ctp-green",
       pending: "text-ctp-subtext0",
       error: "text-ctp-red",
+      disabled: "text-ctp-overlay0 opacity-50",
     },
   },
   defaultVariants: {
@@ -80,7 +83,7 @@ const stepContainerVariants = cva("flex items-center space-x-2", {
 });
 
 const stepIndicatorVariants = cva(
-  "h-8 w-8 rounded-full flex items-center justify-center",
+  "h-8 w-8 rounded-full flex items-center justify-center transition-colors duration-200",
   {
     variants: {
       state: {
@@ -88,6 +91,7 @@ const stepIndicatorVariants = cva(
         completed: "bg-ctp-green text-ctp-base",
         pending: "bg-ctp-surface0",
         error: "bg-ctp-red text-ctp-base",
+        disabled: "bg-ctp-surface0 opacity-50",
       },
     },
     defaultVariants: {
@@ -99,12 +103,16 @@ const stepIndicatorVariants = cva(
 interface StepComponentProps {
   name: string;
   children?: ReactNode;
+  state?: StepState;
+  disabled?: boolean;
 }
 
 interface StepRenderProps {
   name: string;
   index: number;
   state: StepState;
+  clickable: boolean;
+  onClick?: () => void;
 }
 
 const Step = (_props: StepComponentProps) => {
@@ -113,25 +121,39 @@ const Step = (_props: StepComponentProps) => {
 
 Step.displayName = "Progress.Step";
 
-const StepRenderer = ({ name, index, state }: StepRenderProps) => {
+const StepRenderer = ({
+  name,
+  index,
+  state,
+  clickable,
+  onClick,
+}: StepRenderProps) => {
   const stepNumber = index + 1;
+  const isClickable = clickable && state !== "disabled";
 
   return (
-    <div className={stepContainerVariants({ state })}>
+    <button
+      type="button"
+      className={`${stepContainerVariants({ state })} ${isClickable ? "cursor-pointer" : "cursor-default"}`}
+      onClick={isClickable ? onClick : undefined}
+      disabled={!isClickable}
+    >
       <div className={stepIndicatorVariants({ state })}>{stepNumber}</div>
       <span className="font-medium">{name}</span>
-    </div>
+    </button>
   );
 };
 
 const ConnectorLine = ({ isCompleted }: { isCompleted: boolean }) => (
   <div
-    className={`h-1 w-16 ${isCompleted ? "bg-ctp-green" : "bg-ctp-surface0"}`}
+    className={`h-1 w-16 transition-colors duration-200 ${isCompleted ? "bg-ctp-green" : "bg-ctp-surface0"}`}
   />
 );
 
 interface ProgressProps {
   initialStep?: number;
+  currentStep?: number;
+  onStepChange?: (step: number) => void;
   onNext?: () => void;
   onBack?: () => void;
   children: ReactNode;
@@ -139,11 +161,16 @@ interface ProgressProps {
 
 export const Progress = ({
   initialStep = 0,
+  currentStep: controlledStep,
+  onStepChange,
   onNext,
   onBack,
   children,
 }: ProgressProps) => {
-  const [currentStep, setCurrentStep] = useState(initialStep);
+  const [internalStep, setInternalStep] = useState(initialStep);
+
+  const isControlled = controlledStep !== undefined;
+  const currentStep = isControlled ? controlledStep : internalStep;
 
   const steps = Children.toArray(children).filter(
     (child): child is ReactElement =>
@@ -157,19 +184,23 @@ export const Progress = ({
   const canGoNext = currentStep < totalSteps - 1;
   const canGoBack = currentStep > 0;
 
-  const handleNext = () => {
-    if (!canGoNext) {
-      return;
+  const goToStep = (step: number) => {
+    if (isControlled) {
+      onStepChange?.(step);
+    } else {
+      setInternalStep(step);
     }
-    setCurrentStep((prev) => prev + 1);
+  };
+
+  const handleNext = () => {
+    if (!canGoNext) return;
+    goToStep(currentStep + 1);
     onNext?.();
   };
 
   const handleBack = () => {
-    if (!canGoBack) {
-      return;
-    }
-    setCurrentStep((prev) => prev - 1);
+    if (!canGoBack) return;
+    goToStep(currentStep - 1);
     onBack?.();
   };
 
@@ -198,13 +229,21 @@ export const Progress = ({
                 return null;
               }
 
+              const isDisabled = stepProps.disabled === true;
               const isCurrent = index === currentStep;
               const isCompleted = index < currentStep;
-              const stepState: StepState = isCurrent
-                ? "selected"
-                : isCompleted
-                  ? "completed"
-                  : "pending";
+
+              const stepState: StepState = isDisabled
+                ? "disabled"
+                : stepProps.state
+                  ? stepProps.state
+                  : isCurrent
+                    ? "selected"
+                    : isCompleted
+                      ? "completed"
+                      : "pending";
+
+              const clickable = !isDisabled && onStepChange !== undefined;
 
               return (
                 <div
@@ -215,6 +254,8 @@ export const Progress = ({
                     name={stepProps.name}
                     index={index}
                     state={stepState}
+                    clickable={clickable}
+                    onClick={() => goToStep(index)}
                   />
                   {index < totalSteps - 1 && (
                     <ConnectorLine isCompleted={isCompleted} />
diff --git a/packages/ui/src/components/SearchableSelect.tsx b/packages/ui/src/components/SearchableSelect.tsx
index f0e6b27..e3551e7 100644
--- a/packages/ui/src/components/SearchableSelect.tsx
+++ b/packages/ui/src/components/SearchableSelect.tsx
@@ -133,7 +133,7 @@ export const SearchableSelect = ({
   };
 
   return (
-    <div className="space-y-2 relative">
+    <div className="space-y-1 relative">
       {label && (
         <label htmlFor={selectId} className="text-sm font-medium text-ctp-text">
           {label}
diff --git a/packages/ui/src/components/StatusDot.tsx b/packages/ui/src/components/StatusDot.tsx
new file mode 100644
index 0000000..3cdaf39
--- /dev/null
+++ b/packages/ui/src/components/StatusDot.tsx
@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const statusDotVariants = cva("inline-block shrink-0 rounded-full", {
+  variants: {
+    color: {
+      green: "bg-ctp-green",
+      red: "bg-ctp-red",
+      yellow: "bg-ctp-yellow",
+      gray: "bg-ctp-overlay0",
+    },
+    size: {
+      sm: "h-2 w-2",
+      md: "h-2.5 w-2.5",
+      lg: "h-3 w-3",
+    },
+  },
+  defaultVariants: {
+    color: "green",
+    size: "md",
+  },
+});
+
+type StatusDotVariants = VariantProps<typeof statusDotVariants>;
+
+interface StatusDotProps extends StatusDotVariants {
+  className?: string;
+}
+
+export const StatusDot = ({ color, size, className }: StatusDotProps) => (
+  <span className={cn(statusDotVariants({ color, size }), className)} />
+);
diff --git a/packages/ui/src/components/TextInput.tsx b/packages/ui/src/components/TextInput.tsx
index d182dc0..369d11c 100644
--- a/packages/ui/src/components/TextInput.tsx
+++ b/packages/ui/src/components/TextInput.tsx
@@ -64,7 +64,7 @@ export const TextInput = ({
   const inputState = error ? "error" : state;
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-1">
       {label && (
         <label htmlFor={inputId} className="text-sm font-medium text-ctp-text">
           {label}
diff --git a/packages/ui/src/components/Textarea.tsx b/packages/ui/src/components/Textarea.tsx
index 3da48cd..c63b233 100644
--- a/packages/ui/src/components/Textarea.tsx
+++ b/packages/ui/src/components/Textarea.tsx
@@ -50,7 +50,7 @@ export const Textarea = ({
   const textareaState = error ? "error" : state;
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-1">
       {label && (
         <label
           htmlFor={textareaId}
diff --git a/packages/ui/src/components/Toast.tsx b/packages/ui/src/components/Toast.tsx
index 11140b0..a273dc4 100644
--- a/packages/ui/src/components/Toast.tsx
+++ b/packages/ui/src/components/Toast.tsx
@@ -29,10 +29,10 @@ const toastVariants = cva(
   {
     variants: {
       level: {
-        success: "bg-ctp-green/10 border-ctp-green/30 text-ctp-green",
-        warning: "bg-ctp-yellow/10 border-ctp-yellow/30 text-ctp-yellow",
-        info: "bg-ctp-blue/10 border-ctp-blue/30 text-ctp-blue",
-        error: "bg-ctp-red/10 border-ctp-red/30 text-ctp-red",
+        success: "bg-ctp-green/80 border-ctp-green/50 text-ctp-base",
+        warning: "bg-ctp-yellow/80 border-ctp-yellow/50 text-ctp-base",
+        info: "bg-ctp-blue/80 border-ctp-blue/50 text-ctp-base",
+        error: "bg-ctp-red/80 border-ctp-red/50 text-ctp-base",
       },
       visibility: {
         visible: "translate-x-0 opacity-100",
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 2c36ce0..72f3527 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -40,6 +40,7 @@ export { RangeSlider } from "./components/RangeSlider";
 export { SearchableSelect } from "./components/SearchableSelect";
 export { Select } from "./components/Select";
 export { StatusBadge } from "./components/StatusBadge";
+export { StatusDot } from "./components/StatusDot";
 export {
   Table,
   TableBody,
diff --git a/packages/ui/src/lib/cn.ts b/packages/ui/src/lib/cn.ts
index 7298e23..413899c 100644
--- a/packages/ui/src/lib/cn.ts
+++ b/packages/ui/src/lib/cn.ts
@@ -5,6 +5,4 @@ import { twMerge } from "tailwind-merge";
  * Utility function to merge Tailwind CSS classes
  * Combines clsx for conditional classes and tailwind-merge to resolve conflicts
  */
-export const cn = (...inputs: ClassValue[]) => {
-  return twMerge(clsx(inputs));
-};
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));