diff --git a/apps/desktop/src/app/settings/memory/provider-config-panel.tsx b/apps/desktop/src/app/settings/memory/provider-config-panel.tsx
index ab7b29da9884..aa0c5ffd8661 100644
--- a/apps/desktop/src/app/settings/memory/provider-config-panel.tsx
+++ b/apps/desktop/src/app/settings/memory/provider-config-panel.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 
+import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
 import { DisclosureCaret } from '@/components/ui/disclosure-caret'
 import { getMemoryProviderConfig, saveMemoryProviderConfig } from '@/hermes'
@@ -7,7 +8,7 @@ import { SlidersHorizontal } from '@/lib/icons'
 import { notifyError } from '@/store/notifications'
 import type { MemoryProviderConfig, MemoryProviderField } from '@/types/hermes'
 
-import { ListRow, LoadingState, Pill } from '../primitives'
+import { ListRow, Pill } from '../primitives'
 
 import { FieldControl, FieldTitle } from './field-control'
 import { ProviderConfigModal } from './provider-config-modal'
@@ -95,7 +96,7 @@ export function ProviderConfigPanel({ provider }: { provider: string }) {
       )
     }
 
-    return <LoadingState label="Loading memory provider settings..." />
+    return <PageLoader className="min-h-24" label="Loading memory provider settings..." />
   }
 
   const inlineFields = config.fields.filter(field => field.inline)
diff --git a/apps/desktop/src/app/settings/primitives.tsx b/apps/desktop/src/app/settings/primitives.tsx
index fd53b2d32b6f..4e55a2f9f4b9 100644
--- a/apps/desktop/src/app/settings/primitives.tsx
+++ b/apps/desktop/src/app/settings/primitives.tsx
@@ -143,8 +143,17 @@ export function ToggleRow({
   )
 }
 
+// The settings panels render this as the sole child of the top-padded
+// OverlayMain (pt = titlebar + 1rem, no bottom pad — see settings/index.tsx).
+// Cancel that top pad so the loader centers in the whole card, not just the
+// band beneath it. Inline loaders (mid-panel) should use <PageLoader> directly.
 export function LoadingState({ label }: { label: string }) {
-  return <PageLoader label={label} />
+  return (
+    <PageLoader
+      className="-mt-[calc(var(--titlebar-height)+1rem)] h-[calc(100%+var(--titlebar-height)+1rem)]"
+      label={label}
+    />
+  )
 }
 
 // Canonical implementation lives in components/ui; re-exported so the many