diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css
index cd5227562..62e0ee49e 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css
@@ -308,79 +308,339 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 32px;
-	margin: 32px auto 0;
-	width: clamp(300px, 80vw, 1020px);
+	gap: 16px;
+	margin: 40px auto 0;
+	max-width: 900px;
 }
 
-.actions-hint {
+.empty-state__header {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-top: 40px !important;
+	text-align: center;
+	margin-bottom: 8px;
 }
 
-.actions-hint__title {
-	display: inline-block;
-	font-size: 1.25em;
-	margin-bottom: 4px;
+.empty-state__icon-box {
+	width: 40px;
+	height: 40px;
+	border-radius: 10px;
+	background: color-mix(in srgb, var(--color-accentedPalette-500), transparent 88%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 16px;
+}
+
+.empty-state__icon {
+	color: var(--color-accentedPalette-500);
+	font-size: 22px;
+	width: 22px;
+	height: 22px;
 }
 
-.actions-hint__text {
+.empty-state__title {
+	font-size: 20px;
+	font-weight: 600;
+	margin: 0 0 2px;
+	line-height: 1.3;
+}
+
+.empty-state__subtitle {
+	font-size: 14px;
+	font-weight: 300;
 	color: rgba(0, 0, 0, 0.64);
+	margin: 0 !important;
+	line-height: 1.5;
 }
 
 @media (prefers-color-scheme: dark) {
-	.actions-hint__text {
+	.empty-state__subtitle {
 		color: rgba(255, 255, 255, 0.64);
 	}
 }
 
-.rules-examples {
-	display: grid;
-	grid-template-columns: repeat(3, minmax(300px, 1fr));
-	grid-gap: 20px;
+.empty-state__cta {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	margin-top: 16px;
+}
+
+.empty-state__docs-link {
+	display: inline-flex;
+	align-items: center;
+	gap: 3px;
+	font-size: 13px;
+	color: var(--color-accentedPalette-500);
+	text-decoration: none;
+}
+
+.empty-state__docs-link:hover {
+	text-decoration: underline;
+}
+
+.empty-state__docs-icon {
+	font-size: 15px;
+	width: 15px;
+	height: 15px;
+}
+
+/* ── Example flow ── */
+
+.example-flow {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 	width: 100%;
+	max-width: 520px;
 }
 
-.rule-example {
+.example-flow__card {
 	display: flex;
 	flex-direction: column;
-	align-items: flex-start;
-	gap: 16px;
-	border: 1px solid rgba(0, 0, 0, 0.12);
+	gap: 0;
+	padding: 24px;
+	border: 1px solid var(--color-accentedPalette-100);
+	border-radius: 20px;
+	width: 100%;
+	box-sizing: border-box;
+	opacity: 0.85;
+	pointer-events: none;
+	background: var(--color-accentedPalette-50);
+}
+
+@media (prefers-color-scheme: dark) {
+	.example-flow__card {
+		border-color: var(--color-accentedPalette-800);
+		background: var(--color-accentedPalette-900);
+	}
+}
+
+/* ── Badges ── */
+
+.example-flow__section-label {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 12px;
+}
+
+.example-flow__section-text {
+	font-size: 13px;
+	font-weight: 500;
+}
+
+.example-flow__badge {
+	display: inline-flex;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.05em;
+	padding: 3px 10px;
+	border-radius: 6px;
+}
+
+.example-flow__badge--when {
+	background: #ede9fe;
+	color: #6d28d9;
+}
+
+.example-flow__badge--action {
+	background: #dbeafe;
+	color: #3b82f6;
+}
+
+@media (prefers-color-scheme: dark) {
+	.example-flow__badge--when {
+		background: #3730a3;
+		color: #a5b4fc;
+	}
+
+	.example-flow__badge--action {
+		background: #1e3a5f;
+		color: #60a5fa;
+	}
+}
+
+/* ── Trigger grid ── */
+
+.example-flow__triggers {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 10px;
+}
+
+.example-trigger {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 12px;
+	border-radius: 12px;
+	background: #ffffff;
+	border: 1px solid var(--color-accentedPalette-100);
+}
+
+@media (prefers-color-scheme: dark) {
+	.example-trigger {
+		background: #13151a;
+		border-color: var(--color-accentedPalette-800);
+	}
+}
+
+.example-trigger__icon-box {
+	width: 34px;
+	height: 34px;
+	border-radius: 9px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.example-trigger__icon-box mat-icon {
+	font-size: 18px;
+	width: 18px;
+	height: 18px;
+}
+
+.example-trigger__icon-box--add {
+	background: color-mix(in srgb, var(--success-color), transparent 80%);
+	color: var(--success-color);
+}
+
+.example-trigger__icon-box--update {
+	background: color-mix(in srgb, var(--info-color), transparent 80%);
+	color: var(--info-color);
+}
+
+.example-trigger__icon-box--delete {
+	background: color-mix(in srgb, var(--error-color), transparent 80%);
+	color: var(--error-color);
+}
+
+.example-trigger__icon-box--custom {
+	background: color-mix(in srgb, #c084fc, transparent 80%);
+	color: #6d28d9;
+}
+
+@media (prefers-color-scheme: dark) {
+	.example-trigger__icon-box--add { background: color-mix(in srgb, var(--success-color), transparent 88%); color: var(--success-color); }
+	.example-trigger__icon-box--update { background: color-mix(in srgb, var(--info-color), transparent 88%); color: var(--info-color); }
+	.example-trigger__icon-box--delete { background: color-mix(in srgb, var(--error-color), transparent 88%); color: var(--error-color); }
+	.example-trigger__icon-box--custom { background: rgba(192, 132, 252, 0.12); color: #c084fc; }
+}
+
+.example-trigger__text {
+	display: flex;
+	flex-direction: column;
+	gap: 1px;
+}
+
+.example-trigger__title {
+	font-size: 13px;
+	font-weight: 600;
+}
+
+.example-trigger__desc {
+	font-size: 11px;
+	color: rgba(0,0,0,0.64);
+}
+
+@media (prefers-color-scheme: dark) {
+	.example-trigger__desc { color: rgba(255,255,255,0.64); }
+}
+
+/* ── Connector ── */
+
+.example-flow__connector {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	height: 48px;
+	margin: 4px 0;
+}
+
+.example-flow__connector-line {
+	flex: 1;
+	border-left: 1px solid var(--color-accentedPalette-100);
+}
+
+@media (prefers-color-scheme: dark) {
+	.example-flow__connector-line {
+		border-color: var(--color-accentedPalette-800);
+	}
+}
+
+.example-flow__connector-pill {
+	font-size: 10px;
+	font-weight: 700;
+	letter-spacing: 0.05em;
+	padding: 2px 8px;
 	border-radius: 4px;
-	padding: 16px;
 }
 
 @media (prefers-color-scheme: dark) {
-	.rule-example {
-		border-color: rgba(255, 255, 255, 0.12);
-		background-color: var(--surface-dark-color);
+	.example-flow__connector-pill {
+		background: #1e2130;
 	}
 }
 
-.rule-example__row {
+/* ── Actions ── */
+
+.example-flow__actions {
+	display: flex;
+	gap: 10px;
+}
+
+.example-action {
+	flex: 1;
 	display: flex;
+	flex-direction: column;
 	align-items: center;
-	gap: 24px;
+	gap: 6px;
+	padding: 14px 8px;
+	border-radius: 12px;
+	background: #ffffff;
+	border: 1px solid var(--color-accentedPalette-100);
+}
+
+@media (prefers-color-scheme: dark) {
+	.example-action {
+		background: #13151a;
+		border-color: var(--color-accentedPalette-800);
+	}
 }
 
-.rule-example__value {
+.example-action__icon-box {
+	width: 40px;
+	height: 40px;
+	border-radius: 10px;
 	display: flex;
 	align-items: center;
-	background-color: rgba(0, 0, 0, 0.04);
-	color: rgba(0, 0, 0, 0.64);
-	padding: 8px 16px;
+	justify-content: center;
+	background: color-mix(in srgb, var(--color-accentedPalette-500), transparent 88%);
+	color: var(--color-accentedPalette-500);
 }
 
 @media (prefers-color-scheme: dark) {
-	.rule-example__value {
-		background-color: rgba(255, 255, 255, 0.08);
-		color: rgba(255, 255, 255, 0.64);
+	.example-action__icon-box {
+		background: #1e2130;
+		color: var(--color-accentedPalette-500);
 	}
 }
 
+.example-action__icon-box mat-icon {
+	font-size: 20px;
+	width: 20px;
+	height: 20px;
+}
+
+.example-action__label {
+	font-size: 12px;
+	font-weight: 600;
+}
+
+
 /* ── Creation flow ── */
 
 .creation-flow {
@@ -677,7 +937,7 @@
 
 .trigger-pill--custom.trigger-pill--active {
 	border-color: #c084fc;
-	background: #150820;
+	background: color-mix(in srgb, #c084fc, transparent 90%);
 	box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.25), 0 0 12px rgba(192, 132, 252, 0.08);
 }
 
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html
index 0334530b5..fc10422cf 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html
@@ -4,7 +4,7 @@
             <h1 class="mat-h1">Automations</h1>
         </div>
         <div class="no-actions" *ngIf="rulesData && rules && rules.length === 0 && !isCreationMode">
-            <span>No added automations</span>
+            <span>No automations yet</span>
         </div>
         <mat-action-list *ngIf="rulesData && rules">
             <button mat-list-item *ngFor="let rule of rules; let i = index"
@@ -212,60 +212,103 @@ <h1 class="mat-h1">Automations</h1>
         </div>
 
         <div *ngIf="(!selectedRule || !rules.length) && !isCreationMode" class="empty-state">
-            <p class="actions-hint">
-                <strong class="actions-hint__title">Configure custom triggers and actions for database records</strong>
-                <span class="actions-hint__text">React to standard operations like create, update, delete, or define your own.</span>
-            </p>
-            <button mat-flat-button color="accent"
-                angulartics2On="click"
-                angularticsAction="Actions: add first action is clicked"
-                (click)="addNewRule(); posthog.capture('Actions: add first action is clicked')">
-                Create automation
-            </button>
-            <div class="rules-examples">
-                <div class="rule-example">
-                    <div class="rule-example__row">
-                        <span class="text_highlighted">Trigger</span>
-                        <span class="rule-example__value">Add row</span>
-                        <span class="rule-example__value" style="margin-left: -16px;">Update row</span>
-                    </div>
-                    <div class="rule-example__row">
-                        <span class="text_highlighted">Action</span>
-                        <span class="rule-example__value">send&nbsp;<strong>email</strong>&nbsp;notification</span>
-                    </div>
-                    <div class="rule-example__row">
-                        <span class="text_highlighted">to</span>
-                        <span class="rule-example__value">admin&#64;example.com, user&#64;example.com</span>
-                    </div>
+            <div class="empty-state__header">
+                <div class="empty-state__icon-box">
+                    <mat-icon class="empty-state__icon">bolt</mat-icon>
                 </div>
+                <h2 class="empty-state__title">Automate your database workflows</h2>
+                <p class="empty-state__subtitle">Set up triggers and actions to react to data changes automatically.</p>
+                <div class="empty-state__cta">
+                    <button mat-flat-button color="accent"
+                        angulartics2On="click"
+                        angularticsAction="Actions: add first action is clicked"
+                        (click)="addNewRule(); posthog.capture('Actions: add first action is clicked')">
+                        Create first automation
+                    </button>
+                    <a class="empty-state__docs-link"
+                        href="https://docs.rocketadmin.com/Reference/Automations/automations_definition"
+                        target="_blank" rel="noopener noreferrer">
+                        Docs <mat-icon class="empty-state__docs-icon">open_in_new</mat-icon>
+                    </a>
+                </div>
+            </div>
 
-                <div class="rule-example">
-                    <div class="rule-example__row">
-                        <span class="text_highlighted">Trigger</span>
-                        <span class="rule-example__value">Delete row</span>
+            <div class="example-flow">
+                <div class="example-flow__card">
+                    <!-- WHEN -->
+                    <div class="example-flow__section-label">
+                        <span class="example-flow__badge example-flow__badge--when">WHEN</span>
+                        <span class="example-flow__section-text">Trigger</span>
                     </div>
-                    <div class="rule-example__row">
-                        <span class="text_highlighted">Action</span>
-                        <span class="rule-example__value">send&nbsp;<strong>Slack</strong>&nbsp;notification</span>
-                    </div>
-                    <div class="rule-example__row">
-                        <span class="text_highlighted">to</span>
-                        <span class="rule-example__value">https://hooks.slack.com/services/...</span>
+                    <div class="example-flow__triggers">
+                        <div class="example-trigger example-trigger--add">
+                            <div class="example-trigger__icon-box example-trigger__icon-box--add">
+                                <mat-icon>add_circle_outline</mat-icon>
+                            </div>
+                            <div class="example-trigger__text">
+                                <span class="example-trigger__title">Add row</span>
+                                <span class="example-trigger__desc">New record is created</span>
+                            </div>
+                        </div>
+                        <div class="example-trigger example-trigger--update">
+                            <div class="example-trigger__icon-box example-trigger__icon-box--update">
+                                <mat-icon>edit</mat-icon>
+                            </div>
+                            <div class="example-trigger__text">
+                                <span class="example-trigger__title">Update row</span>
+                                <span class="example-trigger__desc">Record is modified</span>
+                            </div>
+                        </div>
+                        <div class="example-trigger example-trigger--delete">
+                            <div class="example-trigger__icon-box example-trigger__icon-box--delete">
+                                <mat-icon>delete_outline</mat-icon>
+                            </div>
+                            <div class="example-trigger__text">
+                                <span class="example-trigger__title">Delete row</span>
+                                <span class="example-trigger__desc">Record is removed</span>
+                            </div>
+                        </div>
+                        <div class="example-trigger example-trigger--custom">
+                            <div class="example-trigger__icon-box example-trigger__icon-box--custom">
+                                <mat-icon>download</mat-icon>
+                            </div>
+                            <div class="example-trigger__text">
+                                <span class="example-trigger__title">Custom</span>
+                                <span class="example-trigger__desc">Custom button trigger</span>
+                            </div>
+                        </div>
                     </div>
-                </div>
 
-                <div class="rule-example">
-                    <div class="rule-example__row">
-                        <span class="text_highlighted">Trigger</span>
-                        <span class="rule-example__value"><mat-icon>block</mat-icon>&nbsp;Block user</span>
+                    <!-- Connector -->
+                    <div class="example-flow__connector">
+                        <div class="example-flow__connector-line"></div>
+                        <span class="example-flow__connector-pill">THEN</span>
+                        <div class="example-flow__connector-line"></div>
                     </div>
-                    <div class="rule-example__row">
-                        <span class="text_highlighted">Action</span>
-                        <span class="rule-example__value">send&nbsp;<strong>webhook</strong></span>
+
+                    <!-- ACTION -->
+                    <div class="example-flow__section-label">
+                        <span class="example-flow__badge example-flow__badge--action">ACTION</span>
                     </div>
-                    <div class="rule-example__row">
-                        <span class="text_highlighted">to</span>
-                        <span class="rule-example__value">https://example.com/webhook</span>
+                    <div class="example-flow__actions">
+                        <div class="example-action">
+                            <div class="example-action__icon-box">
+                                <mat-icon>webhook</mat-icon>
+                            </div>
+                            <span class="example-action__label">Webhook</span>
+                        </div>
+                        <div class="example-action">
+                            <div class="example-action__icon-box">
+                                <mat-icon>email</mat-icon>
+                            </div>
+                            <span class="example-action__label">Email</span>
+                        </div>
+                        <div class="example-action">
+                            <div class="example-action__icon-box">
+                                <mat-icon>tag</mat-icon>
+                            </div>
+                            <span class="example-action__label">Slack</span>
+                        </div>
                     </div>
                 </div>
             </div>