diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx
index 2b2429cd33332..fde164a247cc5 100644
--- a/apps/studio/components/grid/components/header/Header.tsx
+++ b/apps/studio/components/grid/components/header/Header.tsx
@@ -2,7 +2,6 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import saveAs from 'file-saver'
 import { ArrowUp, ChevronDown, FileText, Trash } from 'lucide-react'
 import Link from 'next/link'
-import Papa from 'papaparse'
 import { ReactNode, useState } from 'react'
 import { toast } from 'sonner'
 
@@ -28,6 +27,7 @@ import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
 import {
   Button,
   cn,
+  copyToClipboard,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -37,6 +37,7 @@ import {
 } from 'ui'
 import { ExportDialog } from './ExportDialog'
 import { FilterPopover } from './filter/FilterPopover'
+import { formatRowsForCSV } from './Header.utils'
 import { SortPopover } from './sort/SortPopover'
 // [Joshen] CSV exports require this guard as a fail-safe if the table is
 // just too large for a browser to keep all the rows in memory before
@@ -281,6 +282,25 @@ const RowHeader = () => {
     })
   }
 
+  const onCopyRows = (type: 'csv' | 'json' | 'sql') => {
+    const rows = allRows.filter((x) => snap.selectedRows.has(x.idx))
+
+    if (type === 'csv') {
+      const csv = formatRowsForCSV({
+        rows,
+        columns: snap.table!.columns.map((column) => column.name),
+      })
+      copyToClipboard(csv)
+    } else if (type === 'sql') {
+      const sqlStatements = formatTableRowsToSQL(snap.table, rows)
+      copyToClipboard(sqlStatements)
+    } else if (type === 'json') {
+      copyToClipboard(JSON.stringify(rows))
+    }
+
+    toast.success('Copied rows to clipboard')
+  }
+
   const onRowsExportCSV = async () => {
     setIsExporting(true)
 
@@ -340,16 +360,8 @@ const RowHeader = () => {
       return
     }
 
-    const formattedRows = rows.map((row) => {
-      const formattedRow = row
-      Object.keys(row).map((column) => {
-        if (typeof row[column] === 'object' && row[column] !== null)
-          formattedRow[column] = JSON.stringify(formattedRow[column])
-      })
-      return formattedRow
-    })
-
-    const csv = Papa.unparse(formattedRows, {
+    const csv = formatRowsForCSV({
+      rows,
       columns: snap.table!.columns.map((column) => column.name),
     })
     const csvData = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
@@ -494,6 +506,42 @@ const RowHeader = () => {
                 : `Delete ${snap.selectedRows.size} row`}
           </ButtonTooltip>
         )}
+
+        {!snap.allRowsSelected ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="default"
+                size="tiny"
+                iconRight={<ChevronDown />}
+                loading={isExporting}
+                disabled={isExporting}
+              >
+                Copy
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-40">
+              <DropdownMenuItem onClick={() => onCopyRows('csv')}>Copy as CSV</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onCopyRows('sql')}>Copy as SQL</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onCopyRows('json')}>Copy as JSON</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <ButtonTooltip
+            disabled
+            type="default"
+            tooltip={{
+              content: {
+                side: 'bottom',
+                className: 'w-64 text-center',
+                text: 'Copy to clipboard is not supported while all rows in the table are selected',
+              },
+            }}
+          >
+            Copy
+          </ButtonTooltip>
+        )}
+
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
diff --git a/apps/studio/components/grid/components/header/Header.utils.ts b/apps/studio/components/grid/components/header/Header.utils.ts
new file mode 100644
index 0000000000000..696b7874610b8
--- /dev/null
+++ b/apps/studio/components/grid/components/header/Header.utils.ts
@@ -0,0 +1,14 @@
+import Papa from 'papaparse'
+
+export const formatRowsForCSV = ({ rows, columns }: { rows: any[]; columns: string[] }) => {
+  const formattedRows = rows.map((row) => {
+    const formattedRow = row
+    Object.keys(row).map((column) => {
+      if (typeof row[column] === 'object' && row[column] !== null)
+        formattedRow[column] = JSON.stringify(formattedRow[column])
+    })
+    return formattedRow
+  })
+  const csv = Papa.unparse(formattedRows, { columns })
+  return csv
+}
diff --git a/apps/studio/components/grid/components/menu/RowContextMenu.tsx b/apps/studio/components/grid/components/menu/RowContextMenu.tsx
index 14a457eceb699..d336e2002d9d2 100644
--- a/apps/studio/components/grid/components/menu/RowContextMenu.tsx
+++ b/apps/studio/components/grid/components/menu/RowContextMenu.tsx
@@ -1,6 +1,7 @@
-import { Clipboard, Edit, Trash } from 'lucide-react'
+import { ChevronRight, Clipboard, Edit, Trash } from 'lucide-react'
 import { useCallback } from 'react'
-import { Item, ItemParams, Menu } from 'react-contexify'
+import { Item, ItemParams, Menu, Separator, Submenu } from 'react-contexify'
+import { toast } from 'sonner'
 
 import type { SupaRow } from 'components/grid/types'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
@@ -48,27 +49,50 @@ const RowContextMenu = ({ rows }: RowContextMenuProps) => {
       const text = formatClipboardValue(value)
 
       copyToClipboard(text)
+      toast.success('Copied cell value to clipboard')
     },
     [rows, snap.gridColumns, snap.selectedCellPosition]
   )
 
+  const onCopyRowContent = useCallback(
+    (p: ItemParams) => {
+      const { props } = p
+      const { rowIdx } = props
+      const row = rows[rowIdx]
+      copyToClipboard(JSON.stringify(row))
+      toast.success('Copied row to clipboard')
+    },
+    [rows]
+  )
+
   return (
-    <>
-      <Menu id={ROW_CONTEXT_MENU_ID} animation={false}>
+    <Menu id={ROW_CONTEXT_MENU_ID} animation={false} className="!min-w-36">
+      <Submenu
+        label={
+          <div className="flex items-center space-x-2">
+            <Clipboard size={12} />
+            <span className="text-xs">Copy</span>
+          </div>
+        }
+        arrow={<ChevronRight size={12} />}
+      >
         <Item onClick={onCopyCellContent}>
-          <Clipboard size={14} />
-          <span className="ml-2 text-xs">Copy cell content</span>
-        </Item>
-        <Item onClick={onEditRowClick} hidden={!snap.editable} data="edit">
-          <Edit size={14} />
-          <span className="ml-2 text-xs">Edit row</span>
+          <span className="ml-2 text-xs">Copy cell</span>
         </Item>
-        <Item onClick={onDeleteRow} hidden={!snap.editable} data="delete">
-          <Trash size={14} stroke="red" />
-          <span className="ml-2 text-xs">Delete row</span>
+        <Item onClick={onCopyRowContent}>
+          <span className="ml-2 text-xs">Copy row</span>
         </Item>
-      </Menu>
-    </>
+      </Submenu>
+      <Item onClick={onEditRowClick} hidden={!snap.editable} data="edit">
+        <Edit size={12} />
+        <span className="ml-2 text-xs">Edit row</span>
+      </Item>
+      <Separator />
+      <Item onClick={onDeleteRow} hidden={!snap.editable} data="delete">
+        <Trash size={12} />
+        <span className="ml-2 text-xs">Delete row</span>
+      </Item>
+    </Menu>
   )
 }
 export default RowContextMenu
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
index ae512e6e27575..9c1826ef9b62b 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
@@ -12,6 +12,11 @@ import { Eye, EyeOff, MinusCircle } from 'lucide-react'
 import { DuplicateSecretWarningModal } from './DuplicateSecretWarningModal'
 import {
   Button,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
@@ -149,91 +154,93 @@ const AddNewSecretForm = () => {
   }
 
   return (
-    <Panel>
-      <Panel.Content className="grid gap-4">
-        <h2 className="text-sm">Add new secrets</h2>
-        <Form_Shadcn_ {...form}>
-          <form className="w-full" onSubmit={form.handleSubmit(onSubmit)}>
-            {fields.map((fieldItem, index) => (
-              <div key={fieldItem.id} className="grid grid-cols-[1fr_1fr_auto] gap-4 mb-4">
-                <FormField_Shadcn_
-                  control={form.control}
-                  name={`secrets.${index}.name`}
-                  render={({ field }) => (
-                    <FormItem_Shadcn_ className="w-full">
-                      <FormLabel_Shadcn_>Key</FormLabel_Shadcn_>
-                      <FormControl_Shadcn_>
-                        <Input
-                          {...field}
-                          placeholder="e.g. CLIENT_KEY"
-                          onPaste={(e) => handlePaste(e.nativeEvent)}
-                        />
-                      </FormControl_Shadcn_>
-                      <FormMessage_Shadcn_ />
-                    </FormItem_Shadcn_>
-                  )}
-                />
-                <FormField_Shadcn_
-                  control={form.control}
-                  name={`secrets.${index}.value`}
-                  render={({ field }) => (
-                    <FormItem_Shadcn_ className="w-full relative">
-                      <FormLabel_Shadcn_>Value</FormLabel_Shadcn_>
-                      <FormControl_Shadcn_>
-                        <Input
-                          {...field}
-                          type={showSecretValue ? 'text' : 'password'}
-                          actions={
-                            <div className="mr-1">
-                              <Button
-                                type="text"
-                                className="px-1"
-                                icon={showSecretValue ? <EyeOff /> : <Eye />}
-                                onClick={() => setShowSecretValue(!showSecretValue)}
-                              />
-                            </div>
-                          }
-                        />
-                      </FormControl_Shadcn_>
-                      <FormMessage_Shadcn_ />
-                    </FormItem_Shadcn_>
-                  )}
-                />
-
-                <Button
-                  type="default"
-                  className="h-[34px] mt-6"
-                  icon={<MinusCircle />}
-                  onClick={() => (fields.length > 1 ? remove(index) : form.reset(defaultValues))}
-                />
-              </div>
-            ))}
-
-            <Button
-              type="default"
-              onClick={() => {
-                const formValues = form.getValues('secrets')
-                const isEmptyForm = formValues.every((field) => !field.name && !field.value)
-                if (isEmptyForm) {
-                  fields.forEach((_, index) => remove(index))
-                  append({ name: '', value: '' })
-                } else {
-                  append({ name: '', value: '' })
-                }
-              }}
-            >
-              Add another
-            </Button>
-
-            <div className="flex items-center gap-2 col-span-2 -mx-6 px-6 border-t pt-4 mt-4">
+    <>
+      <Form_Shadcn_ {...form}>
+        <form className="w-full" onSubmit={form.handleSubmit(onSubmit)}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Add new secrets</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {fields.map((fieldItem, index) => (
+                <div key={fieldItem.id} className="grid grid-cols-[1fr_1fr_auto] gap-4 mb-4">
+                  <FormField_Shadcn_
+                    control={form.control}
+                    name={`secrets.${index}.name`}
+                    render={({ field }) => (
+                      <FormItem_Shadcn_ className="w-full">
+                        <FormLabel_Shadcn_>Key</FormLabel_Shadcn_>
+                        <FormControl_Shadcn_>
+                          <Input
+                            {...field}
+                            placeholder="e.g. CLIENT_KEY"
+                            onPaste={(e) => handlePaste(e.nativeEvent)}
+                          />
+                        </FormControl_Shadcn_>
+                        <FormMessage_Shadcn_ />
+                      </FormItem_Shadcn_>
+                    )}
+                  />
+                  <FormField_Shadcn_
+                    control={form.control}
+                    name={`secrets.${index}.value`}
+                    render={({ field }) => (
+                      <FormItem_Shadcn_ className="w-full relative">
+                        <FormLabel_Shadcn_>Value</FormLabel_Shadcn_>
+                        <FormControl_Shadcn_>
+                          <Input
+                            {...field}
+                            type={showSecretValue ? 'text' : 'password'}
+                            actions={
+                              <div className="mr-1">
+                                <Button
+                                  type="text"
+                                  className="px-1"
+                                  icon={showSecretValue ? <EyeOff /> : <Eye />}
+                                  onClick={() => setShowSecretValue(!showSecretValue)}
+                                />
+                              </div>
+                            }
+                          />
+                        </FormControl_Shadcn_>
+                        <FormMessage_Shadcn_ />
+                      </FormItem_Shadcn_>
+                    )}
+                  />
+
+                  <Button
+                    type="default"
+                    className="h-[34px] mt-6"
+                    icon={<MinusCircle />}
+                    onClick={() => (fields.length > 1 ? remove(index) : form.reset(defaultValues))}
+                  />
+                </div>
+              ))}
+
+              <Button
+                type="default"
+                onClick={() => {
+                  const formValues = form.getValues('secrets')
+                  const isEmptyForm = formValues.every((field) => !field.name && !field.value)
+                  if (isEmptyForm) {
+                    fields.forEach((_, index) => remove(index))
+                    append({ name: '', value: '' })
+                  } else {
+                    append({ name: '', value: '' })
+                  }
+                }}
+              >
+                Add another
+              </Button>
+            </CardContent>
+            <CardFooter className="justify-end space-x-2">
               <Button type="primary" htmlType="submit" disabled={isCreating} loading={isCreating}>
                 {isCreating ? 'Saving...' : 'Save'}
               </Button>
-            </div>
-          </form>
-        </Form_Shadcn_>
-      </Panel.Content>
-
+            </CardFooter>
+          </Card>
+        </form>
+      </Form_Shadcn_>
       <DuplicateSecretWarningModal
         visible={!!duplicateSecretName}
         onCancel={handleCancelDuplicate}
@@ -241,7 +248,7 @@ const AddNewSecretForm = () => {
         isCreating={isCreating}
         secretName={duplicateSecretName}
       />
-    </Panel>
+    </>
   )
 }
 
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx
index 4821b1a3093d7..7bdc4c9ef7ead 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx
@@ -6,6 +6,7 @@ import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import type { ProjectSecret } from 'data/secrets/secrets-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { TimestampInfo } from 'ui-patterns'
+import { TableCell, TableRow } from 'ui'
 
 interface EdgeFunctionSecretProps {
   secret: ProjectSecret
@@ -19,28 +20,31 @@ const EdgeFunctionSecret = ({ secret, onSelectDelete }: EdgeFunctionSecretProps)
   const isReservedSecret = !!secret.name.match(/^(SUPABASE_).*/)
 
   return (
-    <Table.tr>
-      <Table.td>
+    <TableRow>
+      <TableCell>
         <p className="truncate py-2">{secret.name}</p>
-      </Table.td>
-      <Table.td>
-        <p className="font-mono text-sm max-w-96 truncate" title={secret.value}>
+      </TableCell>
+      <TableCell>
+        <p
+          className="font-mono text-sm max-w-96 truncate text-foreground-light"
+          title={secret.value}
+        >
           {secret.value}
         </p>
-      </Table.td>
-      <Table.td>
+      </TableCell>
+      <TableCell>
         {!!secret.updated_at ? (
           <TimestampInfo
             displayAs="utc"
             utcTimestamp={secret.updated_at}
             labelFormat="DD MMM YYYY HH:mm:ss (ZZ)"
-            className="!text-sm"
+            className="!text-sm text-foreground-light"
           />
         ) : (
           '-'
         )}
-      </Table.td>
-      <Table.td>
+      </TableCell>
+      <TableCell>
         <div className="flex items-center justify-end">
           <ButtonTooltip
             type="text"
@@ -60,8 +64,8 @@ const EdgeFunctionSecret = ({ secret, onSelectDelete }: EdgeFunctionSecretProps)
             }}
           />
         </div>
-      </Table.td>
-    </Table.tr>
+      </TableCell>
+    </TableRow>
   )
 }
 
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx
index 4aba64bac4e89..5312e2611d62f 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx
@@ -4,14 +4,23 @@ import { useState } from 'react'
 import { toast } from 'sonner'
 
 import { useParams } from 'common'
-import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
 import NoPermission from 'components/ui/NoPermission'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useSecretsDeleteMutation } from 'data/secrets/secrets-delete-mutation'
 import { ProjectSecret, useSecretsQuery } from 'data/secrets/secrets-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { Badge, Separator } from 'ui'
+import {
+  Badge,
+  Separator,
+  Table,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableCell,
+  TableBody,
+  Card,
+} from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import AddNewSecretForm from './AddNewSecretForm'
@@ -43,15 +52,15 @@ const EdgeFunctionSecrets = () => {
       : data ?? []
 
   const headers = [
-    <Table.th key="secret-name">Name</Table.th>,
-    <Table.th key="secret-value" className="flex items-center gap-x-2">
+    <TableHead key="secret-name">Name</TableHead>,
+    <TableHead key="secret-value" className="flex items-center gap-x-2">
       Digest{' '}
       <Badge color="scale" className="font-mono">
         SHA256
       </Badge>
-    </Table.th>,
-    <Table.th key="secret-updated-at">Updated at</Table.th>,
-    <Table.th key="actions" />,
+    </TableHead>,
+    <TableHead key="secret-updated-at">Updated at</TableHead>,
+    <TableHead key="actions" />,
   ]
 
   return (
@@ -60,14 +69,13 @@ const EdgeFunctionSecrets = () => {
       {isError && <AlertError error={error} subject="Failed to retrieve project secrets" />}
       {isSuccess && (
         <>
-          {!canUpdateSecrets ? (
-            <NoPermission resourceText="manage this project's edge function secrets" />
-          ) : (
-            <div className="grid gap-5">
+          <div className="mb-6">
+            {!canUpdateSecrets ? (
+              <NoPermission resourceText="manage this project's edge function secrets" />
+            ) : (
               <AddNewSecretForm />
-              <Separator />
-            </div>
-          )}
+            )}
+          </div>
           {canUpdateSecrets && !canReadSecrets ? (
             <NoPermission resourceText="view this project's edge function secrets" />
           ) : canReadSecrets ? (
@@ -83,11 +91,13 @@ const EdgeFunctionSecrets = () => {
                 />
               </div>
 
-              <div className="w-full overflow-hidden overflow-x-auto">
-                <Table
-                  head={headers}
-                  body={
-                    secrets.length > 0 ? (
+              <Card>
+                <Table>
+                  <TableHeader>
+                    <TableRow>{headers}</TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {secrets.length > 0 ? (
                       secrets.map((secret) => (
                         <EdgeFunctionSecret
                           key={secret.name}
@@ -96,27 +106,27 @@ const EdgeFunctionSecrets = () => {
                         />
                       ))
                     ) : secrets.length === 0 && searchString.length > 0 ? (
-                      <Table.tr>
-                        <Table.td colSpan={headers.length}>
+                      <TableRow>
+                        <TableCell colSpan={headers.length}>
                           <p className="text-sm text-foreground">No results found</p>
                           <p className="text-sm text-foreground-light">
                             Your search for "{searchString}" did not return any results
                           </p>
-                        </Table.td>
-                      </Table.tr>
+                        </TableCell>
+                      </TableRow>
                     ) : (
-                      <Table.tr>
-                        <Table.td colSpan={headers.length}>
+                      <TableRow>
+                        <TableCell colSpan={headers.length}>
                           <p className="text-sm text-foreground">No secrets created</p>
                           <p className="text-sm text-foreground-light">
                             There are no secrets associated with your project yet
                           </p>
-                        </Table.td>
-                      </Table.tr>
-                    )
-                  }
-                />
-              </div>
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </TableBody>
+                </Table>
+              </Card>
             </div>
           ) : null}
         </>
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
index 55fae1e47a542..186616f953ee6 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
@@ -8,7 +8,7 @@ import Table from 'components/to-be-cleaned/Table'
 import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
 import type { EdgeFunctionsResponse } from 'data/edge-functions/edge-functions-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { copyToClipboard, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { copyToClipboard, TableCell, TableRow, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 interface EdgeFunctionsListItemProps {
   function: EdgeFunctionsResponse
@@ -33,18 +33,19 @@ export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemP
       : functionUrl
 
   return (
-    <Table.tr
+    <TableRow
       key={item.id}
       onClick={() => {
         router.push(`/project/${ref}/functions/${item.slug}`)
       }}
+      className="cursor-pointer"
     >
-      <Table.td>
+      <TableCell>
         <div className="flex items-center gap-2">
           <p className="text-sm text-foreground">{item.name}</p>
         </div>
-      </Table.td>
-      <Table.td>
+      </TableCell>
+      <TableCell>
         <div className="text-xs text-foreground-light flex gap-2 items-center truncate">
           <p title={endpoint} className="font-mono truncate hidden md:inline max-w-[30rem]">
             {endpoint}
@@ -75,13 +76,13 @@ export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemP
             )}
           </button>
         </div>
-      </Table.td>
-      <Table.td className="hidden 2xl:table-cell">
+      </TableCell>
+      <TableCell className="hidden 2xl:table-cell">
         <p className="text-foreground-light">
           {dayjs(item.created_at).format('DD MMM, YYYY HH:mm')}
         </p>
-      </Table.td>
-      <Table.td className="lg:table-cell">
+      </TableCell>
+      <TableCell className="lg:table-cell">
         <Tooltip>
           <TooltipTrigger>
             <div className="flex items-center space-x-2">
@@ -92,10 +93,10 @@ export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemP
             Last updated on {dayjs(item.updated_at).format('DD MMM, YYYY HH:mm')}
           </TooltipContent>
         </Tooltip>
-      </Table.td>
-      <Table.td className="lg:table-cell">
+      </TableCell>
+      <TableCell className="lg:table-cell">
         <p className="text-foreground-light">{item.version}</p>
-      </Table.td>
-    </Table.tr>
+      </TableCell>
+    </TableRow>
   )
 }
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx
index 0294019aa77c5..6f234884903ba 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx
@@ -4,18 +4,23 @@ import { useState } from 'react'
 import { toast } from 'sonner'
 
 import PolicyEditorModal from 'components/interfaces/Auth/Policies/PolicyEditorModal'
+import {
+  ScaffoldSection,
+  ScaffoldSectionDescription,
+  ScaffoldSectionTitle,
+} from 'components/layouts/Scaffold'
 import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import { useDatabasePolicyCreateMutation } from 'data/database-policies/database-policy-create-mutation'
 import { useDatabasePolicyDeleteMutation } from 'data/database-policies/database-policy-delete-mutation'
 import { useDatabasePolicyUpdateMutation } from 'data/database-policies/database-policy-update-mutation'
 import { useBucketsQuery } from 'data/storage/buckets-query'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { Loader } from 'lucide-react'
 import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog'
 import { formatPoliciesForStorage } from '../Storage.utils'
 import StoragePoliciesBucketRow from './StoragePoliciesBucketRow'
 import StoragePoliciesEditPolicyModal from './StoragePoliciesEditPolicyModal'
 import StoragePoliciesPlaceholder from './StoragePoliciesPlaceholder'
-import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 
 const StoragePolicies = () => {
   const { data: project } = useSelectedProjectQuery()
@@ -176,67 +181,72 @@ const StoragePolicies = () => {
 
   return (
     <div className="flex min-h-full w-full flex-col">
-      <h3 className="text-xl">Storage policies</h3>
-      <p className="mt-2 text-sm text-foreground-light">
-        Safeguard your files with policies that define the operations allowed for your users at the
-        bucket level.
-      </p>
-
       {isLoading ? (
         <div className="flex h-full items-center justify-center">
           <Loader className="animate-spin" size={16} />
         </div>
       ) : (
-        <div className="mt-4 space-y-4">
-          {buckets.length === 0 && <StoragePoliciesPlaceholder />}
-
-          {/* Sections for policies grouped by buckets */}
-          {buckets.map((bucket) => {
-            const bucketPolicies = get(
-              find(formattedStorageObjectPolicies, { name: bucket.name }),
-              ['policies'],
-              []
-            ).sort((a: any, b: any) => a.name.localeCompare(b.name))
-
-            return (
+        <div>
+          <ScaffoldSection isFullWidth>
+            <ScaffoldSectionTitle>Buckets</ScaffoldSectionTitle>
+            <ScaffoldSectionDescription className="mb-6">
+              Write policies for each bucket to control access to the bucket and its contents
+            </ScaffoldSectionDescription>
+            {buckets.length === 0 && <StoragePoliciesPlaceholder />}
+
+            {/* Sections for policies grouped by buckets */}
+            <div className="flex flex-col gap-y-4">
+              {buckets.map((bucket) => {
+                const bucketPolicies = get(
+                  find(formattedStorageObjectPolicies, { name: bucket.name }),
+                  ['policies'],
+                  []
+                ).sort((a: any, b: any) => a.name.localeCompare(b.name))
+
+                return (
+                  <StoragePoliciesBucketRow
+                    key={bucket.name}
+                    table="objects"
+                    label={bucket.name}
+                    bucket={bucket}
+                    policies={bucketPolicies}
+                    onSelectPolicyAdd={onSelectPolicyAdd}
+                    onSelectPolicyEdit={onSelectPolicyEdit}
+                    onSelectPolicyDelete={onSelectPolicyDelete}
+                  />
+                )
+              })}
+            </div>
+          </ScaffoldSection>
+
+          <ScaffoldSection isFullWidth>
+            <ScaffoldSectionTitle>Schema</ScaffoldSectionTitle>
+            <ScaffoldSectionDescription className="mb-6">
+              Write policies for the tables under the storage schema directly for greater control
+            </ScaffoldSectionDescription>
+
+            <div className="flex flex-col gap-y-4">
+              {/* Section for policies under storage.objects that are not tied to any buckets */}
               <StoragePoliciesBucketRow
-                key={bucket.name}
                 table="objects"
-                label={bucket.name}
-                bucket={bucket}
-                policies={bucketPolicies}
+                label="Other policies under storage.objects"
+                policies={ungroupedPolicies}
+                onSelectPolicyAdd={onSelectPolicyAdd}
+                onSelectPolicyEdit={onSelectPolicyEdit}
+                onSelectPolicyDelete={onSelectPolicyDelete}
+              />
+
+              {/* Section for policies under storage.buckets */}
+              <StoragePoliciesBucketRow
+                table="buckets"
+                label="Policies under storage.buckets"
+                policies={storageBucketPolicies}
                 onSelectPolicyAdd={onSelectPolicyAdd}
                 onSelectPolicyEdit={onSelectPolicyEdit}
                 onSelectPolicyDelete={onSelectPolicyDelete}
               />
-            )
-          })}
-
-          <div className="!mb-4 w-full border-b border-muted" />
-          <p className="text-sm text-foreground-light">
-            You may also write policies for the tables under the storage schema directly for greater
-            control
-          </p>
-
-          {/* Section for policies under storage.objects that are not tied to any buckets */}
-          <StoragePoliciesBucketRow
-            table="objects"
-            label="Other policies under storage.objects"
-            policies={ungroupedPolicies}
-            onSelectPolicyAdd={onSelectPolicyAdd}
-            onSelectPolicyEdit={onSelectPolicyEdit}
-            onSelectPolicyDelete={onSelectPolicyDelete}
-          />
-
-          {/* Section for policies under storage.buckets */}
-          <StoragePoliciesBucketRow
-            table="buckets"
-            label="Policies under storage.buckets"
-            policies={storageBucketPolicies}
-            onSelectPolicyAdd={onSelectPolicyAdd}
-            onSelectPolicyEdit={onSelectPolicyEdit}
-            onSelectPolicyDelete={onSelectPolicyDelete}
-          />
+            </div>
+          </ScaffoldSection>
         </div>
       )}
 
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx
index 178141b7c3485..26eb07822ced7 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx
@@ -4,6 +4,10 @@ import { Archive, Edit, MoreVertical, Trash } from 'lucide-react'
 import {
   Badge,
   Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -28,35 +32,33 @@ const PolicyRow = ({
 }: PolicyRowProps) => {
   const { name, command } = policy
   return (
-    <div className="group">
-      <Panel.Content className="flex justify-between gap-2 border-b border-overlay py-4">
-        <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
-          <div className="font-mono text-xs text-foreground-lighter">{command}</div>
-          <div className="flex flex-col gap-2 lg:flex-row">
-            <span className="truncate text-sm text-foreground">{name}</span>
-          </div>
+    <CardContent className="group flex justify-between gap-2 border-b border-overlay py-4">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+        <div className="font-mono text-xs text-foreground-lighter">{command}</div>
+        <div className="flex flex-col gap-2 lg:flex-row">
+          <span className="truncate text-sm text-foreground">{name}</span>
         </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger>
-            <Button type="default" className="px-1.5" icon={<MoreVertical />} />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent side="bottom" align="end">
-            <DropdownMenuItem
-              className="gap-x-2"
-              onClick={() => onSelectPolicyEdit(policy, bucketName, table)}
-            >
-              <Edit size={14} />
-              <p>Edit</p>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem className="gap-x-2" onClick={() => onSelectPolicyDelete(policy)}>
-              <Trash size={14} />
-              <p>Delete</p>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </Panel.Content>
-    </div>
+      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button type="default" className="px-1.5" icon={<MoreVertical />} />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side="bottom" align="end">
+          <DropdownMenuItem
+            className="gap-x-2"
+            onClick={() => onSelectPolicyEdit(policy, bucketName, table)}
+          >
+            <Edit size={14} />
+            <p>Edit</p>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="gap-x-2" onClick={() => onSelectPolicyDelete(policy)}>
+            <Trash size={14} />
+            <p>Delete</p>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </CardContent>
   )
 }
 
@@ -69,39 +71,24 @@ const StoragePoliciesBucketRow = ({
   onSelectPolicyEdit = () => {},
   onSelectPolicyDelete = () => {},
 }: any) => {
-  const getFooterLabel = () => {
-    if (isEmpty(bucket))
-      return table === 'objects'
-        ? `${policies.length} polic${
-            policies.length > 1 ? 'ies' : 'y'
-          } that are not tied to any buckets`
-        : `${policies.length} polic${policies.length > 1 ? 'ies' : 'y'} that target your buckets`
-    return `${policies.length} polic${policies.length > 1 ? 'ies' : 'y'} in ${bucket.name}`
-  }
-
   return (
-    <Panel
-      title={[
-        <div key={label} className="flex w-full items-center justify-between">
-          <div className="flex items-center space-x-4">
-            <Archive className="text-foreground-light" size={14} />
-            <h4 className="m-0 text-lg">
-              <span>{label}</span>
-            </h4>
-            {bucket.public && <Badge variant="warning">Public</Badge>}
-          </div>
-          <Button type="outline" onClick={() => onSelectPolicyAdd(bucket.name, table)}>
-            New policy
-          </Button>
-        </div>,
-      ]}
-    >
+    <Card>
+      <CardHeader className="flex flex-row w-full items-center justify-between gap-0 space-y-0">
+        <div className="flex items-center gap-3">
+          <Archive className="text-foreground-light" size={16} strokeWidth={1.5} />
+          <CardTitle>{label}</CardTitle>
+          {bucket.public && <Badge variant="warning">Public</Badge>}
+        </div>
+        <Button type="outline" onClick={() => onSelectPolicyAdd(bucket.name, table)}>
+          New policy
+        </Button>
+      </CardHeader>
       {policies.length === 0 ? (
-        <div className="p-4 px-6">
+        <CardContent>
           <p className="text-sm text-foreground-lighter">No policies created yet</p>
-        </div>
+        </CardContent>
       ) : (
-        <div className="grid grid-cols-1 divide-y [[data-theme*=dark]_&]:divide-dark">
+        <div>
           {policies.map((policy: any) => (
             <PolicyRow
               key={policy.name}
@@ -112,14 +99,9 @@ const StoragePoliciesBucketRow = ({
               onSelectPolicyDelete={onSelectPolicyDelete}
             />
           ))}
-          {policies.length !== 0 ? (
-            <div className="px-6 py-2">
-              <p className="text-sm text-foreground-light">{getFooterLabel()}</p>
-            </div>
-          ) : null}
         </div>
       )}
-    </Panel>
+    </Card>
   )
 }
 
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesPlaceholder.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesPlaceholder.tsx
index 4dd36cabfa931..50bee986b545d 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesPlaceholder.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesPlaceholder.tsx
@@ -1,23 +1,13 @@
-import Panel from 'components/ui/Panel'
-import { Archive } from 'lucide-react'
+import { CardContent, Card } from 'ui'
 
 const StoragePoliciesPlaceholder = () => (
-  <Panel
-    title={[
-      <div key="storagePlaceholder" className="flex w-full items-center justify-between">
-        <div className="flex items-center space-x-4">
-          <Archive size="18" />
-          <h4>Bucket policies</h4>
-        </div>
-      </div>,
-    ]}
-  >
-    <div className="p-4 px-6">
+  <Card>
+    <CardContent>
       <p className="text-sm text-foreground-light">
         Create a bucket first to start writing policies!
       </p>
-    </div>
-  </Panel>
+    </CardContent>
+  </Card>
 )
 
 export default StoragePoliciesPlaceholder
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
index e8fbe4a986a93..eb16fee9daa49 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
@@ -9,11 +9,15 @@ import * as z from 'zod'
 
 import { useParams } from 'common'
 import { useIsProjectActive } from 'components/layouts/ProjectLayout/ProjectContext'
+import {
+  ScaffoldSection,
+  ScaffoldSectionDescription,
+  ScaffoldSectionTitle,
+} from 'components/layouts/Scaffold'
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
+import { DocsButton } from 'components/ui/DocsButton'
 import NoPermission from 'components/ui/NoPermission'
-import Panel from 'components/ui/Panel'
 import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
 import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query'
 import { useProjectStorageConfigUpdateUpdateMutation } from 'data/config/project-storage-config-update-mutation'
@@ -24,10 +28,12 @@ import {
   AlertDescription_Shadcn_,
   Alert_Shadcn_,
   Button,
+  Card,
+  CardContent,
+  CardFooter,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   Form_Shadcn_,
-  Separator,
   Switch,
   WarningIcon,
 } from 'ui'
@@ -102,90 +108,87 @@ export const S3Connection = () => {
 
   return (
     <>
-      <Form_Shadcn_ {...form}>
-        <form id="s3-connection-form" onSubmit={form.handleSubmit(onSubmit)}>
-          <FormHeader
-            title="S3 Connection"
-            description="Connect to your bucket using any S3-compatible service via the S3 protocol"
-            docsUrl="https://supabase.com/docs/guides/storage/s3/authentication"
-          />
-          {projectIsLoading ? (
-            <GenericSkeletonLoader />
-          ) : isProjectActive ? (
-            <Panel className="!mb-0">
-              <FormField_Shadcn_
-                name="s3ConnectionEnabled"
-                control={form.control}
-                render={({ field }) => (
-                  <FormItemLayout
-                    layout="horizontal"
-                    className="px-8 py-8 [&>*>label]:text-foreground"
-                    label="Enable connection via S3 protocol"
-                    description="Allow clients to connect to Supabase Storage via the S3 protocol"
-                  >
-                    <FormControl_Shadcn_>
-                      <Switch
-                        size="large"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                        disabled={!isSuccessStorageConfig || field.disabled}
-                      />
-                    </FormControl_Shadcn_>
-                  </FormItemLayout>
-                )}
-              />
-
-              {isErrorStorageConfig && (
-                <div className="px-8 pb-8">
-                  <AlertError
-                    subject="Failed to retrieve storage configuration"
-                    error={configError}
+      <ScaffoldSection isFullWidth>
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <ScaffoldSectionTitle>S3 Connection</ScaffoldSectionTitle>
+            <ScaffoldSectionDescription>
+              Connect to your bucket using any S3-compatible service via the S3 protocol
+            </ScaffoldSectionDescription>
+          </div>
+          <DocsButton href="https://supabase.com/docs/guides/storage/s3/authentication" />
+        </div>
+        <Form_Shadcn_ {...form}>
+          <form id="s3-connection-form" onSubmit={form.handleSubmit(onSubmit)}>
+            {projectIsLoading ? (
+              <GenericSkeletonLoader />
+            ) : isProjectActive ? (
+              <Card>
+                <CardContent className="pt-6">
+                  <FormField_Shadcn_
+                    name="s3ConnectionEnabled"
+                    control={form.control}
+                    render={({ field }) => (
+                      <FormItemLayout
+                        layout="horizontal"
+                        className="[&>*>label]:text-foreground"
+                        label="Enable connection via S3 protocol"
+                        description="Allow clients to connect to Supabase Storage via the S3 protocol"
+                      >
+                        <FormControl_Shadcn_>
+                          <Switch
+                            size="large"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            disabled={!isSuccessStorageConfig || field.disabled}
+                          />
+                        </FormControl_Shadcn_>
+                      </FormItemLayout>
+                    )}
                   />
-                </div>
-              )}
 
-              <Separator className="bg-border" />
-
-              <div className="flex flex-col gap-y-4 py-8">
-                <FormItemLayout
-                  layout="horizontal"
-                  className="px-8"
-                  label="Endpoint"
-                  isReactForm={false}
-                >
-                  <Input readOnly copy disabled value={s3connectionUrl} />
-                </FormItemLayout>
-                {!projectIsLoading && (
-                  <FormItemLayout
-                    layout="horizontal"
-                    className="px-8"
-                    label="Region"
-                    isReactForm={false}
-                  >
-                    <Input className="input-mono" copy disabled value={project?.region} />
-                  </FormItemLayout>
-                )}
-              </div>
+                  {isErrorStorageConfig && (
+                    <div className="px-8 pb-8">
+                      <AlertError
+                        subject="Failed to retrieve storage configuration"
+                        error={configError}
+                      />
+                    </div>
+                  )}
+                </CardContent>
 
-              <Separator />
+                <CardContent className="py-6">
+                  <div className="flex flex-col gap-y-4">
+                    <FormItemLayout layout="horizontal" label="Endpoint" isReactForm={false}>
+                      <Input readOnly copy disabled value={s3connectionUrl} />
+                    </FormItemLayout>
+                    {!projectIsLoading && (
+                      <FormItemLayout layout="horizontal" label="Region" isReactForm={false}>
+                        <Input className="input-mono" copy disabled value={project?.region} />
+                      </FormItemLayout>
+                    )}
+                  </div>
+                </CardContent>
 
-              <div className="flex items-center justify-between w-full gap-2 px-8 py-4">
-                {!canUpdateStorageSettings ? (
-                  <p className="text-sm text-foreground-light">
-                    You need additional permissions to update storage settings
-                  </p>
-                ) : (
-                  <div />
+                {!canUpdateStorageSettings && (
+                  <CardContent className="pt-0">
+                    <p className="text-sm text-foreground-light">
+                      You need additional permissions to update storage settings
+                    </p>
+                  </CardContent>
                 )}
-                <div className="flex gap-2">
-                  <Button
-                    type="default"
-                    htmlType="reset"
-                    onClick={() => form.reset()}
-                    disabled={!form.formState.isDirty || !canUpdateStorageSettings || isUpdating}
-                  >
-                    Cancel
-                  </Button>
+
+                <CardFooter className="justify-end space-x-2">
+                  {form.formState.isDirty && (
+                    <Button
+                      type="default"
+                      htmlType="reset"
+                      onClick={() => form.reset()}
+                      disabled={!form.formState.isDirty || !canUpdateStorageSettings || isUpdating}
+                    >
+                      Cancel
+                    </Button>
+                  )}
                   <Button
                     type="primary"
                     htmlType="submit"
@@ -194,34 +197,35 @@ export const S3Connection = () => {
                   >
                     Save
                   </Button>
+                </CardFooter>
+              </Card>
+            ) : (
+              <Alert_Shadcn_ variant="warning">
+                <WarningIcon />
+                <AlertTitle>Project is paused</AlertTitle>
+                <AlertDescription_Shadcn_>
+                  To connect to your S3 bucket, you need to restore your project.
+                </AlertDescription_Shadcn_>
+                <div className="mt-3 flex items-center space-x-2">
+                  <Button asChild type="default">
+                    <Link href={`/project/${projectRef}`}>Restore project</Link>
+                  </Button>
                 </div>
-              </div>
-            </Panel>
-          ) : (
-            <Alert_Shadcn_ variant="warning">
-              <WarningIcon />
-              <AlertTitle>Project is paused</AlertTitle>
-              <AlertDescription_Shadcn_>
-                To connect to your S3 bucket, you need to restore your project.
-              </AlertDescription_Shadcn_>
-              <div className="mt-3 flex items-center space-x-2">
-                <Button asChild type="default">
-                  <Link href={`/project/${projectRef}`}>Restore project</Link>
-                </Button>
-              </div>
-            </Alert_Shadcn_>
-          )}
-        </form>
-      </Form_Shadcn_>
-
-      <div>
-        <FormHeader
-          title="S3 Access Keys"
-          description="Manage your access keys for this project."
-          actions={
-            <CreateCredentialModal visible={openCreateCred} onOpenChange={setOpenCreateCred} />
-          }
-        />
+              </Alert_Shadcn_>
+            )}
+          </form>
+        </Form_Shadcn_>
+      </ScaffoldSection>
+      <ScaffoldSection isFullWidth>
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <ScaffoldSectionTitle>S3 Access Keys</ScaffoldSectionTitle>
+            <ScaffoldSectionDescription>
+              Manage your access keys for this project.
+            </ScaffoldSectionDescription>
+          </div>
+          <CreateCredentialModal visible={openCreateCred} onOpenChange={setOpenCreateCred} />
+        </div>
 
         {!canReadS3Credentials ? (
           <NoPermission resourceText="view this project's S3 access keys" />
@@ -286,7 +290,7 @@ export const S3Connection = () => {
             )}
           </>
         )}
-      </div>
+      </ScaffoldSection>
 
       <RevokeCredentialModal
         visible={openDeleteDialog}
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
index 6ce9a20fdadde..04336f56df9da 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
@@ -6,6 +6,7 @@ import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
+import { ScaffoldSection } from 'components/layouts/Scaffold'
 import AlertError from 'components/ui/AlertError'
 import { InlineLink } from 'components/ui/InlineLink'
 import NoPermission from 'components/ui/NoPermission'
@@ -18,11 +19,11 @@ import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization
 import { formatBytes } from 'lib/helpers'
 import {
   Button,
+  Card,
+  CardContent,
+  CardFooter,
   FormControl_Shadcn_,
   FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
   Form_Shadcn_,
   Input_Shadcn_,
   SelectContent_Shadcn_,
@@ -32,6 +33,7 @@ import {
   Select_Shadcn_,
   Switch,
 } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
   STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_CAPPED,
   STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_FREE_PLAN,
@@ -101,8 +103,6 @@ const StorageSettings = () => {
     }
   }, [organization])
 
-  const formattedMaxSizeBytes = `${new Intl.NumberFormat('en-US').format(maxBytes)} bytes`
-
   const FormSchema = z
     .object({
       fileSizeLimit: z.coerce.number(),
@@ -156,55 +156,50 @@ const StorageSettings = () => {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
-      {isLoading && <GenericSkeletonLoader />}
-      {isError && (
-        <AlertError error={error} subject="Failed to retrieve project's storage configuration" />
-      )}
-      {isSuccess && (
-        <form id={formId} className="" onSubmit={form.handleSubmit(onSubmit)}>
-          <div className="bg-surface-100  overflow-hidden border-muted rounded-md border shadow">
-            <div className="flex flex-col gap-0 divide-y divide-border">
-              <div className="grid grid-cols-12 gap-6 px-8 py-8 lg:gap-12">
-                <div className="relative flex flex-col col-span-12 gap-6 lg:col-span-4">
-                  <p className="text-sm">Upload file size limit</p>
-                </div>
-
-                <div className="relative flex flex-col col-span-12 gap-x-6 gap-y-2 lg:col-span-8">
-                  <div className="flex items-center gap-2">
-                    <div className="flex-grow">
-                      <FormField_Shadcn_
-                        control={form.control}
-                        name="fileSizeLimit"
-                        render={({ field }) => (
-                          <FormItem_Shadcn_>
-                            <FormLabel_Shadcn_ className="text-foreground-light hidden">
-                              size
-                            </FormLabel_Shadcn_>
-                            <FormControl_Shadcn_ className="col-span-8">
-                              <Input_Shadcn_
-                                type="number"
-                                {...field}
-                                className="w-full"
-                                disabled={isFreeTier || !canUpdateStorageSettings}
-                              />
-                            </FormControl_Shadcn_>
-                            <FormMessage_Shadcn_ className="col-start-5 col-span-8" />
-                          </FormItem_Shadcn_>
-                        )}
-                      />
-                    </div>
-                    <div className="flex-shrink-0">
-                      <FormField_Shadcn_
-                        control={form.control}
-                        name="unit"
-                        render={({ field }) => (
-                          <FormItem_Shadcn_>
-                            <FormLabel_Shadcn_ className="hidden">Unit</FormLabel_Shadcn_>
-                            <FormControl_Shadcn_ className="col-span-8">
+    <ScaffoldSection isFullWidth>
+      <Form_Shadcn_ {...form}>
+        {isLoading && <GenericSkeletonLoader />}
+        {isError && (
+          <AlertError error={error} subject="Failed to retrieve project's storage configuration" />
+        )}
+        {isSuccess && (
+          <form id={formId} className="" onSubmit={form.handleSubmit(onSubmit)}>
+            <Card>
+              <CardContent className="pt-6">
+                <FormField_Shadcn_
+                  control={form.control}
+                  name="fileSizeLimit"
+                  render={({ field }) => (
+                    <FormItemLayout
+                      layout="flex-row-reverse"
+                      label="Upload file size limit"
+                      description={
+                        <>
+                          {storageUnit !== StorageSizeUnits.BYTES && (
+                            <>
+                              Equivalent to {convertToBytes(limit, storageUnit).toLocaleString()}{' '}
+                              bytes.{' '}
+                            </>
+                          )}
+                          Maximum upload file size is {formatBytes(maxBytes)}.
+                        </>
+                      }
+                    >
+                      <FormControl_Shadcn_>
+                        <div className="flex items-center gap-2">
+                          <Input_Shadcn_
+                            type="number"
+                            {...field}
+                            className="w-full"
+                            disabled={isFreeTier || !canUpdateStorageSettings}
+                          />
+                          <FormField_Shadcn_
+                            control={form.control}
+                            name="unit"
+                            render={({ field: unitField }) => (
                               <Select_Shadcn_
-                                value={field.value}
-                                onValueChange={field.onChange}
+                                value={unitField.value}
+                                onValueChange={unitField.onChange}
                                 disabled={isFreeTier || !canUpdateStorageSettings}
                               >
                                 <SelectTrigger_Shadcn_ className="w-[180px]">
@@ -224,84 +219,80 @@ const StorageSettings = () => {
                                   ))}
                                 </SelectContent_Shadcn_>
                               </Select_Shadcn_>
-                            </FormControl_Shadcn_>
-                            <FormMessage_Shadcn_ />
-                          </FormItem_Shadcn_>
-                        )}
-                      />
-                    </div>
-                  </div>
-                  <p className="text-sm text-foreground-light">
-                    {storageUnit !== StorageSizeUnits.BYTES &&
-                      `Equivalent to ${convertToBytes(
-                        limit,
-                        storageUnit
-                      ).toLocaleString()} bytes. `}
-                    Maximum upload file size is {formatBytes(maxBytes)}.
-                  </p>
-                </div>
-              </div>
+                            )}
+                          />
+                        </div>
+                      </FormControl_Shadcn_>
+                    </FormItemLayout>
+                  )}
+                />
+              </CardContent>
 
-              <div className="grid grid-cols-12 gap-6 px-8 py-8 lg:gap-12">
-                <div className="relative flex flex-col col-span-12 gap-6 lg:col-span-4">
-                  <p className="text-sm">Enable Image Transformation</p>
-                </div>
-                <div className="relative flex flex-col col-span-12 gap-x-6 gap-y-2 lg:col-span-8">
-                  <div className="grid grid-cols-12 col-span-12 gap-2 items-center">
-                    <FormField_Shadcn_
-                      control={form.control}
-                      name="imageTransformationEnabled"
-                      render={({ field }) => (
+              <CardContent>
+                <FormField_Shadcn_
+                  control={form.control}
+                  name="imageTransformationEnabled"
+                  render={({ field }) => (
+                    <FormItemLayout
+                      layout="flex-row-reverse"
+                      label="Enable Image Transformation"
+                      description={
+                        <>
+                          Optimize and resize images on the fly.{' '}
+                          <InlineLink href="https://supabase.com/docs/guides/storage/serving/image-transformations">
+                            Learn more
+                          </InlineLink>
+                          .
+                        </>
+                      }
+                    >
+                      <FormControl_Shadcn_>
                         <Switch
                           size="large"
                           disabled={isFreeTier}
                           checked={field.value}
                           onCheckedChange={field.onChange}
                         />
-                      )}
-                    />
-                  </div>
-                  <p className="text-sm text-foreground-light">
-                    Optimize and resize images on the fly.{' '}
-                    <InlineLink href="https://supabase.com/docs/guides/storage/serving/image-transformations">
-                      Learn more
-                    </InlineLink>
-                    .
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            {isFreeTier && (
-              <div className="px-6 pb-6">
-                <UpgradeToPro
-                  primaryText="Free Plan has a fixed upload file size limit of 50 MB."
-                  secondaryText={`Upgrade to Pro Plan for a configurable upload file size limit of ${formatBytes(STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_UNCAPPED)} and unlock image transformations.`}
-                  source="storageSizeLimit"
-                />
-              </div>
-            )}
-            {isSpendCapOn && (
-              <div className="px-6 pb-6">
-                <UpgradeToPro
-                  buttonText="Disable Spend Cap"
-                  primaryText="Reduced max upload file size limit due to Spend Cap"
-                  secondaryText={`Disable your Spend Cap to allow file uploads of up to ${formatBytes(STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_UNCAPPED)}.`}
-                  source="storageSizeLimit"
+                      </FormControl_Shadcn_>
+                    </FormItemLayout>
+                  )}
                 />
-              </div>
-            )}
-            <div className="border-t border-overlay" />
-            <div className="flex justify-between px-8 py-4">
-              <div className="flex items-center justify-between w-full gap-2">
-                {!canUpdateStorageSettings ? (
+              </CardContent>
+
+              {isFreeTier && (
+                <CardContent className="pt-0">
+                  <UpgradeToPro
+                    primaryText="Free Plan has a fixed upload file size limit of 50 MB."
+                    secondaryText={`Upgrade to Pro Plan for a configurable upload file size limit of ${formatBytes(
+                      STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_UNCAPPED
+                    )} and unlock image transformations.`}
+                    source="storageSizeLimit"
+                  />
+                </CardContent>
+              )}
+              {isSpendCapOn && (
+                <CardContent className="pt-0">
+                  <UpgradeToPro
+                    buttonText="Disable Spend Cap"
+                    primaryText="Reduced max upload file size limit due to Spend Cap"
+                    secondaryText={`Disable your Spend Cap to allow file uploads of up to ${formatBytes(
+                      STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_UNCAPPED
+                    )}.`}
+                    source="storageSizeLimit"
+                  />
+                </CardContent>
+              )}
+
+              {!canUpdateStorageSettings && (
+                <CardContent className="pt-0">
                   <p className="text-sm text-foreground-light">
                     You need additional permissions to update storage settings
                   </p>
-                ) : (
-                  <div />
-                )}
-                <div className="flex gap-2">
+                </CardContent>
+              )}
+
+              <CardFooter className="justify-end space-x-2">
+                {form.formState.isDirty && (
                   <Button
                     type="default"
                     htmlType="reset"
@@ -310,21 +301,21 @@ const StorageSettings = () => {
                   >
                     Cancel
                   </Button>
-                  <Button
-                    type="primary"
-                    htmlType="submit"
-                    loading={isUpdating}
-                    disabled={!form.formState.isDirty || !canUpdateStorageSettings || isUpdating}
-                  >
-                    Save
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      )}
-    </Form_Shadcn_>
+                )}
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  loading={isUpdating}
+                  disabled={!canUpdateStorageSettings || isUpdating || !form.formState.isDirty}
+                >
+                  Save changes
+                </Button>
+              </CardFooter>
+            </Card>
+          </form>
+        )}
+      </Form_Shadcn_>
+    </ScaffoldSection>
   )
 }
 
diff --git a/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx b/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx
index 122ff258752b6..25f46fb6bdb37 100644
--- a/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx
@@ -13,23 +13,25 @@ const LoadingState = () => {
 
   return (
     <div className="w-full mx-auto">
-      <div className="max-w-7xl mx-auto flex items-center space-x-6 h-[184px]">
-        {isLoading ? (
-          <ShimmeringLoader className="h-9 w-40" />
-        ) : (
-          <h1 className="text-3xl">{projectName}</h1>
-        )}
+      <div className="px-8 border-b">
+        <div className="max-w-7xl mx-auto flex items-center space-x-6 h-[184px]">
+          {isLoading ? (
+            <ShimmeringLoader className="h-9 w-40" />
+          ) : (
+            <h1 className="text-3xl">{projectName}</h1>
+          )}
+        </div>
       </div>
-
-      <div className="w-full border-t mb-16" />
-
-      <div className="max-w-7xl mx-auto mb-16">
-        <ProjectUsageLoadingState />
+      <div className="px-8 py-16">
+        <div className="max-w-7xl mx-auto">
+          <ProjectUsageLoadingState />
+        </div>
       </div>
-
-      <div className="max-w-7xl mx-auto space-y-4">
-        <ShimmeringLoader className="w-40 h-7" />
-        <ShimmeringLoader className="w-full h-32" />
+      <div className="px-8">
+        <div className="max-w-7xl mx-auto space-y-4">
+          <ShimmeringLoader className="w-40 h-7" />
+          <ShimmeringLoader className="w-full h-32" />
+        </div>
       </div>
     </div>
   )
diff --git a/apps/studio/components/to-be-cleaned/Table.tsx b/apps/studio/components/to-be-cleaned/Table.tsx
index c8d9077505aad..17c0aa1db6f04 100644
--- a/apps/studio/components/to-be-cleaned/Table.tsx
+++ b/apps/studio/components/to-be-cleaned/Table.tsx
@@ -11,6 +11,9 @@ interface TableProps {
   style?: React.StyleHTMLAttributes<HTMLTableElement>
 }
 
+/**
+ * @deprecated Use `Table` from `ui` instead
+ */
 function Table({
   body,
   head,
@@ -45,6 +48,9 @@ interface ThProps {
   style?: React.CSSProperties
 }
 
+/**
+ * @deprecated Use `TableHeader` from `ui` instead
+ */
 const Th = ({ children, className, style }: PropsWithChildren<ThProps>) => {
   const classes = ['p-3 px-4 text-left']
   if (className) classes.push(className)
@@ -62,6 +68,9 @@ interface TrProps {
   onClick?: () => void
 }
 
+/**
+ * @deprecated Use `TableRow` from `ui` instead
+ */
 const Tr = ({ children, className, onClick, style, hoverable }: PropsWithChildren<TrProps>) => {
   let classes = [className]
   if (onClick || hoverable) classes.push('tr--link')
@@ -79,6 +88,9 @@ interface TdProps extends React.HTMLProps<HTMLTableCellElement> {
   align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined
 }
 
+/**
+ * @deprecated Use `TableCell` from `ui` instead
+ */
 const Td = ({ children, colSpan, className, style, ...rest }: PropsWithChildren<TdProps>) => {
   return (
     <td className={className} colSpan={colSpan} style={style} {...rest}>
diff --git a/apps/studio/pages/project/[ref]/functions/index.tsx b/apps/studio/pages/project/[ref]/functions/index.tsx
index c7e4b532550ff..7a76544467c92 100644
--- a/apps/studio/pages/project/[ref]/functions/index.tsx
+++ b/apps/studio/pages/project/[ref]/functions/index.tsx
@@ -11,14 +11,13 @@ import DefaultLayout from 'components/layouts/DefaultLayout'
 import EdgeFunctionsLayout from 'components/layouts/EdgeFunctionsLayout/EdgeFunctionsLayout'
 import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
-import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
 import { DocsButton } from 'components/ui/DocsButton'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
 import { IS_PLATFORM } from 'lib/constants'
 import type { NextPageWithLayout } from 'types'
-import { Button } from 'ui'
+import { Button, Table, TableHead, TableRow, TableHeader, TableBody, Card } from 'ui'
 
 const EdgeFunctionsPage: NextPageWithLayout = () => {
   const { ref } = useParams()
@@ -62,25 +61,28 @@ const EdgeFunctionsPage: NextPageWithLayout = () => {
               {isSuccess && (
                 <>
                   {hasFunctions ? (
-                    <Table
-                      head={
-                        <>
-                          <Table.th>Name</Table.th>
-                          <Table.th>URL</Table.th>
-                          <Table.th className="hidden 2xl:table-cell">Created</Table.th>
-                          <Table.th className="lg:table-cell">Last updated</Table.th>
-                          <Table.th className="lg:table-cell">Deployments</Table.th>
-                        </>
-                      }
-                      body={
-                        <>
-                          {functions.length > 0 &&
-                            functions.map((item) => (
-                              <EdgeFunctionsListItem key={item.id} function={item} />
-                            ))}
-                        </>
-                      }
-                    />
+                    <Card>
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>Name</TableHead>
+                            <TableHead>URL</TableHead>
+                            <TableHead className="hidden 2xl:table-cell">Created</TableHead>
+                            <TableHead className="lg:table-cell">Last updated</TableHead>
+                            <TableHead className="lg:table-cell">Deployments</TableHead>
+                          </TableRow>
+                        </TableHeader>
+
+                        <TableBody>
+                          <>
+                            {functions.length > 0 &&
+                              functions.map((item) => (
+                                <EdgeFunctionsListItem key={item.id} function={item} />
+                              ))}
+                          </>
+                        </TableBody>
+                      </Table>
+                    </Card>
                   ) : (
                     <FunctionsEmptyState />
                   )}
diff --git a/apps/studio/pages/project/[ref]/functions/secrets.tsx b/apps/studio/pages/project/[ref]/functions/secrets.tsx
index ebc487a755174..d9df3ec1e5202 100644
--- a/apps/studio/pages/project/[ref]/functions/secrets.tsx
+++ b/apps/studio/pages/project/[ref]/functions/secrets.tsx
@@ -3,14 +3,16 @@ import { FunctionsSecretsEmptyStateLocal } from 'components/interfaces/Functions
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import EdgeFunctionsLayout from 'components/layouts/EdgeFunctionsLayout/EdgeFunctionsLayout'
 import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
-import { ScaffoldContainer } from 'components/layouts/Scaffold'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { IS_PLATFORM } from 'lib/constants'
 import type { NextPageWithLayout } from 'types'
 
 const SecretsPage: NextPageWithLayout = () => {
   return (
-    <ScaffoldContainer size="large" className="pt-6">
-      {IS_PLATFORM ? <EdgeFunctionSecrets /> : <FunctionsSecretsEmptyStateLocal />}
+    <ScaffoldContainer size="large">
+      <ScaffoldSection isFullWidth>
+        {IS_PLATFORM ? <EdgeFunctionSecrets /> : <FunctionsSecretsEmptyStateLocal />}
+      </ScaffoldSection>
     </ScaffoldContainer>
   )
 }
diff --git a/apps/studio/pages/project/[ref]/index.tsx b/apps/studio/pages/project/[ref]/index.tsx
index 5c0b6881ba1a5..1ca640ba44b64 100644
--- a/apps/studio/pages/project/[ref]/index.tsx
+++ b/apps/studio/pages/project/[ref]/index.tsx
@@ -94,7 +94,7 @@ const Home: NextPageWithLayout = () => {
 
   return (
     <div className="w-full">
-      <div className={cn('py-16 px-8', !isPaused && 'border-b border-muted ')}>
+      <div className={cn('py-16 ', !isPaused && 'border-b border-muted ')}>
         <div className="mx-auto max-w-7xl flex flex-col gap-y-4">
           <div className="flex flex-col md:flex-row md:items-center gap-6 justify-between w-full">
             <div className="flex flex-col md:flex-row md:items-end gap-3 w-full">
@@ -205,7 +205,7 @@ const Home: NextPageWithLayout = () => {
 
       {!isPaused && (
         <>
-          <div className="py-16 border-b border-muted px-8">
+          <div className="py-16 border-b border-muted">
             <div className="mx-auto max-w-7xl space-y-16">
               {IS_PLATFORM && project?.status !== PROJECT_STATUS.INACTIVE && (
                 <>{isNewProject ? <NewProjectPanel /> : <ProjectUsageSection />}</>
diff --git a/apps/studio/pages/project/[ref]/storage/policies.tsx b/apps/studio/pages/project/[ref]/storage/policies.tsx
index fe93cf7bc3547..5c96607f23cb6 100644
--- a/apps/studio/pages/project/[ref]/storage/policies.tsx
+++ b/apps/studio/pages/project/[ref]/storage/policies.tsx
@@ -2,18 +2,24 @@ import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { StoragePolicies } from 'components/interfaces/Storage'
 import type { NextPageWithLayout } from 'types'
+import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 
 const StoragePoliciesPage: NextPageWithLayout = () => {
-  return (
-    <div className="storage-container flex flex-grow p-4">
-      <StoragePolicies />
-    </div>
-  )
+  return <StoragePolicies />
 }
 
 StoragePoliciesPage.getLayout = (page) => (
   <DefaultLayout>
-    <StorageLayout title="Policies">{page}</StorageLayout>
+    <StorageLayout title="Policies">
+      <PageLayout
+        title="Storage policies"
+        subtitle="Safeguard your files with policies that define the operations allowed for your users at the
+        bucket level."
+      >
+        <ScaffoldContainer>{page}</ScaffoldContainer>
+      </PageLayout>
+    </StorageLayout>
   </DefaultLayout>
 )
 
diff --git a/apps/studio/pages/project/[ref]/storage/settings.tsx b/apps/studio/pages/project/[ref]/storage/settings.tsx
index c8a6d2ea3e1db..b204a9239c5bb 100644
--- a/apps/studio/pages/project/[ref]/storage/settings.tsx
+++ b/apps/studio/pages/project/[ref]/storage/settings.tsx
@@ -1,35 +1,27 @@
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
-import {
-  ScaffoldContainer,
-  ScaffoldDescription,
-  ScaffoldHeader,
-  ScaffoldTitle,
-} from 'components/layouts/Scaffold'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { StorageSettings } from 'components/interfaces/Storage'
 import { S3Connection } from 'components/interfaces/Storage/StorageSettings/S3Connection'
 import type { NextPageWithLayout } from 'types'
+import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
 
-const PageLayout: NextPageWithLayout = () => {
+const StorageSettingsPage: NextPageWithLayout = () => {
   return (
     <>
-      <ScaffoldContainer>
-        <ScaffoldHeader>
-          <ScaffoldTitle>Storage Settings</ScaffoldTitle>
-          <ScaffoldDescription>Configure your project's storage settings</ScaffoldDescription>
-        </ScaffoldHeader>
-      </ScaffoldContainer>
-      <ScaffoldContainer className="flex flex-col gap-10" bottomPadding>
-        <StorageSettings />
-        <S3Connection />
-      </ScaffoldContainer>
+      <StorageSettings />
+      <S3Connection />
     </>
   )
 }
 
-PageLayout.getLayout = (page) => (
+StorageSettingsPage.getLayout = (page) => (
   <DefaultLayout>
-    <StorageLayout title="Settings">{page}</StorageLayout>
+    <StorageLayout title="Settings">
+      <PageLayout title="Storage settings" subtitle="Configure your project's storage settings">
+        <ScaffoldContainer>{page}</ScaffoldContainer>
+      </PageLayout>
+    </StorageLayout>
   </DefaultLayout>
 )
-export default PageLayout
+export default StorageSettingsPage
diff --git a/apps/studio/styles/typography.scss b/apps/studio/styles/typography.scss
index 8a050348bec5b..453f3df940405 100644
--- a/apps/studio/styles/typography.scss
+++ b/apps/studio/styles/typography.scss
@@ -55,7 +55,7 @@
   }
 
   .heading-meta {
-    @apply text-xs font-mono uppercase tracking-wider font-medium text-foreground;
+    @apply text-xs font-mono uppercase tracking-wider font-medium text-foreground-light;
   }
 
   /* Text */
diff --git a/packages/ui/src/components/shadcn/ui/table.tsx b/packages/ui/src/components/shadcn/ui/table.tsx
index a812d5fbfd6d6..186fadfe9e6ff 100644
--- a/packages/ui/src/components/shadcn/ui/table.tsx
+++ b/packages/ui/src/components/shadcn/ui/table.tsx
@@ -64,7 +64,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-12 px-4 text-left align-middle font-medium text-foreground-muted [&:has([role=checkbox])]:pr-0',
+      'h-12 px-4 text-left align-middle heading-meta [&:has([role=checkbox])]:pr-0',
       className
     )}
     {...props}