diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.test.tsx
index 24d0c73b802..78fab0b282e 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.test.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.test.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event'
 import { platformComponents as components } from 'api-types'
 import { mockAnimationsApi } from 'jsdom-testing-mocks'
 import { HttpResponse } from 'msw'
+import { Table, TableBody } from 'ui'
 import { describe, expect, test, vi } from 'vitest'
 
 import { DestinationRow as DestinationRowComponent } from './DestinationRow'
@@ -68,12 +69,13 @@ const addDestinationMock = () =>
       }),
   })
 
-const addPipelinesMock = () =>
+const addPipelinesMock = (waitForResponse?: Promise<void>) =>
   addAPIMock({
     method: 'get',
     path: '/platform/replication/:ref/pipelines',
-    response: () =>
-      HttpResponse.json<ReplicationPipelinesResponse>({
+    response: async () => {
+      await waitForResponse
+      return HttpResponse.json<ReplicationPipelinesResponse>({
         pipelines: [
           {
             id: PIPELINE_ID,
@@ -89,7 +91,8 @@ const addPipelinesMock = () =>
             },
           },
         ],
-      }),
+      })
+    },
   })
 
 const addPipelineStatusMock = (statusName: ReplicationPipelineStatusResponse['status']['name']) =>
@@ -145,6 +148,38 @@ describe('DestinationRow', () => {
     addVersionMock()
   }
 
+  test('shows the destination before its pipeline details load', async () => {
+    let finishPipelineRequest = () => {}
+    const pendingPipeline = new Promise<void>((resolve) => {
+      finishPipelineRequest = resolve
+    })
+    addSourcesMock()
+    addDestinationMock()
+    addPipelinesMock(pendingPipeline)
+    addPipelineStatusMock('started')
+    addReplicationStatusMock(0)
+    addVersionMock()
+
+    customRender(
+      <Table>
+        <TableBody>
+          <DestinationRow destinationId={DESTINATION_ID} />
+        </TableBody>
+      </Table>
+    )
+
+    const row = (await screen.findByText('My BigQuery Destination')).closest('tr')
+    expect(row).toBeInTheDocument()
+    expect(row).not.toHaveAttribute('tabindex')
+    expect(screen.queryByRole('button', { name: 'Pipeline options' })).not.toBeInTheDocument()
+
+    await act(async () => finishPipelineRequest())
+
+    expect(await screen.findByText('supabase_realtime')).toBeInTheDocument()
+    expect(row).toHaveAttribute('tabindex', '0')
+    expect(screen.getByRole('button', { name: 'Pipeline options' })).toBeInTheDocument()
+  })
+
   test('waits for asynchronous shutdown before deleting the pipeline', async () => {
     addAllMocks()
     routerMock.setCurrentUrl('/project/default/database/pipelines')
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
index 7766862c6da..d9c70607358 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
@@ -3,7 +3,7 @@ import { ChevronRight, Minus } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { toast } from 'sonner'
-import { TableCell, TableRow } from 'ui'
+import { cn, TableCell, TableRow } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { DeleteDestination } from './DeleteDestination'
@@ -50,9 +50,8 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
     error: pipelineError,
     isPending: isPipelineLoading,
     isError: isPipelineError,
-    isSuccess: isPipelineSuccess,
   } = pipelineFetcher
-  const destinationName = destination?.name ?? ''
+  const destinationName = destination?.name ?? pipeline?.destination_name ?? ''
 
   const {
     error: pipelineStatusError,
@@ -134,8 +133,7 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
     }
   }
 
-  // Five distinct states, so early returns rather than a ternary chain. The row only renders once
-  // a pipeline exists, so there is no "no pipeline" case to handle here.
+  // Five distinct states, so early returns rather than a ternary chain.
   const renderLag = () => {
     if (isReplicationStatusLoading) return <ShimmeringLoader />
     if (isInitialSyncRunning)
@@ -161,39 +159,41 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
           </TableCell>
         </TableRow>
       )}
-      {isPipelineSuccess && pipeline && (
+      {(isPipelineLoading || pipeline) && (
         <TableRow
-          className="relative cursor-pointer focus-inset"
+          className={cn('relative', pipeline && 'cursor-pointer focus-inset')}
           onClick={handleNavigation}
           onAuxClick={handleNavigation}
           onKeyDown={handleNavigation}
-          tabIndex={0}
+          tabIndex={pipeline ? 0 : undefined}
         >
           <TableCell className="!pr-1">
             {type ? <DestinationLogo type={type} hasErrors={hasTableErrors} /> : null}
           </TableCell>
 
           <TableCell className="max-w-[180px]">
-            {isPipelineLoading ? (
+            {isPipelineLoading && !destinationName ? (
               <ShimmeringLoader />
             ) : (
               <div className="flex flex-col gap-y-0.5">
                 <p className="text-sm font-medium text-foreground truncate">
                   {destinationName || type}
                 </p>
-                <DetailSubtext className="flex items-center gap-x-1.5">
-                  <span>#{pipeline?.id}</span>
-                  <span aria-hidden>&middot;</span>
-                  <span>{type}</span>
-                  {hasTableErrors && (
-                    <>
-                      <span aria-hidden>&middot;</span>
-                      <span className="text-destructive">
-                        {errorCount} table error{errorCount === 1 ? '' : 's'}
-                      </span>
-                    </>
-                  )}
-                </DetailSubtext>
+                {pipeline && (
+                  <DetailSubtext className="flex items-center gap-x-1.5">
+                    <span>#{pipeline.id}</span>
+                    <span aria-hidden>&middot;</span>
+                    <span>{type}</span>
+                    {hasTableErrors && (
+                      <>
+                        <span aria-hidden>&middot;</span>
+                        <span className="text-destructive">
+                          {errorCount} table error{errorCount === 1 ? '' : 's'}
+                        </span>
+                      </>
+                    )}
+                  </DetailSubtext>
+                )}
               </div>
             )}
           </TableCell>
@@ -232,32 +232,38 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
 
           <TableCell>
             <div className="flex items-center justify-end gap-x-2">
-              <div
-                onClick={(event) => event.stopPropagation()}
-                onAuxClick={(event) => event.stopPropagation()}
-                onKeyDown={(event) => event.stopPropagation()}
-              >
-                <RowMenu
-                  destinationId={destinationId}
-                  pipeline={pipeline}
-                  pipelineStatus={pipelineStatus?.status}
-                  error={pipelineStatusError}
-                  isLoading={isPipelineStatusLoading}
-                  isError={isPipelineStatusError}
-                  onDeleteClick={() => setShowDeleteDestinationForm(true)}
-                  hasUpdate={hasUpdate}
-                  onUpdateClick={() => setShowUpdateVersionModal(true)}
-                />
-              </div>
-              <ChevronRight
-                size={16}
-                strokeWidth={1.5}
-                className="text-foreground-lighter"
-                aria-hidden
-              />
-              <button tabIndex={-1} className="sr-only">
-                Go to pipeline details
-              </button>
+              {pipeline ? (
+                <>
+                  <div
+                    onClick={(event) => event.stopPropagation()}
+                    onAuxClick={(event) => event.stopPropagation()}
+                    onKeyDown={(event) => event.stopPropagation()}
+                  >
+                    <RowMenu
+                      destinationId={destinationId}
+                      pipeline={pipeline}
+                      pipelineStatus={pipelineStatus?.status}
+                      error={pipelineStatusError}
+                      isLoading={isPipelineStatusLoading}
+                      isError={isPipelineStatusError}
+                      onDeleteClick={() => setShowDeleteDestinationForm(true)}
+                      hasUpdate={hasUpdate}
+                      onUpdateClick={() => setShowUpdateVersionModal(true)}
+                    />
+                  </div>
+                  <ChevronRight
+                    size={16}
+                    strokeWidth={1.5}
+                    className="text-foreground-lighter"
+                    aria-hidden
+                  />
+                  <button tabIndex={-1} className="sr-only">
+                    Go to pipeline details
+                  </button>
+                </>
+              ) : (
+                <ShimmeringLoader className="h-6 w-6 py-0" />
+              )}
             </div>
           </TableCell>
         </TableRow>
diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
index a65f24d008b..2e21f98ddc3 100644
--- a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
@@ -22,7 +22,7 @@ import {
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
-import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { GenericTableLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { DestinationPanel } from './DestinationPanel/DestinationPanel'
 import { DestinationType } from './DestinationPanel/DestinationPanel.types'
@@ -363,7 +363,9 @@ export const Destinations = () => {
           <AlertError error={destinationsError} subject="Failed to retrieve pipelines" />
         )}
 
-        {isDestinationsLoading && <GenericSkeletonLoader />}
+        {isDestinationsLoading && (
+          <GenericTableLoader headers={[null, 'Name', 'Status', 'Lag', 'Publication', null]} />
+        )}
 
         {!isDestinationsLoading && hasDestinations && (
           <Card>
diff --git a/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx b/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx
index 86f5de20ae2..b5245b3ea66 100644
--- a/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx
@@ -81,7 +81,7 @@ export const PipelineStatePill = ({
             {shouldShowError ? 'Unknown' : label}
           </StateDot>
         </TooltipTrigger>
-        <TooltipContent side="bottom" className="max-w-xs">
+        <TooltipContent side="bottom" className="max-w-64">
           {tooltipMessage}
           {isError && isRequestPending && ` Unable to refresh status: ${error?.message}.`}
         </TooltipContent>
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx
index efc35800f6c..eea85b96784 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx
@@ -244,7 +244,7 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
           </BreadcrumbList>
         </PageBreadcrumbs>
 
-        <PageHeader size="large" className="border-b py-4">
+        <PageHeader size="full" className="border-b py-4 [&>div]:px-4 [&>div]:xl:px-4">
           <PageHeaderMeta>
             <PageHeaderIcon>
               {isPipelineIdentityLoading ? (
diff --git a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
index 1246f26ad9f..2629cb1e7fc 100644
--- a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
@@ -166,7 +166,7 @@ export const RowMenu = ({
             />
             {hasUpdate && (
               <span
-                className="absolute -top-0.5 -right-0.5 h-2 w-2 bg-primary-bright rounded-full"
+                className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-primary-bright"
                 aria-hidden
               />
             )}
@@ -184,12 +184,16 @@ export const RowMenu = ({
           {hasUpdate && (
             <>
               <DropdownMenuItem
-                className="space-x-2"
+                className="gap-x-2"
                 onClick={() => onUpdateClick?.()}
                 disabled={isPipelineRequestPending}
               >
                 <ArrowUpCircle size={14} />
                 <p>Update available</p>
+                <span
+                  className="ml-auto h-2 w-2 shrink-0 rounded-full bg-primary-bright"
+                  aria-hidden
+                />
               </DropdownMenuItem>
               <DropdownMenuSeparator />
             </>
diff --git a/apps/studio/components/interfaces/Database/Replication/UpdateVersionModal.tsx b/apps/studio/components/interfaces/Database/Replication/UpdateVersionModal.tsx
index 2aa7531d2e8..5629d7239fc 100644
--- a/apps/studio/components/interfaces/Database/Replication/UpdateVersionModal.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/UpdateVersionModal.tsx
@@ -83,24 +83,20 @@ export const UpdateVersionModal = ({ visible, pipeline, onClose }: UpdateVersion
             ? 'A newer pipeline version is available with improvements and bug fixes. The pipeline will restart and continue from where it left off.'
             : 'A newer pipeline version is available with improvements and bug fixes.'}
         </p>
-        <div className="overflow-hidden rounded-md border">
-          <table className="w-full text-sm">
-            <tbody aria-live="polite" aria-atomic="true">
-              <tr className="border-b">
-                <td className="px-3 py-2 text-foreground-lighter">Current</td>
-                <td className="px-3 py-2 text-right text-foreground" translate="no">
-                  {isLoadingVersion ? 'Loading…' : (currentVersionName ?? 'Unknown')}
-                </td>
-              </tr>
-              <tr>
-                <td className="px-3 py-2 text-foreground-lighter">New</td>
-                <td className="px-3 py-2 text-right text-foreground" translate="no">
-                  {isLoadingVersion ? 'Loading…' : (newVersionName ?? 'Unknown')}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        <dl className="divide-y overflow-hidden rounded-md border text-sm" aria-live="polite">
+          <div className="px-3 py-2">
+            <dt className="text-foreground-lighter">Current</dt>
+            <dd className="mt-1 break-all text-foreground" translate="no">
+              {isLoadingVersion ? 'Loading…' : (currentVersionName ?? 'Unknown')}
+            </dd>
+          </div>
+          <div className="px-3 py-2">
+            <dt className="text-foreground-lighter">New</dt>
+            <dd className="mt-1 break-all text-foreground" translate="no">
+              {isLoadingVersion ? 'Loading…' : (newVersionName ?? 'Unknown')}
+            </dd>
+          </div>
+        </dl>
       </div>
     </ConfirmationModal>
   )
diff --git a/apps/studio/pages/project/[ref]/database/pipelines/index.tsx b/apps/studio/pages/project/[ref]/database/pipelines/index.tsx
index 6c030934ed4..fa6223730fb 100644
--- a/apps/studio/pages/project/[ref]/database/pipelines/index.tsx
+++ b/apps/studio/pages/project/[ref]/database/pipelines/index.tsx
@@ -1,3 +1,4 @@
+import { useParams } from 'common'
 import { MessageSquare } from 'lucide-react'
 import { Button } from 'ui'
 import { PageContainer } from 'ui-patterns/PageContainer'
@@ -10,7 +11,7 @@ import {
   PageHeaderTitle,
 } from 'ui-patterns/PageHeader'
 import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
-import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { GenericTableLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { Destinations } from '@/components/interfaces/Database/Replication/Destinations'
 import { PIPELINES_FEEDBACK_URL } from '@/components/interfaces/Database/Replication/Replication.constants'
@@ -22,17 +23,16 @@ import { DocsButton } from '@/components/ui/DocsButton'
 import { UnknownInterface } from '@/components/ui/UnknownInterface'
 import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
-import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { DOCS_URL } from '@/lib/constants'
 import type { NextPageWithLayout } from '@/types'
 
 const DatabasePipelinesPage: NextPageWithLayout = () => {
-  const { data: selectedProject, isPending } = useSelectedProjectQuery()
-  const { isHighAvailability } = useHighAvailability()
+  const { ref: projectRef } = useParams()
+  const { isHighAvailability, isPending } = useHighAvailability()
   const showPgReplicate = useIsFeatureEnabled('database:replication')
 
   if (!showPgReplicate) {
-    return <UnknownInterface urlBack={`/project/${selectedProject?.ref}/database/schemas`} />
+    return <UnknownInterface urlBack={`/project/${projectRef}/database/schemas`} />
   }
 
   if (isHighAvailability) {
@@ -81,16 +81,41 @@ const DatabasePipelinesPage: NextPageWithLayout = () => {
       </PageHeader>
 
       <PageContainer size="large">
-        {isPending ? (
-          <GenericSkeletonLoader />
-        ) : (
-          <PageSection>
-            <PageSectionContent className="flex flex-col gap-12">
-              <ReplicationDiagram />
-              <Destinations />
-            </PageSectionContent>
-          </PageSection>
-        )}
+        <PageSection>
+          <PageSectionContent className="flex flex-col gap-12">
+            {isPending ? (
+              <>
+                <p className="sr-only" role="status">
+                  Loading pipelines
+                </p>
+                <div
+                  className="flex h-[350px] items-center justify-center gap-8 rounded-md border border-muted"
+                  aria-hidden="true"
+                >
+                  <ShimmeringLoader className="h-14 w-36 py-0" />
+                  <ShimmeringLoader className="h-14 w-36 py-0" />
+                </div>
+                <div className="w-full space-y-4" aria-hidden="true">
+                  <div className="flex items-center justify-between">
+                    <ShimmeringLoader className="h-8 w-52 py-0" />
+                    <div className="flex items-center gap-x-2">
+                      <ShimmeringLoader className="h-8 w-8 py-0" />
+                      <ShimmeringLoader className="h-8 w-32 py-0" />
+                    </div>
+                  </div>
+                  <GenericTableLoader
+                    headers={[null, 'Name', 'Status', 'Lag', 'Publication', null]}
+                  />
+                </div>
+              </>
+            ) : (
+              <>
+                <ReplicationDiagram />
+                <Destinations />
+              </>
+            )}
+          </PageSectionContent>
+        </PageSection>
       </PageContainer>
     </>
   )