diff --git a/apps/docs/content/guides/platform/ssl-enforcement.mdx b/apps/docs/content/guides/platform/ssl-enforcement.mdx
index 3bb6ebaf33239..2557347c6c63a 100644
--- a/apps/docs/content/guides/platform/ssl-enforcement.mdx
+++ b/apps/docs/content/guides/platform/ssl-enforcement.mdx
@@ -17,6 +17,12 @@ Projects need to be at least on Postgres 13.3.0 to enable SSL enforcement. You c
 
 SSL enforcement can be configured via the "Enforce SSL on incoming connections" setting under the SSL Configuration section in [Database Settings page](/dashboard/project/_/database/settings) of the dashboard.
 
+<Admonition type="note">
+
+Updating SSL enforcement requires a brief database reboot. This restarts only the database and involves a few minutes of downtime.
+
+</Admonition>
+
 ## Manage SSL enforcement via the Management API
 
 You can also manage SSL enforcement using the Management API:
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
index 20ec963cd225c..1a0e8f30dbf41 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
@@ -245,23 +245,29 @@ export const AccessTokenList = ({ searchString = '', onDeleteSuccess }: AccessTo
                   <TimestampInfo
                     utcTimestamp={x.last_used_at}
                     label={dayjs(x.last_used_at).fromNow()}
+                    className="text-sm"
                   />
                 ) : (
-                  'Never used'
+                  <p className="text-foreground-light text-sm">Never used</p>
                 )}
               </TableCell>
               <TableCell className="min-w-28 text-foreground-light">
                 {x.expires_at ? (
                   dayjs(x.expires_at).isBefore(dayjs()) ? (
-                    <TimestampInfo utcTimestamp={x.expires_at} label="Expired" />
+                    <TimestampInfo
+                      utcTimestamp={x.expires_at}
+                      label="Expired"
+                      className="text-sm"
+                    />
                   ) : (
                     <TimestampInfo
                       utcTimestamp={x.expires_at}
                       label={dayjs(x.expires_at).format('DD MMM YYYY')}
+                      className="text-sm"
                     />
                   )
                 ) : (
-                  <p className="text-foreground-light">Never</p>
+                  <p className="text-foreground-light text-sm">Never</p>
                 )}
               </TableCell>
               <TableCell>
diff --git a/apps/studio/components/interfaces/App/AppBannerWrapperContext.tsx b/apps/studio/components/interfaces/App/AppBannerWrapperContext.tsx
deleted file mode 100644
index 30f005b9ac9de..0000000000000
--- a/apps/studio/components/interfaces/App/AppBannerWrapperContext.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { LOCAL_STORAGE_KEYS } from 'common'
-import { noop } from 'lodash'
-import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react'
-
-const MAINTENANCE_WINDOW_BANNER_KEY = LOCAL_STORAGE_KEYS.MAINTENANCE_WINDOW_BANNER
-
-// [Joshen] This file is meant to be dynamic - update this as and when we need to use the NoticeBanner
-
-type AppBannerContextType = {
-  maintenanceWindowBannerAcknowledged: boolean
-  onUpdateAcknowledged: (key: typeof MAINTENANCE_WINDOW_BANNER_KEY) => void
-}
-
-const AppBannerContext = createContext<AppBannerContextType>({
-  maintenanceWindowBannerAcknowledged: false,
-  onUpdateAcknowledged: noop,
-})
-
-export const useAppBannerContext = () => useContext(AppBannerContext)
-
-export const AppBannerContextProvider = ({ children }: PropsWithChildren<{}>) => {
-  const [maintenanceWindowBannerAcknowledged, setMaintenanceWindowBannerAcknowledged] =
-    useState<boolean>(false)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const maintenanceAcknowledged = localStorage.getItem(MAINTENANCE_WINDOW_BANNER_KEY) === 'true'
-      setMaintenanceWindowBannerAcknowledged(maintenanceAcknowledged)
-    }
-  }, [])
-
-  const value = {
-    maintenanceWindowBannerAcknowledged,
-    onUpdateAcknowledged: (key: typeof MAINTENANCE_WINDOW_BANNER_KEY) => {
-      if (key === MAINTENANCE_WINDOW_BANNER_KEY) {
-        if (typeof window !== 'undefined') {
-          window.localStorage.setItem(MAINTENANCE_WINDOW_BANNER_KEY, 'true')
-        }
-        setMaintenanceWindowBannerAcknowledged(true)
-      }
-    },
-  }
-
-  return <AppBannerContext.Provider value={value}>{children}</AppBannerContext.Provider>
-}
-
-export const useIsNoticeBannerShown = () => {
-  const { maintenanceWindowBannerAcknowledged } = useAppBannerContext()
-  return maintenanceWindowBannerAcknowledged
-}
diff --git a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx
new file mode 100644
index 0000000000000..4ce4e316976b8
--- /dev/null
+++ b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx
@@ -0,0 +1,180 @@
+import { BarChart2 } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { REPORT_DATERANGE_HELPER_LABELS } from '@/components/interfaces/Reports/Reports.constants'
+import { REPLICA_STATUS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
+import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
+import { useInfraMonitoringAttributesQuery } from '@/data/analytics/infra-monitoring-query'
+import { useLoadBalancersQuery } from '@/data/read-replicas/load-balancers-query'
+import { useReplicationLagQuery } from '@/data/read-replicas/replica-lag-query'
+import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
+import { useReadReplicasStatusesQuery } from '@/data/read-replicas/replicas-status-query'
+import { useReportDateRange } from '@/hooks/misc/useReportDateRange'
+import { BASE_PATH } from '@/lib/constants'
+import { useFlag, useParams } from 'common'
+import { AWS_REGIONS } from 'shared-data'
+import { Card, CardContent, CardHeader, CardTitle } from 'ui'
+import {
+  Chart,
+  ChartCard,
+  ChartContent,
+  ChartEmptyState,
+  ChartHeader,
+  ChartLine,
+  ChartLoadingState,
+  ChartMetric,
+  GenericSkeletonLoader,
+} from 'ui-patterns'
+import { Input } from 'ui-patterns/DataInputs/Input'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+export const ReadReplicaDetails = () => {
+  const { ref: projectRef, replicaId } = useParams()
+  const reportGranularityV2 = useFlag('reportGranularityV2')
+
+  const { data = [], isPending: isLoadingDatabases } = useReadReplicasQuery({ projectRef })
+  const replica = data.find((x) => x.identifier === replicaId)
+  const { identifier, connectionString, status: baseStatus, restUrl, region, size } = replica ?? {}
+  const regionLabel = Object.values(AWS_REGIONS).find((x) => x.code === region)?.displayName
+
+  const { data: statuses = [] } = useReadReplicasStatusesQuery({ projectRef })
+  const replicaStatus = statuses.find((x) => x.identifier === identifier)
+  const status = replicaStatus?.status ?? baseStatus
+
+  const { data: loadBalancers = [] } = useLoadBalancersQuery({ projectRef })
+  const loadBalancer = loadBalancers.find((x) =>
+    x.databases.some((x) => x.identifier === identifier)
+  )
+
+  const { data: lagDuration, isPending: isLoadingLag } = useReplicationLagQuery(
+    {
+      id: identifier ?? '',
+      projectRef,
+      connectionString,
+    },
+    { enabled: status === REPLICA_STATUS.ACTIVE_HEALTHY }
+  )
+
+  const { selectedDateRange } = useReportDateRange(
+    REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES,
+    reportGranularityV2
+  )
+  // [Joshen] This is unused but intentional to scaffold the usage for now, refer to comment below
+  const { data: infraMonitoringData, isPending: isFetchingInfraMonitoring } =
+    useInfraMonitoringAttributesQuery(
+      {
+        projectRef,
+        attributes: ['physical_replication_lag_physical_replica_lag_seconds'],
+        databaseIdentifier: identifier,
+        startDate: selectedDateRange.period_start.date,
+        endDate: selectedDateRange.period_end.date,
+        interval: selectedDateRange.interval,
+      },
+      { 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()
+  }, [])
+
+  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` : '-'} />
+          </ChartHeader>
+          <ChartContent
+            isEmpty={chartData.length === 0}
+            emptyState={
+              <ChartEmptyState
+                icon={<BarChart2 size={16} />}
+                title="No data to show"
+                description="It may take up to 24 hours for data to refresh"
+              />
+            }
+            loadingState={<ChartLoadingState />}
+          >
+            <div className="h-56 px-5">
+              <ChartLine
+                data={chartData}
+                dataKey="replication_lag"
+                showGrid={true}
+                showYAxis={true}
+                YAxisProps={{
+                  tickFormatter: (value) => `${value}s`,
+                  width: 80,
+                }}
+                isFullHeight={true}
+              />
+            </div>
+          </ChartContent>
+        </ChartCard>
+      </Chart>
+      <ScaffoldContainer>
+        <ScaffoldSection isFullWidth>
+          <Card>
+            <CardHeader>
+              <CardTitle>Replica Information</CardTitle>
+            </CardHeader>
+            {isLoadingDatabases ? (
+              <CardContent>
+                <GenericSkeletonLoader />
+              </CardContent>
+            ) : (
+              <>
+                <CardContent>
+                  <FormItemLayout
+                    isReactForm={false}
+                    layout="horizontal"
+                    label="Load Balancer URL"
+                    description="RESTful endpoint for querying and managing your databases through your load balancer"
+                  >
+                    <Input readOnly copy className="input-mono" value={loadBalancer?.endpoint} />
+                  </FormItemLayout>
+                </CardContent>
+                <CardContent className="flex flex-col gap-y-4">
+                  <FormItemLayout isReactForm={false} layout="horizontal" label="Replica URL">
+                    <Input readOnly copy className="input-mono" value={restUrl} />
+                  </FormItemLayout>
+                  <FormItemLayout isReactForm={false} layout="horizontal" label="Region">
+                    <Input
+                      readOnly
+                      className="input-mono"
+                      value={regionLabel}
+                      icon={
+                        <img
+                          alt="region icon"
+                          className="w-5 rounded-sm"
+                          src={`${BASE_PATH}/img/regions/${region ?? ''}.svg`}
+                        />
+                      }
+                    />
+                  </FormItemLayout>
+                  <FormItemLayout
+                    isReactForm={false}
+                    layout="horizontal"
+                    label="Compute Size"
+                    description="Size of replica will be identical to the primary database"
+                  >
+                    <Input readOnly className="input-mono" value={size} />
+                  </FormItemLayout>
+                </CardContent>
+              </>
+            )}
+          </Card>
+        </ScaffoldSection>
+      </ScaffoldContainer>
+    </>
+  )
+}
diff --git a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx
index c9845d622ad40..733c658b9bd3c 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx
@@ -1,15 +1,13 @@
 import { Loader2, Minus, MoreVertical, RotateCcw, Trash } from 'lucide-react'
+import Link from 'next/link'
 import { useMemo, useState } from 'react'
 
-import DropReplicaConfirmationModal from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal'
+import { DropReplicaConfirmationModal } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal'
 import { REPLICA_STATUS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
 import { RestartReplicaConfirmationModal } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/RestartReplicaConfirmationModal'
 import { useReplicationLagQuery } from '@/data/read-replicas/replica-lag-query'
 import { type Database } from '@/data/read-replicas/replicas-query'
-import {
-  DatabaseStatus,
-  ReplicaInitializationStatus,
-} from '@/data/read-replicas/replicas-status-query'
+import { DatabaseStatus } from '@/data/read-replicas/replicas-status-query'
 import { formatDatabaseID } from '@/data/read-replicas/replicas.utils'
 import { useParams } from 'common'
 import { Database as DatabaseIcon } from 'icons'
@@ -26,6 +24,7 @@ import {
   TableRow,
 } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns'
+import { getIsInTransition, getStatusLabel } from './ReadReplicas.utils'
 
 interface ReadReplicaRow {
   replica: Database
@@ -38,7 +37,7 @@ export const ReadReplicaRow = ({ replica, replicaStatus, onUpdateReplica }: Read
   const { identifier, region, status: baseStatus } = replica
 
   const status = replicaStatus?.status ?? baseStatus
-  const replicaInitializationStatus = replicaStatus?.replicaInitializationStatus
+  const initStatus = replicaStatus?.replicaInitializationStatus?.status
   const formattedId = formatDatabaseID(identifier ?? '')
 
   const {
@@ -57,54 +56,13 @@ export const ReadReplicaRow = ({ replica, replicaStatus, onUpdateReplica }: Read
   const [showConfirmRestart, setShowConfirmRestart] = useState(false)
   const [showConfirmDrop, setShowConfirmDrop] = useState(false)
 
-  const initStatus = replicaInitializationStatus?.status
   const regionLabel = Object.values(AWS_REGIONS).find((x) => x.code === region)?.displayName
 
-  const isInTransition =
-    (
-      [
-        REPLICA_STATUS.UNKNOWN,
-        REPLICA_STATUS.COMING_UP,
-        REPLICA_STATUS.GOING_DOWN,
-        REPLICA_STATUS.RESTORING,
-        REPLICA_STATUS.RESTARTING,
-        REPLICA_STATUS.RESIZING,
-        REPLICA_STATUS.INIT_READ_REPLICA,
-      ] as string[]
-    ).includes(status) || initStatus === ReplicaInitializationStatus.InProgress
-
-  const statusLabel = useMemo(() => {
-    if (
-      initStatus === ReplicaInitializationStatus.InProgress ||
-      status === REPLICA_STATUS.COMING_UP ||
-      status === REPLICA_STATUS.UNKNOWN ||
-      status === REPLICA_STATUS.INIT_READ_REPLICA
-    ) {
-      return 'Coming up'
-    }
-
-    if (
-      initStatus === ReplicaInitializationStatus.Failed ||
-      status === REPLICA_STATUS.INIT_READ_REPLICA_FAILED
-    ) {
-      return 'Failed'
-    }
-
-    switch (status) {
-      case REPLICA_STATUS.GOING_DOWN:
-        return 'Going down'
-      case REPLICA_STATUS.RESTARTING:
-        return 'Restarting'
-      case REPLICA_STATUS.RESIZING:
-        return 'Resizing'
-      case REPLICA_STATUS.RESTORING:
-        return 'Restoring'
-      case REPLICA_STATUS.ACTIVE_HEALTHY:
-        return 'Healthy'
-      default:
-        return 'Unhealthy'
-    }
-  }, [initStatus, status])
+  const isInTransition = useMemo(
+    () => getIsInTransition({ initStatus, status }),
+    [initStatus, status]
+  )
+  const statusLabel = useMemo(() => getStatusLabel({ initStatus, status }), [initStatus, status])
 
   return (
     <>
@@ -153,21 +111,30 @@ export const ReadReplicaRow = ({ replica, replicaStatus, onUpdateReplica }: Read
 
         <TableCell>
           <div className="flex items-center justify-end gap-x-2">
-            {/* [Joshen] Temporarily hidden - will work on the replica detail page in another PR */}
-            {/* <Button asChild type="default" className="relative">
-              <Link href={`/project/${ref}/database/replication`}>View replication</Link>
-            </Button> */}
+            <Button asChild type="default" className="relative" disabled={status === 'GOING_DOWN'}>
+              <Link href={`/project/${ref}/database/replication/replica/${replica.identifier}`}>
+                View replication
+              </Link>
+            </Button>
             <DropdownMenu>
               <DropdownMenuTrigger>
                 <Button type="default" icon={<MoreVertical />} className="w-7" />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-52">
-                <DropdownMenuItem className="gap-x-2" onClick={() => setShowConfirmRestart(true)}>
+                <DropdownMenuItem
+                  className="gap-x-2"
+                  disabled={status !== 'ACTIVE_HEALTHY'}
+                  onClick={() => setShowConfirmRestart(true)}
+                >
                   <RotateCcw size={14} />
                   <span>Restart replica</span>
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem className="gap-x-2" onClick={() => setShowConfirmDrop(true)}>
+                <DropdownMenuItem
+                  className="gap-x-2"
+                  disabled={status === 'GOING_DOWN'}
+                  onClick={() => setShowConfirmDrop(true)}
+                >
                   <Trash size={14} />
                   <span>Drop replica</span>
                 </DropdownMenuItem>
diff --git a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicas.utils.ts b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicas.utils.ts
new file mode 100644
index 0000000000000..272f3d6edfe79
--- /dev/null
+++ b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicas.utils.ts
@@ -0,0 +1,63 @@
+import { REPLICA_STATUS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
+import { ReplicaInitializationStatus } from '@/data/read-replicas/replicas-status-query'
+
+export const getIsInTransition = ({
+  initStatus,
+  status,
+}: {
+  initStatus?: string
+  status?: string
+}) => {
+  return (
+    (
+      [
+        REPLICA_STATUS.UNKNOWN,
+        REPLICA_STATUS.COMING_UP,
+        REPLICA_STATUS.GOING_DOWN,
+        REPLICA_STATUS.RESTORING,
+        REPLICA_STATUS.RESTARTING,
+        REPLICA_STATUS.RESIZING,
+        REPLICA_STATUS.INIT_READ_REPLICA,
+      ] as string[]
+    ).includes(status ?? '') || initStatus === ReplicaInitializationStatus.InProgress
+  )
+}
+
+export const getStatusLabel = ({
+  initStatus,
+  status,
+}: {
+  initStatus?: string
+  status?: string
+}) => {
+  if (
+    initStatus === ReplicaInitializationStatus.InProgress ||
+    status === REPLICA_STATUS.COMING_UP ||
+    status === REPLICA_STATUS.UNKNOWN ||
+    status === REPLICA_STATUS.INIT_READ_REPLICA
+  ) {
+    return 'Coming up'
+  }
+
+  if (
+    initStatus === ReplicaInitializationStatus.Failed ||
+    status === REPLICA_STATUS.INIT_READ_REPLICA_FAILED
+  ) {
+    return 'Failed'
+  }
+
+  switch (status) {
+    case REPLICA_STATUS.GOING_DOWN:
+      return 'Going down'
+    case REPLICA_STATUS.RESTARTING:
+      return 'Restarting'
+    case REPLICA_STATUS.RESIZING:
+      return 'Resizing'
+    case REPLICA_STATUS.RESTORING:
+      return 'Restoring'
+    case REPLICA_STATUS.ACTIVE_HEALTHY:
+      return 'Healthy'
+    default:
+      return 'Unhealthy'
+  }
+}
diff --git a/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx b/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
index b9cc5d54af68b..aff1a4084f397 100644
--- a/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
@@ -1,16 +1,13 @@
 import '@graphiql/react/dist/style.css'
 import { createGraphiQLFetcher, Fetcher } from '@graphiql/toolkit'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useTheme } from 'next-themes'
 import { useMemo } from 'react'
 import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import GraphiQL from 'components/interfaces/GraphQL/GraphiQL'
-import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
 import { useSessionAccessTokenQuery } from 'data/auth/session-access-token-query'
 import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
-import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
 import { getRoleImpersonationJWT } from 'lib/role-impersonation'
 import { useGetImpersonatedRoleState } from 'state/role-impersonation-state'
@@ -20,16 +17,8 @@ export const GraphiQLTab = () => {
   const { resolvedTheme } = useTheme()
   const { ref: projectRef } = useParams()
   const currentTheme = resolvedTheme?.includes('dark') ? 'dark' : 'light'
-
   const { data: accessToken } = useSessionAccessTokenQuery({ enabled: IS_PLATFORM })
 
-  const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
-  const { data: apiKeys, isFetched } = useAPIKeysQuery(
-    { projectRef, reveal: true },
-    { enabled: canReadAPIKeys }
-  )
-  const { serviceKey, secretKey } = getKeys(apiKeys)
-
   const { data: config } = useProjectPostgrestConfigQuery({ projectRef })
   const jwtSecret = config?.jwt_secret
 
@@ -70,15 +59,15 @@ export const GraphiQLTab = () => {
             opts?.headers?.['Authorization'] ??
             opts?.headers?.['authorization'] ??
             userAuthorization ??
-            `Bearer ${secretKey?.api_key ?? serviceKey?.api_key}`,
+            accessToken,
         },
       })
     }
 
     return customFetcher
-  }, [projectRef, getImpersonatedRoleState, jwtSecret, accessToken, serviceKey, secretKey?.api_key])
+  }, [projectRef, getImpersonatedRoleState, jwtSecret, accessToken])
 
-  if ((IS_PLATFORM && !accessToken) || !isFetched) {
+  if (IS_PLATFORM && !accessToken) {
     return <LogoLoader />
   }
 
diff --git a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
index 140b5bd2f09bf..36d1028933d72 100644
--- a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
@@ -18,6 +18,15 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
 import {
   Alert,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
   Button,
   Card,
   CardContent,
@@ -28,10 +37,10 @@ import {
 } from 'ui'
 import {
   PageSection,
+  PageSectionContent,
   PageSectionMeta,
   PageSectionSummary,
   PageSectionTitle,
-  PageSectionContent,
 } from 'ui-patterns'
 import { FormLayout } from 'ui-patterns/form/Layout/FormLayout'
 
@@ -117,40 +126,64 @@ const SSLConfiguration = () => {
               label="Enforce SSL on incoming connections"
               description="Reject non-SSL connections to your database"
             >
-              <div className="flex items-center justify-end mt-2.5 space-x-2">
-                {(isLoading || isSubmitting) && (
-                  <Loader2 className="animate-spin" strokeWidth={1.5} size={16} />
-                )}
-                {isSuccess && (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      {/* [Joshen] Added div as tooltip is messing with data state property of toggle */}
-                      <div>
-                        <Switch
-                          size="large"
-                          checked={isEnforced}
-                          disabled={
-                            isLoading ||
-                            isSubmitting ||
-                            !canUpdateSSLEnforcement ||
-                            !hasAccessToSSLEnforcement
-                          }
-                          onCheckedChange={toggleSSLEnforcement}
-                        />
-                      </div>
-                    </TooltipTrigger>
-                    {(!canUpdateSSLEnforcement || !hasAccessToSSLEnforcement) && (
-                      <TooltipContent side="bottom" className="w-64 text-center">
-                        {!canUpdateSSLEnforcement
-                          ? 'You need additional permissions to update SSL enforcement for your project'
-                          : !hasAccessToSSLEnforcement
-                            ? 'Your project does not have access to SSL enforcement'
-                            : undefined}
-                      </TooltipContent>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <div className="flex items-center justify-end mt-2.5 space-x-2">
+                    {(isLoading || isSubmitting) && (
+                      <Loader2 className="animate-spin" strokeWidth={1.5} size={16} />
                     )}
-                  </Tooltip>
-                )}
-              </div>
+                    {isSuccess && (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          {/* [Joshen] Added div as tooltip is messing with data state property of toggle */}
+                          <div>
+                            <Switch
+                              size="large"
+                              checked={isEnforced}
+                              disabled={
+                                isLoading ||
+                                isSubmitting ||
+                                !canUpdateSSLEnforcement ||
+                                !hasAccessToSSLEnforcement
+                              }
+                            />
+                          </div>
+                        </TooltipTrigger>
+                        {(!canUpdateSSLEnforcement || !hasAccessToSSLEnforcement) && (
+                          <TooltipContent side="bottom" className="w-64 text-center">
+                            {!canUpdateSSLEnforcement
+                              ? 'You need additional permissions to update SSL enforcement for your project'
+                              : !hasAccessToSSLEnforcement
+                                ? 'Your project does not have access to SSL enforcement'
+                                : undefined}
+                          </TooltipContent>
+                        )}
+                      </Tooltip>
+                    )}
+                  </div>
+                </AlertDialogTrigger>
+                <AlertDialogContent size="medium">
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      Updating SSL enforcement involves a brief downtime
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      A database restart is required for SSL enforcement changes to take place, and
+                      this involves a few minutes of downtime. Confirm to proceed now?
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel disabled={isSubmitting}>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                      variant="warning"
+                      disabled={isSubmitting}
+                      onClick={toggleSSLEnforcement}
+                    >
+                      {!isEnforced ? 'Enable SSL' : 'Disable SSL'}
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
             </FormLayout>
             {isSuccess && !sslEnforcementConfiguration?.appliedSuccessfully && (
               <Alert
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal.tsx
index 4477787a3e8bf..a427514976154 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal.tsx
@@ -15,7 +15,7 @@ interface DropReplicaConfirmationModalProps {
   onCancel: () => void
 }
 
-const DropReplicaConfirmationModal = ({
+export const DropReplicaConfirmationModal = ({
   selectedReplica,
   onSuccess,
   onCancel,
@@ -83,5 +83,3 @@ const DropReplicaConfirmationModal = ({
     </ConfirmationModal>
   )
 }
-
-export default DropReplicaConfirmationModal
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx
index 0e21dcf7ca40d..a66053296b734 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx
@@ -36,7 +36,7 @@ import {
 } from 'ui'
 import DeployNewReplicaPanel from './DeployNewReplicaPanel'
 import DropAllReplicasConfirmationModal from './DropAllReplicasConfirmationModal'
-import DropReplicaConfirmationModal from './DropReplicaConfirmationModal'
+import { DropReplicaConfirmationModal } from './DropReplicaConfirmationModal'
 import { SmoothstepEdge } from './Edge'
 import { REPLICA_STATUS } from './InstanceConfiguration.constants'
 import { addRegionNodes, generateNodes, getDagreGraphLayout } from './InstanceConfiguration.utils'
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts
index e21744f60f707..d55b5f253fe58 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts
@@ -77,6 +77,7 @@ const getDotKeys = (obj: { [k: string]: unknown }, parent?: string): string[] =>
 const genWhereStatement = (table: LogsTableName, filters: Filters) => {
   const keys = Object.keys(filters)
   const filterTemplates = SQL_FILTER_TEMPLATES[table]
+
   const _resolveTemplateToStatement = (dotKey: string): string | null => {
     const template = filterTemplates[dotKey]
     const value = get(filters, dotKey)
diff --git a/apps/studio/components/interfaces/Support/SupportFormPage.tsx b/apps/studio/components/interfaces/Support/SupportFormPage.tsx
index a985e090f137b..672103a7a812c 100644
--- a/apps/studio/components/interfaces/Support/SupportFormPage.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormPage.tsx
@@ -8,7 +8,6 @@ import { toast } from 'sonner'
 // End of third-party imports
 
 import CopyButton from 'components/ui/CopyButton'
-import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useIncidentStatusQuery } from 'data/platform/incident-status-query'
 import { usePlatformStatusQuery } from 'data/platform/platform-status-query'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
@@ -64,12 +63,8 @@ export function SupportFormPage() {
 }
 
 function SupportFormPageContent() {
-  const { data: organizations } = useOrganizationsQuery()
   const [state, dispatch] = useReducer(supportFormReducer, undefined, createInitialSupportFormState)
-
   const { form, initialError, projectRef, orgSlug } = useSupportForm(dispatch)
-  const selectedOrg = organizations?.find((org) => org.slug === orgSlug)
-  const isFreePlan = selectedOrg?.plan.id === 'free'
 
   const {
     data: incidents,
diff --git a/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx b/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx
index bb6d96794a500..3b9cd6c2c1df4 100644
--- a/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx
+++ b/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx
@@ -1,20 +1,23 @@
 import { useRouter } from 'next/router'
 
-import { useAppBannerContext } from 'components/interfaces/App/AppBannerWrapperContext'
+import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
+import { LOCAL_STORAGE_KEYS } from 'common'
 import { HeaderBanner } from 'components/interfaces/Organization/HeaderBanner'
 import { InlineLink } from 'components/ui/InlineLink'
 import { TimestampInfo } from 'ui-patterns'
 
 /**
  * Used to display urgent notices that apply for all users, such as maintenance windows.
- * This file, like AppBannerWrapperContext.tsx, is meant to be dynamic.
- * Update this as and when we need to use the NoticeBanner.
  */
 export const NoticeBanner = () => {
   const router = useRouter()
-  const { maintenanceWindowBannerAcknowledged, onUpdateAcknowledged } = useAppBannerContext()
 
-  if (router.pathname.includes('sign-in') || maintenanceWindowBannerAcknowledged) {
+  const [bannerAcknowledged, setBannerAcknowledge, { isSuccess }] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.MAINTENANCE_WINDOW_BANNER,
+    false
+  )
+
+  if (router.pathname.includes('sign-in') || !isSuccess || bannerAcknowledged) {
     return null
   }
 
@@ -35,7 +38,7 @@ export const NoticeBanner = () => {
           </InlineLink>
         </>
       }
-      onDismiss={() => onUpdateAcknowledged('maintenance-window-banner-2026-01-16')}
+      onDismiss={() => setBannerAcknowledge(true)}
     />
   )
 }
diff --git a/apps/studio/components/layouts/AuthenticationLayout.tsx b/apps/studio/components/layouts/AuthenticationLayout.tsx
index 6ba3373faca6d..077a1d1fefe61 100644
--- a/apps/studio/components/layouts/AuthenticationLayout.tsx
+++ b/apps/studio/components/layouts/AuthenticationLayout.tsx
@@ -1,17 +1,14 @@
 import { PropsWithChildren } from 'react'
 
 import { AppBannerWrapper } from 'components/interfaces/App/AppBannerWrapper'
-import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext'
 
 export const AuthenticationLayout = ({ children }: PropsWithChildren<{}>) => {
   return (
-    <AppBannerContextProvider>
-      <div className="flex flex-col min-h-screen w-screen">
-        <AppBannerWrapper />
-        <div className="flex flex-1 w-full overflow-y-hidden">
-          <div className="flex-grow h-full overflow-y-auto">{children}</div>
-        </div>
+    <div className="flex flex-col min-h-screen w-screen">
+      <AppBannerWrapper />
+      <div className="flex flex-1 w-full overflow-y-hidden">
+        <div className="flex-grow h-full overflow-y-auto">{children}</div>
       </div>
-    </AppBannerContextProvider>
+    </div>
   )
 }
diff --git a/apps/studio/components/layouts/DefaultLayout.tsx b/apps/studio/components/layouts/DefaultLayout.tsx
index 09685490fd831..3b838766968c3 100644
--- a/apps/studio/components/layouts/DefaultLayout.tsx
+++ b/apps/studio/components/layouts/DefaultLayout.tsx
@@ -3,7 +3,6 @@ import { PropsWithChildren } from 'react'
 
 import { LOCAL_STORAGE_KEYS, useParams } from 'common'
 import { AppBannerWrapper } from 'components/interfaces/App/AppBannerWrapper'
-import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext'
 import { Sidebar } from 'components/interfaces/Sidebar'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { useCheckLatestDeploy } from 'hooks/use-check-latest-deploy'
@@ -61,50 +60,48 @@ export const DefaultLayout = ({
     <SidebarProvider defaultOpen={false}>
       <LayoutSidebarProvider>
         <ProjectContextProvider projectRef={ref}>
-          <AppBannerContextProvider>
-            <div className="flex flex-col h-screen w-screen">
-              {/* Top Banner */}
-              <AppBannerWrapper />
-              <div className="flex-shrink-0">
-                <MobileNavigationBar hideMobileMenu={hideMobileMenu} />
-                <LayoutHeader
-                  showProductMenu={showProductMenu}
-                  headerTitle={headerTitle}
-                  backToDashboardURL={
-                    router.pathname.startsWith('/account') ? backToDashboardURL : undefined
-                  }
-                />
-              </div>
-              {/* Main Content Area */}
-              <div className="flex flex-1 w-full overflow-y-hidden">
-                {/* Sidebar - Only show for project pages, not account pages */}
-                {!router.pathname.startsWith('/account') && <Sidebar />}
-                {/* Main Content with Layout Sidebar */}
-                <ResizablePanelGroup
-                  direction="horizontal"
-                  className="h-full w-full overflow-x-hidden flex-1 flex flex-row gap-0"
-                  autoSaveId="default-layout-content"
+          <div className="flex flex-col h-screen w-screen">
+            {/* Top Banner */}
+            <AppBannerWrapper />
+            <div className="flex-shrink-0">
+              <MobileNavigationBar hideMobileMenu={hideMobileMenu} />
+              <LayoutHeader
+                showProductMenu={showProductMenu}
+                headerTitle={headerTitle}
+                backToDashboardURL={
+                  router.pathname.startsWith('/account') ? backToDashboardURL : undefined
+                }
+              />
+            </div>
+            {/* Main Content Area */}
+            <div className="flex flex-1 w-full overflow-y-hidden">
+              {/* Sidebar - Only show for project pages, not account pages */}
+              {!router.pathname.startsWith('/account') && <Sidebar />}
+              {/* Main Content with Layout Sidebar */}
+              <ResizablePanelGroup
+                direction="horizontal"
+                className="h-full w-full overflow-x-hidden flex-1 flex flex-row gap-0"
+                autoSaveId="default-layout-content"
+              >
+                <ResizablePanel
+                  id="panel-content"
+                  order={1}
+                  className="w-full"
+                  minSize={contentMinSizePercentage}
+                  maxSize={contentMaxSizePercentage}
+                  defaultSize={contentMaxSizePercentage}
                 >
-                  <ResizablePanel
-                    id="panel-content"
-                    order={1}
-                    className="w-full"
-                    minSize={contentMinSizePercentage}
-                    maxSize={contentMaxSizePercentage}
-                    defaultSize={contentMaxSizePercentage}
-                  >
-                    <div className="h-full overflow-y-auto">{children}</div>
-                  </ResizablePanel>
-                  <LayoutSidebar
-                    order={2}
-                    minSize={100 - contentMaxSizePercentage}
-                    maxSize={100 - contentMinSizePercentage}
-                    defaultSize={100 - contentMaxSizePercentage}
-                  />
-                </ResizablePanelGroup>
-              </div>
+                  <div className="h-full overflow-y-auto">{children}</div>
+                </ResizablePanel>
+                <LayoutSidebar
+                  order={2}
+                  minSize={100 - contentMaxSizePercentage}
+                  maxSize={100 - contentMinSizePercentage}
+                  defaultSize={100 - contentMaxSizePercentage}
+                />
+              </ResizablePanelGroup>
             </div>
-          </AppBannerContextProvider>
+          </div>
         </ProjectContextProvider>
       </LayoutSidebarProvider>
     </SidebarProvider>
diff --git a/apps/studio/components/layouts/PageLayout/PageHeader.tsx b/apps/studio/components/layouts/PageLayout/PageHeader.tsx
index d04c80c4c1d2a..44efb6a01ea72 100644
--- a/apps/studio/components/layouts/PageLayout/PageHeader.tsx
+++ b/apps/studio/components/layouts/PageLayout/PageHeader.tsx
@@ -111,12 +111,16 @@ export const PageHeader = ({
             <div className="flex items-center gap-4">
               {icon && <div className="text-foreground-light">{icon}</div>}
               <div className="space-y-1">
-                {title && <ScaffoldTitle>{title}</ScaffoldTitle>}
-                {subtitle && (
-                  <ScaffoldDescription className="text-sm text-foreground-light">
-                    {subtitle}
-                  </ScaffoldDescription>
-                )}
+                {title &&
+                  (typeof title === 'string' ? <ScaffoldTitle>{title}</ScaffoldTitle> : title)}
+                {subtitle &&
+                  (typeof subtitle === 'string' ? (
+                    <ScaffoldDescription className="text-sm text-foreground-light">
+                      {subtitle}
+                    </ScaffoldDescription>
+                  ) : (
+                    subtitle
+                  ))}
               </div>
             </div>
           </div>
diff --git a/apps/studio/data/analytics/infra-monitoring-query.ts b/apps/studio/data/analytics/infra-monitoring-query.ts
index 55f00aa763941..edf14ba4ce808 100644
--- a/apps/studio/data/analytics/infra-monitoring-query.ts
+++ b/apps/studio/data/analytics/infra-monitoring-query.ts
@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
+import { UseCustomQueryOptions } from 'types'
 import type { AnalyticsInterval } from './constants'
 import { analyticsKeys } from './keys'
-import { UseCustomQueryOptions } from 'types'
 
 export type InfraMonitoringAttribute =
   | 'max_cpu_usage'
@@ -23,6 +23,7 @@ export type InfraMonitoringAttribute =
   | 'realtime_payload_size'
   | 'realtime_sum_connections_connected'
   | 'realtime_replication_connection_lag'
+  | 'physical_replication_lag_physical_replica_lag_seconds'
 
 export type InfraMonitoringSeriesMetadata = {
   yAxisLimit: number
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index c5e43132a0d69..a132b4b30cd8e 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -42,7 +42,6 @@ import {
   useThemeSandbox,
 } from 'common'
 import MetaFaviconsPagesRouter from 'common/MetaFavicons/pages-router'
-import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext'
 import { StudioCommandMenu } from 'components/interfaces/App/CommandMenu'
 import { StudioCommandProvider as CommandProvider } from 'components/interfaces/App/CommandMenu/StudioCommandProvider'
 import { FeaturePreviewContextProvider } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
@@ -61,7 +60,6 @@ import { Telemetry } from 'lib/telemetry'
 import { AiAssistantStateContextProvider } from 'state/ai-assistant-state'
 import type { AppPropsWithLayout } from 'types'
 import { SonnerToaster, TooltipProvider } from 'ui'
-import { ToastErrorTracker } from 'lib/toast-errors'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -161,21 +159,19 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                         enableSystem
                         disableTransitionOnChange
                       >
-                        <AppBannerContextProvider>
-                          <AiAssistantStateContextProvider>
-                            <CommandProvider>
-                              <FeaturePreviewContextProvider>
-                                <MainScrollContainerProvider>
-                                  {getLayout(<Component {...pageProps} />)}
-                                </MainScrollContainerProvider>
-                                <StudioCommandMenu />
-                                <FeaturePreviewModal />
-                              </FeaturePreviewContextProvider>
-                              <SonnerToaster position="top-right" />
-                              <MonacoThemeProvider />
-                            </CommandProvider>
-                          </AiAssistantStateContextProvider>
-                        </AppBannerContextProvider>
+                        <AiAssistantStateContextProvider>
+                          <CommandProvider>
+                            <FeaturePreviewContextProvider>
+                              <MainScrollContainerProvider>
+                                {getLayout(<Component {...pageProps} />)}
+                              </MainScrollContainerProvider>
+                              <StudioCommandMenu />
+                              <FeaturePreviewModal />
+                            </FeaturePreviewContextProvider>
+                            <SonnerToaster position="top-right" />
+                            <MonacoThemeProvider />
+                          </CommandProvider>
+                        </AiAssistantStateContextProvider>
                       </ThemeProvider>
                     </RouteValidationWrapper>
                   </TooltipProvider>
diff --git a/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx b/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx
new file mode 100644
index 0000000000000..c50ac67847502
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx
@@ -0,0 +1,186 @@
+import { Loader2, Trash } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useMemo, useState } from 'react'
+
+import { ReadReplicaDetails } from '@/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails'
+import {
+  getIsInTransition,
+  getStatusLabel,
+} from '@/components/interfaces/Database/Replication/ReadReplicas/ReadReplicas.utils'
+import { DropReplicaConfirmationModal } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal'
+import { REPLICA_STATUS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
+import { RestartReplicaConfirmationModal } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/RestartReplicaConfirmationModal'
+import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
+import { ScaffoldDescription, ScaffoldTitle } from '@/components/layouts/Scaffold'
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import CopyButton from '@/components/ui/CopyButton'
+import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
+import {
+  ReplicaInitializationStatus,
+  useReadReplicasStatusesQuery,
+} from '@/data/read-replicas/replicas-status-query'
+import { useParams } from 'common'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
+import { DefaultLayout } from 'components/layouts/DefaultLayout'
+import { Database } from 'icons'
+import { AWS_REGIONS } from 'shared-data'
+import type { NextPageWithLayout } from 'types'
+import { Badge, Button } from 'ui'
+import { ShimmeringLoader } from 'ui-patterns'
+
+const DatabaseReadReplicaPage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ref, replicaId } = useParams()
+
+  const [showConfirmRestart, setShowConfirmRestart] = useState(false)
+  const [showConfirmDrop, setShowConfirmDrop] = useState(false)
+  const [statusRefetchInterval, setStatusRefetchInterval] = useState<number | false>(5000)
+
+  const {
+    data: databases = [],
+    isPending: isLoadingDatabases,
+    isSuccess: isSuccessDatabases,
+  } = useReadReplicasQuery({ projectRef: ref })
+  const replica = databases.find((x) => x.identifier === replicaId)
+  const { identifier, region, status: baseStatus } = replica ?? {}
+
+  const { data: statuses = [], isSuccess: isSuccessReplicasStatuses } =
+    useReadReplicasStatusesQuery({ projectRef: ref }, { refetchInterval: statusRefetchInterval })
+  const replicaStatus = statuses.find((x) => x.identifier === identifier)
+  const status = replicaStatus?.status ?? baseStatus
+  const initStatus = replicaStatus?.replicaInitializationStatus?.status
+
+  const regionLabel = Object.values(AWS_REGIONS).find((x) => x.code === region)?.displayName
+  const statusLabel = useMemo(() => getStatusLabel({ initStatus, status }), [initStatus, status])
+  const isInTransition = useMemo(
+    () => getIsInTransition({ initStatus, status }),
+    [initStatus, status]
+  )
+
+  useEffect(() => {
+    if (!isSuccessReplicasStatuses) return
+
+    const pollReplicas = async () => {
+      const fixedStatuses = [
+        REPLICA_STATUS.ACTIVE_HEALTHY,
+        REPLICA_STATUS.ACTIVE_UNHEALTHY,
+        REPLICA_STATUS.INIT_READ_REPLICA_FAILED,
+      ]
+      const replicasInTransition = statuses.filter((db) => {
+        const { status } = db.replicaInitializationStatus || {}
+        return (
+          !fixedStatuses.includes(db.status) || status === ReplicaInitializationStatus.InProgress
+        )
+      })
+      const hasTransientStatus = replicasInTransition.length > 0
+
+      // If all replicas are active healthy, stop fetching statuses
+      if (!hasTransientStatus && statuses.length === databases.length) {
+        setStatusRefetchInterval(false)
+      }
+    }
+
+    pollReplicas()
+  }, [databases.length, isSuccessReplicasStatuses, statuses])
+
+  return (
+    <PageLayout
+      title={
+        <div className="flex items-center gap-x-3">
+          <ScaffoldTitle>Read Replica</ScaffoldTitle>
+          {isSuccessDatabases && (
+            <>
+              <Badge
+                variant={
+                  statusLabel === 'Healthy'
+                    ? 'success'
+                    : statusLabel === 'Failed'
+                      ? 'destructive'
+                      : 'default'
+                }
+              >
+                {statusLabel}
+              </Badge>
+              {isInTransition && <Loader2 size={14} className="animate-spin" />}
+            </>
+          )}
+        </div>
+      }
+      subtitle={
+        isLoadingDatabases ? (
+          <ShimmeringLoader className="py-[11px]" />
+        ) : (
+          <div className="flex items-center gap-x-2 !mt-0">
+            <ScaffoldDescription>ID: {identifier}</ScaffoldDescription>
+            <CopyButton iconOnly type="default" text={identifier ?? ''} />
+          </div>
+        )
+      }
+      icon={
+        <div className="shrink-0 w-10 h-10 relative bg-surface-100 border rounded-md flex items-center justify-center">
+          <Database size={20} className="text-foreground-light" />
+        </div>
+      }
+      breadcrumbs={[
+        {
+          label: 'Replication',
+          href: `/project/${ref}/database/replication`,
+        },
+        {
+          label: `Read Replica - ${regionLabel}`,
+        },
+      ]}
+      secondaryActions={
+        <ButtonTooltip
+          type="default"
+          className="w-7"
+          icon={<Trash />}
+          tooltip={{
+            content: { side: 'bottom', text: 'Drop replica' },
+          }}
+          onClick={() => setShowConfirmDrop(true)}
+        />
+      }
+      primaryActions={[
+        <Button asChild key="logs" type="default">
+          <Link
+            href={`/project/${ref}/logs/postgres-logs${!!identifier ? `?db=${identifier}` : ''}`}
+          >
+            View logs
+          </Link>
+        </Button>,
+        <Button
+          key="drop"
+          type="default"
+          disabled={status !== 'ACTIVE_HEALTHY'}
+          onClick={() => setShowConfirmRestart(true)}
+        >
+          Restart replica
+        </Button>,
+      ]}
+    >
+      <ReadReplicaDetails />
+
+      <DropReplicaConfirmationModal
+        selectedReplica={showConfirmDrop ? replica : undefined}
+        onSuccess={() => router.push(`/project/${ref}/database/replication`)}
+        onCancel={() => setShowConfirmDrop(false)}
+      />
+
+      <RestartReplicaConfirmationModal
+        selectedReplica={showConfirmRestart ? replica : undefined}
+        onSuccess={() => setStatusRefetchInterval(5000)}
+        onCancel={() => setShowConfirmRestart(false)}
+      />
+    </PageLayout>
+  )
+}
+
+DatabaseReadReplicaPage.getLayout = (page) => (
+  <DefaultLayout>
+    <DatabaseLayout title="Database Replication">{page}</DatabaseLayout>
+  </DefaultLayout>
+)
+
+export default DatabaseReadReplicaPage
diff --git a/apps/studio/pages/project/[ref]/logs/edge-logs.tsx b/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
index 89e7d1fa99c5d..155e0b27d0662 100644
--- a/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
@@ -1,14 +1,14 @@
-import { useRouter } from 'next/router'
-
+import { useParams } from 'common'
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
+import { parseAsString, useQueryState } from 'nuqs'
 import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref } = useParams()
+  const [identifier] = useQueryState('db', parseAsString)
 
   return (
     <LogsPreviewer
@@ -16,6 +16,7 @@ export const LogPage: NextPageWithLayout = () => {
       queryType="api"
       projectRef={ref as string}
       tableName={LogsTableName.EDGE}
+      filterOverride={!!identifier ? { identifier } : undefined}
     />
   )
 }
diff --git a/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx b/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
index 4c2c298b58584..a6300e3ae3b0a 100644
--- a/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
@@ -1,3 +1,5 @@
+import { parseAsString, useQueryState } from 'nuqs'
+
 import { useParams } from 'common'
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
@@ -9,6 +11,7 @@ import { LogoLoader } from 'ui'
 
 export const LogPage: NextPageWithLayout = () => {
   const { ref } = useParams()
+  const [identifier] = useQueryState('db', parseAsString)
   const { isPending: isLoading } = useSupavisorConfigurationQuery({ projectRef: ref ?? 'default' })
 
   // this prevents initial load of pooler logs before config has been retrieved
@@ -16,10 +19,11 @@ export const LogPage: NextPageWithLayout = () => {
 
   return (
     <LogsPreviewer
+      condensedLayout
+      queryType="supavisor"
       projectRef={ref as string}
-      condensedLayout={true}
       tableName={LogsTableName.SUPAVISOR}
-      queryType={'supavisor'}
+      filterOverride={!!identifier ? { identifier } : undefined}
     />
   )
 }
diff --git a/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx b/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
index a62e84164bab4..6cf3c10f3acbe 100644
--- a/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
@@ -1,5 +1,6 @@
-import { useRouter } from 'next/router'
+import { parseAsString, useQueryState } from 'nuqs'
 
+import { useParams } from 'common'
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
 import DefaultLayout from 'components/layouts/DefaultLayout'
@@ -7,15 +8,16 @@ import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref } = useParams()
+  const [identifier] = useQueryState('db', parseAsString)
 
   return (
     <LogsPreviewer
+      condensedLayout
+      queryType="database"
       projectRef={ref as string}
-      condensedLayout={true}
       tableName={LogsTableName.POSTGRES}
-      queryType={'database'}
+      filterOverride={!!identifier ? { identifier } : undefined}
     />
   )
 }
diff --git a/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx b/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
index af38c4c67853e..94001f79f72e5 100644
--- a/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
@@ -1,5 +1,6 @@
-import { useRouter } from 'next/router'
+import { parseAsString, useQueryState } from 'nuqs'
 
+import { useParams } from 'common'
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
 import { LogsTableEmptyState } from 'components/interfaces/Settings/Logs/LogsTableEmptyState'
@@ -8,8 +9,8 @@ import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref } = useParams()
+  const [identifier] = useQueryState('db', parseAsString)
 
   return (
     <LogsPreviewer
@@ -23,6 +24,7 @@ export const LogPage: NextPageWithLayout = () => {
           description="Only errors are captured into PostgREST logs by default. Check the API Gateway logs for HTTP requests."
         />
       }
+      filterOverride={!!identifier ? { identifier } : undefined}
     />
   )
 }
diff --git a/apps/studio/pages/project/[ref]/observability/database.tsx b/apps/studio/pages/project/[ref]/observability/database.tsx
index b764af9067042..48760a5591064 100644
--- a/apps/studio/pages/project/[ref]/observability/database.tsx
+++ b/apps/studio/pages/project/[ref]/observability/database.tsx
@@ -74,7 +74,6 @@ const DatabaseUsage = () => {
     updateDateRange,
     datePickerValue,
     datePickerHelpers,
-    isOrgPlanLoading,
     orgPlan,
     showUpgradePrompt,
     setShowUpgradePrompt,
diff --git a/packages/ui-patterns/index.tsx b/packages/ui-patterns/index.tsx
index 1bec804ac3423..1be06287121d5 100644
--- a/packages/ui-patterns/index.tsx
+++ b/packages/ui-patterns/index.tsx
@@ -8,6 +8,7 @@ export * from './src/admonition'
 export * from './src/AssistantChat/AssistantChatForm'
 export * from './src/AuthenticatedDropdownMenu'
 export * from './src/Banners'
+export * from './src/Chart'
 export * from './src/CommandMenu'
 export * from './src/ComputeBadge'
 export * from './src/EmptyStatePresentational'