diff --git a/src/components/AdvancedSearchComponent.res b/src/components/AdvancedSearchComponent.res
index a37dc4ef4..f97cc0e03 100644
--- a/src/components/AdvancedSearchComponent.res
+++ b/src/components/AdvancedSearchComponent.res
@@ -1,5 +1,5 @@
-let getSummary: Js.Json.t => EntityType.summary = json => {
-  switch json->Js.Json.decodeObject {
+let getSummary: JSON.t => EntityType.summary = json => {
+  switch json->JSON.Decode.object {
   | Some(dict) => {
       let rowsCount = LogicUtils.getArrayFromDict(dict, "rows", [])->Array.length
       let totalCount = LogicUtils.getInt(dict, "entries", 0)
@@ -20,24 +20,23 @@ let make = (
 ) => {
   let {getObjects, searchUrl: url} = entity
   let fetchApi = AuthHooks.useApiFetcher()
-  let initialValueJson = Js.Json.object_(Dict.make())
+  let initialValueJson = JSON.Encode.object(Dict.make())
   let showToast = ToastState.useShowToast()
   let (showModal, setShowModal) = React.useState(_ => false)
 
   let onSubmit = (values, form: ReactFinalForm.formApi) => {
     open Promise
 
-    fetchApi(url, ~bodyStr=Js.Json.stringify(values), ~method_=Fetch.Post, ())
+    fetchApi(url, ~bodyStr=JSON.stringify(values), ~method_=Fetch.Post, ())
     ->then(Fetch.Response.json)
     ->then(json => {
-      let jsonData = json->Js.Json.decodeObject->Option.flatMap(dict => dict->Dict.get("rows"))
+      let jsonData = json->JSON.Decode.object->Option.flatMap(dict => dict->Dict.get("rows"))
       let newData = switch jsonData {
       | Some(actualJson) => actualJson->getObjects->Array.map(obj => obj->Js.Nullable.return)
       | None => []
       }
 
-      let summaryData =
-        json->Js.Json.decodeObject->Option.flatMap(dict => dict->Dict.get("summary"))
+      let summaryData = json->JSON.Decode.object->Option.flatMap(dict => dict->Dict.get("summary"))
 
       let summary = switch summaryData {
       | Some(x) => x->getSummary
@@ -52,7 +51,7 @@ let make = (
       | None => ()
       }
       setShowModal(_ => false)
-      form.reset(Js.Json.object_(Dict.make())->Js.Nullable.return)
+      form.reset(JSON.Encode.object(Dict.make())->Js.Nullable.return)
       json->Js.Nullable.return->resolve
     })
     ->catch(_err => {
@@ -62,17 +61,17 @@ let make = (
     })
   }
 
-  let validateForm = (values: Js.Json.t) => {
-    let finalValuesDict = switch values->Js.Json.decodeObject {
+  let validateForm = (values: JSON.t) => {
+    let finalValuesDict = switch values->JSON.Decode.object {
     | Some(dict) => dict
     | None => Dict.make()
     }
     let keys = Dict.keysToArray(finalValuesDict)
     let errors = Dict.make()
     if keys->Array.length === 0 {
-      Dict.set(errors, "Please Choose One of the fields", ""->Js.Json.string)
+      Dict.set(errors, "Please Choose One of the fields", ""->JSON.Encode.string)
     }
-    errors->Js.Json.object_
+    errors->JSON.Encode.object
   }
   <div className="mr-2">
     <Button
diff --git a/src/components/AdvancedSearchModal.res b/src/components/AdvancedSearchModal.res
index e1c6c6d38..21f3d16a1 100644
--- a/src/components/AdvancedSearchModal.res
+++ b/src/components/AdvancedSearchModal.res
@@ -17,11 +17,11 @@ module AdvanceSearch = {
   ) => {
     let {optionalSearchFieldsList, requiredSearchFieldsList, detailsKey} = entity
     let fetchApi = AuthHooks.useApiFetcher()
-    let initialValueJson = Js.Json.object_(Dict.make())
+    let initialValueJson = JSON.Encode.object(Dict.make())
     let showToast = ToastState.useShowToast()
 
     let onSubmit = (values, _) => {
-      let otherQueries = switch values->Js.Json.decodeObject {
+      let otherQueries = switch values->JSON.Decode.object {
       | Some(dict) =>
         dict
         ->Dict.toArray
@@ -41,15 +41,15 @@ module AdvanceSearch = {
 
       open Promise
       open LogicUtils
-      fetchApi(finalUrl, ~bodyStr=Js.Json.stringify(initialValueJson), ~method_=Fetch.Get, ())
+      fetchApi(finalUrl, ~bodyStr=JSON.stringify(initialValueJson), ~method_=Fetch.Get, ())
       ->then(Fetch.Response.json)
       ->then(json => {
-        switch Js.Json.classify(json) {
-        | Js.Json.JSONObject(jsonDict) => {
+        switch JSON.Classify.classify(json) {
+        | Object(jsonDict) => {
             let statusStr = getString(jsonDict, "status", "FAILURE")
 
             if statusStr === "SUCCESS" {
-              let payloadDict = jsonDict->Dict.get(detailsKey)->Option.flatMap(Js.Json.decodeObject)
+              let payloadDict = jsonDict->Dict.get(detailsKey)->Option.flatMap(JSON.Decode.object)
 
               switch payloadDict {
               | Some(dict) => {
@@ -82,15 +82,15 @@ module AdvanceSearch = {
       })
     }
 
-    let validateForm = (values: Js.Json.t) => {
-      let valuesDict = switch values->Js.Json.decodeObject {
+    let validateForm = (values: JSON.t) => {
+      let valuesDict = switch values->JSON.Decode.object {
       | Some(dict) => dict->Dict.toArray->Dict.fromArray
       | None => Dict.make()
       }
       let errors = Dict.make()
       requiredSearchFieldsList->Array.forEach(key => {
         if Dict.get(valuesDict, key)->Option.isNone {
-          Dict.set(errors, key, "Required"->Js.Json.string)
+          Dict.set(errors, key, "Required"->JSON.Encode.string)
         }
       })
       let isSubmitEnabled = optionalSearchFieldsList->Array.some(key => {
@@ -101,11 +101,11 @@ module AdvanceSearch = {
         Dict.set(
           errors,
           optionalSearchFieldsList->Array.joinWith(","),
-          "Atleast One of Optional fields is Required"->Js.Json.string,
+          "Atleast One of Optional fields is Required"->JSON.Encode.string,
         )
       }
 
-      errors->Js.Json.object_
+      errors->JSON.Encode.object
     }
 
     <FormRenderer
diff --git a/src/components/CustomCharts/FunnelChart.res b/src/components/CustomCharts/FunnelChart.res
index 2aea59dd8..cb9eac962 100644
--- a/src/components/CustomCharts/FunnelChart.res
+++ b/src/components/CustomCharts/FunnelChart.res
@@ -12,7 +12,8 @@ let make = (
   let (size, widthClass, flexDirectionClass) = React.useMemo1(() => {
     isMobileView ? (0.16, "w-full", "flex-col") : (size, "w-1/2", "flex-row")
   }, [isMobileView])
-  let funnelData = data->Array.get(0)->Option.getOr(Js.Json.null)->LogicUtils.getDictFromJsonObject
+  let funnelData =
+    data->Array.get(0)->Option.getOr(JSON.Encode.null)->LogicUtils.getDictFromJsonObject
   let (hoverIndex, setHoverIndex) = React.useState(_ => -1.)
   let (selectedMetric, setSelectedMetric) = React.useState(_ => Volume)
   let length = metrics->Array.length->Float.fromInt
diff --git a/src/components/CustomCharts/HighchartBarChart.res b/src/components/CustomCharts/HighchartBarChart.res
index d56e4b7c9..09a6f8683 100644
--- a/src/components/CustomCharts/HighchartBarChart.res
+++ b/src/components/CustomCharts/HighchartBarChart.res
@@ -1,6 +1,6 @@
 module RawBarChart = {
   @react.component
-  let make = (~options: Js.Json.t) => {
+  let make = (~options: JSON.t) => {
     <Highcharts.BarChart highcharts={Highcharts.highchartsModule} options />
   }
 }
@@ -8,7 +8,7 @@ module RawBarChart = {
 module HighBarChart1D = {
   @react.component
   let make = (
-    ~rawData: array<Js.Json.t>,
+    ~rawData: array<JSON.t>,
     ~groupKey,
     ~isHrizonatalBar: bool=true,
     ~selectedMetrics: LineChartUtils.metricsConfig,
@@ -27,8 +27,8 @@ module HighBarChart1D = {
       )
     }, (rawData, groupKey, selectedMetrics.metric_name_db))
 
-    let barOption: Js.Json.t = React.useMemo2(() => {
-      let barOption: Js.Json.t = {
+    let barOption: JSON.t = React.useMemo2(() => {
+      let barOption: JSON.t = {
         "chart": Highcharts.makebarChart(
           ~chartType={isHrizonatalBar ? "bar" : "column"},
           ~backgroundColor=Js.Nullable.null,
@@ -36,7 +36,7 @@ module HighBarChart1D = {
         ),
         "title": {
           "text": "",
-          "style": Js.Json.object_(Dict.make()),
+          "style": JSON.Encode.object(Dict.make()),
         },
         "xAxis": {
           "categories": categories,
diff --git a/src/components/CustomCharts/HighchartHorizontalBarChart.res b/src/components/CustomCharts/HighchartHorizontalBarChart.res
index c21506dbb..3c9ba54ec 100644
--- a/src/components/CustomCharts/HighchartHorizontalBarChart.res
+++ b/src/components/CustomCharts/HighchartHorizontalBarChart.res
@@ -1,6 +1,6 @@
 module RawHBarChart = {
   @react.component
-  let make = (~options: Js.Json.t) => {
+  let make = (~options: JSON.t) => {
     <HighchartsHorizontalBarChart.HBarChart
       highcharts={HighchartsHorizontalBarChart.highchartsModule} options
     />
@@ -59,7 +59,7 @@ let xLabelFormatter: Js_OO.Callback.arity1<xAxisRecord => string> = {
 
 @react.component
 let make = (
-  ~rawData: array<Js.Json.t>,
+  ~rawData: array<JSON.t>,
   ~groupKey,
   ~titleKey=?,
   ~selectedMetrics: LineChartUtils.metricsConfig,
@@ -76,7 +76,7 @@ let make = (
   }, (rawData, groupKey, selectedMetrics.metric_name_db))
   let titleKey = titleKey->Option.getOr(groupKey)
 
-  let barOption: Js.Json.t = React.useMemo2(() => {
+  let barOption: JSON.t = React.useMemo2(() => {
     let colors = {
       let length = barChartData->Array.length->Int.toFloat
       barChartData->Array.mapWithIndex((_data, i) => {
diff --git a/src/components/CustomCharts/HighchartPieChart.res b/src/components/CustomCharts/HighchartPieChart.res
index ce214cd5b..228993b4f 100644
--- a/src/components/CustomCharts/HighchartPieChart.res
+++ b/src/components/CustomCharts/HighchartPieChart.res
@@ -1,7 +1,7 @@
 %%raw(`require("./highcharts.css")`)
 module RawPieChart = {
   @react.component
-  let make = (~options: Js.Json.t) => {
+  let make = (~options: JSON.t) => {
     <HighchartsPieChart.PieChart highcharts={HighchartsPieChart.highchartsModule} options />
   }
 }
@@ -26,7 +26,7 @@ let formatter: Js_OO.Callback.arity1<yAxisRecord => string> = {
 
 @react.component
 let make = (
-  ~rawData: array<Js.Json.t>,
+  ~rawData: array<JSON.t>,
   ~groupKey,
   ~titleKey=?,
   ~selectedMetrics: LineChartUtils.metricsConfig,
@@ -45,7 +45,7 @@ let make = (
   let opacity = theme === Dark ? "0.5" : "1"
   let titleKey = titleKey->Option.getOr(groupKey)
 
-  let barOption: Js.Json.t = React.useMemo2(() => {
+  let barOption: JSON.t = React.useMemo2(() => {
     let colors = {
       let length = pieSeriesData->Array.length->Int.toFloat
       pieSeriesData->Array.mapWithIndex((_data, i) => {
diff --git a/src/components/CustomCharts/HighchartTimeSeriesChart.res b/src/components/CustomCharts/HighchartTimeSeriesChart.res
index 3693fc372..9d1f4634d 100644
--- a/src/components/CustomCharts/HighchartTimeSeriesChart.res
+++ b/src/components/CustomCharts/HighchartTimeSeriesChart.res
@@ -45,7 +45,7 @@ module LineChart1D = {
   @react.component
   let make = (
     ~class: string="",
-    ~rawChartData: array<Js.Json.t>,
+    ~rawChartData: array<JSON.t>,
     ~selectedMetrics: LineChartUtils.metricsConfig,
     ~commonColorsArr: array<LineChartUtils.chartData<'a>>=[],
     ~chartPlace="",
@@ -59,7 +59,7 @@ module LineChart1D = {
     ~legendType: legendType=Table,
     ~isMultiDimensional: bool=false,
     ~chartKey: string="0",
-    ~legendData: array<Js.Json.t>=[],
+    ~legendData: array<JSON.t>=[],
     ~chartdataMaxRows: int=-1,
     ~selectedRow=None,
     ~showTableBelow: bool=false,
@@ -98,7 +98,7 @@ module LineChart1D = {
 
     let (chartData, xAxisMapInfo, chartDataOrig) = React.useMemo7(() => {
       let chartdata: array<
-        LineChartUtils.timeSeriesDictWithSecondryMetrics<Js.Json.t>,
+        LineChartUtils.timeSeriesDictWithSecondryMetrics<JSON.t>,
       > = LineChartUtils.timeSeriesDataMaker(
         ~data=rawChartData,
         ~groupKey,
@@ -125,23 +125,23 @@ module LineChart1D = {
                     ->Js.Date.getHours
                     ->Float.toString}:00`
                   ->String.sliceToEnd(~start=-5)
-                  ->Js.Json.string
+                  ->JSON.Encode.string
                 } else if "run_month" === groupKey {
                   xAxis
                   ->Js.Date.fromFloat
                   ->DateTimeUtils.toUtc
                   ->Js.Date.getDate
                   ->Float.toString
-                  ->Js.Json.string
+                  ->JSON.Encode.string
                 } else if "run_week" === groupKey {
                   switch DateTimeUtils.daysArr[
                     xAxis->Js.Date.fromFloat->DateTimeUtils.toUtc->Js.Date.getDay->Float.toInt
                   ] {
                   | Some(ele) => DateTimeUtils.dayMapper(ele)
                   | None => ""
-                  }->Js.Json.string
+                  }->JSON.Encode.string
                 } else {
-                  xAxis->Js.Json.number
+                  xAxis->JSON.Encode.float
                 }
 
                 (updatedXAxis, yAxis, xY)
@@ -154,7 +154,7 @@ module LineChart1D = {
       let chartDataOrig = chartdata
 
       let selectedChartData = switch selectedRow {
-      | Some(data: LineChartUtils.chartData<Js.Json.t>) =>
+      | Some(data: LineChartUtils.chartData<JSON.t>) =>
         chartdata->Array.filter(item => data.name == item.name)
       | None =>
         clickedRowNames->Array.length > 0
@@ -169,8 +169,8 @@ module LineChart1D = {
             let (x, y, secondryMetrics) = axes
             xAxisMapInfo->LineChartUtils.appendToDictValue(
               ["run_date", "run_month", "run_week"]->Array.includes(groupKey)
-                ? x->Js.Json.decodeString->Option.getOr("")
-                : x->Js.Json.stringify,
+                ? x->JSON.Decode.string->Option.getOr("")
+                : x->JSON.stringify,
               (
                 item.name,
                 {
@@ -227,13 +227,13 @@ module LineChart1D = {
       let chartData = data->Belt.Array.keepMap(chartDataItem => {
         let (fillColor, color) = (chartDataItem.fillColor, chartDataItem.color) // normal
         //always uses same color for same entity Upi live mode
-        let val: option<seriesLine<Js.Json.t>> = if (
+        let val: option<seriesLine<JSON.t>> = if (
           !(clickedRowNames->Array.includes(chartDataItem.name)) &&
           clickedRowNames->Array.length > 0
         ) {
           None
         } else {
-          let value: Highcharts.seriesLine<Js.Json.t> = {
+          let value: Highcharts.seriesLine<JSON.t> = {
             color,
             name: chartDataItem.name,
             data: chartDataItem.data->Array.map(
@@ -461,7 +461,7 @@ module LineChart1D = {
         }->genericObjectOrRecordToJson
       }
 
-      let a: options<Js.Json.t> = {
+      let a: options<JSON.t> = {
         chart: {
           Some(
             {
@@ -674,7 +674,7 @@ module LineChart1D = {
               },
             }->genericObjectOrRecordToJson
 
-            labelsValue->getDictFromJsonObject->deleteKey("style")->Js.Json.object_
+            labelsValue->getDictFromJsonObject->deleteKey("style")->JSON.Encode.object
           },
         }->genericObjectOrRecordToJson,
         series: chartData,
@@ -801,7 +801,7 @@ module LegendItem = {
 
 module RenderMultiDimensionalChart = {
   type config = {
-    chartDictData: Dict.t<Js.Array.t<Js.Json.t>>,
+    chartDictData: Dict.t<array<JSON.t>>,
     class: string,
     selectedMetrics: LineChartUtils.metricsConfig,
     groupBy: string,
@@ -816,7 +816,7 @@ module RenderMultiDimensionalChart = {
     let chartNames =
       config.chartDictData
       ->Dict.toArray
-      ->Array.reduce([], (acc: array<LineChartUtils.chartData<Js.Json.t>>, (_, value)) => {
+      ->Array.reduce([], (acc: array<LineChartUtils.chartData<JSON.t>>, (_, value)) => {
         let chartdata = LineChartUtils.timeSeriesDataMaker(
           ~data=value,
           ~groupKey=config.groupBy,
@@ -830,7 +830,7 @@ module RenderMultiDimensionalChart = {
             data: i.data->Array.map(
               item => {
                 let (val1, val2, val3) = item
-                (val1->Js.Json.number, val2, val3)
+                (val1->JSON.Encode.float, val2, val3)
               },
             ),
             legendIndex: i.legendIndex,
@@ -883,7 +883,7 @@ module LineChart2D = {
   @react.component
   let make = (
     ~groupBy: option<array<string>>,
-    ~rawChartData: array<Js.Json.t>,
+    ~rawChartData: array<JSON.t>,
     ~selectedMetrics: LineChartUtils.metricsConfig,
     ~xAxis: string,
     ~legendType=Points,
@@ -925,7 +925,7 @@ module LineChart3D = {
   @react.component
   let make = (
     ~groupBy: option<array<string>>,
-    ~rawChartData: array<Js.Json.t>,
+    ~rawChartData: array<JSON.t>,
     ~selectedMetrics: LineChartUtils.metricsConfig,
     ~xAxis: string,
     ~legendType=Points,
diff --git a/src/components/CustomCharts/LineChartUtils.res b/src/components/CustomCharts/LineChartUtils.res
index 5ca3e5e67..779e0dd67 100644
--- a/src/components/CustomCharts/LineChartUtils.res
+++ b/src/components/CustomCharts/LineChartUtils.res
@@ -260,7 +260,7 @@ type timeSeriesDictWithSecondryMetrics<'a> = {
 }
 
 let timeSeriesDataMaker = (
-  ~data: array<Js.Json.t>,
+  ~data: array<JSON.t>,
   ~groupKey,
   ~xAxis,
   ~metricsConfig: metricsConfig,
@@ -282,7 +282,7 @@ let timeSeriesDataMaker = (
     let groupByName =
       dict->getString(
         groupKey,
-        Dict.get(dict, groupKey)->Option.getOr(""->Js.Json.string)->Js.Json.stringify,
+        Dict.get(dict, groupKey)->Option.getOr(""->JSON.Encode.string)->JSON.stringify,
       )
     let xAxisDataPoint = dict->getString(xAxis, "")->String.split(" ")->Array.joinWith("T") ++ "Z" // right now it is time string
     let yAxisDataPoint = dict->getFloat(yAxis, 0.)
@@ -351,8 +351,8 @@ let timeSeriesDataMaker = (
 
 let getLegendDataForCurrentMetrix = (
   ~yAxis: string,
-  ~timeSeriesData: array<Js.Json.t>,
-  ~groupedData: array<Js.Json.t>,
+  ~timeSeriesData: array<JSON.t>,
+  ~groupedData: array<JSON.t>,
   ~activeTab: string,
   ~xAxis: string,
   ~metrixType: dropDownMetricType,
@@ -363,7 +363,7 @@ let getLegendDataForCurrentMetrix = (
     getString(
       dict,
       activeTab,
-      Dict.get(dict, activeTab)->Option.getOr(""->Js.Json.string)->Js.Json.stringify,
+      Dict.get(dict, activeTab)->Option.getOr(""->JSON.Encode.string)->JSON.stringify,
     )
   })
   timeSeriesData->Array.forEach(item => {
@@ -373,7 +373,7 @@ let getLegendDataForCurrentMetrix = (
       getString(
         dict,
         activeTab,
-        Dict.get(dict, activeTab)->Option.getOr(""->Js.Json.string)->Js.Json.stringify,
+        Dict.get(dict, activeTab)->Option.getOr(""->JSON.Encode.string)->JSON.stringify,
       ),
       time_overall_statsAtTime,
     )
@@ -476,14 +476,14 @@ let getLegendDataForCurrentMetrix = (
   })
 }
 
-let barChartDataMaker = (~yAxis: string, ~rawData: array<Js.Json.t>, ~activeTab: string) => {
+let barChartDataMaker = (~yAxis: string, ~rawData: array<JSON.t>, ~activeTab: string) => {
   let value = rawData->Belt.Array.keepMap(item => {
     let dict = item->getDictFromJsonObject
 
     let selectedSegmentVal = getString(
       dict,
       activeTab,
-      Dict.get(dict, activeTab)->Option.getOr(""->Js.Json.string)->Js.Json.stringify,
+      Dict.get(dict, activeTab)->Option.getOr(""->JSON.Encode.string)->JSON.stringify,
     ) // groupby/ selected segment
 
     let stats = getFloat(dict, yAxis, 0.) // overall metrics
@@ -596,11 +596,11 @@ let getTooltipHTML = (metrics, data, onCursorName) => {
 
 let tooltipFormatter = (
   metrics: metricsConfig,
-  xAxisMapInfo: Dict.t<Js.Array2.t<(Js_string.t, string, float, option<float>)>>,
+  xAxisMapInfo: Dict.t<array<(Js_string.t, string, float, option<float>)>>,
   groupKey: string,
 ) =>
   @this
-  (points: Js.Json.t) => {
+  (points: JSON.t) => {
     let points = points->getDictFromJsonObject
     let series = points->getJsonObjectFromDict("series")->getDictFromJsonObject
 
diff --git a/src/components/CustomExpandableTable.res b/src/components/CustomExpandableTable.res
index f6bd7a593..8e3d0efcc 100644
--- a/src/components/CustomExpandableTable.res
+++ b/src/components/CustomExpandableTable.res
@@ -161,7 +161,7 @@ let make = (
                                 onBlur: _ev => (),
                                 onChange: ev => handleUpdateFilterObj(ev, i),
                                 onFocus: _ev => (),
-                                value: selected->Array.map(Js.Json.string)->Js.Json.array,
+                                value: selected->Array.map(JSON.Encode.string)->JSON.Encode.array,
                                 checked: true,
                               }
 
diff --git a/src/components/CustomizeTableColumns.res b/src/components/CustomizeTableColumns.res
index 761f9ea5d..96b9e6220 100644
--- a/src/components/CustomizeTableColumns.res
+++ b/src/components/CustomizeTableColumns.res
@@ -18,7 +18,7 @@ let make = (
     heading
     ->Array.mapWithIndex((item, index) => (
       getHeading(item).title,
-      index->Int.toFloat->Js.Json.number,
+      index->Int.toFloat->JSON.Encode.float,
     ))
     ->Dict.fromArray
 
diff --git a/src/components/DatePicker.res b/src/components/DatePicker.res
index 88c50fe6b..f9f9b9140 100644
--- a/src/components/DatePicker.res
+++ b/src/components/DatePicker.res
@@ -37,7 +37,7 @@ let make = (
       let dateYear = date->Array.get(0)->Option.getOr("1970")
 
       let timeSplit =
-        switch input.value->Js.Json.decodeString {
+        switch input.value->JSON.Decode.string {
         | Some(str) => str
         | None => ""
         }
@@ -90,7 +90,7 @@ let make = (
     input.onChange(currentDateTimeCheck->Identity.stringToFormReactEvent)
   }
   React.useEffect1(() => {
-    if input.value == ""->Js.Json.string {
+    if input.value == ""->JSON.Encode.string {
       setSelectedDate(_ => "")
     }
     None
@@ -198,7 +198,7 @@ let make = (
         time === ""
           ? `${currentDateHourFormat}:${currentDateMinuteFormat}:${currentDateSecondsFormat}`
           : time
-      time->Js.Json.string
+      time->JSON.Encode.string
     },
     checked: false,
   }
diff --git a/src/components/DateRangePicker.res b/src/components/DateRangePicker.res
index 7557913e8..2154efc1e 100644
--- a/src/components/DateRangePicker.res
+++ b/src/components/DateRangePicker.res
@@ -452,7 +452,7 @@ module Base = {
         }
       },
       onFocus: _ev => (),
-      value: localStartDate->getTimeStringForValue(isoStringToCustomTimeZone)->Js.Json.string,
+      value: localStartDate->getTimeStringForValue(isoStringToCustomTimeZone)->JSON.Encode.string,
       checked: false,
     }
     let endTimeInput: ReactFinalForm.fieldRenderPropsInput = {
@@ -474,7 +474,7 @@ module Base = {
         }
       },
       onFocus: _ev => (),
-      value: localEndDate->getTimeStringForValue(isoStringToCustomTimeZone)->Js.Json.string,
+      value: localEndDate->getTimeStringForValue(isoStringToCustomTimeZone)->JSON.Encode.string,
       checked: false,
     }
 
@@ -862,7 +862,7 @@ module Base = {
 
 let useStateForInput = (input: ReactFinalForm.fieldRenderPropsInput) => {
   React.useMemo1(() => {
-    let val = input.value->Js.Json.decodeString->Option.getOr("")
+    let val = input.value->JSON.Decode.string->Option.getOr("")
     let onChange = fn => {
       let newVal = fn(val)
       input.onChange(newVal->Identity.stringToFormReactEvent)
diff --git a/src/components/DynamicChart.res b/src/components/DynamicChart.res
index fa99dc882..4bc18f22d 100644
--- a/src/components/DynamicChart.res
+++ b/src/components/DynamicChart.res
@@ -13,7 +13,7 @@ type chartEntity = {
   groupByNames: option<array<string>>,
   start_time: string,
   end_time: string,
-  filters: option<Js.Json.t>,
+  filters: option<JSON.t>,
   granularityOpts: option<string>,
   delta: bool,
   startDateTime: string,
@@ -43,10 +43,10 @@ let getTimeSeriesChart = (chartEntity: chartEntity) => {
       ~prefix=chartEntity.prefix,
       ~source=chartEntity.source,
       (),
-    )->Js.Json.object_,
+    )->JSON.Encode.object,
   ]
-  ->Js.Json.array
-  ->Js.Json.stringify
+  ->JSON.Encode.array
+  ->JSON.stringify
 }
 
 let getLegendBody = (chartEntity: chartEntity) => {
@@ -67,13 +67,13 @@ let getLegendBody = (chartEntity: chartEntity) => {
       ~prefix=chartEntity.prefix,
       ~source=chartEntity.source,
       (),
-    )->Js.Json.object_,
+    )->JSON.Encode.object,
   ]
-  ->Js.Json.array
-  ->Js.Json.stringify
+  ->JSON.Encode.array
+  ->JSON.stringify
 }
 
-type chartUrl = String(string) | Func(Dict.t<Js.Json.t> => string)
+type chartUrl = String(string) | Func(Dict.t<JSON.t> => string)
 type chartType = Line | Bar | SemiDonut | HorizontalBar | Funnel
 
 type uriConfig = {
@@ -89,8 +89,8 @@ type uriConfig = {
 
 type urlToDataMap = {
   metricsUrl: string,
-  rawData: array<Js.Json.t>,
-  legendData: array<Js.Json.t>,
+  rawData: array<JSON.t>,
+  legendData: array<JSON.t>,
 }
 
 type fetchDataConfig = {
@@ -118,7 +118,7 @@ type entity = {
   enableLoaders?: bool,
   chartDescription?: string,
   sortingColumnLegend?: string,
-  jsonTransformer?: (string, array<Js.Json.t>) => array<Js.Json.t>,
+  jsonTransformer?: (string, array<JSON.t>) => array<JSON.t>,
 }
 
 let chartMapper = str => {
@@ -161,7 +161,7 @@ let makeEntity = (
   ~enableLoaders: bool=true,
   ~chartDescription: option<string>=?,
   ~sortingColumnLegend: option<string>=?,
-  ~jsonTransformer: option<(string, array<Js.Json.t>) => array<Js.Json.t>>=?,
+  ~jsonTransformer: option<(string, array<JSON.t>) => array<JSON.t>>=?,
   (),
 ) => {
   let granularity = granularity->Array.length === 0 ? [G_ONEDAY] : granularity
@@ -472,10 +472,10 @@ let make = (
       ->Belt.Array.keepMap(entry => {
         let (key, value) = entry
         if allFilterKeys->Array.includes(key) {
-          switch value->Js.Json.classify {
-          | JSONString(str) => `${key}=${str}`->Some
-          | JSONNumber(num) => `${key}=${num->String.make}`->Some
-          | JSONArray(arr) => `${key}=[${arr->String.make}]`->Some
+          switch value->JSON.Classify.classify {
+          | String(str) => `${key}=${str}`->Some
+          | Number(num) => `${key}=${num->String.make}`->Some
+          | Array(arr) => `${key}=[${arr->String.make}]`->Some
           | _ => None
           }
         } else {
@@ -518,10 +518,10 @@ let make = (
       ->Dict.toArray
       ->Belt.Array.keepMap(entry => {
         let (key, value) = entry
-        switch value->Js.Json.classify {
-        | JSONString(str) => `${key}=${str}`->Some
-        | JSONNumber(num) => `${key}=${num->String.make}`->Some
-        | JSONArray(arr) => `${key}=[${arr->String.make}]`->Some
+        switch value->JSON.Classify.classify {
+        | String(str) => `${key}=${str}`->Some
+        | Number(num) => `${key}=${num->String.make}`->Some
+        | Array(arr) => `${key}=[${arr->String.make}]`->Some
         | _ => None
         }
       })
@@ -577,7 +577,7 @@ let make = (
         groupByNames: selectedTab,
         start_time: startTimeFromUrl,
         end_time: endTimeFromUrl,
-        filters: Some(Js.Json.object_(filterValue)),
+        filters: Some(JSON.Encode.object(filterValue)),
         granularityOpts: granularity,
         delta: false,
         startDateTime: startTimeFromUrl,
@@ -641,7 +641,7 @@ let make = (
   let setRawChartData = (data: array<urlToDataMap>) => {
     let chartData = data->Array.map(mappedData => {
       let rawdata = mappedData.rawData->Array.map(item => {
-        let dict = item->Js.Json.decodeObject->Option.getOr(Dict.make())
+        let dict = item->JSON.Decode.object->Option.getOr(Dict.make())
 
         switch dict->Dict.get("time_range") {
         | Some(jsonObj) => {
@@ -649,7 +649,7 @@ let make = (
 
             switch timeDict->Dict.get("startTime") {
             | Some(startValue) => {
-                let sTime = startValue->Js.Json.decodeString->Option.getOr("")
+                let sTime = startValue->JSON.Decode.string->Option.getOr("")
 
                 if sTime->String.length > 0 {
                   let {date, hour, minute, month, second, year} =
@@ -657,7 +657,7 @@ let make = (
 
                   dict->Dict.set(
                     "time_bucket",
-                    `${year}-${month}-${date} ${hour}:${minute}:${second}`->Js.Json.string,
+                    `${year}-${month}-${date} ${hour}:${minute}:${second}`->JSON.Encode.string,
                   )
                 }
               }
@@ -673,34 +673,34 @@ let make = (
           tabName => {
             let metric =
               Dict.get(dict, tabName)
-              ->Option.getOr(""->Js.Json.string)
-              ->Js.Json.decodeString
+              ->Option.getOr(""->JSON.Encode.string)
+              ->JSON.Decode.string
               ->Option.getOr("")
             let label = metric == "" ? "other" : metric
 
-            Dict.set(dict, tabName, label->Js.Json.string)
+            Dict.set(dict, tabName, label->JSON.Encode.string)
 
             Dict.keysToArray(dict)->Array.forEach(
               key => {
                 if key->String.includes("amount") {
                   let amount =
                     Dict.get(dict, key)
-                    ->Option.getOr(Js.Json.number(0.0))
-                    ->Js.Json.decodeNumber
+                    ->Option.getOr(JSON.Encode.float(0.0))
+                    ->JSON.Decode.float
                     ->Option.getOr(0.0)
 
                   let amount = (amount /. 100.0)->Js.Float.toFixedWithPrecision(~digits=2)
 
-                  Dict.set(dict, key, amount->Js.Float.fromString->Js.Json.number)
+                  Dict.set(dict, key, amount->Js.Float.fromString->JSON.Encode.float)
                 } else if !(key->String.includes("time")) && key != tabName {
                   switch Dict.get(dict, key) {
                   | Some(val) =>
-                    switch val->Js.Json.decodeNumber {
+                    switch val->JSON.Decode.float {
                     | Some(val2) =>
                       Dict.set(
                         dict,
                         key,
-                        val2->Js.Float.toFixedWithPrecision(~digits=2)->Js.Json.string,
+                        val2->Js.Float.toFixedWithPrecision(~digits=2)->JSON.Encode.string,
                       )
                     | None => ()
                     }
@@ -711,7 +711,7 @@ let make = (
             )
           },
         )
-        dict->Js.Json.object_
+        dict->JSON.Encode.object
       })
       {
         metricsUrl: mappedData.metricsUrl,
@@ -765,7 +765,7 @@ let make = (
         Dict.fromArray([("chartTopMetric", ev->Identity.formReactEventToString)]),
       )
     },
-    value: chartTopMetricFromUrl->Js.Json.string,
+    value: chartTopMetricFromUrl->JSON.Encode.string,
     onBlur: _ev => (),
     onFocus: _ev => (),
     checked: true,
@@ -777,7 +777,7 @@ let make = (
         Dict.fromArray([("chartBottomMetric", ev->Identity.formReactEventToString)]),
       )
     },
-    value: chartBottomMetricFromUrl->Js.Json.string,
+    value: chartBottomMetricFromUrl->JSON.Encode.string,
     onBlur: _ev => (),
     onFocus: _ev => (),
     checked: true,
diff --git a/src/components/DynamicFilter.res b/src/components/DynamicFilter.res
index 157f1a3cc..c962dd643 100644
--- a/src/components/DynamicFilter.res
+++ b/src/components/DynamicFilter.res
@@ -166,7 +166,7 @@ let make = (
 ) => {
   let localFilters = initialFilters->Array.filter(item => item.localFilter->Option.isSome)
   let remoteOptions = options->Array.filter(item => item.localFilter->Option.isNone)
-  let defaultFilters = ""->Js.Json.string
+  let defaultFilters = ""->JSON.Encode.string
   let (showModal, setShowModal) = React.useState(_ => false)
 
   let {updateExistingKeys, filterValue, removeKeys} = React.useContext(FilterContext.filterContext)
diff --git a/src/components/DynamicSingleStat.res b/src/components/DynamicSingleStat.res
index d726b99a9..0813b8022 100644
--- a/src/components/DynamicSingleStat.res
+++ b/src/components/DynamicSingleStat.res
@@ -16,7 +16,7 @@ type columns<'colType> = {
 }
 
 type singleStatBodyEntity = {
-  filter?: Js.Json.t,
+  filter?: JSON.t,
   metrics?: array<string>,
   delta?: bool,
   startDateTime: string,
@@ -39,8 +39,8 @@ type deltaRange = {currentSr: AnalyticsUtils.timeRanges}
 
 type entityType<'colType, 't, 't2> = {
   urlConfig: array<urlConfig>,
-  getObjects: Js.Json.t => 't,
-  getTimeSeriesObject: Js.Json.t => array<'t2>,
+  getObjects: JSON.t => 't,
+  getTimeSeriesObject: JSON.t => array<'t2>,
   defaultColumns: array<columns<'colType>>, // (sectionName, defaultColumns)
   getData: ('t, array<'t2>, deltaRange, 'colType, string) => singleStatData,
   totalVolumeCol: option<string>,
@@ -74,17 +74,17 @@ let singleStatBodyMake = (singleStatBodyEntity: singleStatBodyEntity) => {
       ~granularity=singleStatBodyEntity.granularity,
       ~prefix=singleStatBodyEntity.prefix,
       (),
-    )->Js.Json.object_,
+    )->JSON.Encode.object,
   ]
-  ->Js.Json.array
-  ->Js.Json.stringify
+  ->JSON.Encode.array
+  ->JSON.stringify
 }
 type singleStateData<'t, 't2> = {
-  singleStatData: option<Js.Array2.t<singleStatDataObj<'t>>>,
-  singleStatTimeData: option<Js.Array2.t<(string, Js.Array2.t<'t2>)>>,
+  singleStatData: option<array<singleStatDataObj<'t>>>,
+  singleStatTimeData: option<array<(string, array<'t2>)>>,
 }
 
-let deltaTimeRangeMapper: array<Js.Json.t> => deltaRange = (arrJson: array<Js.Json.t>) => {
+let deltaTimeRangeMapper: array<JSON.t> => deltaRange = (arrJson: array<JSON.t>) => {
   open LogicUtils
   let emptyDict = Dict.make()
   let _ = arrJson->Array.map(item => {
@@ -186,10 +186,10 @@ let make = (
       ->Belt.Array.keepMap(entry => {
         let (key, value) = entry
         if allFilterKeys->Array.includes(key) {
-          switch value->Js.Json.classify {
-          | JSONString(str) => `${key}=${str}`->Some
-          | JSONNumber(num) => `${key}=${num->String.make}`->Some
-          | JSONArray(arr) => `${key}=[${arr->String.make}]`->Some
+          switch value->JSON.Classify.classify {
+          | String(str) => `${key}=${str}`->Some
+          | Number(num) => `${key}=${num->String.make}`->Some
+          | Array(arr) => `${key}=[${arr->String.make}]`->Some
           | _ => None
           }
         } else {
@@ -209,7 +209,7 @@ let make = (
       filterKeys->Array.includes(key) ? Some((key, value)) : None
     })
     ->Dict.fromArray
-    ->Js.Json.object_
+    ->JSON.Encode.object
     ->Some
   }, [topFiltersToSearchParam])
 
@@ -296,7 +296,7 @@ let make = (
         )
         ->addLogsAroundFetch(~logTitle="SingleStat Data Api")
         ->then(json => resolve((`${urlConfig.prefix->Option.getOr("")}${uri}`, json)))
-        ->catch(_err => resolve(("", Js.Json.object_(Dict.make()))))
+        ->catch(_err => resolve(("", JSON.Encode.object(Dict.make()))))
       })
       ->Promise.all
       ->Promise.thenResolve(dataArr => {
@@ -311,7 +311,7 @@ let make = (
                   ->LogicUtils.getJsonObjectFromDict("queryData")
                   ->LogicUtils.getArrayFromJson([])
                   ->Array.get(0)
-                  ->Option.getOr(Js.Json.object_(Dict.make()))
+                  ->Option.getOr(JSON.Encode.object(Dict.make()))
                   ->LogicUtils.getDictFromJsonObject
                   ->Dict.toArray
                   ->Array.find(
@@ -323,7 +323,7 @@ let make = (
                 switch totalVolumeKeyVal {
                 | Some(data) => {
                     let (_key, value) = data
-                    setTotalVolume(_ => value->Js.Json.decodeNumber->Option.getOr(0.)->Float.toInt)
+                    setTotalVolume(_ => value->JSON.Decode.float->Option.getOr(0.)->Float.toInt)
                   }
 
                 | None => ()
@@ -400,7 +400,7 @@ let make = (
         )
         ->catch(
           _err => {
-            resolve(("", Js.Json.object_(Dict.make())))
+            resolve(("", JSON.Encode.object(Dict.make())))
           },
         )
       })
diff --git a/src/components/DynamicTable.res b/src/components/DynamicTable.res
index 9c066232c..478cf218f 100644
--- a/src/components/DynamicTable.res
+++ b/src/components/DynamicTable.res
@@ -1,6 +1,6 @@
 let useRemoteFilter = (~searchParams, ~remoteFilters, ~remoteOptions, ~mandatoryRemoteKeys) => {
   let (remoteFiltersFromUrl, setRemoteFiltersFromUrl) = React.useState(() =>
-    Js.Json.object_(Dict.make())
+    JSON.Encode.object(Dict.make())
   )
 
   let remoteFiltersFromUrlTemp = React.useMemo1(() => {
@@ -12,7 +12,7 @@ let useRemoteFilter = (~searchParams, ~remoteFilters, ~remoteOptions, ~mandatory
       (),
     )
   }, [searchParams])
-  if remoteFiltersFromUrlTemp->Js.Json.stringify !== remoteFiltersFromUrl->Js.Json.stringify {
+  if remoteFiltersFromUrlTemp->JSON.stringify !== remoteFiltersFromUrl->JSON.stringify {
     setRemoteFiltersFromUrl(_prev => remoteFiltersFromUrlTemp)
   }
   remoteFiltersFromUrl
@@ -177,7 +177,7 @@ let make = (
         DictionaryUtils.mergeDicts([
           b->LogicUtils.getDictFromJsonObject,
           remoteFilterDict,
-        ])->Js.Json.object_
+        ])->JSON.Encode.object
       } else {
         b
       }
@@ -239,7 +239,7 @@ let make = (
     }
     let uri = uri ++ getNewUrl(defaultFilters)
     setTableDataLoading(_ => true)
-    fetchApi(uri, ~bodyStr=Js.Json.stringify(finalJson), ~headers, ~method_=method, ())
+    fetchApi(uri, ~bodyStr=JSON.stringify(finalJson), ~headers, ~method_=method, ())
     ->then(resp => {
       let status = resp->Fetch.Response.status
       if status >= 300 {
@@ -250,9 +250,9 @@ let make = (
       Fetch.Response.json(resp)
     })
     ->then(json => {
-      switch json->Js.Json.classify {
-      | JSONArray(_arr) => json->getObjects->Array.map(obj => obj->Js.Nullable.return)->setNewData
-      | JSONObject(dict) => {
+      switch json->JSON.Classify.classify {
+      | Array(_arr) => json->getObjects->Array.map(obj => obj->Js.Nullable.return)->setNewData
+      | Object(dict) => {
           let flattenedObject = JsonFlattenUtils.flattenObject(json, false)
           switch Dict.get(flattenedObject, dataKey) {
           | Some(x) => x->getObjects->Array.map(obj => obj->Js.Nullable.return)->setNewData
@@ -260,7 +260,7 @@ let make = (
           }
           let summary = switch Dict.get(dict, summaryKey) {
           | Some(x) => x->getSummary
-          | None => dict->Js.Json.object_->getSummary
+          | None => dict->JSON.Encode.object->getSummary
           }
           setSummary(_ => summary)
         }
@@ -301,14 +301,10 @@ let make = (
     if rowFetched !== summary.totalCount {
       setTableDataLoading(_ => true)
       let newDefaultFilter =
-        defaultFilters
-        ->Js.Json.decodeObject
-        ->Option.getOr(Dict.make())
-        ->Dict.toArray
-        ->Dict.fromArray
+        defaultFilters->JSON.Decode.object->Option.getOr(Dict.make())->Dict.toArray->Dict.fromArray
 
-      Dict.set(newDefaultFilter, "offset", rowFetched->Js.Int.toFloat->Js.Json.number)
-      setDefaultFilters(_ => newDefaultFilter->Js.Json.object_)
+      Dict.set(newDefaultFilter, "offset", rowFetched->Js.Int.toFloat->JSON.Encode.float)
+      setDefaultFilters(_ => newDefaultFilter->JSON.Encode.object)
     }
   }
 
diff --git a/src/components/DynamicTableUtils.res b/src/components/DynamicTableUtils.res
index 65452ecfa..41718ce13 100644
--- a/src/components/DynamicTableUtils.res
+++ b/src/components/DynamicTableUtils.res
@@ -2,19 +2,21 @@ let tableHeadingClass = "font-bold text-xl text-black text-opacity-75 dark:text-
 type view = Table | Card
 
 let visibilityColFunc = (
-  ~dateFormatConvertor: string => option<Js.Json.t>,
-  ~jsonVal: option<Js.Json.t>,
+  ~dateFormatConvertor: string => option<JSON.t>,
+  ~jsonVal: option<JSON.t>,
   ~tableCell: Table.cell,
 ) => {
   switch tableCell {
-  | Label(x) | ColoredText(x) => (x.title->Js.Json.string->Some, jsonVal) // wherever we are doing transformation only that transformed value for serch
-  | Text(x) | EllipsisText(x, _) | CustomCell(_, x) => (x->Js.Json.string->Some, jsonVal)
+  | Label(x) | ColoredText(x) => (x.title->JSON.Encode.string->Some, jsonVal) // wherever we are doing transformation only that transformed value for serch
+  | Text(x) | EllipsisText(x, _) | CustomCell(_, x) => (x->JSON.Encode.string->Some, jsonVal)
   | Date(x) => (dateFormatConvertor(x), dateFormatConvertor(x))
   | StartEndDate(start, end) => (
       `${dateFormatConvertor(start)
-        ->Option.getOr(""->Js.Json.string)
-        ->String.make} ${dateFormatConvertor(end)->Option.getOr(""->Js.Json.string)->String.make}`
-      ->Js.Json.string
+        ->Option.getOr(""->JSON.Encode.string)
+        ->String.make} ${dateFormatConvertor(end)
+        ->Option.getOr(""->JSON.Encode.string)
+        ->String.make}`
+      ->JSON.Encode.string
       ->Some,
       dateFormatConvertor(end),
     )
@@ -28,7 +30,7 @@ let useDateFormatConvertor = () => {
   let dateFormatConvertor = dateStr => {
     try {
       let customTimeZone = isoStringToCustomTimeZone(dateStr)
-      TimeZoneHook.formattedDateTimeFloat(customTimeZone, dateFormat)->Js.Json.string->Some
+      TimeZoneHook.formattedDateTimeFloat(customTimeZone, dateFormat)->JSON.Encode.string->Some
     } catch {
     | _ => None
     }
@@ -37,11 +39,11 @@ let useDateFormatConvertor = () => {
 }
 
 let filteredData = (
-  actualData: Js.Array2.t<Js.Nullable.t<'t>>,
-  columnFilter: Dict.t<Js.Array2.t<Js.Json.t>>,
-  visibleColumns: option<Js.Array2.t<'colType>>,
+  actualData: array<Js.Nullable.t<'t>>,
+  columnFilter: Dict.t<array<JSON.t>>,
+  visibleColumns: option<array<'colType>>,
   entity: EntityType.entityType<'colType, 't>,
-  dateFormatConvertor: string => option<Js.Json.t>,
+  dateFormatConvertor: string => option<JSON.t>,
 ) => {
   let selectedFiltersKeys = columnFilter->Dict.keysToArray
   if selectedFiltersKeys->Array.length > 0 {
@@ -56,7 +58,7 @@ let filteredData = (
           | Some(selectedArr) => {
               // selected value of the fitler
               let jsonVal = Dict.get(
-                rowDict->Js.Json.object_->JsonFlattenUtils.flattenObject(false),
+                rowDict->JSON.Encode.object->JsonFlattenUtils.flattenObject(false),
                 keys,
               )
               let visibleColumns =
@@ -85,7 +87,7 @@ let filteredData = (
                   | DropDown => {
                       let selectedArr =
                         selectedArr
-                        ->Belt.Array.keepMap(item => item->Js.Json.decodeString)
+                        ->Belt.Array.keepMap(item => item->JSON.Decode.string)
                         ->Array.map(String.toLowerCase)
 
                       let currVal = switch jsonVal {
@@ -97,7 +99,7 @@ let filteredData = (
 
                   | LabelType | TextType => {
                       let selectedArr1 =
-                        selectedArr->Belt.Array.keepMap(item => item->Js.Json.decodeString)
+                        selectedArr->Belt.Array.keepMap(item => item->JSON.Decode.string)
 
                       let currVal = switch jsonVal {
                       | (Some(transformed), _) => transformed->String.make
@@ -113,7 +115,7 @@ let filteredData = (
 
                   | MoneyType | NumericType | ProgressType => {
                       let selectedArr =
-                        selectedArr->Belt.Array.keepMap(item => item->Js.Json.decodeNumber)
+                        selectedArr->Belt.Array.keepMap(item => item->JSON.Decode.float)
                       let currVal = switch jsonVal {
                       | (_, Some(actualVal)) => actualVal->String.make->Js.Float.fromString
                       | _ => 0.
@@ -145,16 +147,16 @@ let filteredData = (
 
 let convertStrCellToFloat = (dataType: Table.cellType, str: string) => {
   switch dataType {
-  | DropDown | LabelType | TextType => str->Js.Json.string
+  | DropDown | LabelType | TextType => str->JSON.Encode.string
   | MoneyType | NumericType | ProgressType =>
-    str->Float.fromString->Option.getOr(0.)->Js.Json.number
+    str->Float.fromString->Option.getOr(0.)->JSON.Encode.float
   }
 }
 
 let convertFloatCellToStr = (dataType: Table.cellType, num: float) => {
   switch dataType {
-  | DropDown | LabelType | TextType => num->Float.toString->Js.Json.string
-  | MoneyType | NumericType | ProgressType => num->Js.Json.number
+  | DropDown | LabelType | TextType => num->Float.toString->JSON.Encode.string
+  | MoneyType | NumericType | ProgressType => num->JSON.Encode.float
   }
 }
 
diff --git a/src/components/DynamicTabs.res b/src/components/DynamicTabs.res
index 61ec267b8..b3528e260 100644
--- a/src/components/DynamicTabs.res
+++ b/src/components/DynamicTabs.res
@@ -44,11 +44,7 @@ module TabInfo = {
     ~setCollapsibleTabs,
     ~selectedIndex,
     ~tabNames,
-    ~handleSelectedTab: (
-      ~tabValue: string,
-      ~collapsibleTabs: Js.Array2.t<tab>,
-      ~removed: bool,
-    ) => unit,
+    ~handleSelectedTab: (~tabValue: string, ~collapsibleTabs: array<tab>, ~removed: bool) => unit,
     ~tabStacksnames,
     ~setTabStacksnames,
     ~description="",
@@ -386,9 +382,9 @@ let make = (
     let collapsibleTabsValues =
       collapsibleTabs
       ->Array.map(item => {
-        item.value->Js.Json.string
+        item.value->JSON.Encode.string
       })
-      ->Js.Json.array
+      ->JSON.Encode.array
 
     addConfig(availableTabUserPrefKey, collapsibleTabsValues)
 
@@ -423,7 +419,7 @@ let make = (
 
   let handleSelectedTab: (
     ~tabValue: string,
-    ~collapsibleTabs: Js.Array2.t<tab>,
+    ~collapsibleTabs: array<tab>,
     ~removed: bool,
   ) => unit = (~tabValue: string, ~collapsibleTabs: array<tab>, ~removed: bool) => {
     if removed === false {
diff --git a/src/components/HSwitchFeedBackModal.res b/src/components/HSwitchFeedBackModal.res
index a9be6ae78..79b5a4b34 100644
--- a/src/components/HSwitchFeedBackModal.res
+++ b/src/components/HSwitchFeedBackModal.res
@@ -16,7 +16,7 @@ let make = (
       let url = getURL(~entityName=USERS, ~userType=#USER_DATA, ~methodType=Post, ())
       let body =
         [
-          ("Feedback", values->HSwitchUtils.getBodyForFeedBack(~modalType, ())->Js.Json.object_),
+          ("Feedback", values->HSwitchUtils.getBodyForFeedBack(~modalType, ())->JSON.Encode.object),
         ]->LogicUtils.getJsonFromArrayOfJson
       let _ = await updateDetails(url, body, Post, ())
       let successMessage = switch modalType {
diff --git a/src/components/HSwitchFeedBackModalUtils.res b/src/components/HSwitchFeedBackModalUtils.res
index d49a7cd37..fc5db2f61 100644
--- a/src/components/HSwitchFeedBackModalUtils.res
+++ b/src/components/HSwitchFeedBackModalUtils.res
@@ -59,18 +59,18 @@ let validateFields = (values, ~modalType) => {
   switch modalType {
   | FeedBackModal => {
       if values->getInt("rating", -1) === -1 {
-        errors->Dict.set("rating", "Please rate"->Js.Json.string)
+        errors->Dict.set("rating", "Please rate"->JSON.Encode.string)
       }
 
       if values->getString("category", "") !== "" && values->getString("feedbacks", "") === "" {
-        errors->Dict.set("feedbacks", "Please give the feedback"->Js.Json.string)
+        errors->Dict.set("feedbacks", "Please give the feedback"->JSON.Encode.string)
       }
     }
   | RequestConnectorModal =>
     if values->getString("connector_name", "")->String.length <= 0 {
-      errors->Dict.set("connector_name", "Please enter a connector name"->Js.Json.string)
+      errors->Dict.set("connector_name", "Please enter a connector name"->JSON.Encode.string)
     }
   }
 
-  errors->Js.Json.object_
+  errors->JSON.Encode.object
 }
diff --git a/src/components/HSwitchSingleStatWidget.res b/src/components/HSwitchSingleStatWidget.res
index af3307342..9a6e4a765 100644
--- a/src/components/HSwitchSingleStatWidget.res
+++ b/src/components/HSwitchSingleStatWidget.res
@@ -90,7 +90,7 @@ let make = (
       ),
       title: {
         "text": "",
-        "style": Js.Json.object_(Dict.make()),
+        "style": JSON.Encode.object(Dict.make()),
       }->genericObjectOrRecordToJson,
       credits: {
         "enabled": false,
@@ -143,7 +143,7 @@ let make = (
         "visible": false,
         "title": {
           "text": "",
-          "style": Js.Json.object_(Dict.make()),
+          "style": JSON.Encode.object(Dict.make()),
         }->genericObjectOrRecordToJson,
         "labels": {"formatter": None, "enabled": false, "useHTML": false}->Some,
         "zoomEnabled": false,
diff --git a/src/components/HandlingEvents.res b/src/components/HandlingEvents.res
index 19de49a1d..8a6eec3d7 100644
--- a/src/components/HandlingEvents.res
+++ b/src/components/HandlingEvents.res
@@ -1,22 +1,22 @@
 @scope("JSON") @val
-external parseIntoMyData: string => Js.Json.t = "parse"
+external parseIntoMyData: string => JSON.t = "parse"
 
-type jsonData = {data: Js.Json.t}
+type jsonData = {data: JSON.t}
 external convertToCustomEvent: Webapi.Dom.Event.t => jsonData = "%identity"
 
 let getEventDict = (ev: Dom.event) => {
   let objData = ev->convertToCustomEvent
   try {
     objData.data
-    ->Js.Json.decodeString
-    ->Option.map(Js.Json.parseExn)
+    ->JSON.Decode.string
+    ->Option.map(JSON.parseExn)
     ->Option.flatMap(parsedMsg => {
-      parsedMsg->Js.Json.decodeObject
+      parsedMsg->JSON.Decode.object
     })
   } catch {
   | _ => None
   }
 }
 
-type cookieData = {changed: Js.Array2.t<Js.Json.t>}
+type cookieData = {changed: array<JSON.t>}
 external convertToCookieCustomEvent: Webapi.Dom.Event.t => cookieData = "%identity"
diff --git a/src/components/InputFields.resi b/src/components/InputFields.resi
index fc2c1f41e..7ecba3dec 100644
--- a/src/components/InputFields.resi
+++ b/src/components/InputFields.resi
@@ -201,7 +201,7 @@ let dateRangeField: (
   ~disablePastDates: bool=?,
   ~disableFutureDates: bool=?,
   ~showTime: bool=?,
-  ~predefinedDays: Js.Array2.t<DateRangeUtils.customDateRange>=?,
+  ~predefinedDays: array<DateRangeUtils.customDateRange>=?,
   ~disableApply: bool=?,
   ~numMonths: int=?,
   ~dateRangeLimit: int=?,
diff --git a/src/components/LoadedTable.res b/src/components/LoadedTable.res
index c9329db8f..5651374ae 100644
--- a/src/components/LoadedTable.res
+++ b/src/components/LoadedTable.res
@@ -1,4 +1,4 @@
-external toJson: Js.Nullable.t<'a> => Js.Json.t = "%identity"
+external toJson: Js.Nullable.t<'a> => JSON.t = "%identity"
 open DynamicTableUtils
 open NewThemeUtils
 type sortTyp = ASC | DSC
@@ -9,8 +9,8 @@ type sortOb = {
 
 type checkBoxProps = {
   showCheckBox: bool,
-  selectedData: Js.Array2.t<Js.Json.t>,
-  setSelectedData: (Js.Array2.t<Js.Json.t> => Js.Array2.t<Js.Json.t>) => unit,
+  selectedData: array<JSON.t>,
+  setSelectedData: (array<JSON.t> => array<JSON.t>) => unit,
 }
 
 let checkBoxPropDefaultVal: checkBoxProps = {
@@ -73,38 +73,37 @@ let sortArray = (originalData, key, sortOrder: Table.sortOrder) => {
   let getValue = val => {
     switch val {
     | Some(x) =>
-      switch x->Js.Json.classify {
-      | JSONString(str) => str->String.toLowerCase->Js.Json.string
-      | JSONNumber(_num) => x
-      | JSONFalse => "false"->Js.Json.string
-      | JSONTrue => "true"->Js.Json.string
-      | _ => ""->Js.Json.string
+      switch x->JSON.Classify.classify {
+      | String(str) => str->String.toLowerCase->JSON.Encode.string
+      | Number(_num) => x
+      | Bool(val) => val ? "true"->JSON.Encode.string : "false"->JSON.Encode.string
+      | _ => ""->JSON.Encode.string
       }
-    | None => ""->Js.Json.string
+    | None => ""->JSON.Encode.string
     }
   }
   let sortedArrayByOrder = {
     let _ = originalData->Js.Array2.sortInPlaceWith((i1, i2) => {
-      let item1 = i1->Js.Json.stringifyAny->Option.getOr("")->LogicUtils.safeParse
-      let item2 = i2->Js.Json.stringifyAny->Option.getOr("")->LogicUtils.safeParse
+      let item1 = i1->JSON.stringifyAny->Option.getOr("")->LogicUtils.safeParse
+      let item2 = i2->JSON.stringifyAny->Option.getOr("")->LogicUtils.safeParse
       // flatten items and get data
 
       let val1 =
         JsonFlattenUtils.flattenObject(item1, true)
-        ->Js.Json.object_
-        ->Js.Json.decodeObject
+        ->JSON.Encode.object
+        ->JSON.Decode.object
         ->Option.flatMap(dict => dict->Dict.get(key))
       let val2 =
         JsonFlattenUtils.flattenObject(item2, true)
-        ->Js.Json.object_
-        ->Js.Json.decodeObject
+        ->JSON.Encode.object
+        ->JSON.Decode.object
         ->Option.flatMap(dict => dict->Dict.get(key))
       let value1 = getValue(val1)
       let value2 = getValue(val2)
-      if value1 === ""->Js.Json.string || value2 === ""->Js.Json.string {
+      if value1 === ""->JSON.Encode.string || value2 === ""->JSON.Encode.string {
         if value1 === value2 {
           0
-        } else if value2 === ""->Js.Json.string {
+        } else if value2 === ""->JSON.Encode.string {
           sortOrder === DEC ? 1 : -1
         } else if sortOrder === DEC {
           -1
@@ -176,7 +175,7 @@ let make = (
   ~advancedSearchComponent=?,
   ~setData=?,
   ~setSummary=?,
-  ~customGetObjects: option<Js.Json.t => array<'a>>=?,
+  ~customGetObjects: option<JSON.t => array<'a>>=?,
   ~dataNotFoundComponent=?,
   ~renderCard=?,
   ~tableLocalFilter=false,
@@ -320,7 +319,7 @@ let make = (
   let localResultsPerPage = pageDetail.resultsPerPage
 
   let setColumnFilter = React.useMemo1(() => {
-    (filterKey, filterValue: array<Js.Json.t>) => {
+    (filterKey, filterValue: array<JSON.t>) => {
       setColumnFilterOrig(oldFitlers => {
         let newObj = oldFitlers->Dict.toArray->Dict.fromArray
         let filterValue = filterValue->Array.filter(
@@ -485,7 +484,7 @@ let make = (
           | LabelType | TextType => Table.TextFilter(key)
           | MoneyType | NumericType | ProgressType => {
               let newArr =
-                filterValueArray->Array.map(item => item->Js.Json.decodeNumber->Option.getOr(0.))
+                filterValueArray->Array.map(item => item->JSON.Decode.float->Option.getOr(0.))
 
               if newArr->Array.length >= 1 {
                 Table.Range(key, Js.Math.minMany_float(newArr), Js.Math.maxMany_float(newArr))
@@ -567,9 +566,9 @@ let make = (
           ->Array.map(colType => {
             entity.getCell(item, colType)
           })
-        let startPoint = sNoArr->Array.get(0)->Option.getOr(1.->Js.Json.number)
-        let endPoint = sNoArr->Array.get(1)->Option.getOr(1.->Js.Json.number)
-        let jsonIndex = (index + 1)->Int.toFloat->Js.Json.number
+        let startPoint = sNoArr->Array.get(0)->Option.getOr(1.->JSON.Encode.float)
+        let endPoint = sNoArr->Array.get(1)->Option.getOr(1.->JSON.Encode.float)
+        let jsonIndex = (index + 1)->Int.toFloat->JSON.Encode.float
         sNoArr->Array.length > 0
           ? {
               startPoint <= jsonIndex && endPoint >= jsonIndex ? visibleCell : []
diff --git a/src/components/LoadedTable.resi b/src/components/LoadedTable.resi
index 0f33322a5..f593cdd2f 100644
--- a/src/components/LoadedTable.resi
+++ b/src/components/LoadedTable.resi
@@ -1,10 +1,10 @@
-external toJson: Js.Nullable.t<'a> => Js.Json.t = "%identity"
+external toJson: Js.Nullable.t<'a> => JSON.t = "%identity"
 type sortTyp = ASC | DSC
 type sortOb = {sortKey: string, sortType: sortTyp}
 type checkBoxProps = {
   showCheckBox: bool,
-  selectedData: Js.Array2.t<Js.Json.t>,
-  setSelectedData: (Js.Array2.t<Js.Json.t> => Js.Array2.t<Js.Json.t>) => unit,
+  selectedData: array<JSON.t>,
+  setSelectedData: (array<JSON.t> => array<JSON.t>) => unit,
 }
 let checkBoxPropDefaultVal: checkBoxProps
 let sortAtom: Recoil.recoilAtom<RescriptCore.Dict.t<sortOb>>
@@ -16,12 +16,12 @@ let useSortedObj: (
   option<Table.sortedObject>,
   (option<Table.sortedObject> => option<Table.sortedObject>) => unit,
 )
-let sortArray: (Js.Array2.t<'a>, string, Table.sortOrder) => Js.Array2.t<'a>
+let sortArray: (array<'a>, string, Table.sortOrder) => array<'a>
 type pageDetails = {offset: int, resultsPerPage: int}
 let table_pageDetails: Recoil.recoilAtom<RescriptCore.Dict.t<pageDetails>>
 @react.component
 let make: (
-  ~visibleColumns: Js.Array2.t<'a>=?,
+  ~visibleColumns: array<'a>=?,
   ~defaultSort: Table.sortedObject=?,
   ~title: Js.String2.t,
   ~titleSize: NewThemeUtils.headingSize=?,
@@ -33,7 +33,7 @@ let make: (
   ~clearFormattedDataButton: React.element=?,
   ~bottomActions: React.element=?,
   ~showSerialNumber: bool=?,
-  ~actualData: Js.Array2.t<Js.Nullable.t<'b>>,
+  ~actualData: array<Js.Nullable.t<'b>>,
   ~totalResults: int,
   ~resultsPerPage: int,
   ~offset: int,
@@ -60,7 +60,7 @@ let make: (
   ~advancedSearchComponent: React.element=?,
   ~setData: ('e => option<array<Js.Nullable.t<'b>>>) => unit=?,
   ~setSummary: ('f => EntityType.summary) => unit=?,
-  ~customGetObjects: Js.Json.t => array<'g>=?,
+  ~customGetObjects: JSON.t => array<'g>=?,
   ~dataNotFoundComponent: React.element=?,
   ~renderCard: (~index: int, ~item: 'b, ~onRowClick: React.callback<int, unit>) => React.element=?,
   ~tableLocalFilter: bool=?,
@@ -83,7 +83,7 @@ let make: (
   ~rowCustomClass: string=?,
   ~isHighchartLegend: bool=?,
   ~filterObj: array<Table.filterObject>=?,
-  ~setFilterObj: (array<Table.filterObject> => Js.Array2.t<Table.filterObject>) => unit=?,
+  ~setFilterObj: (array<Table.filterObject> => array<Table.filterObject>) => unit=?,
   ~headingCenter: bool=?,
   ~filterIcon: React.element=?,
   ~filterDropdownClass: string=?,
diff --git a/src/components/LocalFilters.res b/src/components/LocalFilters.res
index 4190c5e86..bfd0a9b5a 100644
--- a/src/components/LocalFilters.res
+++ b/src/components/LocalFilters.res
@@ -20,7 +20,7 @@ module CheckLocalFilters = {
 
     React.useEffect1(() => {
       if formState.dirty {
-        switch formState.values->Js.Json.decodeObject {
+        switch formState.values->JSON.Decode.object {
         | Some(valuesDict) => valuesDict->applyFilters
         | None => ()
         }
@@ -61,7 +61,7 @@ module CheckLocalFilters = {
               isDropDown=true
               hideMultiSelectButtons=true
               buttonType=Button.FilterAdd
-              value={checkedFilters->Js.Array.map(Js.Json.string, _)->Js.Json.array}
+              value={checkedFilters->Array.map(JSON.Encode.string)->JSON.Encode.array}
               searchable=showSelectFiltersSearch
             />
           </div>
@@ -99,7 +99,7 @@ let make = (
   let (checkedFilters, setCheckedFilters) = React.useState(_ => [])
   let url = RescriptReactRouter.useUrl()
   let searchParams = disableURIdecode ? url.search : url.search->Js.Global.decodeURI
-  let (initialValueJson, setInitialValueJson) = React.useState(_ => Js.Json.object_(Dict.make()))
+  let (initialValueJson, setInitialValueJson) = React.useState(_ => JSON.Encode.object(Dict.make()))
   let remoteFiltersJson = RemoteFiltersUtils.getInitialValuesFromUrl(
     ~searchParams,
     ~initialFilters=remoteFilters,
@@ -121,7 +121,7 @@ let make = (
     let localSelectedFiltersList = selectedFiltersList->Array.copy
 
     initialValues
-    ->Js.Json.decodeObject
+    ->JSON.Decode.object
     ->Option.getOr(Dict.make())
     ->Dict.toArray
     ->Array.forEach(entry => {
@@ -191,7 +191,7 @@ let make = (
 
     let newInitialValues =
       initialValueJson
-      ->Js.Json.decodeObject
+      ->JSON.Decode.object
       ->Option.getOr(Dict.make())
       ->Dict.toArray
       ->Array.filter(entry => {
@@ -199,9 +199,9 @@ let make = (
         !Array.includes(toBeRemoved, key)
       })
       ->Dict.fromArray
-      ->Js.Json.object_
+      ->JSON.Encode.object
 
-    switch values->Js.Json.decodeObject {
+    switch values->JSON.Decode.object {
     | Some(dict) =>
       dict
       ->Dict.toArray
@@ -209,7 +209,7 @@ let make = (
         let (key, _val) = entry
 
         if toBeRemoved->Array.includes(key) {
-          dict->Dict.set(key, Js.Json.string(""))
+          dict->Dict.set(key, JSON.Encode.string(""))
         }
         dict->applyFilters
       })
diff --git a/src/components/MakeRuleFieldComponent.res b/src/components/MakeRuleFieldComponent.res
index 9c509c086..aa2f989f9 100644
--- a/src/components/MakeRuleFieldComponent.res
+++ b/src/components/MakeRuleFieldComponent.res
@@ -4,7 +4,7 @@ let validateConditionJson = json => {
     dict
     ->getArrayFromDict("value", [])
     ->Array.filter(ele => {
-      ele != ""->Js.Json.string
+      ele != ""->JSON.Encode.string
     })
     ->Array.length > 0 ||
     dict->getString("value", "") !== "" ||
@@ -12,7 +12,7 @@ let validateConditionJson = json => {
     dict->getString("operator", "") == "IS NULL" ||
     dict->getString("operator", "") == "IS NOT NULL"
   }
-  switch json->Js.Json.decodeObject {
+  switch json->JSON.Decode.object {
   | Some(dict) =>
     ["operator", "real_field"]->Array.every(key => dict->Dict.get(key)->Option.isSome) &&
       dict->checkValue
@@ -47,7 +47,7 @@ module CompressedView = {
     let conditionInput = ReactFinalForm.useField(id).input
     let condition =
       conditionInput.value
-      ->Js.Json.decodeObject
+      ->JSON.Decode.object
       ->Option.flatMap(dict => {
         Some(
           dict->getString("logical.operator", ""),
diff --git a/src/components/MultiLineTextInput.res b/src/components/MultiLineTextInput.res
index 26f8bdbcc..561bfeb44 100644
--- a/src/components/MultiLineTextInput.res
+++ b/src/components/MultiLineTextInput.res
@@ -19,7 +19,7 @@ let make = (
   }
 
   React.useEffect1(() => {
-    let val = input.value->Js.Json.decodeString->Option.getOr("")
+    let val = input.value->JSON.Decode.string->Option.getOr("")
     if val->String.includes("<script>") || val->String.includes("</script>") {
       showPopUp({
         popUpType: (Warning, WithIcon),
@@ -38,9 +38,9 @@ let make = (
   }, [input.value])
 
   let className = `rounded-md border border-jp-gray-lightmode_steelgray border-opacity-75 font-semibold pl-4 pt-3 pb-3 text-jp-gray-900  text-opacity-75 placeholder-jp-gray-900 placeholder-opacity-25 hover:bg-jp-gray-lightmode_steelgray hover:bg-opacity-20 hover:border-jp-gray-900 hover:border-opacity-20 focus:text-opacity-100 focus:outline-none focus:border-blue-800 focus:border-opacity-100 dark:text-jp-gray-text_darktheme dark:text-opacity-75 dark:border-jp-gray-960 dark:hover:border-jp-gray-960 dark:hover:bg-jp-gray-970 dark:bg-jp-gray-darkgray_background dark:placeholder-jp-gray-text_darktheme dark:placeholder-opacity-25 dark:focus:text-opacity-100 dark:focus:border-blue-800 ${cursorClass} ${customClass}`
-  let value = switch input.value->Js.Json.classify {
-  | JSONString(str) => str
-  | JSONNumber(num) => num->Float.toString
+  let value = switch input.value->JSON.Classify.classify {
+  | String(str) => str
+  | Number(num) => num->Float.toString
   | _ => ""
   }
 
diff --git a/src/components/MultipleFileUpload.res b/src/components/MultipleFileUpload.res
index 34ce971ef..5658ed4c8 100644
--- a/src/components/MultipleFileUpload.res
+++ b/src/components/MultipleFileUpload.res
@@ -58,7 +58,7 @@ let make = (
       input.value
       ->getArrayFromJson([])
       ->Array.filterWithIndex((_, i) => indx != i)
-      ->Js.Json.array
+      ->JSON.Encode.array
       ->Identity.anyTypeToReactEvent,
     )
     setKey(prev => prev + 1)
@@ -79,7 +79,7 @@ let make = (
         mimeArr
       })
 
-      files->Array.push(value->Js.Json.string)->ignore
+      files->Array.push(value->JSON.Encode.string)->ignore
       if showUploadtoast {
         toast("File Uploaded Successfully", ToastSuccess)
       }
@@ -154,7 +154,7 @@ let make = (
                           mimeArr
                         })
 
-                        files->Array.push(value->Js.Json.string)->ignore
+                        files->Array.push(value->JSON.Encode.string)->ignore
 
                         if showUploadtoast {
                           toast("File Uploaded Successfully", ToastSuccess)
@@ -189,13 +189,13 @@ let make = (
       ~fileName,
       ~content=decodeParsedfile
         ? try {
-            val->Array.get(indx)->Option.getOr(Js.Json.null)->getStringFromJson("")->atob
+            val->Array.get(indx)->Option.getOr(JSON.Encode.null)->getStringFromJson("")->atob
           } catch {
           | _ =>
             toast("Error : Unable to parse file", ToastError)
             ""
           }
-        : val->Array.get(indx)->Option.getOr(Js.Json.null)->getStringFromJson(""),
+        : val->Array.get(indx)->Option.getOr(JSON.Encode.null)->getStringFromJson(""),
     )
   }
 
@@ -218,7 +218,7 @@ let make = (
             setFileTypes(prev => prev->Array.concat(mimeType))
             input.onChange(
               Identity.anyTypeToReactEvent(
-                input.value->getArrayFromJson([])->Array.concat([file->Js.Json.string]),
+                input.value->getArrayFromJson([])->Array.concat([file->JSON.Encode.string]),
               ),
             )
           }
diff --git a/src/components/NewCalendarList.res b/src/components/NewCalendarList.res
index 0bff7e519..4a2b39ed3 100644
--- a/src/components/NewCalendarList.res
+++ b/src/components/NewCalendarList.res
@@ -165,7 +165,7 @@ let make = (
           setFromDate(_ => value)
         },
         onFocus: _ => setFromDateOnFocus(_ => true),
-        value: fromDate->Js.Json.string,
+        value: fromDate->JSON.Encode.string,
         checked: true,
       }
 
@@ -177,7 +177,7 @@ let make = (
           setToDate(_ => value)
         },
         onFocus: _ => setToDateOnFocus(_ => true),
-        value: toDate->Js.Json.string,
+        value: toDate->JSON.Encode.string,
         checked: true,
       }
 
diff --git a/src/components/NewCalendarTimeInput.res b/src/components/NewCalendarTimeInput.res
index f4b8183d1..ee630a6c2 100644
--- a/src/components/NewCalendarTimeInput.res
+++ b/src/components/NewCalendarTimeInput.res
@@ -29,7 +29,7 @@ module CustomInputBox = {
         placeholder-jp-gray-900 placeholder-opacity-50 dark:placeholder-jp-gray-700 dark:placeholder-opacity-50
          ${borderClass}
         focus:text-opacity-100 focus:outline-none dark:text-jp-gray-text_darktheme dark:text-opacity-75 dark:focus:text-opacity-100  ${fontClassName}`
-    let value = switch input.value->Js.Json.decodeString {
+    let value = switch input.value->JSON.Decode.string {
     | Some(str) => str
     | _ => ""
     }
@@ -117,7 +117,7 @@ let make = (
       setFromTime(_ => value)
     },
     onFocus: _ => (),
-    value: fromTime->Js.Json.string,
+    value: fromTime->JSON.Encode.string,
     checked: true,
   }
 
@@ -129,7 +129,7 @@ let make = (
       settoTime(_ => value)
     },
     onFocus: _ => (),
-    value: toTime->Js.Json.string,
+    value: toTime->JSON.Encode.string,
     checked: true,
   }
 
diff --git a/src/components/Pagination.res b/src/components/Pagination.res
index 4c07ae27e..9342ee5c1 100644
--- a/src/components/Pagination.res
+++ b/src/components/Pagination.res
@@ -113,7 +113,7 @@ let make = (~resultsPerPage, ~totalResults, ~currentPage, ~paginate, ~btnCount=4
           paginate(_evt->formEventToInt)
         },
         onFocus: _ev => (),
-        value: ""->Js.Json.string,
+        value: ""->JSON.Encode.string,
         checked: true,
       }
 
diff --git a/src/components/Paginator.res b/src/components/Paginator.res
index 6b10000f0..a926906e7 100644
--- a/src/components/Paginator.res
+++ b/src/components/Paginator.res
@@ -52,7 +52,7 @@ let make = (
       })
     },
     onFocus: _ev => (),
-    value: resultsPerPage->Int.toString->Js.Json.string,
+    value: resultsPerPage->Int.toString->JSON.Encode.string,
     checked: true,
   }
   let paginate = React.useCallback5(pageNumber => {
diff --git a/src/components/RangeSlider.res b/src/components/RangeSlider.res
index 1e656089d..b26b9638c 100644
--- a/src/components/RangeSlider.res
+++ b/src/components/RangeSlider.res
@@ -26,8 +26,8 @@ let make = (
     ...maxSlide,
     value: maxSlide.value <= minSlide.value
       ? minSlide.value
-      : maxSlide.value > max->Js.Json.number
-      ? max->Js.Json.number
+      : maxSlide.value > max->JSON.Encode.float
+      ? max->JSON.Encode.float
       : maxSlide.value,
   }
 
@@ -35,8 +35,8 @@ let make = (
     ...minSlide,
     value: minSlide.value >= maxSlide.value
       ? maxSlide.value
-      : minSlide.value < min->Js.Json.number
-      ? min->Js.Json.number
+      : minSlide.value < min->JSON.Encode.float
+      ? min->JSON.Encode.float
       : minSlide.value,
   }
 
@@ -45,14 +45,14 @@ let make = (
   }, (max, min))
 
   let maxsliderVal = React.useMemo1(() => {
-    switch maxSlide.value->Js.Json.decodeNumber {
+    switch maxSlide.value->JSON.Decode.float {
     | Some(num) => Js.Math.ceil_float(num)->Js.Float.toString
     | None => "0"
     }
   }, [maxSlide.value])
 
   let minsliderVal = React.useMemo1(() => {
-    switch minSlide.value->Js.Json.decodeNumber {
+    switch minSlide.value->JSON.Decode.float {
     | Some(num) => Js.Math.floor_float(num)->Js.Float.toString
     | None => "0"
     }
@@ -143,7 +143,7 @@ let make = (
           max={max->Float.toString}
           onBlur={ev => {
             let minVal = minSlideVal
-            let maxSliderValue = maxSlide.value->Js.Json.decodeNumber->Option.getOr(0.)
+            let maxSliderValue = maxSlide.value->JSON.Decode.float->Option.getOr(0.)
             if minVal >= min && minVal < maxSliderValue {
               setHasError(((_, max)) => (false, max))
               minSlide.onChange(ev->Identity.anyTypeToReactEvent)
@@ -160,7 +160,7 @@ let make = (
             let keyCode = ev->ReactEvent.Keyboard.keyCode
             if key === "Enter" || keyCode === 13 {
               let minVal = minSlideVal
-              let maxSliderValue = maxSlide.value->Js.Json.decodeNumber->Option.getOr(0.)
+              let maxSliderValue = maxSlide.value->JSON.Decode.float->Option.getOr(0.)
               if minVal >= min && minVal <= maxSliderValue {
                 setHasError(((_, max)) => (false, max))
                 minSlide.onChange(ev->Identity.anyTypeToReactEvent)
@@ -181,7 +181,7 @@ let make = (
           max={max->Float.toString}
           onBlur={ev => {
             let maxVal = maxSlideVal
-            let minSliderValue = minSlide.value->Js.Json.decodeNumber->Option.getOr(0.)
+            let minSliderValue = minSlide.value->JSON.Decode.float->Option.getOr(0.)
             if maxVal <= max && maxVal > minSliderValue {
               setHasError(((min, _)) => (min, false))
               maxSlide.onChange(ev->Identity.anyTypeToReactEvent)
@@ -198,7 +198,7 @@ let make = (
             let keyCode = ev->ReactEvent.Keyboard.keyCode
 
             let maxVal = maxSlideVal
-            let minSliderValue = minSlide.value->Js.Json.decodeNumber->Option.getOr(0.)
+            let minSliderValue = minSlide.value->JSON.Decode.float->Option.getOr(0.)
             if key === "Enter" || keyCode === 13 {
               if maxVal <= max && maxVal >= minSliderValue {
                 setHasError(((min, _)) => (min, false))
diff --git a/src/components/ReactWindowTable.res b/src/components/ReactWindowTable.res
index c9d9dc85e..6608da2bb 100644
--- a/src/components/ReactWindowTable.res
+++ b/src/components/ReactWindowTable.res
@@ -1,9 +1,9 @@
 open TableUtils
-external toJson: Js.Nullable.t<'a> => Js.Json.t = "%identity"
+external toJson: Js.Nullable.t<'a> => JSON.t = "%identity"
 type checkBoxProps = {
   showCheckBox: bool,
-  selectedData: Js.Array2.t<Js.Json.t>,
-  setSelectedData: (Js.Array2.t<Js.Json.t> => Js.Array2.t<Js.Json.t>) => unit,
+  selectedData: array<JSON.t>,
+  setSelectedData: (array<JSON.t> => array<JSON.t>) => unit,
 }
 
 let checkBoxPropDefaultVal: checkBoxProps = {
@@ -243,7 +243,7 @@ module ReactWindowTableComponent = {
     ~customCellColor="",
     ~showCheckBox=false,
   ) => {
-    let actualData: option<Js.Array2.t<Js.Nullable.t<'t>>> = actualData
+    let actualData: option<array<Js.Nullable.t<'t>>> = actualData
 
     let getRowDetails = (rowIndex: int) => {
       switch actualData {
@@ -586,25 +586,24 @@ let sortArray = (originalData, key, sortOrder: Table.sortOrder) => {
   let getValue = val => {
     switch val {
     | Some(x) =>
-      switch x->Js.Json.classify {
-      | JSONString(_str) => x
-      | JSONNumber(_num) => x
-      | JSONFalse => "false"->Js.Json.string
-      | JSONTrue => "true"->Js.Json.string
-      | _ => ""->Js.Json.string
+      switch x->JSON.Classify.classify {
+      | String(_str) => x
+      | Number(_num) => x
+      | Bool(val) => val ? "true"->JSON.Encode.string : "false"->JSON.Encode.string
+      | _ => ""->JSON.Encode.string
       }
-    | None => ""->Js.Json.string
+    | None => ""->JSON.Encode.string
     }
   }
   let sortedArrayByOrder = {
     let _ = originalData->Js.Array2.sortInPlaceWith((i1, i2) => {
-      let item1 = i1->Js.Json.stringifyAny->Option.getOr("")->LogicUtils.safeParse
-      let item2 = i2->Js.Json.stringifyAny->Option.getOr("")->LogicUtils.safeParse
+      let item1 = i1->JSON.stringifyAny->Option.getOr("")->LogicUtils.safeParse
+      let item2 = i2->JSON.stringifyAny->Option.getOr("")->LogicUtils.safeParse
       // flatten items and get data
 
-      let val1 = item1->Js.Json.decodeObject->Option.flatMap(dict => dict->Dict.get(key))
+      let val1 = item1->JSON.Decode.object->Option.flatMap(dict => dict->Dict.get(key))
 
-      let val2 = item2->Js.Json.decodeObject->Option.flatMap(dict => dict->Dict.get(key))
+      let val2 = item2->JSON.Decode.object->Option.flatMap(dict => dict->Dict.get(key))
 
       let value1 = getValue(val1)
       let value2 = getValue(val2)
@@ -625,7 +624,7 @@ let sortArray = (originalData, key, sortOrder: Table.sortOrder) => {
 
 @react.component
 let make = (
-  ~actualData: Js.Array2.t<Js.Nullable.t<'t>>,
+  ~actualData: array<Js.Nullable.t<'t>>,
   ~defaultSort=?,
   ~title,
   ~visibleColumns=?,
@@ -641,7 +640,7 @@ let make = (
   ~downloadCsv=?,
   ~hideTitle=false,
   ~tableDataLoading=false,
-  ~customGetObjects: option<Js.Json.t => array<'a>>=?,
+  ~customGetObjects: option<JSON.t => array<'a>>=?,
   ~dataNotFoundComponent=?,
   ~tableLocalFilter=false,
   ~tableheadingClass="",
@@ -704,7 +703,7 @@ let make = (
   }
 
   let setColumnFilter = React.useMemo1(() => {
-    (filterKey, filterValue: array<Js.Json.t>) => {
+    (filterKey, filterValue: array<JSON.t>) => {
       setColumnFilterOrig(oldFitlers => {
         let newObj = oldFitlers->Dict.toArray->Dict.fromArray
         let filterValue = filterValue->Array.filter(
@@ -841,7 +840,7 @@ let make = (
           | MoneyType | NumericType | ProgressType => {
               let newArr =
                 filterValueArray
-                ->Array.map(item => item->Js.Json.decodeNumber->Option.getOr(0.))
+                ->Array.map(item => item->JSON.Decode.float->Option.getOr(0.))
                 ->Js.Array2.sortInPlaceWith(LogicUtils.numericArraySortComperator)
               let lengthOfArr = newArr->Array.length
 
@@ -935,9 +934,9 @@ let make = (
             ->Array.map(colType => {
               entity.getCell(item, colType)
             })
-          let startPoint = sNoArr->Array.get(0)->Option.getOr(1.->Js.Json.number)
-          let endPoint = sNoArr->Array.get(1)->Option.getOr(1.->Js.Json.number)
-          let jsonIndex = (index + 1)->Int.toFloat->Js.Json.number
+          let startPoint = sNoArr->Array.get(0)->Option.getOr(1.->JSON.Encode.float)
+          let endPoint = sNoArr->Array.get(1)->Option.getOr(1.->JSON.Encode.float)
+          let jsonIndex = (index + 1)->Int.toFloat->JSON.Encode.float
           sNoArr->Array.length > 0
             ? {
                 startPoint <= jsonIndex && endPoint >= jsonIndex ? visibleCell : []
@@ -948,7 +947,7 @@ let make = (
       | None => []
       }
       let getIdFromJson = json => {
-        let selectedPlanDict = json->Js.Json.decodeObject->Option.getOr(Dict.make())
+        let selectedPlanDict = json->JSON.Decode.object->Option.getOr(Dict.make())
         selectedPlanDict->LogicUtils.getString("id", "")
       }
       let setIsSelected = isSelected => {
diff --git a/src/components/RemoteFilter.res b/src/components/RemoteFilter.res
index ac3d24444..cc09b83a3 100644
--- a/src/components/RemoteFilter.res
+++ b/src/components/RemoteFilter.res
@@ -7,7 +7,7 @@ module ClearForm = {
     <div className="ml-2">
       <Button
         text="Clear Form"
-        onClick={e => form.reset(Js.Json.object_(Dict.make())->Js.Nullable.return)}
+        onClick={e => form.reset(JSON.Encode.object(Dict.make())->Js.Nullable.return)}
       />
     </div>
   }
@@ -137,17 +137,17 @@ module ClearFilters = {
       _ => {
         let searchStr =
           formState.values
-          ->Js.Json.decodeObject
+          ->JSON.Decode.object
           ->Option.getOr(Dict.make())
           ->Dict.toArray
           ->Belt.Array.keepMap(entry => {
             let (key, value) = entry
             switch defaultFilterKeys->Array.includes(key) {
             | true =>
-              switch value->Js.Json.classify {
-              | JSONString(str) => `${key}=${str}`->Some
-              | JSONNumber(num) => `${key}=${num->String.make}`->Some
-              | JSONArray(arr) => `${key}=[${arr->String.make}]`->Some
+              switch value->JSON.Classify.classify {
+              | String(str) => `${key}=${str}`->Some
+              | Number(num) => `${key}=${num->String.make}`->Some
+              | Array(arr) => `${key}=[${arr->String.make}]`->Some
               | _ => None
               }
             | false => None
@@ -161,15 +161,15 @@ module ClearFilters = {
 
     let hasExtraFilters = React.useMemo2(() => {
       formState.initialValues
-      ->Js.Json.decodeObject
+      ->JSON.Decode.object
       ->Option.getOr(Dict.make())
       ->Dict.toArray
       ->Array.filter(entry => {
         let (key, value) = entry
-        let isEmptyValue = switch value->Js.Json.classify {
-        | JSONString(str) => str === ""
-        | JSONArray(arr) => arr->Array.length === 0
-        | JSONNull => true
+        let isEmptyValue = switch value->JSON.Classify.classify {
+        | String(str) => str === ""
+        | Array(arr) => arr->Array.length === 0
+        | Null => true
         | _ => false
         }
 
@@ -207,17 +207,17 @@ module AnalyticsClearFilters = {
       _ => {
         let searchStr =
           formState.values
-          ->Js.Json.decodeObject
+          ->JSON.Decode.object
           ->Option.getOr(Dict.make())
           ->Dict.toArray
           ->Belt.Array.keepMap(entry => {
             let (key, value) = entry
             switch defaultFilterKeys->Array.includes(key) {
             | true =>
-              switch value->Js.Json.classify {
-              | JSONString(str) => `${key}=${str}`->Some
-              | JSONNumber(num) => `${key}=${num->String.make}`->Some
-              | JSONArray(arr) => `${key}=[${arr->String.make}]`->Some
+              switch value->JSON.Classify.classify {
+              | String(str) => `${key}=${str}`->Some
+              | Number(num) => `${key}=${num->String.make}`->Some
+              | Array(arr) => `${key}=[${arr->String.make}]`->Some
               | _ => None
               }
             | false => None
@@ -231,15 +231,15 @@ module AnalyticsClearFilters = {
 
     let hasExtraFilters = React.useMemo2(() => {
       formState.initialValues
-      ->Js.Json.decodeObject
+      ->JSON.Decode.object
       ->Option.getOr(Dict.make())
       ->Dict.toArray
       ->Array.filter(entry => {
         let (key, value) = entry
-        let isEmptyValue = switch value->Js.Json.classify {
-        | JSONString(str) => str === ""
-        | JSONArray(arr) => arr->Array.length === 0
-        | JSONNull => true
+        let isEmptyValue = switch value->JSON.Classify.classify {
+        | String(str) => str === ""
+        | Array(arr) => arr->Array.length === 0
+        | Null => true
         | _ => false
         }
 
@@ -306,7 +306,7 @@ module CheckCustomFilters = {
             isDropDown=true
             hideMultiSelectButtons=true
             buttonType=Button.FilterAdd
-            value={checkedFilters->Js.Array.map(Js.Json.string, _)->Js.Json.array}
+            value={checkedFilters->Array.map(JSON.Encode.string)->JSON.Encode.array}
             searchable=showSelectFiltersSearch
           />
         </div>
@@ -348,10 +348,10 @@ module AutoSubmitter = {
 }
 
 let getStrFromJson = (key, val) => {
-  switch val->Js.Json.classify {
-  | JSONString(str) => str
-  | JSONArray(array) => array->Array.length > 0 ? `[${array->Array.joinWithUnsafe(",")}]` : ""
-  | JSONNumber(num) => key === "offset" ? "0" : num->Float.toInt->string_of_int
+  switch val->JSON.Classify.classify {
+  | String(str) => str
+  | Array(array) => array->Array.length > 0 ? `[${array->Array.joinWithUnsafe(",")}]` : ""
+  | Number(num) => key === "offset" ? "0" : num->Float.toInt->string_of_int
   | _ => ""
   }
 }
@@ -426,11 +426,11 @@ module ApplyFilterButton = {
         ->Dict.toArray
         ->Array.reduce(true, (acc, item) => {
           let (_, value) = item
-          switch value->Js.Json.classify {
-          | JSONString(str) => str === ""
-          | JSONArray(arr) => arr->Array.length === 0
-          | JSONObject(dict) => dict->Dict.toArray->Array.length === 0
-          | JSONNull => true
+          switch value->JSON.Classify.classify {
+          | String(str) => str === ""
+          | Array(arr) => arr->Array.length === 0
+          | Object(dict) => dict->Dict.toArray->Array.length === 0
+          | Null => true
           | _ => false
           } &&
           acc
@@ -454,7 +454,7 @@ module ApplyFilterButton = {
 
 module FilterModal = {
   @react.component
-  let make = (~selectedFiltersList: Js.Array2.t<FormRenderer.fieldInfoType>, ~showAllFilter) => {
+  let make = (~selectedFiltersList: array<FormRenderer.fieldInfoType>, ~showAllFilter) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
       ReactFinalForm.useFormSubscription(["values", "dirtyFields"])->Js.Nullable.return,
     )
@@ -565,7 +565,7 @@ let make = (
     ->Array.map(item => {
       item.inputNames->Array.get(0)->Option.getOr("")
     })
-    ->Js.Json.stringArray
+    ->LogicUtils.getJsonFromArrayOfString
   }, [selectedFiltersList])
 
   React.useEffect1(() => {
@@ -573,7 +573,7 @@ let make = (
       addConfig(alreadySelectedFiltersUserpref, updatedSelectedList)
     }
     None
-  }, [updatedSelectedList->Js.Json.stringify])
+  }, [updatedSelectedList->JSON.stringify])
 
   let getNewQuery = DateRefreshHooks.useConstructQueryOnBasisOfOpt()
   let (isButtonDisabled, setIsButtonDisabled) = React.useState(_ => false)
@@ -587,12 +587,10 @@ let make = (
 
   let isMobileView = MatchMedia.useMobileChecker()
 
-  let (initialValueJson, setInitialValueJson) = React.useState(_ => Js.Json.object_(Dict.make()))
+  let (initialValueJson, setInitialValueJson) = React.useState(_ => JSON.Encode.object(Dict.make()))
 
   let countSelectedFilters = React.useMemo1(() => {
-    Dict.keysToArray(
-      initialValueJson->Js.Json.decodeObject->Option.getOr(Dict.make()),
-    )->Array.length
+    Dict.keysToArray(initialValueJson->JSON.Decode.object->Option.getOr(Dict.make()))->Array.length
   }, [initialValueJson])
 
   let hideFiltersInit = switch hideFiltersDefaultValue {
@@ -645,7 +643,7 @@ let make = (
     | None => ()
     }
 
-    switch initialValues->Js.Json.decodeObject {
+    switch initialValues->JSON.Decode.object {
     | Some(dict) => {
         let localCheckedFilters = Array.map(checkedFilters, filter => {
           filter
@@ -682,7 +680,8 @@ let make = (
         setCount(_prev => clearFilterJson + initalCount)
         setCheckedFilters(_prev => localCheckedFilters)
         setSelectedFiltersList(_prev => localSelectedFiltersList)
-        let finalInitialValueJson = initialValues->JsonFlattenUtils.unflattenObject->Js.Json.object_
+        let finalInitialValueJson =
+          initialValues->JsonFlattenUtils.unflattenObject->JSON.Encode.object
         setInitialValueJson(_ => finalInitialValueJson)
       }
 
@@ -692,9 +691,9 @@ let make = (
   }, [searchParams])
 
   let onSubmit = (values, _) => {
-    let obj = values->Js.Json.decodeObject->Option.getOr(Dict.make())->Dict.toArray->Dict.fromArray
+    let obj = values->JSON.Decode.object->Option.getOr(Dict.make())->Dict.toArray->Dict.fromArray
 
-    let flattendDict = obj->Js.Json.object_->JsonFlattenUtils.flattenObject(false)
+    let flattendDict = obj->JSON.Encode.object->JsonFlattenUtils.flattenObject(false)
     let localFilterDict = localFilterJson->JsonFlattenUtils.flattenObject(false)
     switch updateUrlWith {
     | Some(updateUrlWith) =>
@@ -750,7 +749,7 @@ let make = (
 
   let removeFilters = (fieldNameArr, values) => {
     let toBeRemoved = checkedFilters->Array.filter(oldVal => !Array.includes(fieldNameArr, oldVal))
-    switch values->Js.Json.decodeObject {
+    switch values->JSON.Decode.object {
     | Some(dict) =>
       dict
       ->Dict.toArray
@@ -758,7 +757,7 @@ let make = (
         let (key, _val) = entry
 
         if toBeRemoved->Array.includes(key) {
-          dict->Dict.set(key, Js.Json.string(""))
+          dict->Dict.set(key, JSON.Encode.string(""))
         }
       })
     | None => ()
@@ -775,7 +774,7 @@ let make = (
 
     let newValueJson =
       initialValueJson
-      ->Js.Json.decodeObject
+      ->JSON.Decode.object
       ->Option.map(Dict.toArray)
       ->Option.getOr([])
       ->Array.filter(entry => {
@@ -783,7 +782,7 @@ let make = (
         !Array.includes(toBeRemoved, key)
       })
       ->Dict.fromArray
-      ->Js.Json.object_
+      ->JSON.Encode.object
 
     setInitialValueJson(_ => newValueJson)
     setCheckedFilters(_prev => filtersAfterRemoving)
@@ -801,7 +800,7 @@ let make = (
         } else {
           key
         }
-        Dict.set(errors, key, "Required"->Js.Json.string)
+        Dict.set(errors, key, "Required"->JSON.Encode.string)
       }
     })
     if errors->Dict.toArray->Array.length > 0 {
@@ -809,7 +808,7 @@ let make = (
     } else {
       setIsButtonDisabled(_ => false)
     }
-    errors->Js.Json.object_
+    errors->JSON.Encode.object
   }
 
   let fieldsFromOption = popupFilterFields->Array.map(option => {option.field})
@@ -825,7 +824,7 @@ let make = (
     )
     let urlValue = `${path}?${newQueryStr}`
     setClearFilterAfterRefresh(_ => true)
-    setInitialValueJson(_ => Dict.make()->Js.Json.object_)
+    setInitialValueJson(_ => Dict.make()->JSON.Encode.object)
     Window.Location.replace(urlValue)
   }
 
diff --git a/src/components/RemoteFiltersUtils.res b/src/components/RemoteFiltersUtils.res
index d83e73425..0c3aaeb54 100644
--- a/src/components/RemoteFiltersUtils.res
+++ b/src/components/RemoteFiltersUtils.res
@@ -15,7 +15,7 @@ let getFinalDict = (
   let unflattenDict = filtersFromUrl->JsonFlattenUtils.unflattenObject
 
   let filterDict = Dict.make()
-  switch filterJson->Js.Json.decodeObject {
+  switch filterJson->JSON.Decode.object {
   | Some(dict) => {
       // Hack for admin service config entity
       let allowedDefaultKeys = if dict->Dict.get("sourceObject")->Option.isSome {
@@ -55,19 +55,19 @@ let getFinalDict = (
     | Some((_, value)) =>
       let getExpectedType = ele => {
         switch value {
-        | Boolean => ele->LogicUtils.getBoolFromString(false)->Js.Json.boolean
-        | Float => ele->LogicUtils.getFloatFromString(0.)->Js.Json.number
-        | Int => ele->LogicUtils.getIntFromString(0)->Int.toFloat->Js.Json.number
+        | Boolean => ele->LogicUtils.getBoolFromString(false)->JSON.Encode.bool
+        | Float => ele->LogicUtils.getFloatFromString(0.)->JSON.Encode.float
+        | Int => ele->LogicUtils.getIntFromString(0)->Int.toFloat->JSON.Encode.float
         }
       }
-      switch val->Js.Json.classify {
-      | JSONArray(stringValueArr) =>
+      switch val->JSON.Classify.classify {
+      | Array(stringValueArr) =>
         stringValueArr
         ->Array.map(ele => {
-          getExpectedType(ele->Js.Json.decodeString->Option.getOr(""))
+          getExpectedType(ele->JSON.Decode.string->Option.getOr(""))
         })
-        ->Js.Json.array
-      | JSONString(ele) => getExpectedType(ele)
+        ->JSON.Encode.array
+      | String(ele) => getExpectedType(ele)
       | _ => val
       }
 
@@ -92,15 +92,15 @@ let getFinalDict = (
           let value = if isformat {
             let intSearchKeys = searchkeysDict->LogicUtils.getArrayFromDict("intSearchKeys", [])
             let arrSearchKeys = searchkeysDict->LogicUtils.getArrayFromDict("arrSearchKeys", [])
-            if intSearchKeys->Array.includes(key->Js.Json.string) {
-              value->LogicUtils.getFloatFromString(0.00)->Js.Json.number
-            } else if arrSearchKeys->Array.includes(key->Js.Json.string) {
-              value->String.split(",")->Array.map(str => str->Js.Json.string)->Js.Json.array
+            if intSearchKeys->Array.includes(key->JSON.Encode.string) {
+              value->LogicUtils.getFloatFromString(0.00)->JSON.Encode.float
+            } else if arrSearchKeys->Array.includes(key->JSON.Encode.string) {
+              value->String.split(",")->Array.map(str => str->JSON.Encode.string)->JSON.Encode.array
             } else {
-              value->Js.Json.string
+              value->JSON.Encode.string
             }
           } else {
-            value->Js.Json.string
+            value->JSON.Encode.string
           }
           filterDict->Dict.set(key, value)
         }
@@ -120,15 +120,18 @@ let getFinalDict = (
             let value = if isformat {
               let intSearchKeys = searchkeysDict->LogicUtils.getArrayFromDict("intSearchKeys", [])
               let arrSearchKeys = searchkeysDict->LogicUtils.getArrayFromDict("arrSearchKeys", [])
-              if intSearchKeys->Array.includes(key->Js.Json.string) {
-                value->LogicUtils.getFloatFromString(0.00)->Js.Json.number
-              } else if arrSearchKeys->Array.includes(key->Js.Json.string) {
-                value->String.split(",")->Array.map(str => str->Js.Json.string)->Js.Json.array
+              if intSearchKeys->Array.includes(key->JSON.Encode.string) {
+                value->LogicUtils.getFloatFromString(0.00)->JSON.Encode.float
+              } else if arrSearchKeys->Array.includes(key->JSON.Encode.string) {
+                value
+                ->String.split(",")
+                ->Array.map(str => str->JSON.Encode.string)
+                ->JSON.Encode.array
               } else {
-                value->Js.Json.string
+                value->JSON.Encode.string
               }
             } else {
-              value->Js.Json.string
+              value->JSON.Encode.string
             }
             filterDict->Dict.set(key, value)
           }
@@ -137,22 +140,22 @@ let getFinalDict = (
     }
     if isEulerOrderEntity {
       let arr = if filterDict->Dict.get("customerId")->Option.isSome {
-        [["date_created", "DESC"]->Js.Json.stringArray]
+        [["date_created", "DESC"]->LogicUtils.getJsonFromArrayOfString]
       } else {
         []
       }
-      filterDict->Dict.set("order", arr->Js.Json.array)
+      filterDict->Dict.set("order", arr->JSON.Encode.array)
     }
 
-    filterDict->Js.Json.object_
+    filterDict->JSON.Encode.object
   }
 }
 
 let getStrFromJson = (key, val) => {
-  switch val->Js.Json.classify {
-  | JSONString(str) => str
-  | JSONArray(array) => array->Array.length > 0 ? `[${array->Array.joinWithUnsafe(",")}]` : ""
-  | JSONNumber(num) => key === "offset" ? "0" : num->Float.toInt->string_of_int
+  switch val->JSON.Classify.classify {
+  | String(str) => str
+  | Array(array) => array->Array.length > 0 ? `[${array->Array.joinWithUnsafe(",")}]` : ""
+  | Number(num) => key === "offset" ? "0" : num->Float.toInt->string_of_int
   | _ => ""
   }
 }
@@ -210,14 +213,14 @@ let getInitialValuesFromUrl = (
       })
     })
   }
-  Js.Json.object_(dict)
+  JSON.Encode.object(dict)
 }
 
 let getLocalFiltersData = (
-  ~resArr: Js.Array2.t<Js.Nullable.t<'t>>,
+  ~resArr: array<Js.Nullable.t<'t>>,
   ~searchParams,
   ~initialFilters: array<EntityType.initialFilters<'t>>,
-  ~dateRangeFilterDict: Dict.t<Js.Json.t>,
+  ~dateRangeFilterDict: Dict.t<JSON.t>,
   ~options: array<EntityType.optionType<'t>>,
   (),
 ) => {
@@ -236,9 +239,15 @@ let getLocalFiltersData = (
 
     let dateRange = dateRangeFilterDict->LogicUtils.getArrayFromDict("dateRange", [])
     let startKey =
-      dateRange->Array.get(0)->Option.getOr(""->Js.Json.string)->LogicUtils.getStringFromJson("")
+      dateRange
+      ->Array.get(0)
+      ->Option.getOr(""->JSON.Encode.string)
+      ->LogicUtils.getStringFromJson("")
     let endKey =
-      dateRange->Array.get(1)->Option.getOr(""->Js.Json.string)->LogicUtils.getStringFromJson("")
+      dateRange
+      ->Array.get(1)
+      ->Option.getOr(""->JSON.Encode.string)
+      ->LogicUtils.getStringFromJson("")
 
     let (keyList, valueList) = if (
       dateRangeFilterDict != Dict.make() &&
@@ -269,14 +278,14 @@ let getLocalFiltersData = (
               if String.includes(value, "[") {
                 let str = String.slice(~start=1, ~end=value->String.length - 1, value)
                 let splitArray = String.split(str, ",")
-                let jsonarr = splitArray->Array.map(val => Js.Json.string(val))
+                let jsonarr = splitArray->Array.map(val => JSON.Encode.string(val))
                 res.contents = switch localFilter {
-                | Some(localFilter) => localFilter(res.contents, Js.Json.array(jsonarr))
+                | Some(localFilter) => localFilter(res.contents, JSON.Encode.array(jsonarr))
                 | None => res.contents
                 }
               } else {
                 res.contents = switch localFilter {
-                | Some(localFilter) => localFilter(res.contents, Js.Json.string(value))
+                | Some(localFilter) => localFilter(res.contents, JSON.Encode.string(value))
                 | None => res.contents
                 }
               }
@@ -291,7 +300,7 @@ let getLocalFiltersData = (
         if fieldName === key {
           res.contents = switch localFilter {
           | Some(localFilter) =>
-            localFilter(res.contents, Js.Json.string(valueList[idx]->Option.getOr("")))
+            localFilter(res.contents, JSON.Encode.string(valueList[idx]->Option.getOr("")))
           | None => res.contents
           }
         }
@@ -348,7 +357,7 @@ let applyFilters = (
   let currentFilterUrl = generateUrlFromDict(~dict=currentFilterDict, ~options, tableName)
 
   let existingFilterUrl = generateUrlFromDict(~dict=existingFilterDict, ~options, tableName)
-  switch defaultFilters->Js.Json.decodeObject {
+  switch defaultFilters->JSON.Decode.object {
   | Some(originalDict) =>
     originalDict
     ->Dict.toArray
diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
index 302e6e77c..07fed56aa 100644
--- a/src/components/SelectBox.res
+++ b/src/components/SelectBox.res
@@ -412,7 +412,7 @@ module BaseSelect = {
     ~optionSize: CheckBoxIcon.size=Small,
     ~isSelectedStateMinus=false,
     ~onSelect: array<string> => unit,
-    ~value as values: Js.Json.t,
+    ~value as values: JSON.t,
     ~onBlur=?,
     ~showClearAll=true,
     ~isHorizontal=false,
@@ -465,7 +465,7 @@ module BaseSelect = {
     }
 
     let saneValue = React.useMemo1(() =>
-      switch values->Js.Json.decodeArray {
+      switch values->JSON.Decode.array {
       | Some(jsonArr) => jsonArr->LogicUtils.getStrArrayFromJsonArray
       | _ => []
       }
@@ -912,7 +912,7 @@ module BaseSelectButton = {
     ~optionSize: CheckBoxIcon.size=Small,
     ~isSelectedStateMinus=false,
     ~onSelect: string => unit,
-    ~value: Js.Json.t,
+    ~value: JSON.t,
     ~deselectDisable=false,
     ~onBlur=?,
     ~setShowDropDown=?,
@@ -932,7 +932,7 @@ module BaseSelectButton = {
     let searchRef = React.useRef(Js.Nullable.null)
     let onItemClick = (itemData, _ev) => {
       if !disableSelect {
-        let isSelected = value->Js.Json.decodeString->Option.mapOr(false, str => itemData === str)
+        let isSelected = value->JSON.Decode.string->Option.mapOr(false, str => itemData === str)
 
         if isSelected && !deselectDisable {
           onSelect("")
@@ -1004,7 +1004,7 @@ module BaseSelectButton = {
       <div className={`${optionsOuterClass} ${listPadding} ${inlineClass}`}>
         {options
         ->Array.mapWithIndex((option, i) => {
-          let isSelected = switch value->Js.Json.decodeString {
+          let isSelected = switch value->JSON.Decode.string {
           | Some(str) => option.value === str
           | None => false
           }
@@ -1067,7 +1067,7 @@ module BaseSelectButton = {
 module RenderListItemInBaseRadio = {
   @react.component
   let make = (
-    ~newOptions: Js.Array2.t<dropdownOptionWithoutOptional>,
+    ~newOptions: array<dropdownOptionWithoutOptional>,
     ~value,
     ~descriptionOnHover,
     ~isDropDown,
@@ -1089,7 +1089,7 @@ module RenderListItemInBaseRadio = {
   ) => {
     newOptions
     ->Array.mapWithIndex((option, i) => {
-      let isSelected = switch value->Js.Json.decodeString {
+      let isSelected = switch value->JSON.Decode.string {
       | Some(str) => option.value === str
       | None => false
       }
@@ -1188,7 +1188,7 @@ module BaseRadio = {
     ~optionSize: CheckBoxIcon.size=Small,
     ~isSelectedStateMinus=false,
     ~onSelect: string => unit,
-    ~value: Js.Json.t,
+    ~value: JSON.t,
     ~deselectDisable=false,
     ~onBlur=?,
     ~fill="#0EB025",
@@ -1242,7 +1242,7 @@ module BaseRadio = {
     )
     let onItemClick = (itemData, isDisabled, _ev) => {
       if !isDisabled {
-        let isSelected = value->Js.Json.decodeString->Option.mapOr(false, str => itemData === str)
+        let isSelected = value->JSON.Decode.string->Option.mapOr(false, str => itemData === str)
 
         if isSelected && !deselectDisable {
           setSelectedString(_ => "")
@@ -1586,7 +1586,7 @@ module BaseDropdown = {
       | None => ""
       }
       newInputSelect.onChange(
-        switch newInputSelect.value->Js.Json.decodeArray {
+        switch newInputSelect.value->JSON.Decode.array {
         | Some(jsonArr) =>
           jsonArr->LogicUtils.getStrArrayFromJsonArray->Array.filter(str => str !== actualValue)
         | _ => []
@@ -1599,7 +1599,7 @@ module BaseDropdown = {
 
     let (dropDowntext, leftIcon: Button.iconType, iconStroke) = allowMultiSelect
       ? (buttonText, defaultLeftIcon, "")
-      : switch newInputRadio.value->Js.Json.decodeString {
+      : switch newInputRadio.value->JSON.Decode.string {
         | Some(str) =>
           switch transformedOptions->Array.find(x => x.value === str) {
           | Some(x) => (x.label, x.icon, x.iconStroke)
@@ -1657,9 +1657,9 @@ module BaseDropdown = {
 
     let allSellectedOptions = React.useMemo2(() => {
       newInputSelect.value
-      ->Js.Json.decodeArray
+      ->JSON.Decode.array
       ->Option.getOr([])
-      ->Belt.Array.keepMap(Js.Json.decodeString)
+      ->Belt.Array.keepMap(JSON.Decode.string)
       ->Belt.Array.keepMap(str => {
         transformedOptions->Array.find(x => x.value == str)->Option.map(x => x.label)
       })
@@ -1671,7 +1671,7 @@ module BaseDropdown = {
     let title = showAllSelectedOptions ? allSellectedOptions : buttonText
 
     let badgeForSelect = React.useMemo1((): Button.badge => {
-      let count = newInputSelect.value->Js.Json.decodeArray->Option.getOr([])->Array.length
+      let count = newInputSelect.value->JSON.Decode.array->Option.getOr([])->Array.length
       let condition = count > 1
 
       {
@@ -1855,7 +1855,7 @@ module BaseDropdown = {
                     </AddDataAttributes>
                   if (
                     showToolTip &&
-                    newInputSelect.value !== ""->Js.Json.string &&
+                    newInputSelect.value !== ""->JSON.Encode.string &&
                     !showDropDown &&
                     showNameAsToolTip
                   ) {
@@ -1916,7 +1916,7 @@ module BaseDropdown = {
         }}
       </div>
       {if allowMultiSelect && !hideMultiSelectButtons && showSelectionAsChips {
-        switch newInputSelect.value->Js.Json.decodeArray {
+        switch newInputSelect.value->JSON.Decode.array {
         | Some(jsonArr) =>
           jsonArr
           ->LogicUtils.getStrArrayFromJsonArray
@@ -1972,7 +1972,7 @@ module InfraSelectBox = {
     let newInputSelect = input->ffInputToSelectInput
     let values = newInputSelect.value
     let saneValue = React.useMemo1(() =>
-      switch values->Js.Json.decodeArray {
+      switch values->JSON.Decode.array {
       | Some(jsonArr) => jsonArr->LogicUtils.getStrArrayFromJsonArray
       | _ => []
       }
diff --git a/src/components/SelectBox.resi b/src/components/SelectBox.resi
index 69661c26e..9edd1526e 100644
--- a/src/components/SelectBox.resi
+++ b/src/components/SelectBox.resi
@@ -84,7 +84,7 @@ module BaseSelect: {
     ~optionSize: CheckBoxIcon.size=?,
     ~isSelectedStateMinus: bool=?,
     ~onSelect: array<string> => unit,
-    ~value: Js.Json.t,
+    ~value: JSON.t,
     ~onBlur: ReactEvent.Focus.t => unit=?,
     ~showClearAll: bool=?,
     ~isHorizontal: bool=?,
@@ -140,7 +140,7 @@ module BaseSelectButton: {
     ~optionSize: CheckBoxIcon.size=?,
     ~isSelectedStateMinus: bool=?,
     ~onSelect: string => unit,
-    ~value: Js.Json.t,
+    ~value: JSON.t,
     ~deselectDisable: bool=?,
     ~onBlur: ReactEvent.Focus.t => unit=?,
     ~setShowDropDown: ('a => bool) => unit=?,
@@ -157,8 +157,8 @@ module BaseSelectButton: {
 module RenderListItemInBaseRadio: {
   @react.component
   let make: (
-    ~newOptions: Js.Array2.t<dropdownOptionWithoutOptional>,
-    ~value: Js.Json.t,
+    ~newOptions: array<dropdownOptionWithoutOptional>,
+    ~value: JSON.t,
     ~descriptionOnHover: bool,
     ~isDropDown: bool,
     ~textIconPresent: bool,
@@ -181,7 +181,7 @@ module RenderListItemInBaseRadio: {
 let getHashMappedOptionValues: array<dropdownOptionWithoutOptional> => RescriptCore.Dict.t<
   array<dropdownOptionWithoutOptional>,
 >
-let getSortedKeys: RescriptCore.Dict.t<'a> => Js.Array2.t<string>
+let getSortedKeys: RescriptCore.Dict.t<'a> => array<string>
 module BaseRadio: {
   @react.component
   let make: (
@@ -192,7 +192,7 @@ module BaseRadio: {
     ~optionSize: CheckBoxIcon.size=?,
     ~isSelectedStateMinus: bool=?,
     ~onSelect: string => unit,
-    ~value: Js.Json.t,
+    ~value: JSON.t,
     ~deselectDisable: bool=?,
     ~onBlur: ReactEvent.Focus.t => unit=?,
     ~fill: string=?,
diff --git a/src/components/SelectModal.res b/src/components/SelectModal.res
index 297a329da..883f8bce8 100644
--- a/src/components/SelectModal.res
+++ b/src/components/SelectModal.res
@@ -40,7 +40,7 @@ let make = (
 
   let disableSelectBtn = React.useMemo2(
     () =>
-      (initialValues->Js.Array.toString === values->Js.Array.toString && !enableSelect) ||
+      (initialValues->Array.toString === values->Array.toString && !enableSelect) ||
         values->Array.length === 0,
     (values, initialValues),
   )
@@ -66,7 +66,7 @@ let make = (
       maxLengthArray(target, setValues)
     },
     onFocus: _ev => (),
-    value: values->Js.Json.stringArray,
+    value: values->LogicUtils.getJsonFromArrayOfString,
     checked: false,
   }
 
@@ -95,7 +95,7 @@ let make = (
           isDropDown=false
           options
           onSelect={arr => maxLengthArray(arr, setValues)}
-          value={values->Js.Json.stringArray}
+          value={values->LogicUtils.getJsonFromArrayOfString}
           showSelectAll={showSelectAll}
           showSerialNumber
           maxHeight="max-h-full"
diff --git a/src/components/ShowDetails.res b/src/components/ShowDetails.res
index b8079eed2..b6efb64aa 100644
--- a/src/components/ShowDetails.res
+++ b/src/components/ShowDetails.res
@@ -1,5 +1,5 @@
 open LogicUtils
-type loadDataType = Loading | Loaded(Dict.t<Js.Json.t>, Dict.t<Js.Json.t>) | LoadError(string)
+type loadDataType = Loading | Loaded(Dict.t<JSON.t>, Dict.t<JSON.t>) | LoadError(string)
 
 type errorType = {
   error: bool,
@@ -10,7 +10,7 @@ type errorType = {
 module EntityData = {
   @react.component
   let make = (
-    ~dictData: Dict.t<Js.Json.t>,
+    ~dictData: Dict.t<JSON.t>,
     ~syncData=Dict.make(),
     ~detailsKeyList,
     ~entity: EntityType.entityType<'colType, 't>,
diff --git a/src/components/SingleStats/SingleStatEntity.res b/src/components/SingleStats/SingleStatEntity.res
index e6e213124..8cc729d89 100644
--- a/src/components/SingleStats/SingleStatEntity.res
+++ b/src/components/SingleStats/SingleStatEntity.res
@@ -3,7 +3,7 @@ open AnalyticsTypesUtils
 type filterConfig = {
   source: string, // source can be BATCH, KVLOGS basically which DB to fetch
   modeValue: string, // modeValue can be ORDERS, TXN so here is the mode is orders we see data aggregated by the order_id and if mode is txn the data is aggregated by txn id simmilarly more mode can be added
-  filterValues?: Js.Json.t, // which all filters will be applicable for the single stats (those keys i.e merchant_id, payment_gateway etc.)
+  filterValues?: JSON.t, // which all filters will be applicable for the single stats (those keys i.e merchant_id, payment_gateway etc.)
   startTime: string, // start time from when data will fetch   (later can be moved to the parent level)
   endTime: string, // end time till when data should be fetched (later can be moved to the parent level)
   customFilterValue: string, // custome filter key is the key by which stores the value of the applied customfilter in the url
@@ -14,7 +14,7 @@ type dataFetcherObj<'a> = {
   metrics: 'a, // metrics are the stats i.e total volume, success rate etc.
   bodyMaker: (string, filterConfig) => string, // to make the single stat body
   timeSeriedBodyMaker: (string, filterConfig) => string, // to make the single stat timeseries body
-  transaformer: (string, Js.Json.t) => Dict.t<Js.Json.t>, // just in case if we are getting data from multiple places and we wanted to change the key or something so that we can identify it differently
+  transaformer: (string, JSON.t) => Dict.t<JSON.t>, // just in case if we are getting data from multiple places and we wanted to change the key or something so that we can identify it differently
   url: string, // url from where data need to be fetched
   domain: string,
   timeColumn: string,
@@ -40,9 +40,9 @@ type singleStatEntity<'a> = {
   getStatDetails: (
     'a,
     'a => string,
-    dataState<Js.Json.t>,
-    dataState<Js.Json.t>,
-    dataState<Js.Json.t>,
+    dataState<JSON.t>,
+    dataState<JSON.t>,
+    dataState<JSON.t>,
   ) => singleStatDataWidgetData,
-  jsonTransformer?: (string, array<Js.Json.t>) => array<Js.Json.t>,
+  jsonTransformer?: (string, array<JSON.t>) => array<JSON.t>,
 }
diff --git a/src/components/SketchPicker.res b/src/components/SketchPicker.res
index 5d39bbb73..5d46dad47 100644
--- a/src/components/SketchPicker.res
+++ b/src/components/SketchPicker.res
@@ -1,3 +1,2 @@
 @module("react-color") @react.component
-external make: (~color: string, ~onChangeComplete: Js.Json.t => unit) => React.element =
-  "SketchPicker"
+external make: (~color: string, ~onChangeComplete: JSON.t => unit) => React.element = "SketchPicker"
diff --git a/src/components/Table.res b/src/components/Table.res
index 3fb5d01a1..28edcfd03 100644
--- a/src/components/Table.res
+++ b/src/components/Table.res
@@ -466,7 +466,7 @@ module TableHeadingCell = {
                             onBlur: _ev => (),
                             onChange: ev => handleUpdateFilterObj(ev, i),
                             onFocus: _ev => (),
-                            value: selected->Array.map(Js.Json.string)->Js.Json.array,
+                            value: selected->Array.map(JSON.Encode.string)->JSON.Encode.array,
                             checked: true,
                           }
                           let icon = switch filterIcon {
@@ -663,7 +663,7 @@ let make = (
 ) => {
   let isMobileView = MatchMedia.useMobileChecker()
   let rowInfo: array<array<cell>> = rows
-  let actualData: option<Js.Array2.t<Js.Nullable.t<'t>>> = actualData
+  let actualData: option<array<Js.Nullable.t<'t>>> = actualData
   let numberOfCols = heading->Array.length
   open Webapi
   let totalTableWidth =
diff --git a/src/components/Table.resi b/src/components/Table.resi
index ce1b7faa0..61cee6f0a 100644
--- a/src/components/Table.resi
+++ b/src/components/Table.resi
@@ -22,7 +22,7 @@ type filterDataType = TableUtils.filterDataType =
   | Float(float, float)
   | String
   | DateTime
-external jsonToStr: Js.Json.t => string = "%identity"
+external jsonToStr: JSON.t => string = "%identity"
 type textAlign = TableUtils.textAlign = Left | Right
 type fontBold = bool
 type labelMargin = string
@@ -38,7 +38,7 @@ let getSortOrderString: sortOrder => string
 type label = TableUtils.label = {title: string, color: labelColor, showIcon?: bool}
 type currency = string
 type filterRow = TableUtils.filterRow =
-  | DropDownFilter(string, array<Js.Json.t>)
+  | DropDownFilter(string, array<JSON.t>)
   | TextFilter(string)
   | Range(string, float, float)
 type cell = TableUtils.cell =
@@ -141,7 +141,7 @@ module TableRow: {
     ~removeVerticalLines: bool,
     ~removeHorizontalLines: bool,
     ~evenVertivalLines: bool,
-    ~highlightEnabledFieldsArray: Js.Array2.t<int>,
+    ~highlightEnabledFieldsArray: array<int>,
     ~tableDataBorderClass: string=?,
     ~collapseTableRow: bool=?,
     ~expandedRow: unit => React.element,
@@ -189,7 +189,7 @@ module TableHeadingCell: {
     ~setSortedObj: option<('b => option<sortedObject>) => unit>,
     ~filterObj: option<array<filterObject>>,
     ~fixedWidthClass: string,
-    ~setFilterObj: option<(array<filterObject> => Js.Array2.t<filterObject>) => unit>,
+    ~setFilterObj: option<(array<filterObject> => array<filterObject>) => unit>,
     ~headingCenter: bool,
     ~filterIcon: React.element=?,
     ~filterDropdownClass: string=?,
@@ -210,7 +210,7 @@ module TableHeadingCell: {
 module TableHeadingRow: {
   @react.component
   let make: (
-    ~headingArray: Js.Array2.t<header>,
+    ~headingArray: array<header>,
     ~isHighchartLegend: bool,
     ~frozenUpto: int,
     ~heightHeadingClass: string,
@@ -219,7 +219,7 @@ module TableHeadingRow: {
     ~setSortedObj: option<('a => option<sortedObject>) => unit>,
     ~filterObj: option<array<filterObject>>,
     ~fixedWidthClass: string,
-    ~setFilterObj: option<(array<filterObject> => Js.Array2.t<filterObject>) => unit>,
+    ~setFilterObj: option<(array<filterObject> => array<filterObject>) => unit>,
     ~headingCenter: bool,
     ~filterIcon: React.element=?,
     ~filterDropdownClass: string=?,
@@ -232,7 +232,7 @@ module TableHeadingRow: {
     ~fixLastCol: bool=?,
     ~headerCustomBgColor: string=?,
     ~filterDropdownMaxHeight: string=?,
-    ~columnFilterRow: option<Js.Array2.t<filterRow>>,
+    ~columnFilterRow: option<array<filterRow>>,
     ~customizeColumnNewTheme: TableUtils.customiseColumnConfig=?,
     ~tableHeadingTextClass: string=?,
   ) => React.element
@@ -240,7 +240,7 @@ module TableHeadingRow: {
 @react.component
 let make: (
   ~title: string=?,
-  ~heading: Js.Array2.t<header>=?,
+  ~heading: array<header>=?,
   ~rows: array<array<cell>>,
   ~offset: int=?,
   ~onRowClick: int => unit=?,
@@ -253,15 +253,15 @@ let make: (
   ~showScrollBar: bool=?,
   ~setSortedObj: ('a => option<sortedObject>) => unit=?,
   ~sortedObj: TableUtils.sortedObject=?,
-  ~setFilterObj: (array<filterObject> => Js.Array2.t<filterObject>) => unit=?,
+  ~setFilterObj: (array<filterObject> => array<filterObject>) => unit=?,
   ~filterObj: array<filterObject>=?,
-  ~columnFilterRow: Js.Array2.t<filterRow>=?,
+  ~columnFilterRow: array<filterRow>=?,
   ~tableheadingClass: string=?,
   ~tableBorderClass: string=?,
   ~tableDataBorderClass: string=?,
   ~collapseTableRow: bool=?,
   ~getRowDetails: Js.Nullable.t<'b> => React.element=?,
-  ~actualData: Js.Array2.t<Js.Nullable.t<'b>>=?,
+  ~actualData: array<Js.Nullable.t<'b>>=?,
   ~onExpandClickData: 'onExpandClickData=?,
   ~onMouseEnter: int => unit=?,
   ~onMouseLeave: int => unit=?,
diff --git a/src/components/TableLocalFilters.res b/src/components/TableLocalFilters.res
index a2d20a083..47219675c 100644
--- a/src/components/TableLocalFilters.res
+++ b/src/components/TableLocalFilters.res
@@ -1,4 +1,4 @@
-external formEventToJsonArr: ReactEvent.Form.t => array<Js.Json.t> = "%identity"
+external formEventToJsonArr: ReactEvent.Form.t => array<JSON.t> = "%identity"
 
 module RangeSliderLocalFilter = {
   @react.component
@@ -85,7 +85,7 @@ module RangeSliderLocalFilter = {
 
 module FilterDropDown = {
   @react.component
-  let make = (~val, ~arr: array<Js.Json.t>=[]) => {
+  let make = (~val, ~arr: array<JSON.t>=[]) => {
     let (lclFiltrState, setLclFltrState) = React.useContext(DatatableContext.datatableContext)
     let filterIconName = "bars-filter"
     let strokeColor = ""
@@ -103,13 +103,13 @@ module FilterDropDown = {
       onBlur: _ev => (),
       onChange: ev => setLclFltrState(val, ev->formEventToJsonArr),
       onFocus: _ev => (),
-      value: selectedValue->Js.Json.array,
+      value: selectedValue->JSON.Encode.array,
       checked: true,
     }
 
     let (buttonText, icon) = switch selectedValue->Array.length > 0 {
     | true => (
-        selectedValue->Js.Json.array->Js.Json.stringify,
+        selectedValue->JSON.Encode.array->JSON.stringify,
         Button.CustomIcon(
           <div onClick={e => e->ReactEvent.Mouse.stopPropagation}>
             <span
@@ -175,7 +175,10 @@ module TextFilterCell = {
     let showPopUp = PopUpState.useShowPopUp()
 
     let selectedValue =
-      Dict.get(lclFiltrState, val)->Option.getOr([])->Array.get(0)->Option.getOr(""->Js.Json.string)
+      Dict.get(lclFiltrState, val)
+      ->Option.getOr([])
+      ->Array.get(0)
+      ->Option.getOr(""->JSON.Encode.string)
     let localInput = React.useMemo1((): ReactFinalForm.fieldRenderPropsInput => {
       {
         name: "--",
@@ -192,7 +195,7 @@ module TextFilterCell = {
           }
           let value = value->String.replace("<script>", "")->String.replace("</script>", "")
 
-          setLclFltrState(val, [value->Js.Json.string])
+          setLclFltrState(val, [value->JSON.Encode.string])
         },
         onFocus: _ev => (),
         value: selectedValue,
@@ -200,13 +203,13 @@ module TextFilterCell = {
       }
     }, [selectedValue])
     let rightIcon =
-      selectedValue === ""->Js.Json.string
+      selectedValue === ""->JSON.Encode.string
         ? <span className={`flex items-center `}>
             <Icon className={`align-middle ${strokeColor}`} size=12 name=filterIconName />
           </span>
         : <span
             className={`flex items-center `}
-            onClick={_ => setLclFltrState(val, [""->Js.Json.string])}>
+            onClick={_ => setLclFltrState(val, [""->JSON.Encode.string])}>
             <Icon className="align-middle" name="cross" />
           </span>
 
@@ -230,7 +233,10 @@ module RangeFilterCell = {
     let minVal = Js.Math.floor_float(minVal)
     let maxVal = Js.Math.ceil_float(maxVal)
     let selectedValueStr =
-      Dict.get(lclFiltrState, val)->Option.getOr([minVal->Js.Json.number, maxVal->Js.Json.number])
+      Dict.get(lclFiltrState, val)->Option.getOr([
+        minVal->JSON.Encode.float,
+        maxVal->JSON.Encode.float,
+      ])
 
     let minSlide = React.useMemo1((): ReactFinalForm.fieldRenderPropsInput => {
       {
@@ -239,15 +245,15 @@ module RangeFilterCell = {
         onChange: ev => {
           let value = {ev->ReactEvent.Form.target}["value"]
 
-          let leftVal = value->Js.Float.fromString->Js.Json.number
-          let rightvalue = selectedValueStr[1]->Option.getOr(Js.Json.null)
+          let leftVal = value->Js.Float.fromString->JSON.Encode.float
+          let rightvalue = selectedValueStr[1]->Option.getOr(JSON.Encode.null)
           switch selectedValueStr[1] {
           | Some(ele) => setLclFltrState(val, [leftVal > rightvalue ? rightvalue : leftVal, ele])
           | None => ()
           }
         },
         onFocus: _ev => (),
-        value: selectedValueStr[0]->Option.getOr(Js.Json.number(0.0)),
+        value: selectedValueStr[0]->Option.getOr(JSON.Encode.float(0.0)),
         checked: false,
       }
     }, [selectedValueStr])
@@ -259,14 +265,14 @@ module RangeFilterCell = {
         onChange: ev => {
           let value = {ev->ReactEvent.Form.target}["value"]
 
-          let rightvalue = value->Js.Float.fromString->Js.Json.number
+          let rightvalue = value->Js.Float.fromString->JSON.Encode.float
           switch selectedValueStr[0] {
           | Some(ele) => setLclFltrState(val, [ele, ele > rightvalue ? ele : rightvalue])
           | None => ()
           }
         },
         onFocus: _ev => (),
-        value: selectedValueStr[1]->Option.getOr(Js.Json.number(0.0)),
+        value: selectedValueStr[1]->Option.getOr(JSON.Encode.float(0.0)),
         checked: false,
       }
     }, [selectedValueStr])
diff --git a/src/components/TableUtils.res b/src/components/TableUtils.res
index 3db994cd8..fbfaa34fb 100644
--- a/src/components/TableUtils.res
+++ b/src/components/TableUtils.res
@@ -65,7 +65,7 @@ type customiseColumnConfig = {
 type selectAllSubmitActions = {
   btnText: string,
   showMultiSelectCheckBox: bool,
-  onClick: Js.Array2.t<Js.Json.t> => unit,
+  onClick: array<JSON.t> => unit,
   disableParam: disableField,
 }
 
@@ -74,7 +74,7 @@ type hideItem = {
   value: string,
 }
 
-external jsonToStr: Js.Json.t => string = "%identity"
+external jsonToStr: JSON.t => string = "%identity"
 
 type textAlign = Left | Right
 
@@ -109,7 +109,7 @@ type label = {
 
 type currency = string
 type filterRow =
-  | DropDownFilter(string, array<Js.Json.t>)
+  | DropDownFilter(string, array<JSON.t>)
   | TextFilter(string)
   | Range(string, float, float)
 
@@ -834,7 +834,7 @@ module HeaderActions = {
       onBlur: _ev => (),
       onChange,
       onFocus: _ev => (),
-      value: order->getSortOrderToString->Js.Json.string,
+      value: order->getSortOrderToString->JSON.Encode.string,
       checked: true,
     }
     let customButton = switch filterRow {
diff --git a/src/components/TableUtils.resi b/src/components/TableUtils.resi
index 4a2e77ec4..12549a7a2 100644
--- a/src/components/TableUtils.resi
+++ b/src/components/TableUtils.resi
@@ -22,11 +22,11 @@ type disableField = {key: string, values: array<string>}
 type selectAllSubmitActions = {
   btnText: string,
   showMultiSelectCheckBox: bool,
-  onClick: Js.Array2.t<Js.Json.t> => unit,
+  onClick: array<JSON.t> => unit,
   disableParam: disableField,
 }
 type hideItem = {key: string, value: string}
-external jsonToStr: Js.Json.t => string = "%identity"
+external jsonToStr: JSON.t => string = "%identity"
 type textAlign = Left | Right
 type fontBold = bool
 type labelMargin = string
@@ -38,7 +38,7 @@ let getSortOrderString: sortOrder => string
 type label = {title: string, color: labelColor, showIcon?: bool}
 type currency = string
 type filterRow =
-  | DropDownFilter(string, array<Js.Json.t>)
+  | DropDownFilter(string, array<JSON.t>)
   | TextFilter(string)
   | Range(string, float, float)
 type cell =
diff --git a/src/components/TabularInput.res b/src/components/TabularInput.res
index c0db28b6e..06a79914e 100644
--- a/src/components/TabularInput.res
+++ b/src/components/TabularInput.res
@@ -25,7 +25,7 @@ module TableCell = {
             onChange(elemIndex, i, event["value"])
           },
           onFocus: _ev => (),
-          value: (keyValue[elemIndex]->Option.getOr([]))[i]->Option.getOr("")->Js.Json.string,
+          value: (keyValue[elemIndex]->Option.getOr([]))[i]->Option.getOr("")->JSON.Encode.string,
           checked: true,
         }
         <FieldInputRenderer item=itm input key={Int.toString(i)} />
@@ -83,10 +83,10 @@ module TableStructure = {
 let make = (~input: ReactFinalForm.fieldRenderPropsInput, ~headings, ~fields) => {
   let tableInput = input->ffInputToTableInput
   let currentValue = React.useMemo1(() => {
-    switch tableInput.value->Js.Json.decodeArray {
+    switch tableInput.value->JSON.Decode.array {
     | Some(str) =>
       str->Array.map(item => {
-        switch item->Js.Json.decodeArray {
+        switch item->JSON.Decode.array {
         | Some(a) =>
           a->Array.map(
             itm => {
diff --git a/src/components/TimeInput.res b/src/components/TimeInput.res
index 2770fb5da..dca60a0a1 100644
--- a/src/components/TimeInput.res
+++ b/src/components/TimeInput.res
@@ -35,7 +35,7 @@ let make = (
 ) => {
   let _ = position
   let _ = icon
-  let value = switch input.value->Js.Json.decodeString {
+  let value = switch input.value->JSON.Decode.string {
   | Some(str) => str
   | None => ""
   }
diff --git a/src/components/custom-icons/LottieFiles.res b/src/components/custom-icons/LottieFiles.res
index 81fe06ab2..3b9ef7fcd 100644
--- a/src/components/custom-icons/LottieFiles.res
+++ b/src/components/custom-icons/LottieFiles.res
@@ -1,5 +1,5 @@
 open Promise
-type lottieFileJson = Loading(Js.Promise.t<Js.Json.t>) | Loaded(Js.Json.t)
+type lottieFileJson = Loading(Js.Promise.t<JSON.t>) | Loaded(JSON.t)
 
 let selectedTick = "selectedTick.json"
 let deselectTick = "deselectTick.json"
@@ -11,7 +11,7 @@ let exitSearchCross = "exitCross.json"
 let lottieDict: Dict.t<lottieFileJson> = Dict.make()
 
 let useLottieJson = lottieFileName => {
-  let (lottieJson, setlottieJson) = React.useState(_ => Js.Json.null)
+  let (lottieJson, setlottieJson) = React.useState(_ => JSON.Encode.null)
   let fetchApi = AuthHooks.useApiFetcher()
   let uriPrefix = LogicUtils.useUrlPrefix()
   let showToast = ToastState.useShowToast()
@@ -35,7 +35,7 @@ let useLottieJson = lottieFileName => {
           })
           ->catch(_err => {
             showToast(~message="Error!", ~toastType=ToastError, ())
-            Js.Json.null->resolve
+            JSON.Encode.null->resolve
           })
 
         lottieDict->Dict.set(lottieFileName, Loading(fetchLottie))
diff --git a/src/components/custom-icons/LottieIcons.res b/src/components/custom-icons/LottieIcons.res
index 143285c6b..a94f27ca7 100644
--- a/src/components/custom-icons/LottieIcons.res
+++ b/src/components/custom-icons/LottieIcons.res
@@ -13,7 +13,7 @@ let useLottieIcon = (isSelected, selectedLottieJson, deselectLottieJson) => {
       let newVal = isSelected ? selectedLottieJson : deselectLottieJson
 
       setDefaultState(_ => newVal)
-    } else if selectedLottieJson != Js.Json.null && deselectLottieJson != Js.Json.null {
+    } else if selectedLottieJson != JSON.Encode.null && deselectLottieJson != JSON.Encode.null {
       setDefaultState(_ => isSelected ? deselectLottieJson : selectedLottieJson)
       hasRendered.current = true
     }
diff --git a/src/components/form/BoolInput.res b/src/components/form/BoolInput.res
index 8ada7a9aa..a6717a688 100644
--- a/src/components/form/BoolInput.res
+++ b/src/components/form/BoolInput.res
@@ -115,11 +115,11 @@ let make = (
   ~addAttributeId="",
 ) => {
   let boolInput = baseInput->ffInputToBoolInput
-  let boolValue: Js.Json.t = boolInput.value
+  let boolValue: JSON.t = boolInput.value
 
-  let isSelected = switch boolValue->Js.Json.classify {
-  | JSONTrue => true
-  | JSONString(str) => str === "true"
+  let isSelected = switch boolValue->JSON.Classify.classify {
+  | Bool(_) => true
+  | String(str) => str === "true"
   | _ => false
   }
   let setIsSelected = boolInput.onChange
diff --git a/src/components/form/FormRenderer.res b/src/components/form/FormRenderer.res
index b7e1fb3d2..11cb0cf5f 100644
--- a/src/components/form/FormRenderer.res
+++ b/src/components/form/FormRenderer.res
@@ -2,13 +2,13 @@ open InputFields
 type inputFieldType = {
   name: string,
   placeholder: string,
-  format: option<(. ~value: Js.Json.t, ~name: string) => Js.Json.t>,
-  parse: option<(. ~value: Js.Json.t, ~name: string) => Js.Json.t>,
+  format: option<(. ~value: JSON.t, ~name: string) => JSON.t>,
+  parse: option<(. ~value: JSON.t, ~name: string) => JSON.t>,
   disabled: bool,
   isRequired: bool,
   @as("type") type_: string,
   customInput: customInputFn,
-  validate: option<(option<string>, Js.Json.t) => Js.Promise.t<Js.Nullable.t<string>>>,
+  validate: option<(option<string>, JSON.t) => Js.Promise.t<Js.Nullable.t<string>>>,
 }
 type fieldInfoType = {
   label: string,
@@ -36,7 +36,7 @@ let makeInputFieldInfo = (
   ~parse=?,
   ~type_="text",
   ~isRequired=false,
-  ~validate: option<(option<string>, Js.Json.t) => Js.Promise.t<Js.Nullable.t<string>>>=?,
+  ~validate: option<(option<string>, JSON.t) => Js.Promise.t<Js.Nullable.t<string>>>=?,
   (),
 ) => {
   let label = label->Option.getOr(name)
@@ -140,7 +140,7 @@ let makeFieldInfo = (
   ~type_="text",
   ~isRequired=false,
   ~fieldPortalKey: option<string>=?,
-  ~validate: option<(option<string>, Js.Json.t) => Js.Promise.t<Js.Nullable.t<string>>>=?,
+  ~validate: option<(option<string>, JSON.t) => Js.Promise.t<Js.Nullable.t<string>>>=?,
   (),
 ) => {
   let label = label->Option.getOr(name)
@@ -521,9 +521,9 @@ module FormError = {
     let subscriptionJson = {
       let subscriptionDict = Dict.make()
 
-      Dict.set(subscriptionDict, "submitErrors", Js.Json.boolean(true))
+      Dict.set(subscriptionDict, "submitErrors", JSON.Encode.bool(true))
 
-      Js.Json.object_(subscriptionDict)
+      JSON.Encode.object(subscriptionDict)
     }
 
     React.useEffect0(() => {
@@ -537,7 +537,7 @@ module FormError = {
     })
     switch submitErrors {
     | Some(errorsJson) =>
-      switch errorsJson->Js.Json.decodeObject {
+      switch errorsJson->JSON.Decode.object {
       | Some(dict) =>
         let errStr = switch Dict.get(dict, "FORM_ERROR") {
         | Some(err) => LogicUtils.getStringFromJson(err, "")
@@ -594,11 +594,11 @@ module SubmitButton = {
       "submitErrors",
       "submitting",
     ]->Array.forEach(item => {
-      Dict.set(dict, item, Js.Json.boolean(true))
+      Dict.set(dict, item, JSON.Encode.bool(true))
     })
 
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      dict->Js.Json.object_->Js.Nullable.return,
+      dict->JSON.Encode.object->Js.Nullable.return,
     )
     let {hasValidationErrors, hasSubmitErrors, submitting, dirtySinceLastSubmit, errors} = formState
 
@@ -797,7 +797,7 @@ let make = (
   ~onSubmit: (
     ReactFinalForm.formValues,
     ReactFinalForm.formApi,
-  ) => Promise.t<Js.Nullable.t<Js.Json.t>>,
+  ) => Promise.t<Js.Nullable.t<JSON.t>>,
   ~fieldsWrapperClass="",
   ~fieldWrapperClass="",
   ~formClass="",
diff --git a/src/components/form/FormValuesSpy.res b/src/components/form/FormValuesSpy.res
index 85de63832..b99a1b994 100644
--- a/src/components/form/FormValuesSpy.res
+++ b/src/components/form/FormValuesSpy.res
@@ -3,7 +3,7 @@ module JsonBox = {
   let make = (~json) => {
     <div
       className="flex-1 border border-purple-500 m-2  overflow-scroll whitespace-pre font-fira-code">
-      {json->Js.Json.stringifyWithSpace(2)->React.string}
+      {json->JSON.stringifyWithIndent(2)->React.string}
     </div>
   }
 }
diff --git a/src/components/form/MultipleTextInput.res b/src/components/form/MultipleTextInput.res
index b961f396b..4338dd532 100644
--- a/src/components/form/MultipleTextInput.res
+++ b/src/components/form/MultipleTextInput.res
@@ -42,7 +42,7 @@ let make = (
 ) => {
   let showPopUp = PopUpState.useShowPopUp()
   let currentTags = React.useMemo1(() => {
-    input.value->Js.Json.decodeArray->Option.getOr([])->Belt.Array.keepMap(Js.Json.decodeString)
+    input.value->JSON.Decode.array->Option.getOr([])->Belt.Array.keepMap(JSON.Decode.string)
   }, [input.value])
 
   let setTags = tags => {
@@ -128,7 +128,7 @@ let make = (
         setText(_ => val)
       },
       onFocus: _ev => (),
-      value: Js.Json.string(text),
+      value: JSON.Encode.string(text),
       checked: false,
     }
   }
diff --git a/src/components/form/NumericTextInput.res b/src/components/form/NumericTextInput.res
index 818190ab8..5c8f20955 100644
--- a/src/components/form/NumericTextInput.res
+++ b/src/components/form/NumericTextInput.res
@@ -1,4 +1,4 @@
-let getFloat = strJson => strJson->Js.Json.decodeString->Option.flatMap(Float.fromString)
+let getFloat = strJson => strJson->JSON.Decode.string->Option.flatMap(Float.fromString)
 
 @react.component
 let make = (
@@ -53,7 +53,7 @@ let make = (
       onChange: ev => {
         let value = ReactEvent.Form.target(ev)["value"]
 
-        let strValue = value->Js.Json.decodeString->Option.getOr("")
+        let strValue = value->JSON.Decode.string->Option.getOr("")
 
         let cleanedValue = switch strValue->Js.String2.match_(%re("/[\d\.]/g")) {
         | Some(strArr) =>
@@ -81,13 +81,13 @@ let make = (
         }
 
         let finalVal = precisionCheckedVal !== "" ? precisionCheckedVal : cleanedValue
-        setLocalStrValue(_ => finalVal->Js.Json.string)
+        setLocalStrValue(_ => finalVal->JSON.Encode.string)
 
-        switch finalVal->Js.Json.string->getFloat {
+        switch finalVal->JSON.Encode.string->getFloat {
         | Some(num) => input.onChange(num->Identity.anyTypeToReactEvent)
         | None =>
           if value === "" {
-            input.onChange(Js.Json.null->Identity.anyTypeToReactEvent)
+            input.onChange(JSON.Encode.null->Identity.anyTypeToReactEvent)
           }
         }
       },
@@ -98,10 +98,10 @@ let make = (
     setLocalStrValue(prevLocalStr => {
       let numericPrevLocalValue =
         prevLocalStr
-        ->Js.Json.decodeString
+        ->JSON.Decode.string
         ->Option.flatMap(Float.fromString)
-        ->Option.map(Js.Json.number)
-        ->Option.getOr(Js.Json.null)
+        ->Option.map(JSON.Encode.float)
+        ->Option.getOr(JSON.Encode.null)
       if input.value === numericPrevLocalValue {
         prevLocalStr
       } else {
diff --git a/src/components/form/TextInput.res b/src/components/form/TextInput.res
index 9ce7b40c9..21c4f4028 100644
--- a/src/components/form/TextInput.res
+++ b/src/components/form/TextInput.res
@@ -83,7 +83,7 @@ let make = (
   }, (inputRef.current, input.name))
 
   React.useEffect1(() => {
-    let val = input.value->Js.Json.decodeString->Option.getOr("")
+    let val = input.value->JSON.Decode.string->Option.getOr("")
 
     if val->String.includes("<script>") || val->String.includes("</script>") {
       showPopUp({
@@ -169,9 +169,9 @@ let make = (
       focus:border-opacity-100 ${hoverCss} ${roundingClass} ${cursorClass} ${dashboardClass} ${inputStyle} ${borderClass} ${customStyle} ${placeholderClass} ${isDisabled
       ? onDisabledStyle
       : onActiveStyle}`
-  let value = switch input.value->Js.Json.classify {
-  | JSONString(str) => str
-  | JSONNumber(num) => num->Float.toString
+  let value = switch input.value->JSON.Classify.classify {
+  | String(str) => str
+  | Number(num) => num->Float.toString
   | _ => ""
   }
 
diff --git a/src/components/form/YesNoRadioInput.res b/src/components/form/YesNoRadioInput.res
index e4d1175c0..4f8c32d70 100644
--- a/src/components/form/YesNoRadioInput.res
+++ b/src/components/form/YesNoRadioInput.res
@@ -7,7 +7,7 @@ let make = (~input: ReactFinalForm.fieldRenderPropsInput) => {
         label="Yes"
         value="yes"
         type_="radio"
-        checked={input.value == "yes"->Js.Json.string}
+        checked={input.value == "yes"->JSON.Encode.string}
         onChange=input.onChange
       />
       <label className="text-sm text-jp-gray-800"> {"Yes"->React.string} </label>
@@ -18,7 +18,7 @@ let make = (~input: ReactFinalForm.fieldRenderPropsInput) => {
         label="No"
         value="no"
         type_="radio"
-        checked={input.value == "no"->Js.Json.string}
+        checked={input.value == "no"->JSON.Encode.string}
         onChange=input.onChange
       />
       <label className="text-sm text-jp-gray-800"> {"No"->React.string} </label>
diff --git a/src/components/priority-logics/AddPLGateway.res b/src/components/priority-logics/AddPLGateway.res
index 296eef585..f56b8d114 100644
--- a/src/components/priority-logics/AddPLGateway.res
+++ b/src/components/priority-logics/AddPLGateway.res
@@ -58,11 +58,11 @@ let make = (
 
   let selectedOptions =
     gateWaysInput.value
-    ->Js.Json.decodeArray
+    ->JSON.Decode.array
     ->Option.getOr([])
     ->Belt.Array.keepMap(item =>
       item
-      ->Js.Json.decodeObject
+      ->JSON.Decode.object
       ->Option.flatMap(dict => {
         let connectorDict = dict->LogicUtils.getDictfromDict("connector")
         let obj: gateway = {
@@ -105,8 +105,10 @@ let make = (
     },
     onFocus: _ev => (),
     value: selectedOptions
-    ->Array.map(selectedOption => selectedOption.connector.merchant_connector_id->Js.Json.string)
-    ->Js.Json.array,
+    ->Array.map(selectedOption =>
+      selectedOption.connector.merchant_connector_id->JSON.Encode.string
+    )
+    ->JSON.Encode.array,
     checked: true,
   }
 
diff --git a/src/context/ChartContext.res b/src/context/ChartContext.res
index 41dcd53ea..1c988133c 100644
--- a/src/context/ChartContext.res
+++ b/src/context/ChartContext.res
@@ -3,10 +3,10 @@ open Promise
 open LogicUtils
 
 type chartComponent = {
-  topChartData: option<dataState<Js.Json.t>>,
-  bottomChartData: option<dataState<Js.Json.t>>,
-  topChartLegendData: option<dataState<Js.Json.t>>,
-  bottomChartLegendData: option<dataState<Js.Json.t>>,
+  topChartData: option<dataState<JSON.t>>,
+  bottomChartData: option<dataState<JSON.t>>,
+  topChartLegendData: option<dataState<JSON.t>>,
+  bottomChartLegendData: option<dataState<JSON.t>>,
   setTopChartVisible: (bool => bool) => unit,
   setBottomChartVisible: (bool => bool) => unit,
   setGranularity: (option<string> => option<string>) => unit,
@@ -139,10 +139,10 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
       ->Belt.Array.keepMap(entry => {
         let (key, value) = entry
         if allFilterKeys->Array.includes(key) {
-          switch value->Js.Json.classify {
-          | JSONString(str) => `${key}=${str}`->Some
-          | JSONNumber(num) => `${key}=${num->String.make}`->Some
-          | JSONArray(arr) => `${key}=[${arr->String.make}]`->Some
+          switch value->JSON.Classify.classify {
+          | String(str) => `${key}=${str}`->Some
+          | Number(num) => `${key}=${num->String.make}`->Some
+          | Array(arr) => `${key}=[${arr->String.make}]`->Some
           | _ => None
           }
         } else {
@@ -191,7 +191,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
         chartEntity.allFilterDimension->Array.includes(key) ? Some((key, value)) : None
       })
       ->Dict.fromArray
-      ->Js.Json.object_
+      ->JSON.Encode.object
       ->Some
     (startTimeFromUrl, endTimeFromUrl, filterValueFromUrl)
   }, [topFiltersToSearchParam])
@@ -305,8 +305,8 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
           setTopChartData(_ => Loading)
           let cardinality = cardinalityMapperToNumber(Some(cardinalityFromUrl))
           let timeObj = Dict.fromArray([
-            ("start", startTimeFromUrl->Js.Json.string),
-            ("end", endTimeFromUrl->Js.Json.string),
+            ("start", startTimeFromUrl->JSON.Encode.string),
+            ("end", endTimeFromUrl->JSON.Encode.string),
           ])
           let (metric, secondaryMetrics) = switch value.metrics->Array.get(0) {
           | Some(metrics) => (metrics.metric_name_db, metrics.secondryMetrics)
@@ -338,7 +338,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
                 ~timeCol,
                 ~domain=value.domain->Option.getOr(""),
                 (),
-              )->Js.Json.stringify,
+              )->JSON.stringify,
               ~authToken=parentToken,
               ~headers=[("QueryType", "Chart Time Series")]->Dict.fromArray,
               (),
@@ -358,15 +358,15 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
                       },
                     )
                     ->Dict.fromArray
-                    ->Js.Json.object_
+                    ->JSON.Encode.object
                   },
                 )
-                resolve(jsonTransFormer(metric, jsonObj)->Js.Json.array)
+                resolve(jsonTransFormer(metric, jsonObj)->JSON.Encode.array)
               },
             )
             ->catch(
               _err => {
-                resolve(Js.Json.null)
+                resolve(JSON.Encode.null)
               },
             )
           })
@@ -378,7 +378,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
                   dataMerge(
                     ~dataArr=metricsArr->Array.map(item => item->getArrayFromJson([])),
                     ~dictKey=Array.concat(activeTab->Option.getOr([]), ["time"]),
-                  )->Js.Json.array,
+                  )->JSON.Encode.array,
                 ),
               ),
             )
@@ -398,14 +398,14 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
               ~sortingParams?,
               ~domain=value.domain->Option.getOr(""),
               (),
-            )->Js.Json.stringify,
+            )->JSON.stringify,
             ~authToken=parentToken,
             ~headers=[("QueryType", "Chart Legend")]->Dict.fromArray,
             (),
           )
           ->addLogsAroundFetch(~logTitle=`Chart legend Data`)
           ->then(text => {
-            let jsonObj = convertNewLineSaperatedDataToArrayOfJson(text)->Js.Json.array
+            let jsonObj = convertNewLineSaperatedDataToArrayOfJson(text)->JSON.Encode.array
             resolve(setTopChartDataLegendData(_ => Loaded(jsonObj)))
           })
           ->catch(_err => {
@@ -436,8 +436,8 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
 
           let cardinality = cardinalityMapperToNumber(Some(cardinalityFromUrl))
           let timeObj = Dict.fromArray([
-            ("start", startTimeFromUrl->Js.Json.string),
-            ("end", endTimeFromUrl->Js.Json.string),
+            ("start", startTimeFromUrl->JSON.Encode.string),
+            ("end", endTimeFromUrl->JSON.Encode.string),
           ])
           let (metric, secondaryMetrics) = switch value.metrics->Array.get(0) {
           | Some(metrics) => (metrics.metric_name_db, metrics.secondryMetrics)
@@ -467,7 +467,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
                 ~timeCol=value.timeCol,
                 ~domain=value.domain->Option.getOr(""),
                 (),
-              )->Js.Json.stringify,
+              )->JSON.stringify,
               ~authToken=parentToken,
               ~headers=[("QueryType", "Chart Time Series")]->Dict.fromArray,
               (),
@@ -487,15 +487,15 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
                       },
                     )
                     ->Dict.fromArray
-                    ->Js.Json.object_
+                    ->JSON.Encode.object
                   },
                 )
-                resolve(jsonTransFormer(metric, jsonObj)->Js.Json.array)
+                resolve(jsonTransFormer(metric, jsonObj)->JSON.Encode.array)
               },
             )
             ->catch(
               _err => {
-                resolve(Js.Json.null)
+                resolve(JSON.Encode.null)
               },
             )
           })
@@ -505,7 +505,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
               dataMerge(
                 ~dataArr=metricsArr->Array.map(item => item->getArrayFromJson([])),
                 ~dictKey=Array.concat(activeTab->Option.getOr([]), ["time"]),
-              )->Js.Json.array
+              )->JSON.Encode.array
 
             resolve(setBottomChartData(_ => Loaded(data)))
           })
@@ -524,14 +524,14 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
               ~sortingParams?,
               ~domain=value.domain->Option.getOr(""),
               (),
-            )->Js.Json.stringify,
+            )->JSON.stringify,
             ~authToken=parentToken,
             ~headers=[("QueryType", "Chart Legend")]->Dict.fromArray,
             (),
           )
           ->addLogsAroundFetch(~logTitle=`Chart legend Data`)
           ->then(text => {
-            let jsonObj = convertNewLineSaperatedDataToArrayOfJson(text)->Js.Json.array
+            let jsonObj = convertNewLineSaperatedDataToArrayOfJson(text)->JSON.Encode.array
             resolve(setBottomChartDataLegendData(_ => Loaded(jsonObj)))
           })
           ->catch(_err => {
@@ -644,10 +644,10 @@ module SDKAnalyticsChartContext = {
         ->Belt.Array.keepMap(entry => {
           let (key, value) = entry
           if allFilterKeys->Array.includes(key) {
-            switch value->Js.Json.classify {
-            | JSONString(str) => `${key}=${str}`->Some
-            | JSONNumber(num) => `${key}=${num->String.make}`->Some
-            | JSONArray(arr) => `${key}=[${arr->String.make}]`->Some
+            switch value->JSON.Classify.classify {
+            | String(str) => `${key}=${str}`->Some
+            | Number(num) => `${key}=${num->String.make}`->Some
+            | Array(arr) => `${key}=[${arr->String.make}]`->Some
             | _ => None
             }
           } else {
@@ -696,7 +696,7 @@ module SDKAnalyticsChartContext = {
           chartEntity.allFilterDimension->Array.includes(key) ? Some((key, value)) : None
         })
         ->Dict.fromArray
-        ->Js.Json.object_
+        ->JSON.Encode.object
         ->Some
       (startTimeFromUrl, endTimeFromUrl, filterValueFromUrl)
     }, [topFiltersToSearchParam])
@@ -791,8 +791,8 @@ module SDKAnalyticsChartContext = {
             switch differentTimeValues->Array.get(0) {
             | Some(timeObjOrig) => {
                 let timeObj = Dict.fromArray([
-                  ("start", timeObjOrig.fromTime->Js.Json.string),
-                  ("end", timeObjOrig.toTime->Js.Json.string),
+                  ("start", timeObjOrig.fromTime->JSON.Encode.string),
+                  ("end", timeObjOrig.toTime->JSON.Encode.string),
                 ])
 
                 fetchApi(
@@ -808,7 +808,7 @@ module SDKAnalyticsChartContext = {
                     ~timeCol,
                     ~domain=value.domain->Option.getOr(""),
                     (),
-                  )->Js.Json.stringify,
+                  )->JSON.stringify,
                   ~authToken=parentToken,
                   ~headers=[("QueryType", "Chart Time Series")]->Dict.fromArray,
                   (),
@@ -824,7 +824,7 @@ module SDKAnalyticsChartContext = {
                         dictOrigItem => {
                           let (key, value) = dictOrigItem
                           segmentValue->Option.getOr([])->Array.includes(key)
-                            ? Some(value->Js.Json.decodeString->Option.getOr(""))
+                            ? Some(value->JSON.Decode.string->Option.getOr(""))
                             : None
                         },
                       )
@@ -849,7 +849,7 @@ module SDKAnalyticsChartContext = {
                           ~jsonFormattedFilter=item->filterMapper,
                           ~domain=value.domain->Option.getOr(""),
                           (),
-                        )->Js.Json.stringify,
+                        )->JSON.stringify,
                         ~authToken=parentToken,
                         ~headers=[("QueryType", "Chart Time Series")]->Dict.fromArray,
                         (),
@@ -872,7 +872,7 @@ module SDKAnalyticsChartContext = {
                                       origDictArrItem => {
                                         let (key, value) = origDictArrItem
                                         segmentValue->Option.getOr([])->Array.includes(key)
-                                          ? Some(value->Js.Json.decodeString->Option.getOr(""))
+                                          ? Some(value->JSON.Decode.string->Option.getOr(""))
                                           : None
                                       },
                                     )
@@ -890,15 +890,15 @@ module SDKAnalyticsChartContext = {
                                           },
                                         )
                                         ->Dict.fromArray
-                                        ->Js.Json.object_,
+                                        ->JSON.Encode.object,
                                       )
                                     : None
                                 },
                               ),
-                            )->Js.Json.array,
+                            )->JSON.Encode.array,
                           )),
                       )
-                      ->catch(_err => resolve((item, "", []->Js.Json.array)))
+                      ->catch(_err => resolve((item, "", []->JSON.Encode.array)))
                     },
                   )
                   ->Promise.all
@@ -962,8 +962,8 @@ module SDKAnalyticsChartContext = {
     //         differentTimeValues
     //         ->Array.map(timeObjOrig => {
     //           let timeObj = Dict.fromArray([
-    //             ("start", timeObjOrig.fromTime->Js.Json.string),
-    //             ("end", timeObjOrig.toTime->Js.Json.string),
+    //             ("start", timeObjOrig.fromTime->JSON.Encode.string),
+    //             ("end", timeObjOrig.toTime->JSON.Encode.string),
     //           ])
     //           selectedTrends->Array.map(
     //             item => {
@@ -980,7 +980,7 @@ module SDKAnalyticsChartContext = {
     //                   ~jsonFormattedFilter=item->filterMapper,
     //                   ~domain=value.domain->Option.getOr(""),
     //                   (),
-    //                 )->Js.Json.stringify,
+    //                 )->JSON.stringify,
     //                 ~authToken=parentToken,
     //                 ~headers=[("QueryType", "Chart Time Series")]->Dict.fromArray,
     //                 (),
@@ -991,10 +991,10 @@ module SDKAnalyticsChartContext = {
     //                   resolve((
     //                     item,
     //                     `${timeObjOrig.fromTime} to ${timeObjOrig.toTime}`,
-    //                     convertNewLineSaperatedDataToArrayOfJson(text)->Js.Json.array,
+    //                     convertNewLineSaperatedDataToArrayOfJson(text)->JSON.Encode.array,
     //                   )),
     //               )
-    //               ->catch(_err => resolve((item, "", []->Js.Json.array)))
+    //               ->catch(_err => resolve((item, "", []->JSON.Encode.array)))
     //             },
     //           )
     //         })
diff --git a/src/context/DatatableContext.res b/src/context/DatatableContext.res
index d89a7b45c..2b4e785de 100644
--- a/src/context/DatatableContext.res
+++ b/src/context/DatatableContext.res
@@ -1,5 +1,5 @@
-let defaultValue: Dict.t<array<Js.Json.t>> = Dict.make()
-let setDefaultValue: (Js.Dict.key, array<Js.Json.t>) => unit = (_string, _arr) => ()
+let defaultValue: Dict.t<array<JSON.t>> = Dict.make()
+let setDefaultValue: (Js.Dict.key, array<JSON.t>) => unit = (_string, _arr) => ()
 
 let datatableContext = React.createContext((defaultValue, setDefaultValue))
 
diff --git a/src/context/FilterContext.res b/src/context/FilterContext.res
index 03c1d5646..26bc38dad 100644
--- a/src/context/FilterContext.res
+++ b/src/context/FilterContext.res
@@ -11,7 +11,7 @@ type filterUpdater = {
   filterValue: Dict.t<string>,
   updateExistingKeys: Dict.t<string> => unit,
   removeKeys: array<string> => unit,
-  filterValueJson: Dict.t<Js.Json.t>,
+  filterValueJson: Dict.t<JSON.t>,
   reset: unit => unit,
 }
 
diff --git a/src/context/SingleStatContext.res b/src/context/SingleStatContext.res
index d8e5c8c85..fc80e9e7f 100644
--- a/src/context/SingleStatContext.res
+++ b/src/context/SingleStatContext.res
@@ -6,9 +6,9 @@ open LogicUtils
 open AnalyticsNewUtils
 
 type singleStatComponent = {
-  singleStatData: option<Dict.t<dataState<Js.Json.t>>>,
-  singleStatTimeSeries: option<Dict.t<dataState<Js.Json.t>>>,
-  singleStatDelta: option<Dict.t<dataState<Js.Json.t>>>,
+  singleStatData: option<Dict.t<dataState<JSON.t>>>,
+  singleStatTimeSeries: option<Dict.t<dataState<JSON.t>>>,
+  singleStatDelta: option<Dict.t<dataState<JSON.t>>>,
   singleStatLoader: Dict.t<AnalyticsUtils.loaderType>,
   singleStatIsVisible: (bool => bool) => unit,
 }
@@ -86,10 +86,10 @@ let make = (
       ->Belt.Array.keepMap(entry => {
         let (key, value) = entry
         if allFilterKeys->Array.includes(key) {
-          switch value->Js.Json.classify {
-          | JSONString(str) => `${key}=${str}`->Some
-          | JSONNumber(num) => `${key}=${num->String.make}`->Some
-          | JSONArray(arr) => `${key}=[${arr->String.make}]`->Some
+          switch value->JSON.Classify.classify {
+          | String(str) => `${key}=${str}`->Some
+          | Number(num) => `${key}=${num->String.make}`->Some
+          | Array(arr) => `${key}=[${arr->String.make}]`->Some
           | _ => None
           }
         } else {
@@ -113,7 +113,7 @@ let make = (
       filterKeys->Array.includes(key) ? Some((key, value)) : None
     })
     ->Dict.fromArray
-    ->Js.Json.object_
+    ->JSON.Encode.object
     ->Some
   }, [topFiltersToSearchParam])
 
@@ -231,12 +231,12 @@ let make = (
           },
         )
         let timeObj = Dict.fromArray([
-          ("start", filterConfigCurrent.startTime->Js.Json.string),
-          ("end", filterConfigCurrent.endTime->Js.Json.string),
+          ("start", filterConfigCurrent.startTime->JSON.Encode.string),
+          ("end", filterConfigCurrent.endTime->JSON.Encode.string),
         ])
         let historicTimeObj = Dict.fromArray([
-          ("start", filterConfigHistoric.startTime->Js.Json.string),
-          ("end", filterConfigHistoric.endTime->Js.Json.string),
+          ("start", filterConfigHistoric.startTime->JSON.Encode.string),
+          ("end", filterConfigHistoric.endTime->JSON.Encode.string),
         ])
 
         let granularityConfig = switch filterConfigCurrent {
@@ -255,7 +255,7 @@ let make = (
               ~customFilterValue=filterConfigHistoric.customFilterValue,
               ~domain=urlConfig.domain,
               (),
-            )->Js.Json.stringify,
+            )->JSON.stringify,
             ~authToken=parentToken,
             ~headers=[("QueryType", "SingleStatHistoric")]->Dict.fromArray,
             (),
@@ -274,12 +274,12 @@ let make = (
                     Dict.set(
                       prevDict,
                       updatedMetrics,
-                      Loaded(jsonObj->Array.get(0)->Option.getOr(Js.Json.object_(Dict.make()))),
+                      Loaded(jsonObj->Array.get(0)->Option.getOr(JSON.Encode.object(Dict.make()))),
                     )
                     prevDict
                   },
                 )
-                Loaded(Js.Json.object_(Dict.make()))
+                Loaded(JSON.Encode.object(Dict.make()))
               })
             },
           )
@@ -307,7 +307,7 @@ let make = (
               ~customFilterValue=filterConfigCurrent.customFilterValue,
               ~domain=urlConfig.domain,
               (),
-            )->Js.Json.stringify,
+            )->JSON.stringify,
             ~authToken=parentToken,
             ~headers=[("QueryType", "SingleStat")]->Dict.fromArray,
             (),
@@ -323,13 +323,13 @@ let make = (
                   Dict.set(
                     prevDict,
                     updatedMetrics,
-                    Loaded(jsonObj->Array.get(0)->Option.getOr(Js.Json.object_(Dict.make()))),
+                    Loaded(jsonObj->Array.get(0)->Option.getOr(JSON.Encode.object(Dict.make()))),
                   )
                   prevDict
                 },
               )
 
-              resolve(Loaded(Js.Json.object_(Dict.make())))
+              resolve(Loaded(JSON.Encode.object(Dict.make())))
             },
           )
           ->catch(
@@ -358,7 +358,7 @@ let make = (
               ~domain=urlConfig.domain,
               ~timeCol=urlConfig.timeColumn,
               (),
-            )->Js.Json.stringify,
+            )->JSON.stringify,
             ~authToken=parentToken,
             ~headers=[("QueryType", "SingleStat Time Series")]->Dict.fromArray,
             (),
@@ -380,18 +380,18 @@ let make = (
                     },
                   )
                   ->Dict.fromArray
-                  ->Js.Json.object_
+                  ->JSON.Encode.object
                 },
               )
               let jsonObj = jsonTransFormer(updatedMetrics, jsonObj)
               setSingleStatTimeSeries(
                 prev => {
                   let prevDict = prev->copyOfDict
-                  Dict.set(prevDict, updatedMetrics, Loaded(jsonObj->Js.Json.array))
+                  Dict.set(prevDict, updatedMetrics, Loaded(jsonObj->JSON.Encode.array))
                   prevDict
                 },
               )
-              resolve(Loaded(Js.Json.object_(Dict.make())))
+              resolve(Loaded(JSON.Encode.object(Dict.make())))
             },
           )
           ->catch(
diff --git a/src/context/ThemeUtils.res b/src/context/ThemeUtils.res
index dfbc83468..81683fef9 100644
--- a/src/context/ThemeUtils.res
+++ b/src/context/ThemeUtils.res
@@ -4,7 +4,7 @@ let useThemeFromEvent = () => {
   React.useEffect0(() => {
     let setEventThemeVal = (eventName, dict) => {
       if eventName === "AuthenticationDetails" {
-        let payloadDict = dict->Dict.get("payload")->Option.flatMap(Js.Json.decodeObject)
+        let payloadDict = dict->Dict.get("payload")->Option.flatMap(JSON.Decode.object)
         let theme =
           payloadDict->Option.mapOr("", finalDict => LogicUtils.getString(finalDict, "theme", ""))
         setEventTheme(_ => Some(theme))
@@ -20,7 +20,7 @@ let useThemeFromEvent = () => {
       let optionalDict = HandlingEvents.getEventDict(ev)
       switch optionalDict {
       | Some(dict) => {
-          let optionalEventName = dict->Dict.get("eventType")->Option.flatMap(Js.Json.decodeString)
+          let optionalEventName = dict->Dict.get("eventType")->Option.flatMap(JSON.Decode.string)
           switch optionalEventName {
           | Some(eventName) => setEventThemeVal(eventName, dict)
           | None => Js.log2("Event Data is not found", dict)
diff --git a/src/context/TokenContextProvider.res b/src/context/TokenContextProvider.res
index e6781f29d..89ee7a850 100644
--- a/src/context/TokenContextProvider.res
+++ b/src/context/TokenContextProvider.res
@@ -1,11 +1,11 @@
 let defaultTokenSetter = (_: option<string> => option<string>) => ()
-let defaultDictSetter = (_: Dict.t<Js.Json.t> => Dict.t<Js.Json.t>) => ()
+let defaultDictSetter = (_: Dict.t<JSON.t> => Dict.t<JSON.t>) => ()
 
 type tokenContextObjectType = {
   token: option<string>,
   setToken: (option<string> => option<string>) => unit,
-  tokenDetailsDict: Dict.t<Js.Json.t>,
-  setTokenDetailsDict: (Dict.t<Js.Json.t> => Dict.t<Js.Json.t>) => unit,
+  tokenDetailsDict: Dict.t<JSON.t>,
+  setTokenDetailsDict: (Dict.t<JSON.t> => Dict.t<JSON.t>) => unit,
   parentAuthInfo: option<HyperSwitchAuthTypes.authInfo>,
 }
 
@@ -14,7 +14,7 @@ let defaultTokenObj = {
   setToken: defaultTokenSetter,
   tokenDetailsDict: Dict.make(),
   setTokenDetailsDict: defaultDictSetter,
-  parentAuthInfo: HyperSwitchAuthTypes.getAuthInfo(Js.Json.object_(Dict.make()), ""),
+  parentAuthInfo: HyperSwitchAuthTypes.getAuthInfo(JSON.Encode.object(Dict.make()), ""),
 }
 
 let tokenContext = React.createContext(defaultTokenObj)
diff --git a/src/context/UserPrefContext.res b/src/context/UserPrefContext.res
index 9156ad9d2..f03528fe9 100644
--- a/src/context/UserPrefContext.res
+++ b/src/context/UserPrefContext.res
@@ -1,7 +1,7 @@
 // will be used in future
 // docfor the user preference https://docs.google.com/document/d/1BM_UgHLuN0U-cXfRYqN6wWSq-5KUiqojinCfBrUEiVo/edit
 open UserPrefUtils
-external userPrefToJson: userPref => Js.Json.t = "%identity"
+external userPrefToJson: userPref => JSON.t = "%identity"
 external dictUserPrefToStr: Dict.t<userPref> => string = "%identity"
 let userPrefSetter: (Dict.t<userPref> => Dict.t<userPref>) => unit = _ => ()
 let defaultUserPref: Dict.t<userPref> = Dict.make()
@@ -11,8 +11,8 @@ type filter = {
   setUserPref: (Dict.t<userPref> => Dict.t<userPref>) => unit,
   lastVisitedTab: string,
   getSearchParamByLink: string => string,
-  addConfig: (string, Js.Json.t) => unit,
-  getConfig: string => option<Js.Json.t>,
+  addConfig: (string, JSON.t) => unit,
+  getConfig: string => option<JSON.t>,
 }
 
 let userPrefObj: filter = {
@@ -176,8 +176,8 @@ let make = (~children) => {
       (key, value->userPrefToJson)
     })
     ->Dict.fromArray
-    ->Js.Json.object_
-    ->Js.Json.stringify
+    ->JSON.Encode.object
+    ->JSON.stringify
 
   let value = React.useMemo4(() => {
     let currentConfig = userPref->Dict.get(username)->Option.getOr({})
diff --git a/src/entities/EntityType.res b/src/entities/EntityType.res
index 1a2471741..bd47150c8 100644
--- a/src/entities/EntityType.res
+++ b/src/entities/EntityType.res
@@ -1,12 +1,12 @@
 type initialFilters<'t> = {
   field: FormRenderer.fieldInfoType,
-  localFilter: option<(Js.Array.t<Js.Nullable.t<'t>>, Js.Json.t) => Js.Array.t<Js.Nullable.t<'t>>>,
+  localFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
 }
 type optionType<'t> = {
   urlKey: string,
   field: FormRenderer.fieldInfoType,
-  parser: Js.Json.t => Js.Json.t,
-  localFilter: option<(Js.Array.t<Js.Nullable.t<'t>>, Js.Json.t) => Js.Array.t<Js.Nullable.t<'t>>>,
+  parser: JSON.t => JSON.t,
+  localFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
 }
 let getDefaultEntityOptionType = (): optionType<'t> => {
   urlKey: "",
@@ -19,23 +19,23 @@ type summary = {totalCount: int, count: int}
 
 type entityType<'colType, 't> = {
   uri: string,
-  getObjects: Js.Json.t => array<'t>,
+  getObjects: JSON.t => array<'t>,
   defaultColumns: array<'colType>,
   allColumns: option<array<'colType>>,
   getHeading: 'colType => Table.header,
   getCell: ('t, 'colType) => Table.cell,
   dataKey: string,
   summaryKey: string,
-  getSummary: Js.Json.t => summary,
+  getSummary: JSON.t => summary,
   getShowLink: option<'t => string>,
-  defaultFilters: Js.Json.t,
+  defaultFilters: JSON.t,
   headers: Dict.t<string>,
   initialFilters: array<initialFilters<'t>>,
   options: array<optionType<'t>>,
   getDetailsUri: string => string,
-  getNewUrl: Js.Json.t => string,
+  getNewUrl: JSON.t => string,
   getSyncUrl: string => option<string>,
-  detailsPageLayout: (Js.Json.t, string) => React.element,
+  detailsPageLayout: (JSON.t, string) => React.element,
   searchFields: array<FormRenderer.fieldInfoType>,
   searchUrl: string,
   searchKeyList: array<string>,
@@ -43,20 +43,20 @@ type entityType<'colType, 't> = {
   requiredSearchFieldsList: array<string>,
   detailsKey: string,
   popupFilterFields: array<optionType<'t>>,
-  dateRangeFilterDict: Dict.t<Js.Json.t>,
+  dateRangeFilterDict: Dict.t<JSON.t>,
   searchValueDict: option<Dict.t<string>>,
-  filterCheck: ('t, Js.Array2.t<string>) => bool,
-  filterForRow: (option<Js.Array2.t<Js.Nullable.t<'t>>>, int) => TableUtils.filterObject,
+  filterCheck: ('t, array<string>) => bool,
+  filterForRow: (option<array<Js.Nullable.t<'t>>>, int) => TableUtils.filterObject,
 }
 
 let emptyObj = {
   let dict = Dict.make()
-  Dict.set(dict, "offset", Js.Json.number(0.0))
-  Js.Json.object_(dict)
+  Dict.set(dict, "offset", JSON.Encode.float(0.0))
+  JSON.Encode.object(dict)
 }
 
 let defaultGetSummary = (json, totalCountKey) => {
-  switch json->Js.Json.decodeObject {
+  switch json->JSON.Decode.object {
   | Some(dict) => {
       let summary = {
         totalCount: LogicUtils.getInt(dict, totalCountKey, 0),
diff --git a/src/entities/analytics/AnalyticsUtils.res b/src/entities/analytics/AnalyticsUtils.res
index e7bb4c437..b8494e879 100644
--- a/src/entities/analytics/AnalyticsUtils.res
+++ b/src/entities/analytics/AnalyticsUtils.res
@@ -35,9 +35,9 @@ type filterBodyEntity = {
 type filterEntity<'t> = {
   uri: string,
   moduleName: string,
-  initialFixedFilters: Js.Json.t => array<EntityType.initialFilters<'t>>,
-  initialFilters: Js.Json.t => array<EntityType.initialFilters<'t>>,
-  filterDropDownOptions: Js.Json.t => array<EntityType.optionType<'t>>,
+  initialFixedFilters: JSON.t => array<EntityType.initialFilters<'t>>,
+  initialFilters: JSON.t => array<EntityType.initialFilters<'t>>,
+  filterDropDownOptions: JSON.t => array<EntityType.optionType<'t>>,
   filterKeys: array<string>,
   timeKeys: timeKeys,
   defaultFilterKeys: array<string>,
@@ -49,8 +49,8 @@ type filterEntity<'t> = {
 type filterEntityNew<'t> = {
   uri: string,
   moduleName: string,
-  initialFixedFilters: Js.Json.t => array<EntityType.initialFilters<'t>>,
-  initialFilters: (Js.Json.t, string => unit) => array<EntityType.initialFilters<'t>>,
+  initialFixedFilters: JSON.t => array<EntityType.initialFilters<'t>>,
+  initialFilters: (JSON.t, string => unit) => array<EntityType.initialFilters<'t>>,
   filterKeys: array<string>,
   timeKeys: timeKeys,
   defaultFilterKeys: array<string>,
@@ -79,11 +79,11 @@ type downloadDataEntity = {
 type tableApiBodyEntity = {
   startTimeFromUrl: string,
   endTimeFromUrl: string,
-  filterValueFromUrl?: Js.Json.t,
+  filterValueFromUrl?: JSON.t,
   currenltySelectedTab?: array<string>,
   deltaMetrics: array<string>,
   isIndustry: bool,
-  distributionArray?: array<Js.Json.t>,
+  distributionArray?: array<JSON.t>,
   deltaPrefixArr: array<string>,
   tableMetrics: array<string>,
   mode?: string,
@@ -94,14 +94,14 @@ type tableApiBodyEntity = {
 }
 
 type newApiBodyEntity = {
-  timeObj: Dict.t<Js.Json.t>,
+  timeObj: Dict.t<JSON.t>,
   metric?: string,
-  groupBy?: Js.Array2.t<Js_string.t>,
+  groupBy?: array<Js_string.t>,
   granularityConfig?: (int, string),
   cardinality?: float,
-  filterValueFromUrl?: Js.Json.t,
+  filterValueFromUrl?: JSON.t,
   customFilterValue?: string,
-  jsonFormattedFilter?: Js.Json.t,
+  jsonFormattedFilter?: JSON.t,
   cardinalitySortDims?: string,
   domain: string,
 }
@@ -110,7 +110,7 @@ type analyticsTableEntity<'colType, 't> = {
   metrics: array<string>,
   deltaMetrics: array<string>,
   headerMetrics: array<string>,
-  distributionArray: option<array<Js.Json.t>>,
+  distributionArray: option<array<JSON.t>>,
   tableEntity: EntityType.entityType<'colType, 't>,
   deltaPrefixArr: array<string>,
   isIndustry: bool,
@@ -122,7 +122,7 @@ type analyticsTableEntity<'colType, 't> = {
       'colType,
     ) => Table.header,
   >,
-  tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, Js.Json.t) => array<Js.Nullable.t<'t>>>,
+  tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
   moduleName: string,
   defaultSortCol: string,
   filterKeys: array<string>,
@@ -137,8 +137,8 @@ type analyticsTableEntity<'colType, 't> = {
   tableBodyEntity?: tableApiBodyEntity => string,
   sampleApiBody?: tableApiBodyEntity => string,
   customFilterKey?: string,
-  newTableBodyMaker?: newApiBodyEntity => Js.Json.t,
-  jsonTransformer?: (string, array<Js.Json.t>, array<string>) => array<Js.Json.t>,
+  newTableBodyMaker?: newApiBodyEntity => JSON.t,
+  jsonTransformer?: (string, array<JSON.t>, array<string>) => array<JSON.t>,
 }
 
 type statSentiment = Positive | Negative | Neutral
@@ -152,7 +152,7 @@ let getDateCreatedObject = () => {
   Dict.set(
     filterCreatedDict,
     endTimeFilterKey,
-    Js.Json.string(currentTimestamp->TimeZoneHook.formattedISOString(dateFormat)),
+    JSON.Encode.string(currentTimestamp->TimeZoneHook.formattedISOString(dateFormat)),
   )
 
   let prevTime = {
@@ -161,7 +161,7 @@ let getDateCreatedObject = () => {
   }
 
   let defaultStartTime = {
-    Js.Json.string(
+    JSON.Encode.string(
       prevTime
       ->Js.Date.fromFloat
       ->Js.Date.toISOString
@@ -169,7 +169,7 @@ let getDateCreatedObject = () => {
     )
   }
   Dict.set(filterCreatedDict, startTimeFilterKey, defaultStartTime)
-  Dict.set(filterCreatedDict, "opt", Js.Json.string("today"))
+  Dict.set(filterCreatedDict, "opt", JSON.Encode.string("today"))
 
   filterCreatedDict
 }
@@ -178,11 +178,11 @@ open LogicUtils
 let getFilterRequestBody = (
   ~granularity: option<string>=None,
   ~groupByNames: option<array<string>>=None,
-  ~filter: option<Js.Json.t>=None,
+  ~filter: option<JSON.t>=None,
   ~metrics: option<array<string>>=None,
   ~delta: bool=true,
   ~prefix: option<string>=None,
-  ~distributionValues: option<Js.Json.t>=None,
+  ~distributionValues: option<JSON.t>=None,
   ~startDateTime,
   ~endDateTime,
   ~cardinality: option<string>=None,
@@ -191,13 +191,13 @@ let getFilterRequestBody = (
   ~source: string="BATCH",
   (),
 ) => {
-  let body: Dict.t<Js.Json.t> = Dict.make()
+  let body: Dict.t<JSON.t> = Dict.make()
   let timeRange = Dict.make()
   let timeSeries = Dict.make()
 
-  Dict.set(timeRange, "startTime", startDateTime->Js.Json.string)
-  Dict.set(timeRange, "endTime", endDateTime->Js.Json.string)
-  Dict.set(body, "timeRange", timeRange->Js.Json.object_)
+  Dict.set(timeRange, "startTime", startDateTime->JSON.Encode.string)
+  Dict.set(timeRange, "endTime", endDateTime->JSON.Encode.string)
+  Dict.set(body, "timeRange", timeRange->JSON.Encode.object)
 
   switch groupByNames {
   | Some(groupByNames) =>
@@ -207,8 +207,8 @@ let getFilterRequestBody = (
         "groupByNames",
         groupByNames
         ->ArrayUtils.getUniqueStrArray
-        ->Belt.Array.keepMap(item => Some(item->Js.Json.string))
-        ->Js.Json.array,
+        ->Belt.Array.keepMap(item => Some(item->JSON.Encode.string))
+        ->JSON.Encode.array,
       )
     }
   | None => ()
@@ -231,32 +231,32 @@ let getFilterRequestBody = (
   }
 
   if customFilter != "" {
-    Dict.set(body, "customFilter", customFilter->Js.Json.string)
+    Dict.set(body, "customFilter", customFilter->JSON.Encode.string)
   }
   switch granularity {
   | Some(granularity) => {
-      Dict.set(timeSeries, "granularity", granularity->Js.Json.string)
-      Dict.set(body, "timeSeries", timeSeries->Js.Json.object_)
+      Dict.set(timeSeries, "granularity", granularity->JSON.Encode.string)
+      Dict.set(body, "timeSeries", timeSeries->JSON.Encode.object)
     }
 
   | None => ()
   }
 
   switch cardinality {
-  | Some(cardinality) => Dict.set(body, "cardinality", cardinality->Js.Json.string)
+  | Some(cardinality) => Dict.set(body, "cardinality", cardinality->JSON.Encode.string)
   | None => ()
   }
   switch mode {
-  | Some(mode) => Dict.set(body, "mode", mode->Js.Json.string)
+  | Some(mode) => Dict.set(body, "mode", mode->JSON.Encode.string)
   | None => ()
   }
 
   switch prefix {
-  | Some(prefix) => Dict.set(body, "prefix", prefix->Js.Json.string)
+  | Some(prefix) => Dict.set(body, "prefix", prefix->JSON.Encode.string)
   | None => ()
   }
 
-  Dict.set(body, "source", source->Js.Json.string)
+  Dict.set(body, "source", source->JSON.Encode.string)
 
   switch metrics {
   | Some(metrics) =>
@@ -266,14 +266,14 @@ let getFilterRequestBody = (
         "metrics",
         metrics
         ->ArrayUtils.getUniqueStrArray
-        ->Belt.Array.keepMap(item => Some(item->Js.Json.string))
-        ->Js.Json.array,
+        ->Belt.Array.keepMap(item => Some(item->JSON.Encode.string))
+        ->JSON.Encode.array,
       )
     }
   | None => ()
   }
   if delta {
-    Dict.set(body, "delta", true->Js.Json.boolean)
+    Dict.set(body, "delta", true->JSON.Encode.bool)
   }
 
   body
@@ -391,39 +391,39 @@ let generatePayload = (
   ~groupByNames,
   ~prefix,
   ~source,
-  ~filters: option<Js.Json.t>,
+  ~filters: option<JSON.t>,
   ~customFilter,
 ) => {
   let timeArr = Dict.fromArray([
-    ("startTime", startTime->Js.Json.string),
-    ("endTime", endTime->Js.Json.string),
+    ("startTime", startTime->JSON.Encode.string),
+    ("endTime", endTime->JSON.Encode.string),
   ])
   let newDict = switch groupByNames {
   | Some(groupByNames) =>
     Dict.fromArray([
-      ("timeRange", timeArr->Js.Json.object_),
-      ("metrics", metrics->Js.Json.stringArray),
-      ("groupByNames", groupByNames->Js.Json.stringArray),
-      ("prefix", prefix->Js.Json.string),
-      ("source", source->Js.Json.string),
-      ("delta", delta->Js.Json.boolean),
+      ("timeRange", timeArr->JSON.Encode.object),
+      ("metrics", metrics->LogicUtils.getJsonFromArrayOfString),
+      ("groupByNames", groupByNames->LogicUtils.getJsonFromArrayOfString),
+      ("prefix", prefix->JSON.Encode.string),
+      ("source", source->JSON.Encode.string),
+      ("delta", delta->JSON.Encode.bool),
     ])
   | None =>
     Dict.fromArray([
-      ("timeRange", timeArr->Js.Json.object_),
-      ("metrics", metrics->Js.Json.stringArray),
-      ("prefix", prefix->Js.Json.string),
-      ("source", source->Js.Json.string),
-      ("delta", delta->Js.Json.boolean),
+      ("timeRange", timeArr->JSON.Encode.object),
+      ("metrics", metrics->LogicUtils.getJsonFromArrayOfString),
+      ("prefix", prefix->JSON.Encode.string),
+      ("source", source->JSON.Encode.string),
+      ("delta", delta->JSON.Encode.bool),
     ])
   }
 
   switch mode {
-  | Some(mode) => Dict.set(newDict, "mode", mode->Js.Json.string)
+  | Some(mode) => Dict.set(newDict, "mode", mode->JSON.Encode.string)
   | None => ()
   }
   if customFilter != "" {
-    Dict.set(newDict, "customFilter", customFilter->Js.Json.string)
+    Dict.set(newDict, "customFilter", customFilter->JSON.Encode.string)
   }
   switch filters {
   | Some(filters) =>
@@ -442,7 +442,7 @@ let generatedeltaTablePayload = (
   ~source,
   ~mode: option<string>,
   ~deltaPrefixArr,
-  ~filters: option<Js.Json.t>,
+  ~filters: option<JSON.t>,
   ~showDeltaMetrics=false,
   ~customFilter,
 ) => {
@@ -466,10 +466,10 @@ let generatedeltaTablePayload = (
 let generateTablePayload = (
   ~startTimeFromUrl: string,
   ~endTimeFromUrl: string,
-  ~filterValueFromUrl: option<Js.Json.t>,
+  ~filterValueFromUrl: option<JSON.t>,
   ~currenltySelectedTab: option<array<string>>,
   ~tableMetrics: array<string>,
-  ~distributionArray: option<array<Js.Json.t>>,
+  ~distributionArray: option<array<JSON.t>>,
   ~deltaMetrics: array<string>,
   ~deltaPrefixArr: array<string>,
   ~isIndustry: bool,
@@ -582,8 +582,8 @@ let generateTablePayload = (
   let tableBody =
     tableBodyValues
     ->Array.concatMany([deltaPayload, distributionPayload])
-    ->Array.map(Js.Json.object_)
-    ->Js.Json.array
+    ->Array.map(JSON.Encode.object)
+    ->JSON.Encode.array
   tableBody
 }
 
@@ -792,5 +792,5 @@ module NoDataFound = {
 type getFilters = {
   startTime: string,
   endTime: string,
-  filterValueFromUrl?: Js.Json.t,
+  filterValueFromUrl?: JSON.t,
 }
diff --git a/src/entities/analytics/EulerAnalyticsLogUtils.res b/src/entities/analytics/EulerAnalyticsLogUtils.res
index f8ef98bd8..f39e9cd42 100644
--- a/src/entities/analytics/EulerAnalyticsLogUtils.res
+++ b/src/entities/analytics/EulerAnalyticsLogUtils.res
@@ -1,6 +1,3 @@
-external toJson: exn => Js.Json.t = "%identity"
-external toExn: string => exn = "%identity"
-
 let useAddLogsAroundFetch = () => {
   let addLogsAroundFetch = (~setStatusDict=?, ~logTitle, fetchPromise) => {
     let setStatusDict = switch setStatusDict {
diff --git a/src/entryPoints/hyperswitch/FeatureFlagUtils.res b/src/entryPoints/hyperswitch/FeatureFlagUtils.res
index b48bba1d4..b1fed896a 100644
--- a/src/entryPoints/hyperswitch/FeatureFlagUtils.res
+++ b/src/entryPoints/hyperswitch/FeatureFlagUtils.res
@@ -28,7 +28,7 @@ type featureFlag = {
   disputeEvidenceUpload: bool,
 }
 
-let featureFlagType = (featureFlags: Js.Json.t) => {
+let featureFlagType = (featureFlags: JSON.t) => {
   open LogicUtils
   let dict = featureFlags->getDictFromJsonObject
   let typedFeatureFlag: featureFlag = {
diff --git a/src/entryPoints/hyperswitch/HyperSwitchApp.res b/src/entryPoints/hyperswitch/HyperSwitchApp.res
index 6c1c7834e..152ff1ef7 100644
--- a/src/entryPoints/hyperswitch/HyperSwitchApp.res
+++ b/src/entryPoints/hyperswitch/HyperSwitchApp.res
@@ -58,7 +58,7 @@ let make = () => {
         ->Array.find(ele => {
           ele->getDictFromJsonObject->getBool("ProductionAgreement", false)
         })
-        ->Option.getOr(Js.Json.null)
+        ->Option.getOr(JSON.Encode.null)
 
       if productionAgreementResponse->getDictFromJsonObject->getBool("ProductionAgreement", false) {
         setDashboardPageState(_ => #PROD_ONBOARDING)
@@ -92,9 +92,7 @@ let make = () => {
       let url = getURL(~entityName=USERS, ~userType=#GET_PERMISSIONS, ~methodType=Get, ())
       let response = await fetchDetails(url)
       let permissionsValue =
-        response
-        ->getArrayFromJson([])
-        ->Array.map(ele => ele->Js.Json.decodeString->Option.getOr(""))
+        response->getArrayFromJson([])->Array.map(ele => ele->JSON.Decode.string->Option.getOr(""))
       let permissionJson =
         permissionsValue->Array.map(ele => ele->mapStringToPermissionType)->getPermissionJson
       setuserPermissionJson(._ => permissionJson)
diff --git a/src/entryPoints/hyperswitch/HyperSwitchEntry.res b/src/entryPoints/hyperswitch/HyperSwitchEntry.res
index 401173b49..b27a8caef 100644
--- a/src/entryPoints/hyperswitch/HyperSwitchEntry.res
+++ b/src/entryPoints/hyperswitch/HyperSwitchEntry.res
@@ -22,9 +22,9 @@ module HyperSwitchEntryComponent = {
           "batch_requests": true,
           "loaded": () => {
             let mixpanelUserInfo =
-              [("name", email->Js.Json.string), ("merchantName", name->Js.Json.string)]
+              [("name", email->JSON.Encode.string), ("merchantName", name->JSON.Encode.string)]
               ->Dict.fromArray
-              ->Js.Json.object_
+              ->JSON.Encode.object
 
             let userId = MixPanel.getDistinctId()
             LocalStorage.setItem("deviceid", userId)
@@ -64,7 +64,7 @@ module HyperSwitchEntryComponent = {
         let url = `${HSwitchGlobalVars.hyperSwitchFEPrefix}/config/merchant-access`
         let typedResponse =
           (
-            await postDetails(url, Dict.make()->Js.Json.object_, Post, ())
+            await postDetails(url, Dict.make()->JSON.Encode.object, Post, ())
           )->FeatureFlagUtils.featureFlagType
         setFeatureFlag(._ => typedResponse)
         setScreenState(_ => PageLoaderWrapper.Success)
diff --git a/src/entryPoints/hyperswitch/HyperswitchAtom.res b/src/entryPoints/hyperswitch/HyperswitchAtom.res
index 8f7cc5f68..ad077a330 100644
--- a/src/entryPoints/hyperswitch/HyperswitchAtom.res
+++ b/src/entryPoints/hyperswitch/HyperswitchAtom.res
@@ -8,7 +8,7 @@ let enumVariantAtom = Recoil.atom(. "enumVariantDetails", "")
 
 let featureFlagAtom: Recoil.recoilAtom<FeatureFlagUtils.featureFlag> = Recoil.atom(.
   "featureFlag",
-  Js.Json.null->FeatureFlagUtils.featureFlagType,
+  JSON.Encode.null->FeatureFlagUtils.featureFlagType,
 )
 let paypalAccountStatusAtom: Recoil.recoilAtom<PayPalFlowTypes.setupAccountStatus> = Recoil.atom(.
   "paypalAccountStatusAtom",
diff --git a/src/entryPoints/hyperswitch/Provider/GlobalProvider.res b/src/entryPoints/hyperswitch/Provider/GlobalProvider.res
index 2933e1f55..d8df0b5a8 100644
--- a/src/entryPoints/hyperswitch/Provider/GlobalProvider.res
+++ b/src/entryPoints/hyperswitch/Provider/GlobalProvider.res
@@ -1,6 +1,6 @@
 open ProviderTypes
 
-let defaultIntegrationValue = Dict.make()->Js.Json.object_->ProviderHelper.getIntegrationDetails
+let defaultIntegrationValue = Dict.make()->JSON.Encode.object->ProviderHelper.getIntegrationDetails
 let defaultValue = {
   showFeedbackModal: false,
   setShowFeedbackModal: _ => (),
@@ -37,7 +37,7 @@ let make = (~children) => {
   ) = React.useState(_ => QuickStartTypes.ConnectProcessor(LANDING))
 
   let (integrationDetails, setIntegrationDetails) = React.useState(_ =>
-    Dict.make()->Js.Json.object_->ProviderHelper.getIntegrationDetails
+    Dict.make()->JSON.Encode.object->ProviderHelper.getIntegrationDetails
   )
 
   <Provider
diff --git a/src/entryPoints/hyperswitch/Provider/ProviderHelper.res b/src/entryPoints/hyperswitch/Provider/ProviderHelper.res
index 26068cd1b..06f5930b0 100644
--- a/src/entryPoints/hyperswitch/Provider/ProviderHelper.res
+++ b/src/entryPoints/hyperswitch/Provider/ProviderHelper.res
@@ -4,7 +4,7 @@ let itemIntegrationDetailsMapper = dict => {
   open LogicUtils
   {
     is_done: dict->getBool("is_done", false),
-    metadata: dict->getDictfromDict("metadata")->Js.Json.object_,
+    metadata: dict->getDictfromDict("metadata")->JSON.Encode.object,
   }
 }
 
@@ -22,7 +22,7 @@ let itemToObjMapper = dict => {
   }
 }
 
-let getIntegrationDetails: Js.Json.t => integrationDetailsType = json => {
+let getIntegrationDetails: JSON.t => integrationDetailsType = json => {
   open LogicUtils
   json->getDictFromJsonObject->itemToObjMapper
 }
diff --git a/src/entryPoints/hyperswitch/Provider/ProviderTypes.res b/src/entryPoints/hyperswitch/Provider/ProviderTypes.res
index 8d04f0306..e627d6f97 100644
--- a/src/entryPoints/hyperswitch/Provider/ProviderTypes.res
+++ b/src/entryPoints/hyperswitch/Provider/ProviderTypes.res
@@ -1,6 +1,6 @@
 type integration = {
   mutable is_done: bool,
-  mutable metadata: Js.Json.t,
+  mutable metadata: JSON.t,
 }
 type dashboardPageStateTypes = [
   | #POST_LOGIN_QUES_NOT_DONE
@@ -56,5 +56,5 @@ type sidebarContextType = {
   isSidebarExpanded: bool,
   setIsSidebarExpanded: (bool => bool) => unit,
   getFromSidebarDetails: Js.Dict.key => bool,
-  setIsSidebarDetails: (Js.Dict.key, Js.Json.t) => unit,
+  setIsSidebarDetails: (Js.Dict.key, JSON.t) => unit,
 }
diff --git a/src/entryPoints/hyperswitch/WooCommerce/WooCommerce.res b/src/entryPoints/hyperswitch/WooCommerce/WooCommerce.res
index e17937ed7..f1bd74eed 100644
--- a/src/entryPoints/hyperswitch/WooCommerce/WooCommerce.res
+++ b/src/entryPoints/hyperswitch/WooCommerce/WooCommerce.res
@@ -221,7 +221,7 @@ let make = () => {
   let usePostEnumDetails = EnumVariantHook.usePostEnumDetails()
   let enumDetails = Recoil.useRecoilValueFromAtom(HyperswitchAtom.enumVariantAtom)
   let (selectedConnector, setSelectedConnector) = React.useState(_ => UnknownConnector(""))
-  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->Js.Json.object_)
+  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->JSON.Encode.object)
   let (connectorConfigureState, setConnectorConfigureState) = React.useState(_ => Select_processor)
   let (stepInView, setStepInView) = React.useState(_ => PLUGIN_INSTALL)
   let {setDashboardPageState} = React.useContext(GlobalProvider.defaultContext)
@@ -294,9 +294,9 @@ let make = () => {
   }
   React.useEffect1(() => {
     let defaultJsonOnNewConnector =
-      [("profile_id", activeBusinessProfile.profile_id->Js.Json.string)]
+      [("profile_id", activeBusinessProfile.profile_id->JSON.Encode.string)]
       ->Dict.fromArray
-      ->Js.Json.object_
+      ->JSON.Encode.object
     setInitialValues(_ => defaultJsonOnNewConnector)
     None
   }, [activeBusinessProfile.profile_id, connectorName])
diff --git a/src/entryPoints/hyperswitch/WooCommerce/WooCommerceUIUtils.res b/src/entryPoints/hyperswitch/WooCommerce/WooCommerceUIUtils.res
index b50223c77..fd83db670 100644
--- a/src/entryPoints/hyperswitch/WooCommerce/WooCommerceUIUtils.res
+++ b/src/entryPoints/hyperswitch/WooCommerce/WooCommerceUIUtils.res
@@ -58,9 +58,9 @@ module SelectPaymentMethods = {
     let connectorName = selectedConnector->ConnectorUtils.getConnectorNameString
 
     let (paymentMethodsEnabled, setPaymentMethods) = React.useState(_ =>
-      Dict.make()->Js.Json.object_->ConnectorUtils.getPaymentMethodEnabled
+      Dict.make()->JSON.Encode.object->ConnectorUtils.getPaymentMethodEnabled
     )
-    let (metaData, setMetaData) = React.useState(_ => Dict.make()->Js.Json.object_)
+    let (metaData, setMetaData) = React.useState(_ => Dict.make()->JSON.Encode.object)
 
     let updateDetails = value => {
       setPaymentMethods(_ => value->Array.copy)
diff --git a/src/genericUtils/DOMUtils.res b/src/genericUtils/DOMUtils.res
index 55785e388..84e2b3d66 100644
--- a/src/genericUtils/DOMUtils.res
+++ b/src/genericUtils/DOMUtils.res
@@ -10,7 +10,7 @@ type event
 @new
 external event: string => event = "Event"
 @send external dispatchEvent: ('a, event) => unit = "dispatchEvent"
-@send external postMessage: (window, Js.Json.t, string) => unit = "postMessage"
+@send external postMessage: (window, JSON.t, string) => unit = "postMessage"
 @get external keyCode: 'a => int = "keyCode"
 @send external querySelectorAll: (document, string) => array<Dom.element> = "querySelectorAll"
 @send external setAttribute: (Dom.element, string, string) => unit = "setAttribute"
diff --git a/src/genericUtils/Identity.res b/src/genericUtils/Identity.res
index d83845aba..88b203949 100644
--- a/src/genericUtils/Identity.res
+++ b/src/genericUtils/Identity.res
@@ -2,16 +2,16 @@ external formReactEventToString: ReactEvent.Form.t => string = "%identity"
 external stringToFormReactEvent: string => ReactEvent.Form.t = "%identity"
 external anyTypeToReactEvent: 'a => ReactEvent.Form.t = "%identity"
 external arrofStringToReactEvent: array<string> => ReactEvent.Form.t = "%identity"
-external jsonToNullableJson: Js.Json.t => Js.Nullable.t<Js.Json.t> = "%identity"
-external jsonToReactDOMStyle: Js.Json.t => ReactDOM.style = "%identity"
-external genericTypeToJson: 'a => Js.Json.t = "%identity"
+external jsonToNullableJson: JSON.t => Js.Nullable.t<JSON.t> = "%identity"
+external jsonToReactDOMStyle: JSON.t => ReactDOM.style = "%identity"
+external genericTypeToJson: 'a => JSON.t = "%identity"
 external genericTypeToBool: 'a => bool = "%identity"
 external formReactEventToBool: ReactEvent.Form.t => bool = "%identity"
-external genericObjectOrRecordToJson: {..} => Js.Json.t = "%identity"
-external genericTypeToDictOfJson: 't => Dict.t<Js.Json.t> = "%identity"
+external genericObjectOrRecordToJson: {..} => JSON.t = "%identity"
+external genericTypeToDictOfJson: 't => Dict.t<JSON.t> = "%identity"
 external formReactEventToArrayOfString: ReactEvent.Form.t => array<string> = "%identity"
-external jsonToFormReactEvent: Js.Json.t => ReactEvent.Form.t = "%identity"
+external jsonToFormReactEvent: JSON.t => ReactEvent.Form.t = "%identity"
 external arrayOfGenericTypeToFormReactEvent: array<'a> => ReactEvent.Form.t = "%identity"
 external webAPIFocusEventToReactEventFocus: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t =
   "%identity"
-external toWasm: Dict.t<Js.Json.t> => RoutingTypes.wasmModule = "%identity"
+external toWasm: Dict.t<JSON.t> => RoutingTypes.wasmModule = "%identity"
diff --git a/src/libraries/CsvToJson.res b/src/libraries/CsvToJson.res
index e0a4391ca..294e3f78b 100644
--- a/src/libraries/CsvToJson.res
+++ b/src/libraries/CsvToJson.res
@@ -1,9 +1,9 @@
-type csvjson = {csv2json: (. string) => Js.Json.t}
-type jsoncsv = {json2csv: (. Js.Json.t) => string}
+type csvjson = {csv2json: (. string) => JSON.t}
+type jsoncsv = {json2csv: (. JSON.t) => string}
 
 @module @val external csvtojson: csvjson = "csvjson-csv2json"
 
 @module @val external jsontocsv: jsoncsv = "csvjson-json2csv"
 
 @module("csvjson-csv2json")
-external csvToJsonWithSeparator: (string, {..}) => Js.Json.t = "csv2json"
+external csvToJsonWithSeparator: (string, {..}) => JSON.t = "csv2json"
diff --git a/src/libraries/Highcharts.res b/src/libraries/Highcharts.res
index ada4422ea..b187fbcef 100644
--- a/src/libraries/Highcharts.res
+++ b/src/libraries/Highcharts.res
@@ -1,4 +1,4 @@
-type title = {"text": string, "style": Js.Json.t}
+type title = {"text": string, "style": JSON.t}
 type subtitle = {"text": string}
 type data_obj = {"name": string, "value": int, "color": string, "id": string}
 type new_series = {"type": string, "layoutAlgorithm": string, "data": array<data_obj>}
@@ -17,7 +17,7 @@ type dataLableStyle = {
 type yAxisRecord = {value: float, name: string}
 type dataLabels = {
   enabled: bool,
-  formatter: option<Js_OO.Callback.arity1<Js.Json.t => string>>,
+  formatter: option<Js_OO.Callback.arity1<JSON.t => string>>,
   useHTML: bool,
 }
 
@@ -50,7 +50,7 @@ external makeSomethingSeries: (~\"type": string, ~something: (float, int, string
 let x = makeAreaSeries(~\"type"="hello", ~something=false)
 let y = makeSomethingSeries(~\"type"="hello", ~something=(2., 1, "heloo"))
 
-type gridLine = {attr: (. Js.Json.t) => unit}
+type gridLine = {attr: (. JSON.t) => unit}
 type pos
 type tick = {
   gridLine: gridLine,
@@ -106,8 +106,8 @@ type eventClick = {
 }
 
 // type plotOptionPoint = {
-//   "mouseOver": option<Js_OO.Callback.arity1<Js.Json.t => unit>>,
-//   "mouseOut": option<Js_OO.Callback.arity1<Js.Json.t => unit>>,
+//   "mouseOver": option<Js_OO.Callback.arity1<JSON.t => unit>>,
+//   "mouseOut": option<Js_OO.Callback.arity1<JSON.t => unit>>,
 // }
 
 // type pointEvents = {"events": option<plotOptionPoint>}
@@ -127,7 +127,7 @@ type xAxis = {
   //   "enabled": bool,
   // }>,
   "type": string,
-  // "crosshair": option<Js.Json.t>,
+  // "crosshair": option<JSON.t>,
 }
 type plotLinesLablesStyle = {
   color: option<string>,
@@ -152,7 +152,7 @@ type tickPositionerYaxis = {dataMin: float, dataMax: float}
 type yAxis = {
   "tickPositioner": option<Js_OO.Callback.arity1<tickPositionerYaxis => array<float>>>,
   "visible": bool,
-  "title": Js.Json.t,
+  "title": JSON.t,
   "labels": option<{
     "formatter": option<Js_OO.Callback.arity1<yAxisRecord => string>>,
     "enabled": bool,
@@ -206,27 +206,27 @@ type tooltip = {
   >,
 }
 type optionsJson<'a> = {
-  chart: option<Js.Json.t>,
-  title: Js.Json.t,
+  chart: option<JSON.t>,
+  title: JSON.t,
   series: array<'a>,
-  plotOptions: option<Js.Json.t>,
-  xAxis: Js.Json.t,
-  yAxis: Js.Json.t,
+  plotOptions: option<JSON.t>,
+  xAxis: JSON.t,
+  yAxis: JSON.t,
   credits: credits,
-  legend: Js.Json.t,
-  tooltip?: Js.Json.t,
+  legend: JSON.t,
+  tooltip?: JSON.t,
 }
 
 type options<'a> = {
-  chart: option<Js.Json.t>,
-  title: Js.Json.t,
+  chart: option<JSON.t>,
+  title: JSON.t,
   series: array<seriesLine<'a>>,
-  plotOptions: option<Js.Json.t>,
-  xAxis: Js.Json.t,
-  yAxis: Js.Json.t,
+  plotOptions: option<JSON.t>,
+  xAxis: JSON.t,
+  yAxis: JSON.t,
   credits: credits,
-  legend: Js.Json.t,
-  tooltip?: Js.Json.t,
+  legend: JSON.t,
+  tooltip?: JSON.t,
 }
 
 type chartType = {
@@ -245,7 +245,7 @@ let makebarChart = (
   }
 }
 type barChart = {"type": string, "backgroundColor": Js.Nullable.t<string>}
-type barSeries = {data: array<Js.Json.t>}
+type barSeries = {data: array<JSON.t>}
 type xAxis1 = {"type": string}
 
 type barChartSeries = {
@@ -265,7 +265,7 @@ type barChartYaxis = {
 //NOTE this can be removed
 type barOptions = {
   chart: barChart,
-  title: Js.Json.t,
+  title: JSON.t,
   series: array<barSeries>,
   xAxis: barChartXAxis,
   yAxis: barChartYaxis,
@@ -291,7 +291,7 @@ type afterChartCreated
 // type chartCallback = {afterChartCreated: afterChartCreated}
 type ticks
 type callBackYaxis // = {ticks: ticks}
-type chartCallback = {yAxis: array<Js.Json.t>}
+type chartCallback = {yAxis: array<JSON.t>}
 
 module HighchartsReact = {
   @module("highcharts-react-official") @react.component
@@ -313,20 +313,20 @@ module HighchartsReactDataJson = {
 
 module BarChart = {
   @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: Js.Json.t=?) => React.element = "default"
+  external make: (~highcharts: highcharts, ~options: JSON.t=?) => React.element = "default"
 }
 
 module PieChart = {
   @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: Js.Json.t=?) => React.element = "default"
+  external make: (~highcharts: highcharts, ~options: JSON.t=?) => React.element = "default"
 }
 
 module Chart = {
   @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: Js.Json.t=?) => React.element = "default"
+  external make: (~highcharts: highcharts, ~options: JSON.t=?) => React.element = "default"
 }
 
 module DonutChart = {
   @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: Js.Json.t=?) => React.element = "default"
+  external make: (~highcharts: highcharts, ~options: JSON.t=?) => React.element = "default"
 }
diff --git a/src/libraries/HighchartsGanttChartLazy.res b/src/libraries/HighchartsGanttChartLazy.res
index 3493bcb16..b1fd6f394 100644
--- a/src/libraries/HighchartsGanttChartLazy.res
+++ b/src/libraries/HighchartsGanttChartLazy.res
@@ -3,7 +3,7 @@ open HighchartsGanttChart
 
 type props = {
   highcharts: highcharts,
-  options?: Js.Json.t,
+  options?: JSON.t,
   constructorType: string,
 }
 
diff --git a/src/libraries/HighchartsHorizontalBarChart.res b/src/libraries/HighchartsHorizontalBarChart.res
index 23cd7992c..6e3b975e9 100644
--- a/src/libraries/HighchartsHorizontalBarChart.res
+++ b/src/libraries/HighchartsHorizontalBarChart.res
@@ -63,10 +63,10 @@ type highcharts
 
 module HBarChart = {
   @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: Js.Json.t=?) => React.element = "default"
+  external make: (~highcharts: highcharts, ~options: JSON.t=?) => React.element = "default"
 }
 
 module Chart = {
   @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: Js.Json.t=?) => React.element = "default"
+  external make: (~highcharts: highcharts, ~options: JSON.t=?) => React.element = "default"
 }
diff --git a/src/libraries/HighchartsPieChart.res b/src/libraries/HighchartsPieChart.res
index 10910f229..80c57d1e5 100644
--- a/src/libraries/HighchartsPieChart.res
+++ b/src/libraries/HighchartsPieChart.res
@@ -55,10 +55,10 @@ type highcharts
 
 module PieChart = {
   @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: Js.Json.t=?) => React.element = "default"
+  external make: (~highcharts: highcharts, ~options: JSON.t=?) => React.element = "default"
 }
 
 module Chart = {
   @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: Js.Json.t=?) => React.element = "default"
+  external make: (~highcharts: highcharts, ~options: JSON.t=?) => React.element = "default"
 }
diff --git a/src/libraries/HyperSwitch/ReactHyperJs.res b/src/libraries/HyperSwitch/ReactHyperJs.res
index 1c9a39841..0057e4576 100644
--- a/src/libraries/HyperSwitch/ReactHyperJs.res
+++ b/src/libraries/HyperSwitch/ReactHyperJs.res
@@ -15,14 +15,14 @@ type dataType = {
   collapsed: bool,
   value: dataValueType,
 }
-type paymentElement = {update: Js.Json.t => unit}
+type paymentElement = {update: JSON.t => unit}
 type hyperType = {
   clientSecret: string,
-  confirmPayment: Js.Json.t => Promise.t<Js.Json.t>,
-  retrievePaymentIntent: string => Promise.t<Js.Json.t>,
-  paymentRequest: Js.Json.t => Js.Json.t,
+  confirmPayment: JSON.t => Promise.t<JSON.t>,
+  retrievePaymentIntent: string => Promise.t<JSON.t>,
+  paymentRequest: JSON.t => JSON.t,
   getElement: string => Js.nullable<paymentElement>,
-  update: Js.Json.t => unit,
+  update: JSON.t => unit,
 }
 type layout = {
   \"type": string,
@@ -55,7 +55,7 @@ type variables = {
 type appearanceType = {
   theme: string,
   variables: variables,
-  rules: Js.Json.t,
+  rules: JSON.t,
 }
 type updateType = {appearance: appearanceType}
 
diff --git a/src/libraries/Lottie.res b/src/libraries/Lottie.res
index 87e11c2c8..2bc7aba59 100644
--- a/src/libraries/Lottie.res
+++ b/src/libraries/Lottie.res
@@ -1,7 +1,7 @@
 open LazyUtils
 
 type props = {
-  animationData: Js.Json.t,
+  animationData: JSON.t,
   autoplay: bool,
   loop: bool,
   lottieRef?: React.ref<Js.Nullable.t<Dom.element>>,
diff --git a/src/libraries/MixPanel.res b/src/libraries/MixPanel.res
index 8970e7d70..ee8ee21b1 100644
--- a/src/libraries/MixPanel.res
+++ b/src/libraries/MixPanel.res
@@ -1,4 +1,4 @@
-type people = {set: (. Js.Json.t) => unit}
+type people = {set: (. JSON.t) => unit}
 
 type mixpanel = {people: people}
 
diff --git a/src/libraries/MonacoEditor.res b/src/libraries/MonacoEditor.res
index 3f271a6d4..0e234bcfa 100644
--- a/src/libraries/MonacoEditor.res
+++ b/src/libraries/MonacoEditor.res
@@ -19,7 +19,7 @@ type props = {
   width?: string,
   options?: setOptions,
   onChange?: string => unit,
-  onValidate?: Js.Array2.t<array<Js.Json.t>> => unit,
+  onValidate?: array<array<JSON.t>> => unit,
   onMount?: Monaco.Editor.IStandaloneCodeEditor.t => unit,
 }
 
diff --git a/src/libraries/ReactDiffViewer.res b/src/libraries/ReactDiffViewer.res
index 8026c9850..2cab88a69 100644
--- a/src/libraries/ReactDiffViewer.res
+++ b/src/libraries/ReactDiffViewer.res
@@ -1,8 +1,8 @@
 let defaultStyles = Dict.make()
 let wordDiffStyle = Dict.make()
-Dict.set(wordDiffStyle, "padding", "0px"->Js.Json.string)
-Dict.set(defaultStyles, "wordDiff", wordDiffStyle->Js.Json.object_)
-let styles = defaultStyles->Js.Json.object_
+Dict.set(wordDiffStyle, "padding", "0px"->JSON.Encode.string)
+Dict.set(defaultStyles, "wordDiff", wordDiffStyle->JSON.Encode.object)
+let styles = defaultStyles->JSON.Encode.object
 
 @react.component
 let make = (
diff --git a/src/libraries/ReactDiffViewerBase.res b/src/libraries/ReactDiffViewerBase.res
index 6e21a4e59..6d74512bd 100644
--- a/src/libraries/ReactDiffViewerBase.res
+++ b/src/libraries/ReactDiffViewerBase.res
@@ -7,7 +7,7 @@ external make: (
   ~codeFoldMessageRenderer: unit => string=?,
   ~hideLineNumbers: bool=?,
   ~useDarkTheme: bool=?,
-  ~styles: Js.Json.t=?,
+  ~styles: JSON.t=?,
   ~leftTitle: string=?,
   ~rightTitle: string=?,
   ~compareMethod: string=?,
diff --git a/src/libraries/ReactFinalForm.res b/src/libraries/ReactFinalForm.res
index 27e212959..56466ea7d 100644
--- a/src/libraries/ReactFinalForm.res
+++ b/src/libraries/ReactFinalForm.res
@@ -3,7 +3,7 @@ type fieldRenderPropsInput = {
   onBlur: ReactEvent.Focus.t => unit,
   onChange: ReactEvent.Form.t => unit,
   onFocus: ReactEvent.Focus.t => unit,
-  value: Js.Json.t,
+  value: JSON.t,
   checked: bool,
 }
 
@@ -12,7 +12,7 @@ type fieldRenderPropsCustomInput<'t> = {
   onBlur: ReactEvent.Focus.t => unit,
   onChange: 't => unit,
   onFocus: ReactEvent.Focus.t => unit,
-  value: Js.Json.t,
+  value: JSON.t,
   checked: bool,
 }
 
@@ -48,7 +48,7 @@ type fieldRenderPropsMeta = {
   valid: bool,
   validating: bool,
   visited: bool,
-  value: Js.Json.t,
+  value: JSON.t,
 }
 
 let makeCustomError = error => {
@@ -71,7 +71,7 @@ let makeCustomError = error => {
     valid: true,
     validating: true,
     visited: true,
-    value: Js.Json.null,
+    value: JSON.Encode.null,
   }
 }
 
@@ -80,7 +80,7 @@ type fieldRenderProps = {
   meta: fieldRenderPropsMeta,
 }
 
-type formValues = Js.Json.t
+type formValues = JSON.t
 
 type submitErrorResponse = {
   responseCode: string,
@@ -91,13 +91,13 @@ type submitErrorResponse = {
 type formState = {
   dirty: bool,
   submitError: Js.Nullable.t<string>,
-  submitErrors: Js.Nullable.t<Js.Json.t>,
+  submitErrors: Js.Nullable.t<JSON.t>,
   hasValidationErrors: bool,
   hasSubmitErrors: bool,
   submitting: bool,
-  values: Js.Json.t,
-  initialValues: Js.Json.t,
-  errors: Js.Json.t,
+  values: JSON.t,
+  initialValues: JSON.t,
+  errors: JSON.t,
   dirtySinceLastSubmit: bool,
   dirtyFields: Dict.t<bool>,
   dirtyFieldsSinceLastSubmit: Dict.t<bool>,
@@ -110,7 +110,7 @@ type unsubscribeFn = unit => unit
 type formApi = {
   batch: bool,
   blur: bool,
-  change: (string, Js.Json.t) => unit,
+  change: (string, JSON.t) => unit,
   destroyOnUnregister: bool,
   focus: bool,
   getFieldState: string => option<fieldRenderPropsMeta>,
@@ -121,20 +121,20 @@ type formApi = {
   mutators: bool,
   pauseValidation: bool,
   registerField: bool,
-  reset: Js.Nullable.t<Js.Json.t> => unit,
+  reset: Js.Nullable.t<JSON.t> => unit,
   resetFieldState: string => unit,
   restart: bool,
   resumeValidation: bool,
-  submit: unit => Promise.t<Js.Nullable.t<Js.Json.t>>,
-  subscribe: (formState => unit, Js.Json.t) => unsubscribeFn,
+  submit: unit => Promise.t<Js.Nullable.t<JSON.t>>,
+  subscribe: (formState => unit, JSON.t) => unsubscribeFn,
 }
 
 type formRenderProps = {
   form: formApi,
   handleSubmit: ReactEvent.Form.t => unit,
   submitError: string,
-  values: Js.Json.t,
-  // handleSubmit: ReactEvent.Form.t => Promise.t<Js.Nullable.t<Js.Json.t>>,
+  values: JSON.t,
+  // handleSubmit: ReactEvent.Form.t => Promise.t<Js.Nullable.t<JSON.t>>,
 }
 
 @module("final-form")
@@ -152,14 +152,14 @@ module Form = {
     ~debug: bool=?,
     ~decorators: bool=?,
     ~form: string=?,
-    ~initialValues: Js.Json.t=?,
+    ~initialValues: JSON.t=?,
     ~initialValuesEqual: bool=?,
     ~keepDirtyOnReinitialize: bool=?,
     ~mutators: bool=?,
-    ~onSubmit: (formValues, formApi) => Promise.t<Js.Nullable.t<Js.Json.t>>,
+    ~onSubmit: (formValues, formApi) => Promise.t<Js.Nullable.t<JSON.t>>,
     ~render: formRenderProps => React.element=?,
     ~subscription: Dict.t<bool>,
-    ~validate: Js.Json.t => Js.Json.t=?,
+    ~validate: JSON.t => JSON.t=?,
     ~validateOnBlur: bool=?,
   ) => React.element = "Form"
 }
@@ -173,32 +173,32 @@ module Field = {
     ~component: string=?,
     ~data: bool=?,
     ~defaultValue: bool=?,
-    ~format: (. ~value: Js.Json.t, ~name: string) => Js.Json.t=?,
+    ~format: (. ~value: JSON.t, ~name: string) => JSON.t=?,
     ~formatOnBlur: bool=?,
     ~initialValue: bool=?,
     ~isEqual: bool=?,
     ~multiple: bool=?,
     ~name: string,
-    ~parse: (. ~value: Js.Json.t, ~name: string) => Js.Json.t=?,
+    ~parse: (. ~value: JSON.t, ~name: string) => JSON.t=?,
     ~ref: bool=?,
     ~render: fieldRenderProps => React.element=?,
     ~subscription: bool=?,
     @as("type") ~type_: bool=?,
-    ~validate: (option<string>, Js.Json.t) => Js.Promise.t<Js.Nullable.t<string>>=?, // (field_vale, form_object)
+    ~validate: (option<string>, JSON.t) => Js.Promise.t<Js.Nullable.t<string>>=?, // (field_vale, form_object)
     ~validateFields: bool=?,
     ~value: bool=?,
     ~placeholder: string=?,
   ) => React.element = "Field"
 }
 
-type formSubscription = Js.Json.t
+type formSubscription = JSON.t
 let useFormSubscription = (keys): formSubscription => {
   React.useMemo0(() => {
     let dict = Dict.make()
-    Js.Array.forEach(key => {
-      Dict.set(dict, key, Js.Json.boolean(true))
-    }, keys)
-    dict->Js.Json.object_
+    keys->Array.forEach(key => {
+      Dict.set(dict, key, JSON.Encode.bool(true))
+    })
+    dict->JSON.Encode.object
   })
 }
 
@@ -214,7 +214,7 @@ module FormSpy = {
 }
 
 @module("react-final-form")
-external useFormState: Js.Nullable.t<Js.Json.t> => formState = "useFormState"
+external useFormState: Js.Nullable.t<JSON.t> => formState = "useFormState"
 
 @module("react-final-form")
 external useForm: unit => formApi = "useForm"
@@ -226,8 +226,8 @@ type useFieldOption
 
 @obj
 external makeUseFieldOption: (
-  ~format: (. ~value: Js.Json.t, ~name: string) => Js.Json.t=?,
-  ~parse: (. ~value: Js.Json.t, ~name: string) => Js.Json.t=?,
+  ~format: (. ~value: JSON.t, ~name: string) => JSON.t=?,
+  ~parse: (. ~value: JSON.t, ~name: string) => JSON.t=?,
   unit,
 ) => useFieldOption = ""
 
@@ -235,7 +235,7 @@ external makeUseFieldOption: (
 external useFieldWithOptions: (string, useFieldOption) => fieldRenderProps = "useField"
 
 let makeFakeInput = (
-  ~value=Js.Json.null,
+  ~value=JSON.Encode.null,
   ~onChange=_ev => (),
   ~onBlur=_ev => (),
   ~onFocus=_ev => (),
diff --git a/src/libraries/SankeyHighcharts.res b/src/libraries/SankeyHighcharts.res
index fb6fb4fb3..a83c54d80 100644
--- a/src/libraries/SankeyHighcharts.res
+++ b/src/libraries/SankeyHighcharts.res
@@ -42,7 +42,7 @@ type series = {
   "nodes": array<node>,
   "nodeWidth": int,
   "minLinkWidth": int,
-  "dataLabels": Js.Json.t,
+  "dataLabels": JSON.t,
   "connectEnds": bool,
 }
 
@@ -50,7 +50,7 @@ type credits = {"enabled": bool}
 type chart = {"height": int, "backgroundColor": string}
 type options = {
   title: title,
-  series: array<Js.Json.t>,
+  series: array<JSON.t>,
   chart: chart,
   credits: credits,
   tooltip: {
@@ -72,10 +72,10 @@ external highchartsSankey: highcharts => unit = "default"
 
 module SankeyReact = {
   @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: Js.Json.t=?) => React.element = "default"
+  external make: (~highcharts: highcharts, ~options: JSON.t=?) => React.element = "default"
 }
 
 module SankeyReactJsonOption = {
   @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: Js.Json.t=?) => React.element = "default"
+  external make: (~highcharts: highcharts, ~options: JSON.t=?) => React.element = "default"
 }
diff --git a/src/libraries/Window.res b/src/libraries/Window.res
index 62c94f2cf..4f7290e5c 100644
--- a/src/libraries/Window.res
+++ b/src/libraries/Window.res
@@ -21,7 +21,7 @@ external addEventListener3: (string, listener<'ev>, bool) => unit = "addEventLis
 external removeEventListener: (string, listener<'ev>) => unit = "removeEventListener"
 
 @val @scope("window")
-external postMessage: (Js.Json.t, string) => unit = "postMessage"
+external postMessage: (JSON.t, string) => unit = "postMessage"
 
 @val @scope("window")
 external checkLoadHyper: option<ReactHyperJs.hyperloader> = "Hyper"
@@ -33,16 +33,16 @@ type rec selectionObj = {\"type": string}
 @val @scope("window") external getSelection: unit => selectionObj = "getSelection"
 
 @val @scope("window")
-external navigator: Js.Json.t = "navigator"
+external navigator: JSON.t = "navigator"
 
 @val @scope("window")
-external connectorWasmInit: 'a => Js.Promise.t<Js.Json.t> = "init"
+external connectorWasmInit: 'a => Js.Promise.t<JSON.t> = "init"
 
 @val @scope("window")
-external getConnectorConfig: string => Js.Json.t = "getConnectorConfig"
+external getConnectorConfig: string => JSON.t = "getConnectorConfig"
 
 @val @scope("window")
-external getPayoutConnectorConfig: string => Js.Json.t = "getPayoutConnectorConfig"
+external getPayoutConnectorConfig: string => JSON.t = "getPayoutConnectorConfig"
 
 @val @scope("window")
 external getThreeDsKeys: unit => array<string> = "getThreeDsKeys"
@@ -63,17 +63,17 @@ external getAllConnectors: unit => array<string> = "getAllConnectors"
 external getVariantValues: string => array<string> = "getVariantValues"
 
 @val @scope("window")
-external getDescriptionCategory: unit => Js.Json.t = "getDescriptionCategory"
+external getDescriptionCategory: unit => JSON.t = "getDescriptionCategory"
 
 @val @scope("window")
 open ConnectorTypes
-external getRequestPayload: (wasmRequest, wasmExtraPayload) => Js.Json.t = "getRequestPayload"
+external getRequestPayload: (wasmRequest, wasmExtraPayload) => JSON.t = "getRequestPayload"
 
 @val @scope("window")
-external getResponsePayload: 'a => Js.Json.t = "getResponsePayload"
+external getResponsePayload: 'a => JSON.t = "getResponsePayload"
 
 @val @scope("window")
-external getParsedJson: string => Js.Json.t = "getParsedJson"
+external getParsedJson: string => JSON.t = "getParsedJson"
 
 @val @scope("window") external innerWidth: int = "innerWidth"
 @val @scope("window") external innerHeight: int = "innerHeight"
diff --git a/src/screens/HyperSwitch/APIUtils/APIUtils.res b/src/screens/HyperSwitch/APIUtils/APIUtils.res
index 201588178..ab1b80869 100644
--- a/src/screens/HyperSwitch/APIUtils/APIUtils.res
+++ b/src/screens/HyperSwitch/APIUtils/APIUtils.res
@@ -1,7 +1,7 @@
 open HSLocalStorage
 open LogicUtils
 open APIUtilsTypes
-exception JsonException(Js.Json.t)
+exception JsonException(JSON.t)
 
 let getURL = (
   ~entityName: entityName,
@@ -220,7 +220,7 @@ let handleLogout = async (
     ~bodyStr: string=?,
     ~bodyFormData: option<Fetch.formData>=?,
     ~headers: Dict.t<string>=?,
-    ~bodyHeader: Dict.t<Js.Json.t>=?,
+    ~bodyHeader: Dict.t<JSON.t>=?,
     ~method_: Fetch.requestMethod,
     ~authToken: option<string>=?,
     ~requestId: string=?,
@@ -251,7 +251,7 @@ let responseHandler = async (
   let json = try {
     await res->Fetch.Response.json
   } catch {
-  | _ => Js.Json.null
+  | _ => JSON.Encode.null
   }
 
   let responseStatus = res->Fetch.Response.status
@@ -260,7 +260,7 @@ let responseHandler = async (
   | 200 => json
   | _ => {
       let errorDict = json->getDictFromJsonObject->getObj("error", Dict.make())
-      let errorStringifiedJson = errorDict->Js.Json.object_->Js.Json.stringify
+      let errorStringifiedJson = errorDict->JSON.Encode.object->JSON.stringify
 
       //TODO:-
       // errorCodes to be handled
@@ -415,7 +415,7 @@ let useUpdateMethod = (~showErrorToast=true, ()) => {
       let res = await fetchApi(
         url,
         ~method_=method,
-        ~bodyStr=body->Js.Json.stringify,
+        ~bodyStr=body->JSON.stringify,
         ~bodyFormData,
         ~headers,
         (),
diff --git a/src/screens/HyperSwitch/Analytics/Analytics.res b/src/screens/HyperSwitch/Analytics/Analytics.res
index 0501ea0cd..badd2a778 100644
--- a/src/screens/HyperSwitch/Analytics/Analytics.res
+++ b/src/screens/HyperSwitch/Analytics/Analytics.res
@@ -14,9 +14,7 @@ module BaseTableComponent = {
     ~newAllCols: array<'colType>,
     ~colMapper as _: 'colType => string,
     ~tableEntity: EntityType.entityType<'colType, 't>,
-    ~tableGlobalFilter as _: option<
-      (array<Js.Nullable.t<'t>>, Js.Json.t) => array<Js.Nullable.t<'t>>,
-    >,
+    ~tableGlobalFilter as _: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
     ~activeTab as _,
   ) => {
     open DynamicTableUtils
@@ -96,7 +94,7 @@ module TableWrapper = {
     ~filterKeys,
     ~activeTab,
     ~defaultSort,
-    ~getTable: Js.Json.t => array<'t>,
+    ~getTable: JSON.t => array<'t>,
     ~colMapper: 'colType => string,
     ~tableEntity: EntityType.entityType<'colType, 't>,
     ~deltaMetrics: array<string>,
@@ -104,7 +102,7 @@ module TableWrapper = {
     ~tableUpdatedHeading as _: option<
       (~item: option<'t>, ~dateObj: option<AnalyticsUtils.prevDates>, 'colType) => Table.header,
     >,
-    ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, Js.Json.t) => array<Js.Nullable.t<'t>>>,
+    ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
     ~moduleName,
     ~weeklyTableMetricsCols,
     ~distributionArray=None,
@@ -147,10 +145,10 @@ module TableWrapper = {
         ->Belt.Array.keepMap(entry => {
           let (key, value) = entry
           if allFilterKeys->Array.includes(key) {
-            switch value->Js.Json.classify {
-            | JSONString(str) => `${key}=${str}`->Some
-            | JSONNumber(num) => `${key}=${num->String.make}`->Some
-            | JSONArray(arr) => `${key}=[${arr->String.make}]`->Some
+            switch value->JSON.Classify.classify {
+            | String(str) => `${key}=${str}`->Some
+            | Number(num) => `${key}=${num->String.make}`->Some
+            | Array(arr) => `${key}=[${arr->String.make}]`->Some
             | _ => None
             }
           } else {
@@ -170,7 +168,7 @@ module TableWrapper = {
         filterKeys->Array.includes(key) ? Some((key, value)) : None
       })
       ->Dict.fromArray
-      ->Js.Json.object_
+      ->JSON.Encode.object
       ->Some
     }, [topFiltersToSearchParam])
 
@@ -221,9 +219,9 @@ module TableWrapper = {
             )
           }
         })
-        dataDict->Js.Json.object_
+        dataDict->JSON.Encode.object
       })
-      ->Js.Json.array
+      ->JSON.Encode.array
       ->getTable
       ->Array.map(Js.Nullable.return)
     }
@@ -336,25 +334,28 @@ module TableWrapper = {
 
     let timeRange =
       [
-        ("startTime", startTimeFromUrl->Js.Json.string),
-        ("endTime", endTimeFromUrl->Js.Json.string),
+        ("startTime", startTimeFromUrl->JSON.Encode.string),
+        ("endTime", endTimeFromUrl->JSON.Encode.string),
       ]->Dict.fromArray
 
-    let filters = filterValueFromUrl->Option.getOr(Dict.make()->Js.Json.object_)
+    let filters = filterValueFromUrl->Option.getOr(Dict.make()->JSON.Encode.object)
 
     let defaultFilters =
       [
-        ("timeRange", timeRange->Js.Json.object_),
+        ("timeRange", timeRange->JSON.Encode.object),
         ("filters", filters),
-        ("source", "BATCH"->Js.Json.string),
+        ("source", "BATCH"->JSON.Encode.string),
       ]->Dict.fromArray
     let dict =
       [
-        ("activeTab", activeTab->Option.getOr([])->Array.map(Js.Json.string)->Js.Json.array),
-        ("filter", defaultFilters->Js.Json.object_),
+        (
+          "activeTab",
+          activeTab->Option.getOr([])->Array.map(JSON.Encode.string)->JSON.Encode.array,
+        ),
+        ("filter", defaultFilters->JSON.Encode.object),
       ]->Dict.fromArray
 
-    setDefaultFilter(._ => dict->Js.Json.object_->Js.Json.stringify)
+    setDefaultFilter(._ => dict->JSON.Encode.object->JSON.stringify)
 
     showTable
       ? <>
@@ -392,7 +393,7 @@ module TabDetails = {
     ~chartEntity: DynamicChart.entity,
     ~activeTab,
     ~defaultSort: string,
-    ~getTable: Js.Json.t => array<'t>,
+    ~getTable: JSON.t => array<'t>,
     ~colMapper: 'colType => string,
     ~distributionArray,
     ~tableEntity: option<EntityType.entityType<'colType, 't>>,
@@ -401,7 +402,7 @@ module TabDetails = {
     ~tableUpdatedHeading: option<
       (~item: option<'t>, ~dateObj: option<AnalyticsUtils.prevDates>, 'colType) => Table.header,
     >,
-    ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, Js.Json.t) => array<Js.Nullable.t<'t>>>,
+    ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
     ~moduleName,
     ~updateUrl: Dict.t<string> => unit,
     ~weeklyTableMetricsCols,
@@ -486,10 +487,10 @@ let make = (
   ~defaultSort: string,
   ~tabKeys: array<string>,
   ~tabValues: array<DynamicTabs.tab>,
-  ~initialFilters: Js.Json.t => array<EntityType.initialFilters<'t>>,
-  ~initialFixedFilters: Js.Json.t => array<EntityType.initialFilters<'t>>,
-  ~options: Js.Json.t => array<EntityType.optionType<'t>>,
-  ~getTable: Js.Json.t => array<'a>,
+  ~initialFilters: JSON.t => array<EntityType.initialFilters<'t>>,
+  ~initialFixedFilters: JSON.t => array<EntityType.initialFilters<'t>>,
+  ~options: JSON.t => array<EntityType.optionType<'t>>,
+  ~getTable: JSON.t => array<'a>,
   ~colMapper: 'colType => string,
   ~tableEntity: option<EntityType.entityType<'colType, 't>>=?,
   ~deltaMetrics: array<string>,
@@ -499,7 +500,7 @@ let make = (
   ~tableUpdatedHeading: option<
     (~item: option<'t>, ~dateObj: option<AnalyticsUtils.prevDates>, 'colType) => Table.header,
   >=?,
-  ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, Js.Json.t) => array<Js.Nullable.t<'t>>>=?,
+  ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>=?,
   ~moduleName: string,
   ~weeklyTableMetricsCols=?,
   ~distributionArray=None,
@@ -606,7 +607,7 @@ let make = (
     setFilterDataJson(_ => None)
     if startTimeVal->isStringNonEmpty && endTimeVal->isStringNonEmpty {
       try {
-        updateDetails(filterUri, filterBody->Js.Json.object_, Post, ())
+        updateDetails(filterUri, filterBody->JSON.Encode.object, Post, ())
         ->thenResolve(json => setFilterDataJson(_ => json->Some))
         ->catch(_ => resolve())
         ->ignore
@@ -615,8 +616,8 @@ let make = (
       }
     }
     None
-  }, (startTimeVal, endTimeVal, filterBody->Js.Json.object_->Js.Json.stringify))
-  let filterData = filterDataJson->Option.getOr(Dict.make()->Js.Json.object_)
+  }, (startTimeVal, endTimeVal, filterBody->JSON.Encode.object->JSON.stringify))
+  let filterData = filterDataJson->Option.getOr(Dict.make()->JSON.Encode.object)
 
   let activeTab = React.useMemo1(() => {
     Some(
@@ -652,8 +653,8 @@ let make = (
               let dim = dimension->getDictFromJsonObject->getString("dimension", "")
               filteredDims->Array.includes(dim)->not
             })
-            ->Js.Json.array
-          [("queryData", queryData)]->Dict.fromArray->Js.Json.object_
+            ->JSON.Encode.array
+          [("queryData", queryData)]->Dict.fromArray->JSON.Encode.object
         }
       | _ => filterData
       }
diff --git a/src/screens/HyperSwitch/Analytics/DownloadReportModal.res b/src/screens/HyperSwitch/Analytics/DownloadReportModal.res
index 1f9bf33e5..93233f997 100644
--- a/src/screens/HyperSwitch/Analytics/DownloadReportModal.res
+++ b/src/screens/HyperSwitch/Analytics/DownloadReportModal.res
@@ -1,6 +1,6 @@
 type lteGte = {
-  gte: Js.Json.t,
-  lte: Js.Json.t,
+  gte: JSON.t,
+  lte: JSON.t,
 }
 
 type dateCreated = {dateCreated: lteGte}
@@ -8,8 +8,8 @@ type dateCreated = {dateCreated: lteGte}
 type filters = {filters: dateCreated}
 
 type startAndEndTime = {
-  startTime: Js.Json.t,
-  endTime: Js.Json.t,
+  startTime: JSON.t,
+  endTime: JSON.t,
 }
 
 type timeRange = {timeRange: startAndEndTime, dimensions: array<string>}
@@ -65,8 +65,8 @@ let make = (~reportModal, ~setReportModal, ~entityName) => {
   let initialValues = {
     filters: {
       dateCreated: {
-        gte: getPreviousDate()->Js.Json.string,
-        lte: Js.Date.now()->Js.Date.fromFloat->Js.Date.toISOString->Js.Json.string,
+        gte: getPreviousDate()->JSON.Encode.string,
+        lte: Js.Date.now()->Js.Date.fromFloat->Js.Date.toISOString->JSON.Encode.string,
       },
     },
   }->Identity.genericTypeToJson
diff --git a/src/screens/HyperSwitch/Analytics/ErrorReasons.res b/src/screens/HyperSwitch/Analytics/ErrorReasons.res
index 247c9fdd5..7475954be 100644
--- a/src/screens/HyperSwitch/Analytics/ErrorReasons.res
+++ b/src/screens/HyperSwitch/Analytics/ErrorReasons.res
@@ -28,7 +28,7 @@ let tableItemToObjMapper: 'a => errorObject = dict => {
   }
 }
 
-let getObjects: Js.Json.t => array<errorObject> = json => {
+let getObjects: JSON.t => array<errorObject> = json => {
   open LogicUtils
   json
   ->LogicUtils.getArrayFromJson([])
diff --git a/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res b/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
index 1782f4cc9..5b170c3d3 100644
--- a/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
+++ b/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
@@ -9,7 +9,7 @@ let getQueryData = json => {
   json->getDictFromJsonObject->getArrayFromDict("queryData", [])
 }
 
-let options: Js.Json.t => array<EntityType.optionType<'t>> = json => {
+let options: JSON.t => array<EntityType.optionType<'t>> = json => {
   open LogicUtils
   json
   ->getDictFromJsonObject
@@ -72,11 +72,7 @@ let filterByData = (txnArr, value) => {
       ->Array.map(item => {
         let (_, value) = item
 
-        value
-        ->Js.Json.decodeString
-        ->Option.getOr("")
-        ->String.toLowerCase
-        ->String.includes(searchText)
+        value->JSON.Decode.string->Option.getOr("")->String.toLowerCase->String.includes(searchText)
       })
       ->Array.reduce(false, (acc, item) => item || acc)
     if valueArr {
@@ -193,10 +189,10 @@ module NoData = {
 let generateTablePayload = (
   ~startTimeFromUrl: string,
   ~endTimeFromUrl: string,
-  ~filterValueFromUrl: option<Js.Json.t>,
+  ~filterValueFromUrl: option<JSON.t>,
   ~currenltySelectedTab: option<array<string>>,
   ~tableMetrics: array<string>,
-  ~distributionArray: option<array<Js.Json.t>>,
+  ~distributionArray: option<array<JSON.t>>,
   ~deltaMetrics: array<string>,
   ~deltaPrefixArr: array<string>,
   ~isIndustry: bool,
@@ -308,6 +304,6 @@ let generateTablePayload = (
     tableBodyWithNonDeltaMetrix->Array.concatMany([tableBodyWithDeltaMetrix, tableIndustryPayload])
 
   let tableBody =
-    tableBodyValues->Array.concat(deltaPayload)->Array.map(Js.Json.object_)->Js.Json.array
+    tableBodyValues->Array.concat(deltaPayload)->Array.map(JSON.Encode.object)->JSON.Encode.array
   tableBody
 }
diff --git a/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res b/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
index cf7d2b718..a126f9485 100644
--- a/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
+++ b/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
@@ -127,12 +127,12 @@ module SystemMetricsInsights = {
     let singleStatBodyMake = (singleStatBodyEntity: singleStatBodyEntity) => {
       let filters =
         [
-          ("api_name", ["PaymentsConfirm"->Js.Json.string]->Js.Json.array),
-          ("status_code", [200.0->Js.Json.number]->Js.Json.array),
-          ("flow_type", ["Payment"->Js.Json.string]->Js.Json.array),
+          ("api_name", ["PaymentsConfirm"->JSON.Encode.string]->JSON.Encode.array),
+          ("status_code", [200.0->JSON.Encode.float]->JSON.Encode.array),
+          ("flow_type", ["Payment"->JSON.Encode.string]->JSON.Encode.array),
         ]
         ->Dict.fromArray
-        ->Js.Json.object_
+        ->JSON.Encode.object
 
       [
         AnalyticsUtils.getFilterRequestBody(
@@ -147,10 +147,10 @@ module SystemMetricsInsights = {
           ~granularity=singleStatBodyEntity.granularity,
           ~prefix=singleStatBodyEntity.prefix,
           (),
-        )->Js.Json.object_,
+        )->JSON.Encode.object,
       ]
-      ->Js.Json.array
-      ->Js.Json.stringify
+      ->JSON.Encode.array
+      ->JSON.stringify
     }
 
     let getStatEntity: 'a => DynamicSingleStat.entityType<'colType, 't, 't2> = metrics => {
@@ -172,7 +172,7 @@ module SystemMetricsInsights = {
     }
 
     let metrics = ["latency"]->Array.map(key => {
-      [("name", key->Js.Json.string)]->Dict.fromArray->Js.Json.object_
+      [("name", key->JSON.Encode.string)]->Dict.fromArray->JSON.Encode.object
     })
 
     let singleStatEntity = getStatEntity(metrics)
@@ -208,7 +208,7 @@ module OverviewInfo = {
         let generateSampleDataUrl = getURL(~entityName=GENERATE_SAMPLE_DATA, ~methodType=Post, ())
         let _ = await updateDetails(
           generateSampleDataUrl,
-          [("record", 50.0->Js.Json.number)]->Dict.fromArray->Js.Json.object_,
+          [("record", 50.0->JSON.Encode.float)]->Dict.fromArray->JSON.Encode.object,
           Post,
           (),
         )
diff --git a/src/screens/HyperSwitch/Analytics/HomePageOverview/PaymentsOverview/PaymentOverview.res b/src/screens/HyperSwitch/Analytics/HomePageOverview/PaymentsOverview/PaymentOverview.res
index f256ba43b..eaa66fc0d 100644
--- a/src/screens/HyperSwitch/Analytics/HomePageOverview/PaymentsOverview/PaymentOverview.res
+++ b/src/screens/HyperSwitch/Analytics/HomePageOverview/PaymentsOverview/PaymentOverview.res
@@ -8,7 +8,7 @@ let make = () => {
     "payment_count",
     "payment_success_count",
   ]->Array.map(key => {
-    [("name", key->Js.Json.string)]->Dict.fromArray->Js.Json.object_
+    [("name", key->JSON.Encode.string)]->Dict.fromArray->JSON.Encode.object
   })
 
   let singleStatEntity = PaymentOverviewUtils.getSingleStatEntity(metrics)
diff --git a/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res b/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res
index 81445543c..9be27ab43 100644
--- a/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res
+++ b/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res
@@ -66,13 +66,13 @@ let getWeeklySR = dict => {
 
 let distribution =
   [
-    ("distributionFor", "payment_error_message"->Js.Json.string),
-    ("distributionCardinality", "TOP_5"->Js.Json.string),
+    ("distributionFor", "payment_error_message"->JSON.Encode.string),
+    ("distributionCardinality", "TOP_5"->JSON.Encode.string),
   ]
   ->Dict.fromArray
-  ->Js.Json.object_
+  ->JSON.Encode.object
 
-let tableItemToObjMapper: Dict.t<Js.Json.t> => paymentTableType = dict => {
+let tableItemToObjMapper: Dict.t<JSON.t> => paymentTableType = dict => {
   let parseErrorReasons = dict => {
     dict
     ->getArrayFromDict(PaymentErrorMessage->colMapper, [])
@@ -214,7 +214,7 @@ let getCell = (paymentTable, colType): Table.cell => {
   }
 }
 
-let getPaymentTable: Js.Json.t => array<paymentTableType> = json => {
+let getPaymentTable: JSON.t => array<paymentTableType> = json => {
   json
   ->LogicUtils.getArrayFromJson([])
   ->Array.map(item => {
@@ -261,7 +261,7 @@ let singleStateSeriesInitialValue = {
 
 let singleStateItemToObjMapper = json => {
   json
-  ->Js.Json.decodeObject
+  ->JSON.Decode.object
   ->Option.map(dict => {
     payment_success_rate: dict->getFloat("payment_success_rate", 0.0),
     payment_count: dict->getInt("payment_count", 0),
@@ -279,7 +279,7 @@ let singleStateItemToObjMapper = json => {
 
 let singleStateSeriesItemToObjMapper = json => {
   json
-  ->Js.Json.decodeObject
+  ->JSON.Decode.object
   ->Option.map(dict => {
     payment_success_rate: dict->getFloat("payment_success_rate", 0.0)->setPrecision(),
     payment_count: dict->getInt("payment_count", 0),
diff --git a/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalytics.res b/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalytics.res
index b67ca625d..ddd8ae40d 100644
--- a/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalytics.res
+++ b/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalytics.res
@@ -32,8 +32,8 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Loading)
       let refundUrl = getURL(~entityName=REFUNDS, ~methodType=Post, ~id=Some("refund-post"), ())
       let body = Dict.make()
-      body->Dict.set("limit", 100->Int.toFloat->Js.Json.number)
-      let refundDetails = await updateDetails(refundUrl, body->Js.Json.object_, Post, ())
+      body->Dict.set("limit", 100->Int.toFloat->JSON.Encode.float)
+      let refundDetails = await updateDetails(refundUrl, body->JSON.Encode.object, Post, ())
       let data = refundDetails->getDictFromJsonObject->getArrayFromDict("data", [])
 
       if data->Array.length < 1 {
diff --git a/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalyticsEntity.res b/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalyticsEntity.res
index 4d0a7b9c5..943446fe2 100644
--- a/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalyticsEntity.res
+++ b/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalyticsEntity.res
@@ -96,7 +96,7 @@ let getCell = (refundTable: refundTableType, colType: refundColType): Table.cell
   }
 }
 
-let getRefundTable: Js.Json.t => array<refundTableType> = json => {
+let getRefundTable: JSON.t => array<refundTableType> = json => {
   json
   ->LogicUtils.getArrayFromJson([])
   ->Array.map(item => {
@@ -133,7 +133,7 @@ let singleStateSeriesInitialValue = {
 
 let singleStateItemToObjMapper = json => {
   json
-  ->Js.Json.decodeObject
+  ->JSON.Decode.object
   ->Option.map(dict => {
     refund_success_rate: dict->getFloat("refund_success_rate", 0.0),
     refund_count: dict->getInt("refund_count", 0),
@@ -147,7 +147,7 @@ let singleStateItemToObjMapper = json => {
 
 let singleStateSeriesItemToObjMapper = json => {
   json
-  ->Js.Json.decodeObject
+  ->JSON.Decode.object
   ->Option.map(dict => {
     refund_success_rate: dict->getFloat("refund_success_rate", 0.0)->setPrecision(),
     refund_count: dict->getInt("refund_count", 0),
diff --git a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
index 2ba23e5d3..67e44b541 100644
--- a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
+++ b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
@@ -98,12 +98,12 @@ module HSiwtchPaymentConfirmLatency = {
     let singleStatBodyMake = (singleStatBodyEntity: singleStatBodyEntity, flowType) => {
       let filters =
         [
-          ("api_name", ["PaymentsConfirm"->Js.Json.string]->Js.Json.array),
-          ("status_code", [200.0->Js.Json.number]->Js.Json.array),
-          ("flow_type", [flowType->Js.Json.string]->Js.Json.array),
+          ("api_name", ["PaymentsConfirm"->JSON.Encode.string]->JSON.Encode.array),
+          ("status_code", [200.0->JSON.Encode.float]->JSON.Encode.array),
+          ("flow_type", [flowType->JSON.Encode.string]->JSON.Encode.array),
         ]
         ->Dict.fromArray
-        ->Js.Json.object_
+        ->JSON.Encode.object
 
       [
         AnalyticsUtils.getFilterRequestBody(
@@ -118,8 +118,8 @@ module HSiwtchPaymentConfirmLatency = {
           ~granularity=singleStatBodyEntity.granularity,
           ~prefix=singleStatBodyEntity.prefix,
           (),
-        )->Js.Json.object_,
-      ]->Js.Json.array
+        )->JSON.Encode.object,
+      ]->JSON.Encode.array
     }
 
     let parseJson = json => {
@@ -128,7 +128,7 @@ module HSiwtchPaymentConfirmLatency = {
       ->getJsonObjectFromDict("queryData")
       ->getArrayFromJson([])
       ->Array.get(0)
-      ->Option.getOr(Js.Json.object_(Dict.make()))
+      ->Option.getOr(JSON.Encode.object(Dict.make()))
       ->getDictFromJsonObject
       ->getInt("latency", 0)
     }
@@ -223,7 +223,7 @@ module SystemMetricsAnalytics = {
     ~endTimeFilterKey: string,
     ~chartEntity: nestedEntityType,
     ~filteredTabKeys: array<string>,
-    ~initialFixedFilters: Js.Json.t => array<EntityType.initialFilters<'t>>,
+    ~initialFixedFilters: JSON.t => array<EntityType.initialFilters<'t>>,
     ~singleStatEntity: DynamicSingleStat.entityType<'singleStatColType, 'b, 'b2>,
     ~filterUri,
     ~moduleName: string,
@@ -275,7 +275,7 @@ module SystemMetricsAnalytics = {
       setFilterDataJson(_ => None)
       if startTimeVal->isStringNonEmpty && endTimeVal->isStringNonEmpty {
         try {
-          updateDetails(filterUri, filterBody->Js.Json.object_, Post, ())
+          updateDetails(filterUri, filterBody->JSON.Encode.object, Post, ())
           ->thenResolve(json => setFilterDataJson(_ => json->Some))
           ->catch(_ => resolve())
           ->ignore
@@ -284,8 +284,8 @@ module SystemMetricsAnalytics = {
         }
       }
       None
-    }, (startTimeVal, endTimeVal, filterBody->Js.Json.object_->Js.Json.stringify))
-    let filterData = filterDataJson->Option.getOr(Dict.make()->Js.Json.object_)
+    }, (startTimeVal, endTimeVal, filterBody->JSON.Encode.object->JSON.stringify))
+    let filterData = filterDataJson->Option.getOr(Dict.make()->JSON.Encode.object)
 
     <UIUtils.RenderIf condition={getModuleFilters->Dict.toArray->Array.length > 0}>
       {switch chartEntity1 {
diff --git a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalyticsUtils.res b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalyticsUtils.res
index a9eee7eac..040a3ea44 100644
--- a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalyticsUtils.res
+++ b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalyticsUtils.res
@@ -19,7 +19,7 @@ let singleStateSeriesInitialValue = {
 
 let singleStateItemToObjMapper = json => {
   json
-  ->Js.Json.decodeObject
+  ->JSON.Decode.object
   ->Option.map(dict => {
     latency: dict->getFloat("latency", 0.0),
     api_count: dict->getInt("api_count", 0),
@@ -32,7 +32,7 @@ let singleStateItemToObjMapper = json => {
 
 let singleStateSeriesItemToObjMapper = json => {
   json
-  ->Js.Json.decodeObject
+  ->JSON.Decode.object
   ->Option.map(dict => {
     latency: dict->getFloat("latency", 0.0),
     api_count: dict->getInt("api_count", 0),
diff --git a/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalyticsEntity.res b/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalyticsEntity.res
index f9d223b8c..75b478a33 100644
--- a/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalyticsEntity.res
+++ b/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalyticsEntity.res
@@ -23,7 +23,7 @@ let singleStateSeriesInitialValue = {
 
 let singleStatItemToObjMapper = json => {
   json
-  ->Js.Json.decodeObject
+  ->JSON.Decode.object
   ->Option.map(dict => {
     payment_attempts: dict->getInt("payment_attempts", 0),
     sdk_rendered_count: dict->getInt("sdk_rendered_count", 0),
@@ -36,7 +36,7 @@ let singleStatItemToObjMapper = json => {
 
 let singleStateSeriesItemToObjMapper = json => {
   json
-  ->Js.Json.decodeObject
+  ->JSON.Decode.object
   ->Option.map(dict => {
     payment_attempts: dict->getInt("payment_attempts", 0),
     time_series: dict->getString("time_bucket", ""),
diff --git a/src/screens/HyperSwitch/Connectors/ConnectPayPalFlow/PayPalFlowUtils.res b/src/screens/HyperSwitch/Connectors/ConnectPayPalFlow/PayPalFlowUtils.res
index e1aff02f8..50c75afb8 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectPayPalFlow/PayPalFlowUtils.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectPayPalFlow/PayPalFlowUtils.res
@@ -126,13 +126,13 @@ let generateConnectorPayloadPayPal = (
   open ConnectorUtils
   let initialValues =
     [
-      ("profile_id", profileId->Js.Json.string),
-      ("connector_name", connector->String.toLowerCase->Js.Json.string),
-      ("connector_type", "payment_processor"->Js.Json.string),
-      ("disabled", true->Js.Json.boolean),
-      ("test_mode", true->Js.Json.boolean),
-      ("status", "inactive"->Js.Json.string),
-      ("connector_label", connectorLabel->Js.Json.string),
+      ("profile_id", profileId->JSON.Encode.string),
+      ("connector_name", connector->String.toLowerCase->JSON.Encode.string),
+      ("connector_type", "payment_processor"->JSON.Encode.string),
+      ("disabled", true->JSON.Encode.bool),
+      ("test_mode", true->JSON.Encode.bool),
+      ("status", "inactive"->JSON.Encode.string),
+      ("connector_label", connectorLabel->JSON.Encode.string),
     ]->LogicUtils.getJsonFromArrayOfJson
 
   generateInitialValuesDict(
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
index 36a6ec4d2..4c400e67f 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
@@ -28,9 +28,9 @@ let make = (~setCurrentStep, ~setInitialValues, ~initialValues, ~isUpdateFlow, ~
   React.useEffect1(() => {
     if !isUpdateFlow {
       let defaultJsonOnNewConnector =
-        [("profile_id", activeBusinessProfile.profile_id->Js.Json.string)]
+        [("profile_id", activeBusinessProfile.profile_id->JSON.Encode.string)]
         ->Dict.fromArray
-        ->Js.Json.object_
+        ->JSON.Encode.object
       setInitialValues(_ => defaultJsonOnNewConnector)
     }
     None
@@ -45,14 +45,14 @@ let make = (~setCurrentStep, ~setInitialValues, ~initialValues, ~isUpdateFlow, ~
         setScreenState(_ => Success)
         dict
       } else {
-        Dict.make()->Js.Json.object_
+        Dict.make()->JSON.Encode.object
       }
     } catch {
     | Js.Exn.Error(e) => {
         Js.log2("FAILED TO LOAD CONNECTOR CONFIG", e)
         let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
         setScreenState(_ => PageLoaderWrapper.Error(err))
-        Dict.make()->Js.Json.object_
+        Dict.make()->JSON.Encode.object
       }
     }
   }, [connector])
@@ -73,7 +73,7 @@ let make = (~setCurrentStep, ~setInitialValues, ~initialValues, ~isUpdateFlow, ~
     if !isUpdateFlow {
       initialValuesToDict->Dict.set(
         "connector_label",
-        `${connector}_${activeBusinessProfile.profile_name}`->Js.Json.string,
+        `${connector}_${activeBusinessProfile.profile_name}`->JSON.Encode.string,
       )
     }
     if (
@@ -81,10 +81,10 @@ let make = (~setCurrentStep, ~setInitialValues, ~initialValues, ~isUpdateFlow, ~
       ->getConnectorNameTypeFromString
       ->checkIsDummyConnector(featureFlagDetails.testProcessors) && !isUpdateFlow
     ) {
-      let apiKeyDict = [("api_key", "test_key"->Js.Json.string)]->Dict.fromArray
-      initialValuesToDict->Dict.set("connector_account_details", apiKeyDict->Js.Json.object_)
+      let apiKeyDict = [("api_key", "test_key"->JSON.Encode.string)]->Dict.fromArray
+      initialValuesToDict->Dict.set("connector_account_details", apiKeyDict->JSON.Encode.object)
 
-      initialValuesToDict->Js.Json.object_
+      initialValuesToDict->JSON.Encode.object
     } else {
       initialValues
     }
@@ -177,7 +177,7 @@ let make = (~setCurrentStep, ~setInitialValues, ~initialValues, ~isUpdateFlow, ~
     let valuesFlattenJson = values->JsonFlattenUtils.flattenObject(true)
     let profileId = valuesFlattenJson->LogicUtils.getString("profile_id", "")
     if profileId->String.length === 0 {
-      Dict.set(errors, "Profile Id", `Please select your business profile`->Js.Json.string)
+      Dict.set(errors, "Profile Id", `Please select your business profile`->JSON.Encode.string)
     }
 
     validateConnectorRequiredFields(
@@ -187,7 +187,7 @@ let make = (~setCurrentStep, ~setInitialValues, ~initialValues, ~isUpdateFlow, ~
       connectorMetaDataFields,
       connectorWebHookDetails,
       connectorLabelDetailField,
-      errors->Js.Json.object_,
+      errors->JSON.Encode.object,
     )
   }
 
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
index 0dabd1c5f..340cc8ce8 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
@@ -85,7 +85,7 @@ module ErrorValidation = {
         <div className="flex mr-2">
           <img className=imageStyle src={`${appPrefix}/icons/warning.svg`} alt="warning" />
         </div>
-        {React.string(err->Option.getOr(""->Js.Json.string)->getStringFromJson(""))}
+        {React.string(err->Option.getOr(""->JSON.Encode.string)->getStringFromJson(""))}
       </div>
     </UIUtils.RenderIf>
   }
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorHome.res b/src/screens/HyperSwitch/Connectors/ConnectorHome.res
index b1278e2b9..e242c85fe 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorHome.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorHome.res
@@ -61,7 +61,7 @@ let make = (~isPayoutFlow=false, ~showStepIndicator=true, ~showBreadCrumb=true)
   let connector = UrlUtils.useGetFilterDictFromUrl("")->LogicUtils.getString("name", "")
   let connectorID = url.path->List.toArray->Array.get(1)->Option.getOr("")
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Success)
-  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->Js.Json.object_)
+  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->JSON.Encode.object)
   let (currentStep, setCurrentStep) = React.useState(_ => ConnectorTypes.IntegFields)
   let fetchDetails = useGetMethod()
 
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res b/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
index 681669150..af1969471 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
@@ -13,9 +13,9 @@ let make = (
   open LogicUtils
   let _showAdvancedConfiguration = false
   let (paymentMethodsEnabled, setPaymentMethods) = React.useState(_ =>
-    Dict.make()->Js.Json.object_->getPaymentMethodEnabled
+    Dict.make()->JSON.Encode.object->getPaymentMethodEnabled
   )
-  let (metaData, setMetaData) = React.useState(_ => Dict.make()->Js.Json.object_)
+  let (metaData, setMetaData) = React.useState(_ => Dict.make()->JSON.Encode.object)
   let showToast = ToastState.useShowToast()
   let connectorID = initialValues->getDictFromJsonObject->getOptionString("merchant_connector_id")
   let (screenState, setScreenState) = React.useState(_ => Loading)
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
index 391bf005b..fbefd6eee 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
@@ -123,14 +123,14 @@ module ConnectorSummaryGrid = {
           setScreenState(_ => Success)
           dict
         } else {
-          Dict.make()->Js.Json.object_
+          Dict.make()->JSON.Encode.object
         }
       } catch {
       | Js.Exn.Error(e) => {
           Js.log2("FAILED TO LOAD CONNECTOR CONFIG", e)
           let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
           setScreenState(_ => PageLoaderWrapper.Error(err))
-          Dict.make()->Js.Json.object_
+          Dict.make()->JSON.Encode.object
         }
       }
     }, [connector])
@@ -250,7 +250,7 @@ let make = (
         isConnectorDisabled,
       )
       let url = getURL(~entityName=CONNECTOR, ~methodType=Post, ~id=Some(connectorID), ())
-      let _ = await updateDetails(url, disableConnectorPayload->Js.Json.object_, Post, ())
+      let _ = await updateDetails(url, disableConnectorPayload->JSON.Encode.object, Post, ())
       showToast(~message=`Successfully Saved the Changes`, ~toastType=ToastSuccess, ())
       RescriptReactRouter.push("/connectors")
     } catch {
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res b/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
index 37b943fcd..0e7bd249e 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
@@ -80,13 +80,13 @@ let getPaymentMethodTypes = dict => {
   }
 }
 
-let getPaymentMethodsEnabled: Dict.t<Js.Json.t> => paymentMethodEnabledType = dict => {
+let getPaymentMethodsEnabled: Dict.t<JSON.t> => paymentMethodEnabledType = dict => {
   open LogicUtils
   {
     payment_method: dict->getString("payment_method", ""),
     payment_method_types: dict
     ->Dict.get("payment_method_types")
-    ->Option.getOr(Dict.make()->Js.Json.object_)
+    ->Option.getOr(Dict.make()->JSON.Encode.object)
     ->getArrayDataFromJson(getPaymentMethodTypes),
   }
 }
@@ -114,7 +114,7 @@ let getProcessorPayloadType = dict => {
     disabled: dict->getBool("disabled", true),
     payment_methods_enabled: dict
     ->Dict.get("payment_methods_enabled")
-    ->Option.getOr(Dict.make()->Js.Json.object_)
+    ->Option.getOr(Dict.make()->JSON.Encode.object)
     ->getArrayDataFromJson(getPaymentMethodsEnabled),
     profile_id: dict->getString("profile_id", ""),
     merchant_connector_id: dict->getString("merchant_connector_id", ""),
@@ -208,7 +208,7 @@ let getCell = (connector: connectorPayload, colType): Table.cell => {
   }
 }
 
-let getArrayDataFromJson = (json, itemToObjMapper: Dict.t<Js.Json.t> => connectorPayload) => {
+let getArrayDataFromJson = (json, itemToObjMapper: Dict.t<JSON.t> => connectorPayload) => {
   json
   ->ConnectorUtils.getProcessorsListFromJson()
   ->Array.map(itemToObjMapper)
@@ -223,7 +223,7 @@ let sortPreviouslyConnectedList = arr => {
   Js.Array2.sortInPlaceWith(arr, comparatorFunction)
 }
 
-let getPreviouslyConnectedList: Js.Json.t => array<connectorPayload> = json => {
+let getPreviouslyConnectedList: JSON.t => array<connectorPayload> = json => {
   json->getArrayDataFromJson(getProcessorPayloadType)->sortPreviouslyConnectedList
 }
 
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorTypes.res b/src/screens/HyperSwitch/Connectors/ConnectorTypes.res
index b259a90cb..e52214de3 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorTypes.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorTypes.res
@@ -151,17 +151,17 @@ type paymentMethodConfig = {
 type wasmRequest = {
   payment_methods_enabled: array<paymentMethodEnabled>,
   connector: string,
-  metadata: Js.Json.t,
+  metadata: JSON.t,
 }
 
 type wasmExtraPayload = {
   profile_id: string,
   connector_type: string,
   connector_name: string,
-  connector_account_details: Js.Json.t,
+  connector_account_details: JSON.t,
   disabled: bool,
   test_mode: bool,
-  connector_webhook_details: option<Js.Json.t>,
+  connector_webhook_details: option<JSON.t>,
 }
 
 // This type are used for FRM configuration which need to moved to wasm
@@ -206,7 +206,7 @@ type connectorPayload = {
   disabled: bool,
   payment_methods_enabled: payment_methods_enabled,
   profile_id: string,
-  metadata?: Js.Json.t,
+  metadata?: JSON.t,
   merchant_connector_id: string,
   frm_configs?: array<frm_config>,
   status: string,
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorUIUtils/PaymentMethod.res b/src/screens/HyperSwitch/Connectors/ConnectorUIUtils/PaymentMethod.res
index 026b75495..e812b200e 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorUIUtils/PaymentMethod.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorUIUtils/PaymentMethod.res
@@ -36,9 +36,9 @@ module CardRenderer = {
 
     let paymentObj = paymentMethodsEnabled->getSelectedPaymentObj(paymentMethod)
     let standardProviders =
-      paymentObj.provider->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
+      paymentObj.provider->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
     let cardProviders =
-      paymentObj.card_provider->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
+      paymentObj.card_provider->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
 
     let checkPaymentMethodType = (
       obj: paymentMethodConfigType,
@@ -214,7 +214,7 @@ module PaymentMethodsRender = {
     <div className="flex flex-col gap-12">
       {keys
       ->Array.mapWithIndex((value, i) => {
-        let provider = pmts->getArrayFromDict(value, [])->Js.Json.array->getPaymentMethodMapper
+        let provider = pmts->getArrayFromDict(value, [])->JSON.Encode.array->getPaymentMethodMapper
 
         switch value->getPaymentMethodTypeFromString {
         | Credit | Debit =>
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
index 6747ce2b3..3d94fdb85 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
@@ -544,7 +544,7 @@ let itemProviderMapper = dict => {
   }
 }
 
-let getPaymentMethodMapper: Js.Json.t => array<paymentMethodConfigType> = json => {
+let getPaymentMethodMapper: JSON.t => array<paymentMethodConfigType> = json => {
   open LogicUtils
   getArrayDataFromJson(json, itemProviderMapper)
 }
@@ -554,15 +554,15 @@ let itemToObjMapper = dict => {
   {
     payment_method: dict->getString("payment_method", ""),
     payment_method_type: dict->getString("payment_method_type", ""),
-    provider: dict->getArrayFromDict("provider", [])->Js.Json.array->getPaymentMethodMapper,
+    provider: dict->getArrayFromDict("provider", [])->JSON.Encode.array->getPaymentMethodMapper,
     card_provider: dict
     ->getArrayFromDict("card_provider", [])
-    ->Js.Json.array
+    ->JSON.Encode.array
     ->getPaymentMethodMapper,
   }
 }
 
-let getPaymentMethodEnabled: Js.Json.t => array<paymentMethodEnabled> = json => {
+let getPaymentMethodEnabled: JSON.t => array<paymentMethodEnabled> = json => {
   open LogicUtils
   getArrayDataFromJson(json, itemToObjMapper)
 }
@@ -606,7 +606,7 @@ let ignoreFields = (json, id, fields) => {
       !(fields->Array.includes(key))
     })
     ->Dict.fromArray
-    ->Js.Json.object_
+    ->JSON.Encode.object
   }
 }
 
@@ -648,14 +648,16 @@ let addMethod = (paymentMethodsEnabled, paymentMethod, method) => {
     pmts->Array.forEach((val: paymentMethodEnabled) => {
       if val.payment_method_type->String.toLowerCase === paymentMethod->String.toLowerCase {
         val.card_provider
-        ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
+        ->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
         ->Array.push(method)
       }
     })
   | _ =>
     pmts->Array.forEach((val: paymentMethodEnabled) => {
       if val.payment_method_type->String.toLowerCase === paymentMethod->String.toLowerCase {
-        val.provider->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)->Array.push(method)
+        val.provider
+        ->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
+        ->Array.push(method)
       }
     })
   }
@@ -670,16 +672,16 @@ let removeMethod = (paymentMethodsEnabled, paymentMethod, method: paymentMethodC
       if val.payment_method_type->String.toLowerCase === paymentMethod->String.toLowerCase {
         let indexOfRemovalItem =
           val.card_provider
-          ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
+          ->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
           ->Array.map(ele => ele.payment_method_type)
           ->Array.indexOf(method.payment_method_type)
 
         val.card_provider
-        ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
+        ->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
         ->Array.splice(
           ~start=indexOfRemovalItem,
           ~remove=1,
-          ~insert=[]->Js.Json.array->getPaymentMethodMapper,
+          ~insert=[]->JSON.Encode.array->getPaymentMethodMapper,
         )
       }
     })
@@ -689,16 +691,16 @@ let removeMethod = (paymentMethodsEnabled, paymentMethod, method: paymentMethodC
       if val.payment_method_type->String.toLowerCase === paymentMethod->String.toLowerCase {
         let indexOfRemovalItem =
           val.provider
-          ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
+          ->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
           ->Array.map(ele => ele.payment_method_type)
           ->Array.indexOf(method.payment_method_type)
 
         val.provider
-        ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
+        ->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
         ->Array.splice(
           ~start=indexOfRemovalItem,
           ~remove=1,
-          ~insert=[]->Js.Json.array->getPaymentMethodMapper,
+          ~insert=[]->JSON.Encode.array->getPaymentMethodMapper,
         )
       }
     })
@@ -721,18 +723,22 @@ let generateInitialValuesDict = (
   let connectorAccountDetails =
     dict->getJsonObjectFromDict("connector_account_details")->getDictFromJsonObject
 
-  connectorAccountDetails->Dict.set("auth_type", bodyType->Js.Json.string)
+  connectorAccountDetails->Dict.set("auth_type", bodyType->JSON.Encode.string)
 
-  dict->Dict.set("connector_account_details", connectorAccountDetails->Js.Json.object_)
+  dict->Dict.set("connector_account_details", connectorAccountDetails->JSON.Encode.object)
 
-  dict->Dict.set("connector_name", connector->Js.Json.string)
+  dict->Dict.set("connector_name", connector->JSON.Encode.string)
   dict->Dict.set(
     "connector_type",
-    getConnectorType(connector->getConnectorNameTypeFromString, ~isPayoutFlow, ())->Js.Json.string,
+    getConnectorType(
+      connector->getConnectorNameTypeFromString,
+      ~isPayoutFlow,
+      (),
+    )->JSON.Encode.string,
   )
-  dict->Dict.set("disabled", dict->getBool("disabled", false)->Js.Json.boolean)
-  dict->Dict.set("test_mode", (isLiveMode ? false : true)->Js.Json.boolean)
-  dict->Dict.set("connector_label", dict->getString("connector_label", "")->Js.Json.string)
+  dict->Dict.set("disabled", dict->getBool("disabled", false)->JSON.Encode.bool)
+  dict->Dict.set("test_mode", (isLiveMode ? false : true)->JSON.Encode.bool)
+  dict->Dict.set("connector_label", dict->getString("connector_label", "")->JSON.Encode.string)
 
   let connectorWebHookDetails =
     dict->getJsonObjectFromDict("connector_webhook_details")->getDictFromJsonObject
@@ -740,17 +746,17 @@ let generateInitialValuesDict = (
   dict->Dict.set(
     "connector_webhook_details",
     connectorWebHookDetails->getOptionString("merchant_secret")->Option.isSome
-      ? connectorWebHookDetails->Js.Json.object_
-      : Js.Json.null,
+      ? connectorWebHookDetails->JSON.Encode.object
+      : JSON.Encode.null,
   )
 
-  dict->Js.Json.object_
+  dict->JSON.Encode.object
 }
 
 let getDisableConnectorPayload = (connectorType, previousConnectorState) => {
   [
-    ("connector_type", connectorType->Js.Json.string),
-    ("disabled", !previousConnectorState->Js.Json.boolean),
+    ("connector_type", connectorType->JSON.Encode.string),
+    ("disabled", !previousConnectorState->JSON.Encode.bool),
   ]->Dict.fromArray
 }
 
@@ -772,7 +778,7 @@ let getAuthKeyMapFromConnectorAccountFields = connectorAccountFields => {
   open LogicUtils
   open MapTypes
   let authKeyMap =
-    connectorAccountFields->getDictfromDict("auth_key_map")->Js.Json.object_->changeType
+    connectorAccountFields->getDictfromDict("auth_key_map")->JSON.Encode.object->changeType
   convertMapObjectToDict(authKeyMap)
 }
 let checkCashtoCodeFields = (keys, country, valuesFlattenJson) => {
@@ -823,7 +829,7 @@ let validateConnectorRequiredFields = (
     let _ = Js.Vector.filterInPlace((. val) => val == true, vector)
 
     if vector->Js.Vector.length === 0 {
-      Dict.set(newDict, "Currency", `Please enter currency`->Js.Json.string)
+      Dict.set(newDict, "Currency", `Please enter currency`->JSON.Encode.string)
     }
   } else {
     connectorAccountFields
@@ -833,7 +839,7 @@ let validateConnectorRequiredFields = (
       let errorKey = connectorAccountFields->getString(value, "")
       let value = valuesFlattenJson->getString(`connector_account_details.${value}`, "")
       if value->String.length === 0 {
-        Dict.set(newDict, key, `Please enter ${errorKey}`->Js.Json.string)
+        Dict.set(newDict, key, `Please enter ${errorKey}`->JSON.Encode.string)
       }
     })
   }
@@ -846,7 +852,7 @@ let validateConnectorRequiredFields = (
       let errorKey = connectorMetaDataFields->getString(fieldName, "")
       let value = valuesFlattenJson->getString(`metadata.${fieldName}`, "")
       if value->String.length === 0 && connector->getMetaDataRequiredFields(fieldName) {
-        Dict.set(newDict, key, `Please enter ${errorKey}`->Js.Json.string)
+        Dict.set(newDict, key, `Please enter ${errorKey}`->JSON.Encode.string)
       }
     }
   })
@@ -858,7 +864,7 @@ let validateConnectorRequiredFields = (
     let errorKey = connectorWebHookDetails->getString(fieldName, "")
     let value = valuesFlattenJson->getString(`connector_webhook_details.${fieldName}`, "")
     if value->String.length === 0 && connector->getWebHookRequiredFields(fieldName) {
-      Dict.set(newDict, key, `Please enter ${errorKey}`->Js.Json.string)
+      Dict.set(newDict, key, `Please enter ${errorKey}`->JSON.Encode.string)
     }
   })
   connectorLabelDetailField
@@ -867,10 +873,10 @@ let validateConnectorRequiredFields = (
     let errorKey = connectorLabelDetailField->getString(fieldName, "")
     let value = valuesFlattenJson->getString(fieldName, "")
     if value->String.length === 0 {
-      Dict.set(newDict, fieldName, `Please enter ${errorKey}`->Js.Json.string)
+      Dict.set(newDict, fieldName, `Please enter ${errorKey}`->JSON.Encode.string)
     }
   })
-  newDict->Js.Json.object_
+  newDict->JSON.Encode.object
 }
 
 let getPlaceHolder = (connector: connectorName, fieldName, label) => {
@@ -902,7 +908,7 @@ let getConnectorFields = connectorDetails => {
   let connectorWebHookDetails =
     connectorDetails->getDictFromJsonObject->getDictfromDict("connector_webhook_details")
   let connectorLabelDetailField = Dict.fromArray([
-    ("connector_label", "Connector label"->Js.Json.string),
+    ("connector_label", "Connector label"->JSON.Encode.string),
   ])
   (
     bodyType,
@@ -924,10 +930,10 @@ let validateRequiredFiled = (valuesFlattenJson, dict, fieldName, errors) => {
     let errorKey = dict->getString(lastItem, "")
     let value = valuesFlattenJson->getString(`${fieldName}`, "")
     if value->String.length === 0 {
-      Dict.set(newDict, fieldName, `Please enter ${errorKey}`->Js.Json.string)
+      Dict.set(newDict, fieldName, `Please enter ${errorKey}`->JSON.Encode.string)
     }
   })
-  newDict->Js.Json.object_
+  newDict->JSON.Encode.object
 }
 
 let validate = (values, ~selectedConnector, ~dict, ~fieldName, ~isLiveMode) => {
@@ -941,7 +947,7 @@ let validate = (values, ~selectedConnector, ~dict, ~fieldName, ~isLiveMode) => {
     let value =
       valuesFlattenJson
       ->Dict.get(key)
-      ->Option.getOr(""->Js.Json.string)
+      ->Option.getOr(""->JSON.Encode.string)
       ->LogicUtils.getStringFromJson("")
     let regexToUse = isLiveMode ? field.liveValidationRegex : field.testValidationRegex
     let validationResult = switch regexToUse {
@@ -952,21 +958,21 @@ let validate = (values, ~selectedConnector, ~dict, ~fieldName, ~isLiveMode) => {
       let errorLabel =
         labelArr
         ->Array.get(index)
-        ->Option.getOr(""->Js.Json.string)
+        ->Option.getOr(""->JSON.Encode.string)
         ->LogicUtils.getStringFromJson("")
-      Dict.set(errors, key, `Please enter ${errorLabel}`->Js.Json.string)
+      Dict.set(errors, key, `Please enter ${errorLabel}`->JSON.Encode.string)
     } else if !validationResult && value->String.length !== 0 {
       let expectedFormat = isLiveMode ? field.liveExpectedFormat : field.testExpectedFormat
       let warningMessage = expectedFormat->Option.getOr("")
-      Dict.set(errors, key, warningMessage->Js.Json.string)
+      Dict.set(errors, key, warningMessage->JSON.Encode.string)
     }
   })
 
   let profileId = valuesFlattenJson->LogicUtils.getString("profile_id", "")
   if profileId->String.length === 0 {
-    Dict.set(errors, "Profile Id", `Please select your business profile`->Js.Json.string)
+    Dict.set(errors, "Profile Id", `Please select your business profile`->JSON.Encode.string)
   }
-  validateRequiredFiled(valuesFlattenJson, dict, fieldName, errors->Js.Json.object_)
+  validateRequiredFiled(valuesFlattenJson, dict, fieldName, errors->JSON.Encode.object)
 }
 
 let getSuggestedAction = (~verifyErrorMessage, ~connector) => {
@@ -1024,15 +1030,16 @@ let getWebhooksUrl = (~connectorName, ~merchantId) => {
   `${HSwitchGlobalVars.hyperSwitchApiPrefix}/webhooks/${merchantId}/${connectorName}`
 }
 
-let constructConnectorRequestBody = (wasmRequest: wasmRequest, payload: Js.Json.t) => {
+let constructConnectorRequestBody = (wasmRequest: wasmRequest, payload: JSON.t) => {
   open LogicUtils
   let dict = payload->getDictFromJsonObject
-  let connectorAccountDetails = dict->getDictfromDict("connector_account_details")->Js.Json.object_
+  let connectorAccountDetails =
+    dict->getDictfromDict("connector_account_details")->JSON.Encode.object
   let payLoadDetails: wasmExtraPayload = {
     connector_account_details: connectorAccountDetails,
     connector_webhook_details: dict->getDictfromDict("connector_webhook_details")->isEmptyDict
       ? None
-      : Some(dict->getDictfromDict("connector_webhook_details")->Js.Json.object_),
+      : Some(dict->getDictfromDict("connector_webhook_details")->JSON.Encode.object),
     connector_type: dict->getString("connector_type", ""),
     connector_name: dict->getString("connector_name", ""),
     profile_id: dict->getString("profile_id", ""),
@@ -1042,15 +1049,15 @@ let constructConnectorRequestBody = (wasmRequest: wasmRequest, payload: Js.Json.
   let values = Window.getRequestPayload(wasmRequest, payLoadDetails)
   let dict = Dict.fromArray([
     ("connector_account_details", connectorAccountDetails),
-    ("connector_label", dict->getString("connector_label", "")->Js.Json.string),
-    ("status", dict->getString("status", "active")->Js.Json.string),
+    ("connector_label", dict->getString("connector_label", "")->JSON.Encode.string),
+    ("status", dict->getString("status", "active")->JSON.Encode.string),
   ])
   values
   ->getDictFromJsonObject
   ->Dict.toArray
   ->Array.concat(dict->Dict.toArray)
   ->Dict.fromArray
-  ->Js.Json.object_
+  ->JSON.Encode.object
 }
 
 let useFetchConnectorList = () => {
@@ -1062,7 +1069,7 @@ let useFetchConnectorList = () => {
     try {
       let url = getURL(~entityName=CONNECTOR, ~methodType=Get, ())
       let res = await fetchDetails(url)
-      let stringifiedResponse = res->Js.Json.stringify
+      let stringifiedResponse = res->JSON.stringify
       setConnectorList(._ => stringifiedResponse)
       res
     } catch {
@@ -1095,26 +1102,28 @@ let defaultSelectAllCards = (
           let arr =
             config
             ->getArrayFromDict(val.payment_method_type, [])
-            ->Js.Json.array
+            ->JSON.Encode.array
             ->getPaymentMethodMapper
 
           let length =
-            val.card_provider->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)->Array.length
+            val.card_provider
+            ->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
+            ->Array.length
           val.card_provider
-          ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
+          ->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
           ->Array.splice(~start=0, ~remove=length, ~insert=arr)
         }
       | BankTransfer | BankRedirect => {
           let arr =
             config
             ->getArrayFromDict(val.payment_method_type, [])
-            ->Js.Json.array
+            ->JSON.Encode.array
             ->getPaymentMethodMapper
 
           let length =
-            val.provider->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)->Array.length
+            val.provider->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)->Array.length
           val.provider
-          ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
+          ->Option.getOr([]->JSON.Encode.array->getPaymentMethodMapper)
           ->Array.splice(~start=0, ~remove=length, ~insert=arr)
         }
       | _ => ()
diff --git a/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res b/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res
index e2d55794d..51fe94db4 100644
--- a/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res
+++ b/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res
@@ -2,7 +2,7 @@ module HostURL = {
   @react.component
   let make = (~prefix="") => {
     let fieldInputVal = ReactFinalForm.useField(`${prefix}`).input
-    let fieldInput = switch fieldInputVal.value->Js.Json.decodeString {
+    let fieldInput = switch fieldInputVal.value->JSON.Decode.string {
     | Some(val) => val->String.length > 0 ? val : "domain_name"
     | None => "domain_name"
     }
diff --git a/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegrationUtils.res b/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegrationUtils.res
index 923c7b822..d4fe65608 100644
--- a/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegrationUtils.res
+++ b/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegrationUtils.res
@@ -1,6 +1,6 @@
 open ApplePayWalletIntegrationTypes
 
-let getSessionTokenDict = (values: Js.Json.t, applePayIntegrationType: applePayIntegrationType) => {
+let getSessionTokenDict = (values: JSON.t, applePayIntegrationType: applePayIntegrationType) => {
   open LogicUtils
   values
   ->getDictFromJsonObject
@@ -10,7 +10,7 @@ let getSessionTokenDict = (values: Js.Json.t, applePayIntegrationType: applePayI
 }
 
 let validate = (
-  values: Js.Json.t,
+  values: JSON.t,
   mandateKeys: array<string>,
   integrationType: ApplePayWalletIntegrationTypes.applePayIntegrationType,
 ) => {
@@ -20,14 +20,14 @@ let validate = (
   mandateKeys->Array.forEach(key => {
     let value = dict->getString(key, "")
     if value === "" {
-      errorDict->Dict.set(key, `${key} cannot be empty!`->Js.Json.string)
+      errorDict->Dict.set(key, `${key} cannot be empty!`->JSON.Encode.string)
     }
   })
-  errorDict->Js.Json.object_
+  errorDict->JSON.Encode.object
 }
 
 let constructApplePayMetadata = (
-  values: Js.Json.t,
+  values: JSON.t,
   metadataInputs,
   integrationType: applePayIntegrationType,
 ) => {
@@ -42,19 +42,19 @@ let constructApplePayMetadata = (
     ->getDictfromDict((integrationType: applePayIntegrationType :> string))
   // 1.remove existing apple_pay_combined
   // 2.At given time either #manual or #simplified can exists
-  dict->Dict.set("apple_pay_combined", Dict.make()->Js.Json.object_)->ignore
+  dict->Dict.set("apple_pay_combined", Dict.make()->JSON.Encode.object)->ignore
 
-  applePayDict->Dict.set("payment_request_data", paymentRequestData->Js.Json.object_)->ignore
+  applePayDict->Dict.set("payment_request_data", paymentRequestData->JSON.Encode.object)->ignore
 
   dict
   ->Dict.set(
     "apple_pay_combined",
     Dict.fromArray([
-      ((integrationType: applePayIntegrationType :> string), applePayDict->Js.Json.object_),
-    ])->Js.Json.object_,
+      ((integrationType: applePayIntegrationType :> string), applePayDict->JSON.Encode.object),
+    ])->JSON.Encode.object,
   )
   ->ignore
-  dict->Js.Json.object_
+  dict->JSON.Encode.object
 }
 
 let constructVerifyApplePayReq = (values, connectorID) => {
@@ -63,11 +63,11 @@ let constructVerifyApplePayReq = (values, connectorID) => {
   let data = {
     domain_names: [domainName],
     merchant_connector_account_id: connectorID,
-  }->Js.Json.stringifyAny
+  }->JSON.stringifyAny
 
   let body = switch data {
   | Some(val) => val->LogicUtils.safeParse
-  | None => Dict.make()->Js.Json.object_
+  | None => Dict.make()->JSON.Encode.object
   }
   (body, domainName)
 }
diff --git a/src/screens/HyperSwitch/Connectors/Wallets/Wallet.res b/src/screens/HyperSwitch/Connectors/Wallets/Wallet.res
index 7146585db..2af22a066 100644
--- a/src/screens/HyperSwitch/Connectors/Wallets/Wallet.res
+++ b/src/screens/HyperSwitch/Connectors/Wallets/Wallet.res
@@ -56,12 +56,12 @@ module Wallets = {
               values
               ->getDictFromJsonObject
               ->getDictfromDict("apple_pay")
-              ->Dict.set("payment_request_data", paymentRequestData->Js.Json.object_)
+              ->Dict.set("payment_request_data", paymentRequestData->JSON.Encode.object)
             values
           }
         }
 
-      | _ => Dict.make()->Js.Json.object_
+      | _ => Dict.make()->JSON.Encode.object
       }
 
       let _ = update(json)
@@ -83,10 +83,10 @@ module Wallets = {
       let errorDict = Dict.make()
       mandateKyes->Array.forEach(key => {
         if dict->getString(key, "") === "" {
-          errorDict->Dict.set(key, `${key} cannot be empty!`->Js.Json.string)
+          errorDict->Dict.set(key, `${key} cannot be empty!`->JSON.Encode.string)
         }
       })
-      errorDict->Js.Json.object_
+      errorDict->JSON.Encode.object
     }
 
     let name = switch method.payment_method_type->getPaymentMethodTypeFromString {
diff --git a/src/screens/HyperSwitch/Customers/CustomersEntity.res b/src/screens/HyperSwitch/Customers/CustomersEntity.res
index 6648045b2..f39612549 100644
--- a/src/screens/HyperSwitch/Customers/CustomersEntity.res
+++ b/src/screens/HyperSwitch/Customers/CustomersEntity.res
@@ -58,7 +58,7 @@ let itemToObjMapper = dict => {
   }
 }
 
-let getCustomers: Js.Json.t => array<customers> = json => {
+let getCustomers: JSON.t => array<customers> = json => {
   open LogicUtils
   getArrayDataFromJson(json, itemToObjMapper)
 }
diff --git a/src/screens/HyperSwitch/Customers/CustomersType.res b/src/screens/HyperSwitch/Customers/CustomersType.res
index 0822c9784..871c58112 100644
--- a/src/screens/HyperSwitch/Customers/CustomersType.res
+++ b/src/screens/HyperSwitch/Customers/CustomersType.res
@@ -7,7 +7,7 @@ type customers = {
   description: string,
   address: string,
   created_at: string,
-  metadata: Js.Json.t,
+  metadata: JSON.t,
 }
 
 type customersColsType =
diff --git a/src/screens/HyperSwitch/Customers/ShowCustomers.res b/src/screens/HyperSwitch/Customers/ShowCustomers.res
index b4ba8ffb5..63cf10854 100644
--- a/src/screens/HyperSwitch/Customers/ShowCustomers.res
+++ b/src/screens/HyperSwitch/Customers/ShowCustomers.res
@@ -59,7 +59,7 @@ let make = (~id) => {
   open APIUtils
   let fetchDetails = useGetMethod()
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
-  let (customersData, setCustomersData) = React.useState(_ => Js.Json.null)
+  let (customersData, setCustomersData) = React.useState(_ => JSON.Encode.null)
 
   let fetchCustomersData = async () => {
     try {
diff --git a/src/screens/HyperSwitch/Developer/APIKeys/DeveloperUtils.res b/src/screens/HyperSwitch/Developer/APIKeys/DeveloperUtils.res
index 697b4fba8..6bb28fec2 100644
--- a/src/screens/HyperSwitch/Developer/APIKeys/DeveloperUtils.res
+++ b/src/screens/HyperSwitch/Developer/APIKeys/DeveloperUtils.res
@@ -1,7 +1,7 @@
 open HSwitchSettingTypes
 
 let validateAPIKeyForm = (
-  values: Js.Json.t,
+  values: JSON.t,
   ~setIsDisabled=_ => (),
   keys: array<string>,
   ~setShowCustomDate,
@@ -16,9 +16,9 @@ let validateAPIKeyForm = (
 
     if value == "" {
       switch key {
-      | "name" => Dict.set(errors, key, "Please enter name"->Js.Json.string)
-      | "description" => Dict.set(errors, key, "Please enter description"->Js.Json.string)
-      | "expiration" => Dict.set(errors, key, "Please select expiry"->Js.Json.string)
+      | "name" => Dict.set(errors, key, "Please enter name"->JSON.Encode.string)
+      | "description" => Dict.set(errors, key, "Please enter description"->JSON.Encode.string)
+      | "expiration" => Dict.set(errors, key, "Please select expiry"->JSON.Encode.string)
       | _ => ()
       }
     } else if key == "expiration" && value->String.toLowerCase != "never" {
@@ -26,7 +26,7 @@ let validateAPIKeyForm = (
       let date = LogicUtils.getString(valuesDict, "expiration_date", "")
 
       if date == "" {
-        Dict.set(errors, "expiration_date", "Please select expiry date"->Js.Json.string)
+        Dict.set(errors, "expiration_date", "Please select expiry date"->JSON.Encode.string)
       }
     } else if key == "expiration" && value->String.toLowerCase == "never" {
       setShowCustomDate(false)
@@ -41,14 +41,14 @@ let validateAPIKeyForm = (
         value,
       )
     ) {
-      Dict.set(errors, key, "Please Enter Valid URL"->Js.Json.string)
+      Dict.set(errors, key, "Please Enter Valid URL"->JSON.Encode.string)
     } else if (key === "webhook_url" || key === "return_url") && value->String.length <= 0 {
-      Dict.set(errors, key, "Please Enter Valid URL"->Js.Json.string)
+      Dict.set(errors, key, "Please Enter Valid URL"->JSON.Encode.string)
     }
   })
   errors == Dict.make() ? setIsDisabled(_ => false) : setIsDisabled(_ => true)
 
-  errors->Js.Json.object_
+  errors->JSON.Encode.object
 }
 
 type apiKeyExpiryType = Never | Custom
@@ -107,7 +107,7 @@ let allColumns = [Prefix, Name, Description, Created, Expiration, CustomCell]
 
 let apiDefaultCols = Recoil.atom(. "hyperSwitchApiDefaultCols", defaultColumns)
 
-let getItems: Js.Json.t => array<apiKey> = json => {
+let getItems: JSON.t => array<apiKey> = json => {
   LogicUtils.getArrayDataFromJson(json, itemToObjMapper)
 }
 
diff --git a/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res b/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res
index e8b3155f8..6565e26bb 100644
--- a/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res
+++ b/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res
@@ -45,9 +45,9 @@ module ApiEditModal = {
         let valuesDict = values->LogicUtils.getDictFromJsonObject
 
         let body = Dict.make()
-        Dict.set(body, "name", valuesDict->LogicUtils.getString("name", "")->Js.Json.string)
+        Dict.set(body, "name", valuesDict->LogicUtils.getString("name", "")->JSON.Encode.string)
         let description = valuesDict->LogicUtils.getString("description", "")
-        Dict.set(body, "description", description->Js.Json.string)
+        Dict.set(body, "description", description->JSON.Encode.string)
 
         let expirationDate = valuesDict->LogicUtils.getString("expiration_date", "")
 
@@ -58,7 +58,7 @@ module ApiEditModal = {
         | _ => Never->getStringFromRecordType
         }
 
-        Dict.set(body, "expiration", expriryValue->Js.Json.string)
+        Dict.set(body, "expiration", expriryValue->JSON.Encode.string)
 
         setModalState(_ => Loading)
 
@@ -71,7 +71,7 @@ module ApiEditModal = {
         | _ => APIUtils.getURL(~entityName=API_KEYS, ~methodType=Post, ())
         }
 
-        let json = await updateDetails(url, body->Js.Json.object_, Post, ())
+        let json = await updateDetails(url, body->JSON.Encode.object, Post, ())
         let keyDict = json->LogicUtils.getDictFromJsonObject
 
         setApiKey(_ => keyDict->LogicUtils.getString("api_key", ""))
@@ -104,7 +104,7 @@ module ApiEditModal = {
         | Create =>
           <ReactFinalForm.Form
             key="API-key"
-            initialValues={initialValues->Js.Json.object_}
+            initialValues={initialValues->JSON.Encode.object}
             subscription=ReactFinalForm.subscribeToPristine
             validate={values =>
               validateAPIKeyForm(values, ["name", "expiration"], ~setShowCustomDate, ())}
@@ -178,7 +178,7 @@ module ApiKeyAddBtn = {
     let mixpanelEvent = MixpanelHook.useSendEvent()
     let (showModal, setShowModal) = React.useState(_ => false)
     let initialValues = Dict.make()
-    initialValues->Dict.set("expiration", Never->getStringFromRecordType->Js.Json.string)
+    initialValues->Dict.set("expiration", Never->getStringFromRecordType->JSON.Encode.string)
 
     <>
       <ApiEditModal showModal setShowModal initialValues getAPIKeyDetails />
@@ -212,8 +212,8 @@ module TableActionsCell = {
     let deleteKey = async () => {
       try {
         let body = Dict.make()
-        Dict.set(body, "key_id", keyId->Js.Json.string)
-        Dict.set(body, "revoked", true->Js.Json.boolean)
+        Dict.set(body, "key_id", keyId->JSON.Encode.string)
+        Dict.set(body, "revoked", true->JSON.Encode.bool)
 
         let deleteUrl = APIUtils.getURL(
           ~entityName=API_KEYS,
@@ -221,7 +221,7 @@ module TableActionsCell = {
           ~id=Some(keyId),
           (),
         )
-        (await deleteDetails(deleteUrl, body->Js.Json.object_, Delete, ()))->ignore
+        (await deleteDetails(deleteUrl, body->JSON.Encode.object, Delete, ()))->ignore
         getAPIKeyDetails()->ignore
       } catch {
       | Js.Exn.Error(e) =>
@@ -248,15 +248,15 @@ module TableActionsCell = {
       })
     }
     let initialValues = Dict.fromArray([
-      ("name", data.name->Js.Json.string),
-      ("description", data.description->Js.Json.string),
+      ("name", data.name->JSON.Encode.string),
+      ("description", data.description->JSON.Encode.string),
     ])
 
     if data.expiration == Never {
-      initialValues->Dict.set("expiration", Never->getStringFromRecordType->Js.Json.string)
+      initialValues->Dict.set("expiration", Never->getStringFromRecordType->JSON.Encode.string)
     } else {
-      initialValues->Dict.set("expiration", Custom->getStringFromRecordType->Js.Json.string)
-      initialValues->Dict.set("expiration_date", data.expiration_date->Js.Json.string)
+      initialValues->Dict.set("expiration", Custom->getStringFromRecordType->JSON.Encode.string)
+      initialValues->Dict.set("expiration_date", data.expiration_date->JSON.Encode.string)
     }
 
     <div>
diff --git a/src/screens/HyperSwitch/Developer/APIKeys/PublishableAndHashKeySection.res b/src/screens/HyperSwitch/Developer/APIKeys/PublishableAndHashKeySection.res
index 050e1d27a..e8498a734 100644
--- a/src/screens/HyperSwitch/Developer/APIKeys/PublishableAndHashKeySection.res
+++ b/src/screens/HyperSwitch/Developer/APIKeys/PublishableAndHashKeySection.res
@@ -2,7 +2,7 @@
 let make = () => {
   let fetchDetails = APIUtils.useGetMethod()
   let (merchantInfo, setMerchantInfo) = React.useState(() =>
-    Js.Json.null->MerchantAccountUtils.getMerchantDetails
+    JSON.Encode.null->MerchantAccountUtils.getMerchantDetails
   )
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
 
diff --git a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res
index 54e263a7b..120be32a8 100644
--- a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res
+++ b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res
@@ -49,7 +49,7 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
     try {
       setScreenState(_ => PageLoaderWrapper.Loading)
       let url = getURL(~entityName=BUSINESS_PROFILE, ~methodType=Post, ~id=Some(id), ())
-      let body = values->getBusinessProfilePayload->Js.Json.object_
+      let body = values->getBusinessProfilePayload->JSON.Encode.object
       let res = await updateDetails(url, body, Post, ())
       let profileTypeInfo = res->businessProfileTypeMapper
       setProfileInfo(_ => profileTypeInfo)
@@ -86,7 +86,7 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
               : "border border-jp-gray-500 rounded-md dark:border-jp-gray-960"} ${bgClass} `}>
           <ReactFinalForm.Form
             key="merchantAccount"
-            initialValues={businessProfileDetails->parseBussinessProfileJson->Js.Json.object_}
+            initialValues={businessProfileDetails->parseBussinessProfileJson->JSON.Encode.object}
             subscription=ReactFinalForm.subscribeToValues
             validate={values => {
               open HSwitchSettingTypes
@@ -98,7 +98,7 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
                     urlField === WebhookUrl || !webhookOnly
                   )
                 },
-                ~initialData=profileInfo->parseBussinessProfileJson->Js.Json.object_,
+                ~initialData=profileInfo->parseBussinessProfileJson->JSON.Encode.object,
               )
             }}
             onSubmit
diff --git a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsListEntity.res b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsListEntity.res
index 74d6f0e5d..5486cd8ef 100644
--- a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsListEntity.res
+++ b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsListEntity.res
@@ -42,7 +42,7 @@ let itemToObjMapper = dict => {
   }
 }
 
-let getItems: Js.Json.t => array<profileEntity> = json => {
+let getItems: JSON.t => array<profileEntity> = json => {
   LogicUtils.getArrayDataFromJson(json, itemToObjMapper)
 }
 
diff --git a/src/screens/HyperSwitch/Disputes/DisputesEntity.res b/src/screens/HyperSwitch/Disputes/DisputesEntity.res
index a5c6b934d..7a6d4370f 100644
--- a/src/screens/HyperSwitch/Disputes/DisputesEntity.res
+++ b/src/screens/HyperSwitch/Disputes/DisputesEntity.res
@@ -192,7 +192,7 @@ let itemToObjMapper = dict => {
   }
 }
 
-let getDisputes: Js.Json.t => array<disputes> = json => {
+let getDisputes: JSON.t => array<disputes> = json => {
   getArrayDataFromJson(json, itemToObjMapper)
 }
 
diff --git a/src/screens/HyperSwitch/Disputes/ShowDisputes.res b/src/screens/HyperSwitch/Disputes/ShowDisputes.res
index a681824b3..6ebc7379d 100644
--- a/src/screens/HyperSwitch/Disputes/ShowDisputes.res
+++ b/src/screens/HyperSwitch/Disputes/ShowDisputes.res
@@ -124,7 +124,7 @@ module Details = {
           ~id=Some(data.dispute_id),
           (),
         )
-        let response = await updateDetails(url, Dict.make()->Js.Json.object_, Post, ())
+        let response = await updateDetails(url, Dict.make()->JSON.Encode.object, Post, ())
         setDisputeData(_ => response)
         setDisputeStatus(_ => Accepted)
       } catch {
@@ -231,7 +231,7 @@ let make = (~id) => {
   open APIUtils
   let fetchDetails = useGetMethod()
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
-  let (disputeData, setDisputeData) = React.useState(_ => Js.Json.null)
+  let (disputeData, setDisputeData) = React.useState(_ => JSON.Encode.null)
 
   let fetchDisputesData = async () => {
     try {
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res b/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res
index f5275dd9c..8b70a0932 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res
@@ -9,7 +9,7 @@ let make = () => {
   let url = RescriptReactRouter.useUrl()
   let fetchDetails = useGetMethod()
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
-  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->Js.Json.object_)
+  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->JSON.Encode.object)
   let frmName = UrlUtils.useGetFilterDictFromUrl("")->getString("name", "")
   let frmID = url.path->List.toArray->Array.get(1)->Option.getOr("")
 
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
index 2ba883248..038b65904 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
@@ -13,7 +13,7 @@ module AdvanceSettings = {
         setIsFRMSettings(_ => value)
       },
       onFocus: _ev => (),
-      value: {isFRMSettings->Js.Json.boolean},
+      value: {isFRMSettings->JSON.Encode.bool},
       checked: true,
     }
 
@@ -24,7 +24,7 @@ module AdvanceSettings = {
 
     React.useEffect1(() => {
       if !isUpdateFlow {
-        form.change("profile_id", businessProfileValue.profile_id->Js.Json.string)
+        form.change("profile_id", businessProfileValue.profile_id->JSON.Encode.string)
       }
       None
     }, [businessProfileValue.profile_id])
@@ -75,11 +75,11 @@ module IntegrationFieldsForm = {
         let value =
           valuesFlattenJson
           ->Dict.get(key)
-          ->Option.getOr(""->Js.Json.string)
+          ->Option.getOr(""->JSON.Encode.string)
           ->LogicUtils.getStringFromJson("")
 
         if field.isRequired && value->String.length === 0 {
-          Dict.set(errors, key, `Please enter ${field.label}`->Js.Json.string)
+          Dict.set(errors, key, `Please enter ${field.label}`->JSON.Encode.string)
         }
       })
     }
@@ -87,7 +87,7 @@ module IntegrationFieldsForm = {
     let validateCountryCurrency = (valuesFlattenJson, ~errors) => {
       let profileId = valuesFlattenJson->LogicUtils.getString("profile_id", "")
       if profileId->String.length <= 0 {
-        Dict.set(errors, "Profile Id", `Please select your business profile`->Js.Json.string)
+        Dict.set(errors, "Profile Id", `Please select your business profile`->JSON.Encode.string)
       }
     }
 
@@ -101,7 +101,7 @@ module IntegrationFieldsForm = {
         valuesFlattenJson->validateCountryCurrency(~errors)
       }
 
-      errors->Js.Json.object_
+      errors->JSON.Encode.object
     }
 
     let validateMandatoryField = values => {
@@ -114,7 +114,7 @@ module IntegrationFieldsForm = {
         valuesFlattenJson->validateCountryCurrency(~errors)
       }
 
-      errors->Js.Json.object_
+      errors->JSON.Encode.object
     }
 
     <Form initialValues onSubmit validate={validateMandatoryField}>
@@ -198,15 +198,15 @@ let make = (
 
         frmAccountDetailsObj->Dict.set(
           "auth_type",
-          selectedFRMInfo.name->getFRMAuthType->Js.Json.string,
+          selectedFRMInfo.name->getFRMAuthType->JSON.Encode.string,
         )
 
         initialValuesObj->Dict.set(
           "connector_account_details",
-          frmAccountDetailsObj->Js.Json.object_,
+          frmAccountDetailsObj->JSON.Encode.object,
         )
 
-        initialValuesObj->Js.Json.object_
+        initialValuesObj->JSON.Encode.object
       }
 
     | None =>
@@ -216,7 +216,7 @@ let make = (
 
   let frmID =
     retrivedValues
-    ->Option.getOr(Dict.make()->Js.Json.object_)
+    ->Option.getOr(Dict.make()->JSON.Encode.object)
     ->LogicUtils.getDictFromJsonObject
     ->LogicUtils.getString("merchant_connector_id", "")
 
@@ -237,14 +237,17 @@ let make = (
   let updateMerchantDetails = async () => {
     let merchantId = HSLocalStorage.getFromMerchantDetails("merchant_id")
     let info =
-      [("data", "signifyd"->Js.Json.string), ("type", "single"->Js.Json.string)]->Dict.fromArray
+      [
+        ("data", "signifyd"->JSON.Encode.string),
+        ("type", "single"->JSON.Encode.string),
+      ]->Dict.fromArray
     let body =
       [
-        ("frm_routing_algorithm", info->Js.Json.object_),
-        ("merchant_id", merchantId->Js.Json.string),
+        ("frm_routing_algorithm", info->JSON.Encode.object),
+        ("merchant_id", merchantId->JSON.Encode.string),
       ]
       ->Dict.fromArray
-      ->Js.Json.object_
+      ->JSON.Encode.object
     let url = getURL(~entityName=MERCHANT_ACCOUNT, ~methodType=Post, ())
     try {
       let _ = await updateDetails(url, body, Post, ())
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
index 4405c6b49..fc8923e91 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
@@ -331,7 +331,7 @@ let make = (~setCurrentStep, ~retrivedValues=None, ~setInitialValues, ~isUpdateF
   open FRMInfo
   open FRMUtils
   open LogicUtils
-  let initialValues = retrivedValues->Option.getOr(Dict.make()->Js.Json.object_)
+  let initialValues = retrivedValues->Option.getOr(Dict.make()->JSON.Encode.object)
 
   let onSubmit = (values, _) => {
     open Promise
@@ -345,7 +345,7 @@ let make = (~setCurrentStep, ~retrivedValues=None, ~setInitialValues, ~isUpdateF
       ->Array.filter(config => config.payment_methods->Array.length > 0)
 
     valuesDict->Dict.set("frm_configs", filteredArray->Identity.genericTypeToJson)
-    setInitialValues(_ => valuesDict->Js.Json.object_)
+    setInitialValues(_ => valuesDict->JSON.Encode.object)
     setCurrentStep(prev => prev->getNextStep)
 
     Js.Nullable.null->resolve
@@ -353,7 +353,7 @@ let make = (~setCurrentStep, ~retrivedValues=None, ~setInitialValues, ~isUpdateF
 
   let validate = _values => {
     let errors = Dict.make()
-    errors->Js.Json.object_
+    errors->JSON.Encode.object
   }
 
   <Form initialValues onSubmit validate>
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res b/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res
index f1854bba5..bd94a4fcf 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res
@@ -77,7 +77,7 @@ let make = (~initialValues, ~currentStep, ~setCurrentStep) => {
       let frmID = initialValues->getDictFromJsonObject->getString("merchant_connector_id", "")
       let disableFRMPayload = initialValues->FRMTypes.getDisableConnectorPayload(isFRMDisabled)
       let url = getURL(~entityName=FRAUD_RISK_MANAGEMENT, ~methodType=Post, ~id=Some(frmID), ())
-      let _ = await updateDetails(url, disableFRMPayload->Js.Json.object_, Post, ())
+      let _ = await updateDetails(url, disableFRMPayload->JSON.Encode.object, Post, ())
       showToast(~message=`Successfully Saved the Changes`, ~toastType=ToastSuccess, ())
       RescriptReactRouter.push("/fraud-risk-management")
     } catch {
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMTableUtils.res b/src/screens/HyperSwitch/FraudAndRisk/FRMTableUtils.res
index d6c4300e3..7f8b8d279 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMTableUtils.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMTableUtils.res
@@ -1,13 +1,13 @@
 let getArrayDataFromJson = (json, itemToObjMapper) => {
   json
-  ->Js.Json.decodeArray
+  ->JSON.Decode.array
   ->Option.getOr([])
-  ->Belt.Array.keepMap(Js.Json.decodeObject)
+  ->Belt.Array.keepMap(JSON.Decode.object)
   ->FRMUtils.filterList(~removeFromList=Connector, ())
   ->Array.map(itemToObjMapper)
 }
 
-let getPreviouslyConnectedList: Js.Json.t => array<ConnectorTypes.connectorPayload> = json => {
+let getPreviouslyConnectedList: JSON.t => array<ConnectorTypes.connectorPayload> = json => {
   getArrayDataFromJson(
     json,
     ConnectorTableUtils.getProcessorPayloadType,
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMTypes.res b/src/screens/HyperSwitch/FraudAndRisk/FRMTypes.res
index 0a17cf47c..c717d44b1 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMTypes.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMTypes.res
@@ -30,7 +30,7 @@ type frmActionType = CancelTxn | AutoRefund | ManualReview | Process
 let getDisableConnectorPayload = (connectorInfo, previousConnectorState) => {
   let dictToJson = connectorInfo->LogicUtils.getDictFromJsonObject
   [
-    ("connector_type", dictToJson->LogicUtils.getString("connector_type", "")->Js.Json.string),
-    ("disabled", !previousConnectorState->Js.Json.boolean),
+    ("connector_type", dictToJson->LogicUtils.getString("connector_type", "")->JSON.Encode.string),
+    ("disabled", !previousConnectorState->JSON.Encode.bool),
   ]->Dict.fromArray
 }
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMUtils.res b/src/screens/HyperSwitch/FraudAndRisk/FRMUtils.res
index b9fe0178d..bc09d28d7 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMUtils.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMUtils.res
@@ -5,16 +5,16 @@ open FRMTypes
 @val external atob: string => string = "atob"
 
 let leadingSpaceStrParser = (. ~value, ~name as _) => {
-  let str = value->Js.Json.decodeString->Option.getOr("")
-  str->String.replaceRegExp(%re("/^[\s]+/"), "")->Js.Json.string
+  let str = value->JSON.Decode.string->Option.getOr("")
+  str->String.replaceRegExp(%re("/^[\s]+/"), "")->JSON.Encode.string
 }
 
 let base64Parse = (. ~value, ~name as _) => {
-  value->Js.Json.decodeString->Option.getOr("")->btoa->Js.Json.string
+  value->JSON.Decode.string->Option.getOr("")->btoa->JSON.Encode.string
 }
 
 let base64Format = (. ~value, ~name as _) => {
-  value->Js.Json.decodeString->Option.getOr("")->atob->Js.Json.string
+  value->JSON.Decode.string->Option.getOr("")->atob->JSON.Encode.string
 }
 
 let toggleDefaultStyle = "mb-2 relative inline-flex flex-shrink-0 h-6 w-12 border-2 rounded-full  transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75 items-center"
@@ -24,24 +24,24 @@ let size = "w-14 h-14 rounded-full"
 
 let generateInitialValuesDict = (~selectedFRMInfo, ~isLiveMode, ()) => {
   let frmAccountDetailsDict =
-    [("auth_type", selectedFRMInfo.name->getFRMAuthType->Js.Json.string)]
+    [("auth_type", selectedFRMInfo.name->getFRMAuthType->JSON.Encode.string)]
     ->Dict.fromArray
-    ->Js.Json.object_
+    ->JSON.Encode.object
 
   [
-    ("connector_name", selectedFRMInfo.name->getFRMNameString->Js.Json.string),
-    ("connector_type", "payment_vas"->Js.Json.string),
-    ("disabled", false->Js.Json.boolean),
-    ("test_mode", !isLiveMode->Js.Json.boolean),
+    ("connector_name", selectedFRMInfo.name->getFRMNameString->JSON.Encode.string),
+    ("connector_type", "payment_vas"->JSON.Encode.string),
+    ("disabled", false->JSON.Encode.bool),
+    ("test_mode", !isLiveMode->JSON.Encode.bool),
     ("connector_account_details", frmAccountDetailsDict),
-    ("frm_configs", []->Js.Json.array),
+    ("frm_configs", []->JSON.Encode.array),
   ]
   ->Dict.fromArray
-  ->Js.Json.object_
+  ->JSON.Encode.object
 }
 
 let parseFRMConfig = json => {
-  json->Js.Json.decodeArray->Option.getOr([])->ConnectorTableUtils.convertFRMConfigJsonToObj
+  json->JSON.Decode.array->Option.getOr([])->ConnectorTableUtils.convertFRMConfigJsonToObj
 }
 
 let getPaymentMethod = paymentMethod => {
@@ -165,5 +165,5 @@ let ignoreFields = json => {
     !(ignoredField->Array.includes(key))
   })
   ->Dict.fromArray
-  ->Js.Json.object_
+  ->JSON.Encode.object
 }
diff --git a/src/screens/HyperSwitch/HSLocalStorage.res b/src/screens/HyperSwitch/HSLocalStorage.res
index aff0ffd14..033e45ccd 100644
--- a/src/screens/HyperSwitch/HSLocalStorage.res
+++ b/src/screens/HyperSwitch/HSLocalStorage.res
@@ -23,5 +23,5 @@ let getIsPlaygroundFromLocalStorage = () => {
 }
 
 let setIsPlaygroundInLocalStorage = (val: bool) => {
-  LocalStorage.setItem("isPlayground", val->Js.Json.boolean->Js.Json.stringify)
+  LocalStorage.setItem("isPlayground", val->JSON.Encode.bool->JSON.stringify)
 }
diff --git a/src/screens/HyperSwitch/HSwitchRemoteFilter.res b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
index 3089c2596..2c6dd3077 100644
--- a/src/screens/HyperSwitch/HSwitchRemoteFilter.res
+++ b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
@@ -35,7 +35,7 @@ let getDateFilteredObject = () => {
   }
 }
 
-let getFilterFields: Js.Json.t => array<EntityType.optionType<'t>> = json => {
+let getFilterFields: JSON.t => array<EntityType.optionType<'t>> = json => {
   open LogicUtils
   let filterDict = json->getDictFromJsonObject
 
@@ -140,7 +140,7 @@ module SearchBarFilter = {
       onBlur: _ev => (),
       onChange,
       onFocus: _ev => (),
-      value: searchValBase->Js.Json.string,
+      value: searchValBase->JSON.Encode.string,
       checked: true,
     }
 
@@ -175,7 +175,7 @@ module RemoteTableFilters = {
   ) => {
     let {filterValue, updateExistingKeys, filterValueJson, removeKeys} =
       FilterContext.filterContext->React.useContext
-    let defaultFilters = {""->Js.Json.string}
+    let defaultFilters = {""->JSON.Encode.string}
 
     let customViewTop = <SearchBarFilter placeholder setSearchVal searchVal />
 
@@ -192,8 +192,8 @@ module RemoteTableFilters = {
 
     let filterBody = React.useMemo3(() => {
       [
-        (startTimeFilterKey, startTimeVal->Js.Json.string),
-        (endTimeFilterKey, endTimeVal->Js.Json.string),
+        (startTimeFilterKey, startTimeVal->JSON.Encode.string),
+        (endTimeFilterKey, endTimeVal->JSON.Encode.string),
       ]->Dict.fromArray
     }, (startTimeVal, endTimeVal, filterValue))
 
@@ -209,7 +209,7 @@ module RemoteTableFilters = {
       setFilterDataJson(_ => None)
       if startTimeVal->isStringNonEmpty && endTimeVal->isStringNonEmpty {
         try {
-          updateDetails(filterUrl, filterBody->Js.Json.object_, Post, ())
+          updateDetails(filterUrl, filterBody->JSON.Encode.object, Post, ())
           ->thenResolve(json => setFilterDataJson(_ => json->Some))
           ->catch(_ => resolve())
           ->ignore
@@ -218,8 +218,8 @@ module RemoteTableFilters = {
         }
       }
       None
-    }, (startTimeVal, endTimeVal, filterBody->Js.Json.object_->Js.Json.stringify))
-    let filterData = filterDataJson->Option.getOr(Dict.make()->Js.Json.object_)
+    }, (startTimeVal, endTimeVal, filterBody->JSON.Encode.object->JSON.stringify))
+    let filterData = filterDataJson->Option.getOr(Dict.make()->JSON.Encode.object)
 
     React.useEffect1(() => {
       if filterValueJson->Dict.keysToArray->Array.length != 0 {
diff --git a/src/screens/HyperSwitch/Helpers/HelperComponents.res b/src/screens/HyperSwitch/Helpers/HelperComponents.res
index 0b3144fc4..12dd271e2 100644
--- a/src/screens/HyperSwitch/Helpers/HelperComponents.res
+++ b/src/screens/HyperSwitch/Helpers/HelperComponents.res
@@ -53,11 +53,11 @@ module BluredTableComponent = {
   ) => {
     let dummyTableValueDict =
       [
-        ("payment_id", "##############"->Js.Json.string),
-        ("merchant_id", "####"->Js.Json.string),
-        ("status", "####"->Js.Json.string),
-        ("amount", "####"->Js.Json.string),
-        ("amount_capturable", "####"->Js.Json.string),
+        ("payment_id", "##############"->JSON.Encode.string),
+        ("merchant_id", "####"->JSON.Encode.string),
+        ("status", "####"->JSON.Encode.string),
+        ("amount", "####"->JSON.Encode.string),
+        ("amount_capturable", "####"->JSON.Encode.string),
       ]->Dict.fromArray
 
     let dummyTableValue = Array.make(~length=5, dummyTableValueDict)
diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res
index 3591fc616..b88983200 100644
--- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res
+++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res
@@ -20,7 +20,7 @@ let make = (~connectProcessorValue: connectProcessor) => {
     ->MerchantAccountUtils.getValueFromBusinessProfile
 
   let (selectedConnector, setSelectedConnector) = React.useState(_ => UnknownConnector(""))
-  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->Js.Json.object_)
+  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->JSON.Encode.object)
   let (connectorConfigureState, setConnectorConfigureState) = React.useState(_ => Select_processor)
   let (choiceState, setChoiceState) = React.useState(_ => #NotSelected)
   let (smartRoutingChoiceState, setSmartRoutingChoiceState) = React.useState(_ => #DefaultFallback)
@@ -71,9 +71,9 @@ let make = (~connectProcessorValue: connectProcessor) => {
       let prevJsonDict = prevJson->LogicUtils.getDictFromJsonObject
       prevJsonDict->Dict.set(
         "connector_label",
-        `${selectedConnector->ConnectorUtils.getConnectorNameString}_${activeBusinessProfile.profile_name}`->Js.Json.string,
+        `${selectedConnector->ConnectorUtils.getConnectorNameString}_${activeBusinessProfile.profile_name}`->JSON.Encode.string,
       )
-      prevJsonDict->Js.Json.object_
+      prevJsonDict->JSON.Encode.object
     })
 
     None
@@ -105,7 +105,7 @@ let make = (~connectProcessorValue: connectProcessor) => {
         ~id=Some(activatingId),
         (),
       )
-      let _ = await updateDetails(activateRuleURL, Dict.make()->Js.Json.object_, Post, ())
+      let _ = await updateDetails(activateRuleURL, Dict.make()->JSON.Encode.object, Post, ())
       let _ = await updateEnumForRouting(activatingId)
       setButtonState(_ => Normal)
     } catch {
diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/QuickStartConnectorFlow.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/QuickStartConnectorFlow.res
index df0732484..759931703 100644
--- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/QuickStartConnectorFlow.res
+++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/QuickStartConnectorFlow.res
@@ -51,7 +51,7 @@ let make = (
       setQuickStartPageState(_ => QuickStartTypes.ConnectProcessor(QuickStartTypes.CHECKOUT))
     } else {
       setSelectedConnector(_ => UnknownConnector(""))
-      setInitialValues(_ => Dict.make()->Js.Json.object_)
+      setInitialValues(_ => Dict.make()->JSON.Encode.object)
       setConnectorConfigureState(_ => Select_processor)
       setQuickStartPageState(_ => ConnectProcessor(CONFIGURE_SECONDARY))
     }
@@ -126,9 +126,9 @@ let make = (
 
   React.useEffect1(() => {
     let defaultJsonOnNewConnector =
-      [("profile_id", activeBusinessProfile.profile_id->Js.Json.string)]
+      [("profile_id", activeBusinessProfile.profile_id->JSON.Encode.string)]
       ->Dict.fromArray
-      ->Js.Json.object_
+      ->JSON.Encode.object
     setInitialValues(_ => defaultJsonOnNewConnector)
     None
   }, [activeBusinessProfile.profile_id, connectorName])
diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res
index fb3ba99f8..bab291315 100644
--- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res
+++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res
@@ -77,10 +77,10 @@ module ConfigureProcessor = {
         if connectorName->String.length > 0 {
           Window.getConnectorConfig(connectorName)
         } else {
-          Dict.make()->Js.Json.object_
+          Dict.make()->JSON.Encode.object
         }
       } catch {
-      | _ => Dict.make()->Js.Json.object_
+      | _ => Dict.make()->JSON.Encode.object
       }
     }, [(connectorName, selectedConnector)])
 
@@ -113,7 +113,7 @@ module ConfigureProcessor = {
       let valuesFlattenJson = values->JsonFlattenUtils.flattenObject(true)
       let profileId = valuesFlattenJson->LogicUtils.getString("profile_id", "")
       if profileId->String.length === 0 {
-        Dict.set(errors, "Profile Id", `Please select your business profile`->Js.Json.string)
+        Dict.set(errors, "Profile Id", `Please select your business profile`->JSON.Encode.string)
       }
 
       validateConnectorRequiredFields(
@@ -123,7 +123,7 @@ module ConfigureProcessor = {
         connectorMetaDataFields,
         connectorWebHookDetails,
         connectorLabelDetailField,
-        errors->Js.Json.object_,
+        errors->JSON.Encode.object,
       )
     }
     let backButton =
@@ -185,9 +185,9 @@ module SelectPaymentMethods = {
     let connectorName = selectedConnector->getConnectorNameString
 
     let (paymentMethodsEnabled, setPaymentMethods) = React.useState(_ =>
-      Dict.make()->Js.Json.object_->getPaymentMethodEnabled
+      Dict.make()->JSON.Encode.object->getPaymentMethodEnabled
     )
-    let (metaData, setMetaData) = React.useState(_ => Dict.make()->Js.Json.object_)
+    let (metaData, setMetaData) = React.useState(_ => Dict.make()->JSON.Encode.object)
 
     let updateDetails = value => {
       setPaymentMethods(_ => value->Array.copy)
diff --git a/src/screens/HyperSwitch/Home/HomeUtils.res b/src/screens/HyperSwitch/Home/HomeUtils.res
index 00f93a712..8065cc830 100644
--- a/src/screens/HyperSwitch/Home/HomeUtils.res
+++ b/src/screens/HyperSwitch/Home/HomeUtils.res
@@ -115,11 +115,11 @@ module MerchantAuthInfo = {
     let detail = merchantDetailsValue->MerchantAccountUtils.getMerchantDetails
     let dataDict =
       [
-        ("merchant_id", detail.merchant_id->Js.Json.string),
-        ("publishable_key", detail.publishable_key->Js.Json.string),
+        ("merchant_id", detail.merchant_id->JSON.Encode.string),
+        ("publishable_key", detail.publishable_key->JSON.Encode.string),
       ]->Dict.fromArray
 
-    <Form initialValues={dataDict->Js.Json.object_} formClass="md:ml-9 my-4">
+    <Form initialValues={dataDict->JSON.Encode.object} formClass="md:ml-9 my-4">
       <div className="flex flex-col md:flex-row gap-3">
         <div>
           <div className="font-semibold text-dark_black"> {"Merchant ID"->React.string} </div>
@@ -360,8 +360,8 @@ let getValueMapped = (value, key) => {
   | #DownloadWoocom
   | #ConfigureWoocom
   | #SetupWoocomWebhook =>
-    value->getBool(key, false)->Js.Json.boolean
-  | #ConfigurationType => value->getString(key, "")->Js.Json.string
+    value->getBool(key, false)->JSON.Encode.bool
+  | #ConfigurationType => value->getString(key, "")->JSON.Encode.string
   | #FirstProcessorConnected
   | #SecondProcessorConnected
   | #StripeConnected
@@ -373,7 +373,7 @@ let getValueMapped = (value, key) => {
   }
 }
 
-let responseDataMapper = (res: Js.Json.t) => {
+let responseDataMapper = (res: JSON.t) => {
   open LogicUtils
   let arrayFromJson = res->getArrayFromJson([])
   let resDict = Dict.make()
diff --git a/src/screens/HyperSwitch/Home/ProdIntent/ProdIntentForm.res b/src/screens/HyperSwitch/Home/ProdIntent/ProdIntentForm.res
index c73f87e91..c959246b1 100644
--- a/src/screens/HyperSwitch/Home/ProdIntent/ProdIntentForm.res
+++ b/src/screens/HyperSwitch/Home/ProdIntent/ProdIntentForm.res
@@ -21,13 +21,13 @@ let make = (~isFromMilestoneCard=false) => {
           (),
         )}?keys=ProdIntent`
       let res = await fetchDetails(url)
-      let firstValueFromArray = res->getArrayFromJson([])->getValueFromArray(0, Js.Json.null)
+      let firstValueFromArray = res->getArrayFromJson([])->getValueFromArray(0, JSON.Encode.null)
       let valueForProdIntent =
         firstValueFromArray->getDictFromJsonObject->getDictfromDict("ProdIntent")
       let hideHeader = valueForProdIntent->getBool(IsCompleted->getStringFromVariant, false)
       setIsProdIntentCompleted(_ => hideHeader)
       if !hideHeader {
-        valueForProdIntent->Dict.set(POCemail->getStringFromVariant, email->Js.Json.string)
+        valueForProdIntent->Dict.set(POCemail->getStringFromVariant, email->JSON.Encode.string)
       }
       setInitialValues(_ => valueForProdIntent)
     } catch {
diff --git a/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModal.res b/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModal.res
index b5363a352..65106bc2c 100644
--- a/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModal.res
+++ b/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModal.res
@@ -13,7 +13,7 @@ let make = (~showModal, ~setShowModal, ~initialValues=Dict.make(), ~getProdVerif
   let updateProdDetails = async values => {
     try {
       let url = getURL(~entityName=USERS, ~userType=#USER_DATA, ~methodType=Post, ())
-      let bodyValues = values->getBody->Js.Json.object_
+      let bodyValues = values->getBody->JSON.Encode.object
       let body = [("ProdIntent", bodyValues)]->LogicUtils.getJsonFromArrayOfJson
       let _ = await updateDetails(url, body, Post, ())
       showToast(
@@ -55,7 +55,7 @@ let make = (~showModal, ~setShowModal, ~initialValues=Dict.make(), ~getProdVerif
           <PageLoaderWrapper screenState sectionHeight="h-30-vh">
             <Form
               key="prod-request-form"
-              initialValues={initialValues->Js.Json.object_}
+              initialValues={initialValues->JSON.Encode.object}
               validate={values =>
                 values->validateForm(
                   ~fieldsToValidate=formFields,
diff --git a/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModalUtils.res b/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModalUtils.res
index 38305a36e..86e50536b 100644
--- a/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModalUtils.res
+++ b/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModalUtils.res
@@ -88,21 +88,22 @@ let validateEmptyValue = (key, errors) => {
     Dict.set(
       errors,
       key->getStringFromVariant,
-      "Please enter a Point of Contact Email"->Js.Json.string,
+      "Please enter a Point of Contact Email"->JSON.Encode.string,
     )
   | BusinessName =>
-    Dict.set(errors, key->getStringFromVariant, "Please enter a Business Name"->Js.Json.string)
+    Dict.set(errors, key->getStringFromVariant, "Please enter a Business Name"->JSON.Encode.string)
   | Country =>
-    Dict.set(errors, key->getStringFromVariant, "Please select a Country"->Js.Json.string)
-  | Website => Dict.set(errors, key->getStringFromVariant, "Please enter a Website"->Js.Json.string)
+    Dict.set(errors, key->getStringFromVariant, "Please select a Country"->JSON.Encode.string)
+  | Website =>
+    Dict.set(errors, key->getStringFromVariant, "Please enter a Website"->JSON.Encode.string)
   | POCName =>
     Dict.set(
       errors,
       key->getStringFromVariant,
-      "Please enter a Point of Contact Name"->Js.Json.string,
+      "Please enter a Point of Contact Name"->JSON.Encode.string,
     )
   | BusinessTAN =>
-    Dict.set(errors, key->getStringFromVariant, "Please enter a Business TAN"->Js.Json.string)
+    Dict.set(errors, key->getStringFromVariant, "Please enter a Business TAN"->JSON.Encode.string)
   | _ => ()
   }
 }
@@ -124,11 +125,11 @@ let validateCustom = (key, errors, value) => {
   switch key {
   | POCemail =>
     if value->HSwitchUtils.isValidEmail {
-      Dict.set(errors, key->getStringFromVariant, "Please enter valid email id"->Js.Json.string)
+      Dict.set(errors, key->getStringFromVariant, "Please enter valid email id"->JSON.Encode.string)
     }
   | Website =>
     if !Js.Re.test_(%re("/^https:\/\//i"), value) || value->String.includes("localhost") {
-      Dict.set(errors, key->getStringFromVariant, "Please Enter Valid URL"->Js.Json.string)
+      Dict.set(errors, key->getStringFromVariant, "Please Enter Valid URL"->JSON.Encode.string)
     }
   | _ => ()
   }
@@ -147,21 +148,21 @@ let validateForm = (values, ~fieldsToValidate: array<prodFormColumnType>, ~setIs
 
   errors->Dict.keysToArray->Array.length > 0 ? setIsDisabled(_ => true) : setIsDisabled(_ => false)
 
-  errors->Js.Json.object_
+  errors->JSON.Encode.object
 }
 
 let getJsonString = (valueDict, key) => {
   open LogicUtils
-  valueDict->getString(key->getStringFromVariant, "")->Js.Json.string
+  valueDict->getString(key->getStringFromVariant, "")->JSON.Encode.string
 }
 
-let getBody = (values: Js.Json.t) => {
+let getBody = (values: JSON.t) => {
   open LogicUtils
   let valuesDict = values->getDictFromJsonObject
 
   [
     (POCemail->getStringFromVariant, valuesDict->getJsonString(POCemail)),
-    (IsCompleted->getStringFromVariant, true->Js.Json.boolean),
+    (IsCompleted->getStringFromVariant, true->JSON.Encode.bool),
     (BusinessName->getStringFromVariant, valuesDict->getJsonString(BusinessName)),
     (Country->getStringFromVariant, valuesDict->getJsonString(Country)),
     (Website->getStringFromVariant, valuesDict->getJsonString(Website)),
diff --git a/src/screens/HyperSwitch/Home/QuickStart/GoLive.res b/src/screens/HyperSwitch/Home/QuickStart/GoLive.res
index f8b3215c9..4ad501041 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/GoLive.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/GoLive.res
@@ -50,13 +50,13 @@ let make = (~goLive) => {
         )}?keys=ProdIntent`
       let res = await fetchDetails(url)
 
-      let firstValueFromArray = res->getArrayFromJson([])->getValueFromArray(0, Js.Json.null)
+      let firstValueFromArray = res->getArrayFromJson([])->getValueFromArray(0, JSON.Encode.null)
       let valueForProdIntent =
         firstValueFromArray->getDictFromJsonObject->getDictfromDict("ProdIntent")
       let hideHeader = valueForProdIntent->getBool(IsCompleted->getStringFromVariant, false)
       setIsProdIntentCompleted(_ => hideHeader)
       if !hideHeader {
-        valueForProdIntent->Dict.set(POCemail->getStringFromVariant, email->Js.Json.string)
+        valueForProdIntent->Dict.set(POCemail->getStringFromVariant, email->JSON.Encode.string)
       }
       setQuickStartPageState(_ => FinalLandingPage)
       setInitialValues(_ => valueForProdIntent)
@@ -68,7 +68,7 @@ let make = (~goLive) => {
   let updateProdDetails = async values => {
     try {
       let url = getURL(~entityName=USERS, ~userType=#USER_DATA, ~methodType=Post, ())
-      let bodyValues = values->getBody->Js.Json.object_
+      let bodyValues = values->getBody->JSON.Encode.object
       let body = [("ProdIntent", bodyValues)]->LogicUtils.getJsonFromArrayOfJson
       let _ = await updateDetails(url, body, Post, ())
 
@@ -117,7 +117,7 @@ let make = (~goLive) => {
       | GO_LIVE =>
         <Form
           key="go-live-prod-intent-form"
-          initialValues={initialValues->Js.Json.object_}
+          initialValues={initialValues->JSON.Encode.object}
           validate={values =>
             values->validateForm(
               ~fieldsToValidate=formFields,
diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrationDocsPage.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrationDocsPage.res
index bccef55a4..bce295c62 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrationDocsPage.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrationDocsPage.res
@@ -15,13 +15,13 @@ module RequestPage = {
         let url = getURL(~entityName=USERS, ~userType=#USER_DATA, ~methodType=Post, ())
         let requestedBody =
           [
-            ("rating", 5.0->Js.Json.number),
-            ("category", "Platform Request"->Js.Json.string),
-            ("feedbacks", `Request for ${requestedValue}`->Js.Json.string),
+            ("rating", 5.0->JSON.Encode.float),
+            ("category", "Platform Request"->JSON.Encode.string),
+            ("feedbacks", `Request for ${requestedValue}`->JSON.Encode.string),
           ]
           ->LogicUtils.getJsonFromArrayOfJson
           ->HSwitchUtils.getBodyForFeedBack()
-          ->Js.Json.object_
+          ->JSON.Encode.object
 
         let body = [("Feedback", requestedBody)]->LogicUtils.getJsonFromArrayOfJson
         let _ = await updateDetails(url, body, Post, ())
diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
index 5c1e63ef9..213f8e873 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
@@ -538,8 +538,8 @@ let generateBodyBasedOnType = (parentVariant: sectionHeadingVariant, value: requ
       (
         (parentVariant :> string),
         [
-          ("processor_id", processorTypeVal.processorID->Js.Json.string),
-          ("processor_name", processorTypeVal.processorName->Js.Json.string),
+          ("processor_id", processorTypeVal.processorID->JSON.Encode.string),
+          ("processor_name", processorTypeVal.processorName->JSON.Encode.string),
         ]->getJsonFromArrayOfJson,
       ),
     ]->getJsonFromArrayOfJson
@@ -547,14 +547,14 @@ let generateBodyBasedOnType = (parentVariant: sectionHeadingVariant, value: requ
     [
       (
         (parentVariant :> string),
-        [("routing_id", routingTypeVal.routing_id->Js.Json.string)]->getJsonFromArrayOfJson,
+        [("routing_id", routingTypeVal.routing_id->JSON.Encode.string)]->getJsonFromArrayOfJson,
       ),
     ]->getJsonFromArrayOfJson
   | PaymentType(paymentTypeVal) =>
     [
       (
         (parentVariant :> string),
-        [("payment_id", paymentTypeVal.payment_id->Js.Json.string)]->getJsonFromArrayOfJson,
+        [("payment_id", paymentTypeVal.payment_id->JSON.Encode.string)]->getJsonFromArrayOfJson,
       ),
     ]->getJsonFromArrayOfJson
 
@@ -563,14 +563,14 @@ let generateBodyBasedOnType = (parentVariant: sectionHeadingVariant, value: requ
       (
         (parentVariant :> string),
         [
-          ("integration_type", integrationType.integration_type->Js.Json.string),
+          ("integration_type", integrationType.integration_type->JSON.Encode.string),
         ]->getJsonFromArrayOfJson,
       ),
     ]->getJsonFromArrayOfJson
-  | Boolean(_) => (parentVariant :> string)->Js.Json.string
-  | String(str) => str->Js.Json.string
+  | Boolean(_) => (parentVariant :> string)->JSON.Encode.string
+  | String(str) => str->JSON.Encode.string
   | StringEnumType(stringValue) =>
-    [((parentVariant :> string), stringValue->Js.Json.string)]->getJsonFromArrayOfJson
+    [((parentVariant :> string), stringValue->JSON.Encode.string)]->getJsonFromArrayOfJson
   }
 }
 
diff --git a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
index 296b61d63..a01fa4b0a 100644
--- a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
+++ b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
@@ -14,7 +14,7 @@ let useFetchEnumDetails = () => {
         )}?keys=${enumArray->Array.joinWithUnsafe(",")}`
       let res = await fetchDetails(url)
       let responseDict = res->responseDataMapper
-      setEnumVariantValues(._ => responseDict->Js.Json.object_->Js.Json.stringify)
+      setEnumVariantValues(._ => responseDict->JSON.Encode.object->JSON.stringify)
       Js.Nullable.return(responseDict)
     } catch {
     | Js.Exn.Error(e) => {
@@ -45,11 +45,11 @@ let useUpdateEnumInRecoil = () => {
 
       switch body {
       | Boolean(_) => {
-          let booleanDict = [((enumVariant :> string), true->Js.Json.boolean)]->Dict.fromArray
+          let booleanDict = [((enumVariant :> string), true->JSON.Encode.bool)]->Dict.fromArray
           enumDictsArray->Array.push(booleanDict)
         }
       | String(str) => {
-          let stringDict = [((enumVariant :> string), str->Js.Json.string)]->Dict.fromArray
+          let stringDict = [((enumVariant :> string), str->JSON.Encode.string)]->Dict.fromArray
           enumDictsArray->Array.push(stringDict)
         }
       | _ => enumDictsArray->Array.push(bodyValForApi->getDictFromJsonObject)
@@ -57,7 +57,7 @@ let useUpdateEnumInRecoil = () => {
     })
 
     let updatedRecoilValueDict = DictionaryUtils.mergeDicts(enumDictsArray)
-    setEnumVariantValues(._ => updatedRecoilValueDict->Js.Json.object_->Js.Json.stringify)
+    setEnumVariantValues(._ => updatedRecoilValueDict->JSON.Encode.object->JSON.stringify)
     updatedRecoilValueDict
   }
 }
diff --git a/src/screens/HyperSwitch/MixpanelHook.res b/src/screens/HyperSwitch/MixpanelHook.res
index b76e4ceee..b872ad3a7 100644
--- a/src/screens/HyperSwitch/MixpanelHook.res
+++ b/src/screens/HyperSwitch/MixpanelHook.res
@@ -58,7 +58,7 @@ let useSendEvent = () => {
       let _ = await fetchApi(
         `${dashboardUrl}/mixpanel/track`,
         ~method_=Fetch.Post,
-        ~bodyStr=`data=${body->Js.Json.stringifyAny->Option.getOr("")->Js.Global.encodeURI}`,
+        ~bodyStr=`data=${body->JSON.stringifyAny->Option.getOr("")->Js.Global.encodeURI}`,
         (),
       )
     } catch {
diff --git a/src/screens/HyperSwitch/Order/OrderEntity.res b/src/screens/HyperSwitch/Order/OrderEntity.res
index e73bfc4dc..66802fefd 100644
--- a/src/screens/HyperSwitch/Order/OrderEntity.res
+++ b/src/screens/HyperSwitch/Order/OrderEntity.res
@@ -262,8 +262,8 @@ let refundMetaitemToObjMapper = dict => {
   }
 }
 
-let getRefundMetaData: Js.Json.t => refundMetaData = json => {
-  json->Js.Json.decodeObject->Option.getOr(Dict.make())->refundMetaitemToObjMapper
+let getRefundMetaData: JSON.t => refundMetaData = json => {
+  json->JSON.Decode.object->Option.getOr(Dict.make())->refundMetaitemToObjMapper
 }
 
 let refunditemToObjMapper = dict => {
@@ -300,11 +300,11 @@ let attemptsItemToObjMapper = dict => {
   reference_id: dict->getString("reference_id", ""),
 }
 
-let getRefunds: Js.Json.t => array<refunds> = json => {
+let getRefunds: JSON.t => array<refunds> = json => {
   LogicUtils.getArrayDataFromJson(json, refunditemToObjMapper)
 }
 
-let getAttempts: Js.Json.t => array<attempts> = json => {
+let getAttempts: JSON.t => array<attempts> = json => {
   LogicUtils.getArrayDataFromJson(json, attemptsItemToObjMapper)
 }
 
@@ -765,7 +765,7 @@ let getCell = (order, colType: colType): Table.cell => {
   | ProfileId => Text(order.profile_id)
   | Refunds =>
     Text(
-      switch order.refunds->Js.Json.stringifyAny {
+      switch order.refunds->JSON.stringifyAny {
       | None => "-"
       | Some(v) => v
       },
@@ -871,7 +871,7 @@ let itemToObjMapper = dict => {
     connector_transaction_id: dict->getString("connector_transaction_id", ""),
     refunds: dict
     ->getArrayFromDict("refunds", [])
-    ->Js.Json.array
+    ->JSON.Encode.array
     ->getArrayDataFromJson(refunditemToObjMapper),
     profile_id: dict->getString("profile_id", ""),
     frm_message: dict->getFRMDetails,
@@ -880,7 +880,7 @@ let itemToObjMapper = dict => {
   }
 }
 
-let getOrders: Js.Json.t => array<order> = json => {
+let getOrders: JSON.t => array<order> = json => {
   getArrayDataFromJson(json, itemToObjMapper)
 }
 
diff --git a/src/screens/HyperSwitch/Order/OrderHooks.res b/src/screens/HyperSwitch/Order/OrderHooks.res
index 022be2960..4708f233c 100644
--- a/src/screens/HyperSwitch/Order/OrderHooks.res
+++ b/src/screens/HyperSwitch/Order/OrderHooks.res
@@ -1,7 +1,7 @@
 open APIUtils
 
 let useGetOrdersData = (orderId, refetchCounter, setScreenState) => {
-  let (orderData, setOrderData) = React.useState(() => Js.Json.null)
+  let (orderData, setOrderData) = React.useState(() => JSON.Encode.null)
   let fetchDetails = useGetMethod()
   let accountUrl = getURL(
     ~entityName=ORDERS,
diff --git a/src/screens/HyperSwitch/Order/OrderRefundForm.res b/src/screens/HyperSwitch/Order/OrderRefundForm.res
index 86f333945..542dfd803 100644
--- a/src/screens/HyperSwitch/Order/OrderRefundForm.res
+++ b/src/screens/HyperSwitch/Order/OrderRefundForm.res
@@ -21,7 +21,7 @@ let make = (
   )
 
   let initiateValue = Dict.make()
-  let initiateValueJson = initiateValue->Js.Json.object_
+  let initiateValueJson = initiateValue->JSON.Encode.object
 
   let updateRefundDetails = async body => {
     try {
@@ -50,14 +50,14 @@ let make = (
     setShowModal(_ => false)
     let dict = values->LogicUtils.getDictFromJsonObject
     let amount = dict->LogicUtils.getFloat("amount", 0.0)
-    Dict.set(dict, "amount", Js.Math.round(amount *. 100.0)->Js.Json.number)
+    Dict.set(dict, "amount", Js.Math.round(amount *. 100.0)->JSON.Encode.float)
     let body = dict
-    Dict.set(body, "payment_id", order.payment_id->Js.Json.string)
-    Dict.set(body, "refund_type", "instant"->Js.Json.string)
+    Dict.set(body, "payment_id", order.payment_id->JSON.Encode.string)
+    Dict.set(body, "refund_type", "instant"->JSON.Encode.string)
     if !showRefundReason {
-      Dict.set(body, "reason", "RETURN"->Js.Json.string)
+      Dict.set(body, "reason", "RETURN"->JSON.Encode.string)
     }
-    updateRefundDetails(body->Js.Json.object_)->ignore
+    updateRefundDetails(body->JSON.Encode.object)->ignore
     Js.Nullable.null->resolve
   }
 
@@ -65,26 +65,26 @@ let make = (
     let errors = Dict.make()
     let valuesDict =
       values
-      ->Js.Json.decodeObject
+      ->JSON.Decode.object
       ->Option.map(Dict.toArray)
       ->Option.getOr([])
       ->Belt.Array.keepMap(entry => {
         let (key, value) = entry
-        switch value->Js.Json.classify {
-        | JSONString(strVal) => Some((key, Js.Json.string(strVal)))
-        | JSONNumber(int) => Some((key, int->Js.Json.number))
+        switch value->JSON.Classify.classify {
+        | String(strVal) => Some((key, JSON.Encode.string(strVal)))
+        | Number(int) => Some((key, int->JSON.Encode.float))
         | _ => None
         }
       })
       ->Dict.fromArray
     ["amount"]->Array.forEach(key => {
       if Dict.get(valuesDict, key)->Option.isNone {
-        Dict.set(errors, key, "Required"->Js.Json.string)
+        Dict.set(errors, key, "Required"->JSON.Encode.string)
       }
     })
     let amountValue = Dict.get(valuesDict, "amount")
 
-    switch amountValue->Option.flatMap(Js.Json.decodeNumber) {
+    switch amountValue->Option.flatMap(JSON.Decode.float) {
     | Some(floatVal) =>
       if floatVal > amoutAvailableToRefund {
         let amountSplitArr =
@@ -99,14 +99,18 @@ let make = (
         Dict.set(
           errors,
           "amount",
-          `Refund amount should not exceed ${formatted_amount}`->Js.Json.string,
+          `Refund amount should not exceed ${formatted_amount}`->JSON.Encode.string,
         )
       } else if floatVal == 0.0 {
-        Dict.set(errors, "amount", "Please enter refund amount greater than zero"->Js.Json.string)
+        Dict.set(
+          errors,
+          "amount",
+          "Please enter refund amount greater than zero"->JSON.Encode.string,
+        )
       }
     | None => ()
     }
-    errors->Js.Json.object_
+    errors->JSON.Encode.object
   }
 
   <div>
diff --git a/src/screens/HyperSwitch/Order/OrderTypes.res b/src/screens/HyperSwitch/Order/OrderTypes.res
index 9cc4e67ef..cea875131 100644
--- a/src/screens/HyperSwitch/Order/OrderTypes.res
+++ b/src/screens/HyperSwitch/Order/OrderTypes.res
@@ -75,7 +75,7 @@ type order = {
   payment_token: string,
   shipping: string,
   billing: string,
-  metadata: Dict.t<Js.Json.t>,
+  metadata: Dict.t<JSON.t>,
   email: string,
   name: string,
   phone: string,
diff --git a/src/screens/HyperSwitch/Order/OrderUIUtils.res b/src/screens/HyperSwitch/Order/OrderUIUtils.res
index 82e696f99..d671e94b5 100644
--- a/src/screens/HyperSwitch/Order/OrderUIUtils.res
+++ b/src/screens/HyperSwitch/Order/OrderUIUtils.res
@@ -46,7 +46,7 @@ module GenerateSampleDataButton = {
         let generateSampleDataUrl = getURL(~entityName=GENERATE_SAMPLE_DATA, ~methodType=Post, ())
         let _ = await updateDetails(
           generateSampleDataUrl,
-          [("record", 50.0->Js.Json.number)]->Dict.fromArray->Js.Json.object_,
+          [("record", 50.0->JSON.Encode.float)]->Dict.fromArray->JSON.Encode.object,
           Post,
           (),
         )
@@ -191,7 +191,7 @@ let setData = (
   }
 
   if total > 0 {
-    let orderDataDictArr = data->Belt.Array.keepMap(Js.Json.decodeObject)
+    let orderDataDictArr = data->Belt.Array.keepMap(JSON.Decode.object)
 
     let orderData =
       arr
@@ -214,12 +214,12 @@ let getOrdersList = async (
   filterValueJson,
   ~updateDetails: (
     string,
-    Js.Json.t,
+    JSON.t,
     Fetch.requestMethod,
     ~bodyFormData: Fetch.formData=?,
     ~headers: Dict.t<'a>=?,
     unit,
-  ) => promise<Js.Json.t>,
+  ) => promise<JSON.t>,
   ~setOrdersData,
   ~previewOnly,
   ~setScreenState,
@@ -233,7 +233,7 @@ let getOrdersList = async (
 
   try {
     let ordersUrl = getURL(~entityName=ORDERS, ~methodType=Post, ())
-    let res = await updateDetails(ordersUrl, filterValueJson->Js.Json.object_, Fetch.Post, ())
+    let res = await updateDetails(ordersUrl, filterValueJson->JSON.Encode.object, Fetch.Post, ())
     let data = res->LogicUtils.getDictFromJsonObject->LogicUtils.getArrayFromDict("data", [])
     let total = res->getDictFromJsonObject->getInt("total_count", 0)
 
@@ -241,15 +241,20 @@ let getOrdersList = async (
       let payment_id =
         filterValueJson
         ->Dict.get("payment_id")
-        ->Option.getOr(""->Js.Json.string)
-        ->Js.Json.decodeString
+        ->Option.getOr(""->JSON.Encode.string)
+        ->JSON.Decode.string
         ->Option.getOr("")
 
       if Js.Re.test_(%re(`/^[A-Za-z0-9]+_[A-Za-z0-9]+_[0-9]+/`), payment_id) {
         let newID = payment_id->String.replaceRegExp(%re("/_[0-9]$/g"), "")
-        filterValueJson->Dict.set("payment_id", newID->Js.Json.string)
+        filterValueJson->Dict.set("payment_id", newID->JSON.Encode.string)
 
-        let res = await updateDetails(ordersUrl, filterValueJson->Js.Json.object_, Fetch.Post, ())
+        let res = await updateDetails(
+          ordersUrl,
+          filterValueJson->JSON.Encode.object,
+          Fetch.Post,
+          (),
+        )
         let data = res->LogicUtils.getDictFromJsonObject->LogicUtils.getArrayFromDict("data", [])
         let total = res->getDictFromJsonObject->getInt("total_count", 0)
 
diff --git a/src/screens/HyperSwitch/Order/Orders.res b/src/screens/HyperSwitch/Order/Orders.res
index bb56999d4..4ddae2237 100644
--- a/src/screens/HyperSwitch/Order/Orders.res
+++ b/src/screens/HyperSwitch/Order/Orders.res
@@ -34,9 +34,9 @@ let make = (~previewOnly=false) => {
       | Some(dict) =>
         let filters = Dict.make()
 
-        filters->Dict.set("offset", offset->Int.toFloat->Js.Json.number)
+        filters->Dict.set("offset", offset->Int.toFloat->JSON.Encode.float)
         if !(searchText->isEmptyString) {
-          filters->Dict.set("payment_id", searchText->String.trim->Js.Json.string)
+          filters->Dict.set("payment_id", searchText->String.trim->JSON.Encode.string)
         }
 
         dict
diff --git a/src/screens/HyperSwitch/Order/ShowOrder.res b/src/screens/HyperSwitch/Order/ShowOrder.res
index 4d252d30b..bd0e379ee 100644
--- a/src/screens/HyperSwitch/Order/ShowOrder.res
+++ b/src/screens/HyperSwitch/Order/ShowOrder.res
@@ -351,7 +351,7 @@ module Attempts = {
     }
 
     let attemptsData =
-      orderDict->getArrayFromDict("attempts", [])->Js.Json.array->OrderEntity.getAttempts
+      orderDict->getArrayFromDict("attempts", [])->JSON.Encode.array->OrderEntity.getAttempts
 
     let heading = attemptsColumns->Array.map(getAttemptHeading)
 
@@ -451,7 +451,7 @@ module OrderActions = {
   @react.component
   let make = (~orderDict, ~refetch, ~showModal, ~setShowModal) => {
     let (amoutAvailableToRefund, setAmoutAvailableToRefund) = React.useState(_ => 0.0)
-    let refundData = orderDict->getArrayFromDict("refunds", [])->Js.Json.array->getRefunds
+    let refundData = orderDict->getArrayFromDict("refunds", [])->JSON.Encode.array->getRefunds
 
     let amountRefunded = ref(0.0)
     let requestedRefundAmount = ref(0.0)
@@ -508,7 +508,7 @@ module FraudRiskBannerDetails = {
             (),
           )}/${decision->String.toLowerCase}`
 
-        let _ = await updateDetails(ordersDecisionUrl, Dict.make()->Js.Json.object_, Post, ())
+        let _ = await updateDetails(ordersDecisionUrl, Dict.make()->JSON.Encode.object, Post, ())
         showToast(~message="Details Updated", ~toastType=ToastSuccess, ())
         refetch()
       } catch {
@@ -641,7 +641,7 @@ let make = (~id) => {
     orderData
     ->getDictFromJsonObject
     ->getArrayFromDict("refunds", [])
-    ->Js.Json.array
+    ->JSON.Encode.array
     ->OrderEntity.getRefunds
 
   let isRefundDataAvailable = refundData->Array.length !== 0
@@ -650,7 +650,7 @@ let make = (~id) => {
     orderData
     ->getDictFromJsonObject
     ->getArrayFromDict("disputes", [])
-    ->Js.Json.array
+    ->JSON.Encode.array
     ->DisputesEntity.getDisputes
 
   let isDisputeDataVisible = disputesData->Array.length !== 0
@@ -804,7 +804,7 @@ let make = (~id) => {
                 renderContent: () => {
                   <div className="bg-white p-2">
                     <PaymentLogs.PrettyPrintJson
-                      jsonToDisplay={order.metadata->Js.Json.stringifyAny->Option.getOr("")}
+                      jsonToDisplay={order.metadata->JSON.stringifyAny->Option.getOr("")}
                       overrideBackgroundColor="bg-white"
                     />
                   </div>
diff --git a/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res b/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
index 8f9c7e80e..82eb26a09 100644
--- a/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
+++ b/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
@@ -27,7 +27,7 @@ module PrettyPrintJson = {
     let (parsedJson, setParsedJson) = React.useState(_ => "")
     let parseJsonValue = () => {
       try {
-        let parsedValue = jsonToDisplay->Js.Json.parseExn->Js.Json.stringifyWithSpace(3)
+        let parsedValue = jsonToDisplay->JSON.parseExn->JSON.stringifyWithIndent(3)
         setParsedJson(_ => parsedValue)
       } catch {
       | _ => setParsedJson(_ => jsonToDisplay)
@@ -134,7 +134,7 @@ module ApiDetailsComponent = {
         filteredKeys->Array.includes(key)->not
       })
       ->getJsonFromArrayOfJson
-      ->Js.Json.stringify
+      ->JSON.stringify
     | WEBHOOKS => paymentDetailsValue->getString("outgoing_webhook_event_type", "")
     }
 
@@ -412,16 +412,16 @@ let make = (~paymentId, ~createdAt) => {
       let endTime = endTime->Js.Date.fromFloat->Js.Date.toISOString
       let body =
         [
-          ("paymentId", paymentId->Js.Json.string),
+          ("paymentId", paymentId->JSON.Encode.string),
           (
             "timeRange",
-            [("startTime", startTime->Js.Json.string), ("endTime", endTime->Js.Json.string)]
+            [("startTime", startTime->JSON.Encode.string), ("endTime", endTime->JSON.Encode.string)]
             ->Dict.fromArray
-            ->Js.Json.object_,
+            ->JSON.Encode.object,
           ),
         ]
         ->Dict.fromArray
-        ->Js.Json.object_
+        ->JSON.Encode.object
       let sdkLogsArray =
         (await fetchPostDetils(url, body, Post, ()))
         ->getArrayFromJson([])
@@ -432,21 +432,24 @@ let make = (~paymentId, ~createdAt) => {
           let logType = eventDict->getString("log_type", "")
           let updatedEventName =
             logType === "INFO" ? eventName->String.replace("Call", "Response") : eventName
-          eventDict->Dict.set("event_name", updatedEventName->Js.Json.string)
-          eventDict->Dict.set("event_id", sha256(updatedEventName ++ timestamp)->Js.Json.string)
+          eventDict->Dict.set("event_name", updatedEventName->JSON.Encode.string)
+          eventDict->Dict.set("event_id", sha256(updatedEventName ++ timestamp)->JSON.Encode.string)
           eventDict->Dict.set(
             "source",
-            eventDict->getString("source", "")->sourceMapper->Js.Json.string,
+            eventDict->getString("source", "")->sourceMapper->JSON.Encode.string,
           )
           eventDict->Dict.set(
             "checkout_platform",
-            eventDict->getString("component", "")->Js.Json.string,
+            eventDict->getString("component", "")->JSON.Encode.string,
           )
           eventDict->Dict.set(
             "customer_device",
-            eventDict->getString("platform", "")->Js.Json.string,
+            eventDict->getString("platform", "")->JSON.Encode.string,
+          )
+          eventDict->Dict.set(
+            "sdk_version",
+            eventDict->getString("version", "")->JSON.Encode.string,
           )
-          eventDict->Dict.set("sdk_version", eventDict->getString("version", "")->Js.Json.string)
           eventDict->Dict.set(
             "event_name",
             updatedEventName
@@ -454,10 +457,10 @@ let make = (~paymentId, ~createdAt) => {
             ->titleToSnake
             ->snakeToCamel
             ->capitalizeString
-            ->Js.Json.string,
+            ->JSON.Encode.string,
           )
-          eventDict->Dict.set("created_at", timestamp->Js.Json.string)
-          eventDict->Js.Json.object_
+          eventDict->Dict.set("created_at", timestamp->JSON.Encode.string)
+          eventDict->JSON.Encode.object
         })
       let logsArr = sdkLogsArray->Array.filter(sdkLog => {
         let eventDict = sdkLog->getDictFromJsonObject
@@ -526,7 +529,7 @@ let make = (~paymentId, ~createdAt) => {
                 filteredKeys->Array.includes(key)->not
               })
               ->getJsonFromArrayOfJson
-              ->Js.Json.stringify
+              ->JSON.stringify
             let response =
               initialData->getString("log_type", "") === "ERROR"
                 ? initialData->getString("value", "")
diff --git a/src/screens/HyperSwitch/PaymentLogs/PaymentLogsUtils.res b/src/screens/HyperSwitch/PaymentLogs/PaymentLogsUtils.res
index a5b5a3191..2f9f9d4f4 100644
--- a/src/screens/HyperSwitch/PaymentLogs/PaymentLogsUtils.res
+++ b/src/screens/HyperSwitch/PaymentLogs/PaymentLogsUtils.res
@@ -20,7 +20,7 @@ let filteredKeys = [
   "version",
 ]
 
-let sortByCreatedAt = (log1: Js.Json.t, log2: Js.Json.t) => {
+let sortByCreatedAt = (log1: JSON.t, log2: JSON.t) => {
   open LogicUtils
   let getKey = dict => dict->getDictFromJsonObject->getString("created_at", "")->Js.Date.fromString
   let keyA = log1->getKey
diff --git a/src/screens/HyperSwitch/PaymentMethodListType.res b/src/screens/HyperSwitch/PaymentMethodListType.res
index 0e1a1af61..ac82a06b1 100644
--- a/src/screens/HyperSwitch/PaymentMethodListType.res
+++ b/src/screens/HyperSwitch/PaymentMethodListType.res
@@ -25,9 +25,9 @@ open LogicUtils
 let getPaymentExperience = (dict, str) => {
   dict
   ->Dict.get(str)
-  ->Option.flatMap(Js.Json.decodeArray)
+  ->Option.flatMap(JSON.Decode.array)
   ->Option.getOr([])
-  ->Belt.Array.keepMap(Js.Json.decodeObject)
+  ->Belt.Array.keepMap(JSON.Decode.object)
   ->Array.map(json => {
     {
       payment_experience_type: getString(
@@ -43,9 +43,9 @@ let getPaymentExperience = (dict, str) => {
 let getBankNames = (dict, str) => {
   dict
   ->Dict.get(str)
-  ->Option.flatMap(Js.Json.decodeArray)
+  ->Option.flatMap(JSON.Decode.array)
   ->Option.getOr([])
-  ->Belt.Array.keepMap(Js.Json.decodeObject)
+  ->Belt.Array.keepMap(JSON.Decode.object)
   ->Array.map(json => {
     {
       bank_name: getStrArray(json, "bank_name"),
@@ -57,7 +57,7 @@ let getBankNames = (dict, str) => {
 let getAchConnectors = (dict, str) => {
   dict
   ->Dict.get(str)
-  ->Option.flatMap(Js.Json.decodeObject)
+  ->Option.flatMap(JSON.Decode.object)
   ->Option.getOr(Dict.make())
   ->getStrArray("elligible_connectors")
 }
diff --git a/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res b/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
index e2946f51f..ad857b623 100644
--- a/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
+++ b/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
@@ -100,11 +100,11 @@ let make = () => {
 
       let _ = await updateDetails(
         postLoginSurveyUrl,
-        values->generateSurveyJson->Js.Json.object_,
+        values->generateSurveyJson->JSON.Encode.object,
         Post,
         (),
       )
-      HSwitchUtils.setUserDetails("is_metadata_filled", "true"->Js.Json.string)
+      HSwitchUtils.setUserDetails("is_metadata_filled", "true"->JSON.Encode.string)
       setDashboardPageState(_ => #AUTO_CONNECTOR_INTEGRATION)
     } catch {
     | Js.Exn.Error(e) =>
diff --git a/src/screens/HyperSwitch/PostLoginScreen/PostLoginUtils.res b/src/screens/HyperSwitch/PostLoginScreen/PostLoginUtils.res
index da7e82f8d..151e13ed6 100644
--- a/src/screens/HyperSwitch/PostLoginScreen/PostLoginUtils.res
+++ b/src/screens/HyperSwitch/PostLoginScreen/PostLoginUtils.res
@@ -46,24 +46,24 @@ let getBrowswerDetailsPayload = () => {
   let browserDetails = HSwitchUtils.getBrowswerDetails()
   let clientCountry = browserDetails.clientCountry
   let clientCountryDict = Dict.fromArray([
-    ("isoAlpha3", clientCountry.isoAlpha3->Js.Json.string),
-    ("countryName", clientCountry.countryName->getCountryNameFromVarient->Js.Json.string),
-    ("isoAlpha2", clientCountry.isoAlpha2->getCountryCodeStringFromVarient->Js.Json.string),
-    ("timeZones", clientCountry.timeZones->Array.map(ele => ele->Js.Json.string)->Js.Json.array),
+    ("isoAlpha3", clientCountry.isoAlpha3->JSON.Encode.string),
+    ("countryName", clientCountry.countryName->getCountryNameFromVarient->JSON.Encode.string),
+    ("isoAlpha2", clientCountry.isoAlpha2->getCountryCodeStringFromVarient->JSON.Encode.string),
+    ("timeZones", clientCountry.timeZones->LogicUtils.getJsonFromArrayOfString),
   ])
   [
-    ("userAgent", browserDetails.userAgent->Js.Json.string),
-    ("browserVersion", browserDetails.browserVersion->Js.Json.string),
-    ("platform", browserDetails.platform->Js.Json.string),
-    ("browserName", browserDetails.browserName->Js.Json.string),
-    ("browserLanguage", browserDetails.browserLanguage->Js.Json.string),
-    ("screenHeight", browserDetails.screenHeight->Js.Json.string),
-    ("screenWidth", browserDetails.screenWidth->Js.Json.string),
-    ("timeZoneOffset", browserDetails.timeZoneOffset->Js.Json.string),
-    ("clientCountry", clientCountryDict->Js.Json.object_),
+    ("userAgent", browserDetails.userAgent->JSON.Encode.string),
+    ("browserVersion", browserDetails.browserVersion->JSON.Encode.string),
+    ("platform", browserDetails.platform->JSON.Encode.string),
+    ("browserName", browserDetails.browserName->JSON.Encode.string),
+    ("browserLanguage", browserDetails.browserLanguage->JSON.Encode.string),
+    ("screenHeight", browserDetails.screenHeight->JSON.Encode.string),
+    ("screenWidth", browserDetails.screenWidth->JSON.Encode.string),
+    ("timeZoneOffset", browserDetails.timeZoneOffset->JSON.Encode.string),
+    ("clientCountry", clientCountryDict->JSON.Encode.object),
   ]
   ->Dict.fromArray
-  ->Js.Json.object_
+  ->JSON.Encode.object
 }
 
 let generateSurveyJson = values => {
@@ -72,12 +72,12 @@ let generateSurveyJson = values => {
   let survey_json =
     questionForSurvey
     ->Array.map(value => {
-      (value.key, valuesDict->getString(value.key, "")->Js.Json.string)
+      (value.key, valuesDict->getString(value.key, "")->JSON.Encode.string)
     })
     ->Dict.fromArray
   let browserDetailsPayload = getBrowswerDetailsPayload()
   [
-    ("signin_survey", survey_json->Js.Json.object_),
+    ("signin_survey", survey_json->JSON.Encode.object),
     ("browser_details", browserDetailsPayload),
   ]->Dict.fromArray
 }
@@ -85,7 +85,7 @@ let generateSurveyJson = values => {
 let initialValueDict =
   questionForSurvey
   ->Array.map(value => {
-    (value.key, ""->Js.Json.string)
+    (value.key, ""->JSON.Encode.string)
   })
   ->Dict.fromArray
-  ->Js.Json.object_
+  ->JSON.Encode.object
diff --git a/src/screens/HyperSwitch/Recon/Recon.res b/src/screens/HyperSwitch/Recon/Recon.res
index 04bb304fc..7a9f35f19 100644
--- a/src/screens/HyperSwitch/Recon/Recon.res
+++ b/src/screens/HyperSwitch/Recon/Recon.res
@@ -14,7 +14,7 @@ let make = () => {
   let onClickForReconRequest = async () => {
     try {
       let url = getURL(~entityName=RECON, ~reconType=#REQUEST, ~methodType=Get, ())
-      let _ = await updateDetails(url, Js.Json.null, Post, ())
+      let _ = await updateDetails(url, JSON.Encode.null, Post, ())
       let _ = await fetchMerchantAccountDetails()
       showToast(
         ~message=`Thank you for your interest in our reconciliation module. We are currently reviewing your request for access. We will follow up with you soon regarding next steps.`,
diff --git a/src/screens/HyperSwitch/Refunds/Refund.res b/src/screens/HyperSwitch/Refunds/Refund.res
index 6e43ca064..e66a5782d 100644
--- a/src/screens/HyperSwitch/Refunds/Refund.res
+++ b/src/screens/HyperSwitch/Refunds/Refund.res
@@ -20,10 +20,10 @@ let make = () => {
     | Some(dict) =>
       let filters = Dict.make()
 
-      filters->Dict.set("offset", offset->Int.toFloat->Js.Json.number)
+      filters->Dict.set("offset", offset->Int.toFloat->JSON.Encode.float)
       if !(searchText->isEmptyString) {
-        filters->Dict.set("payment_id", searchText->String.trim->Js.Json.string)
-        filters->Dict.set("refund_id", searchText->String.trim->Js.Json.string)
+        filters->Dict.set("payment_id", searchText->String.trim->JSON.Encode.string)
+        filters->Dict.set("refund_id", searchText->String.trim->JSON.Encode.string)
       }
 
       dict
diff --git a/src/screens/HyperSwitch/Refunds/RefundEntity.res b/src/screens/HyperSwitch/Refunds/RefundEntity.res
index 73099bc12..7f74756fc 100644
--- a/src/screens/HyperSwitch/Refunds/RefundEntity.res
+++ b/src/screens/HyperSwitch/Refunds/RefundEntity.res
@@ -164,7 +164,7 @@ let itemToObjMapper = dict => {
   }
 }
 
-let getRefunds: Js.Json.t => array<refunds> = json => {
+let getRefunds: JSON.t => array<refunds> = json => {
   getArrayDataFromJson(json, itemToObjMapper)
 }
 
diff --git a/src/screens/HyperSwitch/Refunds/RefundHook.res b/src/screens/HyperSwitch/Refunds/RefundHook.res
index c7ad662fa..416d1c00c 100644
--- a/src/screens/HyperSwitch/Refunds/RefundHook.res
+++ b/src/screens/HyperSwitch/Refunds/RefundHook.res
@@ -1,7 +1,7 @@
 open APIUtils
 
 let useGetRefundData = (refundId, setScreenState) => {
-  let (refundData, setRefundData) = React.useState(() => Js.Json.null)
+  let (refundData, setRefundData) = React.useState(() => JSON.Encode.null)
   let fetchDetails = useGetMethod()
   let accountUrl = getURL(~entityName=REFUNDS, ~methodType=Get, ~id=Some(refundId), ())
 
diff --git a/src/screens/HyperSwitch/Refunds/RefundUtils.res b/src/screens/HyperSwitch/Refunds/RefundUtils.res
index 82b7bc2ae..ee7781653 100644
--- a/src/screens/HyperSwitch/Refunds/RefundUtils.res
+++ b/src/screens/HyperSwitch/Refunds/RefundUtils.res
@@ -2,12 +2,12 @@ let getRefundsList = async (
   filterValueJson,
   ~updateDetails: (
     string,
-    Js.Json.t,
+    JSON.t,
     Fetch.requestMethod,
     ~bodyFormData: Fetch.formData=?,
     ~headers: Dict.t<'a>=?,
     unit,
-  ) => promise<Js.Json.t>,
+  ) => promise<JSON.t>,
   ~setRefundsData,
   ~setScreenState,
   ~offset,
@@ -19,7 +19,7 @@ let getRefundsList = async (
   setScreenState(_ => PageLoaderWrapper.Loading)
   try {
     let refundsUrl = getURL(~entityName=REFUNDS, ~methodType=Post, ~id=Some("refund-post"), ())
-    let res = await updateDetails(refundsUrl, filterValueJson->Js.Json.object_, Fetch.Post, ())
+    let res = await updateDetails(refundsUrl, filterValueJson->JSON.Encode.object, Fetch.Post, ())
     let data = res->getDictFromJsonObject->getArrayFromDict("data", [])
     let total = res->getDictFromJsonObject->getInt("total_count", 0)
 
@@ -29,7 +29,7 @@ let getRefundsList = async (
     }
 
     if total > 0 {
-      let refundDataDictArr = data->Belt.Array.keepMap(Js.Json.decodeObject)
+      let refundDataDictArr = data->Belt.Array.keepMap(JSON.Decode.object)
       let refundData = arr->Array.concat(refundDataDictArr)->Array.map(RefundEntity.itemToObjMapper)
       let list = refundData->Array.map(Js.Nullable.return)
       setRefundsData(_ => list)
diff --git a/src/screens/HyperSwitch/Refunds/ShowRefund.res b/src/screens/HyperSwitch/Refunds/ShowRefund.res
index 3c1d1d158..540adc85b 100644
--- a/src/screens/HyperSwitch/Refunds/ShowRefund.res
+++ b/src/screens/HyperSwitch/Refunds/ShowRefund.res
@@ -91,7 +91,7 @@ let make = (~id) => {
   React.useEffect1(() => {
     let jsonArray = [orderDataForPaymentId]
     let paymentArray =
-      jsonArray->Js.Json.array->LogicUtils.getArrayDataFromJson(OrderEntity.itemToObjMapper)
+      jsonArray->JSON.Encode.array->LogicUtils.getArrayDataFromJson(OrderEntity.itemToObjMapper)
     setOrdersData(_ => paymentArray->Array.map(Js.Nullable.return))
     None
   }, [orderDataForPaymentId])
diff --git a/src/screens/HyperSwitch/Routing/ActiveRouting.res b/src/screens/HyperSwitch/Routing/ActiveRouting.res
index 513f58ea5..03a2c7976 100644
--- a/src/screens/HyperSwitch/Routing/ActiveRouting.res
+++ b/src/screens/HyperSwitch/Routing/ActiveRouting.res
@@ -35,13 +35,13 @@ module ActionButtons = {
       try {
         let requestedBody =
           [
-            ("rating", 5.0->Js.Json.number),
-            ("category", "Routing request"->Js.Json.string),
-            ("feedbacks", `Request for Cost based Routing`->Js.Json.string),
+            ("rating", 5.0->JSON.Encode.float),
+            ("category", "Routing request"->JSON.Encode.string),
+            ("feedbacks", `Request for Cost based Routing`->JSON.Encode.string),
           ]
           ->LogicUtils.getJsonFromArrayOfJson
           ->HSwitchUtils.getBodyForFeedBack()
-          ->Js.Json.object_
+          ->JSON.Encode.object
 
         let feedbackUrl = APIUtils.getURL(
           ~entityName=USERS,
@@ -206,7 +206,7 @@ module LevelWiseRoutingSection = {
 }
 
 @react.component
-let make = (~routingType: array<Js.Json.t>) => {
+let make = (~routingType: array<JSON.t>) => {
   <div className="mt-4 flex flex-col gap-6">
     {routingType
     ->Array.mapWithIndex((ele, i) => {
diff --git a/src/screens/HyperSwitch/Routing/DefaultRouting.res b/src/screens/HyperSwitch/Routing/DefaultRouting.res
index 4591cfb53..3c5158813 100644
--- a/src/screens/HyperSwitch/Routing/DefaultRouting.res
+++ b/src/screens/HyperSwitch/Routing/DefaultRouting.res
@@ -25,7 +25,7 @@ let make = () => {
     let connectorList =
       profileList
       ->Array.get(0)
-      ->Option.getOr(Js.Json.null)
+      ->Option.getOr(JSON.Encode.null)
       ->LogicUtils.getDictFromJsonObject
       ->LogicUtils.getArrayFromDict("connectors", [])
     if connectorList->Array.length > 0 {
@@ -78,7 +78,7 @@ let make = () => {
         )}/profile/${profile}`
 
       (
-        await updateDetails(defaultFallbackUpdateUrl, defaultPayload->Js.Json.array, Post, ())
+        await updateDetails(defaultFallbackUpdateUrl, defaultPayload->JSON.Encode.array, Post, ())
       )->ignore
       RescriptReactRouter.replace(`/routing/default`)
       setScreenState(_ => PageLoaderWrapper.Success)
@@ -99,7 +99,7 @@ let make = () => {
   }
 
   <div>
-    <Form initialValues={Dict.make()->Js.Json.object_}>
+    <Form initialValues={Dict.make()->JSON.Encode.object}>
       <div className="w-full flex justify-between">
         <BasicDetailsForm.BusinessProfileInp
           setProfile={setProfile}
@@ -128,7 +128,7 @@ let make = () => {
           </div>
         </div>
         {
-          let keyExtractor = (index, gateway: Js.Json.t, isDragging) => {
+          let keyExtractor = (index, gateway: JSON.t, isDragging) => {
             let style = isDragging ? "border rounded-md bg-jp-gray-100 dark:bg-jp-gray-950" : ""
             <div
               className={`h-14 px-3 flex flex-row items-center justify-between text-jp-gray-900 dark:text-jp-gray-600 border-jp-gray-500 dark:border-jp-gray-960
diff --git a/src/screens/HyperSwitch/Routing/HistoryEntity.res b/src/screens/HyperSwitch/Routing/HistoryEntity.res
index 47ecffdd9..444464c4a 100644
--- a/src/screens/HyperSwitch/Routing/HistoryEntity.res
+++ b/src/screens/HyperSwitch/Routing/HistoryEntity.res
@@ -81,7 +81,7 @@ let getTableCell = activeRoutingIds => {
 
 let historyDefaultCols = Recoil.atom(. "hyperSwitchHistoryDefaultCols", defaultColumns)
 
-let getHistoryRules: Js.Json.t => array<historyData> = json => {
+let getHistoryRules: JSON.t => array<historyData> = json => {
   getArrayDataFromJson(json, itemToObjMapper)
 }
 
diff --git a/src/screens/HyperSwitch/Routing/PriorityRouting.res b/src/screens/HyperSwitch/Routing/PriorityRouting.res
index 00fd99e8c..c00e781ad 100644
--- a/src/screens/HyperSwitch/Routing/PriorityRouting.res
+++ b/src/screens/HyperSwitch/Routing/PriorityRouting.res
@@ -31,7 +31,7 @@ module SimpleRoutingView = {
     let saveConfiguration = async () => {
       try {
         setScreenState(_ => PageLoaderWrapper.Loading)
-        let data = gateways->Array.map(str => str->Js.Json.string)
+        let data = gateways->Array.map(str => str->JSON.Encode.string)
 
         let activateRuleURL = getURL(~entityName=ROUTING, ~methodType=Post, ~id=None, ())
 
@@ -43,7 +43,7 @@ module SimpleRoutingView = {
             nameFromForm->LogicUtils.getStringFromJson(""),
             descriptionFromForm->LogicUtils.getStringFromJson(""),
             "",
-          )->Js.Json.object_,
+          )->JSON.Encode.object,
           Post,
           (),
         )
@@ -65,7 +65,7 @@ module SimpleRoutingView = {
       try {
         setScreenState(_ => Loading)
         let activateRuleURL = getURL(~entityName=ROUTING, ~methodType=Post, ~id=routingId, ())
-        let _ = await updateDetails(activateRuleURL, Dict.make()->Js.Json.object_, Post, ())
+        let _ = await updateDetails(activateRuleURL, Dict.make()->JSON.Encode.object, Post, ())
         showToast(
           ~message="Successfully Activated Selected Configuration !",
           ~toastType=ToastState.ToastSuccess,
@@ -243,14 +243,14 @@ let make = (~routingRuleId, ~isActive) => {
           routingJson
           ->getDictFromJsonObject
           ->getString("name", "This is a default text")
-          ->Js.Json.string,
+          ->JSON.Encode.string,
         ),
         (
           "description",
           routingJson
           ->getDictFromJsonObject
           ->getString("description", "This is a default text")
-          ->Js.Json.string,
+          ->JSON.Encode.string,
         ),
       ])
       setFormState(_ => ViewConfig)
@@ -290,7 +290,7 @@ let make = (~routingRuleId, ~isActive) => {
 
   <div>
     <PageLoaderWrapper screenState>
-      <Form initialValues={initialValues->Js.Json.object_}>
+      <Form initialValues={initialValues->JSON.Encode.object}>
         <div className="w-full flex flex-row  justify-between">
           <div className="w-full">
             {if formState != CreateConfig {
diff --git a/src/screens/HyperSwitch/Routing/RoutingStack.res b/src/screens/HyperSwitch/Routing/RoutingStack.res
index d92ec0267..6ce9be08a 100644
--- a/src/screens/HyperSwitch/Routing/RoutingStack.res
+++ b/src/screens/HyperSwitch/Routing/RoutingStack.res
@@ -49,10 +49,10 @@ let make = (~remainingPath, ~previewOnly=false) => {
 
       let recordsData =
         configuredRules
-        ->Js.Json.array
-        ->Js.Json.decodeArray
+        ->JSON.Encode.array
+        ->JSON.Decode.array
         ->Option.getOr([])
-        ->Belt.Array.keepMap(Js.Json.decodeObject)
+        ->Belt.Array.keepMap(JSON.Decode.object)
         ->Array.map(HistoryEntity.itemToObjMapper)
 
       // To sort the data in a format that active routing always comes at top of the table
@@ -102,8 +102,8 @@ let make = (~remainingPath, ~previewOnly=false) => {
         setRoutingType(_ => routingArr)
       } else {
         await fetchRoutingRecords([])
-        let defaultFallback = [("kind", "default"->Js.Json.string)]->Dict.fromArray
-        setRoutingType(_ => [defaultFallback->Js.Json.object_])
+        let defaultFallback = [("kind", "default"->JSON.Encode.string)]->Dict.fromArray
+        setRoutingType(_ => [defaultFallback->JSON.Encode.object])
         setScreenState(_ => PageLoaderWrapper.Success)
       }
     } catch {
diff --git a/src/screens/HyperSwitch/Routing/RoutingTypes.res b/src/screens/HyperSwitch/Routing/RoutingTypes.res
index 4b0a522fa..e6ba92271 100644
--- a/src/screens/HyperSwitch/Routing/RoutingTypes.res
+++ b/src/screens/HyperSwitch/Routing/RoutingTypes.res
@@ -69,4 +69,4 @@ type historyData = {
   created_at: string,
 }
 
-type value = {"type": Js.Json.t, "value": Js.Json.t}
+type value = {"type": JSON.t, "value": JSON.t}
diff --git a/src/screens/HyperSwitch/Routing/RoutingUtils.res b/src/screens/HyperSwitch/Routing/RoutingUtils.res
index 5e7cbd624..423533d8d 100644
--- a/src/screens/HyperSwitch/Routing/RoutingUtils.res
+++ b/src/screens/HyperSwitch/Routing/RoutingUtils.res
@@ -1,6 +1,6 @@
 open RoutingTypes
 open LogicUtils
-external toWasm: Dict.t<Js.Json.t> => wasmModule = "%identity"
+external toWasm: Dict.t<JSON.t> => wasmModule = "%identity"
 
 let defaultThreeDsObjectValue: routingOutputType = {
   override_3ds: "three_ds",
@@ -43,13 +43,13 @@ let routingTypeName = routingType => {
 
 let getRoutingPayload = (data, routingType, name, description, profileId) => {
   let connectorsOrder =
-    [("data", data->Js.Json.array), ("type", routingType->Js.Json.string)]->Dict.fromArray
+    [("data", data->JSON.Encode.array), ("type", routingType->JSON.Encode.string)]->Dict.fromArray
 
   [
-    ("name", name->Js.Json.string),
-    ("description", description->Js.Json.string),
-    ("profile_id", profileId->Js.Json.string),
-    ("algorithm", connectorsOrder->Js.Json.object_),
+    ("name", name->JSON.Encode.string),
+    ("description", description->JSON.Encode.string),
+    ("profile_id", profileId->JSON.Encode.string),
+    ("algorithm", connectorsOrder->JSON.Encode.object),
   ]->Dict.fromArray
 }
 
@@ -121,7 +121,7 @@ let getContent = routetype =>
   }
 
 //Volume
-let getGatewayTypes = (arr: array<Js.Json.t>) => {
+let getGatewayTypes = (arr: array<JSON.t>) => {
   let tempArr = arr->Array.map(value => {
     let val = value->getDictFromJsonObject
     let connectorDict = val->getDictfromDict("connector")
@@ -137,10 +137,10 @@ let getGatewayTypes = (arr: array<Js.Json.t>) => {
 
 // Advanced
 let valueTypeMapper = dict => {
-  let value = switch Dict.get(dict, "value")->Option.map(Js.Json.classify) {
-  | Some(JSONArray(arr)) => StringArray(arr->getStrArrayFromJsonArray)
-  | Some(JSONString(st)) => String(st)
-  | Some(JSONNumber(num)) => Int(num->Float.toInt)
+  let value = switch Dict.get(dict, "value")->Option.map(JSON.Classify.classify) {
+  | Some(Array(arr)) => StringArray(arr->getStrArrayFromJsonArray)
+  | Some(String(st)) => String(st)
+  | Some(Number(num)) => Int(num->Float.toInt)
   | _ => String("")
   }
   value
@@ -159,11 +159,11 @@ let constructNameDescription = routingType => {
   Dict.fromArray([
     (
       "name",
-      `${routingText->LogicUtils.capitalizeString} Based Routing-${getCurrentUTCTime()}`->Js.Json.string,
+      `${routingText->LogicUtils.capitalizeString} Based Routing-${getCurrentUTCTime()}`->JSON.Encode.string,
     ),
     (
       "description",
-      `This is a ${routingText} based routing created at ${currentTimeInUTC}`->Js.Json.string,
+      `This is a ${routingText} based routing created at ${currentTimeInUTC}`->JSON.Encode.string,
     ),
   ])
 }
@@ -173,7 +173,7 @@ let currentTabNameRecoilAtom = Recoil.atom(. "currentTabName", "ActiveTab")
 module SaveAndActivateButton = {
   @react.component
   let make = (
-    ~onSubmit: (Js.Json.t, 'a) => promise<Js.Nullable.t<Js.Json.t>>,
+    ~onSubmit: (JSON.t, 'a) => promise<Js.Nullable.t<JSON.t>>,
     ~handleActivateConfiguration,
   ) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
@@ -184,7 +184,7 @@ module SaveAndActivateButton = {
       try {
         let onSubmitResponse = await onSubmit(formState.values, false)
         let currentActivatedFromJson =
-          onSubmitResponse->Js.Nullable.toOption->Option.getOr(Js.Json.null)
+          onSubmitResponse->Js.Nullable.toOption->Option.getOr(JSON.Encode.null)
         let currentActivatedId =
           currentActivatedFromJson->LogicUtils.getDictFromJsonObject->LogicUtils.getString("id", "")
         let _ = await handleActivateConfiguration(Some(currentActivatedId))
@@ -226,7 +226,7 @@ module ConfigureRuleButton = {
 let validateNameAndDescription = (~dict, ~errors) => {
   ["name", "description"]->Array.forEach(field => {
     if dict->LogicUtils.getString(field, "")->String.trim === "" {
-      errors->Dict.set(field, `Please provide ${field} field`->Js.Json.string)
+      errors->Dict.set(field, `Please provide ${field} field`->JSON.Encode.string)
     }
   })
 }
@@ -237,7 +237,7 @@ let checkIfValuePresent = dict => {
   valueFromObject
   ->getArrayFromDict("value", [])
   ->Array.filter(ele => {
-    ele != ""->Js.Json.string
+    ele != ""->JSON.Encode.string
   })
   ->Array.length > 0 ||
   valueFromObject->getString("value", "")->String.length > 0 ||
@@ -247,7 +247,7 @@ let checkIfValuePresent = dict => {
 }
 
 let validateConditionJson = (json, keys) => {
-  switch json->Js.Json.decodeObject {
+  switch json->JSON.Decode.object {
   | Some(dict) =>
     keys->Array.every(key => dict->Dict.get(key)->Option.isSome) && dict->checkIfValuePresent
   | None => false
@@ -263,9 +263,9 @@ let validateConditionsFor3ds = dict => {
 }
 
 let getRecordsObject = json => {
-  switch Js.Json.classify(json) {
-  | JSONObject(jsonDict) => jsonDict->getArrayFromDict("records", [])
-  | JSONArray(jsonArray) => jsonArray
+  switch JSON.Classify.classify(json) {
+  | Object(jsonDict) => jsonDict->getArrayFromDict("records", [])
+  | Array(jsonArray) => jsonArray
   | _ => []
   }
 }
diff --git a/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res b/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res
index 078c93d37..dd89dd9e3 100644
--- a/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res
+++ b/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res
@@ -37,7 +37,7 @@ module VolumeRoutingView = {
       try {
         setScreenState(_ => PageLoaderWrapper.Loading)
         let activateRuleURL = getURL(~entityName=ROUTING, ~methodType=Post, ~id=activatingId, ())
-        let _ = await updateDetails(activateRuleURL, Dict.make()->Js.Json.object_, Post, ())
+        let _ = await updateDetails(activateRuleURL, Dict.make()->JSON.Encode.object, Post, ())
         showToast(~message="Successfully Activated !", ~toastType=ToastState.ToastSuccess, ())
         RescriptReactRouter.replace(`/routing?`)
         setScreenState(_ => Success)
@@ -66,7 +66,7 @@ module VolumeRoutingView = {
       try {
         setScreenState(_ => Loading)
         let deactivateRoutingURL = `${getURL(~entityName=ROUTING, ~methodType=Post, ())}/deactivate`
-        let body = [("profile_id", profile->Js.Json.string)]->Dict.fromArray->Js.Json.object_
+        let body = [("profile_id", profile->JSON.Encode.string)]->Dict.fromArray->JSON.Encode.object
         let _ = await updateDetails(deactivateRoutingURL, body, Post, ())
         showToast(~message="Successfully Deactivated !", ~toastType=ToastState.ToastSuccess, ())
         RescriptReactRouter.replace(`/routing?`)
@@ -237,7 +237,7 @@ let make = (~routingRuleId, ~isActive) => {
       | None => {
           setInitialValues(_ => {
             let dict = VOLUME_SPLIT->RoutingUtils.constructNameDescription
-            dict->Dict.set("profile_id", profile->Js.Json.string)
+            dict->Dict.set("profile_id", profile->JSON.Encode.string)
             dict->Dict.set(
               "algorithm",
               {
@@ -258,7 +258,7 @@ let make = (~routingRuleId, ~isActive) => {
     }
   }
 
-  let validate = (values: Js.Json.t) => {
+  let validate = (values: JSON.t) => {
     let errors = Dict.make()
     let dict = values->getDictFromJsonObject
     let validateGateways = dict => {
@@ -267,7 +267,7 @@ let make = (~routingRuleId, ~isActive) => {
         Some("Need atleast 1 Gateway")
       } else {
         let distributionPercentages = gateways->Belt.Array.keepMap(json => {
-          json->Js.Json.decodeObject->Option.flatMap(getOptionFloat(_, "split"))
+          json->JSON.Decode.object->Option.flatMap(getOptionFloat(_, "split"))
         })
         let distributionPercentageSum =
           distributionPercentages->Array.reduce(0., (sum, distribution) => sum +. distribution)
@@ -288,10 +288,10 @@ let make = (~routingRuleId, ~isActive) => {
 
     let volumeBasedDistributionDict = dict->getObj("algorithm", Dict.make())
     switch volumeBasedDistributionDict->validateGateways {
-    | Some(error) => errors->Dict.set("Volume Based Distribution", error->Js.Json.string)
+    | Some(error) => errors->Dict.set("Volume Based Distribution", error->JSON.Encode.string)
     | None => ()
     }
-    errors->Js.Json.object_
+    errors->JSON.Encode.object
   }
 
   let onSubmit = async (values, isSaveRule) => {
@@ -328,7 +328,7 @@ let make = (~routingRuleId, ~isActive) => {
       <Form
         onSubmit={(values, _) => onSubmit(values, true)}
         validate
-        initialValues={initialValues->Js.Json.object_}>
+        initialValues={initialValues->JSON.Encode.object}>
         <div className="w-full flex justify-between">
           <div className="w-full">
             <BasicDetailsForm
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
index d00cba098..f165ec8f6 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
@@ -23,7 +23,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
 
   let selectedOptions = React.useMemo1(() => {
     gateWaysInput.value
-    ->Js.Json.decodeArray
+    ->JSON.Decode.array
     ->Option.getOr([])
     ->Belt.Array.keepMap(item => {
       Some(AdvancedRoutingUtils.connectorSelectionDataMapperFromJson(item))
@@ -70,9 +70,9 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
     ->Array.map(option =>
       AdvancedRoutingUtils.getConnectorStringFromConnectorSelectionData(
         option,
-      ).merchant_connector_id->Js.Json.string
+      ).merchant_connector_id->JSON.Encode.string
     )
-    ->Js.Json.array,
+    ->JSON.Encode.array,
     checked: true,
   }
 
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
index 99f669c61..1ccc1c244 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
@@ -3,7 +3,7 @@ open AdvancedRoutingTypes
 open AdvancedRoutingUtils
 open LogicUtils
 
-external toWasm: Dict.t<Js.Json.t> => RoutingTypes.wasmModule = "%identity"
+external toWasm: Dict.t<JSON.t> => RoutingTypes.wasmModule = "%identity"
 
 module Add3DSCondition = {
   @react.component
@@ -323,7 +323,7 @@ For example: If card_type = credit && amount > 100, route 60% to Stripe and 40%
           {
             let notFirstRule = ruleInput.value->getArrayFromJson([])->Array.length > 1
 
-            let rule = ruleInput.value->Js.Json.decodeArray->Option.getOr([])
+            let rule = ruleInput.value->JSON.Decode.array->Option.getOr([])
             let keyExtractor = (index, _rule, isDragging) => {
               let id = {`${rulesJsonPath}[${string_of_int(index)}]`}
 
@@ -462,7 +462,7 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
     None
   }, [routingRuleId])
 
-  let validate = (values: Js.Json.t) => {
+  let validate = (values: JSON.t) => {
     let dict = values->LogicUtils.getDictFromJsonObject
     let convertedObject = values->AdvancedRoutingUtils.getRoutingTypesFromJson
 
@@ -515,31 +515,34 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
     let rulesArray = convertedObject.algorithm.data.rules
 
     if rulesArray->Array.length === 0 {
-      errors->Dict.set(`Rules`, "Minimum 1 rule needed"->Js.Json.string)
+      errors->Dict.set(`Rules`, "Minimum 1 rule needed"->JSON.Encode.string)
     } else {
       rulesArray->Array.forEachWithIndex((rule, i) => {
         let connectorDetails = rule.connectorSelection.data->Option.getOr([])
 
         switch connectorDetails->validateGateways {
         | Some(error) =>
-          errors->Dict.set(`Rule ${(i + 1)->string_of_int} - Gateway`, error->Js.Json.string)
+          errors->Dict.set(`Rule ${(i + 1)->string_of_int} - Gateway`, error->JSON.Encode.string)
         | None => ()
         }
 
         if !AdvancedRoutingUtils.validateStatements(rule.statements) {
-          errors->Dict.set(`Rule ${(i + 1)->string_of_int} - Condition`, `Invalid`->Js.Json.string)
+          errors->Dict.set(
+            `Rule ${(i + 1)->string_of_int} - Condition`,
+            `Invalid`->JSON.Encode.string,
+          )
         }
       })
     }
 
-    errors->Js.Json.object_
+    errors->JSON.Encode.object
   }
 
   let handleActivateConfiguration = async activatingId => {
     try {
       setScreenState(_ => Loading)
       let activateRuleURL = getURL(~entityName=ROUTING, ~methodType=Post, ~id=activatingId, ())
-      let _ = await updateDetails(activateRuleURL, Dict.make()->Js.Json.object_, Post, ())
+      let _ = await updateDetails(activateRuleURL, Dict.make()->JSON.Encode.object, Post, ())
       showToast(~message="Successfully Activated !", ~toastType=ToastState.ToastSuccess, ())
       RescriptReactRouter.replace(`/routing?`)
       setScreenState(_ => Success)
@@ -567,7 +570,7 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
     try {
       setScreenState(_ => Loading)
       let deactivateRoutingURL = `${getURL(~entityName=ROUTING, ~methodType=Post, ())}/deactivate`
-      let body = [("profile_id", profile->Js.Json.string)]->Dict.fromArray->Js.Json.object_
+      let body = [("profile_id", profile->JSON.Encode.string)]->Dict.fromArray->JSON.Encode.object
       let _ = await updateDetails(deactivateRoutingURL, body, Post, ())
       showToast(~message="Successfully Deactivated !", ~toastType=ToastState.ToastSuccess, ())
       RescriptReactRouter.replace(`/routing?`)
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingTypes.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingTypes.res
index b3ff34eed..7faec6771 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingTypes.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingTypes.res
@@ -30,7 +30,7 @@ type connectorSelectionData =
   | VolumeObject(volumeSplitConnectorSelectionData)
   | PriorityObject(connector)
 
-type value = {\"type": string, value: Js.Json.t}
+type value = {\"type": string, value: JSON.t}
 
 type surchargeDetailsSurchargePropertyValueType = {percentage?: float, amount?: float}
 
@@ -56,7 +56,7 @@ type statement = {
   comparison: string,
   value: value,
   logical?: string,
-  metadata?: Js.Json.t,
+  metadata?: JSON.t,
 }
 
 type rule = {
@@ -68,7 +68,7 @@ type rule = {
 type algorithmData = {
   defaultSelection: connectorSelection,
   rules: array<rule>,
-  metadata: Js.Json.t,
+  metadata: JSON.t,
 }
 
 type algorithm = {data: algorithmData, \"type"?: string}
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index d0add3ee3..267c4828a 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -38,7 +38,7 @@ module OperatorInp = {
   @react.component
   let make = (~fieldsArray: array<ReactFinalForm.fieldRenderProps>, ~keyType) => {
     let defaultInput: ReactFinalForm.fieldRenderProps = {
-      input: ReactFinalForm.makeInputRecord(""->Js.Json.string, _e => ()),
+      input: ReactFinalForm.makeInputRecord(""->JSON.Encode.string, _e => ()),
       meta: ReactFinalForm.makeCustomError(None),
     }
     let field = (fieldsArray->Array.get(0)->Option.getOr(defaultInput)).input
@@ -68,7 +68,7 @@ module OperatorInp = {
 
       setOpVals(_ => operatorVals)
 
-      if operator.value->Js.Json.decodeString->Option.isNone {
+      if operator.value->JSON.Decode.string->Option.isNone {
         operator.onChange(operatorVals[0]->Identity.anyTypeToReactEvent)
       }
       None
@@ -80,7 +80,7 @@ module OperatorInp = {
         ("IS_NOT", "Includes results that does not match the filter value(s)."),
         ("NOT_CONTAINS", "Includes results except any value for the filter property."),
       ]->Dict.fromArray
-    let disableSelect = field.value->Js.Json.decodeString->Option.getOr("")->String.length === 0
+    let disableSelect = field.value->JSON.Decode.string->Option.getOr("")->String.length === 0
 
     let operatorOptions = opVals->Array.map(opVal => {
       let obj: SelectBox.dropdownOption = {
@@ -193,7 +193,7 @@ module MetadataInp = {
         let arrStr = valSplit->Array.map(item => {
           String.trim(item)
         })
-        let finalVal = Array.joinWith(arrStr, ",")->Js.Json.string
+        let finalVal = Array.joinWith(arrStr, ",")->JSON.Encode.string
 
         valueField.onChange(finalVal->Identity.anyTypeToReactEvent)
       },
@@ -410,7 +410,7 @@ module MakeRuleField = {
   let make = (~id, ~isExpanded, ~wasm, ~isFrom3ds, ~isFromSurcharge) => {
     let ruleJsonPath = `${id}.statements`
     let conditionsInput = ReactFinalForm.useField(ruleJsonPath).input
-    let fields = conditionsInput.value->Js.Json.decodeArray->Option.getOr([])
+    let fields = conditionsInput.value->JSON.Decode.array->Option.getOr([])
     let plusBtnEnabled = true
     //fields->Array.every(validateConditionJson)
     let onPlusClick = _ => {
@@ -419,7 +419,7 @@ module MakeRuleField = {
         conditionsInput.onChange(
           Array.concat(
             fields,
-            [toAdd->Js.Json.object_],
+            [toAdd->JSON.Encode.object],
           )->Identity.arrayOfGenericTypeToFormReactEvent,
         )
       }
@@ -510,7 +510,7 @@ module ConfigureRuleButton = {
 module SaveAndActivateButton = {
   @react.component
   let make = (
-    ~onSubmit: (Js.Json.t, 'a) => promise<Js.Nullable.t<Js.Json.t>>,
+    ~onSubmit: (JSON.t, 'a) => promise<Js.Nullable.t<JSON.t>>,
     ~handleActivateConfiguration,
   ) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
@@ -521,7 +521,7 @@ module SaveAndActivateButton = {
       try {
         let onSubmitResponse = await onSubmit(formState.values, false)
         let currentActivatedFromJson =
-          onSubmitResponse->Js.Nullable.toOption->Option.getOr(Js.Json.null)
+          onSubmitResponse->Js.Nullable.toOption->Option.getOr(JSON.Encode.null)
         let currentActivatedId =
           currentActivatedFromJson->LogicUtils.getDictFromJsonObject->LogicUtils.getString("id", "")
         let _ = await handleActivateConfiguration(Some(currentActivatedId))
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
index db8df315a..276026989 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
@@ -80,7 +80,7 @@ let variantTypeMapper: string => AdvancedRoutingTypes.variantType = variantType
   }
 }
 
-let getStatementValue: Dict.t<Js.Json.t> => AdvancedRoutingTypes.value = valueDict => {
+let getStatementValue: Dict.t<JSON.t> => AdvancedRoutingTypes.value = valueDict => {
   open LogicUtils
   {
     \"type": valueDict->getString("type", ""),
@@ -88,7 +88,7 @@ let getStatementValue: Dict.t<Js.Json.t> => AdvancedRoutingTypes.value = valueDi
   }
 }
 
-let statementTypeMapper: Dict.t<Js.Json.t> => AdvancedRoutingTypes.statement = dict => {
+let statementTypeMapper: Dict.t<JSON.t> => AdvancedRoutingTypes.statement = dict => {
   open LogicUtils
   {
     lhs: dict->getString("lhs", ""),
@@ -98,7 +98,7 @@ let statementTypeMapper: Dict.t<Js.Json.t> => AdvancedRoutingTypes.statement = d
   }
 }
 
-let conditionTypeMapper = (statementArr: array<Js.Json.t>) => {
+let conditionTypeMapper = (statementArr: array<JSON.t>) => {
   open LogicUtils
   let statements = statementArr->Array.reduce([], (acc, statementJson) => {
     let conditionArray = statementJson->getDictFromJsonObject->getArrayFromDict("condition", [])
@@ -120,7 +120,7 @@ let conditionTypeMapper = (statementArr: array<Js.Json.t>) => {
 }
 
 let volumeSplitConnectorSelectionDataMapper: Dict.t<
-  Js.Json.t,
+  JSON.t,
 > => AdvancedRoutingTypes.volumeSplitConnectorSelectionData = dict => {
   open LogicUtils
   {
@@ -135,7 +135,7 @@ let volumeSplitConnectorSelectionDataMapper: Dict.t<
 }
 
 let priorityConnectorSelectionDataMapper: Dict.t<
-  Js.Json.t,
+  JSON.t,
 > => AdvancedRoutingTypes.connector = dict => {
   open LogicUtils
   {
@@ -144,7 +144,7 @@ let priorityConnectorSelectionDataMapper: Dict.t<
   }
 }
 
-let connectorSelectionDataMapperFromJson: Js.Json.t => AdvancedRoutingTypes.connectorSelectionData = json => {
+let connectorSelectionDataMapperFromJson: JSON.t => AdvancedRoutingTypes.connectorSelectionData = json => {
   open LogicUtils
   let split = json->getDictFromJsonObject->getOptionInt("split")
   let dict = json->getDictFromJsonObject
@@ -155,7 +155,7 @@ let connectorSelectionDataMapperFromJson: Js.Json.t => AdvancedRoutingTypes.conn
 }
 
 let getDefaultSelection: Dict.t<
-  Js.Json.t,
+  JSON.t,
 > => AdvancedRoutingTypes.connectorSelection = defaultSelection => {
   open LogicUtils
   open AdvancedRoutingTypes
@@ -218,7 +218,7 @@ let getSplitFromConnectorSelectionData = connectorSelectionData => {
   }
 }
 
-let ruleInfoTypeMapper: Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithmData = json => {
+let ruleInfoTypeMapper: Dict.t<JSON.t> => AdvancedRoutingTypes.algorithmData = json => {
   open LogicUtils
   let rulesArray = json->getArrayFromDict("rules", [])
 
@@ -269,16 +269,16 @@ let getOperatorFromComparisonType = (comparison, variantType) => {
 }
 
 let isStatementMandatoryFieldsPresent = (statement: AdvancedRoutingTypes.statement) => {
-  let statementValue = switch statement.value.value->Js.Json.classify {
-  | JSONArray(ele) => ele->Array.length > 0
-  | JSONString(str) => str->String.length > 0
+  let statementValue = switch statement.value.value->JSON.Classify.classify {
+  | Array(ele) => ele->Array.length > 0
+  | String(str) => str->String.length > 0
   | _ => false
   }
 
   statement.lhs->String.length > 0 && (statement.value.\"type"->String.length > 0 && statementValue)
 }
 
-let algorithmTypeMapper: Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithm = values => {
+let algorithmTypeMapper: Dict.t<JSON.t> => AdvancedRoutingTypes.algorithm = values => {
   open LogicUtils
   {
     data: values->getDictfromDict("data")->ruleInfoTypeMapper,
@@ -286,7 +286,7 @@ let algorithmTypeMapper: Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithm = v
   }
 }
 
-let getRoutingTypesFromJson: Js.Json.t => AdvancedRoutingTypes.advancedRouting = values => {
+let getRoutingTypesFromJson: JSON.t => AdvancedRoutingTypes.advancedRouting = values => {
   open LogicUtils
   let valuesDict = values->getDictFromJsonObject
 
@@ -359,7 +359,7 @@ let generateRule = rulesDict => {
     {
       "name": ruleDict->getString("name", ""),
       "connectorSelection": ruleDict->getJsonObjectFromDict("connectorSelection"),
-      "statements": modifiedStatements->Array.map(Identity.genericTypeToJson)->Js.Json.array,
+      "statements": modifiedStatements->Array.map(Identity.genericTypeToJson)->JSON.Encode.array,
     }
   })
   modifiedRules
@@ -376,7 +376,7 @@ let defaultRule: AdvancedRoutingTypes.rule = {
       comparison: "",
       value: {
         \"type": "",
-        value: ""->Js.Json.string,
+        value: ""->JSON.Encode.string,
       },
     },
   ],
@@ -384,7 +384,7 @@ let defaultRule: AdvancedRoutingTypes.rule = {
 
 let defaultAlgorithmData: AdvancedRoutingTypes.algorithmData = {
   rules: [defaultRule],
-  metadata: Dict.make()->Js.Json.object_,
+  metadata: Dict.make()->JSON.Encode.object,
   defaultSelection: {
     \"type": "",
     data: [],
@@ -403,7 +403,7 @@ let initialValues: AdvancedRoutingTypes.advancedRouting = {
 let validateNameAndDescription = (~dict, ~errors) => {
   ["name", "description"]->Array.forEach(field => {
     if dict->LogicUtils.getString(field, "")->String.trim === "" {
-      errors->Dict.set(field, `Please provide ${field} field`->Js.Json.string)
+      errors->Dict.set(field, `Please provide ${field} field`->JSON.Encode.string)
     }
   })
 }
diff --git a/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res b/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res
index 79ce2c846..9d2113e2d 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res
@@ -39,7 +39,7 @@ module BusinessProfileInp = {
           InputFields.selectInput(
             ~input={
               ...input,
-              value: profile->Js.Json.string,
+              value: profile->JSON.Encode.string,
               onChange: {
                 ev => {
                   setProfile(_ => ev->Identity.formReactEventToString)
@@ -89,7 +89,7 @@ let make = (
   React.useEffect0(() => {
     form.change(
       "profile_id",
-      profile->Option.getOr(defaultBusinessProfile.profile_id)->Js.Json.string,
+      profile->Option.getOr(defaultBusinessProfile.profile_id)->JSON.Encode.string,
     )
     None
   })
diff --git a/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res b/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res
index e24f0a6fa..f0594459c 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res
@@ -70,19 +70,19 @@ let make = (~ruleInfo: algorithmData, ~isFrom3ds=false, ~isFromSurcharge=false)
                     let field = statement.lhs
                     let metadataDict =
                       statement.metadata
-                      ->Option.getOr(Dict.make()->Js.Json.object_)
+                      ->Option.getOr(Dict.make()->JSON.Encode.object)
                       ->getDictFromJsonObject
 
-                    let value = switch statement.value.value->Js.Json.classify {
-                    | JSONArray(arr) => arr->Array.joinWithUnsafe(", ")
-                    | JSONString(str) => str
-                    | JSONNumber(num) => num->Float.toString
-                    | JSONObject(obj) => obj->LogicUtils.getString("value", "")
+                    let value = switch statement.value.value->JSON.Classify.classify {
+                    | Array(arr) => arr->Array.joinWithUnsafe(", ")
+                    | String(str) => str
+                    | Number(num) => num->Float.toString
+                    | Object(obj) => obj->LogicUtils.getString("value", "")
                     | _ => ""
                     }
 
-                    let metadataKeyValue = switch statement.value.value->Js.Json.classify {
-                    | JSONObject(obj) => obj->LogicUtils.getString("key", "")
+                    let metadataKeyValue = switch statement.value.value->JSON.Classify.classify {
+                    | Object(obj) => obj->LogicUtils.getString("key", "")
                     | _ => ""
                     }
 
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
index 26ec6e014..8c50afe3e 100644
--- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res
+++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
@@ -49,7 +49,7 @@ module SDKConfiguarationFields = {
         InputFields.numericTextInput(
           ~input={
             ...input,
-            value: (initialValues.amount /. 100.00)->Js.Float.toString->Js.Json.string,
+            value: (initialValues.amount /. 100.00)->Js.Float.toString->JSON.Encode.string,
             onChange: {
               ev => {
                 let eventValueToFloat =
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res b/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res
index d7bf18159..e7b7f23a9 100644
--- a/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res
+++ b/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res
@@ -61,7 +61,7 @@ let getCurrencyValue = (countryCurrency: string) => {
   countryCurrency->String.split("-")->Array.get(1)->Option.getOr("USD")->String.trim
 }
 
-let getTypedValueForPayment: Js.Json.t => SDKPaymentTypes.paymentType = values => {
+let getTypedValueForPayment: JSON.t => SDKPaymentTypes.paymentType = values => {
   open LogicUtils
   let dictOfValues = values->getDictFromJsonObject
   let shippingAddress =
diff --git a/src/screens/HyperSwitch/SDKPayment/TestCredentials.res b/src/screens/HyperSwitch/SDKPayment/TestCredentials.res
index aed46f077..d6eea74d7 100644
--- a/src/screens/HyperSwitch/SDKPayment/TestCredentials.res
+++ b/src/screens/HyperSwitch/SDKPayment/TestCredentials.res
@@ -1,7 +1,7 @@
 @react.component
 let make = () => {
   let initialValues = Dict.make()
-  Dict.set(initialValues, "dummy_card_number", "4242 4242 4242 4242"->Js.Json.string)
+  Dict.set(initialValues, "dummy_card_number", "4242 4242 4242 4242"->JSON.Encode.string)
   <div className="p-6 bg-jp-gray-test_credentials_bg w-full h-fit">
     <div className="mb-4">
       <div className="flex items-center gap-4">
@@ -17,7 +17,7 @@ let make = () => {
           <p className="text-gray-900 text-bold text-sm dark:text-gray-400 pt-2 pb-2 pl-2 ">
             {"4242 4242 4242 4242"->React.string}
           </p>
-          <Clipboard.Copy data={"4242424242424242"->Js.Json.string} />
+          <Clipboard.Copy data={"4242424242424242"->JSON.Encode.string} />
         </div>
         <div className="flex flex-row items-center">
           <p className="text-gray-500 dark:text-gray-400 pb-2 w-[40%] text-sm">
diff --git a/src/screens/HyperSwitch/SDKPayment/TestPayment.res b/src/screens/HyperSwitch/SDKPayment/TestPayment.res
index f2d61a427..88fce983f 100644
--- a/src/screens/HyperSwitch/SDKPayment/TestPayment.res
+++ b/src/screens/HyperSwitch/SDKPayment/TestPayment.res
@@ -48,7 +48,7 @@ let make = (
       let paymentData =
         initialValues
         ->Identity.genericTypeToJson
-        ->Js.Json.stringify
+        ->JSON.stringify
         ->safeParse
         ->getTypedValueForPayment
       paymentData.currency = paymentData.currency->getCurrencyValue
diff --git a/src/screens/HyperSwitch/SDKPayment/WebSDK.res b/src/screens/HyperSwitch/SDKPayment/WebSDK.res
index 5c48b1df9..103a93cd7 100644
--- a/src/screens/HyperSwitch/SDKPayment/WebSDK.res
+++ b/src/screens/HyperSwitch/SDKPayment/WebSDK.res
@@ -2,8 +2,8 @@ open ReactHyperJs
 open Promise
 
 type configElements = {
-  appearanceElement: Js.Json.t,
-  paymentElement: Js.Json.t,
+  appearanceElement: JSON.t,
+  paymentElement: JSON.t,
 }
 
 type configData = {
@@ -38,8 +38,8 @@ module CheckoutForm = {
     let (btnState, setBtnState) = React.useState(_ => Button.Normal)
     let hyper = useHyper()
     let elements = useElements()
-    let (appearanceElem, setAppearanceElem) = React.useState(() => Js.Json.null)
-    let (paymentElem, setPaymentElem) = React.useState(() => Js.Json.null)
+    let (appearanceElem, setAppearanceElem) = React.useState(() => JSON.Encode.null)
+    let (paymentElem, setPaymentElem) = React.useState(() => JSON.Encode.null)
 
     let fetchApi = AuthHooks.useApiFetcher()
     React.useEffect2(() => {
@@ -49,7 +49,7 @@ module CheckoutForm = {
           appearanceElement: appearanceElem,
           paymentElement: paymentElem,
         }
-        ->Js.Json.stringifyAny
+        ->JSON.stringifyAny
         ->Option.getOr(""),
       }
       setError(_ => None)
@@ -57,7 +57,7 @@ module CheckoutForm = {
       if saveViewToSdk {
         fetchApi(
           "https://4gla4dnvbg.execute-api.ap-south-1.amazonaws.com/default/hyperConfig",
-          ~bodyStr=val->Js.Json.stringifyAny->Option.getOr(""),
+          ~bodyStr=val->JSON.stringifyAny->Option.getOr(""),
           ~headers=[("Access-Control-Allow-Origin", "*")]->Dict.fromArray,
           ~method_=Fetch.Post,
           (),
@@ -67,7 +67,7 @@ module CheckoutForm = {
           json->resolve
         })
         ->catch(_e => {
-          Dict.make()->Js.Json.object_->resolve
+          Dict.make()->JSON.Encode.object->resolve
         })
         ->ignore
       }
@@ -163,20 +163,17 @@ module CheckoutForm = {
         [
           (
             "confirmParams",
-            [("return_url", returnUrl->Js.Json.string)]->Dict.fromArray->Js.Json.object_,
+            [("return_url", returnUrl->JSON.Encode.string)]->Dict.fromArray->JSON.Encode.object,
           ),
-          ("redirect", "always"->Js.Json.string),
+          ("redirect", "always"->JSON.Encode.string),
         ]
         ->Dict.fromArray
-        ->Js.Json.object_
+        ->JSON.Encode.object
       hyper.confirmPayment(confirmParams)
       ->then(val => {
-        let resDict = val->Js.Json.decodeObject->Option.getOr(Dict.make())
+        let resDict = val->JSON.Decode.object->Option.getOr(Dict.make())
         let errorDict =
-          resDict
-          ->Dict.get("error")
-          ->Option.flatMap(Js.Json.decodeObject)
-          ->Option.getOr(Dict.make())
+          resDict->Dict.get("error")->Option.flatMap(JSON.Decode.object)->Option.getOr(Dict.make())
 
         let errorMsg = errorDict->Dict.get("message")
 
@@ -243,7 +240,7 @@ module CheckoutForm = {
           | Some(val) =>
             <div className="text-red-500">
               {val
-              ->Js.Json.stringifyAny
+              ->JSON.stringifyAny
               ->Option.getOr("")
               ->String.replace("\"", "")
               ->String.replace("\"", "")
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/LiveEndpointsSetup.res b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/LiveEndpointsSetup.res
index 0cc17e2cc..129a25131 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/LiveEndpointsSetup.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/LiveEndpointsSetup.res
@@ -86,7 +86,7 @@ module SetupWebhookUser = {
         setWebhookEndpoint(_ => val)
       },
       onFocus: _ev => (),
-      value: webhookEndpoint->Js.Json.string,
+      value: webhookEndpoint->JSON.Encode.string,
       checked: true,
     }
 
@@ -172,11 +172,11 @@ let make = (~pageView, ~setPageView, ~previewState: option<ProdOnboardingTypes.p
     try {
       setButtonState(_ => Loading)
       let mercahantUpdateBody =
-        [("webhook_url", webhookEndpoint->Js.Json.string)]->Dict.fromArray->Js.Json.object_
+        [("webhook_url", webhookEndpoint->JSON.Encode.string)]->Dict.fromArray->JSON.Encode.object
       let body = mercahantUpdateBody->MerchantAccountUtils.getSettingsPayload(merchantId)
       let url = getURL(~entityName=MERCHANT_ACCOUNT, ~methodType=Post, ())
       let merchantInfo = await updateDetails(url, body, Post, ())
-      setMerchantDetailsValue(._ => merchantInfo->Js.Json.stringify)
+      setMerchantDetailsValue(._ => merchantInfo->JSON.stringify)
       updateLiveEndpoint()->ignore
     } catch {
     | _ => setButtonState(_ => Normal)
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res
index 486342016..370c8333b 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res
@@ -151,7 +151,7 @@ let make = () => {
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
   let (buttonState, setButtonState) = React.useState(_ => Button.Normal)
   let (previewState, setPreviewState) = React.useState(_ => None)
-  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->Js.Json.object_)
+  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->JSON.Encode.object)
   let (connectorID, setConnectorID) = React.useState(_ => "")
   let routerUrl = RescriptReactRouter.useUrl()
 
@@ -173,7 +173,7 @@ let make = () => {
         ->Array.find(ele => {
           ele->getDictFromJsonObject->getBool("SetupComplete", false)
         })
-        ->Option.getOr(Js.Json.null)
+        ->Option.getOr(JSON.Encode.null)
       if setupCompleteResponse->getDictFromJsonObject->getBool("SetupComplete", false) {
         setDashboardPageState(_ => #HOME)
         let baseUrlPath = `${HSwitchGlobalVars.hyperSwitchFEPrefix}/${routerUrl.path
@@ -203,7 +203,7 @@ let make = () => {
         ->Array.find(ele => {
           ele->getDictFromJsonObject->getBool("ConfigureEndpoint", false)
         })
-        ->Option.getOr(Js.Json.null)
+        ->Option.getOr(JSON.Encode.null)
 
       if configureEndpointResponse->getDictFromJsonObject->getBool("ConfigureEndpoint", false) {
         getSetupCompleteEnum()->ignore
@@ -228,7 +228,7 @@ let make = () => {
         ->Array.find(ele => {
           ele->getDictFromJsonObject->getDictfromDict("SetupProcessor") != Dict.make()
         })
-        ->Option.getOr(Js.Json.null)
+        ->Option.getOr(JSON.Encode.null)
 
       let connectorId =
         setupProcessorEnum
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingUtils.res b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingUtils.res
index a85a28fb6..d1792a7e5 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingUtils.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingUtils.res
@@ -146,24 +146,24 @@ let getProdApiBody = (
     [
       (
         (parentVariant :> string),
-        [("connector_id", connectorId->Js.Json.string)]->Dict.fromArray->Js.Json.object_,
+        [("connector_id", connectorId->JSON.Encode.string)]->Dict.fromArray->JSON.Encode.object,
       ),
     ]
     ->Dict.fromArray
-    ->Js.Json.object_
+    ->JSON.Encode.object
 
   | #ProductionAgreement =>
     [
       (
         (parentVariant :> string),
-        [("version", HSwitchGlobalVars.agreementVersion->Js.Json.string)]
+        [("version", HSwitchGlobalVars.agreementVersion->JSON.Encode.string)]
         ->Dict.fromArray
-        ->Js.Json.object_,
+        ->JSON.Encode.object,
       ),
     ]
     ->Dict.fromArray
-    ->Js.Json.object_
-  | _ => (parentVariant :> string)->Js.Json.string
+    ->JSON.Encode.object
+  | _ => (parentVariant :> string)->JSON.Encode.string
   }
 }
 
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
index 9e935f746..db5b70c19 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
@@ -89,10 +89,10 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
   let (isCheckboxSelected, setIsCheckboxSelected) = React.useState(_ => false)
   let connectorVariant = connectorName->getConnectorNameTypeFromString
   // TODO: Change the state to memo
-  let (connectorDetails, setConnectorDetails) = React.useState(_ => Js.Json.null)
+  let (connectorDetails, setConnectorDetails) = React.useState(_ => JSON.Encode.null)
   let (isLoading, setIsLoading) = React.useState(_ => false)
   let merchantId = HSLocalStorage.getFromMerchantDetails("merchant_id")
-  let (initialValues, setInitialValues) = React.useState(_ => Js.Json.null)
+  let (initialValues, setInitialValues) = React.useState(_ => JSON.Encode.null)
 
   let getDetails = async () => {
     try {
@@ -135,10 +135,10 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
       let prevJsonDict = prevJson->LogicUtils.getDictFromJsonObject
       prevJsonDict->Dict.set(
         "connector_label",
-        `${selectedConnector->getConnectorNameString}_${defaultBusinessProfile.profile_name}`->Js.Json.string,
+        `${selectedConnector->getConnectorNameString}_${defaultBusinessProfile.profile_name}`->JSON.Encode.string,
       )
-      prevJsonDict->Dict.set("profile_id", defaultBusinessProfile.profile_id->Js.Json.string)
-      prevJsonDict->Js.Json.object_
+      prevJsonDict->Dict.set("profile_id", defaultBusinessProfile.profile_id->JSON.Encode.string)
+      prevJsonDict->JSON.Encode.object
     })
 
     None
@@ -164,15 +164,15 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
     }
   }
 
-  let onSubmitMain = async (values: Js.Json.t) => {
+  let onSubmitMain = async (values: JSON.t) => {
     try {
       setIsLoading(_ => true)
       let url = getURL(~entityName=CONNECTOR, ~methodType=Post, ())
       let dict = Window.getConnectorConfig(connectorName)->getDictFromJsonObject
       let creditCardNetworkArray =
-        dict->getArrayFromDict("credit", [])->Js.Json.array->getPaymentMethodMapper
+        dict->getArrayFromDict("credit", [])->JSON.Encode.array->getPaymentMethodMapper
       let debitCardNetworkArray =
-        dict->getArrayFromDict("debit", [])->Js.Json.array->getPaymentMethodMapper
+        dict->getArrayFromDict("debit", [])->JSON.Encode.array->getPaymentMethodMapper
 
       let paymentMethodsEnabledArray: array<ConnectorTypes.paymentMethodEnabled> = [
         {
@@ -192,7 +192,7 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
       let requestPayload: ConnectorTypes.wasmRequest = {
         payment_methods_enabled: paymentMethodsEnabledArray,
         connector: connectorName,
-        metadata: Dict.make()->Js.Json.object_,
+        metadata: Dict.make()->JSON.Encode.object,
       }
 
       let payload = generateInitialValuesDict(
@@ -250,7 +250,7 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
       connectorMetaDataFields,
       connectorWebHookDetails,
       connectorLabelDetailField,
-      errors->Js.Json.object_,
+      errors->JSON.Encode.object,
     )
   }
 
@@ -340,10 +340,10 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
 
   let onSubmit = values => {
     let dict = values->getDictFromJsonObject
-    dict->Dict.set("profile_id", profile_id->Js.Json.string)
+    dict->Dict.set("profile_id", profile_id->JSON.Encode.string)
 
     onSubmit(
-      ~values={dict->Js.Json.object_},
+      ~values={dict->JSON.Encode.object},
       ~onSubmitVerify,
       ~onSubmitMain,
       ~setVerifyDone,
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res
index b852ea058..123c49d22 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res
@@ -15,13 +15,13 @@ module RequestPage = {
         let url = getURL(~entityName=USERS, ~userType=#USER_DATA, ~methodType=Post, ())
         let requestedBody =
           [
-            ("rating", 5.0->Js.Json.number),
-            ("category", "Platform Request"->Js.Json.string),
-            ("feedbacks", `Request for ${requestedValue}`->Js.Json.string),
+            ("rating", 5.0->JSON.Encode.float),
+            ("category", "Platform Request"->JSON.Encode.string),
+            ("feedbacks", `Request for ${requestedValue}`->JSON.Encode.string),
           ]
           ->LogicUtils.getJsonFromArrayOfJson
           ->HSwitchUtils.getBodyForFeedBack()
-          ->Js.Json.object_
+          ->JSON.Encode.object
 
         let body = [("Feedback", requestedBody)]->LogicUtils.getJsonFromArrayOfJson
         let _ = await updateDetails(url, body, Post, ())
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboarding.res b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboarding.res
index 36d917618..7693c4431 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboarding.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboarding.res
@@ -108,7 +108,7 @@ let make = () => {
   let skipAndContinue = async () => {
     try {
       let url = getURL(~entityName=INTEGRATION_DETAILS, ~methodType=Post, ())
-      let metaDataDict = Dict.fromArray([("is_skip", true->Js.Json.boolean)])->Js.Json.object_
+      let metaDataDict = Dict.fromArray([("is_skip", true->JSON.Encode.bool)])->JSON.Encode.object
       let body = HSwitchUtils.constructOnboardingBody(
         ~dashboardPageState,
         ~integrationDetails,
@@ -132,14 +132,14 @@ let make = () => {
         ~integrationDetails,
         ~is_done=true,
         ~metadata=[
-          ("is_skip", false->Js.Json.boolean),
+          ("is_skip", false->JSON.Encode.bool),
           (
             "integrationType",
-            currentRoute->UserOnboardingUtils.variantToTextMapperForBuildHS->Js.Json.string,
+            currentRoute->UserOnboardingUtils.variantToTextMapperForBuildHS->JSON.Encode.string,
           ),
         ]
         ->Dict.fromArray
-        ->Js.Json.object_,
+        ->JSON.Encode.object,
         (),
       )
       let _ = await updateDetails(url, body, Post, ())
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
index b0688b7f5..4ae4a4982 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
@@ -58,11 +58,11 @@ module DownloadAPIKeyButton = {
         let url = APIUtils.getURL(~entityName=API_KEYS, ~methodType=Post, ())
         let body =
           [
-            ("name", "DefaultAPIKey"->Js.Json.string),
-            ("description", "Default Value of the API key"->Js.Json.string),
-            ("expiration", "never"->Js.Json.string),
+            ("name", "DefaultAPIKey"->JSON.Encode.string),
+            ("description", "Default Value of the API key"->JSON.Encode.string),
+            ("expiration", "never"->JSON.Encode.string),
           ]->Dict.fromArray
-        let res = await updateDetails(url, body->Js.Json.object_, Post, ())
+        let res = await updateDetails(url, body->JSON.Encode.object, Post, ())
         let apiKey = res->LogicUtils.getDictFromJsonObject->LogicUtils.getString("api_key", "")
         DownloadUtils.downloadOld(~fileName=`apiKey.txt`, ~content=apiKey)
         Clipboard.writeText(apiKey)
@@ -244,7 +244,7 @@ module BackendFrontendPlatformLangDropDown = {
         setPlatform(_ => val)
       },
       onFocus: _ev => (),
-      value: (platform :> string)->Js.Json.string,
+      value: (platform :> string)->JSON.Encode.string,
       checked: true,
     }
     let options = platforms->Array.map((op): SelectBox.dropdownOption => {
@@ -259,7 +259,7 @@ module BackendFrontendPlatformLangDropDown = {
         setBackEndLang(_ => val)
       },
       onFocus: _ev => (),
-      value: (backEndLang :> string)->Js.Json.string,
+      value: (backEndLang :> string)->JSON.Encode.string,
       checked: true,
     }
     let frontendLangInput: ReactFinalForm.fieldRenderPropsInput = {
@@ -270,7 +270,7 @@ module BackendFrontendPlatformLangDropDown = {
         setFrontEndLang(_ => val)
       },
       onFocus: _ev => (),
-      value: (frontEndLang :> string)->Js.Json.string,
+      value: (frontEndLang :> string)->JSON.Encode.string,
       checked: true,
     }
     let (frontendLangauge, backendLangauge) = currentRoute->getLanguages
@@ -281,7 +281,7 @@ module BackendFrontendPlatformLangDropDown = {
       backEndLang === #ChooseLanguage ? "Choose Backend" : (backEndLang :> string)
     }
 
-    <Form initialValues={Dict.make()->Js.Json.object_}>
+    <Form initialValues={Dict.make()->JSON.Encode.object}>
       <div className="flex flex-row gap-4 flex-wrap">
         <UIUtils.RenderIf condition={!isFromLanding && currentRoute !== SampleProjects}>
           <SelectBox.BaseDropdown
@@ -414,7 +414,7 @@ module LandingPageTileForIntegrateDocs = {
     let skipAndContinue = async () => {
       try {
         let url = getURL(~entityName=INTEGRATION_DETAILS, ~methodType=Post, ())
-        let metaDataDict = Dict.fromArray([("is_skip", true->Js.Json.boolean)])->Js.Json.object_
+        let metaDataDict = Dict.fromArray([("is_skip", true->JSON.Encode.bool)])->JSON.Encode.object
         let body = HSwitchUtils.constructOnboardingBody(
           ~dashboardPageState,
           ~integrationDetails,
diff --git a/src/screens/HyperSwitch/Settings/BusinessDetails.res b/src/screens/HyperSwitch/Settings/BusinessDetails.res
index 8b1e46994..0ac3f44ac 100644
--- a/src/screens/HyperSwitch/Settings/BusinessDetails.res
+++ b/src/screens/HyperSwitch/Settings/BusinessDetails.res
@@ -128,14 +128,14 @@ let make = () => {
       />
       <Form
         onSubmit
-        initialValues={merchantInfo->Js.Json.object_}
+        initialValues={merchantInfo->JSON.Encode.object}
         validate={values => {
           open HSwitchSettingTypes
           validateMerchantAccountForm(
             ~values,
             ~fieldsToValidate=[PrimaryPhone, PrimaryEmail, Website, SecondaryEmail, SecondaryPhone],
             ~setIsDisabled=Some(setIsDisabled),
-            ~initialData={merchantInfo->Js.Json.object_},
+            ~initialData={merchantInfo->JSON.Encode.object},
           )
         }}>
         <div
diff --git a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingEntity.res b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingEntity.res
index 3bfa79c21..60a072852 100644
--- a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingEntity.res
+++ b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingEntity.res
@@ -39,7 +39,7 @@ let itemToObjMapper = dict => {
   }
 }
 
-let getItems: Js.Json.t => array<profileEntity> = json => {
+let getItems: JSON.t => array<profileEntity> = json => {
   LogicUtils.getArrayDataFromJson(json, itemToObjMapper)
 }
 
diff --git a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingUtils.res b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingUtils.res
index 8e6d1f671..88590c735 100644
--- a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingUtils.res
+++ b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingUtils.res
@@ -22,7 +22,7 @@ type modalState = Loading | Edit | Successful
 let validateEmptyValue = (key, errors) => {
   switch key {
   | ProfileName =>
-    errors->Dict.set(key->getStringFromVariant, "Please enter a profile name"->Js.Json.string)
+    errors->Dict.set(key->getStringFromVariant, "Please enter a profile name"->JSON.Encode.string)
   }
 }
 
@@ -30,7 +30,7 @@ let validateCustom = (key, errors, value) => {
   switch key {
   | ProfileName =>
     if !Js.Re.test_(%re("/^[a-zA-Z][a-zA-Z0-9]*$/"), value) {
-      errors->Dict.set(key->getStringFromVariant, "Please enter a profile name"->Js.Json.string)
+      errors->Dict.set(key->getStringFromVariant, "Please enter a profile name"->JSON.Encode.string)
     }
   }
 }
@@ -42,7 +42,7 @@ let getUserEnteredProfileDetails = valueDict => {
 }
 
 let validateForm = (
-  values: Js.Json.t,
+  values: JSON.t,
   ~fieldsToValidate: array<modalFields>,
   ~list: array<profileEntity>,
 ) => {
@@ -66,9 +66,9 @@ let validateForm = (
   ) {
     errors->Dict.set(
       "profile_name",
-      "The entry you are trying to add already exists."->Js.Json.string,
+      "The entry you are trying to add already exists."->JSON.Encode.string,
     )
   }
 
-  errors->Js.Json.object_
+  errors->JSON.Encode.object
 }
diff --git a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res
index d3fb1db5b..5a11d3531 100644
--- a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res
+++ b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res
@@ -23,7 +23,7 @@ module AddEntryBtn = {
     open BusinessMappingUtils
     let initialValues =
       [
-        ("profile_name", `default${list->Array.length->string_of_int}`->Js.Json.string),
+        ("profile_name", `default${list->Array.length->string_of_int}`->JSON.Encode.string),
       ]->Dict.fromArray
     let modalBody =
       <div>
@@ -32,7 +32,7 @@ module AddEntryBtn = {
         | Edit =>
           <Form
             key="country-currency"
-            initialValues={initialValues->Js.Json.object_}
+            initialValues={initialValues->JSON.Encode.object}
             validate={values => values->validateForm(~fieldsToValidate=[ProfileName], ~list)}
             onSubmit>
             <LabelVisibilityContext showLabel=false>
diff --git a/src/screens/HyperSwitch/Settings/HSwitchProfileSettings.res b/src/screens/HyperSwitch/Settings/HSwitchProfileSettings.res
index 2a3456567..ce6ee3b64 100644
--- a/src/screens/HyperSwitch/Settings/HSwitchProfileSettings.res
+++ b/src/screens/HyperSwitch/Settings/HSwitchProfileSettings.res
@@ -18,11 +18,11 @@ module MerchantDetailsSection = {
           [
             (
               "merchant_id",
-              merchantInfoDict->LogicUtils.getString("merchant_id", "")->Js.Json.string,
+              merchantInfoDict->LogicUtils.getString("merchant_id", "")->JSON.Encode.string,
             ),
             (
               "merchant_name",
-              merchantInfoDict->LogicUtils.getString("merchant_name", "")->Js.Json.string,
+              merchantInfoDict->LogicUtils.getString("merchant_name", "")->JSON.Encode.string,
             ),
           ]->Dict.fromArray
         setMerchantInfo(_ => requiredInfo)
diff --git a/src/screens/HyperSwitch/Settings/HSwitchSettingTypes.res b/src/screens/HyperSwitch/Settings/HSwitchSettingTypes.res
index 74e5e1b76..44e67e25b 100644
--- a/src/screens/HyperSwitch/Settings/HSwitchSettingTypes.res
+++ b/src/screens/HyperSwitch/Settings/HSwitchSettingTypes.res
@@ -34,7 +34,7 @@ type profileSetting = {
   merchant_id: string,
   merchant_name: string,
   locker_id: string,
-  primary_business_details: array<Js.Json.t>,
+  primary_business_details: array<JSON.t>,
   merchant_details: merchantDetails,
 }
 
@@ -84,8 +84,8 @@ type colType =
 type apiModalState = Create | Update | Loading | SettingApiModalError | Success
 
 type parseMerchantJson = {
-  apiKeys: Dict.t<Js.Json.t>,
-  merchantInfo: Dict.t<Js.Json.t>,
+  apiKeys: Dict.t<JSON.t>,
+  merchantInfo: Dict.t<JSON.t>,
 }
 
 type validationFields =
diff --git a/src/screens/HyperSwitch/Settings/HSwitchSettings.res b/src/screens/HyperSwitch/Settings/HSwitchSettings.res
index a96931e53..e93c7efe6 100644
--- a/src/screens/HyperSwitch/Settings/HSwitchSettings.res
+++ b/src/screens/HyperSwitch/Settings/HSwitchSettings.res
@@ -28,7 +28,12 @@ module TileComponent = {
     let deleteSampleData = async () => {
       try {
         let generateSampleDataUrl = getURL(~entityName=GENERATE_SAMPLE_DATA, ~methodType=Delete, ())
-        let _ = await updateDetails(generateSampleDataUrl, Dict.make()->Js.Json.object_, Delete, ())
+        let _ = await updateDetails(
+          generateSampleDataUrl,
+          Dict.make()->JSON.Encode.object,
+          Delete,
+          (),
+        )
         showToast(~message="Sample data deleted successfully", ~toastType=ToastSuccess, ())
       } catch {
       | _ => ()
diff --git a/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res b/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res
index 91b9b7003..23565d824 100644
--- a/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res
+++ b/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res
@@ -10,7 +10,7 @@ let passwordKeyValidation = (value, key, keyVal, errors) => {
       Dict.set(
         errors,
         key,
-        "Your password is not strong enough. Password size must be more than 8"->Js.Json.string,
+        "Your password is not strong enough. Password size must be more than 8"->JSON.Encode.string,
       )
     } else {
       if !Js.Re.test_(%re("/^(?=.*[A-Z])/"), value) {
@@ -31,7 +31,7 @@ let passwordKeyValidation = (value, key, keyVal, errors) => {
           key,
           `Your password is not strong enough. A good password must contain atleast ${mustHave->Array.joinWith(
               ",",
-            )} character`->Js.Json.string,
+            )} character`->JSON.Encode.string,
         )
       }
     }
@@ -48,7 +48,7 @@ let confirmPasswordCheck = (value, key, confirmKey, passwordKey, valuesDict, err
       Dict.get(valuesDict, key),
     )
   ) {
-    Dict.set(errors, key, "The New password does not match!"->Js.Json.string)
+    Dict.set(errors, key, "The New password does not match!"->JSON.Encode.string)
   }
 }
 
@@ -64,9 +64,9 @@ let parseBussinessProfileJson = (profileRecord: profileEntity) => {
   } = profileRecord
   let profileInfo =
     [
-      ("merchant_id", merchant_id->Js.Json.string),
-      ("profile_id", profile_id->Js.Json.string),
-      ("profile_name", profile_name->Js.Json.string),
+      ("merchant_id", merchant_id->JSON.Encode.string),
+      ("profile_id", profile_id->JSON.Encode.string),
+      ("profile_name", profile_name->JSON.Encode.string),
     ]->Dict.fromArray
   profileInfo->setOptionString("return_url", return_url)
   profileInfo->setOptionString("webhook_version", webhook_details.webhook_version)
@@ -85,16 +85,19 @@ let parseMerchantJson = (merchantDict: merchantPayload) => {
   let {merchant_details, merchant_name, publishable_key, primary_business_details} = merchantDict
   let primary_business_details = primary_business_details->Array.map(detail => {
     let {country, business} = detail
-    let props = [("country", country->Js.Json.string), ("business", business->Js.Json.string)]
+    let props = [
+      ("country", country->JSON.Encode.string),
+      ("business", business->JSON.Encode.string),
+    ]
 
-    props->Dict.fromArray->Js.Json.object_
+    props->Dict.fromArray->JSON.Encode.object
   })
   let merchantInfo =
     [
-      ("primary_business_details", primary_business_details->Js.Json.array),
-      ("merchant_name", merchant_name->Js.Json.string),
-      ("publishable_key", publishable_key->Js.Json.string),
-      ("publishable_key_hide", publishable_key->parseKey->Js.Json.string),
+      ("primary_business_details", primary_business_details->JSON.Encode.array),
+      ("merchant_name", merchant_name->JSON.Encode.string),
+      ("publishable_key", publishable_key->JSON.Encode.string),
+      ("publishable_key_hide", publishable_key->parseKey->JSON.Encode.string),
     ]->Dict.fromArray
 
   merchantInfo->setOptionString("about_business", merchant_details.about_business)
@@ -134,7 +137,7 @@ let constructWebhookDetailsObject = webhookDetailsDict => {
   webhookDetails
 }
 
-let getMerchantDetails = (values: Js.Json.t) => {
+let getMerchantDetails = (values: JSON.t) => {
   open LogicUtils
   let valuesDict = values->getDictFromJsonObject
   let merchantDetails = valuesDict->getObj("merchant_details", Dict.make())
@@ -204,7 +207,7 @@ let getMerchantDetails = (values: Js.Json.t) => {
   payload
 }
 
-let getBusinessProfilePayload = (values: Js.Json.t) => {
+let getBusinessProfilePayload = (values: JSON.t) => {
   open LogicUtils
   let valuesDict = values->getDictFromJsonObject
   let webhookSettingsValue = Dict.make()
@@ -243,7 +246,7 @@ let getBusinessProfilePayload = (values: Js.Json.t) => {
   profileDetailsDict
 }
 
-let getSettingsPayload = (values: Js.Json.t, merchantId) => {
+let getSettingsPayload = (values: JSON.t, merchantId) => {
   open LogicUtils
   let valuesDict = values->getDictFromJsonObject
   let addressDetailsValue = Dict.make()
@@ -292,7 +295,7 @@ let getSettingsPayload = (values: Js.Json.t, merchantId) => {
   )
 
   !(addressDetailsValue->isEmptyDict)
-    ? merchantDetailsValue->Dict.set("address", addressDetailsValue->Js.Json.object_)
+    ? merchantDetailsValue->Dict.set("address", addressDetailsValue->JSON.Encode.object)
     : ()
 
   let primary_business_details =
@@ -303,16 +306,16 @@ let getSettingsPayload = (values: Js.Json.t, merchantId) => {
 
       let detailDict =
         [
-          ("business", detailDict->getString("business", "")->Js.Json.string),
-          ("country", detailDict->getString("country", "")->Js.Json.string),
+          ("business", detailDict->getString("business", "")->JSON.Encode.string),
+          ("country", detailDict->getString("country", "")->JSON.Encode.string),
         ]->Dict.fromArray
 
-      detailDict->Js.Json.object_
+      detailDict->JSON.Encode.object
     })
 
   let settingsPayload = Dict.fromArray([
-    ("merchant_id", merchantId->Js.Json.string),
-    ("locker_id", "m0010"->Js.Json.string),
+    ("merchant_id", merchantId->JSON.Encode.string),
+    ("locker_id", "m0010"->JSON.Encode.string),
   ])
 
   settingsPayload->setOptionDict(
@@ -327,7 +330,7 @@ let getSettingsPayload = (values: Js.Json.t, merchantId) => {
     primary_business_details->getNonEmptyArray,
   )
 
-  settingsPayload->Js.Json.object_
+  settingsPayload->JSON.Encode.object
 }
 
 let validationFieldsMapper = key => {
@@ -361,7 +364,7 @@ let checkValueChange = (~initialDict, ~valuesDict) => {
 let validateEmptyValue = (key, errors) => {
   switch key {
   | ReturnUrl =>
-    Dict.set(errors, key->validationFieldsMapper, "Please enter a return url"->Js.Json.string)
+    Dict.set(errors, key->validationFieldsMapper, "Please enter a return url"->JSON.Encode.string)
   | _ => ()
   }
 }
@@ -370,19 +373,23 @@ let validateCustom = (key, errors, value) => {
   switch key {
   | PrimaryEmail | SecondaryEmail =>
     if value->HSwitchUtils.isValidEmail {
-      Dict.set(errors, key->validationFieldsMapper, "Please enter valid email id"->Js.Json.string)
+      Dict.set(
+        errors,
+        key->validationFieldsMapper,
+        "Please enter valid email id"->JSON.Encode.string,
+      )
     }
   | PrimaryPhone | SecondaryPhone =>
     if !Js.Re.test_(%re("/^(?:\+\d{1,15}?[.-])??\d{3}?[.-]?\d{3}[.-]?\d{3,9}$/"), value) {
       Dict.set(
         errors,
         key->validationFieldsMapper,
-        "Please enter valid phone number"->Js.Json.string,
+        "Please enter valid phone number"->JSON.Encode.string,
       )
     }
   | Website | WebhookUrl | ReturnUrl =>
     if !Js.Re.test_(%re("/^https:\/\//i"), value) || value->String.includes("localhost") {
-      Dict.set(errors, key->validationFieldsMapper, "Please Enter Valid URL"->Js.Json.string)
+      Dict.set(errors, key->validationFieldsMapper, "Please Enter Valid URL"->JSON.Encode.string)
     }
 
   | _ => ()
@@ -390,7 +397,7 @@ let validateCustom = (key, errors, value) => {
 }
 
 let validateMerchantAccountForm = (
-  ~values: Js.Json.t,
+  ~values: JSON.t,
   ~fieldsToValidate: array<validationFields>,
   ~setIsDisabled,
   ~initialData,
@@ -410,7 +417,7 @@ let validateMerchantAccountForm = (
     disableBtn(_ => !isValueChanged)
   })
 
-  errors->Js.Json.object_
+  errors->JSON.Encode.object
 }
 
 let businessProfileTypeMapper = values => {
@@ -499,7 +506,7 @@ let useFetchBusinessProfiles = () => {
     try {
       let url = getURL(~entityName=BUSINESS_PROFILE, ~methodType=Get, ())
       let res = await fetchDetails(url)
-      let stringifiedResponse = res->Js.Json.stringify
+      let stringifiedResponse = res->JSON.stringify
       setBusinessProfiles(._ => stringifiedResponse)
       Js.Nullable.return(stringifiedResponse->getValueFromBusinessProfile)
     } catch {
@@ -520,7 +527,7 @@ let useFetchMerchantDetails = () => {
     try {
       let accountUrl = APIUtils.getURL(~entityName=MERCHANT_ACCOUNT, ~methodType=Get, ())
       let merchantDetailsJSON = await fetchDetails(accountUrl)
-      setMerchantDetailsValue(._ => merchantDetailsJSON->Js.Json.stringify)
+      setMerchantDetailsValue(._ => merchantDetailsJSON->JSON.stringify)
     } catch {
     | _ => ()
     }
diff --git a/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccount.res b/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccount.res
index caef4c3ec..d81e51e0e 100644
--- a/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccount.res
+++ b/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccount.res
@@ -77,12 +77,12 @@ let make = () => {
         ->getDictFromJsonObject
         ->getOptionString("id")
       let activateRuleURL = getURL(~entityName=ROUTING, ~methodType=Post, ~id=activatingId, ())
-      let _ = await updateDetails(activateRuleURL, Dict.make()->Js.Json.object_, Post, ())
+      let _ = await updateDetails(activateRuleURL, Dict.make()->JSON.Encode.object, Post, ())
       setStepCounter(_ => #ROUTING_ENABLED)
 
       // *GENERATE_SAMPLE_DATA
       let generateSampleDataUrl = getURL(~entityName=GENERATE_SAMPLE_DATA, ~methodType=Post, ())
-      let _ = await updateDetails(generateSampleDataUrl, Dict.make()->Js.Json.object_, Post, ())
+      let _ = await updateDetails(generateSampleDataUrl, Dict.make()->JSON.Encode.object, Post, ())
       setStepCounter(_ => #GENERATE_SAMPLE_DATA)
       await delay(delayTime)
       setStepCounter(_ => #COMPLETED)
diff --git a/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccountUtils.res b/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccountUtils.res
index decc37a02..977d713e1 100644
--- a/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccountUtils.res
+++ b/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccountUtils.res
@@ -23,18 +23,18 @@ let constructBody = (~connectorName, ~json, ~profileId) => {
   let bodyType = connectorAccountDict->Dict.keysToArray->Array.get(0)->Option.getOr("")
 
   let connectorAccountDetails =
-    [("auth_type", bodyType->Js.Json.string), ("api_key", "test"->Js.Json.string)]
+    [("auth_type", bodyType->JSON.Encode.string), ("api_key", "test"->JSON.Encode.string)]
     ->Dict.fromArray
-    ->Js.Json.object_
+    ->JSON.Encode.object
 
   let initialValueForPayload = generateInitialValuesDict(
     ~values=[
-      ("profile_id", profileId->Js.Json.string),
+      ("profile_id", profileId->JSON.Encode.string),
       ("connector_account_details", connectorAccountDetails),
-      ("connector_label", `${connectorName}_default`->Js.Json.string),
+      ("connector_label", `${connectorName}_default`->JSON.Encode.string),
     ]
     ->Dict.fromArray
-    ->Js.Json.object_,
+    ->JSON.Encode.object,
     ~connector=connectorName,
     ~bodyType,
     (),
@@ -44,26 +44,26 @@ let constructBody = (~connectorName, ~json, ~profileId) => {
     json
     ->getDictFromJsonObject
     ->getArrayFromDict("credit", [])
-    ->Js.Json.array
+    ->JSON.Encode.array
     ->getPaymentMethodMapper
   let debitCardNetworkArray =
     json
     ->getDictFromJsonObject
     ->getArrayFromDict("debit", [])
-    ->Js.Json.array
+    ->JSON.Encode.array
     ->getPaymentMethodMapper
 
   let payLaterArray =
     json
     ->getDictFromJsonObject
     ->getArrayFromDict("pay_later", [])
-    ->Js.Json.array
+    ->JSON.Encode.array
     ->getPaymentMethodMapper
   let walletArray =
     json
     ->getDictFromJsonObject
     ->getArrayFromDict("wallet", [])
-    ->Js.Json.array
+    ->JSON.Encode.array
     ->getPaymentMethodMapper
 
   let paymentMethodsEnabledArray: array<ConnectorTypes.paymentMethodEnabled> = [
@@ -96,7 +96,7 @@ let constructBody = (~connectorName, ~json, ~profileId) => {
   let requestPayload: ConnectorTypes.wasmRequest = {
     payment_methods_enabled: paymentMethodsEnabledArray,
     connector: connectorName,
-    metadata: Dict.make()->Js.Json.object_,
+    metadata: Dict.make()->JSON.Encode.object,
   }
 
   let requestPayloadDict = requestPayload->constructConnectorRequestBody(initialValueForPayload)
@@ -111,14 +111,14 @@ type routingData = {
 let constructRoutingPayload = (routingData: routingData) => {
   let innerRoutingDict =
     [
-      ("connector", routingData.connector_name->Js.Json.string),
-      ("merchant_connector_id", routingData.merchant_connector_id->Js.Json.string),
+      ("connector", routingData.connector_name->JSON.Encode.string),
+      ("merchant_connector_id", routingData.merchant_connector_id->JSON.Encode.string),
     ]
     ->Dict.fromArray
-    ->Js.Json.object_
-  [("split", 50.0->Js.Json.number), ("connector", innerRoutingDict)]
+    ->JSON.Encode.object
+  [("split", 50.0->JSON.Encode.float), ("connector", innerRoutingDict)]
   ->Dict.fromArray
-  ->Js.Json.object_
+  ->JSON.Encode.object
 }
 
 let routingPayload = (profileId, routingData1: routingData, routingData2: routingData) => {
@@ -129,5 +129,5 @@ let routingPayload = (profileId, routingData1: routingData, routingData2: routin
     "Initial volume based routing setup",
     "Volume based routing pre-configured by Hyperswitch",
     profileId,
-  )->Js.Json.object_
+  )->JSON.Encode.object
 }
diff --git a/src/screens/HyperSwitch/Sidebar/Sidebar.res b/src/screens/HyperSwitch/Sidebar/Sidebar.res
index b7572355d..18ecc47c3 100644
--- a/src/screens/HyperSwitch/Sidebar/Sidebar.res
+++ b/src/screens/HyperSwitch/Sidebar/Sidebar.res
@@ -416,7 +416,7 @@ module PinIconComponentStates = {
       ev->ReactEvent.Mouse.preventDefault
       ev->ReactEvent.Mouse.stopPropagation
       ev->toggleExpand
-      setIsSidebarDetails("isPinned", !isHSSidebarPinned->Js.Json.boolean)
+      setIsSidebarDetails("isPinned", !isHSSidebarPinned->JSON.Encode.bool)
     }
 
     <>
@@ -443,7 +443,7 @@ module PinIconComponentStates = {
 
 @react.component
 let make = (
-  ~sidebars: Js.Array2.t<topLevelItem>,
+  ~sidebars: array<topLevelItem>,
   ~path,
   ~linkSelectionCheck=defaultLinkSelectionCheck,
   ~verticalOffset="120px",
@@ -460,10 +460,10 @@ let make = (
 
   React.useEffect1(() => {
     if minWidthForPinnedState {
-      setIsSidebarDetails("isPinned", true->Js.Json.boolean)
+      setIsSidebarDetails("isPinned", true->JSON.Encode.bool)
       setIsSidebarExpanded(_ => true)
     } else {
-      setIsSidebarDetails("isPinned", false->Js.Json.boolean)
+      setIsSidebarDetails("isPinned", false->JSON.Encode.bool)
       setIsSidebarExpanded(_ => false)
     }
 
diff --git a/src/screens/HyperSwitch/Sidebar/SidebarProvider.res b/src/screens/HyperSwitch/Sidebar/SidebarProvider.res
index 2f5da663d..fd0cf74d1 100644
--- a/src/screens/HyperSwitch/Sidebar/SidebarProvider.res
+++ b/src/screens/HyperSwitch/Sidebar/SidebarProvider.res
@@ -3,7 +3,7 @@ open ProviderTypes
 let setIsSidebarDetails = (key, value) => {
   let localStorageData = HSLocalStorage.getInfoFromLocalStorage(~lStorageKey="sidebar")
   localStorageData->Dict.set(key, value)
-  "sidebar"->LocalStorage.setItem(localStorageData->Js.Json.stringifyAny->Option.getOr(""))
+  "sidebar"->LocalStorage.setItem(localStorageData->JSON.stringifyAny->Option.getOr(""))
 }
 
 let getFromSidebarDetails = key => {
diff --git a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res
index e1445ba8c..1e2ea6c88 100644
--- a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res
+++ b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res
@@ -11,7 +11,7 @@ let make = () => {
   let getEnumDetails = EnumVariantHook.useFetchEnumDetails()
   let (selectedConnector, setSelectedConnector) = React.useState(_ => STRIPE)
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
-  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->Js.Json.object_)
+  let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->JSON.Encode.object)
   let (connectorConfigureState, setConnectorConfigureState) = React.useState(_ => Configure_keys)
   let (stepInView, setStepInView) = React.useState(_ => STRIPE_CONFIGURE)
   let {setDashboardPageState} = React.useContext(GlobalProvider.defaultContext)
@@ -32,7 +32,7 @@ let make = () => {
       if enums.paypalConnected.processorID->String.length === 0 {
         setSelectedConnector(_ => PAYPAL)
         setConnectorConfigureState(_ => Configure_keys)
-        setInitialValues(_ => Dict.make()->Js.Json.object_)
+        setInitialValues(_ => Dict.make()->JSON.Encode.object)
         setStepInView(prev => {
           switch prev {
           | STRIPE_CONFIGURE => forward ? PAYPAL_CONFIGURE : STRIPE_CONFIGURE
@@ -54,7 +54,7 @@ let make = () => {
         (await getEnumDetails(QuickStartUtils.quickStartEnumIntialArray))
         ->Js.Nullable.toOption
         ->Option.getOr(Dict.make())
-        ->Js.Json.object_
+        ->JSON.Encode.object
         ->QuickStartUtils.getTypedValueFromDict
 
       let currentPending = steps->Array.find(step => {
@@ -83,9 +83,9 @@ let make = () => {
 
   React.useEffect1(() => {
     let defaultJsonOnNewConnector =
-      [("profile_id", activeBusinessProfile.profile_id->Js.Json.string)]
+      [("profile_id", activeBusinessProfile.profile_id->JSON.Encode.string)]
       ->Dict.fromArray
-      ->Js.Json.object_
+      ->JSON.Encode.object
     setInitialValues(_ => defaultJsonOnNewConnector)
     None
   }, [activeBusinessProfile.profile_id, connectorName])
diff --git a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res
index 9fbd3e789..b64d04574 100644
--- a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res
+++ b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res
@@ -21,9 +21,9 @@ module SelectPaymentMethods = {
     let connectorName = selectedConnector->ConnectorUtils.getConnectorNameString
 
     let (paymentMethodsEnabled, setPaymentMethods) = React.useState(_ =>
-      Dict.make()->Js.Json.object_->ConnectorUtils.getPaymentMethodEnabled
+      Dict.make()->JSON.Encode.object->ConnectorUtils.getPaymentMethodEnabled
     )
-    let (metaData, setMetaData) = React.useState(_ => Dict.make()->Js.Json.object_)
+    let (metaData, setMetaData) = React.useState(_ => Dict.make()->JSON.Encode.object)
 
     let updateDetails = value => {
       setPaymentMethods(_ => value->Array.copy)
diff --git a/src/screens/HyperSwitch/Surcharge/Surcharge.res b/src/screens/HyperSwitch/Surcharge/Surcharge.res
index f781ac3b8..31cb259c8 100644
--- a/src/screens/HyperSwitch/Surcharge/Surcharge.res
+++ b/src/screens/HyperSwitch/Surcharge/Surcharge.res
@@ -41,7 +41,7 @@ module ConfigureSurchargeRule = {
 
     let addRule = (index, _copy) => {
       let existingRules = ruleInput.value->LogicUtils.getArrayFromJson([])
-      let newRule = existingRules[index]->Option.getOr(Js.Json.null)
+      let newRule = existingRules[index]->Option.getOr(JSON.Encode.null)
       let newRules = existingRules->Array.concat([newRule])
       ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
     }
@@ -55,7 +55,7 @@ module ConfigureSurchargeRule = {
     <div>
       {
         let notFirstRule = ruleInput.value->LogicUtils.getArrayFromJson([])->Array.length > 1
-        let rule = ruleInput.value->Js.Json.decodeArray->Option.getOr([])
+        let rule = ruleInput.value->JSON.Decode.array->Option.getOr([])
         let keyExtractor = (index, _rule, isDragging) => {
           let id = {`algorithm.rules[${string_of_int(index)}]`}
           <AdvancedRouting.Wrapper
@@ -126,9 +126,12 @@ let make = () => {
 
       let intitialValue =
         [
-          ("name", responseDict->LogicUtils.getString("name", "")->Js.Json.string),
-          ("description", responseDict->LogicUtils.getString("description", "")->Js.Json.string),
-          ("algorithm", programValue->Js.Json.object_),
+          ("name", responseDict->LogicUtils.getString("name", "")->JSON.Encode.string),
+          (
+            "description",
+            responseDict->LogicUtils.getString("description", "")->JSON.Encode.string,
+          ),
+          ("algorithm", programValue->JSON.Encode.object),
         ]->Dict.fromArray
 
       setInitialRule(_ => Some(intitialValue))
@@ -187,18 +190,18 @@ let make = () => {
     Js.Nullable.null
   }
 
-  let validate = (values: Js.Json.t) => {
+  let validate = (values: JSON.t) => {
     let dict = values->LogicUtils.getDictFromJsonObject
 
     let errors = Dict.make()
 
     AdvancedRoutingUtils.validateNameAndDescription(~dict, ~errors)
 
-    switch dict->Dict.get("algorithm")->Option.flatMap(Js.Json.decodeObject) {
+    switch dict->Dict.get("algorithm")->Option.flatMap(JSON.Decode.object) {
     | Some(jsonDict) => {
         let rules = jsonDict->LogicUtils.getArrayFromDict("rules", [])
         if rules->Array.length === 0 {
-          errors->Dict.set(`Rules`, "Minimum 1 rule needed"->Js.Json.string)
+          errors->Dict.set(`Rules`, "Minimum 1 rule needed"->JSON.Encode.string)
         } else {
           rules->Array.forEachWithIndex((rule, i) => {
             let ruleDict = rule->LogicUtils.getDictFromJsonObject
@@ -206,7 +209,7 @@ let make = () => {
             if !validateConditionsForSurcharge(ruleDict) {
               errors->Dict.set(
                 `Rule ${(i + 1)->string_of_int} - Condition`,
-                `Invalid`->Js.Json.string,
+                `Invalid`->JSON.Encode.string,
               )
             }
           })
@@ -215,7 +218,7 @@ let make = () => {
 
     | None => ()
     }
-    errors->Js.Json.object_
+    errors->JSON.Encode.object
   }
 
   let redirectToNewRule = () => {
diff --git a/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res b/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
index b1c7f964e..4f3ae3368 100644
--- a/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
+++ b/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
@@ -28,7 +28,7 @@ let buildInitialSurchargeValue: threeDsRoutingType = {
     defaultSelection: {
       surcharge_details: Js.Nullable.null,
     },
-    metadata: Js.Json.null,
+    metadata: JSON.Encode.null,
   },
 }
 
@@ -44,7 +44,7 @@ let buildSurchargePayloadBody = values => {
     "algorithm": {
       "defaultSelection": algorithmDict->getJsonObjectFromDict("defaultSelection"),
       "rules": modifiedRules,
-      "metadata": Dict.make()->Js.Json.object_,
+      "metadata": Dict.make()->JSON.Encode.object,
     },
     "merchant_surcharge_configs": {
       "show_surcharge_breakup_screen": true,
@@ -59,7 +59,7 @@ let getTypedSurchargeConnectorSelection = ruleDict => {
   AdvancedRoutingUtils.getDefaultSelection(connectorsDict)
 }
 
-let ruleInfoTypeMapper: Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithmData = json => {
+let ruleInfoTypeMapper: Dict.t<JSON.t> => AdvancedRoutingTypes.algorithmData = json => {
   open LogicUtils
   let rulesArray = json->getArrayFromDict("rules", [])
 
diff --git a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
index 96392b350..bf9043b79 100644
--- a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
+++ b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
@@ -276,7 +276,7 @@ let make = (~userRole, ~isAddMerchantEnabled=false) => {
         setValue(_ => val)
       },
       onFocus: _ev => (),
-      value: Js.Json.string(value),
+      value: JSON.Encode.string(value),
       checked: false,
     }
   }, [value])
@@ -285,13 +285,13 @@ let make = (~userRole, ~isAddMerchantEnabled=false) => {
     try {
       let url = getURL(~entityName=USERS, ~userType=#SWITCH_MERCHANT, ~methodType=Post, ())
       let body = Dict.make()
-      body->Dict.set("merchant_id", value->Js.Json.string)
-      let res = await updateDetails(url, body->Js.Json.object_, Post, ())
+      body->Dict.set("merchant_id", value->JSON.Encode.string)
+      let res = await updateDetails(url, body->JSON.Encode.object, Post, ())
       let responseDict = res->getDictFromJsonObject
       let token = responseDict->getString("token", "")
       let switchedMerchantId = responseDict->getString("merchant_id", "")
       LocalStorage.setItem("login", token)
-      HSwitchUtils.setMerchantDetails("merchant_id", switchedMerchantId->Js.Json.string)
+      HSwitchUtils.setMerchantDetails("merchant_id", switchedMerchantId->JSON.Encode.string)
       setSuccessModal(_ => true)
       await HyperSwitchUtils.delay(2000)
       Window.Location.reload()
diff --git a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
index 291e989f2..877c06d4d 100644
--- a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
+++ b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
@@ -1,5 +1,5 @@
 open RoutingTypes
-external toWasm: Dict.t<Js.Json.t> => wasmModule = "%identity"
+external toWasm: Dict.t<JSON.t> => wasmModule = "%identity"
 
 module ActiveRulePreview = {
   open LogicUtils
@@ -46,7 +46,7 @@ module Configure3DSRule = {
     }, [rules])
     let addRule = (index, _copy) => {
       let existingRules = ruleInput.value->LogicUtils.getArrayFromJson([])
-      let newRule = existingRules[index]->Option.getOr(Js.Json.null)
+      let newRule = existingRules[index]->Option.getOr(JSON.Encode.null)
       let newRules = existingRules->Array.concat([newRule])
       ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
     }
@@ -60,7 +60,7 @@ module Configure3DSRule = {
     <div>
       {
         let notFirstRule = ruleInput.value->LogicUtils.getArrayFromJson([])->Array.length > 1
-        let rule = ruleInput.value->Js.Json.decodeArray->Option.getOr([])
+        let rule = ruleInput.value->JSON.Decode.array->Option.getOr([])
         let keyExtractor = (index, _rule, isDragging) => {
           let id = {`algorithm.rules[${string_of_int(index)}]`}
           let i = 1
@@ -132,9 +132,12 @@ let make = () => {
 
       let intitialValue =
         [
-          ("name", responseDict->LogicUtils.getString("name", "")->Js.Json.string),
-          ("description", responseDict->LogicUtils.getString("description", "")->Js.Json.string),
-          ("algorithm", programValue->Js.Json.object_),
+          ("name", responseDict->LogicUtils.getString("name", "")->JSON.Encode.string),
+          (
+            "description",
+            responseDict->LogicUtils.getString("description", "")->JSON.Encode.string,
+          ),
+          ("algorithm", programValue->JSON.Encode.object),
         ]->Dict.fromArray
 
       setInitialRule(_ => Some(intitialValue))
@@ -203,26 +206,26 @@ let make = () => {
     Js.Nullable.null
   }
 
-  let validate = (values: Js.Json.t) => {
+  let validate = (values: JSON.t) => {
     let dict = values->LogicUtils.getDictFromJsonObject
 
     let errors = Dict.make()
 
     AdvancedRoutingUtils.validateNameAndDescription(~dict, ~errors)
 
-    switch dict->Dict.get("algorithm")->Option.flatMap(Js.Json.decodeObject) {
+    switch dict->Dict.get("algorithm")->Option.flatMap(JSON.Decode.object) {
     | Some(jsonDict) => {
         let index = 1
         let rules = jsonDict->LogicUtils.getArrayFromDict("rules", [])
         if index === 1 && rules->Array.length === 0 {
-          errors->Dict.set(`Rules`, "Minimum 1 rule needed"->Js.Json.string)
+          errors->Dict.set(`Rules`, "Minimum 1 rule needed"->JSON.Encode.string)
         } else {
           rules->Array.forEachWithIndex((rule, i) => {
             let ruleDict = rule->LogicUtils.getDictFromJsonObject
             if !RoutingUtils.validateConditionsFor3ds(ruleDict) {
               errors->Dict.set(
                 `Rule ${(i + 1)->string_of_int} - Condition`,
-                `Invalid`->Js.Json.string,
+                `Invalid`->JSON.Encode.string,
               )
             }
           })
@@ -232,7 +235,7 @@ let make = () => {
     | None => ()
     }
 
-    errors->Js.Json.object_
+    errors->JSON.Encode.object
   }
   let redirectToNewRule = () => {
     setPageView(_ => NEW)
diff --git a/src/screens/HyperSwitch/ThreeDSFlow/ThreeDSUtils.res b/src/screens/HyperSwitch/ThreeDSFlow/ThreeDSUtils.res
index 540081a7a..71b20424c 100644
--- a/src/screens/HyperSwitch/ThreeDSFlow/ThreeDSUtils.res
+++ b/src/screens/HyperSwitch/ThreeDSFlow/ThreeDSUtils.res
@@ -5,7 +5,7 @@ let statementObject: array<AdvancedRoutingTypes.statement> = [
     lhs: "amount",
     value: {
       \"type": "number",
-      value: ""->Js.Json.string,
+      value: ""->JSON.Encode.string,
     },
     comparison: "EQUAL TO",
   },
@@ -13,7 +13,7 @@ let statementObject: array<AdvancedRoutingTypes.statement> = [
     logical: "AND",
     value: {
       \"type": "number",
-      value: ""->Js.Json.string,
+      value: ""->JSON.Encode.string,
     },
     lhs: "currency",
     comparison: "IS",
@@ -42,7 +42,7 @@ let buildInitial3DSValue: threeDsRoutingType = {
     defaultSelection: {
       override_3ds: "",
     },
-    metadata: Js.Json.null,
+    metadata: JSON.Encode.null,
   },
 }
 
@@ -69,7 +69,7 @@ let buildThreeDsPayloadBody = values => {
         "override_3ds": null,
       },
       "rules": modifiedRules,
-      "metadata": Dict.make()->Js.Json.object_,
+      "metadata": Dict.make()->JSON.Encode.object,
     },
   }
 
diff --git a/src/screens/HyperSwitch/UserManagement/InviteUsers.res b/src/screens/HyperSwitch/UserManagement/InviteUsers.res
index ce39b3eb8..6e80f1d49 100644
--- a/src/screens/HyperSwitch/UserManagement/InviteUsers.res
+++ b/src/screens/HyperSwitch/UserManagement/InviteUsers.res
@@ -15,7 +15,7 @@ module InviteEmailForm = {
     let role =
       ReactFinalForm.useField(`roleType`).input.value
       ->getArrayFromJson([])
-      ->getValueFromArray(0, ""->Js.Json.string)
+      ->getValueFromArray(0, ""->JSON.Encode.string)
       ->getStringFromJson("")
 
     let getRolesList = async () => {
@@ -85,9 +85,9 @@ let make = () => {
   let (loaderForInviteUsers, setLoaderForInviteUsers) = React.useState(_ => false)
 
   let initialValues = React.useMemo0(() => {
-    [("roleType", ["merchant_view_only"->Js.Json.string]->Js.Json.array)]
+    [("roleType", ["merchant_view_only"->JSON.Encode.string]->JSON.Encode.array)]
     ->Dict.fromArray
-    ->Js.Json.object_
+    ->JSON.Encode.object
   })
 
   let inviteUserReq = body => {
@@ -107,9 +107,9 @@ let make = () => {
     let promisesOfInvitedUsers = emailList->Array.map(ele => {
       let body =
         [
-          ("email", ele->String.toLowerCase->Js.Json.string),
-          ("name", ele->getNameFromEmail->Js.Json.string),
-          ("role_id", role->Js.Json.string),
+          ("email", ele->String.toLowerCase->JSON.Encode.string),
+          ("name", ele->getNameFromEmail->JSON.Encode.string),
+          ("role_id", role->JSON.Encode.string),
         ]->getJsonFromArrayOfJson
       inviteUserReq(body)
     })
@@ -117,15 +117,15 @@ let make = () => {
     let response = await PromiseUtils.allSettledPolyfill(promisesOfInvitedUsers)
     if !magicLink {
       let invitedUserData = response->Array.mapWithIndex((ele, index) => {
-        switch Js.Json.classify(ele) {
-        | Js.Json.JSONObject(jsonDict) => {
+        switch JSON.Classify.classify(ele) {
+        | Object(jsonDict) => {
             let passwordFromResponse = jsonDict->getString("password", "")
             [
-              ("email", emailList[index]->Option.getOr("")->Js.Json.string),
-              ("password", passwordFromResponse->Js.Json.string),
+              ("email", emailList[index]->Option.getOr("")->JSON.Encode.string),
+              ("password", passwordFromResponse->JSON.Encode.string),
             ]->getJsonFromArrayOfJson
           }
-        | _ => Js.Json.null
+        | _ => JSON.Encode.null
         }
       })
 
@@ -135,9 +135,9 @@ let make = () => {
         DownloadUtils.download(
           ~fileName=`invited-users.txt`,
           ~content=invitedUserData
-          ->Array.filter(ele => ele !== Js.Json.null)
-          ->Js.Json.array
-          ->Js.Json.stringifyWithSpace(3),
+          ->Array.filter(ele => ele !== JSON.Encode.null)
+          ->JSON.Encode.array
+          ->JSON.stringifyWithIndent(3),
           ~fileType="application/json",
         )
       }
@@ -200,7 +200,7 @@ let make = () => {
     if roleTypeValue->Option.isNone {
       getRoleForUser(permissionInfoValue)->ignore
     } else {
-      settingUpValues(roleTypeValue->Option.getOr(Js.Json.null), permissionInfoValue)
+      settingUpValues(roleTypeValue->Option.getOr(JSON.Encode.null), permissionInfoValue)
     }
   }
 
diff --git a/src/screens/HyperSwitch/UserManagement/ShowUserData.res b/src/screens/HyperSwitch/UserManagement/ShowUserData.res
index fed7aab6d..dc3b5a5f9 100644
--- a/src/screens/HyperSwitch/UserManagement/ShowUserData.res
+++ b/src/screens/HyperSwitch/UserManagement/ShowUserData.res
@@ -15,7 +15,7 @@ module UserHeading = {
     let _resendInvite = async () => {
       try {
         let url = getURL(~entityName=USERS, ~userType=#RESEND_INVITE, ~methodType=Post, ())
-        let body = [("user_id", userId->Js.Json.string)]->Dict.fromArray->Js.Json.object_
+        let body = [("user_id", userId->JSON.Encode.string)]->Dict.fromArray->JSON.Encode.object
         let _ = await updateDetails(url, body, Post, ())
         showToast(~message=`Invite resend. Please check your email.`, ~toastType=ToastSuccess, ())
       } catch {
@@ -56,7 +56,7 @@ let make = () => {
   open APIUtils
   let fetchDetails = useGetMethod()
   let url = RescriptReactRouter.useUrl()
-  let (roleData, setRoleData) = React.useState(_ => Js.Json.null)
+  let (roleData, setRoleData) = React.useState(_ => JSON.Encode.null)
   let {permissionInfo, setPermissionInfo} = React.useContext(GlobalProvider.defaultContext)
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
   let (usersList, setUsersList) = React.useState(_ => [])
diff --git a/src/screens/HyperSwitch/UserManagement/UserManagementUtils.res b/src/screens/HyperSwitch/UserManagement/UserManagementUtils.res
index 80f6cb2fc..3957779eb 100644
--- a/src/screens/HyperSwitch/UserManagement/UserManagementUtils.res
+++ b/src/screens/HyperSwitch/UserManagement/UserManagementUtils.res
@@ -21,8 +21,8 @@ let inviteEmail = FormRenderer.makeFieldInfo(
 
 let validateEmptyValue = (key, errors) => {
   switch key {
-  | "emailList" => Dict.set(errors, "email", "Please enter Invite mails"->Js.Json.string)
-  | _ => Dict.set(errors, key, `Please enter a ${key->LogicUtils.snakeToTitle}`->Js.Json.string)
+  | "emailList" => Dict.set(errors, "email", "Please enter Invite mails"->JSON.Encode.string)
+  | _ => Dict.set(errors, key, `Please enter a ${key->LogicUtils.snakeToTitle}`->JSON.Encode.string)
   }
 }
 
@@ -37,15 +37,15 @@ let validateForm = (values, ~fieldsToValidate: array<string>) => {
       key->validateEmptyValue(errors)
     } else {
       value->Array.forEach(ele => {
-        if ele->Js.Json.decodeString->Option.getOr("")->HSwitchUtils.isValidEmail {
-          errors->Dict.set("email", "Please enter a valid email"->Js.Json.string)
+        if ele->JSON.Decode.string->Option.getOr("")->HSwitchUtils.isValidEmail {
+          errors->Dict.set("email", "Please enter a valid email"->JSON.Encode.string)
         }
       })
       ()
     }
   })
 
-  errors->Js.Json.object_
+  errors->JSON.Encode.object
 }
 
 let roleListDataMapper: UserRoleEntity.roleListResponse => SelectBox.dropdownOption = ele => {
@@ -77,7 +77,7 @@ let getArrayOfPermissionData = json => {
   json
   ->LogicUtils.getDictFromJsonObject
   ->LogicUtils.getArrayFromDict("permissions", [])
-  ->Array.map(i => i->Js.Json.decodeString->Option.getOr(""))
+  ->Array.map(i => i->JSON.Decode.string->Option.getOr(""))
 }
 
 let updatePresentInInfoList = (infoData, permissionsData) => {
@@ -151,7 +151,7 @@ module RolePermissionValueRenderer = {
   }
 }
 
-let roleListResponseMapper: Dict.t<Js.Json.t> => UserRoleEntity.roleListResponse = dict => {
+let roleListResponseMapper: Dict.t<JSON.t> => UserRoleEntity.roleListResponse = dict => {
   open LogicUtils
   {
     role_id: dict->getString("role_id", ""),
diff --git a/src/screens/HyperSwitch/UserManagement/UserRoleEntity.res b/src/screens/HyperSwitch/UserManagement/UserRoleEntity.res
index 86506d8e5..d83fd069e 100644
--- a/src/screens/HyperSwitch/UserManagement/UserRoleEntity.res
+++ b/src/screens/HyperSwitch/UserManagement/UserRoleEntity.res
@@ -118,7 +118,7 @@ let getCellForUser = (data: userTableTypes, colType: userColTypes): Table.cell =
   }
 }
 
-let getUserData: Js.Json.t => array<userTableTypes> = json => {
+let getUserData: JSON.t => array<userTableTypes> = json => {
   getArrayDataFromJson(json, itemToObjMapperForUser)
 }
 
diff --git a/src/screens/HyperSwitch/Utils/HSwitchGlobalSearchBar.res b/src/screens/HyperSwitch/Utils/HSwitchGlobalSearchBar.res
index 899fa072e..68a3ac475 100644
--- a/src/screens/HyperSwitch/Utils/HSwitchGlobalSearchBar.res
+++ b/src/screens/HyperSwitch/Utils/HSwitchGlobalSearchBar.res
@@ -12,12 +12,12 @@ let matchInSearchOption = (searchOptions, searchText, name, link, ~sectionName,
       (
         "elements",
         [
-          sectionName->Js.Json.string,
-          name->Js.Json.string,
-          searchKey->Js.Json.string,
-        ]->Js.Json.array,
+          sectionName->JSON.Encode.string,
+          name->JSON.Encode.string,
+          searchKey->JSON.Encode.string,
+        ]->JSON.Encode.array,
       ),
-      ("redirect_link", `${link}${redirection}`->Js.Json.string),
+      ("redirect_link", `${link}${redirection}`->JSON.Encode.string),
     ]->Dict.fromArray
   })
 }
@@ -71,8 +71,11 @@ let make = () => {
           if checkStringStartsWithSubstring(~itemToCheck=obj.name, ~searchText) {
             let matchedEle =
               [
-                ("elements", [""->Js.Json.string, obj.name->Js.Json.string]->Js.Json.array),
-                ("redirect_link", obj.link->Js.Json.string),
+                (
+                  "elements",
+                  [""->JSON.Encode.string, obj.name->JSON.Encode.string]->JSON.Encode.array,
+                ),
+                ("redirect_link", obj.link->JSON.Encode.string),
               ]->Dict.fromArray
             acc->Array.push(matchedEle)
           }
@@ -103,11 +106,11 @@ let make = () => {
                         (
                           "elements",
                           [
-                            sectionObj.name->Js.Json.string,
-                            obj.name->Js.Json.string,
-                          ]->Js.Json.array,
+                            sectionObj.name->JSON.Encode.string,
+                            obj.name->JSON.Encode.string,
+                          ]->JSON.Encode.array,
                         ),
-                        ("redirect_link", obj.link->Js.Json.string),
+                        ("redirect_link", obj.link->JSON.Encode.string),
                       ]->Dict.fromArray
                     insideAcc->Array.push(matchedEle)
                   }
@@ -131,8 +134,8 @@ let make = () => {
           if checkStringStartsWithSubstring(~itemToCheck=obj.name, ~searchText) {
             let matchedEle =
               [
-                ("elements", [obj.name->Js.Json.string]->Js.Json.array),
-                ("redirect_link", obj.link->Js.Json.string),
+                ("elements", [obj.name->JSON.Encode.string]->JSON.Encode.array),
+                ("redirect_link", obj.link->JSON.Encode.string),
               ]->Dict.fromArray
             acc->Array.push(matchedEle)
           }
@@ -273,7 +276,7 @@ let make = () => {
                             <div className=activeClasses>
                               {elementsArray
                               ->Array.mapWithIndex((item, index) => {
-                                let elementValue = item->Js.Json.decodeString->Option.getOr("")
+                                let elementValue = item->JSON.Decode.string->Option.getOr("")
                                 <UIUtils.RenderIf
                                   condition={elementValue->String.length > 0}
                                   key={index->string_of_int}>
diff --git a/src/screens/HyperSwitch/Utils/HSwitchUtils.res b/src/screens/HyperSwitch/Utils/HSwitchUtils.res
index 01cfa16af..792fb54a5 100644
--- a/src/screens/HyperSwitch/Utils/HSwitchUtils.res
+++ b/src/screens/HyperSwitch/Utils/HSwitchUtils.res
@@ -64,14 +64,14 @@ let setMerchantDetails = (key, value) => {
   let localStorageData = getInfoFromLocalStorage(~lStorageKey="merchant")
   localStorageData->Dict.set(key, value)
 
-  "merchant"->LocalStorage.setItem(localStorageData->Js.Json.stringifyAny->Option.getOr(""))
+  "merchant"->LocalStorage.setItem(localStorageData->JSON.stringifyAny->Option.getOr(""))
 }
 
 // TODO : Remove once user-management flow introduces
 let setUserDetails = (key, value) => {
   let localStorageData = getInfoFromLocalStorage(~lStorageKey="user")
   localStorageData->Dict.set(key, value)
-  "user"->LocalStorage.setItem(localStorageData->Js.Json.stringifyAny->Option.getOr(""))
+  "user"->LocalStorage.setItem(localStorageData->JSON.stringifyAny->Option.getOr(""))
 }
 let getSearchOptionsForProcessors = (~processorList, ~getNameFromString) => {
   let searchOptionsForProcessors =
@@ -122,27 +122,27 @@ let getBodyForFeedBack = (values, ~modalType=HSwitchFeedBackModalUtils.FeedBackM
   let valueDict = values->getDictFromJsonObject
   let rating = valueDict->getInt("rating", 1)
 
-  let bodyFields = [("email", email->Js.Json.string)]
+  let bodyFields = [("email", email->JSON.Encode.string)]
 
   switch modalType {
   | FeedBackModal =>
     bodyFields
     ->Array.pushMany([
-      ("category", valueDict->getString("category", "")->Js.Json.string),
-      ("description", valueDict->getString("feedbacks", "")->Js.Json.string),
-      ("rating", rating->Float.fromInt->Js.Json.number),
+      ("category", valueDict->getString("category", "")->JSON.Encode.string),
+      ("description", valueDict->getString("feedbacks", "")->JSON.Encode.string),
+      ("rating", rating->Float.fromInt->JSON.Encode.float),
     ])
     ->ignore
   | RequestConnectorModal =>
     bodyFields
     ->Array.pushMany([
-      ("category", "request_connector"->Js.Json.string),
+      ("category", "request_connector"->JSON.Encode.string),
       (
         "description",
         `[${valueDict->getString("connector_name", "")}]-[${valueDict->getString(
             "description",
             "",
-          )}]`->Js.Json.string,
+          )}]`->JSON.Encode.string,
       ),
     ])
     ->ignore
@@ -158,9 +158,9 @@ let getMetaData = (newMetadata, metaData) => {
   }
 }
 
-let returnIntegrationJson = (integrationData: ProviderTypes.integration): Js.Json.t => {
+let returnIntegrationJson = (integrationData: ProviderTypes.integration): JSON.t => {
   [
-    ("is_done", integrationData.is_done->Js.Json.boolean),
+    ("is_done", integrationData.is_done->JSON.Encode.bool),
     ("metadata", integrationData.metadata),
   ]->getJsonFromArrayOfJson
 }
@@ -169,7 +169,7 @@ let constructOnboardingBody = (
   ~dashboardPageState,
   ~integrationDetails: ProviderTypes.integrationDetailsType,
   ~is_done: bool,
-  ~metadata: option<Js.Json.t>=?,
+  ~metadata: option<JSON.t>=?,
   (),
 ) => {
   let copyOfIntegrationDetails = integrationDetails
diff --git a/src/screens/HyperSwitch/Utils/TableSearchFilter.res b/src/screens/HyperSwitch/Utils/TableSearchFilter.res
index a87492bb4..4e337c2d6 100644
--- a/src/screens/HyperSwitch/Utils/TableSearchFilter.res
+++ b/src/screens/HyperSwitch/Utils/TableSearchFilter.res
@@ -27,7 +27,7 @@ let make = (
     onBlur: _ev => (),
     onChange,
     onFocus: _ev => (),
-    value: searchVal->Js.Json.string,
+    value: searchVal->JSON.Encode.string,
     checked: true,
   }
 
@@ -35,7 +35,7 @@ let make = (
     <ReactFinalForm.Form
       subscription=ReactFinalForm.subscribeToValues
       onSubmit=handleSubmit
-      initialValues={""->Js.Json.string}
+      initialValues={""->JSON.Encode.string}
       render={_handleSubmit => {
         InputFields.textInput(
           ~input=inputSearch,
diff --git a/src/screens/componentsDemo/CardTable.res b/src/screens/componentsDemo/CardTable.res
index 185e97de4..2911eba2d 100644
--- a/src/screens/componentsDemo/CardTable.res
+++ b/src/screens/componentsDemo/CardTable.res
@@ -35,7 +35,7 @@ module CardDetails = {
   @react.component
   let make = (
     ~itemArray,
-    ~heading: Js.Array.t<Table.header>,
+    ~heading: array<Table.header>,
     ~onRowClick,
     ~rowIndex,
     ~size=4,
@@ -111,7 +111,7 @@ module CardDetails = {
 
 @react.component
 let make = (
-  ~heading: Js.Array.t<Table.header>,
+  ~heading: array<Table.header>,
   ~rows,
   ~offset=0,
   ~onRowClick=?,
diff --git a/src/screens/componentsDemo/DragDrop.res b/src/screens/componentsDemo/DragDrop.res
index 4892e2885..d7a182fab 100644
--- a/src/screens/componentsDemo/DragDrop.res
+++ b/src/screens/componentsDemo/DragDrop.res
@@ -20,9 +20,9 @@ let getItemStyle = (isDragging, _draggableStyle) => {
 @react.component
 let make = (
   ~isHorizontal=true,
-  ~listItems: array<Js.Json.t>,
-  ~setListItems: (array<Js.Json.t> => array<Js.Json.t>) => unit,
-  ~keyExtractor: Js.Json.t => option<string>,
+  ~listItems: array<JSON.t>,
+  ~setListItems: (array<JSON.t> => array<JSON.t>) => unit,
+  ~keyExtractor: JSON.t => option<string>,
 ) => {
   let (list, setList) = React.useState(_ => listItems)
   let reorder = (currentState, startIndex, endIndex) => {
@@ -80,7 +80,8 @@ let make = (
             {(provided, _snapshot) => {
               React.cloneElement(
                 <div className={`flex ${directionClass}`} ref={provided["innerRef"]}>
-                  {list->Js.Array.mapi((item, index) => {
+                  {list
+                  ->Array.mapWithIndex((item, index) => {
                     let val = keyExtractor(item)
                     switch val {
                     | Some(str) =>
@@ -106,7 +107,8 @@ let make = (
 
                     | None => React.null
                     }
-                  }, _)->React.array}
+                  })
+                  ->React.array}
                   {provided["placeholder"]}
                 </div>,
                 provided["droppableProps"],
diff --git a/src/screens/componentsDemo/DragNDropDemo.res b/src/screens/componentsDemo/DragNDropDemo.res
index ed94150ea..db803f9f3 100644
--- a/src/screens/componentsDemo/DragNDropDemo.res
+++ b/src/screens/componentsDemo/DragNDropDemo.res
@@ -41,9 +41,9 @@ module DraggableItem = {
 
 type props = {
   isHorizontal?: bool,
-  listItems: array<Js.Json.t>,
-  setListItems: (array<Js.Json.t> => array<Js.Json.t>) => unit,
-  keyExtractor: Js.Json.t => option<string>,
+  listItems: array<JSON.t>,
+  setListItems: (array<JSON.t> => array<JSON.t>) => unit,
+  keyExtractor: JSON.t => option<string>,
 }
 
 let default = (props: props) => {
diff --git a/src/screens/componentsDemo/DragNDropDemo.resi b/src/screens/componentsDemo/DragNDropDemo.resi
index 137f4769f..0a019f573 100644
--- a/src/screens/componentsDemo/DragNDropDemo.resi
+++ b/src/screens/componentsDemo/DragNDropDemo.resi
@@ -1,8 +1,8 @@
 type props = {
   isHorizontal?: bool,
-  listItems: array<Js.Json.t>,
-  setListItems: (array<Js.Json.t> => array<Js.Json.t>) => unit,
-  keyExtractor: Js.Json.t => option<string>,
+  listItems: array<JSON.t>,
+  setListItems: (array<JSON.t> => array<JSON.t>) => unit,
+  keyExtractor: JSON.t => option<string>,
 }
 
 let default: props => React.element
diff --git a/src/screens/componentsDemo/DragNDropDemoLazy.res b/src/screens/componentsDemo/DragNDropDemoLazy.res
index c64fa3622..5e4c5f754 100644
--- a/src/screens/componentsDemo/DragNDropDemoLazy.res
+++ b/src/screens/componentsDemo/DragNDropDemoLazy.res
@@ -2,8 +2,8 @@ open LazyUtils
 
 type props = {
   isHorizontal: option<bool>,
-  keyExtractor: Js.Json.t => option<string>,
-  listItems: array<Js.Json.t>,
-  setListItems: (array<Js.Json.t> => array<Js.Json.t>) => unit,
+  keyExtractor: JSON.t => option<string>,
+  listItems: array<JSON.t>,
+  setListItems: (array<JSON.t> => array<JSON.t>) => unit,
 }
 let make: props => React.element = reactLazy(.() => import_("./DragNDropDemo.bs.js"))
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res
index 7221bc886..9aebc4d01 100644
--- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res
+++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res
@@ -8,7 +8,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType,
 
   let url = RescriptReactRouter.useUrl()
   let mixpanelEvent = MixpanelHook.useSendEvent()
-  let initialValues = Dict.make()->Js.Json.object_
+  let initialValues = Dict.make()->JSON.Encode.object
   let clientCountry = HSwitchUtils.getBrowswerDetails().clientCountry
   let country = clientCountry.isoAlpha2->CountryUtils.getCountryCodeStringFromVarient
   let showToast = ToastState.useShowToast()
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
index fc68721b8..0bc7143a3 100644
--- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
+++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
@@ -81,57 +81,57 @@ let passwordField = FormRenderer.makeFieldInfo(
 )
 
 let getResetpasswordBodyJson = (password, token) =>
-  [("password", password->Js.Json.string), ("token", token->Js.Json.string)]
+  [("password", password->JSON.Encode.string), ("token", token->JSON.Encode.string)]
   ->Dict.fromArray
-  ->Js.Json.object_
+  ->JSON.Encode.object
 
 let getEmailPasswordBody = (email, password, country) =>
   [
-    ("email", email->Js.Json.string),
-    ("password", password->Js.Json.string),
-    ("country", country->Js.Json.string),
+    ("email", email->JSON.Encode.string),
+    ("password", password->JSON.Encode.string),
+    ("country", country->JSON.Encode.string),
   ]
   ->Dict.fromArray
-  ->Js.Json.object_
+  ->JSON.Encode.object
 
 let getEmailBody = (email, ~country=?, ()) => {
-  let fields = [("email", email->Js.Json.string)]
+  let fields = [("email", email->JSON.Encode.string)]
 
   switch country {
-  | Some(value) => fields->Array.push(("country", value->Js.Json.string))->ignore
+  | Some(value) => fields->Array.push(("country", value->JSON.Encode.string))->ignore
   | _ => ()
   }
 
-  fields->Dict.fromArray->Js.Json.object_
+  fields->Dict.fromArray->JSON.Encode.object
 }
 
 let parseResponseJson = (~json, ~email) => {
   open HSwitchUtils
   open LogicUtils
-  let valuesDict = json->Js.Json.decodeObject->Option.getOr(Dict.make())
+  let valuesDict = json->JSON.Decode.object->Option.getOr(Dict.make())
 
   // * Setting all local storage values
   setMerchantDetails(
     "merchant_id",
-    valuesDict->LogicUtils.getString("merchant_id", "")->Js.Json.string,
+    valuesDict->LogicUtils.getString("merchant_id", "")->JSON.Encode.string,
   )
-  setMerchantDetails("email", email->Js.Json.string)
-  setUserDetails("name", valuesDict->getString("name", "")->Js.Json.string)
-  setUserDetails("user_role", valuesDict->getString("user_role", "")->Js.Json.string)
+  setMerchantDetails("email", email->JSON.Encode.string)
+  setUserDetails("name", valuesDict->getString("name", "")->JSON.Encode.string)
+  setUserDetails("user_role", valuesDict->getString("user_role", "")->JSON.Encode.string)
   // setUserDetails(
   //   "is_metadata_filled",
-  // "true"->Js.Json.string
-  //     ? "true"->Js.Json.string
-  //     : valuesDict->getBool("is_metadata_filled", true)->getStringFromBool->Js.Json.string,
+  // "true"->JSON.Encode.string
+  //     ? "true"->JSON.Encode.string
+  //     : valuesDict->getBool("is_metadata_filled", true)->getStringFromBool->JSON.Encode.string,
   // )
 
   let verificationValue = valuesDict->getOptionInt("verification_days_left")->Option.getOr(-1)
 
-  setMerchantDetails("verification", verificationValue->Int.toString->Js.Json.string)
+  setMerchantDetails("verification", verificationValue->Int.toString->JSON.Encode.string)
   valuesDict->getString("token", "")
 }
 
-let validateForm = (values: Js.Json.t, keys: array<string>) => {
+let validateForm = (values: JSON.t, keys: array<string>) => {
   let valuesDict = values->LogicUtils.getDictFromJsonObject
 
   let errors = Dict.make()
@@ -141,19 +141,23 @@ let validateForm = (values: Js.Json.t, keys: array<string>) => {
     // empty check
     if value == "" {
       switch key {
-      | "email" => Dict.set(errors, key, "Please enter your Email ID"->Js.Json.string)
-      | "password" => Dict.set(errors, key, "Please enter your Password"->Js.Json.string)
-      | "create_password" => Dict.set(errors, key, "Please enter your Password"->Js.Json.string)
+      | "email" => Dict.set(errors, key, "Please enter your Email ID"->JSON.Encode.string)
+      | "password" => Dict.set(errors, key, "Please enter your Password"->JSON.Encode.string)
+      | "create_password" => Dict.set(errors, key, "Please enter your Password"->JSON.Encode.string)
       | "comfirm_password" =>
-        Dict.set(errors, key, "Please enter your Password Once Again"->Js.Json.string)
+        Dict.set(errors, key, "Please enter your Password Once Again"->JSON.Encode.string)
       | _ =>
-        Dict.set(errors, key, `${key->LogicUtils.capitalizeString} cannot be empty`->Js.Json.string)
+        Dict.set(
+          errors,
+          key,
+          `${key->LogicUtils.capitalizeString} cannot be empty`->JSON.Encode.string,
+        )
       }
     }
 
     // email check
     if value !== "" && key === "email" && value->HSwitchUtils.isValidEmail {
-      Dict.set(errors, key, "Please enter valid Email ID"->Js.Json.string)
+      Dict.set(errors, key, "Please enter valid Email ID"->JSON.Encode.string)
     }
 
     // password check
@@ -170,7 +174,7 @@ let validateForm = (values: Js.Json.t, keys: array<string>) => {
     )
   })
 
-  errors->Js.Json.object_
+  errors->JSON.Encode.object
 }
 
 let note = (authType, setAuthType, isMagicLinkEnabled) => {
@@ -343,7 +347,7 @@ module Header = {
         <div
           onClick={_ => {
             form.resetFieldState("email")
-            form.reset(Js.Json.object_(Dict.make())->Js.Nullable.return)
+            form.reset(JSON.Encode.object(Dict.make())->Js.Nullable.return)
             setAuthType(_ => authType)
             path->RescriptReactRouter.push
           }}
@@ -420,12 +424,12 @@ let errorMapper = dict => {
 let parseErrorMessage = errorMessage => {
   let parsedValue = switch Js.Exn.message(errorMessage) {
   | Some(msg) => msg->LogicUtils.safeParse
-  | None => Js.Json.null
+  | None => JSON.Encode.null
   }
 
-  switch Js.Json.classify(parsedValue) {
-  | JSONObject(obj) => obj->errorMapper
-  | JSONString(_str) => Dict.make()->errorMapper
+  switch JSON.Classify.classify(parsedValue) {
+  | Object(obj) => obj->errorMapper
+  | String(_str) => Dict.make()->errorMapper
   | _ => Dict.make()->errorMapper
   }
 }
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchEmailVerifyScreen.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchEmailVerifyScreen.res
index b51b611e8..14f8f32d9 100644
--- a/src/screens/login/HSwitchLoginFlow/HyperSwitchEmailVerifyScreen.res
+++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchEmailVerifyScreen.res
@@ -2,8 +2,8 @@ let generateBody = (url: RescriptReactRouter.url) => {
   let body = Dict.make()
   let val = url.search->LogicUtils.getDictFromUrlSearchParams->Dict.get("token")->Option.getOr("")
 
-  body->Dict.set("token", val->Js.Json.string)
-  body->Js.Json.object_
+  body->Dict.set("token", val->JSON.Encode.string)
+  body->JSON.Encode.object
 }
 
 @react.component
@@ -21,11 +21,11 @@ let make = (~setAuthType, ~setAuthStatus, ~authType) => {
         authType == HyperSwitchAuthTypes.EmailVerify ? #VERIFY_EMAIL : #VERIFY_MAGIC_LINK
       let url = getURL(~entityName=USERS, ~methodType=Post, ~userType, ())
       let res = await updateDetails(url, body, Post, ())
-      let email = res->Js.Json.decodeObject->Option.getOr(Dict.make())->getString("email", "")
+      let email = res->JSON.Decode.object->Option.getOr(Dict.make())->getString("email", "")
       let token = HyperSwitchAuthUtils.parseResponseJson(~json=res, ~email)
       if !(token->isEmptyString) && !(email->isEmptyString) {
         setAuthStatus(LoggedIn(HyperSwitchAuthTypes.getDummyAuthInfoForToken(token)))
-        setIsSidebarDetails("isPinned", false->Js.Json.boolean)
+        setIsSidebarDetails("isPinned", false->JSON.Encode.bool)
         RescriptReactRouter.replace(`${HSwitchGlobalVars.hyperSwitchFEPrefix}/home`)
       } else {
         setAuthStatus(LoggedOut)
diff --git a/src/server/NodeJs.res b/src/server/NodeJs.res
index 01b2e9a67..aeb902443 100644
--- a/src/server/NodeJs.res
+++ b/src/server/NodeJs.res
@@ -21,7 +21,7 @@ module Fs = {
 }
 
 module Querystring = {
-  type parsedUrlQUery = Js.Json.t
+  type parsedUrlQUery = JSON.t
 
   @module("querystring")
   external parse: string => parsedUrlQUery = "parse"
diff --git a/src/utils/AnalyticsNewUtils.res b/src/utils/AnalyticsNewUtils.res
index 1a20d6e1d..8bd03f3cb 100644
--- a/src/utils/AnalyticsNewUtils.res
+++ b/src/utils/AnalyticsNewUtils.res
@@ -41,7 +41,7 @@ let calculateHistoricTime = (
   }
 }
 
-let makeFilters = (~filters: Js.Json.t, ~cardinalityArr) => {
+let makeFilters = (~filters: JSON.t, ~cardinalityArr) => {
   let decodeFilter = filters->getDictFromJsonObject
 
   let expressionArr =
@@ -50,8 +50,8 @@ let makeFilters = (~filters: Js.Json.t, ~cardinalityArr) => {
     ->Array.map(item => {
       let (key, value) = item
       Dict.fromArray([
-        ("field", key->Js.Json.string),
-        ("condition", "In"->Js.Json.string),
+        ("field", key->JSON.Encode.string),
+        ("condition", "In"->JSON.Encode.string),
         ("val", value),
       ])
     })
@@ -59,20 +59,20 @@ let makeFilters = (~filters: Js.Json.t, ~cardinalityArr) => {
   if expressionArr->Array.length === 1 {
     expressionArr->Array.get(0)
   } else if expressionArr->Array.length > 1 {
-    let leftInitial = Array.pop(expressionArr)->Option.getOr(Dict.make())->Js.Json.object_
-    let rightInitial = Array.pop(expressionArr)->Option.getOr(Dict.make())->Js.Json.object_
+    let leftInitial = Array.pop(expressionArr)->Option.getOr(Dict.make())->JSON.Encode.object
+    let rightInitial = Array.pop(expressionArr)->Option.getOr(Dict.make())->JSON.Encode.object
 
     let complexFilterDict = Dict.fromArray([
-      ("and", Dict.fromArray([("left", leftInitial), ("right", rightInitial)])->Js.Json.object_),
+      ("and", Dict.fromArray([("left", leftInitial), ("right", rightInitial)])->JSON.Encode.object),
     ])
     expressionArr->Array.forEach(item => {
       let complextFilterDictCopy = complexFilterDict->Dict.toArray->Array.copy->Dict.fromArray
       complexFilterDict->Dict.set(
         "and",
         Dict.fromArray([
-          ("left", complextFilterDictCopy->Js.Json.object_),
-          ("right", item->Js.Json.object_),
-        ])->Js.Json.object_,
+          ("left", complextFilterDictCopy->JSON.Encode.object),
+          ("right", item->JSON.Encode.object),
+        ])->JSON.Encode.object,
       )
     })
     Some(complexFilterDict)
@@ -110,14 +110,14 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getOr("")->Js.Json.string),
-                  ("condition", "NotEquals"->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->JSON.Encode.string),
+                  ("condition", "NotEquals"->JSON.Encode.string),
                   (
                     "val",
                     value[1]
                     ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
-                    ->Js.Json.string,
+                    ->JSON.Encode.string,
                   ),
                 ]),
               )
@@ -132,14 +132,14 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getOr("")->Js.Json.string),
-                  ("condition", "Greater"->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->JSON.Encode.string),
+                  ("condition", "Greater"->JSON.Encode.string),
                   (
                     "val",
                     value[1]
                     ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
-                    ->Js.Json.string,
+                    ->JSON.Encode.string,
                   ),
                 ]),
               )
@@ -154,14 +154,14 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getOr("")->Js.Json.string),
-                  ("condition", "Less"->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->JSON.Encode.string),
+                  ("condition", "Less"->JSON.Encode.string),
                   (
                     "val",
                     value[1]
                     ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
-                    ->Js.Json.string,
+                    ->JSON.Encode.string,
                   ),
                 ]),
               )
@@ -176,14 +176,14 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getOr("")->Js.Json.string),
-                  ("condition", "GreaterThanEquall"->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->JSON.Encode.string),
+                  ("condition", "GreaterThanEquall"->JSON.Encode.string),
                   (
                     "val",
                     value[1]
                     ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
-                    ->Js.Json.string,
+                    ->JSON.Encode.string,
                   ),
                 ]),
               )
@@ -198,14 +198,14 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getOr("")->Js.Json.string),
-                  ("condition", "LessThanEqual"->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->JSON.Encode.string),
+                  ("condition", "LessThanEqual"->JSON.Encode.string),
                   (
                     "val",
                     value[1]
                     ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
-                    ->Js.Json.string,
+                    ->JSON.Encode.string,
                   ),
                 ]),
               )
@@ -220,14 +220,14 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getOr("")->Js.Json.string),
-                  ("condition", "Equals"->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->JSON.Encode.string),
+                  ("condition", "Equals"->JSON.Encode.string),
                   (
                     "val",
                     value[1]
                     ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
-                    ->Js.Json.string,
+                    ->JSON.Encode.string,
                   ),
                 ]),
               )
@@ -242,8 +242,8 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getOr("")->Js.Json.string),
-                  ("condition", "In"->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->JSON.Encode.string),
+                  ("condition", "In"->JSON.Encode.string),
                   (
                     "val",
                     value[1]
@@ -253,7 +253,7 @@ let getFilterBody = (
                     ->String.replaceRegExp(%re("/\)/g"), "")
                     ->String.split(",")
                     ->Array.map(item => item->String.trim)
-                    ->Js.Json.stringArray,
+                    ->LogicUtils.getJsonFromArrayOfString,
                   ),
                 ]),
               )
@@ -268,8 +268,8 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getOr("")->Js.Json.string),
-                  ("condition", "NotIn"->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->JSON.Encode.string),
+                  ("condition", "NotIn"->JSON.Encode.string),
                   (
                     "val",
                     value[1]
@@ -279,7 +279,7 @@ let getFilterBody = (
                     ->String.replaceRegExp(%re("/\)/g"), "")
                     ->String.split(",")
                     ->Array.map(item => item->String.trim)
-                    ->Js.Json.stringArray,
+                    ->LogicUtils.getJsonFromArrayOfString,
                   ),
                 ]),
               )
@@ -294,14 +294,14 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getOr("")->Js.Json.string),
-                  ("condition", "Like"->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->JSON.Encode.string),
+                  ("condition", "Like"->JSON.Encode.string),
                   (
                     "val",
                     value[1]
                     ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
-                    ->Js.Json.string,
+                    ->JSON.Encode.string,
                   ),
                 ]),
               )
@@ -324,9 +324,9 @@ let getFilterBody = (
           (
             conditionInitital,
             Dict.fromArray([
-              ("left", leftInitial->Js.Json.object_),
-              ("right", rightInitial->Js.Json.object_),
-            ])->Js.Json.object_,
+              ("left", leftInitial->JSON.Encode.object),
+              ("right", rightInitial->JSON.Encode.object),
+            ])->JSON.Encode.object,
           ),
         ])
         let filterValueArr = Js.Array2.sliceFrom(filterValueArr->Array.copy, 2)
@@ -337,9 +337,9 @@ let getFilterBody = (
           complexFilterDict->Dict.set(
             andAndOr->Array.get(index)->Option.getOr("and"),
             Dict.fromArray([
-              ("left", complextFilterDictCopy->Js.Json.object_),
-              ("right", item->Js.Json.object_),
-            ])->Js.Json.object_,
+              ("left", complextFilterDictCopy->JSON.Encode.object),
+              ("right", item->JSON.Encode.object),
+            ])->JSON.Encode.object,
           )
         })
         Some(complexFilterDict)
@@ -358,9 +358,9 @@ let getFilterBody = (
           (
             "and",
             Dict.fromArray([
-              ("left", formattedFilters->Js.Json.object_),
-              ("right", customFilter->Js.Json.object_),
-            ])->Js.Json.object_,
+              ("left", formattedFilters->JSON.Encode.object),
+              ("right", customFilter->JSON.Encode.object),
+            ])->JSON.Encode.object,
           ),
         ])
         overallFilters
@@ -388,12 +388,12 @@ let getFilterBody = (
         (
           "and",
           Dict.fromArray([
-            ("left", filterValue->Js.Json.object_),
+            ("left", filterValue->JSON.Encode.object),
             ("right", jsonFormattedFilter),
-          ])->Js.Json.object_,
+          ])->JSON.Encode.object,
         ),
       ])
-    | false => jsonFormattedFilter->Js.Json.decodeObject->Option.getOr(Dict.make())
+    | false => jsonFormattedFilter->JSON.Decode.object->Option.getOr(Dict.make())
     }
   | None => filterValue
   }
@@ -421,7 +421,7 @@ let apiBodyMaker = (
   ~filterValueFromUrl=?,
   ~customFilterValue=?,
   ~sortingParams: option<sortedBasedOn>=?,
-  ~jsonFormattedFilter: option<Js.Json.t>=?,
+  ~jsonFormattedFilter: option<JSON.t>=?,
   ~cardinalitySortDims="total_volume",
   ~timeZone: timeZone=IST,
   ~timeCol: string="txn_initiated",
@@ -435,28 +435,28 @@ let apiBodyMaker = (
   | (Some(cardinality), Some(groupBy)) =>
     groupBy->Array.map(item => {
       Dict.fromArray([
-        ("field", item->Js.Json.string),
-        ("condition", "In"->Js.Json.string),
+        ("field", item->JSON.Encode.string),
+        ("condition", "In"->JSON.Encode.string),
         (
           "val",
           Dict.fromArray([
             (
               "sortedOn",
               Dict.fromArray([
-                ("sortDimension", cardinalitySortDims->Js.Json.string),
-                ("ordering", "Desc"->Js.Json.string),
-              ])->Js.Json.object_,
+                ("sortDimension", cardinalitySortDims->JSON.Encode.string),
+                ("ordering", "Desc"->JSON.Encode.string),
+              ])->JSON.Encode.object,
             ),
-            ("limit", cardinality->Js.Json.number),
-          ])->Js.Json.object_,
+            ("limit", cardinality->JSON.Encode.float),
+          ])->JSON.Encode.object,
         ),
       ])
     })
   | _ => []
   }
 
-  let activeTabArr = groupBy->Option.getOr([])->Array.map(Js.Json.string)
-  finalBody->Dict.set("metric", metric->Js.Json.string)
+  let activeTabArr = groupBy->Option.getOr([])->Array.map(JSON.Encode.string)
+  finalBody->Dict.set("metric", metric->JSON.Encode.string)
   let filterVal = getFilterBody(
     filterValueFromUrl,
     customFilterValue,
@@ -465,7 +465,7 @@ let apiBodyMaker = (
   )
 
   if filterVal->Dict.toArray->Array.length !== 0 {
-    finalBody->Dict.set("filters", filterVal->Js.Json.object_)
+    finalBody->Dict.set("filters", filterVal->JSON.Encode.object)
   }
 
   switch granularityConfig {
@@ -473,19 +473,19 @@ let apiBodyMaker = (
       let (granularityDuration, granularityUnit) = config
       let granularityDimension = Dict.make()
       let granularity = Dict.make()
-      Dict.set(granularityDimension, "timeZone", timeZone->timeZoneMapper->Js.Json.string)
-      Dict.set(granularityDimension, "intervalCol", timeCol->Js.Json.string)
-      Dict.set(granularity, "unit", granularityUnit->Js.Json.string)
-      Dict.set(granularity, "duration", granularityDuration->Int.toFloat->Js.Json.number)
-      Dict.set(granularityDimension, "granularity", granularity->Js.Json.object_)
+      Dict.set(granularityDimension, "timeZone", timeZone->timeZoneMapper->JSON.Encode.string)
+      Dict.set(granularityDimension, "intervalCol", timeCol->JSON.Encode.string)
+      Dict.set(granularity, "unit", granularityUnit->JSON.Encode.string)
+      Dict.set(granularity, "duration", granularityDuration->Int.toFloat->JSON.Encode.float)
+      Dict.set(granularityDimension, "granularity", granularity->JSON.Encode.object)
 
       finalBody->Dict.set(
         "dimensions",
-        Array.concat(activeTabArr, [granularityDimension->Js.Json.object_])->Js.Json.array,
+        Array.concat(activeTabArr, [granularityDimension->JSON.Encode.object])->JSON.Encode.array,
       )
     }
 
-  | None => finalBody->Dict.set("dimensions", activeTabArr->Js.Json.array)
+  | None => finalBody->Dict.set("dimensions", activeTabArr->JSON.Encode.array)
   }
 
   switch sortingParams {
@@ -493,18 +493,21 @@ let apiBodyMaker = (
     finalBody->Dict.set(
       "sortedOn",
       Dict.fromArray([
-        ("sortDimension", val.sortDimension->Js.Json.string),
-        ("ordering", val.ordering === #Desc ? "Desc"->Js.Json.string : "Asc"->Js.Json.string),
-      ])->Js.Json.object_,
+        ("sortDimension", val.sortDimension->JSON.Encode.string),
+        (
+          "ordering",
+          val.ordering === #Desc ? "Desc"->JSON.Encode.string : "Asc"->JSON.Encode.string,
+        ),
+      ])->JSON.Encode.object,
     )
   | None => ()
   }
   switch dataLimit {
-  | Some(dataLimit) => finalBody->Dict.set("limit", dataLimit->Js.Json.number)
+  | Some(dataLimit) => finalBody->Dict.set("limit", dataLimit->JSON.Encode.float)
   | None => ()
   }
 
-  finalBody->Dict.set("domain", domain->Js.Json.string)
-  finalBody->Dict.set("interval", timeObj->Js.Json.object_)
-  finalBody->Js.Json.object_
+  finalBody->Dict.set("domain", domain->JSON.Encode.string)
+  finalBody->Dict.set("interval", timeObj->JSON.Encode.object)
+  finalBody->JSON.Encode.object
 }
diff --git a/src/utils/DictionaryUtils.res b/src/utils/DictionaryUtils.res
index 8f1717589..88c114580 100644
--- a/src/utils/DictionaryUtils.res
+++ b/src/utils/DictionaryUtils.res
@@ -48,8 +48,8 @@ let equalDicts = (dictionary1, dictionary2) => {
 }
 
 let checkEqualJsonDicts = (~checkKeys, ~ignoreKeys, dictionary1, dictionary2) => {
-  let dictionary1 = dictionary1->Js.Json.object_->JsonFlattenUtils.flattenObject(false)
-  let dictionary2 = dictionary2->Js.Json.object_->JsonFlattenUtils.flattenObject(false)
+  let dictionary1 = dictionary1->JSON.Encode.object->JsonFlattenUtils.flattenObject(false)
+  let dictionary2 = dictionary2->JSON.Encode.object->JsonFlattenUtils.flattenObject(false)
 
   dictionary1
   ->Dict.toArray
@@ -59,14 +59,14 @@ let checkEqualJsonDicts = (~checkKeys, ~ignoreKeys, dictionary1, dictionary2) =>
       (checkKeys->Array.includes(key) || checkKeys->Array.length === 0) &&
         !(ignoreKeys->Array.includes(key))
     ) {
-      switch value->Js.Json.classify {
-      | JSONArray(array) => {
+      switch value->JSON.Classify.classify {
+      | Array(array) => {
           let arr1 = array->LogicUtils.getStrArrayFromJsonArray
           let arr2 = dictionary2->LogicUtils.getStrArrayFromDict(key, [])
           !LogicUtils.isEqualStringArr(arr1, arr2)
         }
 
-      | JSONString(string) => string !== dictionary2->LogicUtils.getString(key, "")
+      | String(string) => string !== dictionary2->LogicUtils.getString(key, "")
       | _ => dictionary2->LogicUtils.getJsonObjectFromDict(key) !== value
       }
     } else {
@@ -79,14 +79,14 @@ let checkEqualJsonDicts = (~checkKeys, ~ignoreKeys, dictionary1, dictionary2) =>
     ->Array.find(item => {
       let (key, value) = item
       if checkKeys->Array.includes(key) && !(ignoreKeys->Array.includes(key)) {
-        switch value->Js.Json.classify {
-        | JSONArray(array) => {
+        switch value->JSON.Classify.classify {
+        | Array(array) => {
             let arr1 = array->LogicUtils.getStrArrayFromJsonArray
             let arr2 = dictionary1->LogicUtils.getStrArrayFromDict(key, [])
             !LogicUtils.isEqualStringArr(arr1, arr2)
           }
 
-        | JSONString(string) => string !== dictionary1->LogicUtils.getString(key, "")
+        | String(string) => string !== dictionary1->LogicUtils.getString(key, "")
         | _ => dictionary1->LogicUtils.getJsonObjectFromDict(key) !== value
         }
       } else {
diff --git a/src/utils/JsonFlattenUtils.res b/src/utils/JsonFlattenUtils.res
index 7d0a5be52..854c1b382 100644
--- a/src/utils/JsonFlattenUtils.res
+++ b/src/utils/JsonFlattenUtils.res
@@ -1,6 +1,6 @@
 let rec flattenObject = (obj, addIndicatorForObject) => {
   let newDict = Dict.make()
-  switch obj->Js.Json.decodeObject {
+  switch obj->JSON.Decode.object {
   | Some(obj) =>
     obj
     ->Dict.toArray
@@ -10,10 +10,10 @@ let rec flattenObject = (obj, addIndicatorForObject) => {
       if value->Identity.jsonToNullableJson->Js.Nullable.isNullable {
         Dict.set(newDict, key, value)
       } else {
-        switch value->Js.Json.decodeObject {
+        switch value->JSON.Decode.object {
         | Some(_valueObj) => {
             if addIndicatorForObject {
-              Dict.set(newDict, key, Js.Json.object_(Dict.make()))
+              Dict.set(newDict, key, JSON.Encode.object(Dict.make()))
             }
 
             let flattenedSubObj = flattenObject(value, addIndicatorForObject)
@@ -44,13 +44,13 @@ let rec setNested = (dict, keys, value) => {
     let key = keys[0]->Option.getOr("")
     let subDict = switch Dict.get(dict, key) {
     | Some(json) =>
-      switch json->Js.Json.decodeObject {
+      switch json->JSON.Decode.object {
       | Some(obj) => obj
       | None => dict
       }
     | None => {
         let subDict = Dict.make()
-        Dict.set(dict, key, subDict->Js.Json.object_)
+        Dict.set(dict, key, subDict->JSON.Encode.object)
         subDict
       }
     }
@@ -62,7 +62,7 @@ let rec setNested = (dict, keys, value) => {
 let unflattenObject = obj => {
   let newDict = Dict.make()
 
-  switch obj->Js.Json.decodeObject {
+  switch obj->JSON.Decode.object {
   | Some(dict) =>
     dict
     ->Dict.toArray
diff --git a/src/utils/LogicUtils.res b/src/utils/LogicUtils.res
index 70a111f9c..ae31cf349 100644
--- a/src/utils/LogicUtils.res
+++ b/src/utils/LogicUtils.res
@@ -26,14 +26,14 @@ let stripV4 = path => {
 // parse a string into json and return optional json
 let safeParseOpt = st => {
   try {
-    Js.Json.parseExn(st)->Some
+    Some(JSON.parseExn(st))
   } catch {
-  | _e => None
+  | _ => None
   }
 }
 // parse a string into json and return json with null default
 let safeParse = st => {
-  safeParseOpt(st)->Option.getOr(Js.Json.null)
+  safeParseOpt(st)->Option.getOr(JSON.Encode.null)
 }
 
 type numericComparisionType =
@@ -56,7 +56,7 @@ and logic = {
 }
 
 let getDictFromJsonObject = json => {
-  switch json->Js.Json.decodeObject {
+  switch json->JSON.Decode.object {
   | Some(dict) => dict
   | None => Dict.make()
   }
@@ -113,27 +113,27 @@ let getNameFromEmail = email => {
 }
 
 let getOptionString = (dict, key) => {
-  dict->Dict.get(key)->Option.flatMap(Js.Json.decodeString)
+  dict->Dict.get(key)->Option.flatMap(JSON.Decode.string)
 }
 
 let getString = (dict, key, default) => {
   getOptionString(dict, key)->Option.getOr(default)
 }
 
-let getStringFromJson = (json: Js.Json.t, default) => {
-  json->Js.Json.decodeString->Option.getOr(default)
+let getStringFromJson = (json: JSON.t, default) => {
+  json->JSON.Decode.string->Option.getOr(default)
 }
 
 let getBoolFromJson = (json, defaultValue) => {
-  json->Js.Json.decodeBoolean->Option.getOr(defaultValue)
+  json->JSON.Decode.bool->Option.getOr(defaultValue)
 }
 
-let getArrayFromJson = (json: Js.Json.t, default) => {
-  json->Js.Json.decodeArray->Option.getOr(default)
+let getArrayFromJson = (json: JSON.t, default) => {
+  json->JSON.Decode.array->Option.getOr(default)
 }
 
 let getOptionalArrayFromDict = (dict, key) => {
-  dict->Dict.get(key)->Option.flatMap(Js.Json.decodeArray)
+  dict->Dict.get(key)->Option.flatMap(JSON.Decode.array)
 }
 
 let getArrayFromDict = (dict, key, default) => {
@@ -142,28 +142,28 @@ let getArrayFromDict = (dict, key, default) => {
 
 let getArrayDataFromJson = (json, itemToObjMapper) => {
   json
-  ->Js.Json.decodeArray
+  ->JSON.Decode.array
   ->Option.getOr([])
-  ->Belt.Array.keepMap(Js.Json.decodeObject)
+  ->Belt.Array.keepMap(JSON.Decode.object)
   ->Array.map(itemToObjMapper)
 }
 let getStrArray = (dict, key) => {
   dict
   ->getOptionalArrayFromDict(key)
   ->Option.getOr([])
-  ->Array.map(json => json->Js.Json.decodeString->Option.getOr(""))
+  ->Array.map(json => json->JSON.Decode.string->Option.getOr(""))
 }
 
 let getStrArrayFromJsonArray = jsonArr => {
-  jsonArr->Belt.Array.keepMap(Js.Json.decodeString)
+  jsonArr->Belt.Array.keepMap(JSON.Decode.string)
 }
 
 let getStrArryFromJson = arr => {
-  arr->Js.Json.decodeArray->Option.map(getStrArrayFromJsonArray)->Option.getOr([])
+  arr->JSON.Decode.array->Option.map(getStrArrayFromJsonArray)->Option.getOr([])
 }
 
 let getOptionStrArrayFromJson = json => {
-  json->Js.Json.decodeArray->Option.map(getStrArrayFromJsonArray)
+  json->JSON.Decode.array->Option.map(getStrArrayFromJsonArray)
 }
 
 let getStrArrayFromDict = (dict, key, default) => {
@@ -191,7 +191,7 @@ let getNonEmptyArray = arr => {
 }
 
 let getOptionBool = (dict, key) => {
-  dict->Dict.get(key)->Option.flatMap(Js.Json.decodeBoolean)
+  dict->Dict.get(key)->Option.flatMap(JSON.Decode.bool)
 }
 
 let getBool = (dict, key, default) => {
@@ -199,7 +199,7 @@ let getBool = (dict, key, default) => {
 }
 
 let getJsonObjectFromDict = (dict, key) => {
-  dict->Dict.get(key)->Option.getOr(Js.Json.object_(Dict.make()))
+  dict->Dict.get(key)->Option.getOr(JSON.Encode.object(Dict.make()))
 }
 
 let getBoolFromString = (boolString, default: bool) => {
@@ -237,31 +237,31 @@ let getFloatFromString = (str, default) => {
 }
 
 let getIntFromJson = (json, default) => {
-  switch json->Js.Json.classify {
-  | JSONString(str) => getIntFromString(str, default)
-  | JSONNumber(floatValue) => floatValue->Float.toInt
+  switch json->JSON.Classify.classify {
+  | String(str) => getIntFromString(str, default)
+  | Number(floatValue) => floatValue->Float.toInt
   | _ => default
   }
 }
 let getOptionIntFromJson = json => {
-  switch json->Js.Json.classify {
-  | JSONString(str) => getOptionIntFromString(str)
-  | JSONNumber(floatValue) => Some(floatValue->Float.toInt)
+  switch json->JSON.Classify.classify {
+  | String(str) => getOptionIntFromString(str)
+  | Number(floatValue) => Some(floatValue->Float.toInt)
   | _ => None
   }
 }
 let getOptionFloatFromJson = json => {
-  switch json->Js.Json.classify {
-  | JSONString(str) => getOptionFloatFromString(str)
-  | JSONNumber(floatValue) => Some(floatValue)
+  switch json->JSON.Classify.classify {
+  | String(str) => getOptionFloatFromString(str)
+  | Number(floatValue) => Some(floatValue)
   | _ => None
   }
 }
 
 let getFloatFromJson = (json, default) => {
-  switch json->Js.Json.classify {
-  | JSONString(str) => getFloatFromString(str, default)
-  | JSONNumber(floatValue) => floatValue
+  switch json->JSON.Classify.classify {
+  | String(str) => getFloatFromString(str, default)
+  | Number(floatValue) => floatValue
   | _ => default
   }
 }
@@ -291,7 +291,7 @@ let getFloat = (dict, key, default) => {
 }
 
 let getObj = (dict, key, default) => {
-  dict->Dict.get(key)->Option.flatMap(Js.Json.decodeObject)->Option.getOr(default)
+  dict->Dict.get(key)->Option.flatMap(JSON.Decode.object)->Option.getOr(default)
 }
 
 let getDictFromUrlSearchParams = searchParams => {
@@ -309,16 +309,16 @@ let getDictFromUrlSearchParams = searchParams => {
   ->Dict.fromArray
 }
 let setOptionString = (dict, key, optionStr) =>
-  optionStr->Option.mapOr((), str => dict->Dict.set(key, str->Js.Json.string))
+  optionStr->Option.mapOr((), str => dict->Dict.set(key, str->JSON.Encode.string))
 
 let setOptionBool = (dict, key, optionInt) =>
-  optionInt->Option.mapOr((), bool => dict->Dict.set(key, bool->Js.Json.boolean))
+  optionInt->Option.mapOr((), bool => dict->Dict.set(key, bool->JSON.Encode.bool))
 
 let setOptionArray = (dict, key, optionArray) =>
-  optionArray->Option.mapOr((), array => dict->Dict.set(key, array->Js.Json.array))
+  optionArray->Option.mapOr((), array => dict->Dict.set(key, array->JSON.Encode.array))
 
 let setOptionDict = (dict, key, optionDictValue) =>
-  optionDictValue->Option.mapOr((), value => dict->Dict.set(key, value->Js.Json.object_))
+  optionDictValue->Option.mapOr((), value => dict->Dict.set(key, value->JSON.Encode.object))
 
 let capitalizeString = str => {
   String.toUpperCase(String.charAt(str, 0)) ++ Js.String2.substringToEnd(str, ~from=1)
@@ -463,7 +463,7 @@ let latencyShortNum = (~labelValue: float, ~includeMilliseconds=?, ()) => {
 }
 
 let checkEmptyJson = json => {
-  json == Js.Json.object_(Dict.make())
+  json == JSON.Encode.object(Dict.make())
 }
 
 let numericArraySortComperator = (a, b) => {
@@ -540,7 +540,7 @@ let getListHead = (~default="", list) => {
   list->List.head->Option.getOr(default)
 }
 
-let dataMerge = (~dataArr: array<array<Js.Json.t>>, ~dictKey: array<string>) => {
+let dataMerge = (~dataArr: array<array<JSON.t>>, ~dictKey: array<string>) => {
   let finalData = Dict.make()
   dataArr->Array.forEach(jsonArr => {
     jsonArr->Array.forEach(jsonObj => {
@@ -558,7 +558,7 @@ let dataMerge = (~dataArr: array<array<Js.Json.t>>, ~dictKey: array<string>) =>
 
       finalData->Dict.set(
         dictKey,
-        existingData->Array.concat(data)->Dict.fromArray->Js.Json.object_,
+        existingData->Array.concat(data)->Dict.fromArray->JSON.Encode.object,
       )
     })
   })
@@ -568,15 +568,12 @@ let dataMerge = (~dataArr: array<array<Js.Json.t>>, ~dictKey: array<string>) =>
 
 let getJsonFromStr = data => {
   if data !== "" {
-    Js.Json.stringifyWithSpace(safeParse(data), 2)
+    JSON.stringifyWithIndent(safeParse(data), 2)
   } else {
     data
   }
 }
 
-//Extract Exn to Dict
-external toExnJson: exn => Js.Json.t = "%identity"
-
 let compareLogic = (firstValue, secondValue) => {
   let temp1 = firstValue
   let temp2 = secondValue
@@ -589,7 +586,7 @@ let compareLogic = (firstValue, secondValue) => {
   }
 }
 
-let getJsonFromArrayOfJson = arr => arr->Dict.fromArray->Js.Json.object_
+let getJsonFromArrayOfJson = arr => arr->Dict.fromArray->JSON.Encode.object
 
 let getTitle = name => {
   name->String.toLowerCase->String.split("_")->Array.map(capitalizeString)->Array.joinWith(" ")
@@ -627,3 +624,7 @@ let listOfMatchedText = (text, searchText) => {
     }
   }
 }
+
+let getJsonFromArrayOfString = arr => {
+  arr->Array.map(ele => ele->JSON.Encode.string)->JSON.Encode.array
+}
diff --git a/src/utils/MapTypes.res b/src/utils/MapTypes.res
index 9dfc0b3a9..0b7526b19 100644
--- a/src/utils/MapTypes.res
+++ b/src/utils/MapTypes.res
@@ -1,5 +1,5 @@
 type rec map = {entries: (. unit) => map}
-external changeType: Js.Json.t => 't = "%identity"
+external changeType: JSON.t => 't = "%identity"
 @new external create: 't => map = "Map"
-type object = {fromEntries: (. map) => Js.Json.t}
+type object = {fromEntries: (. map) => JSON.t}
 external object: object = "Object"
diff --git a/src/utils/PromiseUtils.res b/src/utils/PromiseUtils.res
index 9d28e3046..3ea3550b8 100644
--- a/src/utils/PromiseUtils.res
+++ b/src/utils/PromiseUtils.res
@@ -1,7 +1,7 @@
 // Pollyfill for Promise.allSettled()
 // Promise.allSettled() takes an iterable of promises and returns a single promise that is fulfilled with an array of promise settlement result
 
-let allSettledPolyfill = (arr: array<promise<Js.Json.t>>) => {
+let allSettledPolyfill = (arr: array<promise<JSON.t>>) => {
   arr
   ->Array.map(promise =>
     promise
@@ -12,8 +12,8 @@ let allSettledPolyfill = (arr: array<promise<Js.Json.t>>) => {
       switch err {
       | Js.Exn.Error(e) =>
         let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
-        err->Js.Json.string
-      | _ => Js.Json.null
+        err->JSON.Encode.string
+      | _ => JSON.Encode.null
       }->Promise.resolve
     })
   )
diff --git a/src/utils/ResizeObserver.res b/src/utils/ResizeObserver.res
index ef72c0f89..ea1cf15a9 100644
--- a/src/utils/ResizeObserver.res
+++ b/src/utils/ResizeObserver.res
@@ -1,3 +1,3 @@
 type observer
 type dimensions
-@new external newResizerObserver: (Js.Array2.t<dimensions> => unit) => observer = "ResizeObserver"
+@new external newResizerObserver: (array<dimensions> => unit) => observer = "ResizeObserver"
diff --git a/src/utils/UrlFetchUtils.res b/src/utils/UrlFetchUtils.res
index cbe58db94..73b1c4096 100644
--- a/src/utils/UrlFetchUtils.res
+++ b/src/utils/UrlFetchUtils.res
@@ -2,9 +2,9 @@ let getFilterValue = value => {
   if String.includes(value, "[") {
     let str = String.slice(~start=1, ~end=value->String.length - 1, value)
     let splitArray = String.split(str, ",")
-    let jsonarr = splitArray->Array.map(val => Js.Json.string(val))
-    Js.Json.array(jsonarr)
+    let jsonarr = splitArray->Array.map(val => JSON.Encode.string(val))
+    JSON.Encode.array(jsonarr)
   } else {
-    Js.Json.string(value)
+    JSON.Encode.string(value)
   }
 }
diff --git a/src/utils/UserPrefUtils.res b/src/utils/UserPrefUtils.res
index ac03b2343..4662eba3e 100644
--- a/src/utils/UserPrefUtils.res
+++ b/src/utils/UserPrefUtils.res
@@ -2,13 +2,13 @@ open LogicUtils
 
 type moduleVisePref = {
   searchParams?: string,
-  moduleConfig?: Dict.t<Js.Json.t>, // we store array of string here
+  moduleConfig?: Dict.t<JSON.t>, // we store array of string here
 }
 type userPref = {
   lastVisitedTab?: string,
   moduleVisePref?: Dict.t<moduleVisePref>,
 }
-external userPrefToJson: userPref => Js.Json.t = "%identity"
+external userPrefToJson: userPref => JSON.t = "%identity"
 
 // DO NOT CHANGE THE KEYS
 let userPreferenceKeyInLocalStorage = "userPreferences"
@@ -63,8 +63,8 @@ let saveUserPref = (userPref: Dict.t<userPref>) => {
       (key, value->userPrefToJson)
     })
     ->Dict.fromArray
-    ->Js.Json.object_
-    ->Js.Json.stringify,
+    ->JSON.Encode.object
+    ->JSON.stringify,
   )
 }
 
@@ -72,7 +72,7 @@ let saveUserPref = (userPref: Dict.t<userPref>) => {
 let getUserPref = () => {
   switch LocalStorage.getItem(userPreferenceKeyInLocalStorage)->Js.Nullable.toOption {
   | Some(str) =>
-    str->LogicUtils.safeParse->Js.Json.decodeObject->Option.getOr(Dict.make())->converToUserPref
+    str->LogicUtils.safeParse->JSON.Decode.object->Option.getOr(Dict.make())->converToUserPref
 
   | None => Dict.make()
   }