diff --git a/apps/web/src/pages/workflows/[id].tsx b/apps/web/src/pages/workflows/[id].tsx
index 74159f3..19f563b 100644
--- a/apps/web/src/pages/workflows/[id].tsx
+++ b/apps/web/src/pages/workflows/[id].tsx
@@ -32,6 +32,7 @@ import type {Template, Workflow, WorkflowExecution, WorkflowStep, WorkflowTransi
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {network} from '../../lib/network';
 import {
+  AlertTriangle,
   ArrowLeft,
   ChevronDown,
   Clock,
@@ -446,41 +447,29 @@ export default function WorkflowEditorPage() {
 
         {/* Active Executions Warning Banner */}
         {activeExecutionsCount > 0 && (
-          <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg">
-            <div className="flex items-start">
-              <div className="flex-shrink-0">
-                <svg className="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
-                  <path
-                    fillRule="evenodd"
-                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-              <div className="ml-3 flex-1">
-                <h3 className="text-sm font-medium text-blue-800">
-                  {workflow.enabled ? 'Workflow is active with running executions' : 'Workflow has active executions'}
-                </h3>
-                <div className="mt-2 text-sm text-blue-700">
-                  <p>
-                    This workflow has <strong>{activeExecutionsCount}</strong> active execution
-                    {activeExecutionsCount !== 1 ? 's' : ''}.{' '}
-                    {!workflow.enabled && 'Even though the workflow is disabled, existing executions will continue. '}
-                    To protect running workflows, you cannot:
-                  </p>
-                  <ul className="list-disc list-inside space-y-1 mt-2">
-                    <li>Delete steps or transitions</li>
-                    <li>Modify step configurations (email templates, conditions, etc.)</li>
-                    <li>Change the workflow trigger</li>
-                  </ul>
-                  <p className="mt-2">
-                    You can still rename steps and adjust their position. To make configuration changes, wait for
-                    executions to complete or cancel them from the Executions tab.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
+          <Alert>
+            <Info className="h-4 w-4" />
+            <AlertTitle>
+              {workflow.enabled ? 'Workflow is active with running executions' : 'Workflow has active executions'}
+            </AlertTitle>
+            <AlertDescription>
+              <p>
+                This workflow has <strong>{activeExecutionsCount}</strong> active execution
+                {activeExecutionsCount !== 1 ? 's' : ''}.{' '}
+                {!workflow.enabled && 'Even though the workflow is disabled, existing executions will continue. '}
+                To protect running workflows, you cannot:
+              </p>
+              <ul className="list-disc list-inside space-y-1 mt-2">
+                <li>Delete steps or transitions</li>
+                <li>Modify step configurations (email templates, conditions, etc.)</li>
+                <li>Change the workflow trigger</li>
+              </ul>
+              <p className="mt-2">
+                You can still rename steps and adjust their position. To make configuration changes, wait for executions
+                to complete or cancel them from the Executions tab.
+              </p>
+            </AlertDescription>
+          </Alert>
         )}
 
         {/* Validation Warning Banner */}
@@ -489,30 +478,18 @@ export default function WorkflowEditorPage() {
             const validation = validateWorkflow(workflow);
             if (!validation.valid) {
               return (
-                <div className="bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r-lg">
-                  <div className="flex items-start">
-                    <div className="flex-shrink-0">
-                      <svg className="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor">
-                        <path
-                          fillRule="evenodd"
-                          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div className="ml-3 flex-1">
-                      <h3 className="text-sm font-medium text-amber-800">Workflow has validation errors</h3>
-                      <div className="mt-2 text-sm text-amber-700">
-                        <p className="mb-2">Fix the following issues before enabling this workflow:</p>
-                        <ul className="list-disc list-inside space-y-1">
-                          {validation.errors.map((error, i) => (
-                            <li key={i}>{error}</li>
-                          ))}
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                <Alert variant="warning">
+                  <AlertTriangle className="h-4 w-4" />
+                  <AlertTitle>Workflow has validation errors</AlertTitle>
+                  <AlertDescription>
+                    <p className="mb-2">Fix the following issues before enabling this workflow:</p>
+                    <ul className="list-disc list-inside space-y-1">
+                      {validation.errors.map((error, i) => (
+                        <li key={i}>{error}</li>
+                      ))}
+                    </ul>
+                  </AlertDescription>
+                </Alert>
               );
             }
             return null;