From 0a96a5d0ceb2759a33effbb45a57054861f901a0 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Fri, 27 Feb 2026 11:16:02 +1100
Subject: [PATCH] chore(studio): polish database settings (#42970)

## What kind of change does this PR introduce?

UI update

## What is the current behavior?

- Database settings uses an older, much wider, layout
- This will become problematic later on as more complex elements are
added to the page
- Titles and descriptions are inconsistently formatted

## What is the new behavior?

| Before | After |
| --- | --- |
| <img width="1728" height="994" alt="Oldie 2 Toolshed
Supabase-EE998752-3696-45E4-A842-9666049153D8"
src="https://github.com/user-attachments/assets/8f0004cf-3bb4-4b00-900a-b116b80371a6"
/> | <img width="1728" height="994" alt="Oldie 2 Toolshed
Supabase-7E86FD58-35BB-4912-8B2F-8C7AAA03B462"
src="https://github.com/user-attachments/assets/606b51b4-21a0-4b7b-870b-ac92ed363f3c"
/> |
---
 .../guides/database/connection-management.mdx |   2 +-
 .../DiskManagementPanelForm.tsx               |   2 +-
 .../Settings/Database/BannedIPs.tsx           | 103 +++--
 .../ConnectionPooling/ConnectionPooling.tsx   | 351 +++++++++---------
 .../DatabaseSettings/ResetDbPassword.tsx      |  50 ++-
 .../NetworkRestrictions.tsx                   |   6 +-
 .../Settings/Database/SSLConfiguration.tsx    |   2 +-
 .../CustomDomainConfig/CustomDomainConfig.tsx |   4 +-
 .../DeleteProjectPanel/DeleteProjectPanel.tsx |   4 +-
 .../interfaces/Settings/General/General.tsx   |   5 +-
 .../TransferProjectPanel.tsx                  |   5 +-
 .../pages/project/[ref]/database/settings.tsx |  20 +-
 .../pages/project/[ref]/settings/general.tsx  |   2 +-
 13 files changed, 291 insertions(+), 265 deletions(-)

diff --git a/apps/docs/content/guides/database/connection-management.mdx b/apps/docs/content/guides/database/connection-management.mdx
index 62a011328fbac..eab783c29286f 100644
--- a/apps/docs/content/guides/database/connection-management.mdx
+++ b/apps/docs/content/guides/database/connection-management.mdx
@@ -11,7 +11,7 @@ Every [Compute Add-On](/docs/guides/platform/compute-add-ons) has a pre-configur
 
 ### Configuring Supavisor's pool size
 
-You can change how many database connections Supavisor can manage by altering the pool size in the "Connection pooling configuration" section of the [Database Settings](/dashboard/project/_/database/settings):
+You can change how many database connections Supavisor can manage by altering the pool size in the "Connection pooling" section of the [Database Settings](/dashboard/project/_/database/settings):
 
 ![Connection Info and Certificate.](/docs/img/database/pool-size.png)
 
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
index 6cd8e9ae65ada..ad6188313281d 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
@@ -21,7 +21,7 @@ export function DiskManagementPanelForm() {
     <PageSection id="disk-management">
       <PageSectionMeta>
         <PageSectionSummary>
-          <PageSectionTitle>Disk Management</PageSectionTitle>
+          <PageSectionTitle>Disk management</PageSectionTitle>
         </PageSectionSummary>
         <DocsButton href={`${DOCS_URL}/guides/platform/database-size#disk-management`} />
       </PageSectionMeta>
diff --git a/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx b/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
index 3d131b50ad911..79b5c1b1cbb28 100644
--- a/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
@@ -84,64 +84,63 @@ const BannedIPs = () => {
       <PageSection id="banned-ips">
         <PageSectionMeta>
           <PageSectionSummary>
-            <PageSectionTitle>Network Bans</PageSectionTitle>
+            <PageSectionTitle>Network bans</PageSectionTitle>
             <PageSectionDescription>
-              List of IP addresses that are temporarily blocked if their traffic pattern looks
-              abusive
+              IP addresses temporarily blocked due to suspicious traffic
             </PageSectionDescription>
           </PageSectionSummary>
           <DocsButton href={`${DOCS_URL}/reference/cli/supabase-network-bans`} />
         </PageSectionMeta>
-        <PageSectionContent></PageSectionContent>
+        <PageSectionContent>
+          {ipListLoading ? (
+            <Card>
+              <CardContent className="space-y-4">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" />
+              </CardContent>
+            </Card>
+          ) : ipListError ? (
+            <AlertError
+              className="border-0 rounded-none"
+              error={ipListError}
+              subject="Failed to retrieve banned IP addresses"
+            />
+          ) : ipList.banned_ipv4_addresses.length > 0 ? (
+            <Card>
+              {ipList.banned_ipv4_addresses.map((ip) => (
+                <CardContent key={ip} className="flex items-center justify-between">
+                  <div className="flex items-center space-x-5">
+                    <Globe size={16} className="text-foreground-lighter" />
+                    <p className="text-sm font-mono">{ip}</p>
+                    {ip === userIPAddress && <Badge>Your IP address</Badge>}
+                  </div>
+                  <ButtonTooltip
+                    type="default"
+                    disabled={!canUnbanNetworks}
+                    onClick={() => openConfirmationModal(ip)}
+                    tooltip={{
+                      content: {
+                        side: 'bottom',
+                        text: !canUnbanNetworks
+                          ? 'You need additional permissions to unban networks'
+                          : undefined,
+                      },
+                    }}
+                  >
+                    Unban IP
+                  </ButtonTooltip>
+                </CardContent>
+              ))}
+            </Card>
+          ) : (
+            <Card>
+              <CardContent className="text-foreground text-sm">
+                There are no banned IP addresses for your project
+              </CardContent>
+            </Card>
+          )}
+        </PageSectionContent>
       </PageSection>
-      {/* TODO: Remove mockIpList usage - using mock data for UI testing */}
-      {ipListLoading ? (
-        <Card>
-          <CardContent className="space-y-4">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-full" />
-          </CardContent>
-        </Card>
-      ) : ipListError ? (
-        <AlertError
-          className="border-0 rounded-none"
-          error={ipListError}
-          subject="Failed to retrieve banned IP addresses"
-        />
-      ) : ipList.banned_ipv4_addresses.length > 0 ? (
-        <Card>
-          {ipList.banned_ipv4_addresses.map((ip) => (
-            <CardContent key={ip} className="flex items-center justify-between">
-              <div className="flex items-center space-x-5">
-                <Globe size={16} className="text-foreground-lighter" />
-                <p className="text-sm font-mono">{ip}</p>
-                {ip === userIPAddress && <Badge>Your IP address</Badge>}
-              </div>
-              <ButtonTooltip
-                type="default"
-                disabled={!canUnbanNetworks}
-                onClick={() => openConfirmationModal(ip)}
-                tooltip={{
-                  content: {
-                    side: 'bottom',
-                    text: !canUnbanNetworks
-                      ? 'You need additional permissions to unban networks'
-                      : undefined,
-                  },
-                }}
-              >
-                Unban IP
-              </ButtonTooltip>
-            </CardContent>
-          ))}
-        </Card>
-      ) : (
-        <Card>
-          <CardContent className="text-foreground-light text-sm">
-            There are no banned IP addresses for your project.
-          </CardContent>
-        </Card>
-      )}
 
       <ConfirmationModal
         variant="destructive"
diff --git a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
index bb8a3a6b9313f..08419a505c381 100644
--- a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
@@ -26,6 +26,7 @@ import {
   AlertTitle_Shadcn_,
   Alert_Shadcn_,
   Badge,
+  cn,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   Form_Shadcn_,
@@ -33,6 +34,14 @@ import {
   PrePostTab,
   Separator,
 } from 'ui'
+import {
+  PageSection,
+  PageSectionAside,
+  PageSectionContent,
+  PageSectionMeta,
+  PageSectionSummary,
+  PageSectionTitle,
+} from 'ui-patterns/PageSection'
 import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
@@ -139,187 +148,193 @@ export const ConnectionPooling = () => {
   }, [isSuccessPgbouncerConfig])
 
   return (
-    <section id="connection-pooler">
-      <Panel
-        noMargin
-        title={
-          <div className="w-full flex items-center justify-between">
-            <div className="flex items-center gap-x-2">
-              <p>Connection pooling configuration</p>
-              {disablePoolModeSelection ? (
-                <Badge>Shared Pooler</Badge>
-              ) : (
-                <Badge>Shared/Dedicated Pooler</Badge>
-              )}
-            </div>
-            <DocsButton
-              href={`${DOCS_URL}/guides/database/connecting-to-postgres#connection-pooler`}
-            />
-          </div>
-        }
-        footer={
-          <FormActions
-            form={formId}
-            isSubmitting={isUpdatingPoolerConfig}
-            hasChanges={form.formState.isDirty}
-            handleReset={() => resetForm()}
-            helper={
-              !canUpdateConnectionPoolingConfiguration
-                ? 'You need additional permissions to update connection pooling settings'
-                : undefined
-            }
+    <PageSection id="connection-pooler">
+      <PageSectionMeta>
+        <PageSectionSummary>
+          <PageSectionTitle>Connection pooling</PageSectionTitle>
+        </PageSectionSummary>
+        <PageSectionAside>
+          <DocsButton
+            href={`${DOCS_URL}/guides/database/connecting-to-postgres#connection-pooler`}
           />
-        }
-      >
+        </PageSectionAside>
+      </PageSectionMeta>
+      <PageSectionContent className="space-y-4">
         {isSuccessAddons && !disablePoolModeSelection && !hasIpv4Addon && (
-          <Admonition
-            className="border-x-0 border-t-0 rounded-none"
-            type="default"
-            title="Dedicated Pooler is not IPv4 compatible"
-          >
+          <Admonition type="default" title="Dedicated Pooler is not IPv4 compatible">
             <p className="!m-0">
               If your network only supports IPv4, consider purchasing the{' '}
               <InlineLink href={`/project/${projectRef}/settings/addons?panel=ipv4`}>
                 IPv4 add-on
               </InlineLink>
+              .
             </p>
           </Admonition>
         )}
-        <Panel.Content>
-          {isLoadingPgbouncerConfig && (
-            <div className="flex flex-col gap-y-4">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <Fragment key={`loader-${i}`}>
-                  <div className="grid gap-2 items-center md:grid md:grid-cols-12 md:gap-x-4 w-full">
-                    <ShimmeringLoader className="h-4 w-1/3 col-span-4" delayIndex={i} />
-                    <ShimmeringLoader className="h-8 w-full col-span-8" delayIndex={i} />
-                  </div>
-                  <Separator />
-                </Fragment>
-              ))}
 
-              <ShimmeringLoader className="h-8 w-full" />
-            </div>
-          )}
-          {isErrorPgbouncerConfig && (
-            <AlertError
-              error={pgbouncerConfigError}
-              subject="Failed to retrieve connection pooler configuration"
-            />
-          )}
-          {connectionPoolingUnavailable && (
-            <Admonition
-              type="default"
-              title="Unable to retrieve pooling configuration"
-              description="Please start a new project to enable this feature"
+        <Panel
+          noMargin
+          footer={
+            <FormActions
+              form={formId}
+              isSubmitting={isUpdatingPoolerConfig}
+              hasChanges={form.formState.isDirty}
+              handleReset={() => resetForm()}
+              helper={
+                !canUpdateConnectionPoolingConfiguration
+                  ? 'You need additional permissions to update connection pooling settings'
+                  : undefined
+              }
             />
-          )}
-          {isSuccessPgbouncerConfig && (
-            <Form_Shadcn_ {...form}>
-              <form
-                id={formId}
-                className="flex flex-col gap-y-4 w-full"
-                onSubmit={form.handleSubmit(onSubmit)}
-              >
-                <FormField_Shadcn_
-                  control={form.control}
-                  name="default_pool_size"
-                  render={({ field }) => (
-                    <FormItemLayout
-                      layout="flex-row-reverse"
-                      label="Pool Size"
-                      description={
-                        <p>
-                          The maximum number of connections made to the underlying Postgres cluster,
-                          per user+db combination. Pool size has a default of {defaultPoolSize}{' '}
-                          based on your compute size of {computeSize}.
-                        </p>
-                      }
-                      className="[&>div]:md:w-1/2 [&>div]:xl:w-2/5 [&>div>div]:w-full [&>div>div>div]:min-w-100"
-                    >
-                      <FormControl_Shadcn_>
-                        <PrePostTab postTab="connections" className="uppercase">
-                          <Input_Shadcn_
-                            {...field}
-                            type="number"
-                            className="w-full"
-                            value={field.value || ''}
-                            placeholder={defaultPoolSize.toString()}
-                            {...form.register('default_pool_size', {
-                              setValueAs: setValueAsNullableNumber,
-                            })}
-                          />
-                        </PrePostTab>
-                      </FormControl_Shadcn_>
-                      {!!maxConnData &&
-                        (default_pool_size ?? 15) > maxConnData.maxConnections * 0.8 && (
-                          <Alert_Shadcn_ variant="warning" className="mt-2">
-                            <AlertTitle_Shadcn_ className="text-foreground">
-                              Pool size is greater than 80% of the max connections (
-                              {maxConnData.maxConnections}) on your database
-                            </AlertTitle_Shadcn_>
-                            <AlertDescription_Shadcn_>
-                              This may result in instability and unreliability with your database
-                              connections.
-                            </AlertDescription_Shadcn_>
-                          </Alert_Shadcn_>
-                        )}
-                    </FormItemLayout>
-                  )}
-                />
+          }
+        >
+          <Panel.Content>
+            {isLoadingPgbouncerConfig && (
+              <div className="flex flex-col gap-y-4">
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <Fragment key={`loader-${i}`}>
+                    <div className="grid gap-2 items-center md:grid md:grid-cols-12 md:gap-x-4 w-full">
+                      <ShimmeringLoader className="h-4 w-1/3 col-span-4" delayIndex={i} />
+                      <ShimmeringLoader className="h-8 w-full col-span-8" delayIndex={i} />
+                    </div>
+                    <Separator />
+                  </Fragment>
+                ))}
+
+                <ShimmeringLoader className="h-8 w-full" />
+              </div>
+            )}
+            {isErrorPgbouncerConfig && (
+              <AlertError
+                error={pgbouncerConfigError}
+                subject="Failed to retrieve connection pooler configuration"
+              />
+            )}
+            {connectionPoolingUnavailable && (
+              <Admonition
+                type="default"
+                title="Unable to retrieve pooling configuration"
+                description="Please start a new project to enable this feature"
+              />
+            )}
+            {isSuccessPgbouncerConfig && !connectionPoolingUnavailable && (
+              <>
+                <div className="flex flex-row gap-2 justify-between w-full">
+                  <div className="flex flex-col text-sm">
+                    <h5 className="text-foreground font-normal">Connection poolers</h5>
+                    <p className="text-foreground-lighter">
+                      Configuration is shared across all connection poolers.
+                    </p>
+                  </div>
+                  <div className="flex flex-row gap-1 items-center">
+                    <Badge>Shared</Badge>
+                    {!disablePoolModeSelection && <Badge>Dedicated</Badge>}
+                  </div>
+                </div>
+                <Separator className="bg-border -mx-6 w-[calc(100%+3rem)] my-4" />
+                <Form_Shadcn_ {...form}>
+                  <form
+                    id={formId}
+                    className="flex flex-col gap-y-4 w-full"
+                    onSubmit={form.handleSubmit(onSubmit)}
+                  >
+                    <FormField_Shadcn_
+                      control={form.control}
+                      name="default_pool_size"
+                      render={({ field }) => (
+                        <FormItemLayout
+                          layout="flex-row-reverse"
+                          label="Connection pool size"
+                          description={
+                            <p>
+                              The maximum number of connections made to the underlying Postgres
+                              cluster, per user+db combination. Pool size has a default of{' '}
+                              {defaultPoolSize} based on your compute size of {computeSize}.
+                            </p>
+                          }
+                          className="[&>div]:md:w-1/2 [&>div]:xl:w-2/5 [&>div>div]:w-full [&>div>div>div]:min-w-100"
+                        >
+                          <FormControl_Shadcn_>
+                            <PrePostTab postTab="connections" className="uppercase">
+                              <Input_Shadcn_
+                                {...field}
+                                type="number"
+                                className="w-full"
+                                value={field.value || ''}
+                                placeholder={defaultPoolSize.toString()}
+                                {...form.register('default_pool_size', {
+                                  setValueAs: setValueAsNullableNumber,
+                                })}
+                              />
+                            </PrePostTab>
+                          </FormControl_Shadcn_>
+                          {!!maxConnData &&
+                            (default_pool_size ?? 15) > maxConnData.maxConnections * 0.8 && (
+                              <Alert_Shadcn_ variant="warning" className="mt-2">
+                                <AlertTitle_Shadcn_ className="text-foreground">
+                                  Pool size is greater than 80% of the max connections (
+                                  {maxConnData.maxConnections}) on your database
+                                </AlertTitle_Shadcn_>
+                                <AlertDescription_Shadcn_>
+                                  This may result in instability and unreliability with your
+                                  database connections.
+                                </AlertDescription_Shadcn_>
+                              </Alert_Shadcn_>
+                            )}
+                        </FormItemLayout>
+                      )}
+                    />
 
-                <Separator className="bg-border -mx-6 w-[calc(100%+3rem)]" />
+                    <Separator className="bg-border -mx-6 w-[calc(100%+3rem)]" />
 
-                <FormField_Shadcn_
-                  control={form.control}
-                  name="max_client_conn"
-                  render={({ field }) => (
-                    <FormItemLayout
-                      layout="flex-row-reverse"
-                      label="Max Client Connections"
-                      className="[&>div]:md:w-1/2 [&>div]:xl:w-2/5 [&>div>div]:w-full [&>div>div>div]:min-w-100"
-                      description={
-                        <>
-                          <p>
-                            The maximum number of concurrent client connections allowed. This value
-                            is fixed at {defaultMaxClientConn} based on your compute size of{' '}
-                            {computeSize} and cannot be changed.
-                          </p>
-                          <p className="mt-2">
-                            Please refer to our{' '}
-                            <InlineLink
-                              href={`${DOCS_URL}/guides/database/connection-management#configuring-supavisors-pool-size`}
-                            >
-                              documentation
-                            </InlineLink>{' '}
-                            to find out more.
-                          </p>
-                        </>
-                      }
-                    >
-                      <FormControl_Shadcn_>
-                        <PrePostTab postTab="clients" className="uppercase">
-                          <Input_Shadcn_
-                            {...field}
-                            type="number"
-                            className="w-full"
-                            value={pgbouncerConfig?.max_client_conn || ''}
-                            disabled={true}
-                            placeholder={defaultMaxClientConn.toString()}
-                            {...form.register('max_client_conn', {
-                              setValueAs: setValueAsNullableNumber,
-                            })}
-                          />
-                        </PrePostTab>
-                      </FormControl_Shadcn_>
-                    </FormItemLayout>
-                  )}
-                />
-              </form>
-            </Form_Shadcn_>
-          )}
-        </Panel.Content>
-      </Panel>
-    </section>
+                    <FormField_Shadcn_
+                      control={form.control}
+                      name="max_client_conn"
+                      render={({ field }) => (
+                        <FormItemLayout
+                          layout="flex-row-reverse"
+                          label="Max client connections"
+                          className="[&>div]:md:w-1/2 [&>div]:xl:w-2/5 [&>div>div]:w-full [&>div>div>div]:min-w-100"
+                          description={
+                            <>
+                              <p>
+                                The maximum number of concurrent client connections allowed. This
+                                value is fixed at {defaultMaxClientConn} based on your compute size
+                                of {computeSize} and cannot be changed.{' '}
+                                <InlineLink
+                                  href={`${DOCS_URL}/guides/database/connection-management#configuring-supavisors-pool-size`}
+                                >
+                                  Learn more
+                                </InlineLink>
+                              </p>
+                            </>
+                          }
+                        >
+                          <FormControl_Shadcn_>
+                            <PrePostTab postTab="clients" className="uppercase">
+                              <Input_Shadcn_
+                                {...field}
+                                type="number"
+                                className="w-full"
+                                value={pgbouncerConfig?.max_client_conn || ''}
+                                disabled={true}
+                                placeholder={defaultMaxClientConn.toString()}
+                                {...form.register('max_client_conn', {
+                                  setValueAs: setValueAsNullableNumber,
+                                })}
+                              />
+                            </PrePostTab>
+                          </FormControl_Shadcn_>
+                        </FormItemLayout>
+                      )}
+                    />
+                  </form>
+                </Form_Shadcn_>
+              </>
+            )}
+          </Panel.Content>
+        </Panel>
+      </PageSectionContent>
+    </PageSection>
   )
 }
diff --git a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
index 0656bb21417a5..7b54ad637ed13 100644
--- a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
@@ -10,8 +10,15 @@ import { passwordStrength, PasswordStrengthScore } from 'lib/password-strength'
 import { generateStrongPassword } from 'lib/project'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
-import { Button, Card, CardContent, Input, Modal } from 'ui'
-import { FormLayout } from 'ui-patterns/form/Layout/FormLayout'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Modal } from 'ui'
+import {
+  PageSection,
+  PageSectionContent,
+  PageSectionMeta,
+  PageSectionSummary,
+  PageSectionDescription,
+  PageSectionTitle,
+} from 'ui-patterns/PageSection'
 
 const ResetDbPassword = ({ disabled = false }) => {
   const { ref } = useParams()
@@ -84,14 +91,25 @@ const ResetDbPassword = ({ disabled = false }) => {
 
   return (
     <>
-      <Card id="database-password">
-        <CardContent>
-          <FormLayout
-            layout="flex-row-reverse"
-            label="Database password"
-            description="You can use this password to connect directly to your Postgres database."
-          >
-            <div className="flex items-end justify-end">
+      <PageSection id="database-password">
+        <PageSectionMeta>
+          <PageSectionSummary>
+            <PageSectionTitle>Database password</PageSectionTitle>
+
+            <PageSectionDescription>Used for direct Postgres connections</PageSectionDescription>
+          </PageSectionSummary>
+        </PageSectionMeta>
+        <PageSectionContent>
+          <Card>
+            <CardContent className="flex flex-row items-center gap-x-2 justify-between">
+              <div className="space-y-0.5">
+                <h3 className="text-sm text-foreground">Reset database password</h3>
+                <p className="text-sm text-foreground-light text-balance">
+                  The database password isn’t viewable after creation. Resetting it will break any
+                  existing connections.
+                </p>
+              </div>
+
               <ButtonTooltip
                 type="default"
                 disabled={!canResetDbPassword || !isProjectActive || disabled}
@@ -107,15 +125,15 @@ const ResetDbPassword = ({ disabled = false }) => {
                   },
                 }}
               >
-                Reset database password
+                Reset password
               </ButtonTooltip>
-            </div>
-          </FormLayout>
-        </CardContent>
-      </Card>
+            </CardContent>
+          </Card>
+        </PageSectionContent>
+      </PageSection>
       <Modal
         hideFooter
-        header={<h5 className="text-foreground">Reset database password</h5>}
+        header="Reset database password"
         confirmText="Reset password"
         size="medium"
         visible={showResetDbPass}
diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
index 08ce91a7f6704..7f6bc4aa760a1 100644
--- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
@@ -114,7 +114,7 @@ export const NetworkRestrictions = () => {
       <PageSection id="network-restrictions">
         <PageSectionMeta>
           <PageSectionSummary>
-            <PageSectionTitle>Network Restrictions</PageSectionTitle>
+            <PageSectionTitle>Network restrictions</PageSectionTitle>
           </PageSectionSummary>
           <PageSectionAside className="flex items-center gap-x-2">
             <DocsButton href={`${DOCS_URL}/guides/platform/network-restrictions`} />
@@ -206,8 +206,8 @@ export const NetworkRestrictions = () => {
               {isUninitialized || isAllowedAll ? (
                 <CardContent className="flex items-center justify-between">
                   <div className="flex items-start space-x-4">
-                    <div className="space-y-1">
-                      <p className="text-foreground-light text-sm">
+                    <div className="space-y-0.5">
+                      <p className="text-foreground text-sm">
                         Your database can be accessed by all IP addresses
                       </p>
                       <p className="text-foreground-light text-sm">
diff --git a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
index 36d1028933d72..7caf8352e6d1a 100644
--- a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
@@ -114,7 +114,7 @@ const SSLConfiguration = () => {
     <PageSection id="ssl-configuration">
       <PageSectionMeta>
         <PageSectionSummary>
-          <PageSectionTitle>SSL Configuration</PageSectionTitle>
+          <PageSectionTitle>SSL configuration</PageSectionTitle>
         </PageSectionSummary>
         <DocsButton href={`${DOCS_URL}/guides/platform/ssl-enforcement`} />
       </PageSectionMeta>
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
index b4b55d01884fe..bf3c82fc730b4 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
@@ -64,9 +64,9 @@ export const CustomDomainConfig = () => {
     <PageSection id="custom-domains">
       <PageSectionMeta>
         <PageSectionSummary>
-          <PageSectionTitle>Custom Domains</PageSectionTitle>
+          <PageSectionTitle>Custom domains</PageSectionTitle>
           <PageSectionDescription>
-            Present a branded experience to your users.
+            Present a branded experience to your users
           </PageSectionDescription>
         </PageSectionSummary>
       </PageSectionMeta>
diff --git a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx b/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx
index 61bb43b3e43c1..2182e4e6ab29e 100644
--- a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx
+++ b/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx
@@ -30,9 +30,9 @@ export const DeleteProjectPanel = () => {
     <PageSection id="delete-project">
       <PageSectionMeta>
         <PageSectionSummary>
-          <PageSectionTitle>Delete Project</PageSectionTitle>
+          <PageSectionTitle>Delete project</PageSectionTitle>
           <PageSectionDescription>
-            Permanently remove your project and its database.
+            Permanently remove your project and its database
           </PageSectionDescription>
         </PageSectionSummary>
       </PageSectionMeta>
diff --git a/apps/studio/components/interfaces/Settings/General/General.tsx b/apps/studio/components/interfaces/Settings/General/General.tsx
index 42ae983f7265e..4544eecd26afb 100644
--- a/apps/studio/components/interfaces/Settings/General/General.tsx
+++ b/apps/studio/components/interfaces/Settings/General/General.tsx
@@ -189,7 +189,7 @@ export const General = () => {
           <PageSectionSummary>
             <PageSectionTitle>Project availability</PageSectionTitle>
             <PageSectionDescription>
-              Restart or pause your project when performing maintenance.
+              Restart or pause your project when performing maintenance
             </PageSectionDescription>
           </PageSectionSummary>
         </PageSectionMeta>
@@ -235,9 +235,6 @@ export const General = () => {
           <PageSectionMeta>
             <PageSectionSummary>
               <PageSectionTitle>Project usage</PageSectionTitle>
-              <PageSectionDescription>
-                Usage statistics now live under your organization settings.
-              </PageSectionDescription>
             </PageSectionSummary>
           </PageSectionMeta>
           <PageSectionContent>
diff --git a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
index b713be37c48c1..072f7cf5bcc1d 100644
--- a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
+++ b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
@@ -21,10 +21,7 @@ export const TransferProjectPanel = () => {
     <PageSection id="transfer-project">
       <PageSectionMeta>
         <PageSectionSummary>
-          <PageSectionTitle>Transfer Project</PageSectionTitle>
-          <PageSectionDescription>
-            Transfer your project to a different organization.
-          </PageSectionDescription>
+          <PageSectionTitle>Transfer project</PageSectionTitle>
         </PageSectionSummary>
       </PageSectionMeta>
       <PageSectionContent>
diff --git a/apps/studio/pages/project/[ref]/database/settings.tsx b/apps/studio/pages/project/[ref]/database/settings.tsx
index a069ae05469ec..8e0226bdba70a 100644
--- a/apps/studio/pages/project/[ref]/database/settings.tsx
+++ b/apps/studio/pages/project/[ref]/database/settings.tsx
@@ -11,6 +11,7 @@ import { useIsAwsCloudProvider, useIsAwsK8sCloudProvider } from 'hooks/misc/useS
 import { PageContainer } from 'ui-patterns/PageContainer'
 import {
   PageHeader,
+  PageHeaderDescription,
   PageHeaderMeta,
   PageHeaderSummary,
   PageHeaderTitle,
@@ -45,23 +46,22 @@ const ProjectSettings: NextPageWithLayout = () => {
 
   return (
     <>
-      <PageHeader>
+      <PageHeader size="small">
         <PageHeaderMeta>
           <PageHeaderSummary>
             <PageHeaderTitle>Database Settings</PageHeaderTitle>
+            <PageHeaderDescription>
+              Connections, security, and network configuration
+            </PageHeaderDescription>
           </PageHeaderSummary>
         </PageHeaderMeta>
       </PageHeader>
       {IS_PLATFORM ? (
         <>
-          <PageContainer className="pb-12">
-            <PageSection>
-              <PageSectionContent className="space-y-4 md:space-y-8">
-                <DatabaseReadOnlyAlert />
-                <ResetDbPassword />
-                <ConnectionPooling />
-              </PageSectionContent>
-            </PageSection>
+          <PageContainer size="small" className="flex flex-col gap-8 pb-12">
+            <DatabaseReadOnlyAlert />
+            <ResetDbPassword />
+            <ConnectionPooling />
             <SSLConfiguration />
             {showNewDiskManagementUI ? (
               // This form is hidden if Disk and Compute form is enabled, new form is on ./settings/compute-and-disk
@@ -75,7 +75,7 @@ const ProjectSettings: NextPageWithLayout = () => {
           <PoolingModesModal />
         </>
       ) : (
-        <PageContainer className="pb-12">
+        <PageContainer size="small" className="pb-12">
           <PageSection>
             <PageSectionContent className="space-y-4 md:space-y-8">
               <SettingsDatabaseEmptyStateLocal />
diff --git a/apps/studio/pages/project/[ref]/settings/general.tsx b/apps/studio/pages/project/[ref]/settings/general.tsx
index d99669a9f29c3..433e9053ee03e 100644
--- a/apps/studio/pages/project/[ref]/settings/general.tsx
+++ b/apps/studio/pages/project/[ref]/settings/general.tsx
@@ -48,7 +48,7 @@ const ProjectSettings: NextPageWithLayout = () => {
           <PageHeaderSummary>
             <PageHeaderTitle>Project Settings</PageHeaderTitle>
             <PageHeaderDescription>
-              Configure general options, domains, transfers, and project lifecycle.
+              General configuration, domains, ownership, and lifecycle
             </PageHeaderDescription>
           </PageHeaderSummary>
         </PageHeaderMeta>