diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
index 45e55a43c..039dd9de7 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
@@ -182,12 +182,33 @@ let getDefaultSelection: Js.Dict.t<
   Js.Json.t,
 > => AdvancedRoutingTypes.connectorSelection = defaultSelection => {
   open LogicUtils
+  open AdvancedRoutingTypes
   let override3dsValue = defaultSelection->getString("override_3ds", "")
+  let surchargeDetailsOptionalValue = defaultSelection->Js.Dict.get("surcharge_details")
+  let surchargeDetailsValue = defaultSelection->getDictfromDict("surcharge_details")
 
   if override3dsValue->Js.String2.length > 0 {
     {
       override_3ds: override3dsValue,
     }
+  } else if surchargeDetailsOptionalValue->Option.isSome {
+    let surchargeValue = surchargeDetailsValue->getDictfromDict("surcharge")
+
+    {
+      surcharge_details: {
+        surcharge: {
+          \"type": surchargeValue->getString("type", ""),
+          value: {
+            percentage: surchargeValue->getDictfromDict("value")->getFloat("percentage", 0.0),
+          },
+        },
+        tax_on_surcharge: {
+          percentage: surchargeDetailsValue
+          ->getDictfromDict("tax_on_surcharge")
+          ->getFloat("percentage", 0.0),
+        },
+      }->Js.Nullable.return,
+    }
   } else {
     {
       \"type": defaultSelection->getString("type", ""),
diff --git a/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res b/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res
index 7686ad9b7..3081e3aa8 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res
@@ -28,7 +28,7 @@ module GatewayView = {
 }
 
 @react.component
-let make = (~ruleInfo: algorithmData, ~isFrom3ds=false) => {
+let make = (~ruleInfo: algorithmData, ~isFrom3ds=false, ~isFromSurcharge=false) => {
   open LogicUtils
 
   <div
@@ -42,7 +42,10 @@ let make = (~ruleInfo: algorithmData, ~isFrom3ds=false) => {
             let headingText = `Rule ${string_of_int(index + 1)}`
             let marginStyle = index === ruleInfo.rules->Js.Array2.length - 1 ? "mt-2" : "my-2"
             let threeDsType = rule.connectorSelection.override_3ds->Belt.Option.getWithDefault("")
-
+            Js.log2("lokiii before", rule)
+            let surchargeType =
+              rule.connectorSelection.surcharge_details->SurchargeUtils.getDefaultSurchargeType
+            Js.log2("lokii", surchargeType)
             <div
               key={Belt.Int.toString(index)}
               className="flex flex-col items-center w-full px-4 pb-6">
@@ -109,6 +112,18 @@ let make = (~ruleInfo: algorithmData, ~isFrom3ds=false) => {
                     gateways={rule.connectorSelection.data->Belt.Option.getWithDefault([])}
                   />
                 </UIUtils.RenderIf>
+                <UIUtils.RenderIf condition={isFromSurcharge}>
+                  <div
+                    className="my-2 h-6 md:h-8 flex items-center rounded-md border border-jp-gray-500 font-medium text-blue-800 hover:text-blue-900 bg-gradient-to-b from-jp-gray-250 to-jp-gray-200  focus:outline-none px-2 gap-1">
+                    {`${surchargeType.surcharge.\"type"} -> ${surchargeType.surcharge.value.percentage
+                      ->Option.getWithDefault(0.0)
+                      ->Belt.Float.toString} | Tax on Surcharge -> ${surchargeType.tax_on_surcharge.percentage
+                      ->Option.getWithDefault(0.0)
+                      ->Belt.Float.toString}`
+                    ->LogicUtils.capitalizeString
+                    ->React.string}
+                  </div>
+                </UIUtils.RenderIf>
               </div>
             </div>
           })
diff --git a/src/screens/HyperSwitch/Surcharge/Surcharge.res b/src/screens/HyperSwitch/Surcharge/Surcharge.res
index 59871920d..1fb523e36 100644
--- a/src/screens/HyperSwitch/Surcharge/Surcharge.res
+++ b/src/screens/HyperSwitch/Surcharge/Surcharge.res
@@ -5,15 +5,16 @@ module ActiveRulePreview = {
   open LogicUtils
   @react.component
   let make = (~initialRule) => {
-    let ruleInfo = initialRule->Belt.Option.getWithDefault(Js.Dict.empty())
-    let name = ruleInfo->getString("name", "")
-    let description = ruleInfo->getString("description", "")
+    let rule = initialRule->Belt.Option.getWithDefault(Js.Dict.empty())
+
+    let name = rule->getString("name", "")
+    let description = rule->getString("description", "")
 
     let ruleInfo =
-      ruleInfo
+      rule
       ->getJsonObjectFromDict("algorithm")
       ->getDictFromJsonObject
-      ->AdvancedRoutingUtils.ruleInfoTypeMapper
+      ->SurchargeUtils.ruleInfoTypeMapper
 
     <UIUtils.RenderIf condition={initialRule->Belt.Option.isSome}>
       <div className="relative flex flex-col gap-6 w-full border p-6 bg-white rounded-md">
@@ -29,7 +30,7 @@ module ActiveRulePreview = {
             {description->React.string}
           </p>
         </div>
-        <RulePreviewer ruleInfo isFrom3ds=true />
+        <RulePreviewer ruleInfo isFromSurcharge=true />
       </div>
     </UIUtils.RenderIf>
   }
@@ -99,7 +100,7 @@ let make = () => {
   open APIUtils
   open ThreeDSUtils
   open SurchargeUtils
-
+  let showToast = ToastState.useShowToast()
   let fetchDetails = useGetMethod(~showErrorToast=false, ())
   let updateDetails = useUpdateMethod(~showErrorToast=false, ())
   let (wasm, setWasm) = React.useState(_ => None)
@@ -108,7 +109,7 @@ let make = () => {
   )
   let (initialRule, setInitialRule) = React.useState(() => None)
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
-  let (pageView, setPageView) = React.useState(_ => NEW)
+  let (pageView, setPageView) = React.useState(_ => LANDING)
   let (formState, setFormState) = React.useState(_ => AdvancedRoutingTypes.EditReplica)
   let showPopUp = PopUpState.useShowPopUp()
   let (showWarning, setShowWarning) = React.useState(_ => true)
@@ -129,7 +130,7 @@ let make = () => {
       let surchargeUrl = getURL(~entityName=SURCHARGE, ~methodType=Get, ())
       let surchargeRuleDetail = await fetchDetails(surchargeUrl)
       let responseDict = surchargeRuleDetail->getDictFromJsonObject
-      let programValue = responseDict->getObj("program", Js.Dict.empty())
+      let programValue = responseDict->getObj("algorithm", Js.Dict.empty())
 
       let intitialValue =
         [
@@ -173,20 +174,18 @@ let make = () => {
 
   let onSubmit = async (values, _) => {
     try {
-      // setScreenState(_ => Loading)
       let surchargePayload = values->buildSurchargePayloadBody
-      Js.log2("lokiiiii", surchargePayload)
       let getActivateUrl = getURL(~entityName=SURCHARGE, ~methodType=Put, ())
-      //   let _ = await updateDetails(getActivateUrl, surchargePayload->Identity.genericTypeToJson, Put)
-      //   fetchDetails()->ignore
-      //   setShowWarning(_ => true)
-      //   RescriptReactRouter.replace(`/surcharge`)
-      //   setPageView(_ => LANDING)
-      //   setScreenState(_ => Success)
+      let _ = await updateDetails(getActivateUrl, surchargePayload->Identity.genericTypeToJson, Put)
+      fetchDetails()->ignore
+      setShowWarning(_ => true)
+      RescriptReactRouter.replace(`/surcharge`)
+      setPageView(_ => LANDING)
+      setScreenState(_ => Success)
     } catch {
     | Js.Exn.Error(e) =>
       let err = Js.Exn.message(e)->Belt.Option.getWithDefault("Failed to Fetch!")
-      setScreenState(_ => Error(err))
+      showToast(~message=err, ~toastType=ToastError, ())
     }
     Js.Nullable.null
   }
@@ -224,6 +223,7 @@ let make = () => {
   }
 
   let redirectToNewRule = () => {
+    Js.log("lokiiiii redirecting")
     setPageView(_ => NEW)
   }
 
@@ -232,7 +232,7 @@ let make = () => {
       showPopUp({
         popUpType: (Warning, WithIcon),
         heading: "Heads up!",
-        description: "This will override the existing 3DS configuration. Please confirm to proceed"->React.string,
+        description: "This will override the existing surcharge configuration. Please confirm to proceed"->React.string,
         handleConfirm: {
           text: "Confirm",
           onClick: {
@@ -264,7 +264,7 @@ let make = () => {
                 buttonType=Secondary
                 onClick={_ => {
                   setPageView(_ => LANDING)
-                  RescriptReactRouter.replace(`/3ds`)
+                  RescriptReactRouter.replace(`/surcharge`)
                 }}
               />
               <FormRenderer.SubmitButton
diff --git a/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res b/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
index 4aa0a310f..5e62282d2 100644
--- a/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
+++ b/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
@@ -45,5 +45,55 @@ let buildSurchargePayloadBody = values => {
       "rules": modifiedRules,
       "metadata": Js.Dict.empty()->Js.Json.object_,
     },
+    "merchant_surcharge_configs": {
+      "show_surcharge_breakup_screen": true,
+    },
+  }
+}
+
+let ruleInfoTypeMapper: Js.Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithmData = json => {
+  open LogicUtils
+  let rulesArray = json->getArrayFromDict("rules", [])
+
+  let defaultSelection = json->getDictfromDict("defaultSelection")
+
+  let rulesModifiedArray = rulesArray->Js.Array2.map(rule => {
+    let ruleDict = rule->getDictFromJsonObject
+    let connectorsDict = ruleDict->getDictfromDict("connectorSelection")
+
+    let connectorSelection = AdvancedRoutingUtils.getDefaultSelection(connectorsDict)
+    let ruleName = ruleDict->getString("name", "")
+
+    let eachRule: AdvancedRoutingTypes.rule = {
+      name: ruleName,
+      connectorSelection,
+      statements: AdvancedRoutingUtils.conditionTypeMapper(
+        ruleDict->getArrayFromDict("statements", []),
+      ),
+    }
+    eachRule
+  })
+
+  {
+    rules: rulesModifiedArray,
+    defaultSelection: AdvancedRoutingUtils.getDefaultSelection(defaultSelection),
+    metadata: json->getJsonObjectFromDict("metadata"),
   }
 }
+
+let getDefaultSurchargeType = surchargeType => {
+  surchargeType
+  ->Option.getWithDefault(Js.Nullable.null)
+  ->Js.Nullable.toOption
+  ->Option.getWithDefault({
+    surcharge: {
+      \"type": "rate",
+      value: {
+        percentage: 0.0,
+      },
+    },
+    tax_on_surcharge: {
+      percentage: 0.0,
+    },
+  })
+}