diff --git a/src/screens/Developer/PaymentSettings/PaymentSettings.res b/src/screens/Developer/PaymentSettings/PaymentSettings.res
index 430e35d94..6ba0347cb 100644
--- a/src/screens/Developer/PaymentSettings/PaymentSettings.res
+++ b/src/screens/Developer/PaymentSettings/PaymentSettings.res
@@ -260,7 +260,7 @@ module WebHookSection = {
           <form onSubmit={handleSubmit} className="flex flex-col gap-8 h-full w-full py-6 px-4">
             <WebHookAuthenticationHeaders setAllowEdit allowEdit />
             <DesktopRow>
-              <div className="flex justify-start w-full gap-2">
+              <div className="flex justify-end w-full gap-2">
                 <SubmitButton
                   customSumbitButtonStyle="justify-start"
                   text="Update"
@@ -294,7 +294,7 @@ module WebHook = {
     <div className="ml-4 mt-4">
       <FieldRenderer
         field={DeveloperUtils.webhookUrl}
-        labelClass="!text-base !text-grey-700 font-semibold"
+        labelClass="!text-fs-15 !text-grey-700 font-semibold"
         fieldWrapperClass="max-w-xl"
       />
     </div>
@@ -310,7 +310,7 @@ module ReturnUrl = {
         <FieldRenderer
           field={DeveloperUtils.returnUrl}
           errorClass={HSwitchUtils.errorClass}
-          labelClass="!text-base !text-grey-700 font-semibold"
+          labelClass="!text-fs-15 !text-grey-700 font-semibold"
           fieldWrapperClass="max-w-xl"
         />
       </DesktopRow>
@@ -325,8 +325,9 @@ type options = {
 
 module CollectDetails = {
   @react.component
-  let make = (~title, ~options: array<options>) => {
+  let make = (~title, ~subTitle, ~options: array<options>) => {
     open LogicUtils
+    open FormRenderer
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
       ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
     )
@@ -357,37 +358,43 @@ module CollectDetails = {
       }
       None
     }, [isSelected])
-
-    <div>
-      <div className="flex gap-2 items-center">
-        <BoolInput.BaseComponent
-          isSelected
-          setIsSelected={_ => setIsSelected(val => !val)}
-          isDisabled=false
-          boolCustomClass="rounded-lg"
-        />
-        <p className="!text-base !text-grey-700 font-semibold"> {title->React.string} </p>
-      </div>
-      <RenderIf condition={isSelected}>
-        <div className="mt-4">
-          {options
-          ->Array.mapWithIndex((option, index) =>
-            <div
-              key={index->Int.toString}
-              className="flex gap-2 mb-3 items-center cursor-pointer"
-              onClick={_ => onClick(option.key)}>
-              <RadioIcon
-                isSelected={valuesDict->getBool(option.key, false)} fill="text-green-700"
-              />
-              <div className=p2RegularTextStyle>
-                {option.name->LogicUtils.snakeToTitle->React.string}
-              </div>
-            </div>
-          )
-          ->React.array}
+    <DesktopRow>
+      <div className="w-full border-t border-gray-200 pt-8">
+        <div className="flex justify-between items-center">
+          <div className="flex-1 ">
+            <p className="font-semibold text-fs-15"> {title->React.string} </p>
+            <p className="font-medium text-fs-14 text-black opacity-50 pt-2">
+              {subTitle->React.string}
+            </p>
+          </div>
+          <BoolInput.BaseComponent
+            isSelected
+            setIsSelected={_ => setIsSelected(val => !val)}
+            isDisabled=false
+            boolCustomClass="rounded-lg"
+          />
         </div>
-      </RenderIf>
-    </div>
+        <RenderIf condition={isSelected}>
+          <div className="mt-4">
+            {options
+            ->Array.mapWithIndex((option, index) =>
+              <div
+                key={index->Int.toString}
+                className="flex gap-2 mb-3 items-center cursor-pointer"
+                onClick={_ => onClick(option.key)}>
+                <RadioIcon
+                  isSelected={valuesDict->getBool(option.key, false)} fill="text-green-700"
+                />
+                <div className=p2RegularTextStyle>
+                  {option.name->LogicUtils.snakeToTitle->React.string}
+                </div>
+              </div>
+            )
+            ->React.array}
+          </div>
+        </RenderIf>
+      </div>
+    </DesktopRow>
   }
 }
 
@@ -416,8 +423,8 @@ module AutoRetries = {
     <>
       <DesktopRow>
         <FieldRenderer
-          labelClass="!text-base !text-grey-700 font-semibold"
-          fieldWrapperClass="max-w-xl"
+          labelClass="!text-fs-15 !text-grey-700 font-semibold"
+          fieldWrapperClass="w-full flex justify-between items-center border-t  border-gray-200 pt-8 "
           field={makeFieldInfo(
             ~name="is_auto_retries_enabled",
             ~label="Auto Retries",
@@ -429,7 +436,7 @@ module AutoRetries = {
         <FieldRenderer
           field={maxAutoRetries}
           errorClass
-          labelClass="!text-base !text-grey-700 font-semibold"
+          labelClass="!text-fs-15 !text-grey-700 font-semibold"
           fieldWrapperClass="max-w-xl mx-4"
         />
       </RenderIf>
@@ -462,8 +469,8 @@ module ClickToPaySection = {
     <RenderIf condition={featureFlagDetails.clickToPay && connectorView}>
       <DesktopRow>
         <FieldRenderer
-          labelClass="!text-base !text-grey-700 font-semibold"
-          fieldWrapperClass="max-w-xl"
+          labelClass="!text-fs-15 !text-grey-700 font-semibold"
+          fieldWrapperClass="w-full flex justify-between items-center border-t border-gray-200 pt-8 "
           field={makeFieldInfo(
             ~name="is_click_to_pay_enabled",
             ~label="Click to Pay",
@@ -476,7 +483,7 @@ module ClickToPaySection = {
       <RenderIf condition={isClickToPayEnabled}>
         <DesktopRow>
           <FormRenderer.FieldRenderer
-            labelClass="!text-base !text-grey-700 font-semibold"
+            labelClass="!text-fs-15 !text-grey-700 font-semibold"
             field={FormRenderer.makeFieldInfo(
               ~label="Click to Pay - Connector ID",
               ~name="authentication_product_ids.click_to_pay",
@@ -603,10 +610,10 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
                     : "px-2 py-4"} flex flex-col gap-7 overflow-hidden`}>
                 <div className="flex items-center">
                   <InfoViewForWebhooks
-                    heading="Profile ID" subHeading=busiProfieDetails.profile_id isCopy=true
+                    heading="Profile Name" subHeading=busiProfieDetails.profile_name
                   />
                   <InfoViewForWebhooks
-                    heading="Profile Name" subHeading=busiProfieDetails.profile_name
+                    heading="Profile ID" subHeading=busiProfieDetails.profile_id isCopy=true
                   />
                 </div>
                 <div className="flex items-center">
@@ -619,48 +626,50 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
                     isCopy=true
                   />
                 </div>
-                <DesktopRow>
-                  <CollectDetails
-                    title={"Collect billing details from wallets"}
-                    options=[
-                      {
-                        name: "only if required by connector",
-                        key: "collect_billing_details_from_wallet_connector",
-                      },
-                      {
-                        name: "always",
-                        key: "always_collect_billing_details_from_wallet_connector",
-                      },
-                    ]
-                  />
-                  <CollectDetails
-                    title={"Collect shipping details from wallets"}
-                    options=[
-                      {
-                        name: "only if required by connector",
-                        key: "collect_shipping_details_from_wallet_connector",
-                      },
-                      {
-                        name: "always",
-                        key: "always_collect_shipping_details_from_wallet_connector",
-                      },
-                    ]
-                  />
-                </DesktopRow>
+                <CollectDetails
+                  title={"Collect billing details from wallets"}
+                  subTitle={"Enable automatic collection of billing information when customers connect their wallets"}
+                  options=[
+                    {
+                      name: "only if required by connector",
+                      key: "collect_billing_details_from_wallet_connector",
+                    },
+                    {
+                      name: "always",
+                      key: "always_collect_billing_details_from_wallet_connector",
+                    },
+                  ]
+                />
+                <CollectDetails
+                  title={"Collect shipping details from wallets"}
+                  subTitle={"Enable automatic collection of shipping information when customers connect their wallets"}
+                  options=[
+                    {
+                      name: "only if required by connector",
+                      key: "collect_shipping_details_from_wallet_connector",
+                    },
+                    {
+                      name: "always",
+                      key: "always_collect_shipping_details_from_wallet_connector",
+                    },
+                  ]
+                />
                 <DesktopRow>
                   <FieldRenderer
-                    labelClass="!text-base !text-grey-700 font-semibold"
-                    fieldWrapperClass="max-w-xl"
+                    labelClass="!text-fs-15 !text-grey-700 font-semibold"
+                    fieldWrapperClass="w-full flex justify-between items-center border-t border-gray-200 pt-8 "
                     field={makeFieldInfo(
                       ~name="is_connector_agnostic_mit_enabled",
                       ~label="Connector Agnostic",
                       ~customInput=InputFields.boolInput(
                         ~isDisabled=false,
-                        ~boolCustomClass="rounded-lg",
+                        ~boolCustomClass="rounded-lg ",
                       ),
                     )}
                   />
                 </DesktopRow>
+                <ClickToPaySection />
+                <AutoRetries setCheckMaxAutoRetry />
                 <RenderIf condition={isBusinessProfileHasThreeds}>
                   <DesktopRow>
                     <FieldRenderer
@@ -668,23 +677,21 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
                       ->Array.map(item => item.connector_name)
                       ->authenticationConnectors}
                       errorClass
-                      labelClass="!text-base !text-grey-700 font-semibold"
+                      labelClass="!text-fs-15 !text-grey-700 font-semibold "
                       fieldWrapperClass="max-w-xl"
                     />
                     <FieldRenderer
                       field={threeDsRequestorUrl}
                       errorClass
-                      labelClass="!text-base !text-grey-700 font-semibold"
+                      labelClass="!text-fs-15 !text-grey-700 font-semibold"
                       fieldWrapperClass="max-w-xl"
                     />
                   </DesktopRow>
                 </RenderIf>
-                <AutoRetries setCheckMaxAutoRetry />
-                <ClickToPaySection />
                 <ReturnUrl />
                 <WebHook />
                 <DesktopRow>
-                  <div className="flex justify-start w-full gap-2">
+                  <div className="flex justify-end w-full gap-2">
                     <SubmitButton
                       customSumbitButtonStyle="justify-start"
                       text="Update"
diff --git a/tailwind.config.js b/tailwind.config.js
index 86506f2b9..1d755c393 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -101,6 +101,7 @@ module.exports = {
         "fs-11": "11px",
         "fs-13": "13px",
         "fs-14": "14px",
+        "fs-15": "15px",
         "fs-16": "16px",
         "fs-18": "18px",
         "fs-20": "20px",