diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css b/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
index b75e13c3..b6e70075 100644
--- a/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
@@ -206,6 +206,19 @@
   cursor: default;
 }
 
+.liveBanner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  background: var(--warning-bg);
+  border: 1px solid var(--warning-border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
 /* Env vars list */
 .envVarsList {
   display: flex;
diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/LiveBanner.tsx b/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/LiveBanner.tsx
new file mode 100644
index 00000000..f8972a30
--- /dev/null
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/LiveBanner.tsx
@@ -0,0 +1,14 @@
+import { Info } from 'lucide-react';
+import styles from '../AppDeploymentPage.module.css';
+
+export function LiveBanner() {
+  return (
+    <div className={styles.liveBanner}>
+      <Info size={14} />
+      <span>
+        <strong>Live controls.</strong> Changes apply immediately to running agents and do
+        not participate in the Save/Redeploy cycle.
+      </span>
+    </div>
+  );
+}