diff --git a/frontend/src/pages/AdminUsersPage.jsx b/frontend/src/pages/AdminUsersPage.jsx
index 80359af..ee12dfd 100644
--- a/frontend/src/pages/AdminUsersPage.jsx
+++ b/frontend/src/pages/AdminUsersPage.jsx
@@ -2,6 +2,21 @@ import React, { useEffect, useState } from "react";
 import { apiFetch } from "../api";
 import { useAuth } from "../state";
 
+const TEMPLATE_VARIABLES = [
+  "target_name",
+  "target_id",
+  "alert_name",
+  "severity",
+  "category",
+  "description",
+  "message",
+  "value",
+  "warning_threshold",
+  "alert_threshold",
+  "checked_at",
+  "alert_key",
+];
+
 export function AdminUsersPage() {
   const { tokens, refresh, me } = useAuth();
   const [users, setUsers] = useState([]);
@@ -223,148 +238,164 @@ export function AdminUsersPage() {
         </div>
         {smtpInfo && <div className="test-connection-result ok">{smtpInfo}</div>}
         <form className="grid two admin-smtp-form" onSubmit={saveSmtp}>
-          <label className="toggle-check field-full">
-            <input
-              type="checkbox"
-              checked={emailSettings.enabled}
-              onChange={(e) => setEmailSettings({ ...emailSettings, enabled: e.target.checked })}
-            />
-            <span className="toggle-ui" />
-            <span>
-              <strong>Enable alert emails</strong>
-            </span>
-          </label>
+          <div className="admin-subcard field-full">
+            <h4>SMTP Settings</h4>
+            <div className="grid two">
+              <label className="toggle-check field-full">
+                <input
+                  type="checkbox"
+                  checked={emailSettings.enabled}
+                  onChange={(e) => setEmailSettings({ ...emailSettings, enabled: e.target.checked })}
+                />
+                <span className="toggle-ui" />
+                <span>
+                  <strong>Enable alert emails</strong>
+                </span>
+              </label>
 
-          <div className="admin-field">
-            <label>SMTP host</label>
-            <input
-              value={emailSettings.smtp_host}
-              placeholder="smtp.example.com"
-              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_host: e.target.value })}
-            />
-          </div>
-          <div className="admin-field">
-            <label>SMTP port</label>
-            <input
-              type="number"
-              value={emailSettings.smtp_port}
-              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_port: Number(e.target.value || 587) })}
-            />
-          </div>
+              <div className="admin-field">
+                <label>SMTP host</label>
+                <input
+                  value={emailSettings.smtp_host}
+                  placeholder="smtp.example.com"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, smtp_host: e.target.value })}
+                />
+              </div>
+              <div className="admin-field">
+                <label>SMTP port</label>
+                <input
+                  type="number"
+                  value={emailSettings.smtp_port}
+                  onChange={(e) => setEmailSettings({ ...emailSettings, smtp_port: Number(e.target.value || 587) })}
+                />
+              </div>
 
-          <div className="admin-field">
-            <label>SMTP username</label>
-            <input
-              value={emailSettings.smtp_username}
-              placeholder="alerts@example.com"
-              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_username: e.target.value })}
-            />
-          </div>
-          <div className="admin-field">
-            <label>SMTP password</label>
-            <input
-              type="password"
-              value={emailSettings.smtp_password}
-              placeholder={smtpState.has_password ? "Stored (enter to replace)" : "Set password"}
-              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_password: e.target.value, clear_smtp_password: false })}
-            />
-          </div>
+              <div className="admin-field">
+                <label>SMTP username</label>
+                <input
+                  value={emailSettings.smtp_username}
+                  placeholder="alerts@example.com"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, smtp_username: e.target.value })}
+                />
+              </div>
+              <div className="admin-field">
+                <label>SMTP password</label>
+                <input
+                  type="password"
+                  value={emailSettings.smtp_password}
+                  placeholder={smtpState.has_password ? "Stored (enter to replace)" : "Set password"}
+                  onChange={(e) => setEmailSettings({ ...emailSettings, smtp_password: e.target.value, clear_smtp_password: false })}
+                />
+              </div>
 
-          <div className="admin-field">
-            <label>From name</label>
-            <input
-              value={emailSettings.from_name}
-              placeholder="NexaPG Alerts"
-              onChange={(e) => setEmailSettings({ ...emailSettings, from_name: e.target.value })}
-            />
-          </div>
-          <div className="admin-field">
-            <label>From email</label>
-            <input
-              value={emailSettings.from_email}
-              placeholder="noreply@example.com"
-              onChange={(e) => setEmailSettings({ ...emailSettings, from_email: e.target.value })}
-            />
-          </div>
-          <div className="admin-field">
-            <label>Transport mode</label>
-            <div className="smtp-mode-picker" role="radiogroup" aria-label="SMTP transport mode">
-              <button
-                type="button"
-                className={`smtp-mode-btn ${protocolMode === "starttls" ? "active" : ""}`}
-                aria-pressed={protocolMode === "starttls"}
-                onClick={() => setProtocolMode("starttls")}
-              >
-                STARTTLS
-              </button>
-              <button
-                type="button"
-                className={`smtp-mode-btn ${protocolMode === "ssl" ? "active" : ""}`}
-                aria-pressed={protocolMode === "ssl"}
-                onClick={() => setProtocolMode("ssl")}
-              >
-                SSL/TLS (SMTPS)
-              </button>
-              <button
-                type="button"
-                className={`smtp-mode-btn ${protocolMode === "plain" ? "active" : ""}`}
-                aria-pressed={protocolMode === "plain"}
-                onClick={() => setProtocolMode("plain")}
-              >
-                No TLS
-              </button>
+              <div className="admin-field">
+                <label>From name</label>
+                <input
+                  value={emailSettings.from_name}
+                  placeholder="NexaPG Alerts"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, from_name: e.target.value })}
+                />
+              </div>
+              <div className="admin-field">
+                <label>From email</label>
+                <input
+                  value={emailSettings.from_email}
+                  placeholder="noreply@example.com"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, from_email: e.target.value })}
+                />
+              </div>
+
+              <div className="admin-field field-full">
+                <label>Transport mode</label>
+                <div className="smtp-mode-picker" role="radiogroup" aria-label="SMTP transport mode">
+                  <button
+                    type="button"
+                    className={`smtp-mode-btn ${protocolMode === "starttls" ? "active" : ""}`}
+                    aria-pressed={protocolMode === "starttls"}
+                    onClick={() => setProtocolMode("starttls")}
+                  >
+                    STARTTLS
+                  </button>
+                  <button
+                    type="button"
+                    className={`smtp-mode-btn ${protocolMode === "ssl" ? "active" : ""}`}
+                    aria-pressed={protocolMode === "ssl"}
+                    onClick={() => setProtocolMode("ssl")}
+                  >
+                    SSL/TLS (SMTPS)
+                  </button>
+                  <button
+                    type="button"
+                    className={`smtp-mode-btn ${protocolMode === "plain" ? "active" : ""}`}
+                    aria-pressed={protocolMode === "plain"}
+                    onClick={() => setProtocolMode("plain")}
+                  >
+                    No TLS
+                  </button>
+                </div>
+                <small className="muted">Select exactly one mode to avoid STARTTLS/SSL conflicts.</small>
+              </div>
+
+              <label className="toggle-check field-full">
+                <input
+                  type="checkbox"
+                  checked={emailSettings.clear_smtp_password}
+                  onChange={(e) => setEmailSettings({ ...emailSettings, clear_smtp_password: e.target.checked, smtp_password: e.target.checked ? "" : emailSettings.smtp_password })}
+                />
+                <span className="toggle-ui" />
+                <span>Clear stored SMTP password</span>
+              </label>
             </div>
-            <small className="muted">Select exactly one mode to avoid STARTTLS/SSL conflicts.</small>
-          </div>
-          <div className="admin-field">
-            <label>Template variables</label>
-            <small className="muted">
-              Use placeholders like: {"{target_name}"}, {"{alert_name}"}, {"{severity}"}, {"{description}"}, {"{message}"}, {"{value}"}, {"{warning_threshold}"}, {"{alert_threshold}"}, {"{checked_at}"}, {"{alert_key}"}
-            </small>
           </div>
 
-          <div className="admin-field field-full">
-            <label>Warning subject template</label>
-            <input
-              value={emailSettings.warning_subject_template}
-              placeholder="[NexaPG][WARNING] {target_name} - {alert_name}"
-              onChange={(e) => setEmailSettings({ ...emailSettings, warning_subject_template: e.target.value })}
-            />
-          </div>
-          <div className="admin-field field-full">
-            <label>Alert subject template</label>
-            <input
-              value={emailSettings.alert_subject_template}
-              placeholder="[NexaPG][ALERT] {target_name} - {alert_name}"
-              onChange={(e) => setEmailSettings({ ...emailSettings, alert_subject_template: e.target.value })}
-            />
-          </div>
-          <div className="admin-field field-full">
-            <label>Warning body template</label>
-            <textarea
-              value={emailSettings.warning_body_template}
-              placeholder={"Severity: {severity}\nTarget: {target_name} (id={target_id})\nAlert: {alert_name}\nMessage: {message}\nChecked At: {checked_at}"}
-              onChange={(e) => setEmailSettings({ ...emailSettings, warning_body_template: e.target.value })}
-            />
-          </div>
-          <div className="admin-field field-full">
-            <label>Alert body template</label>
-            <textarea
-              value={emailSettings.alert_body_template}
-              placeholder={"Severity: {severity}\nTarget: {target_name} (id={target_id})\nAlert: {alert_name}\nMessage: {message}\nCurrent Value: {value}\nWarning Threshold: {warning_threshold}\nAlert Threshold: {alert_threshold}\nChecked At: {checked_at}\nAlert Key: {alert_key}"}
-              onChange={(e) => setEmailSettings({ ...emailSettings, alert_body_template: e.target.value })}
-            />
-          </div>
+          <div className="admin-subcard field-full">
+            <h4>Template Settings</h4>
+            <p className="muted template-help-text">
+              If a template field is left empty, NexaPG automatically uses the built-in default template.
+            </p>
+            <div className="template-vars-grid">
+              {TEMPLATE_VARIABLES.map((item) => (
+                <code key={item} className="template-var-pill">
+                  {"{" + item + "}"}
+                </code>
+              ))}
+            </div>
 
-          <label className="toggle-check field-full">
-            <input
-              type="checkbox"
-              checked={emailSettings.clear_smtp_password}
-              onChange={(e) => setEmailSettings({ ...emailSettings, clear_smtp_password: e.target.checked, smtp_password: e.target.checked ? "" : emailSettings.smtp_password })}
-            />
-            <span className="toggle-ui" />
-            <span>Clear stored SMTP password</span>
-          </label>
+            <div className="grid two">
+              <div className="admin-field field-full">
+                <label>Warning subject template</label>
+                <input
+                  value={emailSettings.warning_subject_template}
+                  placeholder="[NexaPG][WARNING] {target_name} - {alert_name}"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, warning_subject_template: e.target.value })}
+                />
+              </div>
+              <div className="admin-field field-full">
+                <label>Alert subject template</label>
+                <input
+                  value={emailSettings.alert_subject_template}
+                  placeholder="[NexaPG][ALERT] {target_name} - {alert_name}"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, alert_subject_template: e.target.value })}
+                />
+              </div>
+              <div className="admin-field field-full">
+                <label>Warning body template</label>
+                <textarea
+                  value={emailSettings.warning_body_template}
+                  placeholder={"Severity: {severity}\nTarget: {target_name} (id={target_id})\nAlert: {alert_name}\nMessage: {message}\nChecked At: {checked_at}"}
+                  onChange={(e) => setEmailSettings({ ...emailSettings, warning_body_template: e.target.value })}
+                />
+              </div>
+              <div className="admin-field field-full">
+                <label>Alert body template</label>
+                <textarea
+                  value={emailSettings.alert_body_template}
+                  placeholder={"Severity: {severity}\nTarget: {target_name} (id={target_id})\nAlert: {alert_name}\nMessage: {message}\nCurrent Value: {value}\nWarning Threshold: {warning_threshold}\nAlert Threshold: {alert_threshold}\nChecked At: {checked_at}\nAlert Key: {alert_key}"}
+                  onChange={(e) => setEmailSettings({ ...emailSettings, alert_body_template: e.target.value })}
+                />
+              </div>
+            </div>
+          </div>
 
           <div className="form-actions field-full">
             <input
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 1e9f27c..d9a9210 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1208,6 +1208,40 @@ td {
   gap: 10px;
 }
 
+.admin-subcard {
+  border: 1px solid #2c598f;
+  border-radius: 12px;
+  padding: 12px;
+  background: linear-gradient(180deg, #102748, #0e2342);
+}
+
+.admin-subcard h4 {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+}
+
+.template-help-text {
+  margin: 0 0 10px 0;
+}
+
+.template-vars-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.template-var-pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  border: 1px solid #4d81bc;
+  background: #15365f;
+  color: #d9ebff;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
 .admin-test-recipient {
   min-width: 260px;
   max-width: 320px;