diff --git a/apps/studio/pages/account/me.tsx b/apps/studio/pages/account/me.tsx
index 878ee83039..33519b9b0b 100644
--- a/apps/studio/pages/account/me.tsx
+++ b/apps/studio/pages/account/me.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent } from 'ui'
+import { Card, CardContent, CardFooter } from 'ui'
 import { PageContainer } from 'ui-patterns/PageContainer'
 import {
   PageHeader,
@@ -7,7 +7,15 @@ import {
   PageHeaderSummary,
   PageHeaderTitle,
 } from 'ui-patterns/PageHeader'
-import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import {
+  PageSection,
+  PageSectionContent,
+  PageSectionDescription,
+  PageSectionMeta,
+  PageSectionSummary,
+  PageSectionTitle,
+} from 'ui-patterns/PageSection'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { AccountConnections } from '@/components/interfaces/Account/Preferences/AccountConnections'
 import { AccountDeletion } from '@/components/interfaces/Account/Preferences/AccountDeletion'
@@ -58,20 +66,12 @@ const PlatformPreferences = () => {
       'profile:show_analytics_and_marketing',
       'profile:show_account_deletion',
     ])
-  const { error, isLoading, isError, isSuccess } = useProfile()
+  const { error, isLoading, isError } = useProfile()
 
   return (
     <>
       <PreferencesPageHeader description="Manage your account profile, connections, and dashboard experience." />
       <PageContainer size="small">
-        {isLoading && (
-          <Card>
-            <CardContent className="p-4">
-              <GenericSkeletonLoader />
-            </CardContent>
-          </Card>
-        )}
-
         {isError && (
           <Card>
             <CardContent className="p-4">
@@ -80,29 +80,110 @@ const PlatformPreferences = () => {
           </Card>
         )}
 
-        {isSuccess && (
+        {!isError && (
           <>
-            {profileShowInformation ? <ProfileInformation /> : null}
-            <AccountIdentities />
+            {isLoading ? (
+              <ProfileLoadingSections showProfileInformation={profileShowInformation} />
+            ) : (
+              <>
+                {profileShowInformation ? <ProfileInformation /> : null}
+                <AccountIdentities />
+              </>
+            )}
+
+            <AccountConnections />
+
+            <ThemeSettings />
+
+            <HotkeySettings />
+
+            <DashboardSettings />
+
+            {profileShowAnalyticsAndMarketing && <AnalyticsSettings />}
+
+            {profileShowAccountDeletion && <AccountDeletion />}
           </>
         )}
-
-        <AccountConnections />
-
-        <ThemeSettings />
-
-        <HotkeySettings />
-
-        <DashboardSettings />
-
-        {profileShowAnalyticsAndMarketing && <AnalyticsSettings />}
-
-        {profileShowAccountDeletion && <AccountDeletion />}
       </PageContainer>
     </>
   )
 }
 
+const ProfileLoadingSections = ({
+  showProfileInformation,
+}: {
+  showProfileInformation: boolean
+}) => (
+  <>
+    {showProfileInformation && (
+      <PageSection>
+        <PageSectionMeta>
+          <PageSectionSummary>
+            <PageSectionTitle>Profile information</PageSectionTitle>
+          </PageSectionSummary>
+        </PageSectionMeta>
+        <PageSectionContent>
+          <Card>
+            <CardContent>
+              <ProfileFieldLoadingRow labelWidth="w-24" />
+            </CardContent>
+            <CardContent>
+              <ProfileFieldLoadingRow labelWidth="w-20" />
+            </CardContent>
+            <CardContent>
+              <ProfileFieldLoadingRow labelWidth="w-28" descriptionWidth="w-48" />
+            </CardContent>
+            <CardContent>
+              <ProfileFieldLoadingRow labelWidth="w-20" descriptionWidth="w-40" />
+            </CardContent>
+            <CardFooter className="justify-end">
+              <ShimmeringLoader className="h-8 w-16 rounded-md py-0" />
+            </CardFooter>
+          </Card>
+        </PageSectionContent>
+      </PageSection>
+    )}
+
+    <PageSection>
+      <PageSectionMeta>
+        <PageSectionSummary>
+          <PageSectionTitle>Account identities</PageSectionTitle>
+          <PageSectionDescription>
+            Manage the providers linked to your Supabase account and update their details.
+          </PageSectionDescription>
+        </PageSectionSummary>
+      </PageSectionMeta>
+      <PageSectionContent>
+        <Card>
+          <CardContent>
+            <ShimmeringLoader />
+          </CardContent>
+        </Card>
+      </PageSectionContent>
+    </PageSection>
+  </>
+)
+
+const ProfileFieldLoadingRow = ({
+  labelWidth,
+  descriptionWidth,
+}: {
+  labelWidth: string
+  descriptionWidth?: string
+}) => (
+  <div className="flex flex-col-reverse gap-2 md:gap-6 md:flex-row-reverse md:justify-between">
+    <div className="flex flex-col justify-center items-start md:items-end shrink-0 md:w-1/2 xl:w-2/5 md:min-w-100">
+      <ShimmeringLoader className="h-8 w-full rounded-md py-0" />
+    </div>
+    <div className="flex flex-col min-w-0 flex-grow">
+      <ShimmeringLoader className={`${labelWidth} h-4 py-0`} />
+      {descriptionWidth !== undefined && (
+        <ShimmeringLoader className={`${descriptionWidth} mt-2 h-3 py-0`} />
+      )}
+    </div>
+  </div>
+)
+
 const SelfHostedPreferences = () => {
   return (
     <>