diff --git a/src/frontend/routes/dev.tsx b/src/frontend/routes/dev.tsx
index f42e028..182c0d2 100644
--- a/src/frontend/routes/dev.tsx
+++ b/src/frontend/routes/dev.tsx
@@ -1482,7 +1482,7 @@ const CONFIG_DEFINITIONS: { key: string; label: string; description: string; pla
 function SettingsPanel() {
   const qc = useQueryClient()
   const [values, setValues] = useState<Record<string, string>>({})
-  const [saved, setSaved] = useState<Record<string, boolean>>({})
+  const [saved, setSaved] = useState(false)
 
   const { data, isLoading } = useQuery({
     queryKey: ['admin', 'config'],
@@ -1500,81 +1500,86 @@ function SettingsPanel() {
     setValues(initial)
   }, [configs])
 
-  const saveMutation = useMutation({
-    mutationFn: ({ key, value }: { key: string; value: string }) =>
-      fetch('/api/admin/config', {
-        method: 'PUT',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ key, value }),
-      }).then((r) => r.json()),
-    onSuccess: (_, { key }) => {
+  const saveAllMutation = useMutation({
+    mutationFn: async (vals: Record<string, string>) => {
+      await Promise.all(
+        CONFIG_DEFINITIONS.map((def) =>
+          fetch('/api/admin/config', {
+            method: 'PUT',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ key: def.key, value: vals[def.key] ?? '' }),
+          })
+        )
+      )
+    },
+    onSuccess: () => {
       qc.invalidateQueries({ queryKey: ['admin', 'config'] })
-      setSaved((prev) => ({ ...prev, [key]: true }))
-      setTimeout(() => setSaved((prev) => ({ ...prev, [key]: false })), 2000)
+      setSaved(true)
+      setTimeout(() => setSaved(false), 2000)
     },
   })
 
+  const hasUnconfigured = CONFIG_DEFINITIONS.some((def) => !configs.find((c) => c.key === def.key))
+
   return (
     <Stack>
       <Title order={3}>Settings</Title>
       <Text size="sm" c="dimmed">Konfigurasi runtime — perubahan langsung berlaku tanpa rebuild atau redeploy.</Text>
 
       {isLoading ? <Center><Loader /></Center> : (
-        <Stack gap="md">
-          {CONFIG_DEFINITIONS.map((def) => {
-            const existing = configs.find((c) => c.key === def.key)
-            return (
-              <Paper key={def.key} withBorder p="lg" radius="md">
-                <Stack gap="xs">
-                  <Group justify="space-between" align="flex-start">
+        <Paper withBorder p="lg" radius="md">
+          <Stack gap="md">
+            {CONFIG_DEFINITIONS.map((def) => {
+              const existing = configs.find((c) => c.key === def.key)
+              return (
+                <Stack key={def.key} gap={4}>
+                  <Group justify="space-between" align="flex-end">
                     <div>
                       <Text fw={600} size="sm">{def.label}</Text>
                       <Text size="xs" c="dimmed" ff="monospace">{def.key}</Text>
                     </div>
-                    {existing && (
-                      <Text size="xs" c="dimmed">
-                        Diupdate {new Date(existing.updatedAt).toLocaleString('id-ID')}
-                      </Text>
-                    )}
+                    {existing
+                      ? <Text size="xs" c="dimmed">Diupdate {new Date(existing.updatedAt).toLocaleString('id-ID')}</Text>
+                      : <Badge color="orange" variant="light" size="xs">Belum dikonfigurasi</Badge>
+                    }
                   </Group>
                   <Text size="xs" c="dimmed">{def.description}</Text>
-                  <Group gap="xs" align="flex-end">
-                    <Box style={{ flex: 1 }}>
-                      <input
-                        type={def.secret ? 'password' : 'text'}
-                        style={{
-                          width: '100%',
-                          padding: '8px 12px',
-                          borderRadius: 6,
-                          border: '1px solid var(--mantine-color-default-border)',
-                          background: 'var(--mantine-color-body)',
-                          color: 'var(--mantine-color-text)',
-                          fontSize: 13,
-                          fontFamily: 'monospace',
-                        }}
-                        value={values[def.key] ?? ''}
-                        onChange={(e) => setValues((prev) => ({ ...prev, [def.key]: e.target.value }))}
-                        placeholder={def.placeholder}
-                      />
-                    </Box>
-                    <Button
-                      size="sm"
-                      color={saved[def.key] ? 'green' : 'blue'}
-                      loading={saveMutation.isPending && saveMutation.variables?.key === def.key}
-                      onClick={() => saveMutation.mutate({ key: def.key, value: values[def.key] ?? '' })}
-                    >
-                      {saved[def.key] ? 'Tersimpan' : 'Simpan'}
-                    </Button>
-                  </Group>
-                  {!existing && (
-                    <Badge color="orange" variant="light" size="xs">Belum dikonfigurasi — data tidak akan ter-load</Badge>
-                  )}
+                  <input
+                    type={def.secret ? 'password' : 'text'}
+                    style={{
+                      width: '100%',
+                      padding: '8px 12px',
+                      borderRadius: 6,
+                      border: '1px solid var(--mantine-color-default-border)',
+                      background: 'var(--mantine-color-body)',
+                      color: 'var(--mantine-color-text)',
+                      fontSize: 13,
+                      fontFamily: 'monospace',
+                    }}
+                    value={values[def.key] ?? ''}
+                    onChange={(e) => setValues((prev) => ({ ...prev, [def.key]: e.target.value }))}
+                    placeholder={def.placeholder}
+                  />
                 </Stack>
-              </Paper>
-            )
-          })}
-        </Stack>
+              )
+            })}
+
+            {hasUnconfigured && (
+              <Text size="xs" c="orange">Beberapa konfigurasi belum diisi — data tidak akan ter-load sampai disimpan.</Text>
+            )}
+
+            <Group justify="flex-end">
+              <Button
+                color={saved ? 'green' : 'blue'}
+                loading={saveAllMutation.isPending}
+                onClick={() => saveAllMutation.mutate(values)}
+              >
+                {saved ? 'Tersimpan' : 'Simpan Semua'}
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       )}
     </Stack>
   )