diff --git a/frontend/src/pages/TargetsPage.jsx b/frontend/src/pages/TargetsPage.jsx
index dd55c3d..66b4415 100644
--- a/frontend/src/pages/TargetsPage.jsx
+++ b/frontend/src/pages/TargetsPage.jsx
@@ -200,7 +200,7 @@ export function TargetsPage() {
                 If you see "rejected SSL upgrade", switch to <code>disable</code>.
               </small>
             </div>
-            <div className="field">
+            <div className="field field-full toggle-field">
               <label>Query Insights Source</label>
               <label className="toggle-check">
                 <input
@@ -208,11 +208,14 @@ export function TargetsPage() {
                   checked={!!form.use_pg_stat_statements}
                   onChange={(e) => setForm({ ...form, use_pg_stat_statements: e.target.checked })}
                 />
-                <span>Use pg_stat_statements for this target</span>
+                <span className="toggle-ui" aria-hidden="true" />
+                <span className="toggle-copy">
+                  <strong>Use pg_stat_statements for this target</strong>
+                  <small>Disable this if the extension is unavailable on the target.</small>
+                </span>
               </label>
-              <small>Disable this if the extension is unavailable on the target.</small>
             </div>
-            <div className="field submit-field">
+            <div className="field submit-field field-full">
               <div className="form-actions">
                 <button type="button" className="secondary-btn" onClick={testConnection} disabled={testState.loading}>
                   {testState.loading ? "Testing..." : "Test connection"}
@@ -263,7 +266,7 @@ export function TargetsPage() {
                 <option value="require">require</option>
               </select>
             </div>
-            <div className="field">
+            <div className="field field-full toggle-field">
               <label>Query Insights Source</label>
               <label className="toggle-check">
                 <input
@@ -271,10 +274,14 @@ export function TargetsPage() {
                   checked={!!editForm.use_pg_stat_statements}
                   onChange={(e) => setEditForm({ ...editForm, use_pg_stat_statements: e.target.checked })}
                 />
-                <span>Use pg_stat_statements for this target</span>
+                <span className="toggle-ui" aria-hidden="true" />
+                <span className="toggle-copy">
+                  <strong>Use pg_stat_statements for this target</strong>
+                  <small>Disable this if the extension is unavailable on the target.</small>
+                </span>
               </label>
             </div>
-            <div className="field submit-field">
+            <div className="field submit-field field-full">
               <div className="form-actions">
                 <button type="button" className="secondary-btn" onClick={cancelEdit}>Cancel</button>
                 <button className="primary-btn" disabled={saveState.loading}>{saveState.loading ? "Saving..." : "Save changes"}</button>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 4f483f5..019d212 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -250,18 +250,75 @@ button {
 }
 
 .toggle-check {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   font-size: 14px;
   color: #d7e6fb;
   cursor: pointer;
+  border: 1px solid #2e5d95;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: linear-gradient(180deg, #102a50, #0d2344);
 }
 
 .toggle-check input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+.toggle-ui {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 999px;
+  border: 1px solid #3f6ea9;
+  background: #0c1f3f;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.toggle-ui::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
   width: 16px;
   height: 16px;
-  accent-color: #27bbf3;
+  border-radius: 999px;
+  background: #b8d2ef;
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.toggle-check input[type="checkbox"]:checked + .toggle-ui {
+  background: linear-gradient(180deg, #1a67a8, #145386);
+  border-color: #53c7f4;
+}
+
+.toggle-check input[type="checkbox"]:checked + .toggle-ui::after {
+  transform: translateX(18px);
+  background: #ecf8ff;
+}
+
+.toggle-copy {
+  display: grid;
+  gap: 2px;
+}
+
+.toggle-copy strong {
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.toggle-copy small {
+  color: #93acd0;
+  font-size: 12px;
+}
+
+.toggle-field {
+  margin-top: 2px;
 }
 
 .tips p {
@@ -670,12 +727,18 @@ button {
 
 .submit-field {
   align-self: end;
+  margin-top: 2px;
 }
 
 .form-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
+  width: 100%;
+}
+
+.field-full {
+  grid-column: 1 / -1;
 }
 
 .secondary-btn {