diff --git a/frontend/src/core/components/shared/AppConfigModal.tsx b/frontend/src/core/components/shared/AppConfigModal.tsx
index 42e6099e3..f30f45b9c 100644
--- a/frontend/src/core/components/shared/AppConfigModal.tsx
+++ b/frontend/src/core/components/shared/AppConfigModal.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useEffect, useCallback, Suspense } from 'react';
 import { Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core';
 import { useNavigate, useLocation } from 'react-router-dom';
 import LocalIcon from '@app/components/shared/LocalIcon';
@@ -223,7 +223,9 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
               </ActionIcon>
             </div>
             <div className="modal-body">
-              {activeComponent}
+              <Suspense fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading...</div>}>
+                {activeComponent}
+              </Suspense>
             </div>
           </div>
         </div>
diff --git a/frontend/src/proprietary/components/shared/config/configNavSections.tsx b/frontend/src/proprietary/components/shared/config/configNavSections.tsx
index 0073696f9..a731e0bc1 100644
--- a/frontend/src/proprietary/components/shared/config/configNavSections.tsx
+++ b/frontend/src/proprietary/components/shared/config/configNavSections.tsx
@@ -1,23 +1,25 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useConfigNavSections as useCoreConfigNavSections, createConfigNavSections as createCoreConfigNavSections, ConfigNavSection } from '@core/components/shared/config/configNavSections';
-import PeopleSection from '@app/components/shared/config/configSections/PeopleSection';
-import TeamsSection from '@app/components/shared/config/configSections/TeamsSection';
-import AdminGeneralSection from '@app/components/shared/config/configSections/AdminGeneralSection';
-import AdminSecuritySection from '@app/components/shared/config/configSections/AdminSecuritySection';
-import AdminConnectionsSection from '@app/components/shared/config/configSections/AdminConnectionsSection';
-import AdminPrivacySection from '@app/components/shared/config/configSections/AdminPrivacySection';
-import AdminDatabaseSection from '@app/components/shared/config/configSections/AdminDatabaseSection';
-import AdminAdvancedSection from '@app/components/shared/config/configSections/AdminAdvancedSection';
-import AdminLegalSection from '@app/components/shared/config/configSections/AdminLegalSection';
-import AdminPlanSection from '@app/components/shared/config/configSections/AdminPlanSection';
-import AdminFeaturesSection from '@app/components/shared/config/configSections/AdminFeaturesSection';
-import AdminEndpointsSection from '@app/components/shared/config/configSections/AdminEndpointsSection';
-import AdminAuditSection from '@app/components/shared/config/configSections/AdminAuditSection';
-import AdminUsageSection from '@app/components/shared/config/configSections/AdminUsageSection';
-import ApiKeys from '@app/components/shared/config/configSections/ApiKeys';
-import AccountSection from '@app/components/shared/config/configSections/AccountSection';
-import GeneralSection from '@app/components/shared/config/configSections/GeneralSection';
+
+// Lazy load all config sections
+const PeopleSection = lazy(() => import('@app/components/shared/config/configSections/PeopleSection'));
+const TeamsSection = lazy(() => import('@app/components/shared/config/configSections/TeamsSection'));
+const AdminGeneralSection = lazy(() => import('@app/components/shared/config/configSections/AdminGeneralSection'));
+const AdminSecuritySection = lazy(() => import('@app/components/shared/config/configSections/AdminSecuritySection'));
+const AdminConnectionsSection = lazy(() => import('@app/components/shared/config/configSections/AdminConnectionsSection'));
+const AdminPrivacySection = lazy(() => import('@app/components/shared/config/configSections/AdminPrivacySection'));
+const AdminDatabaseSection = lazy(() => import('@app/components/shared/config/configSections/AdminDatabaseSection'));
+const AdminAdvancedSection = lazy(() => import('@app/components/shared/config/configSections/AdminAdvancedSection'));
+const AdminLegalSection = lazy(() => import('@app/components/shared/config/configSections/AdminLegalSection'));
+const AdminPlanSection = lazy(() => import('@app/components/shared/config/configSections/AdminPlanSection'));
+const AdminFeaturesSection = lazy(() => import('@app/components/shared/config/configSections/AdminFeaturesSection'));
+const AdminEndpointsSection = lazy(() => import('@app/components/shared/config/configSections/AdminEndpointsSection'));
+const AdminAuditSection = lazy(() => import('@app/components/shared/config/configSections/AdminAuditSection'));
+const AdminUsageSection = lazy(() => import('@app/components/shared/config/configSections/AdminUsageSection'));
+const ApiKeys = lazy(() => import('@app/components/shared/config/configSections/ApiKeys'));
+const AccountSection = lazy(() => import('@app/components/shared/config/configSections/AccountSection'));
+const GeneralSection = lazy(() => import('@app/components/shared/config/configSections/GeneralSection'));
 
 /**
  * Hook version of proprietary config nav sections with proper i18n support