diff --git a/apps/docs/public/humans.txt b/apps/docs/public/humans.txt
index 829cfbb138811..8a16b89d8aa10 100644
--- a/apps/docs/public/humans.txt
+++ b/apps/docs/public/humans.txt
@@ -176,6 +176,7 @@ Sean Oliver
 Sean Thompson
 Sergio Cioban Filho
 Shane E
+Shreekar Shetty
 Sreyas Udayavarman
 Stanislav M
 Stephen Morgan
diff --git a/apps/studio/components/interfaces/Auth/Users/UsersSearch.tsx b/apps/studio/components/interfaces/Auth/Users/UsersSearch.tsx
index 927fc640d2a44..524f6caa2c7e7 100644
--- a/apps/studio/components/interfaces/Auth/Users/UsersSearch.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UsersSearch.tsx
@@ -1,7 +1,29 @@
+import { AuthUsersSearchSubmittedEvent } from 'common/telemetry-constants'
 import { Search, X } from 'lucide-react'
-import { SetStateAction } from 'react'
+import { parseAsString, parseAsStringEnum, useQueryState } from 'nuqs'
+import { useState } from 'react'
+import {
+  Button,
+  SelectContent_Shadcn_,
+  SelectGroup_Shadcn_,
+  SelectItem_Shadcn_,
+  SelectSeparator_Shadcn_,
+  SelectTrigger_Shadcn_,
+  SelectValue_Shadcn_,
+  Select_Shadcn_,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  cn,
+} from 'ui'
+import { Input } from 'ui-patterns/DataInputs/Input'
 
-import { SpecificFilterColumn } from './Users.constants'
+import {
+  PHONE_NUMBER_LEFT_PREFIX_REGEX,
+  SpecificFilterColumn,
+  UUIDV4_LEFT_PREFIX_REGEX,
+} from './Users.constants'
+import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
 
 const getSearchPlaceholder = (column: SpecificFilterColumn): string => {
   switch (column) {
@@ -20,41 +42,63 @@ const getSearchPlaceholder = (column: SpecificFilterColumn): string => {
   }
 }
 
-import {
-  Button,
-  cn,
-  Select_Shadcn_,
-  SelectContent_Shadcn_,
-  SelectGroup_Shadcn_,
-  SelectItem_Shadcn_,
-  SelectSeparator_Shadcn_,
-  SelectTrigger_Shadcn_,
-  SelectValue_Shadcn_,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from 'ui'
-import { Input } from 'ui-patterns/DataInputs/Input'
-
 interface UsersSearchProps {
-  search: string
-  searchInvalid: boolean
-  specificFilterColumn: SpecificFilterColumn
-  setSearch: (value: SetStateAction<string>) => void
-  setFilterKeywords: (value: string) => void
-  setSpecificFilterColumn: (value: SpecificFilterColumn) => void
   improvedSearchEnabled?: boolean
+  telemetryProps: Omit<AuthUsersSearchSubmittedEvent['properties'], 'trigger'>
+  telemetryGroups: AuthUsersSearchSubmittedEvent['groups']
+  onSelectFilterColumn: (value: SpecificFilterColumn) => void
 }
 
 export const UsersSearch = ({
-  search,
-  searchInvalid,
-  specificFilterColumn,
-  setSearch,
-  setFilterKeywords,
-  setSpecificFilterColumn,
   improvedSearchEnabled = false,
+  telemetryProps,
+  telemetryGroups,
+  onSelectFilterColumn,
 }: UsersSearchProps) => {
+  const [_, setSelectedId] = useQueryState(
+    'show',
+    parseAsString.withOptions({ history: 'push', clearOnDefault: true })
+  )
+  const [filterKeywords, setFilterKeywords] = useQueryState('keywords', { defaultValue: '' })
+  const [specificFilterColumn] = useQueryState<SpecificFilterColumn>(
+    'filter',
+    parseAsStringEnum<SpecificFilterColumn>([
+      'id',
+      'email',
+      'phone',
+      'name',
+      'freeform',
+    ]).withDefault('email')
+  )
+
+  const [search, setSearch] = useState(filterKeywords)
+  const { mutate: sendEvent } = useSendEventMutation()
+
+  const searchInvalid =
+    !search ||
+    specificFilterColumn === 'freeform' ||
+    specificFilterColumn === 'email' ||
+    specificFilterColumn === 'name'
+      ? false
+      : specificFilterColumn === 'id'
+        ? !search.match(UUIDV4_LEFT_PREFIX_REGEX)
+        : !search.match(PHONE_NUMBER_LEFT_PREFIX_REGEX)
+
+  const onSubmitSearch = () => {
+    const s = search.trim().toLocaleLowerCase()
+    setFilterKeywords(s)
+    setSelectedId(null)
+    sendEvent({
+      action: 'auth_users_search_submitted',
+      properties: {
+        trigger: 'search_input',
+        ...telemetryProps,
+        keywords: s,
+      },
+      groups: telemetryGroups,
+    })
+  }
+
   return (
     <div className="flex items-center">
       <div className="text-xs h-[26px] flex items-center px-1.5 border border-strong rounded-l-md bg-surface-300">
@@ -63,7 +107,7 @@ export const UsersSearch = ({
 
       <Select_Shadcn_
         value={specificFilterColumn}
-        onValueChange={(v) => setSpecificFilterColumn(v as typeof specificFilterColumn)}
+        onValueChange={(v) => onSelectFilterColumn(v as typeof specificFilterColumn)}
       >
         <SelectTrigger_Shadcn_
           size="tiny"
@@ -119,13 +163,10 @@ export const UsersSearch = ({
         )}
         placeholder={getSearchPlaceholder(specificFilterColumn)}
         value={search}
-        onChange={(e) => {
-          const value = e.target.value.replace(/\s+/g, '').toLowerCase()
-          setSearch(value)
-        }}
+        onChange={(e) => setSearch(e.target.value)}
         onKeyDown={(e) => {
           if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-            if (!searchInvalid) setFilterKeywords(search.trim().toLocaleLowerCase())
+            if (!searchInvalid) onSubmitSearch()
           }
         }}
         actions={
diff --git a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
index 162d4a8c2e17a..5156ed1590016 100644
--- a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
@@ -2,25 +2,10 @@ import pgMeta from '@supabase/pg-meta'
 import type { OptimizedSearchColumns } from '@supabase/pg-meta/src/sql/studio/get-users-types'
 import { keepPreviousData, useQueryClient } from '@tanstack/react-query'
 import AwesomeDebouncePromise from 'awesome-debounce-promise'
-import {
-  ExternalLinkIcon,
-  InfoIcon,
-  RefreshCw,
-  Trash,
-  Users,
-  WandSparklesIcon,
-  X,
-} from 'lucide-react'
-import Link from 'next/link'
-import { parseAsArrayOf, parseAsString, parseAsStringEnum, useQueryState } from 'nuqs'
-import { UIEvent, useEffect, useMemo, useRef, useState } from 'react'
-import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid'
-import { toast } from 'sonner'
-
 import { LOCAL_STORAGE_KEYS, useFlag, useParams } from 'common'
 import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import { AlertError } from 'components/ui/AlertError'
 import { APIDocsButton } from 'components/ui/APIDocsButton'
+import { AlertError } from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { FilterPopover } from 'components/ui/FilterPopover'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
@@ -40,26 +25,41 @@ import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { cleanPointerEventsNoneOnBody, isAtBottom } from 'lib/helpers'
 import {
-  Alert_Shadcn_,
+  ExternalLinkIcon,
+  InfoIcon,
+  RefreshCw,
+  Trash,
+  Users,
+  WandSparklesIcon,
+  X,
+} from 'lucide-react'
+import Link from 'next/link'
+import { parseAsArrayOf, parseAsString, parseAsStringEnum, useQueryState } from 'nuqs'
+import { UIEvent, useEffect, useMemo, useRef, useState } from 'react'
+import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid'
+import { toast } from 'sonner'
+import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
+  Alert_Shadcn_,
   Button,
-  cn,
   LoadingLine,
   ResizablePanel,
   ResizablePanelGroup,
-  Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
+  Select_Shadcn_,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  cn,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+
 import { AddUserDropdown } from './AddUserDropdown'
 import { DeleteUserModal } from './DeleteUserModal'
 import { SortDropdown } from './SortDropdown'
@@ -69,10 +69,8 @@ import {
   ColumnConfiguration,
   Filter,
   MAX_BULK_DELETE,
-  PHONE_NUMBER_LEFT_PREFIX_REGEX,
   PROVIDER_FILTER_OPTIONS,
   USERS_TABLE_COLUMNS,
-  UUIDV4_LEFT_PREFIX_REGEX,
 } from './Users.constants'
 import { formatUserColumns, formatUsersData } from './Users.utils'
 import { UsersFooter } from './UsersFooter'
@@ -137,7 +135,7 @@ export const UsersV2 = () => {
     'userType',
     parseAsStringEnum(['all', 'verified', 'unverified', 'anonymous']).withDefault('all')
   )
-  const [filterKeywords, setFilterKeywords] = useQueryState('keywords', { defaultValue: '' })
+  const [filterKeywords] = useQueryState('keywords', { defaultValue: '' })
   const [sortByValue, setSortByValue] = useQueryState('sortBy', { defaultValue: 'created_at:desc' })
   const [sortColumn, sortOrder] = sortByValue.split(':')
   const [selectedColumns, setSelectedColumns] = useQueryState(
@@ -185,7 +183,6 @@ export const UsersV2 = () => {
   )
 
   const [columns, setColumns] = useState<Column<any>[]>([])
-  const [search, setSearch] = useState(filterKeywords)
   const [selectedUsers, setSelectedUsers] = useState<Set<any>>(new Set([]))
   const [selectedUserToDelete, setSelectedUserToDelete] = useState<User>()
   const [showDeleteModal, setShowDeleteModal] = useState(false)
@@ -330,16 +327,6 @@ export const UsersV2 = () => {
   // [Joshen] Only relevant for when selecting one user only
   const selectedUserFromCheckbox = users.find((u) => u.id === [...selectedUsers][0])
 
-  const searchInvalid =
-    !search ||
-    specificFilterColumn === 'freeform' ||
-    specificFilterColumn === 'email' ||
-    specificFilterColumn === 'name'
-      ? false
-      : specificFilterColumn === 'id'
-        ? !search.match(UUIDV4_LEFT_PREFIX_REGEX)
-        : !search.match(PHONE_NUMBER_LEFT_PREFIX_REGEX)
-
   const telemetryProps = {
     sort_column: sortColumn,
     sort_order: sortOrder,
@@ -566,24 +553,10 @@ export const UsersV2 = () => {
             <>
               <div className="flex flex-wrap items-center gap-2">
                 <UsersSearch
-                  search={search}
-                  searchInvalid={searchInvalid}
-                  specificFilterColumn={specificFilterColumn}
-                  setSearch={setSearch}
-                  setFilterKeywords={(s) => {
-                    setFilterKeywords(s)
-                    setSelectedId(null)
-                    sendEvent({
-                      action: 'auth_users_search_submitted',
-                      properties: {
-                        trigger: 'search_input',
-                        ...telemetryProps,
-                        keywords: s,
-                      },
-                      groups: telemetryGroups,
-                    })
-                  }}
-                  setSpecificFilterColumn={(value) => {
+                  improvedSearchEnabled={improvedSearchEnabled}
+                  telemetryProps={telemetryProps}
+                  telemetryGroups={telemetryGroups}
+                  onSelectFilterColumn={(value) => {
                     if (value === 'freeform') {
                       if (isCountWithinThresholdForSortBy) {
                         updateStorageFilter(value)
@@ -594,7 +567,6 @@ export const UsersV2 = () => {
                       updateStorageFilter(value)
                     }
                   }}
-                  improvedSearchEnabled={improvedSearchEnabled}
                 />
 
                 {showUserTypeFilter &&
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
index f841a23492ece..5449a1982dfcf 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
@@ -1,12 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { AnimatePresence, motion } from 'framer-motion'
-import { snakeCase } from 'lodash'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import * as z from 'zod'
-
 import { useFlag, useParams } from 'common'
 import { CreateAnalyticsBucketSheet } from 'components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketSheet'
 import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
@@ -26,19 +19,26 @@ import { useReplicationSourcesQuery } from 'data/replication/sources-query'
 import { useStartPipelineMutation } from 'data/replication/start-pipeline-mutation'
 import { useUpdateDestinationPipelineMutation } from 'data/replication/update-destination-pipeline-mutation'
 import {
-  useValidateDestinationMutation,
   type ValidationFailure,
+  useValidateDestinationMutation,
 } from 'data/replication/validate-destination-mutation'
 import { useValidatePipelineMutation } from 'data/replication/validate-pipeline-mutation'
 import { useIcebergNamespaceCreateMutation } from 'data/storage/iceberg-namespace-create-mutation'
 import { useS3AccessKeyCreateMutation } from 'data/storage/s3-access-key-create-mutation'
+import { AnimatePresence, motion } from 'framer-motion'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { snakeCase } from 'lodash'
 import { Loader2 } from 'lucide-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import {
   PipelineStatusRequestStatus,
   usePipelineRequestStatus,
 } from 'state/replication-pipeline-request-status'
 import { Button, DialogSectionSeparator, Form_Shadcn_, SheetFooter, SheetSection } from 'ui'
+import * as z from 'zod'
+
 import { DestinationType } from '../DestinationPanel.types'
 import { AdvancedSettings } from './AdvancedSettings'
 import { CREATE_NEW_KEY, CREATE_NEW_NAMESPACE } from './DestinationForm.constants'
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
index 8360c7f3457c4..f5fd1d81197b9 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
@@ -1,10 +1,10 @@
-import { useState } from 'react'
-
-import { useReplicationSourcesQuery } from '@/data/replication/sources-query'
-import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
 import { useFlag, useParams } from 'common'
+import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
+import { ArrowUpRight } from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
 import {
-  cn,
+  Button,
   DialogSectionSeparator,
   Sheet,
   SheetContent,
@@ -12,12 +12,18 @@ import {
   SheetHeader,
   SheetSection,
   SheetTitle,
+  cn,
 } from 'ui'
+
 import { EnableReplicationCallout } from '../EnableReplicationCallout'
+import { useIsETLPrivateAlpha } from '../useIsETLPrivateAlpha'
 import { DestinationForm } from './DestinationForm'
 import { DestinationType } from './DestinationPanel.types'
 import { DestinationTypeSelection } from './DestinationTypeSelection'
 import { ReadReplicaForm } from './ReadReplicaForm'
+import { DocsButton } from '@/components/ui/DocsButton'
+import { useReplicationSourcesQuery } from '@/data/replication/sources-query'
+import { DOCS_URL } from '@/lib/constants'
 
 interface DestinationPanelProps {
   visible: boolean
@@ -41,6 +47,7 @@ export const DestinationPanel = ({
   onSuccessCreateReadReplica,
 }: DestinationPanelProps) => {
   const { ref: projectRef } = useParams()
+  const enablePgReplicate = useIsETLPrivateAlpha()
   const unifiedReplication = useFlag('unifiedReplication')
   const { hasAccess: hasETLReplicationAccess } = useCheckEntitlements('replication.etl')
 
@@ -84,6 +91,35 @@ export const DestinationPanel = ({
 
             {selectedType === 'Read Replica' ? (
               <ReadReplicaForm onClose={onClose} onSuccess={() => onSuccessCreateReadReplica?.()} />
+            ) : unifiedReplication && !enablePgReplicate ? (
+              <SheetSection>
+                <div className={cn('border rounded-md p-6 flex flex-col gap-y-4')}>
+                  <div className="flex flex-col gap-y-1">
+                    <h4>Replicate data to external destinations in real-time</h4>
+                    <p className="text-sm text-foreground-light">
+                      We are currently in <span className="text-foreground">private alpha</span> and
+                      slowly onboarding new customers to ensure stable data pipelines. Request
+                      access below to join the waitlist. Read replicas are available now.
+                    </p>
+                  </div>
+                  <div className="flex gap-x-2">
+                    <Button
+                      asChild
+                      type="secondary"
+                      iconRight={<ArrowUpRight size={16} strokeWidth={1.5} />}
+                    >
+                      <Link
+                        href="https://forms.supabase.com/pg_replicate"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Request alpha access
+                      </Link>
+                    </Button>
+                    <DocsButton href={`${DOCS_URL}/guides/database/replication#replication`} />
+                  </div>
+                </div>
+              </SheetSection>
             ) : unifiedReplication && replicationNotEnabled ? (
               <SheetSection>
                 <EnableReplicationCallout
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
index 018b16bc212af..ede1bb7b12d09 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
@@ -1,7 +1,10 @@
 import { useFlag } from 'common'
 import { AnalyticsBucket, BigQuery, Database } from 'icons'
-import { Badge, cn, RadioGroupStacked, RadioGroupStackedItem } from 'ui'
+import { Badge, RadioGroupStacked, RadioGroupStackedItem, cn } from 'ui'
+
+import { useIsETLPrivateAlpha } from '../useIsETLPrivateAlpha'
 import { DestinationType } from './DestinationPanel.types'
+import { InlineLink } from '@/components/ui/InlineLink'
 
 type DestinationTypeSelectionProps = {
   editMode: boolean
@@ -14,6 +17,7 @@ export const DestinationTypeSelection = ({
   selectedType,
   setSelectedType,
 }: DestinationTypeSelectionProps) => {
+  const enablePgReplicate = useIsETLPrivateAlpha()
   const unifiedReplication = useFlag('unifiedReplication')
   const etlEnableBigQuery = useFlag('etlEnableBigQuery')
   const etlEnableIceberg = useFlag('etlEnableIceberg')
@@ -101,6 +105,15 @@ export const DestinationTypeSelection = ({
           </RadioGroupStackedItem>
         )}
       </RadioGroupStacked>
+
+      {selectedType !== 'Read Replica' && enablePgReplicate && (
+        <p className="mt-3 text-sm text-foreground-light">
+          Replication is in alpha. Expect rapid changes and possible breaking updates.{' '}
+          <InlineLink href="https://github.com/orgs/supabase/discussions/39416">
+            Leave feedback
+          </InlineLink>
+        </p>
+      )}
     </div>
   )
 }
diff --git a/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx b/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
index fdcdb6208d270..3517938ee0ead 100644
--- a/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
@@ -1,14 +1,9 @@
-import { useState } from 'react'
-import { toast } from 'sonner'
-
-import { DocsButton } from '@/components/ui/DocsButton'
-import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
-import { DOCS_URL } from '@/lib/constants'
 import { useParams } from 'common'
 import { useCreateTenantSourceMutation } from 'data/replication/create-tenant-source-mutation'
+import { useState } from 'react'
+import { toast } from 'sonner'
 import {
   Button,
-  cn,
   Dialog,
   DialogContent,
   DialogFooter,
@@ -17,9 +12,14 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
+  cn,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
 
+import { DocsButton } from '@/components/ui/DocsButton'
+import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
+import { DOCS_URL } from '@/lib/constants'
+
 const EnableReplicationModal = () => {
   const { ref: projectRef } = useParams()
   const [open, setOpen] = useState(false)
@@ -93,7 +93,7 @@ export const EnableReplicationCallout = ({
   return (
     <div className={cn('border rounded-md p-4 md:p-12 flex flex-col gap-y-4', className)}>
       <div className="flex flex-col gap-y-1">
-        <h3>Replicate data to external destinations in real-time</h3>
+        <h4>Replicate data to external destinations in real-time</h4>
         <p className="text-sm text-foreground-light">
           {hasAccess ? 'Enable replication' : 'Upgrade to the Pro plan'} to start replicating your
           database changes to {type ?? 'data warehouses and analytics platforms'}
diff --git a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx
index 4ce4e316976b8..5178b6daa0278 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx
@@ -28,6 +28,8 @@ import {
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
+const attribute = 'physical_replication_lag_physical_replication_lag_seconds'
+
 export const ReadReplicaDetails = () => {
   const { ref: projectRef, replicaId } = useParams()
   const reportGranularityV2 = useFlag('reportGranularityV2')
@@ -64,7 +66,7 @@ export const ReadReplicaDetails = () => {
     useInfraMonitoringAttributesQuery(
       {
         projectRef,
-        attributes: ['physical_replication_lag_physical_replica_lag_seconds'],
+        attributes: [attribute],
         databaseIdentifier: identifier,
         startDate: selectedDateRange.period_start.date,
         endDate: selectedDateRange.period_end.date,
@@ -73,26 +75,24 @@ export const ReadReplicaDetails = () => {
       { enabled: !!replica }
     )
 
-  // [Joshen] Temporarily hardcoding the data as the query to retrieve replication lag doesn't seem to be working
-  // https://linear.app/supabase/issue/INDATA-325/investigate-infra-monitoring-for-physical-replication-lag-physical
-  const chartData = useMemo(() => {
-    return Array.from({ length: 46 }, (_, i) => {
-      const date = new Date()
-      date.setMinutes(date.getMinutes() - i * 5) // Each point 5 minutes apart
-
-      return {
-        timestamp: date.toISOString(),
-        replication_lag: Math.floor(Math.random() * 100),
-      }
-    }).reverse()
-  }, [])
+  const chartData = useMemo(
+    () =>
+      infraMonitoringData?.data.map((x) => ({
+        timestamp: x.period_start,
+        [attribute]: (x as Record<string, string | number>)[attribute],
+      })) ?? [],
+    [infraMonitoringData?.data]
+  )
 
   return (
     <>
       <Chart className="mt-6" isLoading={isLoadingLag || isFetchingInfraMonitoring}>
         <ChartCard className="rounded-none border-x-0">
           <ChartHeader className="px-10">
-            <ChartMetric label="Replication lag" value={!!lagDuration ? `${lagDuration}s` : '-'} />
+            <ChartMetric
+              label="Replication lag"
+              value={lagDuration !== undefined ? `${lagDuration}s` : '-'}
+            />
           </ChartHeader>
           <ChartContent
             isEmpty={chartData.length === 0}
@@ -103,19 +103,22 @@ export const ReadReplicaDetails = () => {
                 description="It may take up to 24 hours for data to refresh"
               />
             }
-            loadingState={<ChartLoadingState />}
+            loadingState={<ChartLoadingState className="h-[228px]" />}
           >
             <div className="h-56 px-5">
               <ChartLine
+                showGrid
+                showYAxis
+                isFullHeight
                 data={chartData}
-                dataKey="replication_lag"
-                showGrid={true}
-                showYAxis={true}
+                dataKey={attribute}
                 YAxisProps={{
                   tickFormatter: (value) => `${value}s`,
                   width: 80,
                 }}
-                isFullHeight={true}
+                config={{
+                  [attribute]: { label: 'Replication lag' },
+                }}
               />
             </div>
           </ChartContent>
diff --git a/apps/studio/components/ui/Charts/BarChart.tsx b/apps/studio/components/ui/Charts/BarChart.tsx
index 23a1dc79222d9..99fbde8642607 100644
--- a/apps/studio/components/ui/Charts/BarChart.tsx
+++ b/apps/studio/components/ui/Charts/BarChart.tsx
@@ -191,7 +191,7 @@ const BarChart = ({
             animationDuration={300}
             maxBarSize={48}
           >
-            {data?.map((_entry: Datum, index: any) => (
+            {data?.map((_entry: Datum, index: number) => (
               <Cell
                 key={`cell-${index}`}
                 className={`transition-all duration-300 ${onBarClick ? 'cursor-pointer' : ''}`}
diff --git a/apps/studio/components/ui/Charts/ChartHeader.tsx b/apps/studio/components/ui/Charts/ChartHeader.tsx
index e38f28358f8d2..79a641c249a05 100644
--- a/apps/studio/components/ui/Charts/ChartHeader.tsx
+++ b/apps/studio/components/ui/Charts/ChartHeader.tsx
@@ -1,4 +1,7 @@
+import { useParams } from 'common'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import dayjs from 'dayjs'
+import { formatBytes } from 'lib/helpers'
 import {
   Activity,
   BarChartIcon,
@@ -7,17 +10,13 @@ import {
   SquareTerminal,
 } from 'lucide-react'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { cn } from 'ui'
+import { Badge } from 'ui'
+import { InfoTooltip } from 'ui-patterns/info-tooltip'
 
-import { useParams } from 'common'
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { formatBytes } from 'lib/helpers'
 import { formatPercentage, numberFormatter } from './Charts.utils'
 import { useChartHoverState } from './useChartHoverState'
-import { InfoTooltip } from 'ui-patterns/info-tooltip'
-import { Badge } from 'ui'
 
 export interface ChartHeaderProps {
   title?: string
@@ -80,13 +79,10 @@ export const ChartHeader = ({
   titleTooltip,
   showNewBadge,
 }: ChartHeaderProps) => {
-  const { hoveredIndex, isHovered, isCurrentChart, setHover, clearHover } = useChartHoverState(
-    syncId || 'default'
-  )
+  const { ref } = useParams()
+  const { hoveredIndex, isHovered } = useChartHoverState(syncId || 'default')
   const [localHighlightedValue, setLocalHighlightedValue] = useState(highlightedValue)
   const [localHighlightedLabel, setLocalHighlightedLabel] = useState(highlightedLabel)
-  const { ref } = useParams()
-  const router = useRouter()
 
   const formatHighlightedValue = (value: any) => {
     if (typeof value !== 'number') {
@@ -109,7 +105,7 @@ export const ChartHeader = ({
     const formattedValue = numberFormatter(value, valuePrecision)
 
     if (typeof format === 'string' && format) {
-      return `${formattedValue}${format}`
+      return `${formattedValue} ${format}`
     }
 
     return formattedValue
diff --git a/apps/studio/data/analytics/infra-monitoring-query.ts b/apps/studio/data/analytics/infra-monitoring-query.ts
index 9a30306425be9..65f7faad28235 100644
--- a/apps/studio/data/analytics/infra-monitoring-query.ts
+++ b/apps/studio/data/analytics/infra-monitoring-query.ts
@@ -1,29 +1,14 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { paths } from 'api-types'
 import { get, handleError } from 'data/fetchers'
 import { UseCustomQueryOptions } from 'types'
 import type { AnalyticsInterval } from './constants'
 import { analyticsKeys } from './keys'
 
-export type InfraMonitoringAttribute =
-  | 'max_cpu_usage'
-  | 'avg_cpu_usage'
-  | 'disk_io_budget'
-  | 'ram_usage'
-  | 'disk_io_consumption'
-  | 'pg_stat_database_num_backends'
-  | 'supavisor_connections_active'
-  | 'realtime_connections_connected'
-  | 'realtime_channel_events'
-  | 'realtime_channel_db_events'
-  | 'realtime_channel_presence_events'
-  | 'realtime_channel_joins'
-  | 'realtime_read_authorization_rls_execution_time'
-  | 'realtime_write_authorization_rls_execution_time'
-  | 'realtime_payload_size'
-  | 'realtime_sum_connections_connected'
-  | 'realtime_replication_connection_lag'
-  | 'physical_replication_lag_physical_replica_lag_seconds'
+export type InfraMonitoringAttribute = NonNullable<
+  paths['/platform/projects/{ref}/infra-monitoring']['get']['parameters']['query']['attributes']
+>[number]
 
 export type InfraMonitoringSeriesMetadata = {
   yAxisLimit: number
diff --git a/apps/studio/pages/project/[ref]/database/replication/index.tsx b/apps/studio/pages/project/[ref]/database/replication/index.tsx
index 0181a144722a2..c706953df853f 100644
--- a/apps/studio/pages/project/[ref]/database/replication/index.tsx
+++ b/apps/studio/pages/project/[ref]/database/replication/index.tsx
@@ -1,22 +1,23 @@
-import { ReplicationDiagram } from '@/components/interfaces/Database/Replication/ReplicationDiagram'
-import { useParams } from 'common'
+import { useFlag, useParams } from 'common'
 import { ReplicationComingSoon } from 'components/interfaces/Database/Replication/ComingSoon'
 import { Destinations } from 'components/interfaces/Database/Replication/Destinations'
 import { useIsETLPrivateAlpha } from 'components/interfaces/Database/Replication/useIsETLPrivateAlpha'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { DefaultLayout } from 'components/layouts/DefaultLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
-import { AlphaNotice } from 'components/ui/AlphaNotice'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
 import { UnknownInterface } from 'components/ui/UnknownInterface'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { PipelineRequestStatusProvider } from 'state/replication-pipeline-request-status'
 import type { NextPageWithLayout } from 'types'
 
+import { ReplicationDiagram } from '@/components/interfaces/Database/Replication/ReplicationDiagram'
+
 const DatabaseReplicationPage: NextPageWithLayout = () => {
   const { ref } = useParams()
   const enablePgReplicate = useIsETLPrivateAlpha()
   const showPgReplicate = useIsFeatureEnabled('database:replication')
+  const unifiedReplication = useFlag('unifiedReplication')
 
   if (!showPgReplicate) {
     return <UnknownInterface urlBack={`/project/${ref}/database/schemas`} />
@@ -24,7 +25,7 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
 
   return (
     <>
-      {enablePgReplicate ? (
+      {unifiedReplication || enablePgReplicate ? (
         <PipelineRequestStatusProvider>
           <ScaffoldContainer>
             <ScaffoldSection isFullWidth>
@@ -37,10 +38,6 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
                   analytics platforms in real-time
                 </p>
               </div>
-              <AlphaNotice
-                entity="Replication"
-                feedbackUrl="https://github.com/orgs/supabase/discussions/39416"
-              />
             </ScaffoldSection>
           </ScaffoldContainer>
 
diff --git a/apps/studio/pages/project/[ref]/observability/database.tsx b/apps/studio/pages/project/[ref]/observability/database.tsx
index 48760a5591064..cdbeac91ac105 100644
--- a/apps/studio/pages/project/[ref]/observability/database.tsx
+++ b/apps/studio/pages/project/[ref]/observability/database.tsx
@@ -168,7 +168,7 @@ const DatabaseUsage = () => {
       if (isReplicaSelected) {
         queryClient.invalidateQueries({
           queryKey: analyticsKeys.infraMonitoring(ref, {
-            attribute: 'physical_replication_lag_physical_replica_lag_seconds',
+            attribute: 'physical_replication_lag_physical_replication_lag_seconds',
             startDate: period_start.date,
             endDate: period_end.date,
             interval,
@@ -286,7 +286,7 @@ const DatabaseUsage = () => {
                 <ChartHandler
                   startDate={selectedDateRange?.period_start?.date}
                   endDate={selectedDateRange?.period_end?.date}
-                  attribute="physical_replication_lag_physical_replica_lag_seconds"
+                  attribute="physical_replication_lag_physical_replication_lag_seconds"
                   label="Replication lag"
                   interval={selectedDateRange.interval}
                   provider="infra-monitoring"
diff --git a/apps/www/.env b/apps/www/.env
index 20b7e81d5cec0..ec35e2283db45 100644
--- a/apps/www/.env
+++ b/apps/www/.env
@@ -9,3 +9,4 @@ NEXT_PUBLIC_DOCS_URL="http://localhost:3001"
 NEXT_PUBLIC_STUDIO_URL="http://localhost:8082"
 NEXT_PUBLIC_REFERENCE_DOCS_URL="http://localhost:3010"
 NEXT_PUBLIC_UI_LIBRARY_URL="http://localhost:3004"
+NEXT_PUBLIC_DESIGN_SYSTEM_URL="http://localhost:3003"
diff --git a/apps/www/.env.local.example b/apps/www/.env.local.example
index 91311125ac91a..d6fee8a9b0a1e 100644
--- a/apps/www/.env.local.example
+++ b/apps/www/.env.local.example
@@ -1,5 +1,6 @@
 # Copy this file in the same folder, rename it to .env.local and fill out the env vars to get www working
 NEXT_PUBLIC_API_URL="http://localhost:8080/platform"
+NEXT_PUBLIC_DESIGN_SYSTEM_URL="http://localhost:3003"
 NEXT_PUBLIC_DOCS_URL="http://localhost:3005"
 NEXT_PUBLIC_MISC_USE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9idWxkYW5ycHRsb2t0eGNmZnZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTg2MTQ2ODUsImV4cCI6MjAzNDE5MDY4NX0.NFt49g6DFkc1X5khCzN5p01iAVo2TMxlx88cY1V0E2M"
 NEXT_PUBLIC_MISC_USE_URL="https://obuldanrptloktxcffvn.supabase.co"
diff --git a/apps/www/_blog/2020-11-18-postgresql-views.mdx b/apps/www/_blog/2020-11-18-postgresql-views.mdx
index e3d9ef46a2180..8cbc76a6658ba 100644
--- a/apps/www/_blog/2020-11-18-postgresql-views.mdx
+++ b/apps/www/_blog/2020-11-18-postgresql-views.mdx
@@ -2,25 +2,20 @@
 title: Postgres Views
 description: Creating and using a view in PostgreSQL.
 author: paul_copplestone
-author_title: Supabase
-author_url: https://github.com/dragarcia
-author_image_url: https://avatars0.githubusercontent.com/u/26374889?s=400&u=f5e35e9b47a50fa2b4d8c4bb96babd921071bcf1&v=4
-image: postgres-views.png
-categories:
-  - postgres
+imgSocial: postgres-views.png
 tags:
   - postgres
   - planetpg
-date: '11-18-2020'
+date: '2020-11-18'
 ---
 
 A quick summary of Postgres views, materialized views, and why you should use them.
 
-### What is a View?
+## What is a view?
 
 A [view](https://www.postgresql.org/docs/12/sql-createview.html) is a convenient shortcut to a query. Creating a view does not involve new tables or data. When run, an underlying query is executed, returning its results to the user.
 
-#### Basic Example
+### Basic example
 
 Say we have the following tables from a database of a university:
 
@@ -75,7 +70,7 @@ select * from transcripts;
 
 For additional parameters or options, refer [here](https://www.postgresql.org/docs/12/sql-createview.html#:~:text=parameters).
 
-### Why should we use Views?
+## Why should we use views?
 
 Views provide the several benefits:
 
@@ -84,7 +79,7 @@ Views provide the several benefits:
 - Logical Organization
 - Security
 
-#### Simplicity
+### Simplicity
 
 As a query becomes complex it becomes a hassle to call it. Especially when we run it at regularly. In the example above, instead of repeatedly running:
 
@@ -109,7 +104,7 @@ select * from transcripts;
 
 Additionally, a view behaves like a typical table. We can safely use it in table `JOIN`s or even create new views using existing views.
 
-#### Consistency
+### Consistency
 
 Views ensure that the likelihood of mistakes decreases when repeatedly executing a query. In our example above, we may decide that we want to exclude the course _Introduction to Postgres_. The query would become:
 
@@ -129,19 +124,19 @@ where courses.code != 'PG101';
 
 Without a view, we would need to go into every dependent query to add the new rule. This would increase in the likelihood of errors and inconsistencies, as well as introducing a lot of effort for a developer. With views, we can alter just the underlying query in the view **transcripts**. The change will be applied to all applications using this view.
 
-#### Logical Organization
+### Logical organization
 
 With views, we can give our query a name. This is extremely useful for teams working with the same database. Instead of guessing what a query is supposed to do, a well-named view can easily explain it. For example, by looking at the name of the view **transcripts**, we can infer that the underlying query might involve the **students**, **courses**, and **grades** tables.
 
-#### Security
+### Security
 
 Views can restrict the amount and type of data presented to a user. Instead of allowing a user direct access to a set of tables, we provide them a view instead. We can prevent them from reading sensitive columns by excluding them from the underlying query.
 
-### What is a Materialized View?
+## What is a materialized view?
 
 A [materialized view](https://www.postgresql.org/docs/12/rules-materializedviews.html) is a form of view but with the added feature of physically storing the results. In subsequent reads of a materialized view, the time taken to return its results would be much faster than a conventional view. This is because the data is readily available for a materialized view while the conventional view executes the underlying query each time it is called.
 
-#### Basic Example
+### Basic example
 
 Using our example above, a materialized view can be created like this:
 
@@ -167,7 +162,7 @@ select * from transcripts;
 
 For additional parameters or options, refer [here](https://www.postgresql.org/docs/12/sql-creatematerializedview.html#:~:text=parameters).
 
-#### Refreshing
+### Refreshing
 
 Unfortunately, there is a trade-off - data in materialized views are not always up to date. We need to refresh it regularly to prevent the data from becoming too stale. To do so:
 
@@ -177,13 +172,13 @@ refresh materialized view transcripts;
 
 It's up to you how regularly refresh your materialized views, and it's probably different for each view depending on its use-case.
 
-### Materialized views vs Conventional views
+## Materialized views vs conventional views
 
 Materialized views are useful when execution times for queries or views become unbearable or exceed the service level agreements of a business. These could likely occur in views or queries involving multiple tables and millions of rows. When using such a view, however, there should be tolerance towards data being outdated. Some use-cases for materialized views are internal dashboards and analytics.
 
 Creating a materialized view is not a solution to inefficient queries. You should always seek to optimize a slow running query even if you are implementing a materialized view.
 
-### Conclusion
+## Conclusion
 
 Postgres views and materialized views are a great way to organize and view results from commonly used queries. Although similar to one another, each has its purpose. Views simplify the process of running queries. Materialized views are usually faster at returning results, with the trade-off of having stale data.
 
diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index 0392c18c49675..bfab86bc92bf8 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -3038,6 +3038,11 @@ module.exports = [
     source: '/mcp',
     destination: '/docs/guides/getting-started/mcp',
   },
+  {
+    permanent: true,
+    source: '/design',
+    destination: '/design-system',
+  },
 
   // marketing
 
diff --git a/apps/www/lib/rewrites.js b/apps/www/lib/rewrites.js
index a4e58dea85c49..0e767175e1328 100644
--- a/apps/www/lib/rewrites.js
+++ b/apps/www/lib/rewrites.js
@@ -29,6 +29,14 @@ const rewrites = [
     source: '/ui/:path*',
     destination: `${process.env.NEXT_PUBLIC_UI_LIBRARY_URL}/:path*`,
   },
+  {
+    source: '/design-system',
+    destination: `${process.env.NEXT_PUBLIC_DESIGN_SYSTEM_URL}`,
+  },
+  {
+    source: '/design-system/:path*',
+    destination: `${process.env.NEXT_PUBLIC_DESIGN_SYSTEM_URL}/:path*`,
+  },
 
   {
     source: '/new-docs',
diff --git a/packages/api-types/types/api.d.ts b/packages/api-types/types/api.d.ts
index 563cde07a2ab7..63d4273bd4936 100644
--- a/packages/api-types/types/api.d.ts
+++ b/packages/api-types/types/api.d.ts
@@ -927,6 +927,57 @@ export interface paths {
     patch?: never
     trace?: never
   }
+  '/v1/projects/{ref}/config/disk': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    get?: never
+    put?: never
+    /** Modify database disk */
+    post: operations['v1-modify-database-disk']
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  '/v1/projects/{ref}/config/disk/autoscale': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /** Gets project disk autoscale config */
+    get: operations['v1-get-project-disk-autoscale-config']
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  '/v1/projects/{ref}/config/disk/util': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /** Get disk utilization */
+    get: operations['v1-get-disk-utilization']
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
   '/v1/projects/{ref}/config/realtime': {
     parameters: {
       query?: never
@@ -2695,6 +2746,38 @@ export interface components {
       verify_jwt?: boolean
       version: number
     }
+    DiskAutoscaleConfig: {
+      /** @description Growth percentage for disk autoscaling */
+      growth_percent: number | null
+      /** @description Maximum limit the disk size will grow to in GB */
+      max_size_gb: number | null
+      /** @description Minimum increment size for disk autoscaling in GB */
+      min_increment_gb: number | null
+    }
+    DiskRequestBody: {
+      attributes:
+        | {
+            iops: number
+            size_gb: number
+            throughput_mibps?: number
+            /** @enum {string} */
+            type: 'gp3'
+          }
+        | {
+            iops: number
+            size_gb: number
+            /** @enum {string} */
+            type: 'io2'
+          }
+    }
+    DiskUtilMetricsResponse: {
+      metrics: {
+        fs_avail_bytes: number
+        fs_size_bytes: number
+        fs_used_bytes: number
+      }
+      timestamp: string
+    }
     FunctionDeployBody: {
       file?: string[]
       metadata: {
@@ -8150,6 +8233,158 @@ export interface operations {
       }
     }
   }
+  'v1-modify-database-disk': {
+    parameters: {
+      query?: never
+      header?: never
+      path: {
+        /** @description Project ref */
+        ref: string
+      }
+      cookie?: never
+    }
+    requestBody: {
+      content: {
+        'application/json': components['schemas']['DiskRequestBody']
+      }
+    }
+    responses: {
+      201: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Unauthorized */
+      401: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Forbidden action */
+      403: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Rate limit exceeded */
+      429: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Failed to modify database disk */
+      500: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+    }
+  }
+  'v1-get-project-disk-autoscale-config': {
+    parameters: {
+      query?: never
+      header?: never
+      path: {
+        /** @description Project ref */
+        ref: string
+      }
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['DiskAutoscaleConfig']
+        }
+      }
+      /** @description Unauthorized */
+      401: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Forbidden action */
+      403: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Rate limit exceeded */
+      429: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Failed to get project disk autoscale config */
+      500: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+    }
+  }
+  'v1-get-disk-utilization': {
+    parameters: {
+      query?: never
+      header?: never
+      path: {
+        /** @description Project ref */
+        ref: string
+      }
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['DiskUtilMetricsResponse']
+        }
+      }
+      /** @description Unauthorized */
+      401: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Forbidden action */
+      403: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Rate limit exceeded */
+      429: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Failed to get disk utilization */
+      500: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+    }
+  }
   'v1-get-realtime-config': {
     parameters: {
       query?: never
diff --git a/packages/api-types/types/platform.d.ts b/packages/api-types/types/platform.d.ts
index 75d0259b4c1de..e7312d2476ae3 100644
--- a/packages/api-types/types/platform.d.ts
+++ b/packages/api-types/types/platform.d.ts
@@ -1020,6 +1020,23 @@ export interface paths {
     patch?: never
     trace?: never
   }
+  '/platform/organizations/{slug}/billing/invoices/{invoice_id}/receipt': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /** Get the receipt PDF URL for a paid invoice */
+    get: operations['OrgInvoicesController_getInvoiceReceipt']
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
   '/platform/organizations/{slug}/billing/invoices/upcoming': {
     parameters: {
       query?: never
@@ -3543,27 +3560,6 @@ export interface paths {
     patch?: never
     trace?: never
   }
-  '/platform/replication/{ref}/pipelines/{pipeline_id}/rollback-table-state': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Rollback pipeline table state (deprecated)
-     * @deprecated
-     * @description Deprecated: Use POST /pipelines/{pipeline_id}/rollback-tables instead. Rollback a table state for the pipeline. Requires bearer auth and an active, healthy project.
-     */
-    post: operations['ReplicationPipelinesController_rollbackTableState']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
   '/platform/replication/{ref}/pipelines/{pipeline_id}/rollback-tables': {
     parameters: {
       query?: never
@@ -6874,6 +6870,10 @@ export interface components {
     InvoicePaymentLinkResponse: {
       redirectUrl: string
     }
+    InvoiceReceiptResponse: {
+      /** Format: uri */
+      receipt_pdf: string
+    }
     LFAccessToken: {
       description: string | null
       id: number
@@ -8996,73 +8996,6 @@ export interface components {
         table_id: number
       }[]
     }
-    RollbackTableStateBody: {
-      /**
-       * @description Rollback type
-       * @example individual
-       * @enum {string}
-       */
-      rollback_type: 'individual' | 'full'
-      /**
-       * @description Table id (Postgres OID)
-       * @example 16408
-       */
-      table_id: number
-    }
-    RollbackTableStateResponse: {
-      /** @description Table replication state */
-      new_state:
-        | {
-            /** @enum {string} */
-            name: 'queued'
-          }
-        | {
-            /** @enum {string} */
-            name: 'copying_table'
-          }
-        | {
-            /** @enum {string} */
-            name: 'copied_table'
-          }
-        | {
-            /** @enum {string} */
-            name: 'following_wal'
-          }
-        | {
-            /** @enum {string} */
-            name: 'error'
-            reason: string
-            retry_policy:
-              | {
-                  /** @enum {string} */
-                  policy: 'no_retry'
-                }
-              | {
-                  /** @enum {string} */
-                  policy: 'manual_retry'
-                }
-              | {
-                  /**
-                   * @description Next retry time (RFC 3339 timestamp)
-                   * @example 2025-01-02T03:04:05Z
-                   */
-                  next_retry: string
-                  /** @enum {string} */
-                  policy: 'timed_retry'
-                }
-            solution?: string
-          }
-      /**
-       * @description Pipeline id
-       * @example 1012
-       */
-      pipeline_id: number
-      /**
-       * @description Table id (Postgres OID)
-       * @example 16408
-       */
-      table_id: number
-    }
     RunLintByNameResponse: {
       lints: {
         cache_key: string
@@ -9143,7 +9076,9 @@ export interface components {
       allowSupportAccess?: boolean
       browserInformation?: string
       category: string
+      dashboardLogs?: string
       dashboardSentryIssueId?: string
+      dashboardStudioVersion?: string
       library?: string
       message: string
       organizationSlug?: string
@@ -13648,6 +13583,71 @@ export interface operations {
       }
     }
   }
+  OrgInvoicesController_getInvoiceReceipt: {
+    parameters: {
+      query?: never
+      header?: never
+      path: {
+        invoice_id: string
+        /** @description Organization slug */
+        slug: string
+      }
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['InvoiceReceiptResponse']
+        }
+      }
+      /** @description Receipt not available for this invoice type or status */
+      400: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Unauthorized */
+      401: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Forbidden action */
+      403: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Invoice or receipt not found */
+      404: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Rate limit exceeded */
+      429: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Failed to retrieve receipt */
+      500: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+    }
+  }
   OrgInvoicesController_getUpcomingInvoice: {
     parameters: {
       query?: never
@@ -20970,7 +20970,7 @@ export interface operations {
           | 'disk_fs_used'
           | 'disk_fs_used_wal'
           | 'disk_fs_used_system'
-          | 'physical_replication_lag_physical_replica_lag_seconds'
+          | 'physical_replication_lag_physical_replication_lag_seconds'
           | 'pg_stat_database_num_backends'
           | 'max_db_connections'
         attributes?: (
@@ -21026,7 +21026,7 @@ export interface operations {
           | 'disk_fs_used'
           | 'disk_fs_used_wal'
           | 'disk_fs_used_system'
-          | 'physical_replication_lag_physical_replica_lag_seconds'
+          | 'physical_replication_lag_physical_replication_lag_seconds'
           | 'pg_stat_database_num_backends'
           | 'max_db_connections'
         )[]
@@ -23268,63 +23268,6 @@ export interface operations {
       }
     }
   }
-  ReplicationPipelinesController_rollbackTableState: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description Pipeline id */
-        pipeline_id: number
-        /** @description Project ref */
-        ref: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['RollbackTableStateBody']
-      }
-    }
-    responses: {
-      /** @description New table state after rollback. */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RollbackTableStateResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden action */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unexpected error while rolling back table state. */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
   ReplicationPipelinesController_rollbackTables: {
     parameters: {
       query?: never
diff --git a/packages/ui-patterns/src/Chart/index.tsx b/packages/ui-patterns/src/Chart/index.tsx
index 4466af61155f2..539806edb13fb 100644
--- a/packages/ui-patterns/src/Chart/index.tsx
+++ b/packages/ui-patterns/src/Chart/index.tsx
@@ -1,32 +1,32 @@
 'use client'
 
-import * as React from 'react'
-import { useContext, useState, useMemo, useRef } from 'react'
 import { Slot } from '@radix-ui/react-slot'
-import {
-  Button,
-  Card,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  Skeleton,
-  ChartContainer,
-  cn,
-} from 'ui'
+import dayjs from 'dayjs'
 import { HelpCircle, Loader2 } from 'lucide-react'
 import Link from 'next/link'
+import * as React from 'react'
+import { useContext, useMemo, useRef, useState } from 'react'
 import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
   Area,
   AreaChart,
+  Bar,
+  BarChart,
   Tooltip as RechartsTooltip,
   TooltipProps as RechartsTooltipProps,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
 } from 'recharts'
-import dayjs from 'dayjs'
+import {
+  Button,
+  Card,
+  ChartContainer,
+  cn,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from 'ui'
 
 /* Chart Config */
 export type ChartConfig = {
@@ -379,9 +379,14 @@ const ChartEmptyState = React.forwardRef<HTMLDivElement, ChartEmptyStateProps>(
 ChartEmptyState.displayName = 'ChartEmptyState'
 
 /* Chart Loading State */
-const ChartLoadingState = () => {
+const ChartLoadingState = ({ className }: { className?: string }) => {
   return (
-    <div className="h-40 border border-dashed border-control items-center justify-center flex flex-col">
+    <div
+      className={cn(
+        'h-40 border border-dashed border-control items-center justify-center flex flex-col',
+        className
+      )}
+    >
       <Loader2 size={20} className="animate-spin text-foreground-muted" />
     </div>
   )
@@ -592,21 +597,21 @@ const ChartSparkline = React.forwardRef<HTMLDivElement, ChartSparklineProps>(
 ChartSparkline.displayName = 'ChartSparkline'
 
 /* Exports */
+export { ChartBar, type ChartBarProps, type ChartBarTick } from './charts/chart-bar'
+export { ChartLine, type ChartLineProps, type ChartLineTick } from './charts/chart-line'
 export {
   Chart,
-  ChartCard,
-  ChartHeader,
-  ChartTitle,
   ChartActions,
-  ChartMetric,
+  ChartCard,
   ChartContent,
-  ChartEmptyState,
-  ChartLoadingState,
   ChartDisabledState,
+  ChartEmptyState,
   ChartFooter,
-  ChartValueDifferential,
-  ChartSparklineTooltip,
+  ChartHeader,
+  ChartLoadingState,
+  ChartMetric,
   ChartSparkline,
+  ChartSparklineTooltip,
+  ChartTitle,
+  ChartValueDifferential,
 }
-export { ChartBar, type ChartBarTick, type ChartBarProps } from './charts/chart-bar'
-export { ChartLine, type ChartLineTick, type ChartLineProps } from './charts/chart-line'