diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx
index 4b47819f797..a6e643e5660 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx
@@ -25,17 +25,23 @@ import { DOCS_URL } from '@/lib/constants'
 
 export const ReadReplicaPricingDialog = () => {
   const { data: project } = useSelectedProjectQuery()
-  const { compute, disk, iops, throughput } = useGetReplicaCost()
+  const { totalCost, compute, disk, iops, throughput } = useGetReplicaCost()
 
   const showNewDiskManagementUI = project?.cloud_provider === 'AWS'
 
   return (
     <Dialog>
-      <DialogTrigger asChild>
-        <button className={cn(InlineLinkClassName, 'text-sm text-foreground-light')}>
-          Learn more
-        </button>
-      </DialogTrigger>
+      <p className="text-sm">
+        New replica will cost an additional <span translate="no">{totalCost}/month</span>.{' '}
+        <DialogTrigger asChild>
+          <button
+            type="button"
+            className={cn(InlineLinkClassName, 'cursor-pointer text-foreground-light')}
+          >
+            Learn more
+          </button>
+        </DialogTrigger>
+      </p>
       <DialogContent
         size={showNewDiskManagementUI ? 'medium' : 'small'}
         aria-describedby={undefined}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
index b4599471110..e5e89e08a2d 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
@@ -18,7 +18,6 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { ReadReplicaEligibilityWarnings } from './ReadReplicaEligibilityWarnings'
 import { ReadReplicaPricingDialog } from './ReadReplicaPricingDialog'
 import { useCheckEligibilityDeployReplica } from './useCheckEligibilityDeployReplica'
-import { useGetReplicaCost } from './useGetReplicaCost'
 import { AVAILABLE_REPLICA_REGIONS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
 import { Region, useReadReplicaSetUpMutation } from '@/data/read-replicas/replica-setup-mutation'
 import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
@@ -36,7 +35,6 @@ export const ReadReplicaForm = ({ onSuccess, onClose }: ReadReplicaFormProps) =>
   const [defaultRegion] = Object.entries(AWS_REGIONS).find(
     ([_, name]) => name === AWS_REGIONS_DEFAULT
   ) ?? ['ap-southeast-1']
-  const { totalCost } = useGetReplicaCost()
   const { can: canDeployReplica } = useCheckEligibilityDeployReplica()
 
   const [selectedRegion, setSelectedRegion] = useState<string>(defaultRegion)
@@ -112,12 +110,9 @@ export const ReadReplicaForm = ({ onSuccess, onClose }: ReadReplicaFormProps) =>
           </Select>
         </FormItemLayout>
       </SheetSection>
-      <SheetFooter className="justify-between!">
-        <div className="flex items-center gap-x-4">
+      <SheetFooter className="justify-between! gap-x-6">
+        <div className="flex items-center gap-x-3">
           <InfoIcon className="h-5 w-5" />
-          <p className="text-sm">
-            New replica will cost an additional <span translate="no">{totalCost}/month</span>
-          </p>
           <ReadReplicaPricingDialog />
         </div>