update ui update and fix layout issue

src/app/(workspace)/settings/api/page.tsx

@@ -1,5 +1,5 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {ApiWebhooksManager} from '@/features/settings/ApiWebhooksManager';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {ApiWebhooksManager} from '@/features/settings/components/ApiWebhooksManager';
 
 export default function ApiSettingsPage() {
   return (

src/app/(workspace)/settings/billing/page.tsx

@@ -1,5 +1,5 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {BillingOverview} from '@/features/settings/BillingOverview';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {BillingOverview} from '@/features/settings/components/BillingOverview';
 
 export default function SettingsBillingPage() {
   return (

src/app/(workspace)/settings/integrations/page.tsx

@@ -1,5 +1,5 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {IntegrationsGrid} from '@/features/settings/IntegrationsGrid';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {IntegrationsGrid} from '@/features/settings/components/IntegrationsGrid';
 
 export default function IntegrationsSettingsPage() {
   return (

src/app/(workspace)/settings/layout.tsx

@@ -11,8 +11,8 @@ import {SideNav, SideNavItem, SideNavSection} from '@astryxdesign/core/SideNav';
 import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
 import {Icon} from '@astryxdesign/core/Icon';
 import {useRouter} from 'next/navigation';
-import {useBreakpoint} from '@/lib/breakpoints';
-import {SETTINGS_NAV, isSettingsActive} from '@/features/settings/settings-nav';
+import {useBreakpoint} from '@/shared/hooks/useBreakpoint';
+import {SETTINGS_NAV, isSettingsActive} from '@/features/settings/config/settingsNav';
 
 /**
  * Settings gets its own sub-navigation.
@@ -97,7 +97,7 @@ export default function SettingsLayout({
               bottom edge (measured: scrollWidth 272 in a 240px panel).
             */}
             <SideNav className="w-full">
-              <SideNavSection title="Settings" isHeaderHidden>
+              <SideNavSection title="Settings">
                 {SETTINGS_NAV.map((s) => (
                   <SideNavItem
                     key={s.href}

src/app/(workspace)/settings/notifications/page.tsx

@@ -1,5 +1,5 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {NotificationsForm} from '@/features/settings/NotificationsForm';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {NotificationsForm} from '@/features/settings/components/NotificationsForm';
 
 export default function NotificationsSettingsPage() {
   return (

src/app/(workspace)/settings/page.tsx

@@ -1,5 +1,5 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {BusinessForm} from '@/features/settings/BusinessForm';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {BusinessForm} from '@/features/settings/components/BusinessForm';
 
 export default function BusinessSettingsPage() {
   return (

src/app/(workspace)/settings/preferences/page.tsx

@@ -1,5 +1,5 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {PreferencesForm} from '@/features/settings/PreferencesForm';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {PreferencesForm} from '@/features/settings/components/PreferencesForm';
 
 export default function PreferencesSettingsPage() {
   return (

src/app/(workspace)/settings/profile/page.tsx

@@ -1,9 +1,18 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {ProfileForm} from '@/features/settings/ProfileForm';
-import {readProfile} from '@/lib/mock/settings';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {ProfileForm} from '@/features/settings/components/ProfileForm';
+import {settingsServerRepository} from '@/features/settings/repositories/settingsServerRepository';
 
-export default function MerchantProfilePage() {
-  const profile = readProfile();
+/**
+ * Server Component: the record is read on the server and handed to the form as
+ * its initial state, so the inputs paint filled rather than flashing empty.
+ * The form then saves through the client repository over HTTP.
+ *
+ * The read goes through a repository rather than the fixture module the page
+ * used to import — a page that knows the shape of a mock is a page that breaks
+ * the day the mock is deleted.
+ */
+export default async function MerchantProfilePage() {
+  const profile = await settingsServerRepository.getProfile();
 
   return (
     <SettingsPage

src/app/(workspace)/settings/roles/page.tsx

@@ -1,5 +1,5 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {RoleMatrix} from '@/features/settings/RoleMatrix';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {RoleMatrix} from '@/features/settings/components/RoleMatrix';
 
 export default function RolesSettingsPage() {
   return (

src/app/(workspace)/settings/security/page.tsx

@@ -1,5 +1,5 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {SecurityManager} from '@/features/settings/SecurityManager';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {SecurityManager} from '@/features/settings/components/SecurityManager';
 
 export default function SecuritySettingsPage() {
   return (

src/app/(workspace)/settings/stores/page.tsx

@@ -1,5 +1,5 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {StoreManagement} from '@/features/settings/StoreManagement';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {StoreManagement} from '@/features/settings/components/StoreManagement';
 
 export default function StoreSettingsPage() {
   return (

src/app/(workspace)/settings/team/page.tsx

@@ -1,5 +1,5 @@
-import {SettingsPage} from '@/features/settings/SettingsPage';
-import {TeamManagement} from '@/features/settings/TeamManagement';
+import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {TeamManagement} from '@/features/settings/components/TeamManagement';
 
 export default function TeamSettingsPage() {
   return (