diff --git a/package.json b/package.json
index c22650845..b2d3d4723 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "@juspay-tech/hyper-js": "^1.0.0",
     "@juspay-tech/react-hyper-js": "^1.0.1",
     "@monaco-editor/react": "^4.4.5",
-    "@rescript/core": "^0.5.0",
+    "@rescript/core": "^0.6.0",
     "@rescript/react": "^0.11.0",
     "@ryyppy/rescript-promise": "^2.1.0",
     "bs-fetch": "^0.6.2",
diff --git a/src/components/AdvancedSearchComponent.res b/src/components/AdvancedSearchComponent.res
index ffdad215d..a37dc4ef4 100644
--- a/src/components/AdvancedSearchComponent.res
+++ b/src/components/AdvancedSearchComponent.res
@@ -20,7 +20,7 @@ let make = (
 ) => {
   let {getObjects, searchUrl: url} = entity
   let fetchApi = AuthHooks.useApiFetcher()
-  let initialValueJson = Js.Json.object_(Js.Dict.empty())
+  let initialValueJson = Js.Json.object_(Dict.make())
   let showToast = ToastState.useShowToast()
   let (showModal, setShowModal) = React.useState(_ => false)
 
diff --git a/src/components/Button.res b/src/components/Button.res
index 5123f11c8..e0c5f1d1e 100644
--- a/src/components/Button.res
+++ b/src/components/Button.res
@@ -385,9 +385,7 @@ let make = (
   }
 
   let buttonSize: buttonSize =
-    buttonSize->Option.getWithDefault(
-      MatchMedia.useMatchMedia("(max-width: 800px)") ? Small : Medium,
-    )
+    buttonSize->Option.getOr(MatchMedia.useMatchMedia("(max-width: 800px)") ? Small : Medium)
 
   let lengthStyle = if fullLength {
     "w-full justify-between"
@@ -422,7 +420,7 @@ let make = (
     }
   }
 
-  let heightClass = customHeightClass->Option.getWithDefault({
+  let heightClass = customHeightClass->Option.getOr({
     switch buttonSize {
     | XSmall => "h-fit"
     | Small => "h-fit"
@@ -436,7 +434,7 @@ let make = (
   | _ => "cursor-pointer"
   }
 
-  let paddingClass = customPaddingClass->Option.getWithDefault(
+  let paddingClass = customPaddingClass->Option.getOr(
     switch buttonSize {
     | XSmall => "py-3 px-4"
     | Small =>
@@ -450,7 +448,7 @@ let make = (
     },
   )
 
-  let textPaddingClass = customTextPaddingClass->Option.getWithDefault(
+  let textPaddingClass = customTextPaddingClass->Option.getOr(
     switch buttonSize {
     | XSmall => "px-1"
     | Small => "px-1"
@@ -459,7 +457,7 @@ let make = (
     },
   )
 
-  let textSize = customTextSize->Option.getWithDefault(
+  let textSize = customTextSize->Option.getOr(
     switch buttonSize {
     | XSmall => "text-fs-11"
     | Small => "text-fs-13"
@@ -471,7 +469,7 @@ let make = (
   let ellipsisClass = ellipsisOnly ? "truncate" : ""
   let ellipsisParentClass = ellipsisOnly ? "max-w-[250px] md:max-w-xs" : ""
 
-  let iconSize = customIconSize->Option.getWithDefault(
+  let iconSize = customIconSize->Option.getOr(
     switch buttonSize {
     | XSmall => 12
     | Small => 14
@@ -496,7 +494,7 @@ let make = (
   | Large => ""
   }
 
-  let iconMargin = customIconMargin->Option.getWithDefault(
+  let iconMargin = customIconMargin->Option.getOr(
     switch buttonSize {
     | XSmall
     | Small => "ml-1"
@@ -673,7 +671,7 @@ let make = (
   | _ => "text-sm font-medium leading-5"
   }
 
-  let textId = text->Option.getWithDefault("")
+  let textId = text->Option.getOr("")
   let iconId = switch leftIcon {
   | FontAwesome(iconName)
   | Euler(iconName) => iconName
@@ -695,9 +693,9 @@ let make = (
   let relativeClass = isRelative ? "relative" : ""
   let conditionalButtonStyles = `${allowButtonTextMinWidth
       ? "min-w-min"
-      : ""} ${customBackColor->Option.getWithDefault(
-      backColor,
-    )} ${customRoundedClass->Option.getWithDefault(roundedClass)}`
+      : ""} ${customBackColor->Option.getOr(backColor)} ${customRoundedClass->Option.getOr(
+      roundedClass,
+    )}`
   let customJustifyStyle = customButtonStyle->String.includes("justify") ? "" : "justify-center"
 
   <AddDataAttributes attributes=[(dataAttrKey, dataAttrStr)]>
@@ -752,7 +750,7 @@ let make = (
           if showBtnTextToolTip {
             <div className=ellipsisParentClass>
               <ToolTip
-                description={tooltipText->Option.getWithDefault("")}
+                description={tooltipText->Option.getOr("")}
                 toolTipFor=btnContent
                 contentAlign=Default
                 justifyClass="justify-start"
diff --git a/src/components/Calendar.res b/src/components/Calendar.res
index 0200ee39d..b19e60905 100644
--- a/src/components/Calendar.res
+++ b/src/components/Calendar.res
@@ -21,7 +21,7 @@ module TableRow = {
     switch obj {
     | Some(a) => {
         let day = String.split(a, "-")
-        React.string(day[2]->Option.getWithDefault(""))
+        React.string(day[2]->Option.getOr(""))
       }
 
     | None => React.string("")
@@ -53,7 +53,7 @@ module TableRow = {
     let highlight = cellHighlighter
 
     {
-      if item == Belt.Array.make(7, "") {
+      if item == Array.make(~length=7, "") {
         <tr className="h-0" />
       } else {
         <tr className="transition duration-300 ease-in-out">
@@ -149,11 +149,11 @@ module TableRow = {
             }
             let getDate = date => {
               let datevalue = Js.Date.makeWithYMD(
-                ~year=Js.Float.fromString(date[0]->Option.getWithDefault("")),
+                ~year=Js.Float.fromString(date[0]->Option.getOr("")),
                 ~month=Js.Float.fromString(
-                  String.make(Js.Float.fromString(date[1]->Option.getWithDefault("")) -. 1.0),
+                  String.make(Js.Float.fromString(date[1]->Option.getOr("")) -. 1.0),
                 ),
-                ~date=Js.Float.fromString(date[2]->Option.getWithDefault("")),
+                ~date=Js.Float.fromString(date[2]->Option.getOr("")),
                 (),
               )
               datevalue
@@ -351,7 +351,7 @@ let make = (
   }
 
   // creating row info
-  let dummyRow = Belt.Array.make(6, Belt.Array.make(7, ""))
+  let dummyRow = Array.make(~length=6, Array.make(~length=7, ""))
 
   let rowMapper = (row, indexRow) => {
     Array.mapWithIndex(row, (_item, index) => {
diff --git a/src/components/CalendarList.res b/src/components/CalendarList.res
index 4ab53c226..4a372feee 100644
--- a/src/components/CalendarList.res
+++ b/src/components/CalendarList.res
@@ -30,7 +30,7 @@ let make = (
   // check whether month and date has value
   let getMonthFromFloat = value => {
     let valueInt = value->Belt.Float.toInt
-    months[valueInt]->Option.getWithDefault(Jan)
+    months[valueInt]->Option.getOr(Jan)
   }
   let getMonthInFloat = mon => {
     Array.indexOf(months, mon)->Belt.Float.fromInt
@@ -76,7 +76,7 @@ let make = (
     setCurrDate(_ => newDate)
   }
 
-  let dummyRow = Belt.Array.make(count, 1)
+  let dummyRow = Array.make(~length=count, 1)
   <div
     className={`flex flex-1 flex-row justify-center overflow-auto bg-jp-gray-50 dark:bg-jp-gray-950 rounded border border-jp-gray-500 dark:border-jp-gray-960 select-none ${calendarContaierStyle}`}>
     {dummyRow
@@ -96,7 +96,7 @@ let make = (
       let tempYear = Js.Date.getFullYear(Js.Date.fromFloat(tempDate))
       let showLeft = i == 0 && !secondCalendar
 
-      let showRight = i + 1 == Belt.Array.length(dummyRow) && !firstCalendar
+      let showRight = i + 1 == Array.length(dummyRow) && !firstCalendar
       let monthAndYear = String.concat(
         getMonthInStr(getMonthFromFloat(tempMonth)),
         Belt.Float.toString(tempYear),
diff --git a/src/components/CollapsableTableRow.res b/src/components/CollapsableTableRow.res
index c5e499392..463220f2a 100644
--- a/src/components/CollapsableTableRow.res
+++ b/src/components/CollapsableTableRow.res
@@ -81,7 +81,7 @@ let make = (
       <div className="px-3 py-4 bg-white dark:bg-jp-gray-lightgray_background">
         {item
         ->Array.mapWithIndex((obj, index) => {
-          let heading = headingArray->Belt.Array.get(index)->Option.getWithDefault("")
+          let heading = headingArray->Array.get(index)->Option.getOr("")
           <UIUtils.RenderIf condition={index !== 0} key={index->string_of_int}>
             <div className="flex mb-5 justify-between">
               <div className="text-jp-gray-900 opacity-50 font-medium">
diff --git a/src/components/CustomCharts/FunnelChart.res b/src/components/CustomCharts/FunnelChart.res
index f075eb3e9..5f75d27aa 100644
--- a/src/components/CustomCharts/FunnelChart.res
+++ b/src/components/CustomCharts/FunnelChart.res
@@ -12,13 +12,12 @@ 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->Belt.Array.get(0)->Option.getWithDefault(Js.Json.null)->LogicUtils.getDictFromJsonObject
+  let funnelData = data->Array.get(0)->Option.getOr(Js.Json.null)->LogicUtils.getDictFromJsonObject
   let (hoverIndex, setHoverIndex) = React.useState(_ => -1.)
   let (selectedMetric, setSelectedMetric) = React.useState(_ => Volume)
   let length = metrics->Array.length->Belt.Float.fromInt
   let widths = metrics->Array.mapWithIndex((metric, i) => {
-    let previousMetric = metrics->Belt.Array.get(i - 1)
+    let previousMetric = metrics->Array.get(i - 1)
     let previousMetric = switch previousMetric {
     | Some(prevMetric) => prevMetric.metric_name_db
     | None => ""
@@ -81,15 +80,14 @@ let make = (
               let borderTop = `${(size *. 14.)
                   ->Belt.Float.toString}rem solid rgb(0,109,249,${opacity->Belt.Float.toString})`
 
-              let currentWidthRatio = switch widths->Belt.Array.get(i->Belt.Float.toInt) {
+              let currentWidthRatio = switch widths->Array.get(i->Belt.Float.toInt) {
               | Some(width) => width
               | None => size *. 70.
               }
 
-              let nextWidthRatio = switch widths->Belt.Array.get(i->Belt.Float.toInt + 1) {
+              let nextWidthRatio = switch widths->Array.get(i->Belt.Float.toInt + 1) {
               | Some(width) => width
-              | None =>
-                widths->Belt.Array.get(i->Belt.Float.toInt)->Option.getWithDefault(size *. 70.)
+              | None => widths->Array.get(i->Belt.Float.toInt)->Option.getOr(size *. 70.)
               }
 
               fixedWidth := currentWidthRatio *. fixedWidth.contents
diff --git a/src/components/CustomCharts/HighchartHorizontalBarChart.res b/src/components/CustomCharts/HighchartHorizontalBarChart.res
index fe65d4175..35e488105 100644
--- a/src/components/CustomCharts/HighchartHorizontalBarChart.res
+++ b/src/components/CustomCharts/HighchartHorizontalBarChart.res
@@ -39,12 +39,12 @@ let xLabelFormatter: Js_OO.Callback.arity1<xAxisRecord => string> = {
       })
       ->Array.reduce(0, (acc, num) => {acc + num})
     let index = Array.findIndex(axis.categories, x => {x === value})
-    let firstSeries = series->Belt.Array.get(0)
+    let firstSeries = series->Array.get(0)
     let y = switch firstSeries {
     | Some(series) => {
         let options = series.options
         switch options {
-        | Some(options) => options.data->Belt.Array.get(index)->Option.getWithDefault(0)
+        | Some(options) => options.data->Array.get(index)->Option.getOr(0)
         | None => 0
         }
       }
@@ -74,7 +74,7 @@ let make = (
       selectedMetrics.metric_name_db,
     )
   }, (rawData, groupKey, selectedMetrics.metric_name_db))
-  let titleKey = titleKey->Option.getWithDefault(groupKey)
+  let titleKey = titleKey->Option.getOr(groupKey)
 
   let barOption: Js.Json.t = React.useMemo2(() => {
     let colors = {
diff --git a/src/components/CustomCharts/HighchartPieChart.res b/src/components/CustomCharts/HighchartPieChart.res
index 214f6b092..1759f49dc 100644
--- a/src/components/CustomCharts/HighchartPieChart.res
+++ b/src/components/CustomCharts/HighchartPieChart.res
@@ -43,7 +43,7 @@ let make = (
   let color = theme === Dark ? "white" : "black"
   let borderColor = theme === Dark ? "black" : "white"
   let opacity = theme === Dark ? "0.5" : "1"
-  let titleKey = titleKey->Option.getWithDefault(groupKey)
+  let titleKey = titleKey->Option.getOr(groupKey)
 
   let barOption: Js.Json.t = React.useMemo2(() => {
     let colors = {
diff --git a/src/components/CustomCharts/HighchartTimeSeriesChart.res b/src/components/CustomCharts/HighchartTimeSeriesChart.res
index c4965629e..554e72b99 100644
--- a/src/components/CustomCharts/HighchartTimeSeriesChart.res
+++ b/src/components/CustomCharts/HighchartTimeSeriesChart.res
@@ -169,12 +169,12 @@ module LineChart1D = {
             let (x, y, secondryMetrics) = axes
             xAxisMapInfo->LineChartUtils.appendToDictValue(
               ["run_date", "run_month", "run_week"]->Array.includes(groupKey)
-                ? x->Js.Json.decodeString->Option.getWithDefault("")
+                ? x->Js.Json.decodeString->Option.getOr("")
                 : x->Js.Json.stringify,
               (
                 item.name,
                 {
-                  item.color->Option.getWithDefault("#000000")
+                  item.color->Option.getOr("#000000")
                 },
                 y,
                 secondryMetrics,
@@ -298,8 +298,8 @@ module LineChart1D = {
           | None => None
           }
         })
-        ->Belt.Array.get(0)
-        ->Option.getWithDefault("")
+        ->Array.get(0)
+        ->Option.getOr("")
       let color =
         chartData
         ->Belt.Array.keepMap(item => {
@@ -308,8 +308,8 @@ module LineChart1D = {
           | None => None
           }
         })
-        ->Belt.Array.get(0)
-        ->Option.getWithDefault(`${colorOrig}`)
+        ->Array.get(0)
+        ->Option.getOr(`${colorOrig}`)
 
       let transformValue = num => {
         num->HSAnalyticsUtils.setPrecision()
@@ -611,12 +611,12 @@ module LineChart1D = {
 
                   let upper_bound =
                     upper_bound <= threshold
-                      ? threshold +. stepUpFromThreshold->Option.getWithDefault(0.)
+                      ? threshold +. stepUpFromThreshold->Option.getOr(0.)
                       : upper_bound
 
                   let lower_bound =
                     lower_bound >= threshold
-                      ? threshold -. stepUpFromThreshold->Option.getWithDefault(0.)
+                      ? threshold -. stepUpFromThreshold->Option.getOr(0.)
                       : lower_bound
 
                   let positions = NumericUtils.pretty([lower_bound, upper_bound], 5)
@@ -660,8 +660,7 @@ module LineChart1D = {
           "labels": {
             let labelsValue = {
               "formatter": Some(
-                @this
-                param => formatLabels(selectedMetrics, param.value->Option.getWithDefault(0.0)),
+                @this param => formatLabels(selectedMetrics, param.value->Option.getOr(0.0)),
               ),
               "enabled": true,
               "style": {
@@ -836,7 +835,7 @@ module RenderMultiDimensionalChart = {
             ),
             legendIndex: i.legendIndex,
             name: i.name,
-            color: i.color->Option.getWithDefault("#000000"),
+            color: i.color->Option.getOr("#000000"),
           })
         )
         ->ignore
@@ -893,10 +892,7 @@ module LineChart2D = {
     ~chartType: string="area",
   ) => {
     let (groupBy1, groupBy2) = switch groupBy {
-    | Some(value) => (
-        value->Belt.Array.get(0)->Option.getWithDefault(""),
-        value->Belt.Array.get(1)->Option.getWithDefault(""),
-      )
+    | Some(value) => (value->Array.get(0)->Option.getOr(""), value->Array.get(1)->Option.getOr(""))
     | None => ("", "")
     }
     let (groupBy1, groupBy2) = (groupBy2, groupBy1)
@@ -939,9 +935,9 @@ module LineChart3D = {
   ) => {
     let (groupBy1, groupBy2, groupby3) = switch groupBy {
     | Some(value) => (
-        value->Belt.Array.get(0)->Option.getWithDefault(""),
-        value->Belt.Array.get(1)->Option.getWithDefault(""),
-        value->Belt.Array.get(2)->Option.getWithDefault(""),
+        value->Array.get(0)->Option.getOr(""),
+        value->Array.get(1)->Option.getOr(""),
+        value->Array.get(2)->Option.getOr(""),
       )
     | None => ("", "", "")
     }
diff --git a/src/components/CustomCharts/LineChartUtils.res b/src/components/CustomCharts/LineChartUtils.res
index 9d6d5d89d..f76e33e51 100644
--- a/src/components/CustomCharts/LineChartUtils.res
+++ b/src/components/CustomCharts/LineChartUtils.res
@@ -111,8 +111,8 @@ let reduceOpacity = str => {
 
   switch match {
   | Some(val) => {
-      let opacity = val->Belt.Array.get(1)->Option.flatMap(a => a)->Option.getWithDefault("0")
-      let newOpacity = opacity->Belt.Float.fromString->Option.getWithDefault(0.0) /. 10.0
+      let opacity = val->Array.get(1)->Option.flatMap(a => a)->Option.getOr("0")
+      let newOpacity = opacity->Belt.Float.fromString->Option.getOr(0.0) /. 10.0
       str->String.replace(opacity, newOpacity->Belt.Float.toString)
     }
   | None => "0"
@@ -282,7 +282,7 @@ let timeSeriesDataMaker = (
     let groupByName =
       dict->getString(
         groupKey,
-        Dict.get(dict, groupKey)->Option.getWithDefault(""->Js.Json.string)->Js.Json.stringify,
+        Dict.get(dict, groupKey)->Option.getOr(""->Js.Json.string)->Js.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.)
@@ -318,9 +318,7 @@ let timeSeriesDataMaker = (
       ->Array.map(item => {
         let (key, value, secondryMetrix) = item
         let trafficValue =
-          value *.
-          100. /.
-          groupedByTime->Dict.get(key->Belt.Float.toString)->Option.getWithDefault(1.)
+          value *. 100. /. groupedByTime->Dict.get(key->Belt.Float.toString)->Option.getOr(1.)
         (key, trafficValue, secondryMetrix)
       })
       ->Js.Array2.sortInPlaceWith(chartDataSortBasedOnTime)
@@ -328,18 +326,17 @@ let timeSeriesDataMaker = (
     }
     let color = switch colors->Array.find(item => item.name == key) {
     | Some(val) => val.color
-    | None =>
-      legendColor[mod(index, legendColor->Array.length)]->Option.getWithDefault(defaultColor)
+    | None => legendColor[mod(index, legendColor->Array.length)]->Option.getOr(defaultColor)
     }
 
     let fillColor = switch legendColorGradients(topGradient, bottomGradient)->Array.find(item =>
-      item.color->Option.getWithDefault("#000000") == color
+      item.color->Option.getOr("#000000") == color
     ) {
     | Some(val) => val
     | None =>
       legendColorGradients(topGradient, bottomGradient)[
         mod(index, legendColor->Array.length)
-      ]->Option.getWithDefault(defaultLegendColorGradients(topGradient, bottomGradient))
+      ]->Option.getOr(defaultLegendColorGradients(topGradient, bottomGradient))
     }
     let value: timeSeriesDictWithSecondryMetrics<float> = {
       color: Some(color),
@@ -366,17 +363,17 @@ let getLegendDataForCurrentMetrix = (
     getString(
       dict,
       activeTab,
-      Dict.get(dict, activeTab)->Option.getWithDefault(""->Js.Json.string)->Js.Json.stringify,
+      Dict.get(dict, activeTab)->Option.getOr(""->Js.Json.string)->Js.Json.stringify,
     )
   })
-  timeSeriesData->Belt.Array.forEach(item => {
+  timeSeriesData->Array.forEach(item => {
     let dict = item->getDictFromJsonObject
     let time_overall_statsAtTime = (getString(dict, xAxis, ""), getFloat(dict, yAxis, 0.)) // time_bucket // current value of the metrics will be used for calculation of avg and the current
     currentAvgDict->appendToDictValue(
       getString(
         dict,
         activeTab,
-        Dict.get(dict, activeTab)->Option.getWithDefault(""->Js.Json.string)->Js.Json.stringify,
+        Dict.get(dict, activeTab)->Option.getOr(""->Js.Json.string)->Js.Json.stringify,
       ),
       time_overall_statsAtTime,
     )
@@ -393,8 +390,7 @@ let getLegendDataForCurrentMetrix = (
     currentAvgSortedDict
     ->Array.map(item => {
       let (_, value) = item
-      let (_, currentVal) =
-        value->Belt.Array.get(value->Array.length - 1)->Option.getWithDefault(("", 0.))
+      let (_, currentVal) = value->Array.get(value->Array.length - 1)->Option.getOr(("", 0.))
       currentVal
     })
     ->AnalyticsUtils.sumOfArrFloat
@@ -405,8 +401,7 @@ let getLegendDataForCurrentMetrix = (
       let (key, value) = item
       let sortedValueBasedOnTime = value->Js.Array2.sortInPlaceWith(sortBasedOnTimeLegend)
       let arrLen = sortedValueBasedOnTime->Array.length
-      let (_, currentVal) =
-        sortedValueBasedOnTime->Belt.Array.get(arrLen - 1)->Option.getWithDefault(("", 1.0))
+      let (_, currentVal) = sortedValueBasedOnTime->Array.get(arrLen - 1)->Option.getOr(("", 1.0))
 
       let overall =
         sortedValueBasedOnTime
@@ -414,7 +409,7 @@ let getLegendDataForCurrentMetrix = (
           let (_, value) = item
           value
         })
-        ->Belt.Array.reduce(0., (acc, value) => acc +. value)
+        ->Array.reduce(0., (acc, value) => acc +. value)
 
       let value: legendTableData = {
         groupByName: key,
@@ -426,7 +421,7 @@ let getLegendDataForCurrentMetrix = (
     })
   } else {
     let currentOverall = Dict.make()
-    groupedData->Belt.Array.forEach(item => {
+    groupedData->Array.forEach(item => {
       let dict = item->getDictFromJsonObject
       currentOverall->Dict.set(getString(dict, activeTab, ""), getFloat(dict, yAxis, 0.))
     })
@@ -444,18 +439,18 @@ let getLegendDataForCurrentMetrix = (
       let (metricsName, value) = item
       let sortedValueBasedOnTime = value->Js.Array2.sortInPlaceWith(sortBasedOnTimeLegend)
       let arrLen = sortedValueBasedOnTime->Array.length
-      let (_, currentVal) = sortedValueBasedOnTime[arrLen - 1]->Option.getWithDefault(("", 0.))
+      let (_, currentVal) = sortedValueBasedOnTime[arrLen - 1]->Option.getOr(("", 0.))
       // the avg stat won't work correct for Sr case have to find another way or avoid using the avg for Sr
       let overall = if metrixType === Traffic {
-        (currentOverall->Dict.get(metricsName)->Option.getWithDefault(0.) *.
+        (currentOverall->Dict.get(metricsName)->Option.getOr(0.) *.
         100. /.
         Js.Math.max_float(totalOverall, 1.))
         ->Js.Float.toFixedWithPrecision(~digits=2)
         ->removeTrailingZero
         ->Belt.Float.fromString
-        ->Option.getWithDefault(0.)
+        ->Option.getOr(0.)
       } else {
-        currentOverall->Dict.get(metricsName)->Option.getWithDefault(0.)
+        currentOverall->Dict.get(metricsName)->Option.getOr(0.)
       }
       let currentVal = if metrixType === Traffic {
         currentVal *. 100. /. currentValueOverallSum
@@ -488,7 +483,7 @@ let barChartDataMaker = (~yAxis: string, ~rawData: array<Js.Json.t>, ~activeTab:
     let selectedSegmentVal = getString(
       dict,
       activeTab,
-      Dict.get(dict, activeTab)->Option.getWithDefault(""->Js.Json.string)->Js.Json.stringify,
+      Dict.get(dict, activeTab)->Option.getOr(""->Js.Json.string)->Js.Json.stringify,
     ) // groupby/ selected segment
 
     let stats = getFloat(dict, yAxis, 0.) // overall metrics
@@ -532,7 +527,7 @@ let legendClickItem = (s: Highcharts.legendItem, e, setState) => {
   // whatever is there in selected array make it visible
   // edge case when nothing is selected make everyone visible
 
-  Belt.Array.forEach(s.chart.series, x => {
+  Array.forEach(s.chart.series, x => {
     if x === legendItemAsBool(s) {
       setState(prev => {
         let value =
@@ -541,14 +536,14 @@ let legendClickItem = (s: Highcharts.legendItem, e, setState) => {
             : Belt.Array.concat(prev, [x])
 
         if value->Array.length === 0 {
-          Belt.Array.forEach(
+          Array.forEach(
             s.chart.series,
             y => {
               y->Highcharts.show
             },
           )
         } else {
-          Belt.Array.forEach(
+          Array.forEach(
             s.chart.series,
             y => {
               value->Array.includes(y) ? y->Highcharts.show : y->Highcharts.hide
@@ -588,10 +583,7 @@ let getTooltipHTML = (metrics, data, onCursorName) => {
   let (name, color, y_axis, secondry_metrix) = data
   let secondry_metrix_val = switch metrics.secondryMetrics {
   | Some(secondryMetrics) =>
-    `${formatStatsAccToMetrix(
-        secondryMetrics.metric_type,
-        secondry_metrix->Option.getWithDefault(0.),
-      )}`
+    `${formatStatsAccToMetrix(secondryMetrics.metric_type, secondry_metrix->Option.getOr(0.))}`
   | None => ""
   }
 
@@ -616,10 +608,10 @@ let tooltipFormatter = (
 
     let dataArr = if ["run_date", "run_month", "run_week"]->Array.includes(groupKey) {
       let x = points->getString("name", "")
-      xAxisMapInfo->Dict.get(x)->Option.getWithDefault([])
+      xAxisMapInfo->Dict.get(x)->Option.getOr([])
     } else {
       let x = points->getFloat("x", 0.)
-      xAxisMapInfo->Dict.get(x->Js.Float.toString)->Option.getWithDefault([])
+      xAxisMapInfo->Dict.get(x->Js.Float.toString)->Option.getOr([])
     }
 
     let onCursorName = series->getString("name", "")
@@ -747,7 +739,7 @@ let getGranularityNew = (~startTime, ~endTime) => {
 }
 
 let getGranularityNewStr = (~startTime, ~endTime) => {
-  getGranularityNew(~startTime, ~endTime)->Belt.Array.map(item => {
+  getGranularityNew(~startTime, ~endTime)->Array.map(item => {
     let (val, unit) = item
     if val === 1 {
       if unit === "day" {
diff --git a/src/components/CustomExpandableTable.res b/src/components/CustomExpandableTable.res
index 67e1b39fa..7708bb563 100644
--- a/src/components/CustomExpandableTable.res
+++ b/src/components/CustomExpandableTable.res
@@ -153,7 +153,7 @@ let make = (
                                 | None => ([], [])
                                 }->Some
                               )
-                              ->Option.getWithDefault(([], []))
+                              ->Option.getOr(([], []))
 
                             if options->Array.length > 1 {
                               let filterInput: ReactFinalForm.fieldRenderPropsInput = {
diff --git a/src/components/DatePicker.res b/src/components/DatePicker.res
index 2e909cc0a..88c50fe6b 100644
--- a/src/components/DatePicker.res
+++ b/src/components/DatePicker.res
@@ -32,9 +32,9 @@ let make = (
   let (date, setDate) = React.useState(_ => {
     if selectedDate !== "" {
       let date = String.split(selectedDate, "-")
-      let dateDay = date->Belt.Array.get(2)->Option.getWithDefault("1")
-      let dateMonth = date->Belt.Array.get(1)->Option.getWithDefault("1")
-      let dateYear = date->Belt.Array.get(0)->Option.getWithDefault("1970")
+      let dateDay = date->Array.get(2)->Option.getOr("1")
+      let dateMonth = date->Array.get(1)->Option.getOr("1")
+      let dateYear = date->Array.get(0)->Option.getOr("1970")
 
       let timeSplit =
         switch input.value->Js.Json.decodeString {
@@ -44,9 +44,9 @@ let make = (
         ->DateRangePicker.getTimeStringForValue(isoStringToCustomTimeZone)
         ->String.split(":")
 
-      let timeHour = timeSplit->Belt.Array.get(0)->Option.getWithDefault(currentDateHourFormat)
-      let timeMinute = timeSplit->Belt.Array.get(1)->Option.getWithDefault(currentDateMinuteFormat)
-      let timeSecond = timeSplit->Belt.Array.get(2)->Option.getWithDefault(currentDateSecondsFormat)
+      let timeHour = timeSplit->Array.get(0)->Option.getOr(currentDateHourFormat)
+      let timeMinute = timeSplit->Array.get(1)->Option.getOr(currentDateMinuteFormat)
+      let timeSecond = timeSplit->Array.get(2)->Option.getOr(currentDateSecondsFormat)
       let dateTimeCheck = customTimezoneToISOString(
         dateYear,
         dateMonth,
@@ -74,9 +74,9 @@ let make = (
     setSelectedDate(_ => str)
 
     let currentDateSplit = String.split(str, "-")
-    let currentDateDay = currentDateSplit->Belt.Array.get(2)->Option.getWithDefault("1")
-    let currentDateYear = currentDateSplit->Belt.Array.get(0)->Option.getWithDefault("1970")
-    let currentDateMonth = currentDateSplit->Belt.Array.get(1)->Option.getWithDefault("1")
+    let currentDateDay = currentDateSplit->Array.get(2)->Option.getOr("1")
+    let currentDateYear = currentDateSplit->Array.get(0)->Option.getOr("1970")
+    let currentDateMonth = currentDateSplit->Array.get(1)->Option.getOr("1")
 
     let currentDateTimeCheck = customTimezoneToISOString(
       currentDateYear,
@@ -130,10 +130,10 @@ let make = (
           ? `${currentDateHourFormat}:${currentDateMinuteFormat}${showSeconds
                 ? ":" ++ currentDateSecondsFormat
                 : ""}`
-          : splitTime->Belt.Array.get(0)->Option.getWithDefault("NA") ++
+          : splitTime->Array.get(0)->Option.getOr("NA") ++
             ":" ++
-            splitTime->Belt.Array.get(1)->Option.getWithDefault("NA") ++ (
-              showSeconds ? ":" ++ splitTime->Belt.Array.get(2)->Option.getWithDefault("NA") : ""
+            splitTime->Array.get(1)->Option.getOr("NA") ++ (
+              showSeconds ? ":" ++ splitTime->Array.get(2)->Option.getOr("NA") : ""
             )}`
     }
     startDateStr
@@ -154,7 +154,7 @@ let make = (
   | Some(icon) => icon
   | None => FontAwesome("calendar")
   }
-  let fullLengthWidthClass = fullLength->Option.getWithDefault(false) ? "2xl:w-full" : ""
+  let fullLengthWidthClass = fullLength->Option.getOr(false) ? "2xl:w-full" : ""
 
   let startTimeInput: ReactFinalForm.fieldRenderPropsInput = {
     name: "string",
@@ -171,15 +171,13 @@ let make = (
           timeVal
         }
         let date = String.split(selectedDate, "-")
-        let dateDay = date->Belt.Array.get(2)->Option.getWithDefault("1")
-        let dateMonth = date->Belt.Array.get(1)->Option.getWithDefault("1")
-        let dateYear = date->Belt.Array.get(0)->Option.getWithDefault("1970")
+        let dateDay = date->Array.get(2)->Option.getOr("1")
+        let dateMonth = date->Array.get(1)->Option.getOr("1")
+        let dateYear = date->Array.get(0)->Option.getOr("1970")
         let timeSplit = String.split(timeVal, ":")
-        let timeHour = timeSplit->Belt.Array.get(0)->Option.getWithDefault(currentDateHourFormat)
-        let timeMinute =
-          timeSplit->Belt.Array.get(1)->Option.getWithDefault(currentDateMinuteFormat)
-        let timeSecond =
-          timeSplit->Belt.Array.get(2)->Option.getWithDefault(currentDateSecondsFormat)
+        let timeHour = timeSplit->Array.get(0)->Option.getOr(currentDateHourFormat)
+        let timeMinute = timeSplit->Array.get(1)->Option.getOr(currentDateMinuteFormat)
+        let timeSecond = timeSplit->Array.get(2)->Option.getOr(currentDateSecondsFormat)
         let dateTimeCheck = customTimezoneToISOString(
           dateYear,
           dateMonth,
diff --git a/src/components/DateRangePicker.res b/src/components/DateRangePicker.res
index 290bb0a08..e60941f0e 100644
--- a/src/components/DateRangePicker.res
+++ b/src/components/DateRangePicker.res
@@ -64,11 +64,11 @@ let getFormattedDate = (date, format) => {
 let isStartBeforeEndDate = (start, end) => {
   let getDate = date => {
     let datevalue = Js.Date.makeWithYMD(
-      ~year=Js.Float.fromString(date[0]->Option.getWithDefault("")),
+      ~year=Js.Float.fromString(date[0]->Option.getOr("")),
       ~month=Js.Float.fromString(
-        String.make(Js.Float.fromString(date[1]->Option.getWithDefault("")) -. 1.0),
+        String.make(Js.Float.fromString(date[1]->Option.getOr("")) -. 1.0),
       ),
-      ~date=Js.Float.fromString(date[2]->Option.getWithDefault("")),
+      ~date=Js.Float.fromString(date[2]->Option.getOr("")),
       (),
     )
     datevalue
@@ -291,9 +291,9 @@ module Base = {
         setEndDateVal(_ => "")
       } else {
         let endDateSplit = String.split(ele, "-")
-        let endDateDate = endDateSplit[2]->Option.getWithDefault("")
-        let endDateYear = endDateSplit[0]->Option.getWithDefault("")
-        let endDateMonth = endDateSplit[1]->Option.getWithDefault("")
+        let endDateDate = endDateSplit[2]->Option.getOr("")
+        let endDateYear = endDateSplit[0]->Option.getOr("")
+        let endDateMonth = endDateSplit[1]->Option.getOr("")
         let splitTime = switch time {
         | Some(val) => val
         | None =>
@@ -305,9 +305,9 @@ module Base = {
         }
 
         let timeSplit = String.split(splitTime, ":")
-        let timeHour = timeSplit->Belt.Array.get(0)->Option.getWithDefault("00")
-        let timeMinute = timeSplit->Belt.Array.get(1)->Option.getWithDefault("00")
-        let timeSecond = timeSplit->Belt.Array.get(2)->Option.getWithDefault("00")
+        let timeHour = timeSplit->Array.get(0)->Option.getOr("00")
+        let timeMinute = timeSplit->Array.get(1)->Option.getOr("00")
+        let timeSecond = timeSplit->Array.get(2)->Option.getOr("00")
         let endDateTimeCheck = customTimezoneToISOString(
           endDateYear,
           endDateMonth,
@@ -322,9 +322,9 @@ module Base = {
     let changeStartDate = (ele, isFromCustomInput, time) => {
       let setDate = str => {
         let startDateSplit = String.split(str, "-")
-        let startDateDay = startDateSplit[2]->Option.getWithDefault("")
-        let startDateYear = startDateSplit[0]->Option.getWithDefault("")
-        let startDateMonth = startDateSplit[1]->Option.getWithDefault("")
+        let startDateDay = startDateSplit[2]->Option.getOr("")
+        let startDateYear = startDateSplit[0]->Option.getOr("")
+        let startDateMonth = startDateSplit[1]->Option.getOr("")
         let splitTime = switch time {
         | Some(val) => val
         | None =>
@@ -335,9 +335,9 @@ module Base = {
           }
         }
         let timeSplit = String.split(splitTime, ":")
-        let timeHour = timeSplit->Belt.Array.get(0)->Option.getWithDefault("00")
-        let timeMinute = timeSplit->Belt.Array.get(1)->Option.getWithDefault("00")
-        let timeSecond = timeSplit->Belt.Array.get(2)->Option.getWithDefault("00")
+        let timeHour = timeSplit->Array.get(0)->Option.getOr("00")
+        let timeMinute = timeSplit->Array.get(1)->Option.getOr("00")
+        let timeSecond = timeSplit->Array.get(2)->Option.getOr("00")
         let startDateTimeCheck = customTimezoneToISOString(
           startDateYear,
           startDateMonth,
@@ -507,17 +507,13 @@ module Base = {
 
     let endTimeStr = {
       let timeArr = endTimeStr->String.split(":")
-      let endTimeTxt = `${timeArr[0]->Option.getWithDefault(
-          "00",
-        )}:${timeArr[1]->Option.getWithDefault("00")}`
-      showSeconds ? `${endTimeTxt}:${timeArr[2]->Option.getWithDefault("00")}` : endTimeTxt
+      let endTimeTxt = `${timeArr[0]->Option.getOr("00")}:${timeArr[1]->Option.getOr("00")}`
+      showSeconds ? `${endTimeTxt}:${timeArr[2]->Option.getOr("00")}` : endTimeTxt
     }
     let startTimeStr = {
       let timeArr = startTimeStr->String.split(":")
-      let startTimeTxt = `${timeArr[0]->Option.getWithDefault(
-          "00",
-        )}:${timeArr[1]->Option.getWithDefault("00")}`
-      showSeconds ? `${startTimeTxt}:${timeArr[2]->Option.getWithDefault("00")}` : startTimeTxt
+      let startTimeTxt = `${timeArr[0]->Option.getOr("00")}:${timeArr[1]->Option.getOr("00")}`
+      showSeconds ? `${startTimeTxt}:${timeArr[2]->Option.getOr("00")}` : startTimeTxt
     }
 
     let buttonText = {
@@ -615,7 +611,7 @@ module Base = {
       None
     }, (startDate, endDate, localStartDate, localEndDate))
 
-    let btnStyle = customButtonStyle->Option.getWithDefault("")
+    let btnStyle = customButtonStyle->Option.getOr("")
 
     let customStyleForBtn = btnStyle->String.length > 0 ? btnStyle : ""
 
@@ -791,7 +787,7 @@ module Base = {
                     </div>
                   } else if showMsg {
                     let msg = `Date Range should not exceed ${dateRangeLimit
-                      ->Option.getWithDefault(0)
+                      ->Option.getOr(0)
                       ->Belt.Int.toString} days`
                     <span className="w-full flex flex-row items-center mr-0 text-red-500">
                       <FormErrorIcon />
@@ -867,7 +863,7 @@ module Base = {
 
 let useStateForInput = (input: ReactFinalForm.fieldRenderPropsInput) => {
   React.useMemo1(() => {
-    let val = input.value->Js.Json.decodeString->Option.getWithDefault("")
+    let val = input.value->Js.Json.decodeString->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 160ec2e3d..fa99dc882 100644
--- a/src/components/DynamicChart.res
+++ b/src/components/DynamicChart.res
@@ -39,7 +39,7 @@ let getTimeSeriesChart = (chartEntity: chartEntity) => {
       ~endDateTime=chartEntity.end_time,
       ~cardinality=chartEntity.cardinality,
       ~mode=chartEntity.mode,
-      ~customFilter=chartEntity.customFilter->Option.getWithDefault(""),
+      ~customFilter=chartEntity.customFilter->Option.getOr(""),
       ~prefix=chartEntity.prefix,
       ~source=chartEntity.source,
       (),
@@ -63,7 +63,7 @@ let getLegendBody = (chartEntity: chartEntity) => {
       ~endDateTime=chartEntity.end_time,
       ~cardinality=chartEntity.cardinality,
       ~mode=chartEntity.mode,
-      ~customFilter=chartEntity.customFilter->Option.getWithDefault(""),
+      ~customFilter=chartEntity.customFilter->Option.getOr(""),
       ~prefix=chartEntity.prefix,
       ~source=chartEntity.source,
       (),
@@ -329,8 +329,8 @@ let make = (
     ->Belt.Array.keepMap(item => {
       let (key, value) = item
       let keyArr = key->String.split(".")
-      let prefix = keyArr->Belt.Array.get(0)->Option.getWithDefault("")
-      let fitlerName = keyArr->Belt.Array.get(1)->Option.getWithDefault("")
+      let prefix = keyArr->Array.get(0)->Option.getOr("")
+      let fitlerName = keyArr->Array.get(1)->Option.getOr("")
 
       // when chart id is not there then there won't be any prefix so the prefix will the filter name
       if chartId === "" {
@@ -351,7 +351,7 @@ let make = (
     ->Belt.Array.keepMap(item => {
       let (key, value) = item
       let keyArr = key->String.split(".")
-      let prefix = keyArr->Belt.Array.get(0)->Option.getWithDefault("")
+      let prefix = keyArr->Array.get(0)->Option.getOr("")
 
       if prefix === chartId && prefix !== "" {
         None
@@ -369,7 +369,7 @@ let make = (
 
   let {allFilterDimension, dateFilterKeys, currentMetrics, uriConfig, source} = entity
 
-  let enableLoaders = entity.enableLoaders->Option.getWithDefault(true)
+  let enableLoaders = entity.enableLoaders->Option.getOr(true)
 
   let entityAllMetrics = uriConfig->Array.reduce([], (acc, item) =>
     Array.concat(
@@ -387,7 +387,7 @@ let make = (
     let chartType =
       getChartCompFilters->LogicUtils.getString(
         "chartType",
-        entity.chartTypes->Belt.Array.get(0)->Option.getWithDefault(Line)->chartMapper,
+        entity.chartTypes->Array.get(0)->Option.getOr(Line)->chartMapper,
       )
     let chartTopMetric =
       getChartCompFilters->LogicUtils.getString("chartTopMetric", currentTopMatrix)
@@ -396,14 +396,14 @@ let make = (
       getChartCompFilters->LogicUtils.getString("chartBottomMetric", currentBottomMetrix)
 
     let dict = Dict.make()
-    let chartMatrixArr = entityAllMetrics->Belt.Array.map(item => item.metric_label)
+    let chartMatrixArr = entityAllMetrics->Array.map(item => item.metric_label)
 
     if cardinalityArr->Array.includes(cardinality) {
       dict->Dict.set("cardinality", cardinality)
     } else if cardinalityArr->Array.includes("TOP_5") {
       dict->Dict.set("cardinality", "TOP_5")
     } else {
-      dict->Dict.set("cardinality", cardinalityArr->Belt.Array.get(0)->Option.getWithDefault(""))
+      dict->Dict.set("cardinality", cardinalityArr->Array.get(0)->Option.getOr(""))
     }
     chartTypeArr->Array.includes(chartType)
       ? dict->Dict.set("chartType", chartType)
@@ -414,7 +414,7 @@ let make = (
     } else if chartMatrixArr->Array.includes(currentTopMatrix) {
       dict->Dict.set("chartTopMetric", currentTopMatrix)
     } else {
-      dict->Dict.set("chartTopMetric", chartMatrixArr->Belt.Array.get(0)->Option.getWithDefault(""))
+      dict->Dict.set("chartTopMetric", chartMatrixArr->Array.get(0)->Option.getOr(""))
     }
 
     if chartMatrixArr->Array.includes(chartBottomMetric) {
@@ -422,10 +422,7 @@ let make = (
     } else if chartMatrixArr->Array.includes(currentBottomMetrix) {
       dict->Dict.set("chartBottomMetric", currentBottomMetrix)
     } else {
-      dict->Dict.set(
-        "chartBottomMetric",
-        chartMatrixArr->Belt.Array.get(0)->Option.getWithDefault(""),
-      )
+      dict->Dict.set("chartBottomMetric", chartMatrixArr->Array.get(0)->Option.getOr(""))
     }
 
     updateChartCompFilters(dict)
@@ -541,13 +538,13 @@ let make = (
 
   React.useEffect2(() => {
     setGranularity(prev => {
-      current_granularity->Array.includes(prev->Option.getWithDefault(""))
+      current_granularity->Array.includes(prev->Option.getOr(""))
         ? prev
-        : current_granularity->Belt.Array.get(0)
+        : current_granularity->Array.get(0)
     })
     None
   }, (startTimeFromUrl, endTimeFromUrl))
-  let selectedTabStr = selectedTab->Option.getWithDefault([])->Array.joinWith("")
+  let selectedTabStr = selectedTab->Option.getOr([])->Array.joinWith("")
 
   let updatedChartConfigArr = React.useMemo7(() => {
     uriConfig->Array.map(item => {
@@ -563,8 +560,7 @@ let make = (
           },
         )
         ->Dict.fromArray
-      let activeTab =
-        selectedTab->Option.getWithDefault([])->Belt.Array.get(0)->Option.getWithDefault("")
+      let activeTab = selectedTab->Option.getOr([])->Array.get(0)->Option.getOr("")
       let granularity = if activeTab === "run_date" {
         "G_ONEHOUR"->Some
       } else if activeTab === "run_week" {
@@ -614,9 +610,7 @@ let make = (
             url: item.uri,
             body: item.timeSeriesBody(chartconfig),
             legendBody: ?(
-              chartconfig.groupByNames->Option.getWithDefault([])->Array.length === 1
-                ? legendBody
-                : None
+              chartconfig.groupByNames->Option.getOr([])->Array.length === 1 ? legendBody : None
             ),
             metrics: item.metrics,
             timeCol: item.timeCol,
@@ -633,12 +627,12 @@ let make = (
   let (groupKeyFromTab, titleKey) = React.useMemo1(() => {
     switch (tabTitleMapper, selectedTab) {
     | (Some(dict), Some(arr)) => {
-        let groupKey = arr->Belt.Array.get(0)->Option.getWithDefault("")
-        (groupKey, dict->Dict.get(groupKey)->Option.getWithDefault(groupKey))
+        let groupKey = arr->Array.get(0)->Option.getOr("")
+        (groupKey, dict->Dict.get(groupKey)->Option.getOr(groupKey))
       }
     | (None, Some(arr)) => (
-        arr->Belt.Array.get(0)->Option.getWithDefault(""),
-        arr->Belt.Array.get(0)->Option.getWithDefault(""),
+        arr->Array.get(0)->Option.getOr(""),
+        arr->Array.get(0)->Option.getOr(""),
       )
     | _ => ("", "")
     }
@@ -647,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.getWithDefault(Dict.make())
+        let dict = item->Js.Json.decodeObject->Option.getOr(Dict.make())
 
         switch dict->Dict.get("time_range") {
         | Some(jsonObj) => {
@@ -655,7 +649,7 @@ let make = (
 
             switch timeDict->Dict.get("startTime") {
             | Some(startValue) => {
-                let sTime = startValue->Js.Json.decodeString->Option.getWithDefault("")
+                let sTime = startValue->Js.Json.decodeString->Option.getOr("")
 
                 if sTime->String.length > 0 {
                   let {date, hour, minute, month, second, year} =
@@ -674,14 +668,14 @@ let make = (
         }
 
         selectedTab
-        ->Option.getWithDefault([])
+        ->Option.getOr([])
         ->Array.forEach(
           tabName => {
             let metric =
               Dict.get(dict, tabName)
-              ->Option.getWithDefault(""->Js.Json.string)
+              ->Option.getOr(""->Js.Json.string)
               ->Js.Json.decodeString
-              ->Option.getWithDefault("")
+              ->Option.getOr("")
             let label = metric == "" ? "other" : metric
 
             Dict.set(dict, tabName, label->Js.Json.string)
@@ -691,9 +685,9 @@ let make = (
                 if key->String.includes("amount") {
                   let amount =
                     Dict.get(dict, key)
-                    ->Option.getWithDefault(Js.Json.number(0.0))
+                    ->Option.getOr(Js.Json.number(0.0))
                     ->Js.Json.decodeNumber
-                    ->Option.getWithDefault(0.0)
+                    ->Option.getOr(0.0)
 
                   let amount = (amount /. 100.0)->Js.Float.toFixedWithPrecision(~digits=2)
 
@@ -742,13 +736,13 @@ let make = (
     let chartType =
       getChartCompFilters->LogicUtils.getString(
         "chartType",
-        entity.chartTypes->Belt.Array.get(0)->Option.getWithDefault(Line)->chartMapper,
+        entity.chartTypes->Array.get(0)->Option.getOr(Line)->chartMapper,
       )
     if (
       startTimeFromUrl !== "" &&
       endTimeFilterKey !== "" &&
       (granularity->Option.isSome || chartType !== "Line Chart") &&
-      current_granularity->Array.includes(granularity->Option.getWithDefault(""))
+      current_granularity->Array.includes(granularity->Option.getOr(""))
     ) {
       setChartLoading(_ => enableLoaders)
       fetchChartData(updatedChartBody, setRawChartData)
@@ -867,7 +861,7 @@ let make = (
                 } else if isExpandedUpper {
                   switch entityAllMetrics
                   ->Array.filter(item => item.metric_label === chartTopMetricFromUrl)
-                  ->Belt.Array.get(0) {
+                  ->Array.get(0) {
                   | Some(selectedMetrics) =>
                     let metricsUri = uriConfig->Array.find(uriMetrics => {
                       uriMetrics.metrics
@@ -877,7 +871,7 @@ let make = (
                     let (data, legendData, timeCol) = switch metricsUri {
                     | Some(val) =>
                       switch rawChartData
-                      ->Option.getWithDefault([])
+                      ->Option.getOr([])
                       ->Array.find(item => item.metricsUrl === val.uri) {
                       | Some(dataVal) => (dataVal.rawData, dataVal.legendData, val.timeCol)
                       | None => ([], [], "")
@@ -963,7 +957,7 @@ let make = (
       {if enableBottomChart {
         switch entityAllMetrics
         ->Array.filter(item => item.metric_label === chartBottomMetricFromUrl)
-        ->Belt.Array.get(0) {
+        ->Array.get(0) {
         | Some(selectedMetrics) =>
           let metricsUri = uriConfig->Array.find(uriMetrics => {
             uriMetrics.metrics
@@ -972,9 +966,7 @@ let make = (
           })
           let (data, legendData, timeCol) = switch metricsUri {
           | Some(val) =>
-            switch rawChartData
-            ->Option.getWithDefault([])
-            ->Array.find(item => item.metricsUrl === val.uri) {
+            switch rawChartData->Option.getOr([])->Array.find(item => item.metricsUrl === val.uri) {
             | Some(dataVal) => (dataVal.rawData, dataVal.legendData, val.timeCol)
             | None => ([], [], "")
             }
diff --git a/src/components/DynamicFilter.res b/src/components/DynamicFilter.res
index f0a004eb6..157f1a3cc 100644
--- a/src/components/DynamicFilter.res
+++ b/src/components/DynamicFilter.res
@@ -51,7 +51,7 @@ module CustomFilters = {
           ->String.replaceRegExp(%re("/ LIKE /gi"), "@@")
           ->String.split("@@")
 
-        let firstEle = Belt.Array.get(mArr, 0)->Option.getWithDefault("")
+        let firstEle = mArr[0]->Option.getOr("")
         if (
           firstEle != "" && tabNames->Array.indexOf(firstEle->String.trim->String.toLowerCase) < 0
         ) {
@@ -171,7 +171,7 @@ let make = (
 
   let {updateExistingKeys, filterValue, removeKeys} = React.useContext(FilterContext.filterContext)
 
-  let currentCustomFilterValue = filterValue->Dict.get(customFilterKey)->Option.getWithDefault("")
+  let currentCustomFilterValue = filterValue->Dict.get(customFilterKey)->Option.getOr("")
 
   let setCustomFilter = customFilter => {
     updateExistingKeys(Dict.fromArray([(customFilterKey, customFilter)]))
diff --git a/src/components/DynamicSingleStat.res b/src/components/DynamicSingleStat.res
index 22a562b9a..e7686e14f 100644
--- a/src/components/DynamicSingleStat.res
+++ b/src/components/DynamicSingleStat.res
@@ -100,7 +100,7 @@ let deltaTimeRangeMapper: array<Js.Json.t> => deltaRange = (arrJson: array<Js.Js
   {
     currentSr: emptyDict
     ->Dict.get("currentSr")
-    ->Option.getWithDefault({
+    ->Option.getOr({
       fromTime: "",
       toTime: "",
     }),
@@ -139,7 +139,7 @@ let make = (
     ->Belt.Array.keepMap(item => {
       let (key, value) = item
       let keyArr = key->String.split(".")
-      let prefix = keyArr->Belt.Array.get(0)->Option.getWithDefault("")
+      let prefix = keyArr->Array.get(0)->Option.getOr("")
       if prefix === moduleName && prefix !== "" {
         None
       } else {
@@ -159,14 +159,14 @@ let make = (
   | _ => "BATCH"
   }
 
-  let enableLoaders = entity.enableLoaders->Option.getWithDefault(true)
+  let enableLoaders = entity.enableLoaders->Option.getOr(true)
 
   let customFilterKey = switch entity {
   | {customFilterKey} => customFilterKey
   | _ => ""
   }
   let allFilterKeys = Array.concat(
-    [startTimeFilterKey, endTimeFilterKey, mode->Option.getWithDefault("")],
+    [startTimeFilterKey, endTimeFilterKey, mode->Option.getOr("")],
     filterKeys,
   )
 
@@ -222,7 +222,7 @@ let make = (
 
   let homePageCss = isHomePage || chartAlignment === #row ? "flex-col" : "flex-row"
   let wrapperClass =
-    wrapperClass->Option.getWithDefault(
+    wrapperClass->Option.getOr(
       `flex mt-5 flex-col md:${homePageCss} flex-wrap justify-start items-stretch relative`,
     )
 
@@ -263,7 +263,7 @@ let make = (
       entity.urlConfig
       ->Array.map(urlConfig => {
         let {uri, metrics} = urlConfig
-        let domain = String.split("/", uri)->Belt.Array.get(4)->Option.getWithDefault("")
+        let domain = String.split("/", uri)->Array.get(4)->Option.getOr("")
         let startTime = if domain === "mandate" {
           (endTimeFromUrl->DayJs.getDayJsForString).subtract(.
             1,
@@ -284,8 +284,7 @@ let make = (
           source,
           prefix: ?urlConfig.prefix,
         }
-        let singleStatBodyMakerFn =
-          urlConfig.singleStatBody->Option.getWithDefault(singleStatBodyMake)
+        let singleStatBodyMakerFn = urlConfig.singleStatBody->Option.getOr(singleStatBodyMake)
 
         let singleStatBody = singleStatBodyMakerFn(singleStatBodyEntity)
         fetchApi(
@@ -296,7 +295,7 @@ let make = (
           (),
         )
         ->addLogsAroundFetch(~logTitle="SingleStat Data Api")
-        ->then(json => resolve((`${urlConfig.prefix->Option.getWithDefault("")}${uri}`, json)))
+        ->then(json => resolve((`${urlConfig.prefix->Option.getOr("")}${uri}`, json)))
         ->catch(_err => resolve(("", Js.Json.object_(Dict.make()))))
       })
       ->Promise.all
@@ -311,8 +310,8 @@ let make = (
                   ->LogicUtils.getDictFromJsonObject
                   ->LogicUtils.getJsonObjectFromDict("queryData")
                   ->LogicUtils.getArrayFromJson([])
-                  ->Belt.Array.get(0)
-                  ->Option.getWithDefault(Js.Json.object_(Dict.make()))
+                  ->Array.get(0)
+                  ->Option.getOr(Js.Json.object_(Dict.make()))
                   ->LogicUtils.getDictFromJsonObject
                   ->Dict.toArray
                   ->Array.find(
@@ -325,7 +324,7 @@ let make = (
                 | Some(data) => {
                     let (_key, value) = data
                     setTotalVolume(
-                      _ => value->Js.Json.decodeNumber->Option.getWithDefault(0.)->Belt.Float.toInt,
+                      _ => value->Js.Json.decodeNumber->Option.getOr(0.)->Belt.Float.toInt,
                     )
                   }
 
@@ -363,7 +362,7 @@ let make = (
       entity.urlConfig
       ->Array.map(urlConfig => {
         let {uri, metrics} = urlConfig
-        let domain = String.split("/", uri)->Belt.Array.get(4)->Option.getWithDefault("")
+        let domain = String.split("/", uri)->Array.get(4)->Option.getOr("")
         let startTime = if domain === "mandate" {
           (endTimeFromUrl->DayJs.getDayJsForString).subtract(.
             1,
@@ -380,14 +379,14 @@ let make = (
           delta: false,
           startDateTime: startTime,
           endDateTime: endTimeFromUrl,
-          granularity: ?granularity->Belt.Array.get(0),
+          granularity: ?granularity->Array.get(0),
           ?mode,
           customFilter,
           source,
           prefix: ?urlConfig.prefix,
         }
         let singleStatBodyMakerFn =
-          urlConfig.singleStatTimeSeriesBody->Option.getWithDefault(singleStatBodyMake)
+          urlConfig.singleStatTimeSeriesBody->Option.getOr(singleStatBodyMake)
         fetchApi(
           uri,
           ~method_=Post,
@@ -398,7 +397,7 @@ let make = (
         ->addLogsAroundFetch(~logTitle="SingleStatTimeseries Data Api")
         ->then(
           json => {
-            resolve((`${urlConfig.prefix->Option.getWithDefault("")}${uri}`, json))
+            resolve((`${urlConfig.prefix->Option.getOr("")}${uri}`, json))
           },
         )
         ->catch(
@@ -433,7 +432,7 @@ let make = (
       let uri = col->entity.matrixUriMapper
       let timeSeriesData =
         singlestatDataCombined.singleStatTimeData
-        ->Option.getWithDefault([("--", [])])
+        ->Option.getOr([("--", [])])
         ->Belt.Array.keepMap(
           item => {
             let (timeSectionName, timeSeriesObj) = item
@@ -450,7 +449,7 @@ let make = (
                 item.sectionUrl === uri
               },
             )
-            ->Belt.Array.get(0)
+            ->Array.get(0)
 
           switch sectiondata {
           | Some(data) => {
@@ -459,7 +458,7 @@ let make = (
                 timeSeriesData,
                 data.deltaTime,
                 col,
-                mode->Option.getWithDefault("ORDER"),
+                mode->Option.getOr("ORDER"),
               )
 
               <HSwitchSingleStatWidget
diff --git a/src/components/DynamicTable.res b/src/components/DynamicTable.res
index 7f370158f..ac9a4458a 100644
--- a/src/components/DynamicTable.res
+++ b/src/components/DynamicTable.res
@@ -116,7 +116,7 @@ let make = (
     filterForRow,
   } = entity
   let tableName =
-    prefixAddition->Option.getWithDefault(false)
+    prefixAddition->Option.getOr(false)
       ? title->String.replaceRegExp(_, %re("/ /g"), "-")->String.toLowerCase->Some
       : None
   let (defaultFilters, setDefaultFilters) = React.useState(() => entity.defaultFilters)
@@ -197,7 +197,7 @@ let make = (
       }
 
       setData(prevData => {
-        let newData = prevData->Option.getWithDefault([])->Array.concat(sampleRes)
+        let newData = prevData->Option.getOr([])->Array.concat(sampleRes)
         Some(newData)
       })
     }
@@ -212,7 +212,7 @@ let make = (
           let x =
             filtersFromUrl
             ->Dict.get(val)
-            ->Option.getWithDefault(searchValueDict->Dict.get(val)->Option.getWithDefault(""))
+            ->Option.getOr(searchValueDict->Dict.get(val)->Option.getOr(""))
           if requireDateFormatting && (val == "startTime" || val == "endTime") {
             (x->DayJs.getDayJsForString).format(. "YYYY-MM-DD+HH:mm:ss")
           } else if requireDateFormatting && (val == "start_date" || val == "end_date") {
@@ -295,15 +295,15 @@ let make = (
     setRefetchCounter(p => p + 1)
   }, [setRefetchCounter])
 
-  let visibleColumns = visibleColumnsProp->Option.getWithDefault(defaultColumns)
+  let visibleColumns = visibleColumnsProp->Option.getOr(defaultColumns)
   let handleRefetch = () => {
-    let rowFetched = data->Option.getWithDefault([])->Array.length
+    let rowFetched = data->Option.getOr([])->Array.length
     if rowFetched !== summary.totalCount {
       setTableDataLoading(_ => true)
       let newDefaultFilter =
         defaultFilters
         ->Js.Json.decodeObject
-        ->Option.getWithDefault(Dict.make())
+        ->Option.getOr(Dict.make())
         ->Dict.toArray
         ->Dict.fromArray
 
@@ -314,14 +314,14 @@ let make = (
 
   let showLocalFilter =
     (localFilters->Array.length > 0 || localOptions->Array.length > 0) &&
-      (applyFilters ? finalData : data)->Option.getWithDefault([])->Array.length > 0
+      (applyFilters ? finalData : data)->Option.getOr([])->Array.length > 0
   let showRemoteFilter = remoteFilters->Array.length > 0 || remoteOptions->Array.length > 0
 
   let filters = {
     if (
       (Array.length(initialFilters) > 0 || Array.length(options) > 0) &&
       (showLocalFilter || showRemoteFilter) &&
-      (!hideFiltersOnNoData || data->Option.getWithDefault([])->Array.length > 0)
+      (!hideFiltersOnNoData || data->Option.getOr([])->Array.length > 0)
     ) {
       let children =
         <div className={`flex-1 ${customFilterStyle}`}>
@@ -416,7 +416,7 @@ let make = (
         for i in 0 to cols->Array.length - 1 {
           checkLength :=
             checkLength.contents &&
-            switch obj[cols[i]->Option.getWithDefault(0)] {
+            switch obj[cols[i]->Option.getOr(0)] {
             | Some(ele) => Array.length(ele.selected) > 0
             | None => false
             }
diff --git a/src/components/DynamicTableUtils.res b/src/components/DynamicTableUtils.res
index 2bfaf6e7b..f7b58882e 100644
--- a/src/components/DynamicTableUtils.res
+++ b/src/components/DynamicTableUtils.res
@@ -12,10 +12,8 @@ let visibilityColFunc = (
   | Date(x) => (dateFormatConvertor(x), dateFormatConvertor(x))
   | StartEndDate(start, end) => (
       `${dateFormatConvertor(start)
-        ->Option.getWithDefault(""->Js.Json.string)
-        ->String.make} ${dateFormatConvertor(end)
-        ->Option.getWithDefault(""->Js.Json.string)
-        ->String.make}`
+        ->Option.getOr(""->Js.Json.string)
+        ->String.make} ${dateFormatConvertor(end)->Option.getOr(""->Js.Json.string)->String.make}`
       ->Js.Json.string
       ->Some,
       dateFormatConvertor(end),
@@ -40,7 +38,7 @@ let useDateFormatConvertor = () => {
 
 let filteredData = (
   actualData: Js.Array2.t<Js.Nullable.t<'t>>,
-  columnFilter: Js.Dict.t<Js.Array2.t<Js.Json.t>>,
+  columnFilter: Dict.t<Js.Array2.t<Js.Json.t>>,
   visibleColumns: option<Js.Array2.t<'colType>>,
   entity: EntityType.entityType<'colType, 't>,
   dateFormatConvertor: string => option<Js.Json.t>,
@@ -63,7 +61,7 @@ let filteredData = (
               )
               let visibleColumns =
                 visibleColumns
-                ->Option.getWithDefault(entity.defaultColumns)
+                ->Option.getOr(entity.defaultColumns)
                 ->Belt.Array.keepMap(
                   item => {
                     let columnEntity = entity.getHeading(item)
@@ -106,7 +104,7 @@ let filteredData = (
                       | (None, _) => ""
                       }
 
-                      let searchedText = selectedArr1->Belt.Array.get(0)->Option.getWithDefault("")
+                      let searchedText = selectedArr1->Array.get(0)->Option.getOr("")
                       !String.includes(
                         searchedText->String.toUpperCase,
                         currVal->String.toUpperCase,
@@ -121,8 +119,8 @@ let filteredData = (
                       | _ => 0.
                       }
                       !(
-                        currVal >= selectedArr[0]->Option.getWithDefault(0.) &&
-                          currVal <= selectedArr[1]->Option.getWithDefault(0.)
+                        currVal >= selectedArr[0]->Option.getOr(0.) &&
+                          currVal <= selectedArr[1]->Option.getOr(0.)
                       )
                     }
                   }
@@ -149,7 +147,7 @@ let convertStrCellToFloat = (dataType: Table.cellType, str: string) => {
   switch dataType {
   | DropDown | LabelType | TextType => str->Js.Json.string
   | MoneyType | NumericType | ProgressType =>
-    str->Belt.Float.fromString->Option.getWithDefault(0.)->Js.Json.number
+    str->Belt.Float.fromString->Option.getOr(0.)->Js.Json.number
   }
 }
 
diff --git a/src/components/DynamicTabs.res b/src/components/DynamicTabs.res
index efe298614..d55a9726b 100644
--- a/src/components/DynamicTabs.res
+++ b/src/components/DynamicTabs.res
@@ -6,7 +6,7 @@ type tab = {
 }
 
 let getValueFromArrayTab = (tabsVal: array<tab>, index: int) => {
-  switch tabsVal->Belt.Array.get(index) {
+  switch tabsVal->Array.get(index) {
   | Some(val) => val.value
   | None => ""
   }
@@ -66,7 +66,7 @@ module TabInfo = {
     let handleClick = React.useCallback2(_ev => {
       handleSelectedTab(
         ~tabValue={
-          switch tabNames->Belt.Array.get(index) {
+          switch tabNames->Array.get(index) {
           | Some(tab) => tab.value
           | None => getValueFromArrayTab(tabNames, 0)
           }
@@ -96,10 +96,7 @@ module TabInfo = {
             updatedStackAfterRemovingTab->Array.filterWithIndex((item, index) =>
               index === 0
                 ? true
-                : item !==
-                    updatedStackAfterRemovingTab
-                    ->Belt.Array.get(index - 1)
-                    ->Option.getWithDefault("")
+                : item !== updatedStackAfterRemovingTab->Array.get(index - 1)->Option.getOr("")
             )
           })
 
@@ -214,10 +211,7 @@ module IndicationArrow = {
 }
 
 let getBoundingRectInfo = (ref: React.ref<Js.Nullable.t<Dom.element>>, getter) => {
-  ref.current
-  ->Js.Nullable.toOption
-  ->Belt.Option.map(getBoundingClientRect)
-  ->Belt.Option.mapWithDefault(0, getter)
+  ref.current->Js.Nullable.toOption->Belt.Option.map(getBoundingClientRect)->Option.mapOr(0, getter)
 }
 
 @react.component
@@ -240,7 +234,7 @@ let make = (
   // this tabs will always loaded independent of user preference
   let isMobileView = MatchMedia.useMobileChecker()
   let defaultTabs =
-    defaultTabs->Option.getWithDefault(tabs->Array.copy->Array.filter(item => !item.isRemovable))
+    defaultTabs->Option.getOr(tabs->Array.copy->Array.filter(item => !item.isRemovable))
 
   let tabOuterClass = `gap-1.5`
   let bottomBorderClass = ""
@@ -261,8 +255,8 @@ let make = (
       ->Array.filter(item => {
         item.value == key
       })
-      ->Belt.Array.get(0)
-      ->Option.getWithDefault({title: "", value: "", isRemovable: false})
+      ->Array.get(0)
+      ->Option.getOr({title: "", value: "", isRemovable: false})
     ).title
   }
 
@@ -304,7 +298,7 @@ let make = (
                 },
               ) {
               | Some(tabValue) =>
-                enableDescriptionHeader ? tabValue.description->Option.getWithDefault("") : ""
+                enableDescriptionHeader ? tabValue.description->Option.getOr("") : ""
               | None => ""
               },
               isRemovable: switch tabs->Array.find(
@@ -434,10 +428,7 @@ let make = (
   ) => unit = (~tabValue: string, ~collapsibleTabs: array<tab>, ~removed: bool) => {
     if removed === false {
       if (
-        tabValue !==
-          tabStacksnames
-          ->Belt.Array.get(tabStacksnames->Array.length - 1)
-          ->Option.getWithDefault("")
+        tabValue !== tabStacksnames->Array.get(tabStacksnames->Array.length - 1)->Option.getOr("")
       ) {
         setTabStacksnames(prev => {
           Array.concat(prev, [tabValue])
@@ -453,15 +444,11 @@ let make = (
         Dict.fromArray([
           (
             "tabName",
-            `[${tabStacksnames
-              ->Belt.Array.get(tabStacksnames->Array.length - 1)
-              ->Option.getWithDefault("")}]`,
+            `[${tabStacksnames->Array.get(tabStacksnames->Array.length - 1)->Option.getOr("")}]`,
           ),
         ]),
       )
-      setActiveTab(
-        tabStacksnames->Belt.Array.get(tabStacksnames->Array.length - 1)->Option.getWithDefault(""),
-      )
+      setActiveTab(tabStacksnames->Array.get(tabStacksnames->Array.length - 1)->Option.getOr(""))
 
       setSelectedIndex(_ =>
         Js.Math.max_int(
@@ -469,9 +456,7 @@ let make = (
           collapsibleTabs
           ->Array.map(item => item.value)
           ->Array.indexOf(
-            tabStacksnames
-            ->Belt.Array.get(tabStacksnames->Array.length - 1)
-            ->Option.getWithDefault(""),
+            tabStacksnames->Array.get(tabStacksnames->Array.length - 1)->Option.getOr(""),
           ),
         )
       )
diff --git a/src/components/FilterUtils.res b/src/components/FilterUtils.res
index 99e53811b..dd11f766c 100644
--- a/src/components/FilterUtils.res
+++ b/src/components/FilterUtils.res
@@ -4,8 +4,8 @@ let parseFilterString = queryString => {
   ->String.split("&")
   ->Belt.Array.keepMap(str => {
     let arr = str->String.split("=")
-    let key = arr->Belt.Array.get(0)->Option.getWithDefault("-")
-    let val = arr->Belt.Array.sliceToEnd(1)->Array.joinWith("=")
+    let key = arr->Array.get(0)->Option.getOr("-")
+    let val = arr->Array.sliceToEnd(~start=1)->Array.joinWith("=")
     key === "" || val === "" ? None : Some((key, val))
   })
   ->Dict.fromArray
diff --git a/src/components/HeadlessUISelectBox.res b/src/components/HeadlessUISelectBox.res
index 537b08a1b..d11c7160b 100644
--- a/src/components/HeadlessUISelectBox.res
+++ b/src/components/HeadlessUISelectBox.res
@@ -80,7 +80,7 @@ let make = (
                               {switch option.leftIcon {
                               | FontAwesome(iconName) =>
                                 <Icon
-                                  className={`align-middle ${option.customIconStyle->Option.getWithDefault(
+                                  className={`align-middle ${option.customIconStyle->Option.getOr(
                                       "",
                                     )}`}
                                   size=14
@@ -93,7 +93,7 @@ let make = (
                               | _ => React.null
                               }}
                               <AddDataAttributes attributes=[("data-options", option.label)]>
-                                <div className={option.customTextStyle->Option.getWithDefault("")}>
+                                <div className={option.customTextStyle->Option.getOr("")}>
                                   <span className={selected ? "text-blue-800 font-semibold" : ""}>
                                     {React.string(option.label)}
                                   </span>
@@ -102,7 +102,7 @@ let make = (
                               {switch option.rightIcon {
                               | FontAwesome(iconName) =>
                                 <Icon
-                                  className={`align-middle ${option.customIconStyle->Option.getWithDefault(
+                                  className={`align-middle ${option.customIconStyle->Option.getOr(
                                       "",
                                     )}`}
                                   size=12
@@ -160,7 +160,7 @@ let make = (
                             {switch option.leftIcon {
                             | FontAwesome(iconName) =>
                               <Icon
-                                className={`align-middle ${option.customIconStyle->Option.getWithDefault(
+                                className={`align-middle ${option.customIconStyle->Option.getOr(
                                     "",
                                   )}`}
                                 size=12
@@ -173,7 +173,7 @@ let make = (
                             | _ => React.null
                             }}
                             <AddDataAttributes attributes=[("data-options", option.label)]>
-                              <div className={option.customTextStyle->Option.getWithDefault("")}>
+                              <div className={option.customTextStyle->Option.getOr("")}>
                                 <span className={selected ? "text-blue-800 font-semibold" : ""}>
                                   {React.string(option.label)}
                                 </span>
@@ -182,7 +182,7 @@ let make = (
                             {switch option.rightIcon {
                             | FontAwesome(iconName) =>
                               <Icon
-                                className={`align-middle ${option.customIconStyle->Option.getWithDefault(
+                                className={`align-middle ${option.customIconStyle->Option.getOr(
                                     "",
                                   )}`}
                                 size=12
diff --git a/src/components/Icon.res b/src/components/Icon.res
index 4598905b1..2ac0cd72c 100644
--- a/src/components/Icon.res
+++ b/src/components/Icon.res
@@ -35,12 +35,10 @@ let make = (
         fill=customIconColor
         className={`fill-current ${otherClasses}`}
         width={{
-          customWidth->Option.isSome ? customWidth->Option.getWithDefault("") : string_of_int(size)
+          customWidth->Option.isSome ? customWidth->Option.getOr("") : string_of_int(size)
         } ++ "px"}
         height={{
-          customHeight->Option.isSome
-            ? customHeight->Option.getWithDefault("")
-            : string_of_int(size)
+          customHeight->Option.isSome ? customHeight->Option.getOr("") : string_of_int(size)
         } ++ "px"}>
         useUrl
       </svg>
diff --git a/src/components/InfraCalendar.res b/src/components/InfraCalendar.res
index b15e5ada7..498fb2486 100644
--- a/src/components/InfraCalendar.res
+++ b/src/components/InfraCalendar.res
@@ -16,7 +16,7 @@ module TableRow = {
     switch obj {
     | Some(a) => {
         let day = String.split(a, "-")
-        React.string(day[2]->Option.getWithDefault(""))
+        React.string(day[2]->Option.getOr(""))
       }
 
     | None => React.string("")
@@ -41,7 +41,7 @@ module TableRow = {
     let highlight = cellHighlighter
 
     {
-      if item == Belt.Array.make(7, "") {
+      if item == Array.make(~length=7, "") {
         React.null
       } else {
         <tr className="transition duration-300 ease-in-out">
@@ -106,11 +106,11 @@ module TableRow = {
               if startDate != "" && obj != "" {
                 let getDate = date => {
                   let datevalue = Js.Date.makeWithYMD(
-                    ~year=Js.Float.fromString(date[0]->Option.getWithDefault("")),
+                    ~year=Js.Float.fromString(date[0]->Option.getOr("")),
                     ~month=Js.Float.fromString(
-                      String.make(Js.Float.fromString(date[1]->Option.getWithDefault("")) -. 1.0),
+                      String.make(Js.Float.fromString(date[1]->Option.getOr("")) -. 1.0),
                     ),
-                    ~date=Js.Float.fromString(date[2]->Option.getWithDefault("")),
+                    ~date=Js.Float.fromString(date[2]->Option.getOr("")),
                     (),
                   )
                   datevalue
@@ -230,7 +230,7 @@ let make = (
   }
 
   // creating row info
-  let dummyRow = Belt.Array.make(6, Belt.Array.make(7, ""))
+  let dummyRow = Array.make(~length=6, Array.make(~length=7, ""))
 
   let rowMapper = (row, indexRow) => {
     Array.mapWithIndex(row, (_item, index) => {
diff --git a/src/components/InfraCalendarList.res b/src/components/InfraCalendarList.res
index 58994d221..e8cbdca83 100644
--- a/src/components/InfraCalendarList.res
+++ b/src/components/InfraCalendarList.res
@@ -44,7 +44,7 @@ let getMonthInStr = (mon: InfraCalendar.month) => {
 
 let getMonthFromFloat = value => {
   let valueInt = value->Belt.Float.toInt
-  months[valueInt]->Option.getWithDefault(Jan)
+  months[valueInt]->Option.getOr(Jan)
 }
 module YearItem = {
   @send external scrollIntoView: Dom.element => unit = "scrollIntoView"
diff --git a/src/components/LoadedTable.res b/src/components/LoadedTable.res
index 516b1e9a5..8b124c5f2 100644
--- a/src/components/LoadedTable.res
+++ b/src/components/LoadedTable.res
@@ -19,7 +19,7 @@ let checkBoxPropDefaultVal: checkBoxProps = {
   setSelectedData: _ => (),
 }
 
-let sortAtom: Recoil.recoilAtom<Js.Dict.t<sortOb>> = Recoil.atom(. "sortAtom", Dict.make())
+let sortAtom: Recoil.recoilAtom<Dict.t<sortOb>> = Recoil.atom(. "sortAtom", Dict.make())
 
 let backgroundClass = "bg-gray-50 dark:bg-jp-gray-darkgray_background"
 
@@ -85,8 +85,8 @@ let sortArray = (originalData, key, sortOrder: Table.sortOrder) => {
   }
   let sortedArrayByOrder = {
     let _ = originalData->Js.Array2.sortInPlaceWith((i1, i2) => {
-      let item1 = i1->Js.Json.stringifyAny->Option.getWithDefault("")->LogicUtils.safeParse
-      let item2 = i2->Js.Json.stringifyAny->Option.getWithDefault("")->LogicUtils.safeParse
+      let item1 = i1->Js.Json.stringifyAny->Option.getOr("")->LogicUtils.safeParse
+      let item2 = i2->Js.Json.stringifyAny->Option.getOr("")->LogicUtils.safeParse
       // flatten items and get data
 
       let val1 =
@@ -130,7 +130,7 @@ type pageDetails = {
   resultsPerPage: int,
 }
 
-let table_pageDetails: Recoil.recoilAtom<Js.Dict.t<pageDetails>> = Recoil.atom(.
+let table_pageDetails: Recoil.recoilAtom<Dict.t<pageDetails>> = Recoil.atom(.
   "table_pageDetails",
   Dict.make(),
 )
@@ -251,7 +251,7 @@ let make = (
   let (firstRender, setFirstRender) = React.useState(_ => true)
   let setPageDetails = Recoil.useSetRecoilState(table_pageDetails)
   let pageDetailDict = Recoil.useRecoilValueFromAtom(table_pageDetails)
-  let pageDetail = pageDetailDict->Dict.get(title)->Option.getWithDefault(defaultValue)
+  let pageDetail = pageDetailDict->Dict.get(title)->Option.getOr(defaultValue)
 
   let (
     selectAllCheckBox: option<TableUtils.multipleSelectRows>,
@@ -372,10 +372,9 @@ let make = (
     (isFilterOpen, setIsFilterOpen)
   }, (isFilterOpen, setIsFilterOpen))
 
-  let heading =
-    visibleColumns->Option.getWithDefault(entity.defaultColumns)->Array.map(entity.getHeading)
+  let heading = visibleColumns->Option.getOr(entity.defaultColumns)->Array.map(entity.getHeading)
 
-  let handleRemoveLines = removeVerticalLines->Option.getWithDefault(true)
+  let handleRemoveLines = removeVerticalLines->Option.getOr(true)
   if showSerialNumber {
     heading
     ->Array.unshift(
@@ -439,7 +438,7 @@ let make = (
     if tableLocalFilter {
       let columnFilterRow =
         visibleColumns
-        ->Option.getWithDefault(entity.defaultColumns)
+        ->Option.getOr(entity.defaultColumns)
         ->Array.map(item => {
           let headingEntity = entity.getHeading(item)
           let key = headingEntity.key
@@ -454,7 +453,7 @@ let make = (
 
           actualData
           ->filteredData(columnFilterCopy, visibleColumns, entity, dateFormatConvertor)
-          ->Belt.Array.forEach(
+          ->Array.forEach(
             rows => {
               switch rows->Js.Nullable.toOption {
               | Some(rows) =>
@@ -486,9 +485,7 @@ let make = (
           | LabelType | TextType => Table.TextFilter(key)
           | MoneyType | NumericType | ProgressType => {
               let newArr =
-                filterValueArray->Array.map(
-                  item => item->Js.Json.decodeNumber->Option.getWithDefault(0.),
-                )
+                filterValueArray->Array.map(item => item->Js.Json.decodeNumber->Option.getOr(0.))
 
               if newArr->Array.length >= 1 {
                 Table.Range(key, Js.Math.minMany_float(newArr), Js.Math.maxMany_float(newArr))
@@ -559,19 +556,19 @@ let make = (
     None
   }, [selectAllCheckBox])
 
-  let sNoArr = Dict.get(columnFilter, "s_no")->Option.getWithDefault([])
+  let sNoArr = Dict.get(columnFilter, "s_no")->Option.getOr([])
   // filtering for SNO
   let nullableRows = filteredData->Array.mapWithIndex((nullableItem, index) => {
     let actualRows = switch nullableItem->Js.Nullable.toOption {
     | Some(item) => {
         let visibleCell =
           visibleColumns
-          ->Option.getWithDefault(entity.defaultColumns)
+          ->Option.getOr(entity.defaultColumns)
           ->Array.map(colType => {
             entity.getCell(item, colType)
           })
-        let startPoint = sNoArr->Belt.Array.get(0)->Option.getWithDefault(1.->Js.Json.number)
-        let endPoint = sNoArr->Belt.Array.get(1)->Option.getWithDefault(1.->Js.Json.number)
+        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)->Belt.Int.toFloat->Js.Json.number
         sNoArr->Array.length > 0
           ? {
@@ -637,8 +634,7 @@ let make = (
 
   let dataExists = rows->Array.length > 0
   let heading = heading->Array.mapWithIndex((head, index) => {
-    let getValue = row =>
-      row->Belt.Array.get(index)->Belt.Option.mapWithDefault("", Table.getTableCellValue)
+    let getValue = row => row->Array.get(index)->Option.mapOr("", Table.getTableCellValue)
 
     let default = switch rows[0] {
     | Some(ele) => getValue(ele)
@@ -925,7 +921,7 @@ let make = (
   } else {
     `${ignoreHeaderBg ? "" : backgroundClass} empty:hidden`
   }
-  let dataId = title->Js.String2.split("-")->Belt.Array.get(0)->Option.getWithDefault("")
+  let dataId = title->String.split("-")->Array.get(0)->Option.getOr("")
   <AddDataAttributes attributes=[("data-loaded-table", dataId)]>
     <div className="w-full">
       <div className=addDataAttributesClass style={ReactDOMStyle.make(~zIndex="2", ())}>
diff --git a/src/components/LoadedTable.resi b/src/components/LoadedTable.resi
index a2453f93e..0f33322a5 100644
--- a/src/components/LoadedTable.resi
+++ b/src/components/LoadedTable.resi
@@ -1,3 +1,4 @@
+external toJson: Js.Nullable.t<'a> => Js.Json.t = "%identity"
 type sortTyp = ASC | DSC
 type sortOb = {sortKey: string, sortType: sortTyp}
 type checkBoxProps = {
@@ -6,7 +7,7 @@ type checkBoxProps = {
   setSelectedData: (Js.Array2.t<Js.Json.t> => Js.Array2.t<Js.Json.t>) => unit,
 }
 let checkBoxPropDefaultVal: checkBoxProps
-let sortAtom: Recoil.recoilAtom<Js.Dict.t<sortOb>>
+let sortAtom: Recoil.recoilAtom<RescriptCore.Dict.t<sortOb>>
 let backgroundClass: string
 let useSortedObj: (
   string,
@@ -15,16 +16,16 @@ let useSortedObj: (
   option<Table.sortedObject>,
   (option<Table.sortedObject> => option<Table.sortedObject>) => unit,
 )
-// let sortArray: (Js.Array2.t<'a>, RescriptCoreFuture.Dict.key, Table.sortOrder) => Js.Array2.t<'a>
+let sortArray: (Js.Array2.t<'a>, string, Table.sortOrder) => Js.Array2.t<'a>
 type pageDetails = {offset: int, resultsPerPage: int}
-let table_pageDetails: Recoil.recoilAtom<Js.Dict.t<pageDetails>>
+let table_pageDetails: Recoil.recoilAtom<RescriptCore.Dict.t<pageDetails>>
 @react.component
 let make: (
-  ~visibleColumns: Js.Array2.t<'colType>=?,
+  ~visibleColumns: Js.Array2.t<'a>=?,
   ~defaultSort: Table.sortedObject=?,
-  ~title: Js.Dict.key,
+  ~title: Js.String2.t,
   ~titleSize: NewThemeUtils.headingSize=?,
-  ~description: Js.String2.t=?,
+  ~description: string=?,
   ~tableActions: React.element=?,
   ~isTableActionBesideFilters: bool=?,
   ~hideFilterTopPortals: bool=?,
@@ -32,16 +33,16 @@ let make: (
   ~clearFormattedDataButton: React.element=?,
   ~bottomActions: React.element=?,
   ~showSerialNumber: bool=?,
-  ~actualData: Js.Array2.t<Js.Nullable.t<'t>>,
+  ~actualData: Js.Array2.t<Js.Nullable.t<'b>>,
   ~totalResults: int,
   ~resultsPerPage: int,
   ~offset: int,
-  ~setOffset: ('b => int) => unit,
+  ~setOffset: ('c => int) => unit,
   ~handleRefetch: unit => unit=?,
-  ~entity: EntityType.entityType<'colType, 't>,
-  ~onEntityClick: 't => unit=?,
-  ~onEntityDoubleClick: 't => unit=?,
-  ~onExpandClickData: 'onExpandClickData=?,
+  ~entity: EntityType.entityType<'a, 'b>,
+  ~onEntityClick: 'b => unit=?,
+  ~onEntityDoubleClick: 'b => unit=?,
+  ~onExpandClickData: 'd=?,
   ~currrentFetchCount: int,
   ~filters: React.element=?,
   ~showFilterBorder: bool=?,
@@ -57,19 +58,19 @@ let make: (
   ~tableDataLoading: bool=?,
   ~dataLoading: bool=?,
   ~advancedSearchComponent: React.element=?,
-  ~setData: ('c => option<Js.Array2.t<Js.Nullable.t<'t>>>) => unit=?,
-  ~setSummary: ('d => EntityType.summary) => unit=?,
-  ~customGetObjects: Js.Json.t => array<'a>=?,
+  ~setData: ('e => option<array<Js.Nullable.t<'b>>>) => unit=?,
+  ~setSummary: ('f => EntityType.summary) => unit=?,
+  ~customGetObjects: Js.Json.t => array<'g>=?,
   ~dataNotFoundComponent: React.element=?,
-  ~renderCard: (~index: int, ~item: 't, ~onRowClick: React.callback<int, unit>) => React.element=?,
+  ~renderCard: (~index: int, ~item: 'b, ~onRowClick: React.callback<int, unit>) => React.element=?,
   ~tableLocalFilter: bool=?,
   ~tableheadingClass: string=?,
   ~tableBorderClass: string=?,
   ~tableDataBorderClass: string=?,
   ~collapseTableRow: bool=?,
-  ~getRowDetails: Js.Nullable.t<'t> => React.element=?,
-  ~onMouseEnter: 't => unit=?,
-  ~onMouseLeave: 't => unit=?,
+  ~getRowDetails: Js.Nullable.t<'b> => React.element=?,
+  ~onMouseEnter: 'b => unit=?,
+  ~onMouseLeave: 'b => unit=?,
   ~frozenUpto: int=?,
   ~heightHeadingClass: string=?,
   ~highlightText: Js.String.t=?,
@@ -104,7 +105,7 @@ let make: (
   ~headerCustomBgColor: string=?,
   ~alignCellContent: string=?,
   ~minTableHeightClass: string=?,
-  ~setExtFilteredDataLength: ('f => int) => unit=?,
+  ~setExtFilteredDataLength: ('h => int) => unit=?,
   ~filterDropdownMaxHeight: string=?,
   ~showResultsPerPageSelector: bool=?,
   ~customCellColor: string=?,
diff --git a/src/components/LocalFilters.res b/src/components/LocalFilters.res
index 1c55318bd..dd93b9580 100644
--- a/src/components/LocalFilters.res
+++ b/src/components/LocalFilters.res
@@ -122,7 +122,7 @@ let make = (
 
     initialValues
     ->Js.Json.decodeObject
-    ->Option.getWithDefault(Dict.make())
+    ->Option.getOr(Dict.make())
     ->Dict.toArray
     ->Array.forEach(entry => {
       let (key, _value) = entry
@@ -170,7 +170,7 @@ let make = (
       let defaultEntityOptionType: EntityType.optionType<
         't,
       > = EntityType.getDefaultEntityOptionType()
-      let optionObj = optionObjArry[0]->Option.getWithDefault(defaultEntityOptionType)
+      let optionObj = optionObjArry[0]->Option.getOr(defaultEntityOptionType)
       localSelectedFiltersList->Array.push(optionObj.field)->ignore
       localCheckedFilters->Array.push(value)->ignore
     })
@@ -182,9 +182,9 @@ let make = (
     let toBeRemoved = checkedFilters->Array.filter(oldVal => !Array.includes(fieldNameArr, oldVal))
     let finalFieldList = selectedFiltersList->Array.filter(val => {
       val.inputNames
-      ->Belt.Array.get(0)
+      ->Array.get(0)
       ->Belt.Option.map(name => !{toBeRemoved->Array.includes(name)})
-      ->Option.getWithDefault(false)
+      ->Option.getOr(false)
     })
     let filtersAfterRemoving =
       checkedFilters->Array.filter(val => !Array.includes(toBeRemoved, val))
@@ -192,7 +192,7 @@ let make = (
     let newInitialValues =
       initialValueJson
       ->Js.Json.decodeObject
-      ->Option.getWithDefault(Dict.make())
+      ->Option.getOr(Dict.make())
       ->Dict.toArray
       ->Array.filter(entry => {
         let (key, _value) = entry
diff --git a/src/components/MakeRuleFieldComponent.res b/src/components/MakeRuleFieldComponent.res
index 68da55ded..9c509c086 100644
--- a/src/components/MakeRuleFieldComponent.res
+++ b/src/components/MakeRuleFieldComponent.res
@@ -1,4 +1,3 @@
-external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
 let validateConditionJson = json => {
   open LogicUtils
   let checkValue = dict => {
@@ -54,9 +53,7 @@ module CompressedView = {
           dict->getString("logical.operator", ""),
           dict->getString("real_field", ""),
           dict->getString("operator", ""),
-          dict
-          ->getOptionStrArrayFromDict("value")
-          ->Option.getWithDefault([dict->getString("value", "")]),
+          dict->getOptionStrArrayFromDict("value")->Option.getOr([dict->getString("value", "")]),
           dict->getDictfromDict("metadata")->getOptionString("key"),
         )
       })
diff --git a/src/components/MonacoEditorLazy.res b/src/components/MonacoEditorLazy.res
index 5fe9b5bc2..48218659f 100644
--- a/src/components/MonacoEditorLazy.res
+++ b/src/components/MonacoEditorLazy.res
@@ -21,9 +21,9 @@ let make = (
   let copyValue = value->Option.isNone ? defaultValue : value
 
   <AddDataAttributes
-    attributes=[("data-editor", "Monaco Editor"), ("text", value->Option.getWithDefault(""))]>
+    attributes=[("data-editor", "Monaco Editor"), ("text", value->Option.getOr(""))]>
     <div className={`flex flex-col ${outerWidth}`}>
-      {headerComponent->Option.getWithDefault(React.null)}
+      {headerComponent->Option.getOr(React.null)}
       {showCopy ? <Clipboard.Copy data=copyValue /> : React.null}
       <MonacoEditor
         defaultLanguage
diff --git a/src/components/MultiLineTextInput.res b/src/components/MultiLineTextInput.res
index ad4f1da35..c03b0644e 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.getWithDefault("")
+    let val = input.value->Js.Json.decodeString->Option.getOr("")
     if val->String.includes("<script>") || val->String.includes("</script>") {
       showPopUp({
         popUpType: (Warning, WithIcon),
diff --git a/src/components/MultipleFileUpload.res b/src/components/MultipleFileUpload.res
index 79f365d3c..a7b14e97d 100644
--- a/src/components/MultipleFileUpload.res
+++ b/src/components/MultipleFileUpload.res
@@ -95,8 +95,8 @@ let make = (
     let files = input.value->LogicUtils.getArrayFromJson([])
 
     while !break.contents {
-      if target["files"]->Array.length > arr[0]->Option.getWithDefault(0) {
-        let index = arr->Belt.Array.get(0)->Option.getWithDefault(0)
+      if target["files"]->Array.length > arr[0]->Option.getOr(0) {
+        let index = arr->Array.get(0)->Option.getOr(0)
         switch target["files"][index] {
         | Some(value) => {
             let filename = value["name"]
@@ -104,7 +104,7 @@ let make = (
             let mimeType = value["type"]
             let fileFormat = String.concat(
               ".",
-              Array.pop(filename->String.split("."))->Option.getWithDefault(""),
+              Array.pop(filename->String.split("."))->Option.getOr(""),
             )
             let fileTypeArr = fileType->String.split(",")
             let isCorrectFileFormat =
@@ -171,7 +171,7 @@ let make = (
                 toast("Invalid file", ToastError)
               }
             }
-            arr->Belt.Array.set(0, arr[0]->Option.getWithDefault(0) + 1)->ignore
+            arr->Belt.Array.set(0, arr[0]->Option.getOr(0) + 1)->ignore
           }
         | None => ()
         }
@@ -189,17 +189,13 @@ let make = (
       ~fileName,
       ~content=decodeParsedfile
         ? try {
-            val
-            ->Belt.Array.get(indx)
-            ->Option.getWithDefault(Js.Json.null)
-            ->getStringFromJson("")
-            ->atob
+            val->Array.get(indx)->Option.getOr(Js.Json.null)->getStringFromJson("")->atob
           } catch {
           | _ =>
             toast("Error : Unable to parse file", ToastError)
             ""
           }
-        : val->Belt.Array.get(indx)->Option.getWithDefault(Js.Json.null)->getStringFromJson(""),
+        : val->Array.get(indx)->Option.getOr(Js.Json.null)->getStringFromJson(""),
     )
   }
 
@@ -259,7 +255,7 @@ let make = (
             className={pointerDisable
               ? "flex items-center gap-4 flex-1 pointer-events-none"
               : "flex items-center gap-4 flex-1"}>
-            {switch fileName->String.split(".")->Array.pop->Option.getWithDefault("") {
+            {switch fileName->String.split(".")->Array.pop->Option.getOr("") {
             | "pdf" => <img src={`/icons/paIcons/pdfIcon.svg`} />
             | "csv" => <img src={`/icons/paIcons/csvIcon.svg`} />
             | _ => React.null
diff --git a/src/components/NewCalendar.res b/src/components/NewCalendar.res
index c8d552948..66f3765bb 100644
--- a/src/components/NewCalendar.res
+++ b/src/components/NewCalendar.res
@@ -15,7 +15,7 @@ module TableRow = {
     switch obj {
     | Some(a) => {
         let day = String.split(a, "-")
-        React.string(day->Belt.Array.get(2)->Option.getWithDefault(""))
+        React.string(day->Array.get(2)->Option.getOr(""))
       }
 
     | None => React.string("")
@@ -48,7 +48,7 @@ module TableRow = {
     let highlight = cellHighlighter
 
     {
-      if item == Belt.Array.make(7, "") {
+      if item == Array.make(~length=7, "") {
         <tr className="h-0" />
       } else {
         <>
@@ -132,15 +132,11 @@ module TableRow = {
               }
               let getDate = date => {
                 let datevalue = Js.Date.makeWithYMD(
-                  ~year=Js.Float.fromString(date->Belt.Array.get(0)->Option.getWithDefault("0")),
+                  ~year=Js.Float.fromString(date->Array.get(0)->Option.getOr("0")),
                   ~month=Js.Float.fromString(
-                    String.make(
-                      Js.Float.fromString(
-                        date->Belt.Array.get(1)->Option.getWithDefault("0"),
-                      ) -. 1.0,
-                    ),
+                    String.make(Js.Float.fromString(date->Array.get(1)->Option.getOr("0")) -. 1.0),
                   ),
-                  ~date=Js.Float.fromString(date->Belt.Array.get(2)->Option.getWithDefault("")),
+                  ~date=Js.Float.fromString(date->Array.get(2)->Option.getOr("")),
                   (),
                 )
                 datevalue
@@ -419,8 +415,8 @@ let make = (
       let startMonth =
         (startDate != "" ? (startDate->DayJs.getDayJsForString).format(. "MM") : "")
         ->Belt.Int.fromString
-        ->Option.getWithDefault(currentMonth)
-      let startYearDiff = year - startYear->Belt.Int.fromString->Option.getWithDefault(2022)
+        ->Option.getOr(currentMonth)
+      let startYearDiff = year - startYear->Belt.Int.fromString->Option.getOr(2022)
 
       let startIndex = 12 * startYearDiff + (currentMonth - startMonth)
 
@@ -433,8 +429,8 @@ let make = (
       let endMonth =
         (endDate != "" ? (endDate->DayJs.getDayJsForString).format(. "MM") : "")
         ->Belt.Int.fromString
-        ->Option.getWithDefault(currentMonth)
-      let endYearDiff = year - endYear->Belt.Int.fromString->Option.getWithDefault(2022)
+        ->Option.getOr(currentMonth)
+      let endYearDiff = year - endYear->Belt.Int.fromString->Option.getOr(2022)
 
       let endIndex = 12 * endYearDiff + (currentMonth - endMonth)
 
@@ -449,7 +445,7 @@ let make = (
     let windowIndex = totalMonths - index->LogicUtils.getInt("index", 0) - 1
     let newMonth = DayJs.getDayJs().subtract(. windowIndex, "month").month(.)
     let newYear = DayJs.getDayJs().subtract(. windowIndex, "month").year(.)
-    let updatedMonth = months->Belt.Array.get(newMonth)->Option.getWithDefault(Jan)
+    let updatedMonth = months->Array.get(newMonth)->Option.getOr(Jan)
     // get first day
 
     let firstDay = Js.Date.getDay(
@@ -472,7 +468,7 @@ let make = (
     | Dec => 31
     }
     // creating row info
-    let dummyRow = Belt.Array.make(6, Belt.Array.make(7, ""))
+    let dummyRow = Array.make(~length=6, Array.make(~length=7, ""))
 
     let rowMapper = (row, indexRow) => {
       Array.mapWithIndex(row, (_item, index) => {
diff --git a/src/components/NewCalendarList.res b/src/components/NewCalendarList.res
index 8ebd06d92..e5da0343b 100644
--- a/src/components/NewCalendarList.res
+++ b/src/components/NewCalendarList.res
@@ -120,7 +120,7 @@ let make = (
   // check whether month and date has value
   let getMonthFromFloat = value => {
     let valueInt = value->Belt.Float.toInt
-    months->Belt.Array.get(valueInt)->Option.getWithDefault(Jan)
+    months->Array.get(valueInt)->Option.getOr(Jan)
   }
   let getMonthInFloat = mon => {
     Array.indexOf(months, mon)->Belt.Float.fromInt
@@ -138,7 +138,7 @@ let make = (
     Js.Date.makeWithYM(~year=startYear, ~month=startMonth, ())
   )
 
-  let dummyRow = Belt.Array.make(count, 1)
+  let dummyRow = Array.make(~length=count, 1)
   <div
     className={`flex flex-1 flex-row justify-center overflow-auto select-none ${calendarContaierStyle}`}>
     {dummyRow
diff --git a/src/components/NewCalendarTimeInput.res b/src/components/NewCalendarTimeInput.res
index 8a8b88af9..f4b8183d1 100644
--- a/src/components/NewCalendarTimeInput.res
+++ b/src/components/NewCalendarTimeInput.res
@@ -135,20 +135,18 @@ let make = (
 
   let setFromTimeDropdown = val => {
     let fromTimeArr = val->String.split(" ")
-    let fromTime = `${fromTimeArr
-      ->Belt.Array.get(0)
-      ->Option.getWithDefault("12:00")}:00 ${fromTimeArr
-      ->Belt.Array.get(1)
-      ->Option.getWithDefault("AM")}`
+    let fromTime = `${fromTimeArr->Array.get(0)->Option.getOr("12:00")}:00 ${fromTimeArr
+      ->Array.get(1)
+      ->Option.getOr("AM")}`
 
     setFromTime(_ => fromTime->String.toUpperCase)
   }
 
   let setToTimeDropdown = val => {
     let toTimeArr = val->String.split(" ")
-    let toTime = `${toTimeArr->Belt.Array.get(0)->Option.getWithDefault("11:59")}:00 ${toTimeArr
-      ->Belt.Array.get(1)
-      ->Option.getWithDefault("PM")}`
+    let toTime = `${toTimeArr->Array.get(0)->Option.getOr("11:59")}:00 ${toTimeArr
+      ->Array.get(1)
+      ->Option.getOr("PM")}`
     settoTime(_ => toTime->String.toUpperCase)
   }
 
diff --git a/src/components/NewPagination.res b/src/components/NewPagination.res
index 54502b2fa..2662e23d6 100644
--- a/src/components/NewPagination.res
+++ b/src/components/NewPagination.res
@@ -63,7 +63,7 @@ let make = (~resultsPerPage, ~totalResults, ~currentPage, ~paginate, ~btnCount=4
       }
     })
     ->React.array}
-    {if currentPage < Belt.Array.length(pageNumbers) {
+    {if currentPage < Array.length(pageNumbers) {
       <Icon name="chevron-right" size=16 onClick={_evt => paginate(currentPage + 1)} />
     } else {
       <Icon name="rightDisabledPaginator" size=16 onClick={_evt => paginate(currentPage + 1)} />
diff --git a/src/components/OrderUtils.res b/src/components/OrderUtils.res
index 2f51a676a..094079a17 100644
--- a/src/components/OrderUtils.res
+++ b/src/components/OrderUtils.res
@@ -42,7 +42,7 @@ module DisplayKeyValueParams = {
 
     let textColor = textColor === "" ? "text-jp-gray-900 dark:text-white" : textColor
 
-    let description = heading.description->Option.getWithDefault("")
+    let description = heading.description->Option.getOr("")
 
     {
       <AddDataAttributes attributes=[("data-label", heading.title)]>
diff --git a/src/components/Pagination.res b/src/components/Pagination.res
index 7f890cda5..fdb7fc82c 100644
--- a/src/components/Pagination.res
+++ b/src/components/Pagination.res
@@ -33,7 +33,7 @@ let make = (~resultsPerPage, ~totalResults, ~currentPage, ~paginate, ~btnCount=4
   rangeNum->Array.forEach(ele => {
     ranges->Array.push((ele - 9)->Belt.Int.toString ++ "-" ++ ele->Belt.Int.toString)->ignore
   })
-  let lastNum = rangeNum->Belt.Array.get(Array.length(rangeNum) - 1)->Option.getWithDefault(0)
+  let lastNum = rangeNum->Array.get(Array.length(rangeNum) - 1)->Option.getOr(0)
   if totalResults > lastNum {
     let start = lastNum + (totalResults - lastNum)
     start === totalResults
@@ -91,7 +91,7 @@ let make = (~resultsPerPage, ~totalResults, ~currentPage, ~paginate, ~btnCount=4
           buttonType
           onClick={_evt => paginate(currentPage + 1)}
           customButtonStyle="!h-10"
-          buttonState={if currentPage < Belt.Array.length(pageNumbers) {
+          buttonState={if currentPage < Array.length(pageNumbers) {
             Normal
           } else {
             Disabled
@@ -110,7 +110,7 @@ let make = (~resultsPerPage, ~totalResults, ~currentPage, ~paginate, ~btnCount=4
         name: "dummy-name",
         onBlur: _ev => (),
         onChange: _evt => {
-          let val = ranges->Belt.Array.get(_evt->formEventToInt - 1)->Option.getWithDefault("1-10")
+          let val = ranges->Array.get(_evt->formEventToInt - 1)->Option.getOr("1-10")
           setDropDownVal(_ => val)
           paginate(_evt->formEventToInt)
         },
diff --git a/src/components/Paginator.res b/src/components/Paginator.res
index e66d57596..19538e834 100644
--- a/src/components/Paginator.res
+++ b/src/components/Paginator.res
@@ -48,7 +48,7 @@ let make = (
     onBlur: _ev => (),
     onChange: ev => {
       setResultsPerPage(_ => {
-        ev->Identity.formReactEventToString->Belt.Int.fromString->Option.getWithDefault(15)
+        ev->Identity.formReactEventToString->Belt.Int.fromString->Option.getOr(15)
       })
     },
     onFocus: _ev => (),
diff --git a/src/components/PopUpContainer.res b/src/components/PopUpContainer.res
index c70bfd018..d2fb23edd 100644
--- a/src/components/PopUpContainer.res
+++ b/src/components/PopUpContainer.res
@@ -3,7 +3,7 @@ open PopUpState
 @react.component
 let make = (~children) => {
   let (openPopUps, setOpenPopUp) = Recoil.useRecoilState(PopUpState.openPopUp)
-  let activePopUp = openPopUps->Belt.Array.get(0)
+  let activePopUp = openPopUps->Array.get(0)
   let popUp = switch activePopUp {
   | Some(popUp) => {
       let handleConfirm = ev => {
diff --git a/src/components/RangeSlider.res b/src/components/RangeSlider.res
index 2089bf8b0..2b24fc6b9 100644
--- a/src/components/RangeSlider.res
+++ b/src/components/RangeSlider.res
@@ -143,7 +143,7 @@ let make = (
           max={max->Belt.Float.toString}
           onBlur={ev => {
             let minVal = minSlideVal
-            let maxSliderValue = maxSlide.value->Js.Json.decodeNumber->Option.getWithDefault(0.)
+            let maxSliderValue = maxSlide.value->Js.Json.decodeNumber->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.getWithDefault(0.)
+              let maxSliderValue = maxSlide.value->Js.Json.decodeNumber->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->Belt.Float.toString}
           onBlur={ev => {
             let maxVal = maxSlideVal
-            let minSliderValue = minSlide.value->Js.Json.decodeNumber->Option.getWithDefault(0.)
+            let minSliderValue = minSlide.value->Js.Json.decodeNumber->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.getWithDefault(0.)
+            let minSliderValue = minSlide.value->Js.Json.decodeNumber->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 0dea0870e..d6809b555 100644
--- a/src/components/ReactWindowTable.res
+++ b/src/components/ReactWindowTable.res
@@ -142,8 +142,8 @@ module NewCell = {
             "w-24"
           } else {
             columnWidthArr
-            ->Belt.Array.get(cellIndex)
-            ->Option.getWithDefault(`${cellIndex === 0 && customSerialNoColumn ? "w-24" : "w-64"}`)
+            ->Array.get(cellIndex)
+            ->Option.getOr(`${cellIndex === 0 && customSerialNoColumn ? "w-24" : "w-64"}`)
           }
 
           let overflowStyle = cellIndex === colsLen ? "overflow-hidden" : ""
@@ -249,8 +249,7 @@ module ReactWindowTableComponent = {
       switch actualData {
       | Some(actualData) =>
         switch getRowDetails {
-        | Some(fn) =>
-          fn(actualData->Belt.Array.get(rowIndex)->Option.getWithDefault(Js.Nullable.null))
+        | Some(fn) => fn(actualData->Array.get(rowIndex)->Option.getOr(Js.Nullable.null))
         | None => React.null
         }
       | None => React.null
@@ -294,7 +293,7 @@ module ReactWindowTableComponent = {
       }
       acc
     })
-    let colFilt = columnFilterRow->Option.getWithDefault([])
+    let colFilt = columnFilterRow->Option.getOr([])
     let colFilter = showCheckBox ? [TextFilter("")]->Array.concat(colFilt) : colFilt
     let arr = switch columnWidth {
     | Some(arr) => arr
@@ -321,8 +320,8 @@ module ReactWindowTableComponent = {
               "w-24"
             } else {
               arr
-              ->Belt.Array.get(i)
-              ->Option.getWithDefault(`${isFirstCol && customSerialNoColumn ? "w-24" : "w-64"}`)
+              ->Array.get(i)
+              ->Option.getOr(`${isFirstCol && customSerialNoColumn ? "w-24" : "w-64"}`)
             }
 
             let roundedClass = if isFirstCol {
@@ -370,14 +369,13 @@ module ReactWindowTableComponent = {
                     <UIUtils.RenderIf condition={item.description->Option.isSome}>
                       <div className="text-sm text-gray-500 mx-2">
                         <ToolTip
-                          description={item.description->Option.getWithDefault("")}
+                          description={item.description->Option.getOr("")}
                           toolTipPosition={ToolTip.Bottom}
                         />
                       </div>
                     </UIUtils.RenderIf>
                   </div>
-                  <UIUtils.RenderIf
-                    condition={item.showMultiSelectCheckBox->Option.getWithDefault(false)}>
+                  <UIUtils.RenderIf condition={item.showMultiSelectCheckBox->Option.getOr(false)}>
                     <div className=" mt-1 mr-2">
                       <CheckBoxIcon
                         isSelected={isAllSelected}
@@ -390,7 +388,7 @@ module ReactWindowTableComponent = {
                   <UIUtils.RenderIf condition={item.data->Option.isSome}>
                     <div
                       className="flex justify-start font-bold text-fs-10 whitespace-pre text-ellipsis overflow-x-hidden">
-                      {React.string(item.data->Option.getWithDefault(""))}
+                      {React.string(item.data->Option.getOr(""))}
                     </div>
                   </UIUtils.RenderIf>
                 </div>
@@ -431,7 +429,7 @@ module ReactWindowTableComponent = {
               <div>
                 {
                   let len = colFilter->Array.length
-                  switch colFilter->Belt.Array.get(i) {
+                  switch colFilter->Array.get(i) {
                   | Some(fitlerRows) =>
                     <FilterRow
                       item=fitlerRows
@@ -462,7 +460,7 @@ module ReactWindowTableComponent = {
             let rowIndex = index->LogicUtils.getInt("index", 0)
             getIndex(rowIndex)
 
-            let item = rowInfo->Belt.Array.get(rowIndex)->Option.getWithDefault([])
+            let item = rowInfo->Array.get(rowIndex)->Option.getOr([])
 
             let style =
               index->LogicUtils.getJsonObjectFromDict("style")->Identity.jsonToReactDOMStyle
@@ -536,7 +534,7 @@ type sortOb = {
   sortType: sortTyp,
 }
 
-let sortAtom: Recoil.recoilAtom<Js.Dict.t<sortOb>> = Recoil.atom(. "sortAtom", Dict.make())
+let sortAtom: Recoil.recoilAtom<Dict.t<sortOb>> = Recoil.atom(. "sortAtom", Dict.make())
 
 let useSortedObj = (title: string, defaultSort) => {
   let (dict, setDict) = Recoil.useRecoilState(sortAtom)
@@ -600,8 +598,8 @@ let sortArray = (originalData, key, sortOrder: Table.sortOrder) => {
   }
   let sortedArrayByOrder = {
     let _ = originalData->Js.Array2.sortInPlaceWith((i1, i2) => {
-      let item1 = i1->Js.Json.stringifyAny->Option.getWithDefault("")->LogicUtils.safeParse
-      let item2 = i2->Js.Json.stringifyAny->Option.getWithDefault("")->LogicUtils.safeParse
+      let item1 = i1->Js.Json.stringifyAny->Option.getOr("")->LogicUtils.safeParse
+      let item2 = i2->Js.Json.stringifyAny->Option.getOr("")->LogicUtils.safeParse
       // flatten items and get data
 
       let val1 = item1->Js.Json.decodeObject->Option.flatMap(dict => dict->Dict.get(key))
@@ -751,8 +749,7 @@ let make = (
     (isFilterOpen, setIsFilterOpen)
   }, (isFilterOpen, setIsFilterOpen))
 
-  let heading =
-    visibleColumns->Option.getWithDefault(entity.defaultColumns)->Array.map(entity.getHeading)
+  let heading = visibleColumns->Option.getOr(entity.defaultColumns)->Array.map(entity.getHeading)
 
   if showSerialNumber {
     heading
@@ -785,7 +782,7 @@ let make = (
     if tableLocalFilter {
       let columnFilterRow =
         visibleColumns
-        ->Option.getWithDefault(entity.defaultColumns)
+        ->Option.getOr(entity.defaultColumns)
         ->Array.map(item => {
           let headingEntity = entity.getHeading(item)
           let key = headingEntity.key
@@ -802,9 +799,9 @@ let make = (
             )
           switch columToConsider {
           | Some(allCol) =>
-            newValues->Belt.Array.forEach(
+            newValues->Array.forEach(
               rows => {
-                allCol->Belt.Array.forEach(
+                allCol->Array.forEach(
                   item => {
                     let heading = {item->entity.getHeading}
                     let key = heading.key
@@ -837,29 +834,25 @@ let make = (
 
           | None => ()
           }
-          let filterValueArray = dictArrObj->Dict.get(key)->Option.getWithDefault([])
+          let filterValueArray = dictArrObj->Dict.get(key)->Option.getOr([])
           switch dataType {
           | DropDown => Table.DropDownFilter(key, filterValueArray) // TextDropDownColumn
           | LabelType | TextType => Table.TextFilter(key)
           | MoneyType | NumericType | ProgressType => {
               let newArr =
                 filterValueArray
-                ->Array.map(item => item->Js.Json.decodeNumber->Option.getWithDefault(0.))
+                ->Array.map(item => item->Js.Json.decodeNumber->Option.getOr(0.))
                 ->Js.Array2.sortInPlaceWith(LogicUtils.numericArraySortComperator)
               let lengthOfArr = newArr->Array.length
 
               if lengthOfArr >= 2 {
                 Table.Range(
                   key,
-                  newArr[0]->Option.getWithDefault(0.),
-                  newArr[lengthOfArr - 1]->Option.getWithDefault(0.),
+                  newArr[0]->Option.getOr(0.),
+                  newArr[lengthOfArr - 1]->Option.getOr(0.),
                 )
               } else if lengthOfArr >= 1 {
-                Table.Range(
-                  key,
-                  newArr[0]->Option.getWithDefault(0.),
-                  newArr[0]->Option.getWithDefault(0.),
-                )
+                Table.Range(key, newArr[0]->Option.getOr(0.), newArr[0]->Option.getOr(0.))
               } else {
                 Table.Range(key, 0.0, 0.0)
               }
@@ -929,7 +922,7 @@ let make = (
     }
     None
   }, [selectAllCheckBox])
-  let sNoArr = Dict.get(columnFilter, "s_no")->Option.getWithDefault([])
+  let sNoArr = Dict.get(columnFilter, "s_no")->Option.getOr([])
   // filtering for SNO
   let rows =
     filteredData
@@ -938,12 +931,12 @@ let make = (
       | Some(item) => {
           let visibleCell =
             visibleColumns
-            ->Option.getWithDefault(entity.defaultColumns)
+            ->Option.getOr(entity.defaultColumns)
             ->Array.map(colType => {
               entity.getCell(item, colType)
             })
-          let startPoint = sNoArr->Belt.Array.get(0)->Option.getWithDefault(1.->Js.Json.number)
-          let endPoint = sNoArr->Belt.Array.get(1)->Option.getWithDefault(1.->Js.Json.number)
+          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)->Belt.Int.toFloat->Js.Json.number
           sNoArr->Array.length > 0
             ? {
@@ -955,7 +948,7 @@ let make = (
       | None => []
       }
       let getIdFromJson = json => {
-        let selectedPlanDict = json->Js.Json.decodeObject->Option.getWithDefault(Dict.make())
+        let selectedPlanDict = json->Js.Json.decodeObject->Option.getOr(Dict.make())
         selectedPlanDict->LogicUtils.getString("id", "")
       }
       let setIsSelected = isSelected => {
@@ -1016,8 +1009,7 @@ let make = (
 
   let dataExists = rows->Array.length > 0
   let heading = heading->Array.mapWithIndex((head, index) => {
-    let getValue = row =>
-      row->Belt.Array.get(index)->Belt.Option.mapWithDefault("", Table.getTableCellValue)
+    let getValue = row => row->Array.get(index)->Option.mapOr("", Table.getTableCellValue)
 
     let default = switch rows[0] {
     | Some(ele) => getValue(ele)
diff --git a/src/components/RemoteFilter.res b/src/components/RemoteFilter.res
index 7bce6fb6e..8168fc130 100644
--- a/src/components/RemoteFilter.res
+++ b/src/components/RemoteFilter.res
@@ -59,7 +59,7 @@ module ModalUI = {
           className="overflow-auto"
           style={ReactDOMStyle.make(~maxHeight="calc(100vh - 15rem)", ())}>
           <div className="flex flex-wrap h-fit">
-            {switch fieldsFromOption->Belt.Array.get(0) {
+            {switch fieldsFromOption->Array.get(0) {
             | Some(field) =>
               <FormRenderer.FieldRenderer
                 field fieldWrapperClass="w-full !min-w-[200px] p-4 -my-4"
@@ -68,14 +68,14 @@ module ModalUI = {
             }}
           </div>
           <div className="flex flex-wrap h-fit ">
-            {switch fieldsFromOption->Belt.Array.get(1) {
+            {switch fieldsFromOption->Array.get(1) {
             | Some(field) =>
               <FormRenderer.FieldRenderer
                 field fieldWrapperClass="w-full !min-w-[200px] p-4 -my-4"
               />
             | None => React.null
             }}
-            {switch fieldsFromOption->Belt.Array.get(3) {
+            {switch fieldsFromOption->Array.get(3) {
             | Some(field) =>
               <FormRenderer.FieldRenderer
                 field fieldWrapperClass="w-full !min-w-[200px] p-4 -my-4"
@@ -84,7 +84,7 @@ module ModalUI = {
             }}
           </div>
           <div className="flex flex-wrap h-fit mb-10">
-            {switch fieldsFromOption->Belt.Array.get(2) {
+            {switch fieldsFromOption->Array.get(2) {
             | Some(field) =>
               <FormRenderer.FieldRenderer
                 field fieldWrapperClass="w-full !min-w-[200px] p-4 -my-4"
@@ -138,7 +138,7 @@ module ClearFilters = {
         let searchStr =
           formState.values
           ->Js.Json.decodeObject
-          ->Option.getWithDefault(Dict.make())
+          ->Option.getOr(Dict.make())
           ->Dict.toArray
           ->Belt.Array.keepMap(entry => {
             let (key, value) = entry
@@ -162,7 +162,7 @@ module ClearFilters = {
     let hasExtraFilters = React.useMemo2(() => {
       formState.initialValues
       ->Js.Json.decodeObject
-      ->Option.getWithDefault(Dict.make())
+      ->Option.getOr(Dict.make())
       ->Dict.toArray
       ->Array.filter(entry => {
         let (key, value) = entry
@@ -208,7 +208,7 @@ module AnalyticsClearFilters = {
         let searchStr =
           formState.values
           ->Js.Json.decodeObject
-          ->Option.getWithDefault(Dict.make())
+          ->Option.getOr(Dict.make())
           ->Dict.toArray
           ->Belt.Array.keepMap(entry => {
             let (key, value) = entry
@@ -232,7 +232,7 @@ module AnalyticsClearFilters = {
     let hasExtraFilters = React.useMemo2(() => {
       formState.initialValues
       ->Js.Json.decodeObject
-      ->Option.getWithDefault(Dict.make())
+      ->Option.getOr(Dict.make())
       ->Dict.toArray
       ->Array.filter(entry => {
         let (key, value) = entry
@@ -331,7 +331,7 @@ module AutoSubmitter = {
     React.useEffect1(() => {
       if formState.dirty {
         let defaultFieldsHaveChanged = defaultFilterKeys->Array.some(key => {
-          formState.dirtyFields->Dict.get(key)->Option.getWithDefault(false)
+          formState.dirtyFields->Dict.get(key)->Option.getOr(false)
         })
 
         // if autoApply is false then still autoApply can work for the default filters
@@ -350,7 +350,7 @@ module AutoSubmitter = {
 let getStrFromJson = (key, val) => {
   switch val->Js.Json.classify {
   | JSONString(str) => str
-  | JSONArray(array) => array->Array.length > 0 ? `[${array->Array.joinWith(",")}]` : ""
+  | JSONArray(array) => array->Array.length > 0 ? `[${array->Array.joinWithUnsafe(",")}]` : ""
   | JSONNumber(num) => key === "offset" ? "0" : num->Belt.Float.toInt->string_of_int
   | _ => ""
   }
@@ -399,7 +399,7 @@ module ApplyFilterButton = {
       ->Dict.toArray
       ->Array.map(entry => {
         let (key, value) = entry
-        let inputField = inputFieldsDict->Dict.get(key)->Option.getWithDefault(defaultinputField)
+        let inputField = inputFieldsDict->Dict.get(key)->Option.getOr(defaultinputField)
         let formattor = inputField.format
         let value = switch formattor {
         | Some(fn) => fn(. ~value, ~name=key)
@@ -462,7 +462,7 @@ module FilterModal = {
     let formCurrentValues = formState.values->LogicUtils.getDictFromJsonObject
     let sortedSelectedFiltersList = React.useMemo1(_ => {
       let selectedFiltersListWithVal = selectedFiltersList->Array.filter(item => {
-        let inputName = item.inputNames->Belt.Array.get(0)->Option.getWithDefault("")
+        let inputName = item.inputNames->Array.get(0)->Option.getOr("")
         let selectedNo =
           formCurrentValues->LogicUtils.getStrArray(inputName)->Array.length->Belt.Int.toString
         selectedNo !== "0"
@@ -477,7 +477,7 @@ module FilterModal = {
     <div className="flex flex-col gap-4.5">
       {sortedSelectedFiltersList
       ->Array.mapWithIndex((item, i) => {
-        let inputName = item.inputNames->Belt.Array.get(0)->Option.getWithDefault("")
+        let inputName = item.inputNames->Array.get(0)->Option.getOr("")
         let selectedNo =
           formCurrentValues->LogicUtils.getStrArray(inputName)->Array.length->Belt.Int.toString
         let textcolor =
@@ -545,9 +545,7 @@ let make = (
   ~revampedFilter=false,
 ) => {
   let {query} = React.useContext(FilterContext.filterContext)
-  let alreadySelectedFiltersUserpref = `remote_filters_selected_keys_${tableName->Option.getWithDefault(
-      "",
-    )}`
+  let alreadySelectedFiltersUserpref = `remote_filters_selected_keys_${tableName->Option.getOr("")}`
   let {addConfig} = React.useContext(UserPrefContext.userPrefContext)
   let syncIcon = "sync"
 
@@ -565,7 +563,7 @@ let make = (
   let updatedSelectedList = React.useMemo1(() => {
     selectedFiltersList
     ->Array.map(item => {
-      item.inputNames->Belt.Array.get(0)->Option.getWithDefault("")
+      item.inputNames->Array.get(0)->Option.getOr("")
     })
     ->Js.Json.stringArray
   }, [selectedFiltersList])
@@ -593,7 +591,7 @@ let make = (
 
   let countSelectedFilters = React.useMemo1(() => {
     Dict.keysToArray(
-      initialValueJson->Js.Json.decodeObject->Option.getWithDefault(Dict.make()),
+      initialValueJson->Js.Json.decodeObject->Option.getOr(Dict.make()),
     )->Array.length
   }, [initialValueJson])
 
@@ -672,8 +670,7 @@ let make = (
               let defaultEntityOptionType: EntityType.optionType<
                 't,
               > = EntityType.getDefaultEntityOptionType()
-              let optionObj =
-                remoteOptions[optionObjIdx]->Option.getWithDefault(defaultEntityOptionType)
+              let optionObj = remoteOptions[optionObjIdx]->Option.getOr(defaultEntityOptionType)
               let optionObjUrlKey = optionObj.urlKey
               if !(popupUrlKeyArr->Array.includes(optionObjUrlKey)) {
                 Array.push(localSelectedFiltersList, optionObj.field)
@@ -695,8 +692,7 @@ let make = (
   }, [searchParams])
 
   let onSubmit = (values, _) => {
-    let obj =
-      values->Js.Json.decodeObject->Option.getWithDefault(Dict.make())->Dict.toArray->Dict.fromArray
+    let obj = values->Js.Json.decodeObject->Option.getOr(Dict.make())->Dict.toArray->Dict.fromArray
 
     let flattendDict = obj->Js.Json.object_->JsonFlattenUtils.flattenObject(false)
     let localFilterDict = localFilterJson->JsonFlattenUtils.flattenObject(false)
@@ -744,7 +740,7 @@ let make = (
       let defaultEntityOptionType: EntityType.optionType<
         't,
       > = EntityType.getDefaultEntityOptionType()
-      let optionObj = optionObjArry[0]->Option.getWithDefault(defaultEntityOptionType)
+      let optionObj = optionObjArry[0]->Option.getOr(defaultEntityOptionType)
       let _ = Array.push(localSelectedFiltersList, optionObj.field)
       let _a = Array.push(localCheckedFilters, value)
     })
@@ -770,9 +766,9 @@ let make = (
 
     let finalFieldList = selectedFiltersList->Array.filter(val => {
       val.inputNames
-      ->Belt.Array.get(0)
+      ->Array.get(0)
       ->Belt.Option.map(name => !Array.includes(toBeRemoved, name))
-      ->Option.getWithDefault(false)
+      ->Option.getOr(false)
     })
     let filtersAfterRemoving =
       checkedFilters->Array.filter(val => !Array.includes(toBeRemoved, val))
@@ -781,7 +777,7 @@ let make = (
       initialValueJson
       ->Js.Json.decodeObject
       ->Belt.Option.map(Dict.toArray)
-      ->Option.getWithDefault([])
+      ->Option.getOr([])
       ->Array.filter(entry => {
         let (key, _value) = entry
         !Array.includes(toBeRemoved, key)
diff --git a/src/components/RemoteFiltersUtils.res b/src/components/RemoteFiltersUtils.res
index 0edff3de0..2ff5cbe7a 100644
--- a/src/components/RemoteFiltersUtils.res
+++ b/src/components/RemoteFiltersUtils.res
@@ -64,7 +64,7 @@ let getFinalDict = (
       | JSONArray(stringValueArr) =>
         stringValueArr
         ->Array.map(ele => {
-          getExpectedType(ele->Js.Json.decodeString->Option.getWithDefault(""))
+          getExpectedType(ele->Js.Json.decodeString->Option.getOr(""))
         })
         ->Js.Json.array
       | JSONString(ele) => getExpectedType(ele)
@@ -83,13 +83,10 @@ let getFinalDict = (
       if !isSearchKeyArray {
         let key =
           filterDict
-          ->LogicUtils.getString(dropdownSearchKeyValueNames[0]->Option.getWithDefault(""), "")
+          ->LogicUtils.getString(dropdownSearchKeyValueNames[0]->Option.getOr(""), "")
           ->LogicUtils.toCamelCase
         let value =
-          filterDict->LogicUtils.getString(
-            dropdownSearchKeyValueNames[1]->Option.getWithDefault(""),
-            "",
-          )
+          filterDict->LogicUtils.getString(dropdownSearchKeyValueNames[1]->Option.getOr(""), "")
         if value !== "" {
           let isformat = searchkeysDict !== Dict.make()
           let value = if isformat {
@@ -110,17 +107,14 @@ let getFinalDict = (
       } else {
         let key =
           filterDict
-          ->LogicUtils.getArrayFromDict(
-            dropdownSearchKeyValueNames[0]->Option.getWithDefault(""),
-            [],
-          )
+          ->LogicUtils.getArrayFromDict(dropdownSearchKeyValueNames[0]->Option.getOr(""), [])
           ->Array.map(item => item->LogicUtils.getStringFromJson("")->LogicUtils.toCamelCase)
         let value =
           filterDict
-          ->LogicUtils.getString(dropdownSearchKeyValueNames[1]->Option.getWithDefault(""), "")
+          ->LogicUtils.getString(dropdownSearchKeyValueNames[1]->Option.getOr(""), "")
           ->String.split(", ")
         value->Array.forEachWithIndex((value, indx) => {
-          let key = key->Array.length > indx ? key[indx]->Option.getWithDefault("") : ""
+          let key = key->Array.length > indx ? key[indx]->Option.getOr("") : ""
           if value !== "" && key != "" {
             let isformat = searchkeysDict !== Dict.make()
             let value = if isformat {
@@ -157,7 +151,7 @@ let getFinalDict = (
 let getStrFromJson = (key, val) => {
   switch val->Js.Json.classify {
   | JSONString(str) => str
-  | JSONArray(array) => array->Array.length > 0 ? `[${array->Array.joinWith(",")}]` : ""
+  | JSONArray(array) => array->Array.length > 0 ? `[${array->Array.joinWithUnsafe(",")}]` : ""
   | JSONNumber(num) => key === "offset" ? "0" : num->Belt.Float.toInt->string_of_int
   | _ => ""
   }
@@ -181,8 +175,8 @@ let getInitialValuesFromUrl = (
 
     splitUrlArray->Array.forEach(filterKeyVal => {
       let splitArray = String.split(filterKeyVal, "=")
-      let keyStartIndex = String.lastIndexOf(splitArray[0]->Option.getWithDefault(""), "-") + 1
-      let key = String.sliceToEnd(splitArray[0]->Option.getWithDefault(""), ~start=keyStartIndex)
+      let keyStartIndex = String.lastIndexOf(splitArray[0]->Option.getOr(""), "-") + 1
+      let key = String.sliceToEnd(splitArray[0]->Option.getOr(""), ~start=keyStartIndex)
       Array.push(keyList, key)->ignore
       splitArray->Js.Array2.shift->ignore
       let value = splitArray->Array.joinWith("=")
@@ -234,23 +228,17 @@ let getLocalFiltersData = (
     let valueList = []
     splitUrlArray->Array.forEach(filterKeyVal => {
       let splitArray = String.split(filterKeyVal, "=")
-      let keyStartIndex = String.lastIndexOf(splitArray[0]->Option.getWithDefault(""), `-`) + 1
-      let key = String.sliceToEnd(splitArray[0]->Option.getWithDefault(""), ~start=keyStartIndex)
+      let keyStartIndex = String.lastIndexOf(splitArray[0]->Option.getOr(""), `-`) + 1
+      let key = String.sliceToEnd(splitArray[0]->Option.getOr(""), ~start=keyStartIndex)
       Array.push(keyList, key)->ignore
-      Array.push(valueList, splitArray[1]->Option.getWithDefault(""))->ignore
+      Array.push(valueList, splitArray[1]->Option.getOr(""))->ignore
     })
 
     let dateRange = dateRangeFilterDict->LogicUtils.getArrayFromDict("dateRange", [])
     let startKey =
-      dateRange
-      ->Belt.Array.get(0)
-      ->Option.getWithDefault(""->Js.Json.string)
-      ->LogicUtils.getStringFromJson("")
+      dateRange->Array.get(0)->Option.getOr(""->Js.Json.string)->LogicUtils.getStringFromJson("")
     let endKey =
-      dateRange
-      ->Belt.Array.get(1)
-      ->Option.getWithDefault(""->Js.Json.string)
-      ->LogicUtils.getStringFromJson("")
+      dateRange->Array.get(1)->Option.getOr(""->Js.Json.string)->LogicUtils.getStringFromJson("")
 
     let (keyList, valueList) = if (
       dateRangeFilterDict != Dict.make() &&
@@ -259,8 +247,8 @@ let getLocalFiltersData = (
       keyList->Array.includes(startKey) &&
       keyList->Array.includes(endKey)
     ) {
-      let start_Date = valueList[keyList->Array.indexOf(startKey)]->Option.getWithDefault("")
-      let end_Date = valueList[keyList->Array.indexOf(endKey)]->Option.getWithDefault("")
+      let start_Date = valueList[keyList->Array.indexOf(startKey)]->Option.getOr("")
+      let end_Date = valueList[keyList->Array.indexOf(endKey)]->Option.getOr("")
       let keyList = keyList->Array.filter(item => item != startKey && item != endKey)
       let valueList = valueList->Array.filter(item => item != start_Date && item != end_Date)
       keyList->Array.push(startKey)->ignore
@@ -277,7 +265,7 @@ let getLocalFiltersData = (
         field.inputNames->Array.forEach(
           name => {
             if name === key {
-              let value = valueList[idx]->Option.getWithDefault("")
+              let value = valueList[idx]->Option.getOr("")
               if String.includes(value, "[") {
                 let str = String.slice(~start=1, ~end=value->String.length - 1, value)
                 let splitArray = String.split(str, ",")
@@ -303,7 +291,7 @@ let getLocalFiltersData = (
         if fieldName === key {
           res.contents = switch localFilter {
           | Some(localFilter) =>
-            localFilter(res.contents, Js.Json.string(valueList[idx]->Option.getWithDefault("")))
+            localFilter(res.contents, Js.Json.string(valueList[idx]->Option.getOr("")))
           | None => res.contents
           }
         }
diff --git a/src/components/SearchInput.res b/src/components/SearchInput.res
index d7b7fa107..cf977ae47 100644
--- a/src/components/SearchInput.res
+++ b/src/components/SearchInput.res
@@ -21,7 +21,7 @@ let make = (
   let showPopUp = PopUpState.useShowPopUp()
 
   let defaultRef = React.useRef(Js.Nullable.null)
-  let searchRef = searchRef->Option.getWithDefault(defaultRef)
+  let searchRef = searchRef->Option.getOr(defaultRef)
 
   let handleSearch = e => {
     setPrevVal(_ => inputText)
diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
index 77b6325a9..429c953b1 100644
--- a/src/components/SelectBox.res
+++ b/src/components/SelectBox.res
@@ -120,8 +120,7 @@ module ListItem = {
       ""
     }
 
-    let labelStyle =
-      customLabelStyle->Option.isSome ? customLabelStyle->Option.getWithDefault("") : ""
+    let labelStyle = customLabelStyle->Option.isSome ? customLabelStyle->Option.getOr("") : ""
 
     let onToggleSelect = val => {
       if !isDisabled {
@@ -380,12 +379,12 @@ let makeNonOptional = (dropdownOption: dropdownOption): dropdownOptionWithoutOpt
   {
     label: dropdownOption.label,
     value: dropdownOption.value,
-    isDisabled: dropdownOption.isDisabled->Option.getWithDefault(false),
-    icon: dropdownOption.icon->Option.getWithDefault(NoIcon),
+    isDisabled: dropdownOption.isDisabled->Option.getOr(false),
+    icon: dropdownOption.icon->Option.getOr(NoIcon),
     description: dropdownOption.description,
-    iconStroke: dropdownOption.iconStroke->Option.getWithDefault(""),
-    textColor: dropdownOption.textColor->Option.getWithDefault(""),
-    optGroup: dropdownOption.optGroup->Option.getWithDefault("-"),
+    iconStroke: dropdownOption.iconStroke->Option.getOr(""),
+    textColor: dropdownOption.textColor->Option.getOr(""),
+    optGroup: dropdownOption.optGroup->Option.getOr("-"),
   }
 }
 
@@ -511,7 +510,7 @@ module BaseSelect = {
       if !isDisabled {
         let data = if Array.includes(saneValue, itemDataValue) {
           let values =
-            deselectDisable->Option.getWithDefault(false)
+            deselectDisable->Option.getOr(false)
               ? saneValue
               : saneValue->Array.filter(x => x !== itemDataValue)
           onItemSelect(e, itemDataValue)->ignore
@@ -571,13 +570,12 @@ module BaseSelect = {
     } else {
       `${minWidth} ${dropdownCustomWidth}`
     }
-    let textIconPresent =
-      options->Array.some(op => op.icon->Option.getWithDefault(NoIcon) !== NoIcon)
+    let textIconPresent = options->Array.some(op => op.icon->Option.getOr(NoIcon) !== NoIcon)
 
     let _ = if sortingBasedOnDisabled {
       options->Js.Array2.sortInPlaceWith((m1, m2) => {
-        let m1Disabled = m1.isDisabled->Option.getWithDefault(false)
-        let m2Disabled = m2.isDisabled->Option.getWithDefault(false)
+        let m1Disabled = m1.isDisabled->Option.getOr(false)
+        let m2Disabled = m2.isDisabled->Option.getOr(false)
         if m1Disabled === m2Disabled {
           0
         } else if m1Disabled {
@@ -826,11 +824,11 @@ module BaseSelect = {
             ->Array.mapWithIndex((item, indx) => {
               let valueToConsider = item.value
               let index = Array.findIndex(saneValue, sv => sv === valueToConsider)
-              let isPrevSelected = switch filteredOptions->Belt.Array.get(indx - 1) {
+              let isPrevSelected = switch filteredOptions->Array.get(indx - 1) {
               | Some(prevItem) => Array.findIndex(saneValue, sv => sv === prevItem.value) > -1
               | None => false
               }
-              let isNextSelected = switch filteredOptions->Belt.Array.get(indx + 1) {
+              let isNextSelected = switch filteredOptions->Array.get(indx + 1) {
               | Some(nextItem) => Array.findIndex(saneValue, sv => sv === nextItem.value) > -1
               | None => false
               }
@@ -934,8 +932,7 @@ module BaseSelectButton = {
     let searchRef = React.useRef(Js.Nullable.null)
     let onItemClick = (itemData, _ev) => {
       if !disableSelect {
-        let isSelected =
-          value->Js.Json.decodeString->Belt.Option.mapWithDefault(false, str => itemData === str)
+        let isSelected = value->Js.Json.decodeString->Option.mapOr(false, str => itemData === str)
 
         if isSelected && !deselectDisable {
           onSelect("")
@@ -1161,7 +1158,7 @@ let getHashMappedOptionValues = (options: array<dropdownOptionWithoutOptional>)
     if acc->Dict.get(ele.optGroup)->Option.isNone {
       acc->Dict.set(ele.optGroup, [ele])
     } else {
-      acc->Dict.get(ele.optGroup)->Option.getWithDefault([])->Array.push(ele)->ignore
+      acc->Dict.get(ele.optGroup)->Option.getOr([])->Array.push(ele)->ignore
     }
     acc
   })
@@ -1225,8 +1222,7 @@ module BaseRadio = {
     let hashMappedOptions = getHashMappedOptionValues(options)
 
     let isNonGrouped =
-      hashMappedOptions->Dict.get("-")->Option.getWithDefault([])->Array.length ===
-        options->Array.length
+      hashMappedOptions->Dict.get("-")->Option.getOr([])->Array.length === options->Array.length
 
     let (optgroupKeys, setOptgroupKeys) = React.useState(_ => getSortedKeys(hashMappedOptions))
 
@@ -1237,7 +1233,7 @@ module BaseRadio = {
     }, [searchString])
 
     OutsideClick.useOutsideClick(
-      ~refs={ArrayOfRef([dropdownRef->Option.getWithDefault(React.useRef(Js.Nullable.null))])},
+      ~refs={ArrayOfRef([dropdownRef->Option.getOr(React.useRef(Js.Nullable.null))])},
       ~isActive=showDropDown,
       ~callback=() => {
         setSearchString(_ => "")
@@ -1246,8 +1242,7 @@ module BaseRadio = {
     )
     let onItemClick = (itemData, isDisabled, _ev) => {
       if !isDisabled {
-        let isSelected =
-          value->Js.Json.decodeString->Belt.Option.mapWithDefault(false, str => itemData === str)
+        let isSelected = value->Js.Json.decodeString->Option.mapOr(false, str => itemData === str)
 
         if isSelected && !deselectDisable {
           setSelectedString(_ => "")
@@ -1403,7 +1398,7 @@ module BaseRadio = {
                 <RenderListItemInBaseRadio
                   newOptions={getHashMappedOptionValues(newOptions)
                   ->Dict.get(ele)
-                  ->Option.getWithDefault([])}
+                  ->Option.getOr([])}
                   value
                   descriptionOnHover
                   isDropDown
@@ -1638,7 +1633,7 @@ module BaseDropdown = {
             BottomMiddle
           }->Some
         })
-        ->Option.getWithDefault(BottomMiddle)
+        ->Option.getOr(BottomMiddle)
       }
     }, [showDropDown])
 
@@ -1686,7 +1681,7 @@ module BaseDropdown = {
         color: condition ? BadgeBlue : NoBadge,
       }
     }, [newInputSelect.value])
-    let widthClass = isMobileView ? "w-full" : dropdownCustomWidth->Option.getWithDefault("")
+    let widthClass = isMobileView ? "w-full" : dropdownCustomWidth->Option.getOr("")
 
     let optionsElement = if allowMultiSelect {
       <BaseSelect
@@ -1812,7 +1807,7 @@ module BaseDropdown = {
               | FilterAdd =>
                 <Button
                   text=buttonText
-                  leftIcon={customButtonLeftIcon->Option.getWithDefault(FontAwesome({"plus"}))}
+                  leftIcon={customButtonLeftIcon->Option.getOr(FontAwesome({"plus"}))}
                   buttonType
                   isSelectBoxButton=true
                   buttonSize
@@ -1933,7 +1928,7 @@ module BaseDropdown = {
             )
             if actualValueIndex !== -1 {
               let (text, leftIcon) = switch options[actualValueIndex] {
-              | Some(ele) => (ele.label, ele.icon->Option.getWithDefault(NoIcon))
+              | Some(ele) => (ele.label, ele.icon->Option.getOr(NoIcon))
               | None => ("", NoIcon)
               }
 
diff --git a/src/components/SelectModal.res b/src/components/SelectModal.res
index 645cb36a6..0b1ce7501 100644
--- a/src/components/SelectModal.res
+++ b/src/components/SelectModal.res
@@ -47,7 +47,7 @@ let make = (
 
   let len = values->Array.length
   let buttonText =
-    submitButtonText->Option.getWithDefault(
+    submitButtonText->Option.getOr(
       len > 0 ? `${len->Belt.Int.toString} ${title} Selected` : "Select",
     )
 
@@ -114,18 +114,14 @@ let make = (
         ? <div className="bg-[#F6F6F6] p-4 border-b border-slate-300 text-center text-[#868686]">
             {React.string(
               `Conversion rate  = ${options
-                ->Array.filter(itm =>
-                  values->Belt.Array.get(0)->Option.getWithDefault("") == itm.value
-                )
+                ->Array.filter(itm => values->Array.get(0)->Option.getOr("") == itm.value)
                 ->Array.map(item => item.label)
-                ->Belt.Array.get(0)
-                ->Option.getWithDefault("Factor 1")} / ${options
-                ->Array.filter(itm =>
-                  values->Belt.Array.get(1)->Option.getWithDefault("") == itm.value
-                )
+                ->Array.get(0)
+                ->Option.getOr("Factor 1")} / ${options
+                ->Array.filter(itm => values->Array.get(1)->Option.getOr("") == itm.value)
                 ->Array.map(item => item.label)
-                ->Belt.Array.get(0)
-                ->Option.getWithDefault("Factor 2")}`,
+                ->Array.get(0)
+                ->Option.getOr("Factor 2")}`,
             )}
           </div>
         : React.null}
diff --git a/src/components/ShowDetails.res b/src/components/ShowDetails.res
index aac79c1bb..b8079eed2 100644
--- a/src/components/ShowDetails.res
+++ b/src/components/ShowDetails.res
@@ -1,5 +1,5 @@
 open LogicUtils
-type loadDataType = Loading | Loaded(Js.Dict.t<Js.Json.t>, Js.Dict.t<Js.Json.t>) | LoadError(string)
+type loadDataType = Loading | Loaded(Dict.t<Js.Json.t>, Dict.t<Js.Json.t>) | LoadError(string)
 
 type errorType = {
   error: bool,
@@ -10,7 +10,7 @@ type errorType = {
 module EntityData = {
   @react.component
   let make = (
-    ~dictData: Js.Dict.t<Js.Json.t>,
+    ~dictData: Dict.t<Js.Json.t>,
     ~syncData=Dict.make(),
     ~detailsKeyList,
     ~entity: EntityType.entityType<'colType, 't>,
diff --git a/src/components/Table.res b/src/components/Table.res
index a51eba898..80d2600f0 100644
--- a/src/components/Table.res
+++ b/src/components/Table.res
@@ -359,7 +359,7 @@ module TableHeadingCell = {
 
     let headerBgColor =
       headerCustomBgColor->Option.isSome
-        ? headerCustomBgColor->Option.getWithDefault("")
+        ? headerCustomBgColor->Option.getOr("")
         : "bg-gray-50 dark:bg-jp-gray-darkgray_background"
     let paddingClass = "px-4 py-3"
     let roundedClass = if isFirstCol {
@@ -382,7 +382,7 @@ module TableHeadingCell = {
           : ""}`
     } else {
       let heightHeadingClass2 = frozenUpto == 0 ? "" : heightHeadingClass
-      `tableHeader ${lastColProp} ${item.customWidth->Option.getWithDefault(
+      `tableHeader ${lastColProp} ${item.customWidth->Option.getOr(
           "",
         )} justify-between items-center ${headerTextClass} whitespace-pre select-none ${headerBgColor} ${paddingClass} ${roundedClass} ${heightHeadingClass2} ${tableheadingClass} ${isLastCol
           ? lastHeadingClass
@@ -416,8 +416,7 @@ module TableHeadingCell = {
                 : justifyClass}`}>
             <div className="">
               <div className={"flex flex-row"}>
-                <UIUtils.RenderIf
-                  condition={item.showMultiSelectCheckBox->Option.getWithDefault(false)}>
+                <UIUtils.RenderIf condition={item.showMultiSelectCheckBox->Option.getOr(false)}>
                   <div className=" mt-1 mr-2">
                     <CheckBoxIcon
                       isSelected={isAllSelected}
@@ -434,10 +433,10 @@ module TableHeadingCell = {
                   }}
                   <UIUtils.RenderIf condition={item.data->Option.isSome}>
                     <AddDataAttributes
-                      attributes=[("data-heading-value", item.data->Option.getWithDefault(""))]>
+                      attributes=[("data-heading-value", item.data->Option.getOr(""))]>
                       <div
                         className="flex justify-start text-fs-10 font-medium text-gray-400 whitespace-pre text-ellipsis overflow-x-hidden">
-                        {React.string(` (${item.data->Option.getWithDefault("")})`)}
+                        {React.string(` (${item.data->Option.getOr("")})`)}
                       </div>
                     </AddDataAttributes>
                   </UIUtils.RenderIf>
@@ -506,13 +505,13 @@ module TableHeadingCell = {
                     React.null
                   }}
                 </div>
-                <UIUtils.RenderIf condition={item.isMandatory->Option.getWithDefault(false)}>
+                <UIUtils.RenderIf condition={item.isMandatory->Option.getOr(false)}>
                   <div className="text-red-400 text-sm ml-1"> {React.string("*")} </div>
                 </UIUtils.RenderIf>
-                <UIUtils.RenderIf condition={item.description->Option.getWithDefault("") !== ""}>
+                <UIUtils.RenderIf condition={item.description->Option.getOr("") !== ""}>
                   <div className="text-sm text-gray-500 mx-2">
                     <ToolTip
-                      description={item.description->Option.getWithDefault("")}
+                      description={item.description->Option.getOr("")}
                       toolTipPosition={ToolTip.Bottom}
                     />
                   </div>
@@ -558,8 +557,8 @@ module TableHeadingRow = {
         <tr>
           {headingArray
           ->Array.mapWithIndex((item, i) => {
-            let columnFilterRow: array<filterRow> = columnFilterRow->Option.getWithDefault([])
-            let filterRow = columnFilterRow->Belt.Array.get(i)
+            let columnFilterRow: array<filterRow> = columnFilterRow->Option.getOr([])
+            let filterRow = columnFilterRow->Array.get(i)
             <TableHeadingCell
               key={Belt.Int.toString(i)}
               item
@@ -670,7 +669,7 @@ let make = (
   let totalTableWidth =
     Dom.document
     ->Dom.Document.getElementById(`table`)
-    ->Belt.Option.mapWithDefault(0, ele => ele->Document.offsetWidth)
+    ->Option.mapOr(0, ele => ele->Document.offsetWidth)
 
   let equalColWidth = (totalTableWidth / numberOfCols)->Belt.Int.toString
   let fixedWidthClass = enableEqualWidthCol ? `${equalColWidth}px` : ""
@@ -698,8 +697,7 @@ let make = (
     switch actualData {
     | Some(actualData) =>
       switch getRowDetails {
-      | Some(fn) =>
-        fn(actualData->Belt.Array.get(rowIndex)->Option.getWithDefault(Js.Nullable.null))
+      | Some(fn) => fn(actualData->Array.get(rowIndex)->Option.getOr(Js.Nullable.null))
       | None => React.null
       }
     | None => React.null
@@ -893,7 +891,7 @@ let make = (
   let parentBorderRadius = !isHighchartLegend ? "rounded-t-lg" : ""
   let parentBorderClass = !isHighchartLegend ? "border border-jp-2-light-gray-300" : ""
   <div
-    className={`flex flex-row items-stretch ${scrollBarClass} loadedTable ${parentMinWidthClass} ${customBorderClass->Option.getWithDefault(
+    className={`flex flex-row items-stretch ${scrollBarClass} loadedTable ${parentMinWidthClass} ${customBorderClass->Option.getOr(
         parentBorderClass ++ " " ++ parentBorderRadius,
       )}`}
     style={ReactDOMStyle.make(
diff --git a/src/components/TableLocalFilters.res b/src/components/TableLocalFilters.res
index a608a0fd8..a2d20a083 100644
--- a/src/components/TableLocalFilters.res
+++ b/src/components/TableLocalFilters.res
@@ -96,7 +96,7 @@ module FilterDropDown = {
     let options =
       dummyDict->Dict.keysToArray->Array.filter(item => item != "")->SelectBox.makeOptions
 
-    let selectedValue = Dict.get(lclFiltrState, val)->Option.getWithDefault([])
+    let selectedValue = Dict.get(lclFiltrState, val)->Option.getOr([])
 
     let filterInput: ReactFinalForm.fieldRenderPropsInput = {
       name: val,
@@ -175,10 +175,7 @@ module TextFilterCell = {
     let showPopUp = PopUpState.useShowPopUp()
 
     let selectedValue =
-      Dict.get(lclFiltrState, val)
-      ->Option.getWithDefault([])
-      ->Belt.Array.get(0)
-      ->Option.getWithDefault(""->Js.Json.string)
+      Dict.get(lclFiltrState, val)->Option.getOr([])->Array.get(0)->Option.getOr(""->Js.Json.string)
     let localInput = React.useMemo1((): ReactFinalForm.fieldRenderPropsInput => {
       {
         name: "--",
@@ -233,10 +230,7 @@ module RangeFilterCell = {
     let minVal = Js.Math.floor_float(minVal)
     let maxVal = Js.Math.ceil_float(maxVal)
     let selectedValueStr =
-      Dict.get(lclFiltrState, val)->Option.getWithDefault([
-        minVal->Js.Json.number,
-        maxVal->Js.Json.number,
-      ])
+      Dict.get(lclFiltrState, val)->Option.getOr([minVal->Js.Json.number, maxVal->Js.Json.number])
 
     let minSlide = React.useMemo1((): ReactFinalForm.fieldRenderPropsInput => {
       {
@@ -246,14 +240,14 @@ module RangeFilterCell = {
           let value = {ev->ReactEvent.Form.target}["value"]
 
           let leftVal = value->Js.Float.fromString->Js.Json.number
-          let rightvalue = selectedValueStr[1]->Option.getWithDefault(Js.Json.null)
+          let rightvalue = selectedValueStr[1]->Option.getOr(Js.Json.null)
           switch selectedValueStr[1] {
           | Some(ele) => setLclFltrState(val, [leftVal > rightvalue ? rightvalue : leftVal, ele])
           | None => ()
           }
         },
         onFocus: _ev => (),
-        value: selectedValueStr[0]->Option.getWithDefault(Js.Json.number(0.0)),
+        value: selectedValueStr[0]->Option.getOr(Js.Json.number(0.0)),
         checked: false,
       }
     }, [selectedValueStr])
@@ -272,7 +266,7 @@ module RangeFilterCell = {
           }
         },
         onFocus: _ev => (),
-        value: selectedValueStr[1]->Option.getWithDefault(Js.Json.number(0.0)),
+        value: selectedValueStr[1]->Option.getOr(Js.Json.number(0.0)),
         checked: false,
       }
     }, [selectedValueStr])
diff --git a/src/components/TableUtils.res b/src/components/TableUtils.res
index 146a3c9e8..c26e8ee39 100644
--- a/src/components/TableUtils.res
+++ b/src/components/TableUtils.res
@@ -399,8 +399,8 @@ module Numeric = {
 module MoneyCell = {
   let getAmountValue = (amount, currency) => {
     let amountSplitArr = Js.Float.toFixedWithPrecision(amount, ~digits=2)->String.split(".")
-    let decimal = amountSplitArr[1]->Option.getWithDefault("00")
-    let receivedValue = amountSplitArr->Belt.Array.get(0)->Option.getWithDefault("")
+    let decimal = amountSplitArr[1]->Option.getOr("00")
+    let receivedValue = amountSplitArr->Array.get(0)->Option.getOr("")
 
     let formattedAmount = if receivedValue->String.includes("e") {
       receivedValue
@@ -557,10 +557,7 @@ module EllipsisText = {
     let modifiedText =
       ellipsisIdentifier !== ""
         ? {
-            text
-            ->String.split(ellipsisIdentifier)
-            ->Belt.Array.get(0)
-            ->Option.getWithDefault("") ++ "..."
+            text->String.split(ellipsisIdentifier)->Array.get(0)->Option.getOr("") ++ "..."
           }
         : text
     let ellipsesCondition =
diff --git a/src/components/Tabs.res b/src/components/Tabs.res
index 2b891bfc9..30717e671 100644
--- a/src/components/Tabs.res
+++ b/src/components/Tabs.res
@@ -127,10 +127,7 @@ module IndicationArrow = {
 }
 
 let getBoundingRectInfo = (ref: React.ref<Js.Nullable.t<Dom.element>>, getter) => {
-  ref.current
-  ->Js.Nullable.toOption
-  ->Belt.Option.map(getBoundingClientRect)
-  ->Belt.Option.mapWithDefault(0, getter)
+  ref.current->Js.Nullable.toOption->Belt.Option.map(getBoundingClientRect)->Option.mapOr(0, getter)
 }
 
 @react.component
@@ -169,7 +166,7 @@ let make = (
   // ~icon=React.null,
 
   let _ = defaultClasses
-  let initialIndex = initialIndex->Option.getWithDefault(0)
+  let initialIndex = initialIndex->Option.getOr(0)
   let (selectedIndex, setSelectedIndex) = React.useState(() => initialIndex)
   let tabOuterClass = `${tabBottomShadow} ${gapBetweenTabs}`
   let bottomBorderClass = "border-b border-jp-gray-500 dark:border-jp-gray-960"
@@ -268,7 +265,7 @@ let make = (
       </UIUtils.RenderIf>
       <div className=renderedTabClassName>
         <ErrorBoundary key={string_of_int(selectedIndex)}>
-          {switch tabs->Belt.Array.get(selectedIndex) {
+          {switch tabs->Array.get(selectedIndex) {
           | Some(selectedTab) => {
               let component = selectedTab.renderContent()
               <FramerMotion.TransitionComponent
diff --git a/src/components/TabularInput.res b/src/components/TabularInput.res
index 5e42f0e53..1e6f700f3 100644
--- a/src/components/TabularInput.res
+++ b/src/components/TabularInput.res
@@ -25,9 +25,7 @@ module TableCell = {
             onChange(elemIndex, i, event["value"])
           },
           onFocus: _ev => (),
-          value: (keyValue[elemIndex]->Option.getWithDefault([]))[i]
-          ->Option.getWithDefault("")
-          ->Js.Json.string,
+          value: (keyValue[elemIndex]->Option.getOr([]))[i]->Option.getOr("")->Js.Json.string,
           checked: true,
         }
         <FieldInputRenderer item=itm input key={Belt.Int.toString(i)} />
diff --git a/src/components/TimeInput.res b/src/components/TimeInput.res
index f9d32d683..4ed9c3f85 100644
--- a/src/components/TimeInput.res
+++ b/src/components/TimeInput.res
@@ -15,7 +15,7 @@ module OptionVals = {
       onChange
       disabled=isDisabled
       className={`dark:bg-jp-gray-lightgray_background font-medium border border-gray-400 rounded-md self-start ${cursorClass} outline-none`}>
-      {Belt.Array.make(upto, 0)
+      {Array.make(~length=upto, 0)
       ->Array.mapWithIndex((_, i) => {
         <option key={Belt.Int.toString(i)} value={Belt.Int.toString(i)}>
           {i->padNum->React.string}
@@ -43,9 +43,9 @@ let make = (
   }
   open Belt.Option
   let arr = value->String.split(":")
-  let hourVal = arr->Belt.Array.get(0)->flatMap(Belt.Int.fromString)->getWithDefault(0)
-  let minuteVal = arr->Belt.Array.get(1)->flatMap(Belt.Int.fromString)->getWithDefault(0)
-  let secondsVal = arr->Belt.Array.get(2)->flatMap(Belt.Int.fromString)->getWithDefault(0)
+  let hourVal = arr->Array.get(0)->flatMap(Belt.Int.fromString)->getWithDefault(0)
+  let minuteVal = arr->Array.get(1)->flatMap(Belt.Int.fromString)->getWithDefault(0)
+  let secondsVal = arr->Array.get(2)->flatMap(Belt.Int.fromString)->getWithDefault(0)
 
   let changeVal = React.useCallback4((index, ev: ReactEvent.Form.t) => {
     let newVal = {ev->ReactEvent.Form.target}["value"]->Belt.Int.fromString->getWithDefault(0)
diff --git a/src/components/custom-icons/LottieFiles.res b/src/components/custom-icons/LottieFiles.res
index 0b3230ebd..81fe06ab2 100644
--- a/src/components/custom-icons/LottieFiles.res
+++ b/src/components/custom-icons/LottieFiles.res
@@ -8,7 +8,7 @@ let exitCheckBox = "uncheckbox.json"
 let enterSearchCross = "enterCross.json"
 let exitSearchCross = "exitCross.json"
 
-let lottieDict: Js.Dict.t<lottieFileJson> = Dict.make()
+let lottieDict: Dict.t<lottieFileJson> = Dict.make()
 
 let useLottieJson = lottieFileName => {
   let (lottieJson, setlottieJson) = React.useState(_ => Js.Json.null)
diff --git a/src/components/form/FormRenderer.res b/src/components/form/FormRenderer.res
index b24d77e15..111981bc2 100644
--- a/src/components/form/FormRenderer.res
+++ b/src/components/form/FormRenderer.res
@@ -39,14 +39,13 @@ let makeInputFieldInfo = (
   ~validate: option<(option<string>, Js.Json.t) => Js.Promise.t<Js.Nullable.t<string>>>=?,
   (),
 ) => {
-  let label = label->Option.getWithDefault(name)
+  let label = label->Option.getOr(name)
 
-  let newCustomInput =
-    customInput->Option.getWithDefault(InputFields.textInput(~isDisabled=disabled, ()))
+  let newCustomInput = customInput->Option.getOr(InputFields.textInput(~isDisabled=disabled, ()))
 
   {
     name,
-    placeholder: placeholder->Option.getWithDefault(label),
+    placeholder: placeholder->Option.getOr(label),
     customInput: newCustomInput,
     disabled,
     format,
@@ -104,7 +103,7 @@ let makeMultiInputFieldInfo = (
 ) => {
   let inputNames =
     comboCustomInput
-    ->Belt.Option.mapWithDefault([], x => x.names)
+    ->Option.mapOr([], x => x.names)
     ->Array.concat(inputFields->Array.map(x => x.name))
   {
     label,
@@ -144,10 +143,9 @@ let makeFieldInfo = (
   ~validate: option<(option<string>, Js.Json.t) => Js.Promise.t<Js.Nullable.t<string>>>=?,
   (),
 ) => {
-  let label = label->Option.getWithDefault(name)
+  let label = label->Option.getOr(name)
 
-  let newCustomInput =
-    customInput->Option.getWithDefault(InputFields.textInput(~isDisabled=disabled, ()))
+  let newCustomInput = customInput->Option.getOr(InputFields.textInput(~isDisabled=disabled, ()))
 
   makeMultiInputFieldInfo(
     ~label,
@@ -398,7 +396,7 @@ module ComboFieldsRenderer3 = {
       if inputFields->Array.length === 0 {
         renderInputs(fieldsState)
       } else {
-        let inputField = inputFields[0]->Option.getWithDefault(makeInputFieldInfo(~name="", ()))
+        let inputField = inputFields[0]->Option.getOr(makeInputFieldInfo(~name="", ()))
 
         let restInputFields = Js.Array2.sliceFrom(inputFields, 1)
 
@@ -493,8 +491,7 @@ module FieldRenderer = {
               subHeadingClass
               dataId=names>
               {if field.inputFields->Array.length === 1 {
-                let field =
-                  field.inputFields[0]->Option.getWithDefault(makeInputFieldInfo(~name="", ()))
+                let field = field.inputFields[0]->Option.getOr(makeInputFieldInfo(~name="", ()))
 
                 <ErrorBoundary>
                   <FieldInputRenderer field errorClass showErrorOnChange />
diff --git a/src/components/form/MultipleTextInput.res b/src/components/form/MultipleTextInput.res
index a56dccf07..b961f396b 100644
--- a/src/components/form/MultipleTextInput.res
+++ b/src/components/form/MultipleTextInput.res
@@ -42,10 +42,7 @@ let make = (
 ) => {
   let showPopUp = PopUpState.useShowPopUp()
   let currentTags = React.useMemo1(() => {
-    input.value
-    ->Js.Json.decodeArray
-    ->Option.getWithDefault([])
-    ->Belt.Array.keepMap(Js.Json.decodeString)
+    input.value->Js.Json.decodeArray->Option.getOr([])->Belt.Array.keepMap(Js.Json.decodeString)
   }, [input.value])
 
   let setTags = tags => {
@@ -53,7 +50,7 @@ let make = (
   }
 
   let (text, setText) = React.useState(_ => "")
-  let customStyleClass = customStyle->Option.getWithDefault("gap-2 w-full px-1 py-1")
+  let customStyleClass = customStyle->Option.getOr("gap-2 w-full px-1 py-1")
   let onTagRemove = text => {
     setTags(currentTags->Array.filter(tag => tag !== text))
   }
@@ -72,7 +69,7 @@ let make = (
     let isEmpty = text->String.length === 0
 
     if isEmpty && (e->key === "Backspace" || e->keyCode === 8) && currentTags->Array.length > 0 {
-      setText(_ => currentTags[currentTags->Array.length - 1]->Option.getWithDefault(""))
+      setText(_ => currentTags[currentTags->Array.length - 1]->Option.getOr(""))
       setTags(currentTags->Array.slice(~start=0, ~end=-1))
     } else if text->String.length !== 0 {
       if e->key === "Enter" || e->keyCode === 13 || e->key === "Tab" || e->keyCode === 9 {
diff --git a/src/components/form/NumericTextInput.res b/src/components/form/NumericTextInput.res
index 56f9cd35b..78b2a11f9 100644
--- a/src/components/form/NumericTextInput.res
+++ b/src/components/form/NumericTextInput.res
@@ -35,7 +35,7 @@ let make = (
         let size =
           elem
           ->Webapi.Dom.Element.getAttribute("placeholder")
-          ->Belt.Option.mapWithDefault(length, str => Js.Math.max_int(length, str->String.length))
+          ->Option.mapOr(length, str => Js.Math.max_int(length, str->String.length))
           ->Belt.Int.toString
 
         elem->Webapi.Dom.Element.setAttribute("size", size)
@@ -53,15 +53,15 @@ let make = (
       onChange: ev => {
         let value = ReactEvent.Form.target(ev)["value"]
 
-        let strValue = value->Js.Json.decodeString->Option.getWithDefault("")
+        let strValue = value->Js.Json.decodeString->Option.getOr("")
 
         let cleanedValue = switch strValue->Js.String2.match_(%re("/[\d\.]/g")) {
         | Some(strArr) =>
-          let str = strArr->Array.joinWith("")->String.split(".")->Array.slice(~start=0, ~end=2)
+          let str =
+            strArr->Array.joinWithUnsafe("")->String.split(".")->Array.slice(~start=0, ~end=2)
           let result = if removeLeadingZeroes {
-            str[0] = str[0]->Option.getWithDefault("")->String.replaceRegExp(%re("/\b0+/g"), "")
-            str[0] =
-              str[0]->Option.getWithDefault("") === "" ? "0" : str[0]->Option.getWithDefault("")
+            str[0] = str[0]->Option.getOr("")->String.replaceRegExp(%re("/\b0+/g"), "")
+            str[0] = str[0]->Option.getOr("") === "" ? "0" : str[0]->Option.getOr("")
             str->Array.joinWith(".")
           } else {
             str->Array.joinWith(".")
@@ -101,7 +101,7 @@ let make = (
         ->Js.Json.decodeString
         ->Option.flatMap(Belt.Float.fromString)
         ->Belt.Option.map(Js.Json.number)
-        ->Option.getWithDefault(Js.Json.null)
+        ->Option.getOr(Js.Json.null)
       if input.value === numericPrevLocalValue {
         prevLocalStr
       } else {
diff --git a/src/components/form/TextInput.res b/src/components/form/TextInput.res
index bee08fc34..7471fd75b 100644
--- a/src/components/form/TextInput.res
+++ b/src/components/form/TextInput.res
@@ -70,7 +70,7 @@ let make = (
         let size =
           elem
           ->Webapi.Dom.Element.getAttribute("placeholder")
-          ->Belt.Option.mapWithDefault(length, str => Js.Math.max_int(length, str->String.length))
+          ->Option.mapOr(length, str => Js.Math.max_int(length, str->String.length))
           ->Belt.Int.toString
 
         elem->Webapi.Dom.Element.setAttribute("size", size)
@@ -83,7 +83,7 @@ let make = (
   }, (inputRef.current, input.name))
 
   React.useEffect1(() => {
-    let val = input.value->Js.Json.decodeString->Option.getWithDefault("")
+    let val = input.value->Js.Json.decodeString->Option.getOr("")
 
     if val->String.includes("<script>") || val->String.includes("</script>") {
       showPopUp({
@@ -138,7 +138,7 @@ let make = (
     ? "border-red-500 focus:border-red-500  dark:border-red-500 dark:hover:border-red-500 dark:focus:border-red-500 focus:shadow-text_input_shadow focus:shadow-red-500"
     : "border-jp-gray-lightmode_steelgray focus:border-blue-800 dark:border-jp-gray-960 dark:hover:border-jp-gray-960 dark:focus:border-blue-800 focus:shadow-text_input_shadow focus:shadow-blue-800"
 
-  let dashboardClass = customDashboardClass->Option.getWithDefault("h-10 text-sm font-semibold")
+  let dashboardClass = customDashboardClass->Option.getOr("h-10 text-sm font-semibold")
   let rightPaddingClass = if description !== "" || isInValid {
     "pr-10"
   } else {
diff --git a/src/components/portal/PortalState.res b/src/components/portal/PortalState.res
index aa08194e6..b66d3ca70 100644
--- a/src/components/portal/PortalState.res
+++ b/src/components/portal/PortalState.res
@@ -1,3 +1,3 @@
-let defaultDict: Js.Dict.t<Dom.element> = Dict.make()
+let defaultDict: Dict.t<Dom.element> = Dict.make()
 
 let portalNodes = Recoil.atom(. "portalNodes", defaultDict)
diff --git a/src/components/priority-logics/AddPLGateway.res b/src/components/priority-logics/AddPLGateway.res
index 24696bfaf..36c2cb18a 100644
--- a/src/components/priority-logics/AddPLGateway.res
+++ b/src/components/priority-logics/AddPLGateway.res
@@ -41,7 +41,7 @@ let make = (
   let gatewayName = name => {
     let res =
       connectorList
-      ->Option.getWithDefault([Dict.make()->ConnectorTableUtils.getProcessorPayloadType])
+      ->Option.getOr([Dict.make()->ConnectorTableUtils.getProcessorPayloadType])
       ->ConnectorTableUtils.getConnectorNameViaId(name)
     res.connector_name
   }
@@ -59,7 +59,7 @@ let make = (
   let selectedOptions =
     gateWaysInput.value
     ->Js.Json.decodeArray
-    ->Option.getWithDefault([])
+    ->Option.getOr([])
     ->Belt.Array.keepMap(item =>
       item
       ->Js.Json.decodeObject
@@ -185,7 +185,7 @@ let make = (
                         name=key
                         onChange={ev => {
                           let val = ReactEvent.Form.target(ev)["value"]
-                          updatePercentage(item, val->Belt.Int.fromString->Option.getWithDefault(0))
+                          updatePercentage(item, val->Belt.Int.fromString->Option.getOr(0))
                         }}
                         value={item.split->Belt.Int.toString}
                         type_="text"
diff --git a/src/components/tooltip/ToolTip.res b/src/components/tooltip/ToolTip.res
index 9c67b4689..274b5aea2 100644
--- a/src/components/tooltip/ToolTip.res
+++ b/src/components/tooltip/ToolTip.res
@@ -234,7 +234,7 @@ module TooltipWrapper = {
         ~tooltipArrowSize,
         ~componentWidth,
         ~componentHeight,
-        ~position=toolTipPosition->Option.getWithDefault(defaultPosition),
+        ~position=toolTipPosition->Option.getOr(defaultPosition),
       )
     } else {
       getToolTipAbsoluteStyling(
@@ -244,7 +244,7 @@ module TooltipWrapper = {
         ~tooltipWidth,
         ~componentWidth,
         ~componentHeight,
-        ~position=toolTipPosition->Option.getWithDefault(defaultPosition),
+        ~position=toolTipPosition->Option.getOr(defaultPosition),
       )
     }
 
@@ -656,7 +656,7 @@ let make = (
     ref.current
     ->Js.Nullable.toOption
     ->Belt.Option.map(getBoundingClientRect)
-    ->Belt.Option.mapWithDefault(0, getter)
+    ->Option.mapOr(0, getter)
   }
 
   let tooltipWidth = toolTipRef->getBoundingRectInfo(val => val.width)
diff --git a/src/context/ChartContext.res b/src/context/ChartContext.res
index 5dca95021..b4edf7780 100644
--- a/src/context/ChartContext.res
+++ b/src/context/ChartContext.res
@@ -47,12 +47,8 @@ let getGranularityMapper = (granularity: string) => {
     (1, "hour")
   } else {
     (
-      granularityArr
-      ->Belt.Array.get(0)
-      ->Option.getWithDefault("1")
-      ->Belt.Int.fromString
-      ->Option.getWithDefault(1),
-      granularityArr->Belt.Array.get(1)->Option.getWithDefault("week"),
+      granularityArr->Array.get(0)->Option.getOr("1")->Belt.Int.fromString->Option.getOr(1),
+      granularityArr->Array.get(1)->Option.getOr("week"),
     )
   }
 }
@@ -70,7 +66,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
   let (activeTab, activeTabStr) = React.useMemo1(() => {
     let activeTabOptionalArr =
       getAllFilter->getOptionStrArrayFromDict(`${chartEntity.moduleName}.tabName`)
-    (activeTabOptionalArr, activeTabOptionalArr->Option.getWithDefault([])->Array.joinWith(","))
+    (activeTabOptionalArr, activeTabOptionalArr->Option.getOr([])->Array.joinWith(","))
   }, [getAllFilter])
 
   let parentToken = AuthWrapperUtils.useTokenParent(Original)
@@ -126,7 +122,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
     ->Belt.Array.keepMap(item => {
       let (key, value) = item
       let keyArr = key->String.split(".")
-      let prefix = keyArr->Belt.Array.get(0)->Option.getWithDefault("")
+      let prefix = keyArr->Array.get(0)->Option.getOr("")
       if prefix === chartId && prefix !== "" {
         None
       } else {
@@ -169,8 +165,8 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
     ->Belt.Array.keepMap(item => {
       let (key, value) = item
       let keyArr = key->String.split(".")
-      let prefix = keyArr->Belt.Array.get(0)->Option.getWithDefault("")
-      let fitlerName = keyArr->Belt.Array.get(1)->Option.getWithDefault("")
+      let prefix = keyArr->Array.get(0)->Option.getOr("")
+      let fitlerName = keyArr->Array.get(1)->Option.getOr("")
 
       // when chart id is not there then there won't be any prefix so the prefix will the filter name
       if chartId === "" {
@@ -214,9 +210,9 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
 
   React.useEffect2(() => {
     setGranularity(prev => {
-      current_granularity->Array.includes(prev->Option.getWithDefault(""))
+      current_granularity->Array.includes(prev->Option.getOr(""))
         ? prev
-        : current_granularity->Belt.Array.get(0)
+        : current_granularity->Array.get(0)
     })
     None
   }, (startTimeFromUrl, endTimeFromUrl))
@@ -235,17 +231,14 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
     let chartType =
       getChartCompFilters->getString(
         "chartType",
-        chartEntity.chartTypes
-        ->Belt.Array.get(0)
-        ->Option.getWithDefault(Line)
-        ->DynamicChart.chartMapper,
+        chartEntity.chartTypes->Array.get(0)->Option.getOr(Line)->DynamicChart.chartMapper,
       )
     if (
       startTimeFromUrl !== "" &&
       endTimeFromUrl !== "" &&
       parentToken->Option.isSome &&
       (granularity->Option.isSome || chartType !== "Line Chart") &&
-      current_granularity->Array.includes(granularity->Option.getWithDefault(""))
+      current_granularity->Array.includes(granularity->Option.getOr(""))
     ) {
       setTopChartFetchWithCurrentDependecyChange(_ => false)
     }
@@ -254,7 +247,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
   }, (
     parentToken,
     current_granularity->Array.joinWith("-") ++
-    granularity->Option.getWithDefault("") ++
+    granularity->Option.getOr("") ++
     cardinalityFromUrl ++
     chartTopMetricFromUrl ++
     customFilter ++
@@ -269,17 +262,14 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
     let chartType =
       getChartCompFilters->getString(
         "chartType",
-        chartEntity.chartTypes
-        ->Belt.Array.get(0)
-        ->Option.getWithDefault(Line)
-        ->DynamicChart.chartMapper,
+        chartEntity.chartTypes->Array.get(0)->Option.getOr(Line)->DynamicChart.chartMapper,
       )
     if (
       startTimeFromUrl !== "" &&
       endTimeFromUrl !== "" &&
       parentToken->Option.isSome &&
       (granularity->Option.isSome || chartType !== "Line Chart") &&
-      current_granularity->Array.includes(granularity->Option.getWithDefault(""))
+      current_granularity->Array.includes(granularity->Option.getOr(""))
     ) {
       setBottomChartFetchWithCurrentDependecyChange(_ => false)
     }
@@ -288,7 +278,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
   }, (
     parentToken,
     current_granularity->Array.joinWith("-") ++
-    granularity->Option.getWithDefault("") ++
+    granularity->Option.getOr("") ++
     chartBottomMetricFromUrl ++
     startTimeFromUrl ++
     cardinalityFromUrl ++
@@ -304,7 +294,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
       setTopChartFetchWithCurrentDependecyChange(_ => true)
 
       switch chartEntity.uriConfig->Array.find(item => {
-        let metrics = switch item.metrics->Belt.Array.get(0) {
+        let metrics = switch item.metrics->Array.get(0) {
         | Some(metrics) => metrics.metric_label
         | None => ""
         }
@@ -318,7 +308,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
             ("start", startTimeFromUrl->Js.Json.string),
             ("end", endTimeFromUrl->Js.Json.string),
           ])
-          let (metric, secondaryMetrics) = switch value.metrics->Belt.Array.get(0) {
+          let (metric, secondaryMetrics) = switch value.metrics->Array.get(0) {
           | Some(metrics) => (metrics.metric_name_db, metrics.secondryMetrics)
           | None => ("", None)
           }
@@ -329,7 +319,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
           | None => [metric]
           }
 
-          let granularityConfig = granularity->Option.getWithDefault("")->getGranularityMapper
+          let granularityConfig = granularity->Option.getOr("")->getGranularityMapper
 
           metricsArr
           ->Array.map(metric => {
@@ -346,7 +336,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
                 ~customFilterValue=customFilter,
                 ~sortingParams?,
                 ~timeCol,
-                ~domain=value.domain->Option.getWithDefault(""),
+                ~domain=value.domain->Option.getOr(""),
                 (),
               )->Js.Json.stringify,
               ~authToken=parentToken,
@@ -387,7 +377,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
                 _ => Loaded(
                   dataMerge(
                     ~dataArr=metricsArr->Array.map(item => item->getArrayFromJson([])),
-                    ~dictKey=Belt.Array.concat(activeTab->Option.getWithDefault([]), ["time"]),
+                    ~dictKey=Belt.Array.concat(activeTab->Option.getOr([]), ["time"]),
                   )->Js.Json.array,
                 ),
               ),
@@ -406,7 +396,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
               ~filterValueFromUrl?,
               ~customFilterValue=customFilter,
               ~sortingParams?,
-              ~domain=value.domain->Option.getWithDefault(""),
+              ~domain=value.domain->Option.getOr(""),
               (),
             )->Js.Json.stringify,
             ~authToken=parentToken,
@@ -434,7 +424,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
     if !bottomChartFetchWithCurrentDependecyChange && bottomChartVisible {
       setBottomChartFetchWithCurrentDependecyChange(_ => true)
       switch chartEntity.uriConfig->Array.find(item => {
-        let metrics = switch item.metrics->Belt.Array.get(0) {
+        let metrics = switch item.metrics->Array.get(0) {
         | Some(metrics) => metrics.metric_label
         | None => ""
         }
@@ -449,7 +439,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
             ("start", startTimeFromUrl->Js.Json.string),
             ("end", endTimeFromUrl->Js.Json.string),
           ])
-          let (metric, secondaryMetrics) = switch value.metrics->Belt.Array.get(0) {
+          let (metric, secondaryMetrics) = switch value.metrics->Array.get(0) {
           | Some(metrics) => (metrics.metric_name_db, metrics.secondryMetrics)
           | None => ("", None)
           }
@@ -459,7 +449,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
           }
           let timeCol = value.timeCol
 
-          let granularityConfig = granularity->Option.getWithDefault("")->getGranularityMapper
+          let granularityConfig = granularity->Option.getOr("")->getGranularityMapper
           metricsArr
           ->Array.map(metric => {
             fetchApi(
@@ -475,7 +465,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
                 ~customFilterValue=customFilter,
                 ~sortingParams?,
                 ~timeCol=value.timeCol,
-                ~domain=value.domain->Option.getWithDefault(""),
+                ~domain=value.domain->Option.getOr(""),
                 (),
               )->Js.Json.stringify,
               ~authToken=parentToken,
@@ -514,7 +504,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
             let data =
               dataMerge(
                 ~dataArr=metricsArr->Array.map(item => item->getArrayFromJson([])),
-                ~dictKey=Belt.Array.concat(activeTab->Option.getWithDefault([]), ["time"]),
+                ~dictKey=Belt.Array.concat(activeTab->Option.getOr([]), ["time"]),
               )->Js.Json.array
 
             resolve(setBottomChartData(_ => Loaded(data)))
@@ -532,7 +522,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
               ~filterValueFromUrl?,
               ~customFilterValue=customFilter,
               ~sortingParams?,
-              ~domain=value.domain->Option.getWithDefault(""),
+              ~domain=value.domain->Option.getOr(""),
               (),
             )->Js.Json.stringify,
             ~authToken=parentToken,
@@ -637,7 +627,7 @@ module SDKAnalyticsChartContext = {
       ->Belt.Array.keepMap(item => {
         let (key, value) = item
         let keyArr = key->String.split(".")
-        let prefix = keyArr->Belt.Array.get(0)->Option.getWithDefault("")
+        let prefix = keyArr->Array.get(0)->Option.getOr("")
         if prefix === chartId && prefix !== "" {
           None
         } else {
@@ -680,8 +670,8 @@ module SDKAnalyticsChartContext = {
       ->Belt.Array.keepMap(item => {
         let (key, value) = item
         let keyArr = key->String.split(".")
-        let prefix = keyArr->Belt.Array.get(0)->Option.getWithDefault("")
-        let fitlerName = keyArr->Belt.Array.get(1)->Option.getWithDefault("")
+        let prefix = keyArr->Array.get(0)->Option.getOr("")
+        let fitlerName = keyArr->Array.get(1)->Option.getOr("")
 
         // when chart id is not there then there won't be any prefix so the prefix will the filter name
         if chartId === "" {
@@ -716,7 +706,7 @@ module SDKAnalyticsChartContext = {
     }
     let differentTimeValues = Belt.Array.concat(
       [currentTimeRanges],
-      differentTimeValues->Option.getWithDefault([]),
+      differentTimeValues->Option.getOr([]),
     )
     let cardinalityFromUrl = getChartCompFilters->getString("cardinality", "TOP_5")
     let _chartTopMetricFromUrl = getChartCompFilters->getString("chartTopMetric", currentTopMatrix)
@@ -732,9 +722,9 @@ module SDKAnalyticsChartContext = {
 
     React.useEffect2(() => {
       setGranularity(prev => {
-        current_granularity->Array.includes(prev->Option.getWithDefault(""))
+        current_granularity->Array.includes(prev->Option.getOr(""))
           ? prev
-          : current_granularity->Belt.Array.get(0)
+          : current_granularity->Array.get(0)
       })
       None
     }, (startTimeFromUrl, endTimeFromUrl))
@@ -748,17 +738,14 @@ module SDKAnalyticsChartContext = {
       let chartType =
         getChartCompFilters->getString(
           "chartType",
-          chartEntity.chartTypes
-          ->Belt.Array.get(0)
-          ->Option.getWithDefault(Line)
-          ->DynamicChart.chartMapper,
+          chartEntity.chartTypes->Array.get(0)->Option.getOr(Line)->DynamicChart.chartMapper,
         )
       if (
         startTimeFromUrl !== "" &&
         endTimeFromUrl !== "" &&
         parentToken->Option.isSome &&
         (granularity->Option.isSome || chartType !== "Line Chart") &&
-        current_granularity->Array.includes(granularity->Option.getWithDefault(""))
+        current_granularity->Array.includes(granularity->Option.getOr(""))
       ) {
         setTopChartFetchWithCurrentDependecyChange(_ => false)
       }
@@ -767,12 +754,12 @@ module SDKAnalyticsChartContext = {
     }, (
       parentToken,
       current_granularity->Array.joinWith("-") ++
-      granularity->Option.getWithDefault("") ++
+      granularity->Option.getOr("") ++
       cardinalityFromUrl ++
       selectedTrends->Array.joinWith(",") ++
       customFilter ++
       startTimeFromUrl ++
-      segmentValue->Option.getWithDefault([])->Array.joinWith(",") ++
+      segmentValue->Option.getOr([])->Array.joinWith(",") ++
       endTimeFromUrl,
       filterValueFromUrl,
       differentTimeValues->Array.map(item => `${item.fromTime}${item.toTime}`)->Array.joinWith(","),
@@ -783,7 +770,7 @@ module SDKAnalyticsChartContext = {
         setTopChartFetchWithCurrentDependecyChange(_ => true)
         let metricsSDK = "total_volume"
         switch chartEntity.uriConfig->Array.find(item => {
-          let metrics = switch item.metrics->Belt.Array.get(0) {
+          let metrics = switch item.metrics->Array.get(0) {
           | Some(metrics) => metrics.metric_name_db
           | None => ""
           }
@@ -795,13 +782,13 @@ module SDKAnalyticsChartContext = {
             setTopChartData(_ => Loading)
             let cardinality = cardinalityMapperToNumber(Some(cardinalityFromUrl))
 
-            let metric = switch value.metrics->Belt.Array.get(0) {
+            let metric = switch value.metrics->Array.get(0) {
             | Some(metrics) => metrics.metric_name_db
             | None => ""
             }
 
-            let granularityConfig = granularity->Option.getWithDefault("")->getGranularityMapper
-            switch differentTimeValues->Belt.Array.get(0) {
+            let granularityConfig = granularity->Option.getOr("")->getGranularityMapper
+            switch differentTimeValues->Array.get(0) {
             | Some(timeObjOrig) => {
                 let timeObj = Dict.fromArray([
                   ("start", timeObjOrig.fromTime->Js.Json.string),
@@ -819,7 +806,7 @@ module SDKAnalyticsChartContext = {
                     ~filterValueFromUrl?,
                     ~customFilterValue=customFilter,
                     ~timeCol,
-                    ~domain=value.domain->Option.getWithDefault(""),
+                    ~domain=value.domain->Option.getOr(""),
                     (),
                   )->Js.Json.stringify,
                   ~authToken=parentToken,
@@ -836,8 +823,8 @@ module SDKAnalyticsChartContext = {
                       ->Belt.Array.keepMap(
                         dictOrigItem => {
                           let (key, value) = dictOrigItem
-                          segmentValue->Option.getWithDefault([])->Array.includes(key)
-                            ? Some(value->Js.Json.decodeString->Option.getWithDefault(""))
+                          segmentValue->Option.getOr([])->Array.includes(key)
+                            ? Some(value->Js.Json.decodeString->Option.getOr(""))
                             : None
                         },
                       )
@@ -860,7 +847,7 @@ module SDKAnalyticsChartContext = {
                           ~customFilterValue=customFilter,
                           ~timeCol,
                           ~jsonFormattedFilter=item->filterMapper,
-                          ~domain=value.domain->Option.getWithDefault(""),
+                          ~domain=value.domain->Option.getOr(""),
                           (),
                         )->Js.Json.stringify,
                         ~authToken=parentToken,
@@ -884,12 +871,8 @@ module SDKAnalyticsChartContext = {
                                     ->Belt.Array.keepMap(
                                       origDictArrItem => {
                                         let (key, value) = origDictArrItem
-                                        segmentValue->Option.getWithDefault([])->Array.includes(key)
-                                          ? Some(
-                                              value
-                                              ->Js.Json.decodeString
-                                              ->Option.getWithDefault(""),
-                                            )
+                                        segmentValue->Option.getOr([])->Array.includes(key)
+                                          ? Some(value->Js.Json.decodeString->Option.getOr(""))
                                           : None
                                       },
                                     )
@@ -958,7 +941,7 @@ module SDKAnalyticsChartContext = {
     //     setBottomChartFetchWithCurrentDependecyChange(_ => true)
     //     let metricsSDK = "total_volume"
     //     switch chartEntity.uriConfig->Array.find(item => {
-    //       let metrics = switch item.metrics->Belt.Array.get(0) {
+    //       let metrics = switch item.metrics->Array.get(0) {
     //       | Some(metrics) => metrics.metric_name_db
     //       | None => ""
     //       }
@@ -968,13 +951,13 @@ module SDKAnalyticsChartContext = {
     //         setBottomChartDataLegendData(_ => Loading)
     //         setBottomChartData(_ => Loading)
     //         let cardinality = cardinalityMapperToNumber(Some(cardinalityFromUrl))
-    //         let metric = switch value.metrics->Belt.Array.get(0) {
+    //         let metric = switch value.metrics->Array.get(0) {
     //         | Some(metrics) => metrics.metric_name_db
     //         | None => ""
     //         }
 
     //         let granularityConfig =
-    //           granularity->Option.getWithDefault("")->getGranularityMapper
+    //           granularity->Option.getOr("")->getGranularityMapper
 
     //         differentTimeValues
     //         ->Array.map(timeObjOrig => {
@@ -995,7 +978,7 @@ module SDKAnalyticsChartContext = {
     //                   ~cardinality,
     //                   ~customFilterValue=customFilter,
     //                   ~jsonFormattedFilter=item->filterMapper,
-    //                   ~domain=value.domain->Option.getWithDefault(""),
+    //                   ~domain=value.domain->Option.getOr(""),
     //                   (),
     //                 )->Js.Json.stringify,
     //                 ~authToken=parentToken,
diff --git a/src/context/DataTableFilterOpenContext.res b/src/context/DataTableFilterOpenContext.res
index aebd9a6d2..d1a884faf 100644
--- a/src/context/DataTableFilterOpenContext.res
+++ b/src/context/DataTableFilterOpenContext.res
@@ -1,4 +1,4 @@
-let defaultValue: Js.Dict.t<bool> = Dict.make()
+let defaultValue: Dict.t<bool> = Dict.make()
 let setDefaultValue: (Js.Dict.key, bool) => unit = (_key, _b) => ()
 
 let filterOpenContext = React.createContext((defaultValue, setDefaultValue))
diff --git a/src/context/DatatableContext.res b/src/context/DatatableContext.res
index f17ed6599..d89a7b45c 100644
--- a/src/context/DatatableContext.res
+++ b/src/context/DatatableContext.res
@@ -1,4 +1,4 @@
-let defaultValue: Js.Dict.t<array<Js.Json.t>> = Dict.make()
+let defaultValue: Dict.t<array<Js.Json.t>> = Dict.make()
 let setDefaultValue: (Js.Dict.key, array<Js.Json.t>) => unit = (_string, _arr) => ()
 
 let datatableContext = React.createContext((defaultValue, setDefaultValue))
diff --git a/src/context/SingleStatContext.res b/src/context/SingleStatContext.res
index d80a41b4c..60452f98f 100644
--- a/src/context/SingleStatContext.res
+++ b/src/context/SingleStatContext.res
@@ -64,7 +64,7 @@ let make = (
     ->Belt.Array.keepMap(item => {
       let (key, value) = item
       let keyArr = key->String.split(".")
-      let prefix = keyArr->Belt.Array.get(0)->Option.getWithDefault("")
+      let prefix = keyArr->Array.get(0)->Option.getOr("")
       if prefix === moduleName && prefix !== "" {
         None
       } else {
@@ -77,7 +77,7 @@ let make = (
   let (topFiltersToSearchParam, customFilter, modeValue) = React.useMemo1(() => {
     let modeValue = Some(getTopLevelSingleStatFilter->LogicUtils.getString(modeKey, ""))
     let allFilterKeys = Array.concat(
-      [startTimeFilterKey, endTimeFilterKey, modeValue->Option.getWithDefault("")],
+      [startTimeFilterKey, endTimeFilterKey, modeValue->Option.getOr("")],
       filterKeys,
     )
     let filterSearchParam =
@@ -169,12 +169,12 @@ let make = (
       )
       let filterConfigCurrent = {
         source,
-        modeValue: modeValue->Option.getWithDefault(""),
+        modeValue: modeValue->Option.getOr(""),
         filterValues: ?filterValueFromUrl,
         startTime: startTimeFromUrl,
         endTime: endTimeFromUrl,
         customFilterValue: customFilter, // will add later
-        granularity: ?granularity->Belt.Array.get(0),
+        granularity: ?granularity->Array.get(0),
       }
 
       let (hStartTime, hEndTime) = AnalyticsNewUtils.calculateHistoricTime(
@@ -274,11 +274,7 @@ let make = (
                     Dict.set(
                       prevDict,
                       updatedMetrics,
-                      Loaded(
-                        jsonObj
-                        ->Belt.Array.get(0)
-                        ->Option.getWithDefault(Js.Json.object_(Dict.make())),
-                      ),
+                      Loaded(jsonObj->Array.get(0)->Option.getOr(Js.Json.object_(Dict.make()))),
                     )
                     prevDict
                   },
@@ -327,11 +323,7 @@ let make = (
                   Dict.set(
                     prevDict,
                     updatedMetrics,
-                    Loaded(
-                      jsonObj
-                      ->Belt.Array.get(0)
-                      ->Option.getWithDefault(Js.Json.object_(Dict.make())),
-                    ),
+                    Loaded(jsonObj->Array.get(0)->Option.getOr(Js.Json.object_(Dict.make()))),
                   )
                   prevDict
                 },
@@ -420,9 +412,9 @@ let make = (
         ->Promise.all
         ->Promise.thenResolve(
           value => {
-            let ssH = value->Belt.Array.get(0)->Option.getWithDefault(LoadedError)
-            let ssT = value->Belt.Array.get(1)->Option.getWithDefault(LoadedError)
-            let ssD = value->Belt.Array.get(2)->Option.getWithDefault(LoadedError)
+            let ssH = value->Array.get(0)->Option.getOr(LoadedError)
+            let ssT = value->Array.get(1)->Option.getOr(LoadedError)
+            let ssD = value->Array.get(2)->Option.getOr(LoadedError)
             let isLoaded = val => {
               switch val {
               | Loaded(_) => true
@@ -444,9 +436,7 @@ let make = (
                 individualTime->Dict.set(
                   index->Belt.Int.toString,
                   Js.Date.now() -.
-                  individualTime
-                  ->Dict.get(index->Belt.Int.toString)
-                  ->Option.getWithDefault(Js.Date.now()),
+                  individualTime->Dict.get(index->Belt.Int.toString)->Option.getOr(Js.Date.now()),
                 )
                 individualTime
               },
diff --git a/src/context/ThemeUtils.res b/src/context/ThemeUtils.res
index 9987411c0..dfbc83468 100644
--- a/src/context/ThemeUtils.res
+++ b/src/context/ThemeUtils.res
@@ -6,9 +6,7 @@ let useThemeFromEvent = () => {
       if eventName === "AuthenticationDetails" {
         let payloadDict = dict->Dict.get("payload")->Option.flatMap(Js.Json.decodeObject)
         let theme =
-          payloadDict->Belt.Option.mapWithDefault("", finalDict =>
-            LogicUtils.getString(finalDict, "theme", "")
-          )
+          payloadDict->Option.mapOr("", finalDict => LogicUtils.getString(finalDict, "theme", ""))
         setEventTheme(_ => Some(theme))
       } else if eventName == "themeToggle" {
         let theme = LogicUtils.getString(dict, "payload", "")
diff --git a/src/context/TokenContextProvider.res b/src/context/TokenContextProvider.res
index 3a25ab1b1..e6781f29d 100644
--- a/src/context/TokenContextProvider.res
+++ b/src/context/TokenContextProvider.res
@@ -1,11 +1,11 @@
 let defaultTokenSetter = (_: option<string> => option<string>) => ()
-let defaultDictSetter = (_: Js.Dict.t<Js.Json.t> => Js.Dict.t<Js.Json.t>) => ()
+let defaultDictSetter = (_: Dict.t<Js.Json.t> => Dict.t<Js.Json.t>) => ()
 
 type tokenContextObjectType = {
-  token: option<Js.String2.t>,
+  token: option<string>,
   setToken: (option<string> => option<string>) => unit,
-  tokenDetailsDict: Js.Dict.t<Js.Json.t>,
-  setTokenDetailsDict: (Js.Dict.t<Js.Json.t> => Js.Dict.t<Js.Json.t>) => unit,
+  tokenDetailsDict: Dict.t<Js.Json.t>,
+  setTokenDetailsDict: (Dict.t<Js.Json.t> => Dict.t<Js.Json.t>) => unit,
   parentAuthInfo: option<HyperSwitchAuthTypes.authInfo>,
 }
 
@@ -32,7 +32,7 @@ let make = (~children) => {
   let tokenContextObjext = React.useMemo4(() => {
     let parentAuthInfo = HyperSwitchAuthTypes.getAuthInfo(
       tokenDetailsDict->LogicUtils.getJsonObjectFromDict("tokenDict"),
-      token->Option.getWithDefault(""),
+      token->Option.getOr(""),
     )
 
     {
diff --git a/src/context/UserPrefContext.res b/src/context/UserPrefContext.res
index 7321475b2..ad1058602 100644
--- a/src/context/UserPrefContext.res
+++ b/src/context/UserPrefContext.res
@@ -2,13 +2,13 @@
 // 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 dictUserPrefToStr: Js.Dict.t<userPref> => string = "%identity"
-let userPrefSetter: (Js.Dict.t<userPref> => Js.Dict.t<userPref>) => unit = _ => ()
-let defaultUserPref: Js.Dict.t<userPref> = Dict.make()
+external dictUserPrefToStr: Dict.t<userPref> => string = "%identity"
+let userPrefSetter: (Dict.t<userPref> => Dict.t<userPref>) => unit = _ => ()
+let defaultUserPref: Dict.t<userPref> = Dict.make()
 let defaultUserModuleWisePref: moduleVisePref = {}
 type filter = {
-  userPref: Js.Dict.t<userPref>,
-  setUserPref: (Js.Dict.t<userPref> => Js.Dict.t<userPref>) => unit,
+  userPref: Dict.t<userPref>,
+  setUserPref: (Dict.t<userPref> => Dict.t<userPref>) => unit,
   lastVisitedTab: string,
   getSearchParamByLink: string => string,
   addConfig: (string, Js.Json.t) => unit,
@@ -38,7 +38,7 @@ module Provider = {
 @react.component
 let make = (~children) => {
   // this fetch will only happen once after that context will be updated each time when url chnaged and it keep hitting the update api
-  let userPrefInitialVal: Js.Dict.t<userPref> = UserPrefUtils.getUserPref()
+  let userPrefInitialVal: Dict.t<userPref> = UserPrefUtils.getUserPref()
   let (authStatus, _setAuthStatus) = React.useContext(AuthInfoProvider.authStatusContext)
 
   let username = switch authStatus {
@@ -55,10 +55,10 @@ let make = (~children) => {
   React.useEffect2(() => {
     if urlPathConcationation !== "/" {
       setUserPref(prev => {
-        let currentConfig = prev->Dict.get(username)->Option.getWithDefault({})
+        let currentConfig = prev->Dict.get(username)->Option.getOr({})
         let updatedPrev = currentConfig
         let updatedValue = if (
-          urlPathConcationation !== updatedPrev.lastVisitedTab->Option.getWithDefault("")
+          urlPathConcationation !== updatedPrev.lastVisitedTab->Option.getOr("")
         ) {
           {...updatedPrev, lastVisitedTab: urlPathConcationation}
         } else {
@@ -76,16 +76,14 @@ let make = (~children) => {
   // UPDATE THE searchParams IN LAST VISITED TAB
   React.useEffect2(() => {
     setUserPref(prev => {
-      let currentConfig = prev->Dict.get(username)->Option.getWithDefault({})
+      let currentConfig = prev->Dict.get(username)->Option.getOr({})
       let updatedPrev = currentConfig
       let moduleWisePref = switch updatedPrev {
       | {moduleVisePref} => moduleVisePref
       | _ => Dict.make()
       }
       let currentModulePerf =
-        moduleWisePref
-        ->Dict.get(urlPathConcationation)
-        ->Option.getWithDefault(defaultUserModuleWisePref)
+        moduleWisePref->Dict.get(urlPathConcationation)->Option.getOr(defaultUserModuleWisePref)
 
       let filteredUrlSearch =
         url.search
@@ -133,16 +131,14 @@ let make = (~children) => {
 
   let addConfig = (key, value) => {
     setUserPref(prev => {
-      let currentConfig = prev->Dict.get(username)->Option.getWithDefault({})
+      let currentConfig = prev->Dict.get(username)->Option.getOr({})
       let updatedPrev = currentConfig
       let moduleWisePref = switch updatedPrev {
       | {moduleVisePref} => moduleVisePref
       | _ => Dict.make()
       }
       let currentModulePerf =
-        moduleWisePref
-        ->Dict.get(urlPathConcationation)
-        ->Option.getWithDefault(defaultUserModuleWisePref)
+        moduleWisePref->Dict.get(urlPathConcationation)->Option.getOr(defaultUserModuleWisePref)
       let moduleConfig = switch currentModulePerf {
       | {moduleConfig} => moduleConfig
       | _ => Dict.make()
@@ -161,13 +157,13 @@ let make = (~children) => {
   }
 
   let getConfig = key => {
-    let currentConfig = userPref->Dict.get(username)->Option.getWithDefault({})
+    let currentConfig = userPref->Dict.get(username)->Option.getOr({})
     let updatedPrev = currentConfig
     switch updatedPrev {
     | {moduleVisePref} =>
       switch moduleVisePref
       ->Dict.get(urlPathConcationation)
-      ->Option.getWithDefault(defaultUserModuleWisePref) {
+      ->Option.getOr(defaultUserModuleWisePref) {
       | {moduleConfig} => moduleConfig->Dict.get(key)
       | _ => None
       }
@@ -187,7 +183,7 @@ let make = (~children) => {
     ->Js.Json.stringify
 
   let value = React.useMemo4(() => {
-    let currentConfig = userPref->Dict.get(username)->Option.getWithDefault({})
+    let currentConfig = userPref->Dict.get(username)->Option.getOr({})
     let updatedPrev = currentConfig
     let lastVisitedTab = switch updatedPrev {
     | {lastVisitedTab} => lastVisitedTab
diff --git a/src/entities/EntityType.res b/src/entities/EntityType.res
index 4fc35d4ab..1a2471741 100644
--- a/src/entities/EntityType.res
+++ b/src/entities/EntityType.res
@@ -29,7 +29,7 @@ type entityType<'colType, 't> = {
   getSummary: Js.Json.t => summary,
   getShowLink: option<'t => string>,
   defaultFilters: Js.Json.t,
-  headers: Js.Dict.t<string>,
+  headers: Dict.t<string>,
   initialFilters: array<initialFilters<'t>>,
   options: array<optionType<'t>>,
   getDetailsUri: string => string,
@@ -43,8 +43,8 @@ type entityType<'colType, 't> = {
   requiredSearchFieldsList: array<string>,
   detailsKey: string,
   popupFilterFields: array<optionType<'t>>,
-  dateRangeFilterDict: Js.Dict.t<Js.Json.t>,
-  searchValueDict: option<Js.Dict.t<string>>,
+  dateRangeFilterDict: Dict.t<Js.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,
 }
diff --git a/src/entities/analytics/AnalyticsUtils.res b/src/entities/analytics/AnalyticsUtils.res
index da73e5ae2..cd6b5ba00 100644
--- a/src/entities/analytics/AnalyticsUtils.res
+++ b/src/entities/analytics/AnalyticsUtils.res
@@ -100,7 +100,7 @@ type newApiBodyEntity = {
   granularityConfig?: (int, string),
   cardinality?: float,
   filterValueFromUrl?: Js.Json.t,
-  customFilterValue?: Js.String2.t,
+  customFilterValue?: string,
   jsonFormattedFilter?: Js.Json.t,
   cardinalitySortDims?: string,
   domain: string,
@@ -377,7 +377,7 @@ let deltaDate = (~fromTime: string, ~_toTime: string, ~typeTime: string) => {
   }
 }
 let generateDateArray = (~startTime, ~endTime, ~deltaPrefixArr) => {
-  let dateArray = Belt.Array.map(deltaPrefixArr, x =>
+  let dateArray = Array.map(deltaPrefixArr, x =>
     deltaDate(~fromTime=startTime, ~_toTime=endTime, ~typeTime=x)
   )
   dateArray
@@ -449,8 +449,8 @@ let generatedeltaTablePayload = (
   let dictOfDates = Belt.Array.concatMany(deltaDateArr)
   let tablePayload = Belt.Array.zipBy(dictOfDates, deltaPrefixArr, (x, y) =>
     generatePayload(
-      ~startTime=x->Dict.get("fromTime")->Option.getWithDefault(""),
-      ~endTime=x->Dict.get("toTime")->Option.getWithDefault(""),
+      ~startTime=x->Dict.get("fromTime")->Option.getOr(""),
+      ~endTime=x->Dict.get("toTime")->Option.getOr(""),
       ~metrics,
       ~groupByNames,
       ~mode,
@@ -565,7 +565,7 @@ let generateTablePayload = (
 
   let distributionPayload = switch distributionArray {
   | Some(distributionArray) =>
-    distributionArray->Belt.Array.map(arr =>
+    distributionArray->Array.map(arr =>
       getFilterRequestBody(
         ~groupByNames=currenltySelectedTab,
         ~filter=filterValueFromUrl,
@@ -584,7 +584,7 @@ let generateTablePayload = (
 
   let tableBody =
     Belt.Array.concatMany([tableBodyValues, deltaPayload, distributionPayload])
-    ->Belt.Array.map(Js.Json.object_)
+    ->Array.map(Js.Json.object_)
     ->Js.Json.array
   tableBody
 }
@@ -697,21 +697,21 @@ let singlestatDeltaTooltipFormat = (value: float, timeRanges: timeRanges, statTy
 }
 
 let sumOfArr = (arr: array<int>) => {
-  arr->Belt.Array.reduce(0, (acc, value) => acc + value)
+  arr->Array.reduce(0, (acc, value) => acc + value)
 }
 
 let sumOfArrFloat = (arr: array<float>) => {
-  arr->Belt.Array.reduce(0., (acc, value) => acc +. value)
+  arr->Array.reduce(0., (acc, value) => acc +. value)
 }
 
 module NoDataFoundPage = {
   @react.component
   let make = () => {
     let filterOnClick = () => {
-      let element = document->getElementsByClassName("showFilterButton")->Belt.Array.get(0)
+      let element = document->getElementsByClassName("showFilterButton")->Array.get(0)
       switch element {
       | Some(domElement) => {
-          let nodeElement = domElement.childNodes->Belt.Array.get(0)
+          let nodeElement = domElement.childNodes->Array.get(0)
           switch nodeElement {
           | Some(btnElement) => btnElement->DOMUtils.click()
           | None => ()
@@ -723,13 +723,13 @@ module NoDataFoundPage = {
     }
 
     let dateRangeOnClick = () => {
-      let element = document->getElementsByClassName("daterangSelection")->Belt.Array.get(0)
+      let element = document->getElementsByClassName("daterangSelection")->Array.get(0)
       switch element {
       | Some(domElement) => {
-          let nodeElement = domElement.childNodes->Belt.Array.get(0)
+          let nodeElement = domElement.childNodes->Array.get(0)
           switch nodeElement {
           | Some(ele) => {
-              let nodeElement = (ele->toNode).childNodes->Belt.Array.get(0)
+              let nodeElement = (ele->toNode).childNodes->Array.get(0)
               switch nodeElement {
               | Some(btnElement) => btnElement->DOMUtils.click()
               | None => ()
diff --git a/src/entities/analytics/EulerAnalyticsLogUtils.res b/src/entities/analytics/EulerAnalyticsLogUtils.res
index 46f06f4e8..f8ef98bd8 100644
--- a/src/entities/analytics/EulerAnalyticsLogUtils.res
+++ b/src/entities/analytics/EulerAnalyticsLogUtils.res
@@ -83,7 +83,7 @@ let useAddLogsAroundFetchNew = () => {
     ->thenResolve(text => {
       // will add the check for n line saperated is the length is 0 then no data
       // if (
-      //   Belt.Array.length(
+      //   Array.length(
       //     json
       //     ->LogicUtils.getDictFromJsonObject
       //     ->LogicUtils.getJsonObjectFromDict("queryData")
diff --git a/src/entryPoints/hyperswitch/HyperSwitchApp.res b/src/entryPoints/hyperswitch/HyperSwitchApp.res
index 929e51945..6c1c7834e 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.getWithDefault(Js.Json.null)
+        ->Option.getOr(Js.Json.null)
 
       if productionAgreementResponse->getDictFromJsonObject->getBool("ProductionAgreement", false) {
         setDashboardPageState(_ => #PROD_ONBOARDING)
@@ -75,13 +75,13 @@ let make = () => {
   let fetchInitialEnums = async () => {
     try {
       let response = await getEnumDetails(QuickStartUtils.quickStartEnumIntialArray)
-      let responseValueDict = response->Js.Nullable.toOption->Option.getWithDefault(Dict.make())
+      let responseValueDict = response->Js.Nullable.toOption->Option.getOr(Dict.make())
       let pageStateToSet = responseValueDict->QuickStartUtils.getCurrentStep
       setQuickStartPageState(_ => pageStateToSet->QuickStartUtils.enumToVarinatMapper)
       responseValueDict
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
         Js.Exn.raiseError(err)
       }
     }
@@ -94,13 +94,13 @@ let make = () => {
       let permissionsValue =
         response
         ->getArrayFromJson([])
-        ->Array.map(ele => ele->Js.Json.decodeString->Option.getWithDefault(""))
+        ->Array.map(ele => ele->Js.Json.decodeString->Option.getOr(""))
       let permissionJson =
         permissionsValue->Array.map(ele => ele->mapStringToPermissionType)->getPermissionJson
       setuserPermissionJson(._ => permissionJson)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
         Js.Exn.raiseError(err)
       }
     }
diff --git a/src/entryPoints/hyperswitch/HyperSwitchEntry.res b/src/entryPoints/hyperswitch/HyperSwitchEntry.res
index 147c3e780..1bb406fd4 100644
--- a/src/entryPoints/hyperswitch/HyperSwitchEntry.res
+++ b/src/entryPoints/hyperswitch/HyperSwitchEntry.res
@@ -70,7 +70,7 @@ module HyperSwitchEntryComponent = {
         setScreenState(_ => PageLoaderWrapper.Success)
       } catch {
       | Js.Exn.Error(e) =>
-        let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong!")
+        let err = Js.Exn.message(e)->Option.getOr("Something went wrong!")
         setScreenState(_ => PageLoaderWrapper.Error(err))
       }
     }
diff --git a/src/genericUtils/BreadCrumbNavigation.res b/src/genericUtils/BreadCrumbNavigation.res
index 8ab026299..d7a52e8bb 100644
--- a/src/genericUtils/BreadCrumbNavigation.res
+++ b/src/genericUtils/BreadCrumbNavigation.res
@@ -45,7 +45,7 @@ let make = (
           showPopUp({
             popUpType: (Warning, WithIcon),
             heading: "Heads up!",
-            description: {React.string(crumb.warning->Option.getWithDefault(""))},
+            description: {React.string(crumb.warning->Option.getOr(""))},
             handleConfirm: {
               text: "Yes, go back",
               onClick: {
diff --git a/src/genericUtils/Identity.res b/src/genericUtils/Identity.res
index 160a7a143..d83845aba 100644
--- a/src/genericUtils/Identity.res
+++ b/src/genericUtils/Identity.res
@@ -8,10 +8,10 @@ external genericTypeToJson: 'a => Js.Json.t = "%identity"
 external genericTypeToBool: 'a => bool = "%identity"
 external formReactEventToBool: ReactEvent.Form.t => bool = "%identity"
 external genericObjectOrRecordToJson: {..} => Js.Json.t = "%identity"
-external genericTypeToDictOfJson: 't => Js.Dict.t<Js.Json.t> = "%identity"
+external genericTypeToDictOfJson: 't => Dict.t<Js.Json.t> = "%identity"
 external formReactEventToArrayOfString: ReactEvent.Form.t => array<string> = "%identity"
 external jsonToFormReactEvent: Js.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: Js.Dict.t<Js.Json.t> => RoutingTypes.wasmModule = "%identity"
+external toWasm: Dict.t<Js.Json.t> => RoutingTypes.wasmModule = "%identity"
diff --git a/src/hooks/AuthHooks.res b/src/hooks/AuthHooks.res
index 222c63966..bfbe780d2 100644
--- a/src/hooks/AuthHooks.res
+++ b/src/hooks/AuthHooks.res
@@ -7,7 +7,7 @@ type sessionStorage = {
 
 @val external sessionStorage: sessionStorage = "sessionStorage"
 
-external dictToObj: Js.Dict.t<'a> => {..} = "%identity"
+external dictToObj: Dict.t<'a> => {..} = "%identity"
 @val external atob: string => string = "atob"
 
 let getHeaders = (~uri, ~headers, ()) => {
diff --git a/src/hooks/DateRefreshHooks.res b/src/hooks/DateRefreshHooks.res
index 90af76fa3..5d98af8c8 100644
--- a/src/hooks/DateRefreshHooks.res
+++ b/src/hooks/DateRefreshHooks.res
@@ -13,8 +13,8 @@ let useConstructQueryOnBasisOfOpt = () => {
       try {
         let arrQuery = queryString->String.split("&")
         let tempArr = arrQuery->Array.filter(x => x->String.includes(optKey))
-        let tempArr = tempArr[0]->Option.getWithDefault("")->String.split("=")
-        let optVal = tempArr[1]->Option.getWithDefault("")
+        let tempArr = tempArr[0]->Option.getOr("")->String.split("=")
+        let optVal = tempArr[1]->Option.getOr("")
 
         let customrange: customDateRange = switch optVal {
         | "today" => Today
@@ -25,13 +25,13 @@ let useConstructQueryOnBasisOfOpt = () => {
         | "next_month" => NextMonth
         | st => {
             let arr = st->String.split("_")
-            let _ = arr[0]->Option.getWithDefault("") == "next"
-            let anchor = arr[2]->Option.getWithDefault("")
-            let val = arr[1]->Option.getWithDefault("")
+            let _ = arr[0]->Option.getOr("") == "next"
+            let anchor = arr[2]->Option.getOr("")
+            let val = arr[1]->Option.getOr("")
             switch anchor {
-            | "days" => Day(val->Belt.Float.fromString->Option.getWithDefault(0.0))
-            | "hours" => Hour(val->Belt.Float.fromString->Option.getWithDefault(0.0))
-            | "mins" => Hour(val->Belt.Float.fromString->Option.getWithDefault(0.0) /. 60.0)
+            | "days" => Day(val->Belt.Float.fromString->Option.getOr(0.0))
+            | "hours" => Hour(val->Belt.Float.fromString->Option.getOr(0.0))
+            | "mins" => Hour(val->Belt.Float.fromString->Option.getOr(0.0) /. 60.0)
             | _ => Today
             }
           }
diff --git a/src/hooks/QueryHook.res b/src/hooks/QueryHook.res
index 2daee2b61..b8a19aa45 100644
--- a/src/hooks/QueryHook.res
+++ b/src/hooks/QueryHook.res
@@ -3,10 +3,7 @@ let parseUrlIntoDict = queryUrl => {
   let safeArray = arr->Array.filter(e => e->Array.length == 2)
   let dict: Dict.t<string> = Dict.make()
   safeArray->Array.forEach(e => {
-    dict->Dict.set(
-      e->Belt.Array.get(0)->Option.getWithDefault(""),
-      e->Belt.Array.get(1)->Option.getWithDefault(""),
-    )
+    dict->Dict.set(e->Array.get(0)->Option.getOr(""), e->Array.get(1)->Option.getOr(""))
   })
 
   dict
diff --git a/src/hooks/TimeZoneHook.res b/src/hooks/TimeZoneHook.res
index 9c9543e54..3004cafad 100644
--- a/src/hooks/TimeZoneHook.res
+++ b/src/hooks/TimeZoneHook.res
@@ -64,15 +64,15 @@ let formattedISOString = (dateTimeIsoString: string, format: string) => {
   let tempTimeDate = tempTimeDateString->String.split("T")
   let time = tempTimeDate[1]
   let date = tempTimeDate[0]
-  let dateComponents = date->Option.getWithDefault("")->String.split("-")
-  let timeComponents = time->Option.getWithDefault("")->String.split(":")
+  let dateComponents = date->Option.getOr("")->String.split("-")
+  let timeComponents = time->Option.getOr("")->String.split(":")
   let dateTimeObject: dateTimeFloat = {
-    year: dateComponents[0]->Option.getWithDefault("")->stringToFloat,
-    month: dateComponents[1]->Option.getWithDefault("")->stringToFloat,
-    date: dateComponents[2]->Option.getWithDefault("")->stringToFloat,
-    hour: timeComponents[0]->Option.getWithDefault("")->stringToFloat,
-    minute: timeComponents[1]->Option.getWithDefault("")->stringToFloat,
-    second: timeComponents[2]->Option.getWithDefault("")->stringToFloat,
+    year: dateComponents[0]->Option.getOr("")->stringToFloat,
+    month: dateComponents[1]->Option.getOr("")->stringToFloat,
+    date: dateComponents[2]->Option.getOr("")->stringToFloat,
+    hour: timeComponents[0]->Option.getOr("")->stringToFloat,
+    minute: timeComponents[1]->Option.getOr("")->stringToFloat,
+    second: timeComponents[2]->Option.getOr("")->stringToFloat,
   }
   formattedDateTimeFloat(dateTimeObject, format)
 }
@@ -81,32 +81,30 @@ let en_USStringToDateTimeObject = dateTimeIsoString => {
   let tempTimeDateString = dateTimeIsoString->String.replace(",", "")
 
   let tempTimeDate =
-    tempTimeDateString
-    ->Js.String2.splitByRe(%re("/\s/"))
-    ->Array.map(val => val->Option.getWithDefault(""))
+    tempTimeDateString->Js.String2.splitByRe(%re("/\s/"))->Array.map(val => val->Option.getOr(""))
 
   let time = tempTimeDate[1]
   let date = tempTimeDate[0]
-  let dateComponents = date->Option.getWithDefault("")->String.split("/")
-  let timeComponents = time->Option.getWithDefault("")->String.split(":")
-  let tempHour = switch Belt.Float.fromString(timeComponents[0]->Option.getWithDefault("")) {
+  let dateComponents = date->Option.getOr("")->String.split("/")
+  let timeComponents = time->Option.getOr("")->String.split(":")
+  let tempHour = switch Belt.Float.fromString(timeComponents[0]->Option.getOr("")) {
   | Some(a) => a
   | _ => 0.0
   }
   let fullTempHour =
-    tempTimeDate[2]->Option.getWithDefault("") === "AM"
+    tempTimeDate[2]->Option.getOr("") === "AM"
       ? tempHour === 12.0 ? 0.0 : tempHour
       : tempHour < 12.0
       ? tempHour +. 12.0
       : tempHour
   let hourInString = Belt.Float.toString(fullTempHour)
   let dateTimeObject: dateTimeString = {
-    year: formatter(dateComponents[2]->Option.getWithDefault("")),
-    month: formatter(dateComponents[0]->Option.getWithDefault("")),
-    date: formatter(dateComponents[1]->Option.getWithDefault("")),
+    year: formatter(dateComponents[2]->Option.getOr("")),
+    month: formatter(dateComponents[0]->Option.getOr("")),
+    date: formatter(dateComponents[1]->Option.getOr("")),
     hour: formatter(hourInString),
-    minute: formatter(timeComponents[1]->Option.getWithDefault("")),
-    second: formatter(timeComponents[2]->Option.getWithDefault("")),
+    minute: formatter(timeComponents[1]->Option.getOr("")),
+    second: formatter(timeComponents[2]->Option.getOr("")),
   }
   dateTimeObject
 }
diff --git a/src/hooks/ToastState.res b/src/hooks/ToastState.res
index b689e8d03..2e1ca1a5d 100644
--- a/src/hooks/ToastState.res
+++ b/src/hooks/ToastState.res
@@ -16,7 +16,7 @@ type toastProps = {
 }
 
 let randomString = (length, chars) => {
-  Belt.Array.make(length, 0)->Array.reduce("", (acc, _) => {
+  Array.make(~length, 0)->Array.reduce("", (acc, _) => {
     let charIndex = Js.Math.random_int(0, chars->String.length)
     let newChar = chars->String.charAt(charIndex)
     acc ++ newChar
diff --git a/src/libraries/Clipboard.res b/src/libraries/Clipboard.res
index b763cbfee..313d0a7e5 100644
--- a/src/libraries/Clipboard.res
+++ b/src/libraries/Clipboard.res
@@ -49,7 +49,7 @@ module Copy = {
       ev->ReactEvent.Mouse.stopPropagation
       setTooltipText(_ => "copied")
 
-      writeText([data]->Array.joinWith("\n"))
+      writeText([data]->Array.joinWithUnsafe("\n"))
     }
 
     let iconClass = HSwitchGlobalVars.isHyperSwitchDashboard ? "text-gray-300" : "text-jp-gray-900"
diff --git a/src/libraries/ReactFinalForm.res b/src/libraries/ReactFinalForm.res
index 4db5a71bf..27e212959 100644
--- a/src/libraries/ReactFinalForm.res
+++ b/src/libraries/ReactFinalForm.res
@@ -99,8 +99,8 @@ type formState = {
   initialValues: Js.Json.t,
   errors: Js.Json.t,
   dirtySinceLastSubmit: bool,
-  dirtyFields: Js.Dict.t<bool>,
-  dirtyFieldsSinceLastSubmit: Js.Dict.t<bool>,
+  dirtyFields: Dict.t<bool>,
+  dirtyFieldsSinceLastSubmit: Dict.t<bool>,
   submitSucceeded: bool,
   modifiedSinceLastSubmit: bool,
 }
@@ -158,7 +158,7 @@ module Form = {
     ~mutators: bool=?,
     ~onSubmit: (formValues, formApi) => Promise.t<Js.Nullable.t<Js.Json.t>>,
     ~render: formRenderProps => React.element=?,
-    ~subscription: Js.Dict.t<bool>,
+    ~subscription: Dict.t<bool>,
     ~validate: Js.Json.t => Js.Json.t=?,
     ~validateOnBlur: bool=?,
   ) => React.element = "Form"
diff --git a/src/screens/HyperSwitch/APIUtils/APIUtils.res b/src/screens/HyperSwitch/APIUtils/APIUtils.res
index c73125629..201588178 100644
--- a/src/screens/HyperSwitch/APIUtils/APIUtils.res
+++ b/src/screens/HyperSwitch/APIUtils/APIUtils.res
@@ -82,7 +82,7 @@ let getURL = (
       | Some(key_id) => `api_keys/${merchantId}/${key_id}`
       | None => `api_keys/${merchantId}`
       }
-    | Delete => `api_keys/${merchantId}/${id->Option.getWithDefault("")}`
+    | Delete => `api_keys/${merchantId}/${id->Option.getOr("")}`
     | _ => ""
     }
   | ORDERS =>
@@ -216,14 +216,14 @@ let sessionExpired = ref(false)
 
 let handleLogout = async (
   ~fetchApi as _: (
-    Js.String2.t,
+    string,
     ~bodyStr: string=?,
     ~bodyFormData: option<Fetch.formData>=?,
-    ~headers: Js.Dict.t<Js.String2.t>=?,
-    ~bodyHeader: Js.Dict.t<Js.Json.t>=?,
+    ~headers: Dict.t<string>=?,
+    ~bodyHeader: Dict.t<Js.Json.t>=?,
     ~method_: Fetch.requestMethod,
-    ~authToken: option<Js.String2.t>=?,
-    ~requestId: Js.String.t=?,
+    ~authToken: option<string>=?,
+    ~requestId: string=?,
     ~disableEncryption: bool=?,
     ~storageKey: string=?,
     ~betaEndpointConfig: AuthHooks.betaEndpoint=?,
diff --git a/src/screens/HyperSwitch/Analytics/Analytics.res b/src/screens/HyperSwitch/Analytics/Analytics.res
index d3c37f015..a47c57fba 100644
--- a/src/screens/HyperSwitch/Analytics/Analytics.res
+++ b/src/screens/HyperSwitch/Analytics/Analytics.res
@@ -116,7 +116,7 @@ module TableWrapper = {
     let (_, setDefaultFilter) = Recoil.useRecoilState(AnalyticsHooks.defaultFilter)
     let (showTable, setShowTable) = React.useState(_ => false)
     let {getHeading, allColumns, defaultColumns} = tableEntity
-    let activeTabStr = activeTab->Option.getWithDefault([])->Array.joinWith("-")
+    let activeTabStr = activeTab->Option.getOr([])->Array.joinWith("-")
     let (startTimeFilterKey, endTimeFilterKey) = dateKeys
     let (tableDataLoading, setTableDataLoading) = React.useState(_ => true)
     let (tableData, setTableData) = React.useState(_ => []->Array.map(Js.Nullable.return))
@@ -127,7 +127,7 @@ module TableWrapper = {
       ->Belt.Array.keepMap(item => {
         let (key, value) = item
         let keyArr = key->String.split(".")
-        let prefix = keyArr->Belt.Array.get(0)->Option.getWithDefault("")
+        let prefix = keyArr->Array.get(0)->Option.getOr("")
         if prefix === moduleName && prefix !== "" {
           None
         } else {
@@ -137,7 +137,7 @@ module TableWrapper = {
       ->Dict.fromArray
     }, [filterValueDict])
 
-    let allColumns = allColumns->Option.getWithDefault([])
+    let allColumns = allColumns->Option.getOr([])
     let allFilterKeys = Array.concat([startTimeFilterKey, endTimeFilterKey], filterKeys)
 
     let topFiltersToSearchParam = React.useMemo1(() => {
@@ -189,11 +189,11 @@ module TableWrapper = {
 
     let generateIDFromKeys = (keys, dict) => {
       keys
-      ->Option.getWithDefault([])
+      ->Option.getOr([])
       ->Array.map(key => {
         dict->Dict.get(key)
       })
-      ->Array.joinWith("")
+      ->Array.joinWithUnsafe("")
     }
 
     open AnalyticsTypes
@@ -307,7 +307,7 @@ module TableWrapper = {
     }, (topFiltersToSearchParam, activeTabStr, customFilter))
     let newDefaultCols = React.useMemo1(() => {
       activeTab
-      ->Option.getWithDefault([])
+      ->Option.getOr([])
       ->Belt.Array.keepMap(item => {
         defaultColumns
         ->Belt.Array.keepMap(
@@ -316,7 +316,7 @@ module TableWrapper = {
             val.key === item ? Some(columnItem) : None
           },
         )
-        ->Belt.Array.get(0)
+        ->Array.get(0)
       })
       ->Belt.Array.concat(allColumns)
     }, [activeTabStr])
@@ -325,7 +325,7 @@ module TableWrapper = {
       defaultColumns
       ->Belt.Array.keepMap(item => {
         let val = item->getHeading
-        activeTab->Option.getWithDefault([])->Array.includes(val.key) ? Some(item) : None
+        activeTab->Option.getOr([])->Array.includes(val.key) ? Some(item) : None
       })
       ->Belt.Array.concat(allColumns)
     }, [activeTabStr])
@@ -340,7 +340,7 @@ module TableWrapper = {
         ("endTime", endTimeFromUrl->Js.Json.string),
       ]->Dict.fromArray
 
-    let filters = filterValueFromUrl->Option.getWithDefault(Dict.make()->Js.Json.object_)
+    let filters = filterValueFromUrl->Option.getOr(Dict.make()->Js.Json.object_)
 
     let defaultFilters =
       [
@@ -350,10 +350,7 @@ module TableWrapper = {
       ]->Dict.fromArray
     let dict =
       [
-        (
-          "activeTab",
-          activeTab->Option.getWithDefault([])->Array.map(Js.Json.string)->Js.Json.array,
-        ),
+        ("activeTab", activeTab->Option.getOr([])->Array.map(Js.Json.string)->Js.Json.array),
         ("filter", defaultFilters->Js.Json.object_),
       ]->Dict.fromArray
 
@@ -381,7 +378,7 @@ module TableWrapper = {
                 tableEntity
                 colMapper
                 tableGlobalFilter
-                activeTab={activeTab->Option.getWithDefault([])}
+                activeTab={activeTab->Option.getOr([])}
               />
             </Form>
           </div>
@@ -414,7 +411,7 @@ module TabDetails = {
 
     let id =
       activeTab
-      ->Option.getWithDefault(["tab"])
+      ->Option.getOr(["tab"])
       ->Array.reduce("", (acc, tabName) => {acc->String.concat(tabName)})
 
     let isMobileView = MatchMedia.useMobileChecker()
@@ -531,7 +528,7 @@ let make = (
   let (activeTav, setActiveTab) = React.useState(_ =>
     filterValueDict->getStrArrayFromDict(
       `${moduleName}.tabName`,
-      [filteredTabKeys->Belt.Array.get(0)->Option.getWithDefault("")],
+      [filteredTabKeys->Array.get(0)->Option.getOr("")],
     )
   )
   let setActiveTab = React.useMemo1(() => {
@@ -619,7 +616,7 @@ let make = (
     }
     None
   }, (startTimeVal, endTimeVal, filterBody->Js.Json.object_->Js.Json.stringify))
-  let filterData = filterDataJson->Option.getWithDefault(Dict.make()->Js.Json.object_)
+  let filterData = filterDataJson->Option.getOr(Dict.make()->Js.Json.object_)
 
   let activeTab = React.useMemo1(() => {
     Some(
@@ -719,7 +716,7 @@ let make = (
               moduleName
               setTotalVolume
               showPercentage=false
-              statSentiment={singleStatEntity.statSentiment->Option.getWithDefault(Dict.make())}
+              statSentiment={singleStatEntity.statSentiment->Option.getOr(Dict.make())}
             />
           </div>
           <div className="flex flex-row">
diff --git a/src/screens/HyperSwitch/Analytics/ErrorReasons.res b/src/screens/HyperSwitch/Analytics/ErrorReasons.res
index dcbbc94e9..6e4b5ad7e 100644
--- a/src/screens/HyperSwitch/Analytics/ErrorReasons.res
+++ b/src/screens/HyperSwitch/Analytics/ErrorReasons.res
@@ -79,7 +79,7 @@ let make = (~errors: array<AnalyticsTypes.error_message_type>) => {
   }
 
   let getCellText = {
-    let errorStr = switch errors->Belt.Array.get(0) {
+    let errorStr = switch errors->Array.get(0) {
     | Some(val) => val.reason->String.slice(~start=0, ~end=15)
     | _ => "Error Reasons"
     }
diff --git a/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res b/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
index 633600c47..267ac707e 100644
--- a/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
+++ b/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
@@ -56,7 +56,7 @@ let options: Js.Json.t => array<EntityType.optionType<'t>> = json => {
     })
     ->Some
   })
-  ->Option.getWithDefault([])
+  ->Option.getOr([])
 }
 
 let filterByData = (txnArr, value) => {
@@ -74,7 +74,7 @@ let filterByData = (txnArr, value) => {
 
         value
         ->Js.Json.decodeString
-        ->Option.getWithDefault("")
+        ->Option.getOr("")
         ->String.toLowerCase
         ->String.includes(searchText)
       })
@@ -128,7 +128,7 @@ let initialFilterFields = json => {
       })
       ->Some
     })
-    ->Option.getWithDefault([])
+    ->Option.getOr([])
 
   dropdownValue
 }
@@ -251,7 +251,7 @@ let generateTablePayload = (
   let tableBodyWithDeltaMetrix = if deltaMetrics->Array.length > 0 {
     switch distributionArray {
     | Some(distributionArray) =>
-      distributionArray->Belt.Array.map(arr =>
+      distributionArray->Array.map(arr =>
         getFilterRequestBody(
           ~groupByNames=currenltySelectedTab,
           ~filter=filterValueFromUrl,
@@ -312,7 +312,7 @@ let generateTablePayload = (
 
   let tableBody =
     Belt.Array.concatMany([tableBodyValues, deltaPayload])
-    ->Belt.Array.map(Js.Json.object_)
+    ->Array.map(Js.Json.object_)
     ->Js.Json.array
   tableBody
 }
diff --git a/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res b/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
index eeca86bb1..cf7d2b718 100644
--- a/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
+++ b/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
@@ -190,7 +190,7 @@ module SystemMetricsInsights = {
       showPercentage=false
       isHomePage=true
       wrapperClass="flex flex-wrap w-full h-full"
-      statSentiment={singleStatEntity.statSentiment->Option.getWithDefault(Dict.make())}
+      statSentiment={singleStatEntity.statSentiment->Option.getOr(Dict.make())}
     />
   }
 }
diff --git a/src/screens/HyperSwitch/Analytics/HomePageOverview/PaymentsOverview/PaymentOverview.res b/src/screens/HyperSwitch/Analytics/HomePageOverview/PaymentsOverview/PaymentOverview.res
index 16b456c14..f256ba43b 100644
--- a/src/screens/HyperSwitch/Analytics/HomePageOverview/PaymentsOverview/PaymentOverview.res
+++ b/src/screens/HyperSwitch/Analytics/HomePageOverview/PaymentsOverview/PaymentOverview.res
@@ -25,7 +25,7 @@ let make = () => {
     setTotalVolume
     showPercentage=false
     isHomePage=true
-    statSentiment={singleStatEntity.statSentiment->Option.getWithDefault(Dict.make())}
+    statSentiment={singleStatEntity.statSentiment->Option.getOr(Dict.make())}
     wrapperClass="flex flex-wrap w-full h-full"
   />
 }
diff --git a/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalytics.res b/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalytics.res
index df922a8b5..c44ba803a 100644
--- a/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalytics.res
+++ b/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalytics.res
@@ -20,7 +20,7 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
@@ -38,7 +38,7 @@ let make = () => {
       }
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res b/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res
index 23a84d5c4..3892ceb09 100644
--- a/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res
+++ b/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res
@@ -273,7 +273,7 @@ let singleStateItemToObjMapper = json => {
     retries_amount_processe: dict->getFloat("retries_amount_processed", 0.0),
     connector_success_rate: dict->getFloat("connector_success_rate", 0.0),
   })
-  ->Option.getWithDefault({
+  ->Option.getOr({
     singleStateInitialValue
   })
 }
diff --git a/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalytics.res b/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalytics.res
index 681497d31..80585f2e9 100644
--- a/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalytics.res
+++ b/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalytics.res
@@ -20,7 +20,7 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
         setScreenState(_ => PageLoaderWrapper.Error(err))
       }
     }
@@ -43,7 +43,7 @@ let make = () => {
       }
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalyticsEntity.res b/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalyticsEntity.res
index d247529fc..df5b2227c 100644
--- a/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalyticsEntity.res
+++ b/src/screens/HyperSwitch/Analytics/RefundsAnalytics/RefundsAnalyticsEntity.res
@@ -141,7 +141,7 @@ let singleStateItemToObjMapper = json => {
     refund_success_count: dict->getInt("refund_success_count", 0),
     refund_processed_amount: dict->getFloat("refund_processed_amount", 0.0),
   })
-  ->Option.getWithDefault({
+  ->Option.getOr({
     singleStateInitialValue
   })
 }
diff --git a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
index 17f47078e..5dacb3ccd 100644
--- a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
+++ b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
@@ -127,8 +127,8 @@ module HSiwtchPaymentConfirmLatency = {
       ->getDictFromJsonObject
       ->getJsonObjectFromDict("queryData")
       ->getArrayFromJson([])
-      ->Belt.Array.get(0)
-      ->Option.getWithDefault(Js.Json.object_(Dict.make()))
+      ->Array.get(0)
+      ->Option.getOr(Js.Json.object_(Dict.make()))
       ->getDictFromJsonObject
       ->getInt("latency", 0)
     }
@@ -285,7 +285,7 @@ module SystemMetricsAnalytics = {
       }
       None
     }, (startTimeVal, endTimeVal, filterBody->Js.Json.object_->Js.Json.stringify))
-    let filterData = filterDataJson->Option.getWithDefault(Dict.make()->Js.Json.object_)
+    let filterData = filterDataJson->Option.getOr(Dict.make()->Js.Json.object_)
 
     <UIUtils.RenderIf condition={getModuleFilters->Dict.toArray->Array.length > 0}>
       {switch chartEntity1 {
@@ -317,7 +317,7 @@ module SystemMetricsAnalytics = {
             moduleName
             setTotalVolume
             showPercentage=false
-            statSentiment={singleStatEntity.statSentiment->Option.getWithDefault(Dict.make())}
+            statSentiment={singleStatEntity.statSentiment->Option.getOr(Dict.make())}
           />
         </div>
       | _ => React.null
@@ -346,7 +346,7 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalyticsUtils.res b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalyticsUtils.res
index ca0df0048..c1521e305 100644
--- a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalyticsUtils.res
+++ b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalyticsUtils.res
@@ -26,7 +26,7 @@ let singleStateItemToObjMapper = json => {
     api_count: dict->getInt("api_count", 0),
     status_code_count: dict->getInt("status_code_count", 0),
   })
-  ->Option.getWithDefault({
+  ->Option.getOr({
     singleStateInitialValue
   })
 }
@@ -49,7 +49,7 @@ let singleStateSeriesItemToObjMapper = json => {
 let itemToObjMapper = json => {
   let data = json->getQueryData->Array.map(singleStateItemToObjMapper)
 
-  data->Belt.Array.get(0)->Option.getWithDefault(singleStateInitialValue)
+  data->Array.get(0)->Option.getOr(singleStateInitialValue)
 }
 
 let timeSeriesObjMapper = json =>
diff --git a/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalytics.res b/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalytics.res
index fc0332dd9..8f5d389d8 100644
--- a/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalytics.res
+++ b/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalytics.res
@@ -25,7 +25,7 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
@@ -35,7 +35,7 @@ let make = () => {
       await loadInfo()
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalyticsEntity.res b/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalyticsEntity.res
index 9d4358465..dd655fa3a 100644
--- a/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalyticsEntity.res
+++ b/src/screens/HyperSwitch/Analytics/UserAnalytics/UserJourneyAnalyticsEntity.res
@@ -30,7 +30,7 @@ let singleStatItemToObjMapper = json => {
     sdk_rendered_count: dict->getInt("sdk_rendered_count", 0),
     average_payment_time: dict->getFloat("average_payment_time", 0.0) /. 1000.,
   })
-  ->Option.getWithDefault({
+  ->Option.getOr({
     singleStateInitialValue
   })
 }
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
index 28f247756..865ebd320 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
@@ -6,7 +6,7 @@ let make = (~setCurrentStep, ~setInitialValues, ~initialValues, ~isUpdateFlow, ~
   let url = RescriptReactRouter.useUrl()
   let showToast = ToastState.useShowToast()
   let connector = UrlUtils.useGetFilterDictFromUrl("")->LogicUtils.getString("name", "")
-  let connectorID = url.path->Belt.List.toArray->Belt.Array.get(1)->Option.getWithDefault("")
+  let connectorID = url.path->Belt.List.toArray->Array.get(1)->Option.getOr("")
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
   let featureFlagDetails = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
 
@@ -50,7 +50,7 @@ let make = (~setCurrentStep, ~setInitialValues, ~initialValues, ~isUpdateFlow, ~
     } catch {
     | Js.Exn.Error(e) => {
         Js.log2("FAILED TO LOAD CONNECTOR CONFIG", e)
-        let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+        let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
         setScreenState(_ => PageLoaderWrapper.Error(err))
         Dict.make()->Js.Json.object_
       }
@@ -112,7 +112,7 @@ let make = (~setCurrentStep, ~setInitialValues, ~initialValues, ~isUpdateFlow, ~
         switch Js.Exn.message(e) {
         | Some(message) => {
             let errMsg = message->parseIntoMyData
-            if errMsg.code->Option.getWithDefault("")->String.includes("HE_01") {
+            if errMsg.code->Option.getOr("")->String.includes("HE_01") {
               showToast(
                 ~message="This configuration already exists for the connector. Please try with a different country or label under advanced settings.",
                 ~toastType=ToastState.ToastError,
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
index dee2edaa5..0dabd1c5f 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.getWithDefault(""->Js.Json.string)->getStringFromJson(""))}
+        {React.string(err->Option.getOr(""->Js.Json.string)->getStringFromJson(""))}
       </div>
     </UIUtils.RenderIf>
   }
@@ -364,7 +364,7 @@ module BusinessProfileRender = {
                       ->Array.find((ele: HSwitchSettingTypes.profileEntity) =>
                         ele.profile_id === ev->Identity.formReactEventToString
                       )
-                      ->Option.getWithDefault(defaultBusinessProfile)
+                      ->Option.getOr(defaultBusinessProfile)
                     ).profile_name
                     connectorLabelOnChange(
                       `${selectedConnector}_${profileName}`->Identity.stringToFormReactEvent,
@@ -447,7 +447,7 @@ module VerifyConnectorModal = {
               </div>
               <div
                 className="whitespace-pre-line break-all flex flex-col gap-1 p-4 ml-6 text-base dark:text-jp-gray-text_darktheme dark:text-opacity-50 bg-red-50 rounded-md font-semibold">
-                {`${verifyErrorMessage->Option.getWithDefault("")}`->React.string}
+                {`${verifyErrorMessage->Option.getOr("")}`->React.string}
               </div>
               <UIUtils.RenderIf condition={suggestedActionExists}>
                 {suggestedAction}
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorHome.res b/src/screens/HyperSwitch/Connectors/ConnectorHome.res
index 73af2b051..7b23bcdb7 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorHome.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorHome.res
@@ -59,7 +59,7 @@ let make = (~isPayoutFlow=false, ~showStepIndicator=true, ~showBreadCrumb=true)
   open APIUtils
   let url = RescriptReactRouter.useUrl()
   let connector = UrlUtils.useGetFilterDictFromUrl("")->LogicUtils.getString("name", "")
-  let connectorID = url.path->Belt.List.toArray->Belt.Array.get(1)->Option.getWithDefault("")
+  let connectorID = url.path->Belt.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 (currentStep, setCurrentStep) = React.useState(_ => ConnectorTypes.IntegFields)
@@ -92,7 +92,7 @@ let make = (~isPayoutFlow=false, ~showStepIndicator=true, ~showBreadCrumb=true)
       setScreenState(_ => Success)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+        let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
         setScreenState(_ => Error(err))
       }
     }
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res b/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
index ed85f5ea3..681669150 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
@@ -51,7 +51,7 @@ let make = (
       }
       let body =
         constructConnectorRequestBody(obj, initialValues)->ignoreFields(
-          connectorID->Option.getWithDefault(""),
+          connectorID->Option.getOr(""),
           connectorIgnoredField,
         )
       let connectorUrl = getURL(~entityName=CONNECTOR, ~methodType=Post, ~id=connectorID, ())
@@ -66,7 +66,7 @@ let make = (
       )
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+        let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
         let errorCode = err->safeParse->getDictFromJsonObject->getString("code", "")
         let errorMessage = err->safeParse->getDictFromJsonObject->getString("message", "")
 
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
index 8996ec04b..391bf005b 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
@@ -1,7 +1,7 @@
 module InfoField = {
   @react.component
   let make = (~render, ~label) => {
-    let str = render->Option.getWithDefault("")
+    let str = render->Option.getOr("")
 
     <UIUtils.RenderIf condition={str->String.length > 0}>
       <div>
@@ -108,7 +108,7 @@ module ConnectorSummaryGrid = {
       ->Array.find((ele: HSwitchSettingTypes.profileEntity) =>
         ele.profile_id === connectorInfo.profile_id
       )
-      ->Option.getWithDefault(defaultBusinessProfile)
+      ->Option.getOr(defaultBusinessProfile)
     let merchantId = HSLocalStorage.getFromMerchantDetails("merchant_id")
     let copyValueOfWebhookEndpoint = ConnectorUtils.getWebhooksUrl(
       ~connectorName={connectorInfo.merchant_connector_id},
@@ -128,7 +128,7 @@ module ConnectorSummaryGrid = {
       } catch {
       | Js.Exn.Error(e) => {
           Js.log2("FAILED TO LOAD CONNECTOR CONFIG", e)
-          let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+          let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
           setScreenState(_ => PageLoaderWrapper.Error(err))
           Dict.make()->Js.Json.object_
         }
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res b/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
index ace7fd93d..d7f18bb10 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
@@ -80,13 +80,13 @@ let getPaymentMethodTypes = dict => {
   }
 }
 
-let getPaymentMethodsEnabled: Js.Dict.t<Js.Json.t> => paymentMethodEnabledType = dict => {
+let getPaymentMethodsEnabled: Dict.t<Js.Json.t> => paymentMethodEnabledType = dict => {
   open LogicUtils
   {
     payment_method: dict->getString("payment_method", ""),
     payment_method_types: dict
     ->Dict.get("payment_method_types")
-    ->Option.getWithDefault(Dict.make()->Js.Json.object_)
+    ->Option.getOr(Dict.make()->Js.Json.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.getWithDefault(Dict.make()->Js.Json.object_)
+    ->Option.getOr(Dict.make()->Js.Json.object_)
     ->getArrayDataFromJson(getPaymentMethodsEnabled),
     profile_id: dict->getString("profile_id", ""),
     merchant_connector_id: dict->getString("merchant_connector_id", ""),
@@ -138,7 +138,7 @@ let getConnectorNameViaId = (
 ) => {
   connectorList
   ->Array.find(ele => {ele.merchant_connector_id == mca_id})
-  ->Option.getWithDefault(Dict.make()->getProcessorPayloadType)
+  ->Option.getOr(Dict.make()->getProcessorPayloadType)
 }
 
 let getAllPaymentMethods = (paymentMethodsArray: array<paymentMethodEnabledType>) => {
@@ -208,7 +208,7 @@ let getCell = (connector: connectorPayload, colType): Table.cell => {
   }
 }
 
-let getArrayDataFromJson = (json, itemToObjMapper: Js.Dict.t<Js.Json.t> => connectorPayload) => {
+let getArrayDataFromJson = (json, itemToObjMapper: Dict.t<Js.Json.t> => connectorPayload) => {
   json
   ->ConnectorUtils.getProcessorsListFromJson()
   ->Array.map(itemToObjMapper)
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorUIUtils/PaymentMethod.res b/src/screens/HyperSwitch/Connectors/ConnectorUIUtils/PaymentMethod.res
index 9f7dccdf5..026b75495 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorUIUtils/PaymentMethod.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorUIUtils/PaymentMethod.res
@@ -7,11 +7,10 @@ let isSelectedAll = (
   let paymentMethodObj = selectedPaymentMethod->getSelectedPaymentObj(paymentMethod)
   switch paymentMethod->getPaymentMethodFromString {
   | Card =>
-    paymentMethodObj.card_provider->Option.getWithDefault([])->Array.length ==
+    paymentMethodObj.card_provider->Option.getOr([])->Array.length ==
       allPaymentMethods->Array.length
   | _ =>
-    paymentMethodObj.provider->Option.getWithDefault([])->Array.length ==
-      allPaymentMethods->Array.length
+    paymentMethodObj.provider->Option.getOr([])->Array.length == allPaymentMethods->Array.length
   }
 }
 
@@ -37,9 +36,9 @@ module CardRenderer = {
 
     let paymentObj = paymentMethodsEnabled->getSelectedPaymentObj(paymentMethod)
     let standardProviders =
-      paymentObj.provider->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
+      paymentObj.provider->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
     let cardProviders =
-      paymentObj.card_provider->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
+      paymentObj.card_provider->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
 
     let checkPaymentMethodType = (
       obj: paymentMethodConfigType,
@@ -80,16 +79,16 @@ module CardRenderer = {
         if val.payment_method_type === paymentMethod {
           switch paymentMethod->getPaymentMethodTypeFromString {
           | Credit | Debit =>
-            let length = val.card_provider->Option.getWithDefault([])->Array.length
+            let length = val.card_provider->Option.getOr([])->Array.length
             val.card_provider
-            ->Option.getWithDefault([])
+            ->Option.getOr([])
             ->Array.splice(~start=0, ~remove=length, ~insert=arr)
             ->ignore
           | _ =>
-            let length = val.provider->Option.getWithDefault([])->Array.length
+            let length = val.provider->Option.getOr([])->Array.length
 
             val.provider
-            ->Option.getWithDefault([])
+            ->Option.getOr([])
             ->Array.splice(~start=0, ~remove=length, ~insert=arr)
             ->ignore
           }
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
index 470b5aa2d..34625893c 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
@@ -634,7 +634,7 @@ let getSelectedPaymentObj = (paymentMethodsEnabled: array<paymentMethodEnabled>,
   ->Array.find(item =>
     item.payment_method_type->String.toLowerCase == paymentMethod->String.toLowerCase
   )
-  ->Option.getWithDefault({
+  ->Option.getOr({
     payment_method: "unknown",
     payment_method_type: "unkonwn",
   })
@@ -647,16 +647,14 @@ let addMethod = (paymentMethodsEnabled, paymentMethod, method) => {
     pmts->Array.forEach((val: paymentMethodEnabled) => {
       if val.payment_method_type->String.toLowerCase === paymentMethod->String.toLowerCase {
         val.card_provider
-        ->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
+        ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
         ->Array.push(method)
       }
     })
   | _ =>
     pmts->Array.forEach((val: paymentMethodEnabled) => {
       if val.payment_method_type->String.toLowerCase === paymentMethod->String.toLowerCase {
-        val.provider
-        ->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
-        ->Array.push(method)
+        val.provider->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)->Array.push(method)
       }
     })
   }
@@ -671,12 +669,12 @@ let removeMethod = (paymentMethodsEnabled, paymentMethod, method: paymentMethodC
       if val.payment_method_type->String.toLowerCase === paymentMethod->String.toLowerCase {
         let indexOfRemovalItem =
           val.card_provider
-          ->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
+          ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
           ->Array.map(ele => ele.payment_method_type)
           ->Array.indexOf(method.payment_method_type)
 
         val.card_provider
-        ->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
+        ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
         ->Array.splice(
           ~start=indexOfRemovalItem,
           ~remove=1,
@@ -690,12 +688,12 @@ let removeMethod = (paymentMethodsEnabled, paymentMethod, method: paymentMethodC
       if val.payment_method_type->String.toLowerCase === paymentMethod->String.toLowerCase {
         let indexOfRemovalItem =
           val.provider
-          ->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
+          ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
           ->Array.map(ele => ele.payment_method_type)
           ->Array.indexOf(method.payment_method_type)
 
         val.provider
-        ->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
+        ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
         ->Array.splice(
           ~start=indexOfRemovalItem,
           ~remove=1,
@@ -787,9 +785,9 @@ let checkCashtoCodeFields = (keys, country, valuesFlattenJson) => {
 
 let checkCashtoCodeInnerField = (valuesFlattenJson, dict, country: string): bool => {
   open LogicUtils
-  let value = dict->getDictfromDict(country)->Js.Dict.keys
+  let value = dict->getDictfromDict(country)->Dict.keysToArray
   let result = value->Array.map(method => {
-    let keys = dict->getDictfromDict(country)->getDictfromDict(method)->Js.Dict.keys
+    let keys = dict->getDictfromDict(country)->getDictfromDict(method)->Dict.keysToArray
     keys->checkCashtoCodeFields(country, valuesFlattenJson)->Array.includes(false) ? false : true
   })
 
@@ -810,7 +808,7 @@ let validateConnectorRequiredFields = (
   if connector === CASHTOCODE {
     let dict = connectorAccountFields->getAuthKeyMapFromConnectorAccountFields
 
-    let indexLength = dict->Js.Dict.keys->Array.length
+    let indexLength = dict->Dict.keysToArray->Array.length
     let vector = Js.Vector.make(indexLength, false)
 
     dict
@@ -896,8 +894,7 @@ let getConnectorFields = connectorDetails => {
   open LogicUtils
   let connectorAccountDict =
     connectorDetails->getDictFromJsonObject->getDictfromDict("connector_auth")
-  let bodyType =
-    connectorAccountDict->Dict.keysToArray->Belt.Array.get(0)->Option.getWithDefault("")
+  let bodyType = connectorAccountDict->Dict.keysToArray->Array.get(0)->Option.getOr("")
   let connectorAccountFields = connectorAccountDict->getDictfromDict(bodyType)
   let connectorMetaDataFields = connectorDetails->getDictFromJsonObject->getDictfromDict("metadata")
   let isVerifyConnector = connectorDetails->getDictFromJsonObject->getBool("is_verifiable", false)
@@ -922,7 +919,7 @@ let validateRequiredFiled = (valuesFlattenJson, dict, fieldName, errors) => {
   dict
   ->Dict.keysToArray
   ->Array.forEach(_value => {
-    let lastItem = fieldName->String.split(".")->Array.pop->Option.getWithDefault("")
+    let lastItem = fieldName->String.split(".")->Array.pop->Option.getOr("")
     let errorKey = dict->getString(lastItem, "")
     let value = valuesFlattenJson->getString(`${fieldName}`, "")
     if value->String.length === 0 {
@@ -937,29 +934,29 @@ let validate = (values, ~selectedConnector, ~dict, ~fieldName, ~isLiveMode) => {
   let valuesFlattenJson = values->JsonFlattenUtils.flattenObject(true)
   let labelArr = dict->Dict.valuesToArray
   selectedConnector.validate
-  ->Option.getWithDefault([])
+  ->Option.getOr([])
   ->Array.forEachWithIndex((field, index) => {
     let key = field.name
     let value =
       valuesFlattenJson
       ->Dict.get(key)
-      ->Option.getWithDefault(""->Js.Json.string)
+      ->Option.getOr(""->Js.Json.string)
       ->LogicUtils.getStringFromJson("")
     let regexToUse = isLiveMode ? field.liveValidationRegex : field.testValidationRegex
     let validationResult = switch regexToUse {
     | Some(regex) => regex->Js.Re.fromString->Js.Re.test_(value)
     | None => true
     }
-    if field.isRequired->Option.getWithDefault(true) && value->String.length === 0 {
+    if field.isRequired->Option.getOr(true) && value->String.length === 0 {
       let errorLabel =
         labelArr
-        ->Belt.Array.get(index)
-        ->Option.getWithDefault(""->Js.Json.string)
+        ->Array.get(index)
+        ->Option.getOr(""->Js.Json.string)
         ->LogicUtils.getStringFromJson("")
       Dict.set(errors, key, `Please enter ${errorLabel}`->Js.Json.string)
     } else if !validationResult && value->String.length !== 0 {
       let expectedFormat = isLiveMode ? field.liveExpectedFormat : field.testExpectedFormat
-      let warningMessage = expectedFormat->Option.getWithDefault("")
+      let warningMessage = expectedFormat->Option.getOr("")
       Dict.set(errors, key, warningMessage->Js.Json.string)
     }
   })
@@ -974,7 +971,7 @@ let validate = (values, ~selectedConnector, ~dict, ~fieldName, ~isLiveMode) => {
 let getSuggestedAction = (~verifyErrorMessage, ~connector) => {
   let (suggestedAction, suggestedActionExists) = {
     open SuggestedActionHelper
-    let msg = verifyErrorMessage->Option.getWithDefault("")
+    let msg = verifyErrorMessage->Option.getOr("")
     switch connector->getConnectorNameTypeFromString {
     | STRIPE => (
         {
@@ -1069,7 +1066,7 @@ let useFetchConnectorList = () => {
       res
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
         Js.Exn.raiseError(err)
       }
     }
@@ -1101,11 +1098,9 @@ let defaultSelectAllCards = (
             ->getPaymentMethodMapper
 
           let length =
-            val.card_provider
-            ->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
-            ->Array.length
+            val.card_provider->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)->Array.length
           val.card_provider
-          ->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
+          ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
           ->Array.splice(~start=0, ~remove=length, ~insert=arr)
         }
       | BankTransfer | BankRedirect => {
@@ -1116,11 +1111,9 @@ let defaultSelectAllCards = (
             ->getPaymentMethodMapper
 
           let length =
-            val.provider
-            ->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
-            ->Array.length
+            val.provider->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)->Array.length
           val.provider
-          ->Option.getWithDefault([]->Js.Json.array->getPaymentMethodMapper)
+          ->Option.getOr([]->Js.Json.array->getPaymentMethodMapper)
           ->Array.splice(~start=0, ~remove=length, ~insert=arr)
         }
       | _ => ()
@@ -1161,7 +1154,7 @@ let getConnectorPaymentMethodDetails = async (
     )
   } catch {
   | Js.Exn.Error(e) => {
-      let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+      let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res b/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res
index 208e34d13..781874d60 100644
--- a/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res
+++ b/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res
@@ -30,7 +30,7 @@ module Simplified = {
     let updateAPIHook = useUpdateMethod(~showErrorToast=false, ())
     let showToast = ToastState.useShowToast()
     let fetchApi = AuthHooks.useApiFetcher()
-    let connectorID = url.path->Belt.List.toArray->Belt.Array.get(1)->Option.getWithDefault("")
+    let connectorID = url.path->Belt.List.toArray->Array.get(1)->Option.getOr("")
     let merchantDetailsValue = HSwitchUtils.useMerchantDetailsValue()
     let merchantId = merchantDetailsValue->getDictFromJsonObject->getString("merchant_id", "")
     let prefix = "apple_pay_combined.simplified.session_token_data.initiative_context"
diff --git a/src/screens/HyperSwitch/Connectors/Wallets/WalletHelper.res b/src/screens/HyperSwitch/Connectors/Wallets/WalletHelper.res
index 8faa8eea1..1b3a5c312 100644
--- a/src/screens/HyperSwitch/Connectors/Wallets/WalletHelper.res
+++ b/src/screens/HyperSwitch/Connectors/Wallets/WalletHelper.res
@@ -118,7 +118,7 @@ module SimplifiedHelper = {
             <UIUtils.RenderIf condition={subText->Option.isSome}>
               <p
                 className={`opacity-50 mt-2 text-base text-hyperswitch_black opacity-50 font-normal`}>
-                {subText->Option.getWithDefault("")->React.string}
+                {subText->Option.getOr("")->React.string}
               </p>
             </UIUtils.RenderIf>
             {switch customElement {
diff --git a/src/screens/HyperSwitch/Customers/Customers.res b/src/screens/HyperSwitch/Customers/Customers.res
index 1011886f3..2d25c04b7 100644
--- a/src/screens/HyperSwitch/Customers/Customers.res
+++ b/src/screens/HyperSwitch/Customers/Customers.res
@@ -17,7 +17,7 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/Customers/ShowCustomers.res b/src/screens/HyperSwitch/Customers/ShowCustomers.res
index c1499a9e4..820a00c7c 100644
--- a/src/screens/HyperSwitch/Customers/ShowCustomers.res
+++ b/src/screens/HyperSwitch/Customers/ShowCustomers.res
@@ -37,7 +37,7 @@ module CustomerInfo = {
           </div>
         </FormRenderer.DesktopRow>
         <UIUtils.RenderIf condition={children->Option.isSome}>
-          {children->Option.getWithDefault(React.null)}
+          {children->Option.getOr(React.null)}
         </UIUtils.RenderIf>
       </OrderUtils.Section>
     }
@@ -70,7 +70,7 @@ let make = (~id) => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res b/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res
index 8b3638f91..708e62719 100644
--- a/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res
+++ b/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res
@@ -64,7 +64,7 @@ module ApiEditModal = {
 
         let url = switch action {
         | Update => {
-            let key_id = keyId->Option.getWithDefault("")
+            let key_id = keyId->Option.getOr("")
             APIUtils.getURL(~entityName=API_KEYS, ~methodType=Post, ~id=Some(key_id), ())
           }
 
diff --git a/src/screens/HyperSwitch/Developer/APIKeys/PublishableAndHashKeySection.res b/src/screens/HyperSwitch/Developer/APIKeys/PublishableAndHashKeySection.res
index 2fa83fb4a..050e1d27a 100644
--- a/src/screens/HyperSwitch/Developer/APIKeys/PublishableAndHashKeySection.res
+++ b/src/screens/HyperSwitch/Developer/APIKeys/PublishableAndHashKeySection.res
@@ -16,9 +16,7 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
-      setScreenState(_ => PageLoaderWrapper.Error(
-        Js.Exn.message(e)->Option.getWithDefault("Error"),
-      ))
+      setScreenState(_ => PageLoaderWrapper.Error(Js.Exn.message(e)->Option.getOr("Error")))
     }
   }
 
@@ -27,7 +25,7 @@ let make = () => {
     None
   })
 
-  let paymentResponsHashKey = merchantInfo.payment_response_hash_key->Option.getWithDefault("")
+  let paymentResponsHashKey = merchantInfo.payment_response_hash_key->Option.getOr("")
 
   <PageLoaderWrapper screenState sectionHeight="h-40-vh">
     <div className="mt-10">
diff --git a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res
index 3db808bf2..8b55e2f19 100644
--- a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res
+++ b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res
@@ -33,7 +33,7 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
   open HSwitchUtils
   open MerchantAccountUtils
   let url = RescriptReactRouter.useUrl()
-  let id = url.path->Belt.List.toArray->Belt.Array.get(1)->Option.getWithDefault(profileId)
+  let id = url.path->Belt.List.toArray->Array.get(1)->Option.getOr(profileId)
   let businessProfileDetails = useGetBusinessProflile(id)
 
   let showToast = ToastState.useShowToast()
@@ -122,7 +122,7 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
                   />
                   <InfoViewForWebhooks
                     heading="Payment Response Hash Key"
-                    subHeading={businessProfileDetails.payment_response_hash_key->Option.getWithDefault(
+                    subHeading={businessProfileDetails.payment_response_hash_key->Option.getOr(
                       "NA",
                     )}
                     isCopy=true
diff --git a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsListEntity.res b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsListEntity.res
index be453e52a..74d6f0e5d 100644
--- a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsListEntity.res
+++ b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsListEntity.res
@@ -24,8 +24,8 @@ let getHeading = colType => {
 let getCell = (item: profileEntity, colType): Table.cell => {
   switch colType {
   | ProfileName => Text(item.profile_name)
-  | ReturnUrl => Text(item.return_url->Option.getWithDefault(""))
-  | WebhookUrl => Text(item.webhook_details.webhook_url->Option.getWithDefault(""))
+  | ReturnUrl => Text(item.return_url->Option.getOr(""))
+  | WebhookUrl => Text(item.webhook_details.webhook_url->Option.getOr(""))
   }
 }
 
diff --git a/src/screens/HyperSwitch/Disputes/Disputes.res b/src/screens/HyperSwitch/Disputes/Disputes.res
index 9678d304f..fd982b082 100644
--- a/src/screens/HyperSwitch/Disputes/Disputes.res
+++ b/src/screens/HyperSwitch/Disputes/Disputes.res
@@ -21,7 +21,7 @@ let make = () => {
       }
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       if err->String.includes("HE_02") {
         setScreenState(_ => Custom)
       } else {
diff --git a/src/screens/HyperSwitch/Disputes/ShowDisputes.res b/src/screens/HyperSwitch/Disputes/ShowDisputes.res
index cb324eec8..33acfa261 100644
--- a/src/screens/HyperSwitch/Disputes/ShowDisputes.res
+++ b/src/screens/HyperSwitch/Disputes/ShowDisputes.res
@@ -208,7 +208,7 @@ module Details = {
         </div>
       </FormRenderer.DesktopRow>
       <RenderIf condition={children->Option.isSome}>
-        {children->Option.getWithDefault(React.null)}
+        {children->Option.getOr(React.null)}
       </RenderIf>
     </OrderUtils.Section>
   }
@@ -243,7 +243,7 @@ let make = (~id) => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res b/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res
index bb44ccde3..28426807d 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res
@@ -11,7 +11,7 @@ let make = () => {
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
   let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->Js.Json.object_)
   let frmName = UrlUtils.useGetFilterDictFromUrl("")->getString("name", "")
-  let frmID = url.path->Belt.List.toArray->Belt.Array.get(1)->Option.getWithDefault("")
+  let frmID = url.path->Belt.List.toArray->Array.get(1)->Option.getOr("")
 
   let initStep = PaymentMethods
 
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
index a3c4b48d6..8f31f3bf0 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
@@ -75,7 +75,7 @@ module IntegrationFieldsForm = {
         let value =
           valuesFlattenJson
           ->Dict.get(key)
-          ->Option.getWithDefault(""->Js.Json.string)
+          ->Option.getOr(""->Js.Json.string)
           ->LogicUtils.getStringFromJson("")
 
         if field.isRequired && value->String.length === 0 {
@@ -135,7 +135,7 @@ module IntegrationFieldsForm = {
                     ~name={field.name},
                     ~placeholder=field.placeholder,
                     ~customInput=field.inputType,
-                    ~description=field.description->Option.getWithDefault(""),
+                    ~description=field.description->Option.getOr(""),
                     ~isRequired=true,
                     ~parse,
                     ~format?,
@@ -216,7 +216,7 @@ let make = (
 
   let frmID =
     retrivedValues
-    ->Option.getWithDefault(Dict.make()->Js.Json.object_)
+    ->Option.getOr(Dict.make()->Js.Json.object_)
     ->LogicUtils.getDictFromJsonObject
     ->LogicUtils.getString("merchant_connector_id", "")
 
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
index c082f77ae..4405c6b49 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.getWithDefault(Dict.make()->Js.Json.object_)
+  let initialValues = retrivedValues->Option.getOr(Dict.make()->Js.Json.object_)
 
   let onSubmit = (values, _) => {
     open Promise
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMUtils.res b/src/screens/HyperSwitch/FraudAndRisk/FRMUtils.res
index 759d52e50..b9fe0178d 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.getWithDefault("")
+  let str = value->Js.Json.decodeString->Option.getOr("")
   str->String.replaceRegExp(%re("/^[\s]+/"), "")->Js.Json.string
 }
 
 let base64Parse = (. ~value, ~name as _) => {
-  value->Js.Json.decodeString->Option.getWithDefault("")->btoa->Js.Json.string
+  value->Js.Json.decodeString->Option.getOr("")->btoa->Js.Json.string
 }
 
 let base64Format = (. ~value, ~name as _) => {
-  value->Js.Json.decodeString->Option.getWithDefault("")->atob->Js.Json.string
+  value->Js.Json.decodeString->Option.getOr("")->atob->Js.Json.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"
@@ -41,10 +41,7 @@ let generateInitialValuesDict = (~selectedFRMInfo, ~isLiveMode, ()) => {
 }
 
 let parseFRMConfig = json => {
-  json
-  ->Js.Json.decodeArray
-  ->Option.getWithDefault([])
-  ->ConnectorTableUtils.convertFRMConfigJsonToObj
+  json->Js.Json.decodeArray->Option.getOr([])->ConnectorTableUtils.convertFRMConfigJsonToObj
 }
 
 let getPaymentMethod = paymentMethod => {
@@ -94,7 +91,7 @@ let updateConfigDict = (configDict, connectorName, paymentMethodsDict) => {
       updatePaymentMethodsDict(
         prevPaymentMethodsDict,
         pmName,
-        paymentMethodsDict->Dict.get(pmName)->Option.getWithDefault([]),
+        paymentMethodsDict->Dict.get(pmName)->Option.getOr([]),
       )
     )
 
@@ -143,7 +140,7 @@ let generateFRMPaymentMethodsConfig = paymentMethodsDict => {
     let paymentMethodTypesArr =
       paymentMethodsDict
       ->Dict.get(paymentMethodName)
-      ->Option.getWithDefault([])
+      ->Option.getOr([])
       ->Array.map(paymentMethodType => {
         {
           payment_method_type: paymentMethodType,
diff --git a/src/screens/HyperSwitch/HSLocalStorage.res b/src/screens/HyperSwitch/HSLocalStorage.res
index 39ddf5166..aff0ffd14 100644
--- a/src/screens/HyperSwitch/HSLocalStorage.res
+++ b/src/screens/HyperSwitch/HSLocalStorage.res
@@ -1,12 +1,11 @@
 let getInfoFromLocalStorage = (~lStorageKey) => {
-  let stringifiedJson =
-    LocalStorage.getItem(lStorageKey)->Js.Nullable.toOption->Option.getWithDefault("")
+  let stringifiedJson = LocalStorage.getItem(lStorageKey)->Js.Nullable.toOption->Option.getOr("")
 
   stringifiedJson->LogicUtils.safeParse->LogicUtils.getDictFromJsonObject
 }
 
 let getBooleanFromLocalStorage = (~key) => {
-  let stringifiedJson = LocalStorage.getItem(key)->Js.Nullable.toOption->Option.getWithDefault("")
+  let stringifiedJson = LocalStorage.getItem(key)->Js.Nullable.toOption->Option.getOr("")
 
   stringifiedJson->LogicUtils.safeParse->LogicUtils.getBoolFromJson(false)
 }
diff --git a/src/screens/HyperSwitch/HSiwtchTimeZoneUtils.res b/src/screens/HyperSwitch/HSiwtchTimeZoneUtils.res
index f0a5c5fa5..fbe1bc025 100644
--- a/src/screens/HyperSwitch/HSiwtchTimeZoneUtils.res
+++ b/src/screens/HyperSwitch/HSiwtchTimeZoneUtils.res
@@ -1,9 +1,5 @@
 let getUserTimeZoneString = () => {
-  Js.Date.make()
-  ->Js.Date.toTimeString
-  ->String.split(" ")
-  ->Belt.Array.get(1)
-  ->Option.getWithDefault("")
+  Js.Date.make()->Js.Date.toTimeString->String.split(" ")->Array.get(1)->Option.getOr("")
 }
 
 let getUserTimeZone = () => {
diff --git a/src/screens/HyperSwitch/HSwitchRemoteFilter.res b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
index ba66e704a..453c14c0e 100644
--- a/src/screens/HyperSwitch/HSwitchRemoteFilter.res
+++ b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
@@ -6,7 +6,7 @@ type filterBody = {
 let isStringNonEmpty = str => str->String.length > 0
 
 let getDateValue = (key, ~getModuleFilters) => {
-  getModuleFilters->Dict.get(key)->Option.getWithDefault("")
+  getModuleFilters->Dict.get(key)->Option.getOr("")
 }
 
 let formateDateString = date => {
@@ -94,7 +94,7 @@ let useSetInitialFilters = (~updateExistingKeys, ~startTimeFilterKey, ~endTimeFi
       [
         (startTimeFilterKey, defaultDate.start_time),
         (endTimeFilterKey, defaultDate.end_time),
-      ]->Belt.Array.forEach(item => {
+      ]->Array.forEach(item => {
         let (key, defaultValue) = item
         switch inititalSearchParam->Dict.get(key) {
         | Some(_) => ()
@@ -221,7 +221,7 @@ module RemoteTableFilters = {
       }
       None
     }, (startTimeVal, endTimeVal, filterBody->Js.Json.object_->Js.Json.stringify))
-    let filterData = filterDataJson->Option.getWithDefault(Dict.make()->Js.Json.object_)
+    let filterData = filterDataJson->Option.getOr(Dict.make()->Js.Json.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 277bc7520..0b3144fc4 100644
--- a/src/screens/HyperSwitch/Helpers/HelperComponents.res
+++ b/src/screens/HyperSwitch/Helpers/HelperComponents.res
@@ -60,9 +60,9 @@ module BluredTableComponent = {
         ("amount_capturable", "####"->Js.Json.string),
       ]->Dict.fromArray
 
-    let dummyTableValue = Belt.Array.make(5, dummyTableValueDict)
+    let dummyTableValue = Array.make(~length=5, dummyTableValueDict)
 
-    let subTitle = moduleSubtitle->Option.isSome ? moduleSubtitle->Option.getWithDefault("") : ""
+    let subTitle = moduleSubtitle->Option.isSome ? moduleSubtitle->Option.getOr("") : ""
 
     <div className="relative flex flex-col gap-8">
       <div className="flex items-center justify-between ">
diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res
index bdc0fe990..3591fc616 100644
--- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res
+++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res
@@ -42,7 +42,7 @@ let make = (~connectProcessorValue: connectProcessor) => {
       setQuickStartPageState(_ => ConnectProcessor(CHECKOUT))
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to update!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to update!")
         Js.Exn.raiseError(err)
       }
     }
@@ -110,7 +110,7 @@ let make = (~connectProcessorValue: connectProcessor) => {
       setButtonState(_ => Normal)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to update!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to update!")
         Js.Exn.raiseError(err)
       }
     }
@@ -136,7 +136,7 @@ let make = (~connectProcessorValue: connectProcessor) => {
       let _ = await StringEnumType(connectorChoiceValue)->usePostEnumDetails(configurationType)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to update!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to update!")
         Js.Exn.raiseError(err)
       }
     }
@@ -172,7 +172,7 @@ let make = (~connectProcessorValue: connectProcessor) => {
   let updateTestPaymentEnum = async (~paymentId) => {
     try {
       let paymentBody: paymentType = {
-        payment_id: paymentId->Option.getWithDefault("pay_default"),
+        payment_id: paymentId->Option.getOr("pay_default"),
       }
       let _ = await PaymentType(paymentBody)->usePostEnumDetails(#TestPayment)
       setQuickStartPageState(_ => IntegrateApp(LANDING))
diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/QuickStartConnectorFlow.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/QuickStartConnectorFlow.res
index 8247c71c0..df0732484 100644
--- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/QuickStartConnectorFlow.res
+++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/QuickStartConnectorFlow.res
@@ -99,7 +99,7 @@ let make = (
       )
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       showToast(~message=err, ~toastType=ToastError, ())
       setButtonState(_ => Normal)
     }
diff --git a/src/screens/HyperSwitch/Home/HomeUtils.res b/src/screens/HyperSwitch/Home/HomeUtils.res
index ec37e0ce6..aae4039e6 100644
--- a/src/screens/HyperSwitch/Home/HomeUtils.res
+++ b/src/screens/HyperSwitch/Home/HomeUtils.res
@@ -380,7 +380,7 @@ let responseDataMapper = (res: Js.Json.t) => {
 
   arrayFromJson->Array.forEach(value => {
     let value1 = value->getDictFromJsonObject
-    let key = value1->Dict.keysToArray->Belt.Array.get(0)->Option.getWithDefault("")
+    let key = value1->Dict.keysToArray->Array.get(0)->Option.getOr("")
     resDict->Dict.set(key, value1->getValueMapped(key))
   })
   resDict
diff --git a/src/screens/HyperSwitch/Home/HomeV2.res b/src/screens/HyperSwitch/Home/HomeV2.res
index 35b353a8a..f3a18de38 100644
--- a/src/screens/HyperSwitch/Home/HomeV2.res
+++ b/src/screens/HyperSwitch/Home/HomeV2.res
@@ -85,14 +85,10 @@ module QuickStart = {
         ) {
           if typedConnectorValue->Array.length >= 2 {
             let firstConnectorValue =
-              typedConnectorValue
-              ->Belt.Array.get(0)
-              ->Option.getWithDefault(getProcessorPayloadType(Dict.make()))
+              typedConnectorValue->Array.get(0)->Option.getOr(getProcessorPayloadType(Dict.make()))
 
             let secondConnectorValue =
-              typedConnectorValue
-              ->Belt.Array.get(1)
-              ->Option.getWithDefault(getProcessorPayloadType(Dict.make()))
+              typedConnectorValue->Array.get(1)->Option.getOr(getProcessorPayloadType(Dict.make()))
 
             let bodyOfFirstConnector: QuickStartTypes.processorType = {
               processorID: firstConnectorValue.merchant_connector_id,
@@ -126,9 +122,7 @@ module QuickStart = {
             setQuickStartPageState(_ => ConnectProcessor(CONFIGURE_SMART_ROUTING))
           } else if typedConnectorValue->Array.length === 1 {
             let firstConnectorValue =
-              typedConnectorValue
-              ->Belt.Array.get(0)
-              ->Option.getWithDefault(getProcessorPayloadType(Dict.make()))
+              typedConnectorValue->Array.get(0)->Option.getOr(getProcessorPayloadType(Dict.make()))
 
             let bodyOfFirstConnector: QuickStartTypes.processorType = {
               processorID: firstConnectorValue.merchant_connector_id,
diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUIUtils.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUIUtils.res
index fffa1464c..8a6be1ea9 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUIUtils.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUIUtils.res
@@ -21,7 +21,7 @@ module BaseComponent = {
             <Icon name=headerLeftIcon size=25 />
           </UIUtils.RenderIf>
           <UIUtils.RenderIf condition={customIcon->Option.isSome}>
-            {customIcon->Option.getWithDefault(React.null)}
+            {customIcon->Option.getOr(React.null)}
           </UIUtils.RenderIf>
           <p className=headerStyle> {headerText->React.string} </p>
         </div>
@@ -90,7 +90,7 @@ module VerticalChoiceTile = {
           <div className="flex justify-between items-center">
             <UIUtils.RenderIf condition={items.leftIcon->Option.isSome}>
               <Icon
-                name={items.leftIcon->Option.getWithDefault("hyperswitch-short")}
+                name={items.leftIcon->Option.getOr("hyperswitch-short")}
                 size=40
                 className="cursor-pointer"
               />
@@ -108,7 +108,7 @@ module VerticalChoiceTile = {
           <UIUtils.RenderIf condition={items.footerTags->Option.isSome}>
             <div className="flex gap-2 mt-6">
               {items.footerTags
-              ->Option.getWithDefault([])
+              ->Option.getOr([])
               ->Array.map(value =>
                 <div
                   className="p-2 text-xs border border-blue-700 border-opacity-30 bg-blue-700 bg-opacity-10 rounded-md">
@@ -163,9 +163,8 @@ module HorizontalChoiceTile = {
               className="cursor-pointer !text-blue-800"
             />
           </div>
-          <UIUtils.RenderIf
-            condition={items.imageLink->Option.getWithDefault("")->String.length > 0}>
-            <img alt="" src={items.imageLink->Option.getWithDefault("")} />
+          <UIUtils.RenderIf condition={items.imageLink->Option.getOr("")->String.length > 0}>
+            <img alt="" src={items.imageLink->Option.getOr("")} />
           </UIUtils.RenderIf>
           <div className="flex gap-2 items-center ">
             <p className=descriptionStyle> {items.description->React.string} </p>
diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
index 032278ef1..5c1e63ef9 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
@@ -120,7 +120,7 @@ let integrateYourAppArray: array<landingChoiceType> = [
   // },
 ]
 
-let getProcessorType: Js.Dict.t<'a> => processorType = value => {
+let getProcessorType: Dict.t<'a> => processorType = value => {
   open LogicUtils
   let processorID = value->getString("processor_id", "")
   let processorName = value->getString("processor_name", "")
@@ -129,18 +129,18 @@ let getProcessorType: Js.Dict.t<'a> => processorType = value => {
     processorName,
   }
 }
-let getRoutingType: Js.Dict.t<'a> => routingType = value => {
+let getRoutingType: Dict.t<'a> => routingType = value => {
   {
     routing_id: value->LogicUtils.getString("routing_id", ""),
   }
 }
-let getPaymentType: Js.Dict.t<'a> => paymentType = value => {
+let getPaymentType: Dict.t<'a> => paymentType = value => {
   {
     payment_id: value->LogicUtils.getString("payment_id", ""),
   }
 }
 
-let getIntegrationType: Js.Dict.t<'a> => integrationMethod = value => {
+let getIntegrationType: Dict.t<'a> => integrationMethod = value => {
   {
     integration_type: value->LogicUtils.getString("integration_type", ""),
   }
diff --git a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
index 32996ff43..296b61d63 100644
--- a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
+++ b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
@@ -11,14 +11,14 @@ let useFetchEnumDetails = () => {
           ~userType=#USER_DATA,
           ~methodType=Get,
           (),
-        )}?keys=${enumArray->Array.joinWith(",")}`
+        )}?keys=${enumArray->Array.joinWithUnsafe(",")}`
       let res = await fetchDetails(url)
       let responseDict = res->responseDataMapper
       setEnumVariantValues(._ => responseDict->Js.Json.object_->Js.Json.stringify)
       Js.Nullable.return(responseDict)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
         Js.Exn.raiseError(err)
       }
     }
@@ -77,7 +77,7 @@ let usePostEnumDetails = () => {
       Js.Nullable.return(updatedRecoilValueDict)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
         Js.Exn.raiseError(err)
       }
     }
diff --git a/src/screens/HyperSwitch/MixpanelHook.res b/src/screens/HyperSwitch/MixpanelHook.res
index 5a2741289..b76e4ceee 100644
--- a/src/screens/HyperSwitch/MixpanelHook.res
+++ b/src/screens/HyperSwitch/MixpanelHook.res
@@ -1,6 +1,6 @@
 type functionType = (
-  ~eventName: Js.String2.t=?,
-  ~email: Js.String.t=?,
+  ~eventName: string=?,
+  ~email: string=?,
   ~description: option<string>=?,
   unit,
 ) => unit
@@ -37,7 +37,7 @@ let useSendEvent = () => {
       "properties": {
         "token": mixpanelToken,
         "distinct_id": deviceId,
-        "$device_id": deviceId->String.split(":")->Belt.Array.get(1),
+        "$device_id": deviceId->String.split(":")->Array.get(1),
         "$screen_height": Screen.screenHeight,
         "$screen_width": Screen.screenWidth,
         "name": email,
@@ -58,10 +58,7 @@ let useSendEvent = () => {
       let _ = await fetchApi(
         `${dashboardUrl}/mixpanel/track`,
         ~method_=Fetch.Post,
-        ~bodyStr=`data=${body
-          ->Js.Json.stringifyAny
-          ->Option.getWithDefault("")
-          ->Js.Global.encodeURI}`,
+        ~bodyStr=`data=${body->Js.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 b9ee9f712..16156a490 100644
--- a/src/screens/HyperSwitch/Order/OrderEntity.res
+++ b/src/screens/HyperSwitch/Order/OrderEntity.res
@@ -263,7 +263,7 @@ let refundMetaitemToObjMapper = dict => {
 }
 
 let getRefundMetaData: Js.Json.t => refundMetaData = json => {
-  json->Js.Json.decodeObject->Option.getWithDefault(Dict.make())->refundMetaitemToObjMapper
+  json->Js.Json.decodeObject->Option.getOr(Dict.make())->refundMetaitemToObjMapper
 }
 
 let refunditemToObjMapper = dict => {
@@ -656,7 +656,7 @@ let getCellForAboutPayment = (
         ->Array.find(ele =>
           order.merchant_connector_id === ele->getString("merchant_connector_id", "")
         )
-        ->Option.getWithDefault(Dict.make())
+        ->Option.getOr(Dict.make())
         ->getString("connector_label", "")
 
       Text(connectorLabel)
@@ -683,9 +683,8 @@ let getCellForOtherDetails = (order, aboutPaymentColType, _): Table.cell => {
   | StatementDescriptorName => Text(order.statement_descriptor_name)
   | StatementDescriptorSuffix => Text(order.statement_descriptor_suffix)
   | PaymentExperience => Text(order.payment_experience)
-  | FirstName => Text(splittedName->Belt.Array.get(0)->Option.getWithDefault(""))
-  | LastName =>
-    Text(splittedName->Belt.Array.get(splittedName->Array.length - 1)->Option.getWithDefault(""))
+  | FirstName => Text(splittedName->Array.get(0)->Option.getOr(""))
+  | LastName => Text(splittedName->Array.get(splittedName->Array.length - 1)->Option.getOr(""))
   | Phone => Text(order.phone)
   | Email => Text(order.email)
   | CustomerId => Text(order.customer_id)
diff --git a/src/screens/HyperSwitch/Order/OrderRefundForm.res b/src/screens/HyperSwitch/Order/OrderRefundForm.res
index fdb9c8858..841542dd6 100644
--- a/src/screens/HyperSwitch/Order/OrderRefundForm.res
+++ b/src/screens/HyperSwitch/Order/OrderRefundForm.res
@@ -67,7 +67,7 @@ let make = (
       values
       ->Js.Json.decodeObject
       ->Belt.Option.map(Dict.toArray)
-      ->Option.getWithDefault([])
+      ->Option.getOr([])
       ->Belt.Array.keepMap(entry => {
         let (key, value) = entry
         switch value->Js.Json.classify {
@@ -90,7 +90,7 @@ let make = (
         let amountSplitArr =
           Js.Float.toFixedWithPrecision(amoutAvailableToRefund, ~digits=2)->String.split(".")
         let decimal = if amountSplitArr->Array.length > 1 {
-          amountSplitArr[1]->Option.getWithDefault("")
+          amountSplitArr[1]->Option.getOr("")
         } else {
           "00"
         }
diff --git a/src/screens/HyperSwitch/Order/OrderTypes.res b/src/screens/HyperSwitch/Order/OrderTypes.res
index 5c9ecbe41..9cc4e67ef 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: Js.Dict.t<Js.Json.t>,
+  metadata: Dict.t<Js.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 f34906551..4b7656a9b 100644
--- a/src/screens/HyperSwitch/Order/OrderUIUtils.res
+++ b/src/screens/HyperSwitch/Order/OrderUIUtils.res
@@ -186,7 +186,7 @@ let setData = (
   setScreenState,
   previewOnly,
 ) => {
-  let arr = Belt.Array.make(offset, Dict.make())
+  let arr = Array.make(~length=offset, Dict.make())
   if total <= offset {
     setOffset(_ => 0)
   }
@@ -218,7 +218,7 @@ let getOrdersList = async (
     Js.Json.t,
     Fetch.requestMethod,
     ~bodyFormData: Fetch.formData=?,
-    ~headers: Js.Dict.t<'a>=?,
+    ~headers: Dict.t<'a>=?,
     unit,
   ) => promise<Js.Json.t>,
   ~setOrdersData,
@@ -242,9 +242,9 @@ let getOrdersList = async (
       let payment_id =
         filterValueJson
         ->Dict.get("payment_id")
-        ->Option.getWithDefault(""->Js.Json.string)
+        ->Option.getOr(""->Js.Json.string)
         ->Js.Json.decodeString
-        ->Option.getWithDefault("")
+        ->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"), "")
diff --git a/src/screens/HyperSwitch/Order/Orders.res b/src/screens/HyperSwitch/Order/Orders.res
index 1b9cc7a2b..a4a8c198d 100644
--- a/src/screens/HyperSwitch/Order/Orders.res
+++ b/src/screens/HyperSwitch/Order/Orders.res
@@ -24,7 +24,7 @@ let make = (~previewOnly=false) => {
 
   let defaultValue: LoadedTable.pageDetails = {offset: 0, resultsPerPage: 10}
   let pageDetailDict = Recoil.useRecoilValueFromAtom(LoadedTable.table_pageDetails)
-  let pageDetail = pageDetailDict->Dict.get("Orders")->Option.getWithDefault(defaultValue)
+  let pageDetail = pageDetailDict->Dict.get("Orders")->Option.getOr(defaultValue)
   let (offset, setOffset) = React.useState(_ => pageDetail.offset)
   let {generateReport} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
 
diff --git a/src/screens/HyperSwitch/Order/ShowOrder.res b/src/screens/HyperSwitch/Order/ShowOrder.res
index 837a8d5d9..8d3e570ba 100644
--- a/src/screens/HyperSwitch/Order/ShowOrder.res
+++ b/src/screens/HyperSwitch/Order/ShowOrder.res
@@ -64,7 +64,7 @@ module OrderInfo = {
               <div className=widthClass key={i->string_of_int}>
                 <DisplayKeyValueParams
                   heading={getHeading(colType)}
-                  value={getCell(data, colType, connectorList->Option.getWithDefault([]))}
+                  value={getCell(data, colType, connectorList->Option.getOr([]))}
                   customMoneyStyle="!font-normal !text-sm"
                   labelMargin="!py-0 mt-2"
                   overiddingHeadingStyles="text-black text-sm font-medium"
@@ -804,9 +804,7 @@ let make = (~id) => {
                 renderContent: () => {
                   <div className="bg-white p-2">
                     <PaymentLogs.PrettyPrintJson
-                      jsonToDisplay={order.metadata
-                      ->Js.Json.stringifyAny
-                      ->Option.getWithDefault("")}
+                      jsonToDisplay={order.metadata->Js.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 9ca545e60..8f9c7e80e 100644
--- a/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
+++ b/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
@@ -54,7 +54,7 @@ module PrettyPrintJson = {
           <UIUtils.RenderIf condition={headerText->Option.isSome}>
             <div className="flex justify-between items-center">
               <p className="font-bold text-fs-16 text-jp-gray-900 text-opacity-75">
-                {headerText->Option.getWithDefault("")->React.string}
+                {headerText->Option.getOr("")->React.string}
               </p>
               {copyParsedJson}
             </div>
@@ -91,7 +91,7 @@ module PrettyPrintJson = {
       <UIUtils.RenderIf condition={parsedJson->isEmptyString}>
         <div className="flex flex-col justify-start items-start gap-2 h-25-rem">
           <p className="font-bold text-fs-16 text-jp-gray-900 text-opacity-75">
-            {headerText->Option.getWithDefault("")->React.string}
+            {headerText->Option.getOr("")->React.string}
           </p>
           <p className="font-normal text-fs-14 text-jp-gray-900 text-opacity-50">
             {"Failed to load!"->React.string}
@@ -347,7 +347,7 @@ let make = (~paymentId, ~createdAt) => {
       PageLoaderWrapper.Success
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       PageLoaderWrapper.Error(err)
     }
   }
@@ -369,7 +369,7 @@ let make = (~paymentId, ~createdAt) => {
       PageLoaderWrapper.Success
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       PageLoaderWrapper.Error(err)
     }
   }
@@ -388,7 +388,7 @@ let make = (~paymentId, ~createdAt) => {
       PageLoaderWrapper.Success
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       PageLoaderWrapper.Error(err)
     }
   }
@@ -470,7 +470,7 @@ let make = (~paymentId, ~createdAt) => {
       PageLoaderWrapper.Success
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       PageLoaderWrapper.Error(err)
     }
   }
diff --git a/src/screens/HyperSwitch/PaymentMethodListType.res b/src/screens/HyperSwitch/PaymentMethodListType.res
index 698eab49d..0e1a1af61 100644
--- a/src/screens/HyperSwitch/PaymentMethodListType.res
+++ b/src/screens/HyperSwitch/PaymentMethodListType.res
@@ -26,7 +26,7 @@ let getPaymentExperience = (dict, str) => {
   dict
   ->Dict.get(str)
   ->Option.flatMap(Js.Json.decodeArray)
-  ->Option.getWithDefault([])
+  ->Option.getOr([])
   ->Belt.Array.keepMap(Js.Json.decodeObject)
   ->Array.map(json => {
     {
@@ -44,7 +44,7 @@ let getBankNames = (dict, str) => {
   dict
   ->Dict.get(str)
   ->Option.flatMap(Js.Json.decodeArray)
-  ->Option.getWithDefault([])
+  ->Option.getOr([])
   ->Belt.Array.keepMap(Js.Json.decodeObject)
   ->Array.map(json => {
     {
@@ -58,6 +58,6 @@ let getAchConnectors = (dict, str) => {
   dict
   ->Dict.get(str)
   ->Option.flatMap(Js.Json.decodeObject)
-  ->Option.getWithDefault(Dict.make())
+  ->Option.getOr(Dict.make())
   ->getStrArray("elligible_connectors")
 }
diff --git a/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res b/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
index 8a479aa8b..e2946f51f 100644
--- a/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
+++ b/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
@@ -108,7 +108,7 @@ let make = () => {
       setDashboardPageState(_ => #AUTO_CONNECTOR_INTEGRATION)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       if err->String.includes("UR_19") {
         showToast(~toastType=ToastWarning, ~message="Please login again!", ~autoClose=false, ())
         setAuthStatus(LoggedOut)
@@ -158,8 +158,8 @@ let make = () => {
                   setCurrentStep
                   setCarouselDirection
                   currentQuestionDict={questionForSurvey
-                  ->Belt.Array.get(currentStep)
-                  ->Option.getWithDefault(defaultValueForQuestions)}
+                  ->Array.get(currentStep)
+                  ->Option.getOr(defaultValueForQuestions)}
                 />
               </FramerMotion.Motion.Div>
             </Form>
diff --git a/src/screens/HyperSwitch/Recon/Recon.res b/src/screens/HyperSwitch/Recon/Recon.res
index d53b3876d..04bb304fc 100644
--- a/src/screens/HyperSwitch/Recon/Recon.res
+++ b/src/screens/HyperSwitch/Recon/Recon.res
@@ -43,7 +43,7 @@ let make = () => {
       }
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to fetch Token!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to fetch Token!")
         setScreenState(_ => PageLoaderWrapper.Error(err))
       }
     }
diff --git a/src/screens/HyperSwitch/Refunds/Refund.res b/src/screens/HyperSwitch/Refunds/Refund.res
index 4a940c1b1..73a5d6217 100644
--- a/src/screens/HyperSwitch/Refunds/Refund.res
+++ b/src/screens/HyperSwitch/Refunds/Refund.res
@@ -12,7 +12,7 @@ let make = () => {
   let (filters, setFilters) = React.useState(_ => None)
   let defaultValue: LoadedTable.pageDetails = {offset: 0, resultsPerPage: 10}
   let pageDetailDict = Recoil.useRecoilValueFromAtom(LoadedTable.table_pageDetails)
-  let pageDetail = pageDetailDict->Dict.get("Refunds")->Option.getWithDefault(defaultValue)
+  let pageDetail = pageDetailDict->Dict.get("Refunds")->Option.getOr(defaultValue)
   let (offset, setOffset) = React.useState(_ => pageDetail.offset)
 
   React.useEffect3(() => {
diff --git a/src/screens/HyperSwitch/Refunds/RefundHook.res b/src/screens/HyperSwitch/Refunds/RefundHook.res
index 91f3b3c00..c7ad662fa 100644
--- a/src/screens/HyperSwitch/Refunds/RefundHook.res
+++ b/src/screens/HyperSwitch/Refunds/RefundHook.res
@@ -15,7 +15,7 @@ let useGetRefundData = (refundId, setScreenState) => {
       }
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/Refunds/RefundUtils.res b/src/screens/HyperSwitch/Refunds/RefundUtils.res
index e0267d442..82b7bc2ae 100644
--- a/src/screens/HyperSwitch/Refunds/RefundUtils.res
+++ b/src/screens/HyperSwitch/Refunds/RefundUtils.res
@@ -5,7 +5,7 @@ let getRefundsList = async (
     Js.Json.t,
     Fetch.requestMethod,
     ~bodyFormData: Fetch.formData=?,
-    ~headers: Js.Dict.t<'a>=?,
+    ~headers: Dict.t<'a>=?,
     unit,
   ) => promise<Js.Json.t>,
   ~setRefundsData,
@@ -23,7 +23,7 @@ let getRefundsList = async (
     let data = res->getDictFromJsonObject->getArrayFromDict("data", [])
     let total = res->getDictFromJsonObject->getInt("total_count", 0)
 
-    let arr = Belt.Array.make(offset, Dict.make())
+    let arr = Array.make(~length=offset, Dict.make())
     if total <= offset {
       setOffset(_ => 0)
     }
diff --git a/src/screens/HyperSwitch/Routing/DefaultRouting.res b/src/screens/HyperSwitch/Routing/DefaultRouting.res
index 37ba18cb4..4591cfb53 100644
--- a/src/screens/HyperSwitch/Routing/DefaultRouting.res
+++ b/src/screens/HyperSwitch/Routing/DefaultRouting.res
@@ -24,8 +24,8 @@ let make = () => {
 
     let connectorList =
       profileList
-      ->Belt.Array.get(0)
-      ->Option.getWithDefault(Js.Json.null)
+      ->Array.get(0)
+      ->Option.getOr(Js.Json.null)
       ->LogicUtils.getDictFromJsonObject
       ->LogicUtils.getArrayFromDict("connectors", [])
     if connectorList->Array.length > 0 {
@@ -50,7 +50,7 @@ let make = () => {
       settingUpConnectorsState(routingRespArray)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
@@ -84,7 +84,7 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+      let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }->ignore
   }
diff --git a/src/screens/HyperSwitch/Routing/PriorityRouting.res b/src/screens/HyperSwitch/Routing/PriorityRouting.res
index 73fddc448..00fd99e8c 100644
--- a/src/screens/HyperSwitch/Routing/PriorityRouting.res
+++ b/src/screens/HyperSwitch/Routing/PriorityRouting.res
@@ -57,7 +57,7 @@ module SimpleRoutingView = {
         setScreenState(_ => Success)
       } catch {
       | Js.Exn.Error(e) =>
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
         setScreenState(_ => PageLoaderWrapper.Error(err))
       }->ignore
     }
@@ -259,7 +259,7 @@ let make = (~routingRuleId, ~isActive) => {
       setScreenState(_ => Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/Routing/RoutingConfigure.res b/src/screens/HyperSwitch/Routing/RoutingConfigure.res
index 4416fe671..31fccf410 100644
--- a/src/screens/HyperSwitch/Routing/RoutingConfigure.res
+++ b/src/screens/HyperSwitch/Routing/RoutingConfigure.res
@@ -21,7 +21,7 @@ let make = (~routingType) => {
     let isActive =
       LogicUtils.getDictFromUrlSearchParams(searchParams)
       ->Dict.get("isActive")
-      ->Option.getWithDefault("")
+      ->Option.getOr("")
       ->LogicUtils.getBoolFromString(false)
     setIsActive(_ => isActive)
     None
diff --git a/src/screens/HyperSwitch/Routing/RoutingStack.res b/src/screens/HyperSwitch/Routing/RoutingStack.res
index da0d951b4..a470e883c 100644
--- a/src/screens/HyperSwitch/Routing/RoutingStack.res
+++ b/src/screens/HyperSwitch/Routing/RoutingStack.res
@@ -51,7 +51,7 @@ let make = (~remainingPath, ~previewOnly=false) => {
         configuredRules
         ->Js.Json.array
         ->Js.Json.decodeArray
-        ->Option.getWithDefault([])
+        ->Option.getOr([])
         ->Belt.Array.keepMap(Js.Json.decodeObject)
         ->Array.map(HistoryEntity.itemToObjMapper)
 
@@ -77,7 +77,7 @@ let make = (~remainingPath, ~previewOnly=false) => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
@@ -108,7 +108,7 @@ let make = (~remainingPath, ~previewOnly=false) => {
       }
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/Routing/RoutingUtils.res b/src/screens/HyperSwitch/Routing/RoutingUtils.res
index 37c686daa..0a7e288b8 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: Js.Dict.t<Js.Json.t> => wasmModule = "%identity"
+external toWasm: Dict.t<Js.Json.t> => wasmModule = "%identity"
 
 let defaultThreeDsObjectValue: routingOutputType = {
   override_3ds: "three_ds",
@@ -184,14 +184,13 @@ module SaveAndActivateButton = {
       try {
         let onSubmitResponse = await onSubmit(formState.values, false)
         let currentActivatedFromJson =
-          onSubmitResponse->Js.Nullable.toOption->Option.getWithDefault(Js.Json.null)
+          onSubmitResponse->Js.Nullable.toOption->Option.getOr(Js.Json.null)
         let currentActivatedId =
           currentActivatedFromJson->LogicUtils.getDictFromJsonObject->LogicUtils.getString("id", "")
         let _ = await handleActivateConfiguration(Some(currentActivatedId))
       } catch {
       | Js.Exn.Error(e) =>
-        let _ =
-          Js.Exn.message(e)->Option.getWithDefault("Failed to save and activate configuration!")
+        let _ = Js.Exn.message(e)->Option.getOr("Failed to save and activate configuration!")
       }
     }
     <Button
diff --git a/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res b/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res
index 83b062d15..078c93d37 100644
--- a/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res
+++ b/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res
@@ -252,14 +252,14 @@ let make = (~routingRuleId, ~isActive) => {
       setScreenState(_ => Success)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+        let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
         setScreenState(_ => PageLoaderWrapper.Error(err))
       }
     }
   }
 
   let validate = (values: Js.Json.t) => {
-    let errors = Js.Dict.empty()
+    let errors = Dict.make()
     let dict = values->getDictFromJsonObject
     let validateGateways = dict => {
       let gateways = dict->getArrayFromDict("data", [])
@@ -286,9 +286,9 @@ let make = (~routingRuleId, ~isActive) => {
       }
     }
 
-    let volumeBasedDistributionDict = dict->getObj("algorithm", Js.Dict.empty())
+    let volumeBasedDistributionDict = dict->getObj("algorithm", Dict.make())
     switch volumeBasedDistributionDict->validateGateways {
-    | Some(error) => errors->Js.Dict.set("Volume Based Distribution", error->Js.Json.string)
+    | Some(error) => errors->Dict.set("Volume Based Distribution", error->Js.Json.string)
     | None => ()
     }
     errors->Js.Json.object_
@@ -311,7 +311,7 @@ let make = (~routingRuleId, ~isActive) => {
       Js.Nullable.return(res)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong!")
+      let err = Js.Exn.message(e)->Option.getOr("Something went wrong!")
       showToast(~message="Failed to Save the Configuration !", ~toastType=ToastState.ToastError, ())
       setScreenState(_ => PageLoaderWrapper.Error(err))
       Js.Exn.raiseError(err)
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
index b183f644b..69b8bdaff 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
@@ -24,7 +24,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
   let selectedOptions = React.useMemo1(() => {
     gateWaysInput.value
     ->Js.Json.decodeArray
-    ->Option.getWithDefault([])
+    ->Option.getOr([])
     ->Belt.Array.keepMap(item => {
       Some(AdvancedRoutingUtils.connectorSelectionDataMapperFromJson(item))
     })
@@ -203,7 +203,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
                     name=key
                     onChange={ev => {
                       let val = ReactEvent.Form.target(ev)["value"]
-                      updatePercentage(item, val->Belt.Int.fromString->Option.getWithDefault(0))
+                      updatePercentage(item, val->Belt.Int.fromString->Option.getOr(0))
                     }}
                     value={item
                     ->AdvancedRoutingUtils.getSplitFromConnectorSelectionData
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
index 0740e0ee8..99f669c61 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: Js.Dict.t<Js.Json.t> => RoutingTypes.wasmModule = "%identity"
+external toWasm: Dict.t<Js.Json.t> => RoutingTypes.wasmModule = "%identity"
 
 module Add3DSCondition = {
   @react.component
@@ -293,7 +293,7 @@ module RuleBasedUI = {
     let addRule = (index, copy) => {
       let existingRules = ruleInput.value->getArrayFromJson([])
       let newRule = copy
-        ? existingRules[index]->Option.getWithDefault(defaultRule->Identity.genericTypeToJson)
+        ? existingRules[index]->Option.getOr(defaultRule->Identity.genericTypeToJson)
         : defaultRule->Identity.genericTypeToJson
       let newRules = existingRules->Array.concat([newRule])
       ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
@@ -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.getWithDefault([])
+            let rule = ruleInput.value->Js.Json.decodeArray->Option.getOr([])
             let keyExtractor = (index, _rule, isDragging) => {
               let id = {`${rulesJsonPath}[${string_of_int(index)}]`}
 
@@ -421,7 +421,7 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
       setFormState(_ => ViewConfig)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+      let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
       Js.Exn.raiseError(err)
     }
   }
@@ -453,7 +453,7 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
         setScreenState(_ => Success)
       } catch {
       | Js.Exn.Error(e) => {
-          let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+          let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
           setScreenState(_ => Error(err))
         }
       }
@@ -518,7 +518,7 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
       errors->Dict.set(`Rules`, "Minimum 1 rule needed"->Js.Json.string)
     } else {
       rulesArray->Array.forEachWithIndex((rule, i) => {
-        let connectorDetails = rule.connectorSelection.data->Option.getWithDefault([])
+        let connectorDetails = rule.connectorSelection.data->Option.getOr([])
 
         switch connectorDetails->validateGateways {
         | Some(error) =>
@@ -648,7 +648,7 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
       Js.Nullable.return(response)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       showToast(~message="Failed to Save the Configuration!", ~toastType=ToastState.ToastError, ())
       setShowModal(_ => false)
       setScreenState(_ => PageLoaderWrapper.Error(err))
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index 88c9dab8c..b2f6f4603 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -41,9 +41,9 @@ module OperatorInp = {
       input: ReactFinalForm.makeInputRecord(""->Js.Json.string, _e => ()),
       meta: ReactFinalForm.makeCustomError(None),
     }
-    let field = (fieldsArray->Belt.Array.get(0)->Option.getWithDefault(defaultInput)).input
-    let operator = (fieldsArray->Belt.Array.get(1)->Option.getWithDefault(defaultInput)).input
-    let valInp = (fieldsArray->Belt.Array.get(2)->Option.getWithDefault(defaultInput)).input
+    let field = (fieldsArray->Array.get(0)->Option.getOr(defaultInput)).input
+    let operator = (fieldsArray->Array.get(1)->Option.getOr(defaultInput)).input
+    let valInp = (fieldsArray->Array.get(2)->Option.getOr(defaultInput)).input
     let (opVals, setOpVals) = React.useState(_ => [])
 
     let input: ReactFinalForm.fieldRenderPropsInput = {
@@ -80,8 +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.getWithDefault("")->String.length === 0
+    let disableSelect = field.value->Js.Json.decodeString->Option.getOr("")->String.length === 0
 
     let operatorOptions = opVals->Array.map(opVal => {
       let obj: SelectBox.dropdownOption = {
@@ -110,13 +109,9 @@ module OperatorInp = {
 module ValueInp = {
   @react.component
   let make = (~fieldsArray: array<ReactFinalForm.fieldRenderProps>, ~variantValues, ~keyType) => {
-    let valueField = (
-      fieldsArray[1]->Option.getWithDefault(ReactFinalForm.fakeFieldRenderProps)
-    ).input
-    let opField = (fieldsArray[2]->Option.getWithDefault(ReactFinalForm.fakeFieldRenderProps)).input
-    let typeField = (
-      fieldsArray[3]->Option.getWithDefault(ReactFinalForm.fakeFieldRenderProps)
-    ).input
+    let valueField = (fieldsArray[1]->Option.getOr(ReactFinalForm.fakeFieldRenderProps)).input
+    let opField = (fieldsArray[2]->Option.getOr(ReactFinalForm.fakeFieldRenderProps)).input
+    let typeField = (fieldsArray[3]->Option.getOr(ReactFinalForm.fakeFieldRenderProps)).input
 
     React.useEffect1(() => {
       typeField.onChange(
@@ -187,9 +182,7 @@ module ValueInp = {
 module MetadataInp = {
   @react.component
   let make = (~fieldsArray: array<ReactFinalForm.fieldRenderProps>, ~keyType) => {
-    let valueField = (
-      fieldsArray[2]->Option.getWithDefault(ReactFinalForm.fakeFieldRenderProps)
-    ).input
+    let valueField = (fieldsArray[2]->Option.getOr(ReactFinalForm.fakeFieldRenderProps)).input
 
     let textInput: ReactFinalForm.fieldRenderPropsInput = {
       name: "string",
@@ -417,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.getWithDefault([])
+    let fields = conditionsInput.value->Js.Json.decodeArray->Option.getOr([])
     let plusBtnEnabled = true
     //fields->Array.every(validateConditionJson)
     let onPlusClick = _ => {
@@ -528,14 +521,13 @@ module SaveAndActivateButton = {
       try {
         let onSubmitResponse = await onSubmit(formState.values, false)
         let currentActivatedFromJson =
-          onSubmitResponse->Js.Nullable.toOption->Option.getWithDefault(Js.Json.null)
+          onSubmitResponse->Js.Nullable.toOption->Option.getOr(Js.Json.null)
         let currentActivatedId =
           currentActivatedFromJson->LogicUtils.getDictFromJsonObject->LogicUtils.getString("id", "")
         let _ = await handleActivateConfiguration(Some(currentActivatedId))
       } catch {
       | Js.Exn.Error(e) =>
-        let _err =
-          Js.Exn.message(e)->Option.getWithDefault("Failed to save and activate configuration!")
+        let _err = Js.Exn.message(e)->Option.getOr("Failed to save and activate configuration!")
       }
     }
     <Button
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
index afaabb1c2..6d437939b 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: Js.Dict.t<Js.Json.t> => AdvancedRoutingTypes.value = valueDict => {
+let getStatementValue: Dict.t<Js.Json.t> => AdvancedRoutingTypes.value = valueDict => {
   open LogicUtils
   {
     \"type": valueDict->getString("type", ""),
@@ -88,7 +88,7 @@ let getStatementValue: Js.Dict.t<Js.Json.t> => AdvancedRoutingTypes.value = valu
   }
 }
 
-let statementTypeMapper: Js.Dict.t<Js.Json.t> => AdvancedRoutingTypes.statement = dict => {
+let statementTypeMapper: Dict.t<Js.Json.t> => AdvancedRoutingTypes.statement = dict => {
   open LogicUtils
   {
     lhs: dict->getString("lhs", ""),
@@ -119,7 +119,7 @@ let conditionTypeMapper = (statementArr: array<Js.Json.t>) => {
   statements
 }
 
-let volumeSplitConnectorSelectionDataMapper: Js.Dict.t<
+let volumeSplitConnectorSelectionDataMapper: Dict.t<
   Js.Json.t,
 > => AdvancedRoutingTypes.volumeSplitConnectorSelectionData = dict => {
   open LogicUtils
@@ -134,7 +134,7 @@ let volumeSplitConnectorSelectionDataMapper: Js.Dict.t<
   }
 }
 
-let priorityConnectorSelectionDataMapper: Js.Dict.t<
+let priorityConnectorSelectionDataMapper: Dict.t<
   Js.Json.t,
 > => AdvancedRoutingTypes.connector = dict => {
   open LogicUtils
@@ -154,7 +154,7 @@ let connectorSelectionDataMapperFromJson: Js.Json.t => AdvancedRoutingTypes.conn
   }
 }
 
-let getDefaultSelection: Js.Dict.t<
+let getDefaultSelection: Dict.t<
   Js.Json.t,
 > => AdvancedRoutingTypes.connectorSelection = defaultSelection => {
   open LogicUtils
@@ -218,7 +218,7 @@ let getSplitFromConnectorSelectionData = connectorSelectionData => {
   }
 }
 
-let ruleInfoTypeMapper: Js.Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithmData = json => {
+let ruleInfoTypeMapper: Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithmData = json => {
   open LogicUtils
   let rulesArray = json->getArrayFromDict("rules", [])
 
@@ -278,7 +278,7 @@ let isStatementMandatoryFieldsPresent = (statement: AdvancedRoutingTypes.stateme
   statement.lhs->String.length > 0 && (statement.value.\"type"->String.length > 0 && statementValue)
 }
 
-let algorithmTypeMapper: Js.Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithm = values => {
+let algorithmTypeMapper: Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithm = values => {
   open LogicUtils
   {
     data: values->getDictfromDict("data")->ruleInfoTypeMapper,
@@ -312,8 +312,7 @@ let generateStatements = statements => {
     let statementDict = statement->getDictFromJsonObject
     let logicalOperator = statementDict->getString("logical", "")->String.toLowerCase
 
-    let lastItem =
-      acc->Belt.Array.get(acc->Array.length - 1)->Option.getWithDefault({condition: []})
+    let lastItem = acc->Array.get(acc->Array.length - 1)->Option.getOr({condition: []})
 
     let condition: AdvancedRoutingTypes.statement = {
       lhs: statementDict->getString("lhs", ""),
diff --git a/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res b/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res
index 1c8ef3b58..79ce2c846 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res
@@ -89,7 +89,7 @@ let make = (
   React.useEffect0(() => {
     form.change(
       "profile_id",
-      profile->Option.getWithDefault(defaultBusinessProfile.profile_id)->Js.Json.string,
+      profile->Option.getOr(defaultBusinessProfile.profile_id)->Js.Json.string,
     )
     None
   })
@@ -136,7 +136,7 @@ let make = (
                 <AddDataAttributes attributes=[("data-text", getStringFromJson(ip3.value, ""))]>
                   <span className="font-semibold">
                     <MerchantAccountUtils.BusinessProfile
-                      profile_id={profile->Option.getWithDefault(defaultBusinessProfile.profile_id)}
+                      profile_id={profile->Option.getOr(defaultBusinessProfile.profile_id)}
                     />
                   </span>
                 </AddDataAttributes>
@@ -151,8 +151,8 @@ let make = (
           <div className="w-full md:w-1/2 lg:w-1/3">
             <UIUtils.RenderIf condition={!isThreeDs}>
               <BusinessProfileInp
-                setProfile={setProfile->Option.getWithDefault(_ => ())}
-                profile={profile->Option.getWithDefault(defaultBusinessProfile.profile_id)}
+                setProfile={setProfile->Option.getOr(_ => ())}
+                profile={profile->Option.getOr(defaultBusinessProfile.profile_id)}
                 options={arrayOfBusinessProfile->businessProfileNameDropDownOption}
                 label="Profile"
                 routingType
diff --git a/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res b/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res
index 66819217f..e5b30b504 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/Previewers/RulePreviewer.res
@@ -17,7 +17,7 @@ module GatewayView = {
           {connectorStr->React.string}
           <UIUtils.RenderIf condition={percent->Option.isSome}>
             <span className="text-jp-gray-700 dark:text-jp-gray-600 ml-1">
-              {(percent->Option.getWithDefault(0)->string_of_int ++ "%")->React.string}
+              {(percent->Option.getOr(0)->string_of_int ++ "%")->React.string}
             </span>
           </UIUtils.RenderIf>
         </div>
@@ -41,13 +41,12 @@ let make = (~ruleInfo: algorithmData, ~isFrom3ds=false, ~isFromSurcharge=false)
             let statementsArr = rule.statements
             let headingText = `Rule ${string_of_int(index + 1)}`
             let marginStyle = index === ruleInfo.rules->Array.length - 1 ? "mt-2" : "my-2"
-            let threeDsType = rule.connectorSelection.override_3ds->Option.getWithDefault("")
+            let threeDsType = rule.connectorSelection.override_3ds->Option.getOr("")
 
             let surchargeType =
               rule.connectorSelection.surcharge_details->SurchargeUtils.getDefaultSurchargeType
-            let surchargePercent =
-              surchargeType.surcharge.value.percentage->Option.getWithDefault(0.0)
-            let surchargeAmount = surchargeType.surcharge.value.amount->Option.getWithDefault(0.0)
+            let surchargePercent = surchargeType.surcharge.value.percentage->Option.getOr(0.0)
+            let surchargeAmount = surchargeType.surcharge.value.amount->Option.getOr(0.0)
             let surchargeTypeValue = if surchargeAmount > 0.0 {
               surchargeAmount
             } else {
@@ -68,16 +67,16 @@ let make = (~ruleInfo: algorithmData, ~isFrom3ds=false, ~isFromSurcharge=false)
                     let comparison = statement.comparison
                     let typeString = statement.value.\"type"
 
-                    let logical = statement.logical->Option.getWithDefault("")
+                    let logical = statement.logical->Option.getOr("")
                     let operator = getOperatorFromComparisonType(comparison, typeString)
                     let field = statement.lhs
                     let metadataDict =
                       statement.metadata
-                      ->Option.getWithDefault(Dict.make()->Js.Json.object_)
+                      ->Option.getOr(Dict.make()->Js.Json.object_)
                       ->getDictFromJsonObject
 
                     let value = switch statement.value.value->Js.Json.classify {
-                    | JSONArray(arr) => arr->Array.joinWith(", ")
+                    | JSONArray(arr) => arr->Array.joinWithUnsafe(", ")
                     | JSONString(str) => str
                     | JSONNumber(num) => num->Belt.Float.toString
                     | JSONObject(obj) => obj->LogicUtils.getString("value", "")
@@ -102,9 +101,7 @@ let make = (~ruleInfo: algorithmData, ~isFrom3ds=false, ~isFromSurcharge=false)
                         <MakeRuleFieldComponent.TextView str=metadataKeyValue />
                       </UIUtils.RenderIf>
                       <UIUtils.RenderIf condition={metadataKey->Option.isSome}>
-                        <MakeRuleFieldComponent.TextView
-                          str={metadataKey->Option.getWithDefault("")}
-                        />
+                        <MakeRuleFieldComponent.TextView str={metadataKey->Option.getOr("")} />
                       </UIUtils.RenderIf>
                       <MakeRuleFieldComponent.TextView
                         str=operator fontColor="text-red-500" fontWeight="font-semibold"
@@ -124,13 +121,13 @@ let make = (~ruleInfo: algorithmData, ~isFrom3ds=false, ~isFromSurcharge=false)
                   </div>
                 </UIUtils.RenderIf>
                 <UIUtils.RenderIf condition={!isFrom3ds}>
-                  <GatewayView gateways={rule.connectorSelection.data->Option.getWithDefault([])} />
+                  <GatewayView gateways={rule.connectorSelection.data->Option.getOr([])} />
                 </UIUtils.RenderIf>
                 <UIUtils.RenderIf condition={isFromSurcharge}>
                   <div
                     className="my-2 h-6 md:h-8 flex items-center rounded-md border border-jp-gray-500 font-medium text-blue-800 hover:text-blue-900 bg-gradient-to-b from-jp-gray-250 to-jp-gray-200  focus:outline-none px-2 gap-1">
                     {`${surchargeType.surcharge.\"type"} -> ${surchargeTypeValue->Belt.Float.toString} | Tax on Surcharge -> ${surchargeType.tax_on_surcharge.percentage
-                      ->Option.getWithDefault(0.0)
+                      ->Option.getOr(0.0)
                       ->Belt.Float.toString}`
                     ->LogicUtils.capitalizeString
                     ->React.string}
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res b/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res
index f4d4ece71..d7bf18159 100644
--- a/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res
+++ b/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res
@@ -58,7 +58,7 @@ let initialValueForForm: HSwitchSettingTypes.profileEntity => SDKPaymentTypes.pa
 }
 
 let getCurrencyValue = (countryCurrency: string) => {
-  countryCurrency->String.split("-")->Belt.Array.get(1)->Option.getWithDefault("USD")->String.trim
+  countryCurrency->String.split("-")->Array.get(1)->Option.getOr("USD")->String.trim
 }
 
 let getTypedValueForPayment: Js.Json.t => SDKPaymentTypes.paymentType = values => {
diff --git a/src/screens/HyperSwitch/SDKPayment/TestPayment.res b/src/screens/HyperSwitch/SDKPayment/TestPayment.res
index ad0bd96bd..5602b9ad3 100644
--- a/src/screens/HyperSwitch/SDKPayment/TestPayment.res
+++ b/src/screens/HyperSwitch/SDKPayment/TestPayment.res
@@ -64,7 +64,7 @@ let make = (
   }
 
   React.useEffect1(() => {
-    let status = filtersFromUrl->Dict.get("status")->Option.getWithDefault("")->String.toLowerCase
+    let status = filtersFromUrl->Dict.get("status")->Option.getOr("")->String.toLowerCase
     let paymentIdFromPaymemtIntentClientSecret = getClientSecretFromPaymentId(
       ~paymentIntentClientSecret=url.search
       ->LogicUtils.getDictFromUrlSearchParams
diff --git a/src/screens/HyperSwitch/SDKPayment/WebSDK.res b/src/screens/HyperSwitch/SDKPayment/WebSDK.res
index c9c4c0c3e..a22d01bd0 100644
--- a/src/screens/HyperSwitch/SDKPayment/WebSDK.res
+++ b/src/screens/HyperSwitch/SDKPayment/WebSDK.res
@@ -51,14 +51,14 @@ module CheckoutForm = {
           paymentElement: paymentElem,
         }
         ->Js.Json.stringifyAny
-        ->Option.getWithDefault(""),
+        ->Option.getOr(""),
       }
       setError(_ => None)
 
       if saveViewToSdk {
         fetchApi(
           "https://4gla4dnvbg.execute-api.ap-south-1.amazonaws.com/default/hyperConfig",
-          ~bodyStr=val->Js.Json.stringifyAny->Option.getWithDefault(""),
+          ~bodyStr=val->Js.Json.stringifyAny->Option.getOr(""),
           ~headers=[("Access-Control-Allow-Origin", "*")]->Dict.fromArray,
           ~method_=Fetch.Post,
           (),
@@ -172,12 +172,12 @@ module CheckoutForm = {
         ->Js.Json.object_
       hyper.confirmPayment(confirmParams)
       ->then(val => {
-        let resDict = val->Js.Json.decodeObject->Option.getWithDefault(Dict.make())
+        let resDict = val->Js.Json.decodeObject->Option.getOr(Dict.make())
         let errorDict =
           resDict
           ->Dict.get("error")
           ->Option.flatMap(Js.Json.decodeObject)
-          ->Option.getWithDefault(Dict.make())
+          ->Option.getOr(Dict.make())
 
         let errorMsg = errorDict->Dict.get("message")
 
@@ -245,7 +245,7 @@ module CheckoutForm = {
             <div className="text-red-500">
               {val
               ->Js.Json.stringifyAny
-              ->Option.getWithDefault("")
+              ->Option.getOr("")
               ->String.replace("\"", "")
               ->String.replace("\"", "")
               ->React.string}
@@ -286,7 +286,7 @@ let make = (
   let loadDOM = async () => {
     try {
       let hyperswitchSdkPrefix =
-        Window.env.sdkBaseUrl->Option.getWithDefault(
+        Window.env.sdkBaseUrl->Option.getOr(
           "https://beta.hyperswitch.io/v1/HyperLoader.js?default=true",
         )
       let script = DOMUtils.document->DOMUtils.createElement("script")
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res
index aba2ea6bb..caa750d6a 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res
@@ -29,8 +29,8 @@ module CheckListSection = {
         updatedCheckList->Array.indexOf(
           updatedCheckList
           ->Array.filter(ele => ele.itemsVariants->Array.includes(pageView))
-          ->Belt.Array.get(0)
-          ->Option.getWithDefault(defaultValueOfCheckList),
+          ->Array.get(0)
+          ->Option.getOr(defaultValueOfCheckList),
         )
 
       switch (currentViewindex, clickedVariant) {
@@ -173,7 +173,7 @@ let make = () => {
         ->Array.find(ele => {
           ele->getDictFromJsonObject->getBool("SetupComplete", false)
         })
-        ->Option.getWithDefault(Js.Json.null)
+        ->Option.getOr(Js.Json.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.getWithDefault(Js.Json.null)
+        ->Option.getOr(Js.Json.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.getWithDefault(Js.Json.null)
+        ->Option.getOr(Js.Json.null)
 
       let connectorId =
         setupProcessorEnum
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
index ab4361d2c..ee23a0909 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
@@ -102,7 +102,7 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
       setScreenState(_ => Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong!")
+      let err = Js.Exn.message(e)->Option.getOr("Something went wrong!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
@@ -112,7 +112,7 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
   let (verifyErrorMessage, setVerifyErrorMessage) = React.useState(_ => None)
   let (verifyDone, setVerifyDone) = React.useState(_ => ConnectorTypes.NoAttempt)
 
-  let connectorID = url.path->Belt.List.toArray->Belt.Array.get(1)->Option.getWithDefault("")
+  let connectorID = url.path->Belt.List.toArray->Array.get(1)->Option.getOr("")
   let checkboxText = connectorVariant->ProdOnboardingUtils.getCheckboxText
   let (
     bodyType,
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res
index a0ebf2bc7..b852ea058 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res
@@ -5,7 +5,7 @@ module RequestPage = {
     open UserOnboardingUtils
     open APIUtils
 
-    let requestedValue = requestedPlatform->Option.getWithDefault("")->LogicUtils.capitalizeString
+    let requestedValue = requestedPlatform->Option.getOr("")->LogicUtils.capitalizeString
     let (isSubmitButtonEnabled, setIsSubmitButtonEnabled) = React.useState(_ => true)
     let showToast = ToastState.useShowToast()
     let updateDetails = useUpdateMethod()
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboarding.res b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboarding.res
index 54ec967c1..36d917618 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboarding.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboarding.res
@@ -73,7 +73,7 @@ let make = () => {
   let url = RescriptReactRouter.useUrl()
   let searchParams = url.search
   let filtersFromUrl =
-    LogicUtils.getDictFromUrlSearchParams(searchParams)->Dict.get("type")->Option.getWithDefault("")
+    LogicUtils.getDictFromUrlSearchParams(searchParams)->Dict.get("type")->Option.getOr("")
   let (currentRoute, setCurrentRoute) = React.useState(_ => OnboardingDefault)
   let {
     integrationDetails,
@@ -147,7 +147,7 @@ let make = () => {
       setDashboardPageState(_ => #HOME)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+      let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
       Js.Exn.raiseError(err)
     }
   }
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
index ba56d2944..b0688b7f5 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
@@ -36,7 +36,7 @@ module PaymentResponseHashKeyArea = {
     let detail = merchantDetailsValue->MerchantAccountUtils.getMerchantDetails
 
     <HelperComponents.KeyAndCopyArea
-      copyValue={detail.payment_response_hash_key->Option.getWithDefault("")}
+      copyValue={detail.payment_response_hash_key->Option.getOr("")}
     />
   }
 }
@@ -401,7 +401,7 @@ module LandingPageTileForIntegrateDocs = {
     let redirect = () => {
       if customRedirection->Option.isSome {
         RescriptReactRouter.replace(
-          `${HSwitchGlobalVars.hyperSwitchFEPrefix}/${customRedirection->Option.getWithDefault(
+          `${HSwitchGlobalVars.hyperSwitchFEPrefix}/${customRedirection->Option.getOr(
               "",
             )}?type=${url}`,
         )
@@ -441,20 +441,20 @@ module LandingPageTileForIntegrateDocs = {
             <Icon size=35 name=headerIcon className=customIconCss />
           }}
           <UIUtils.RenderIf condition={rightIcon->Option.isSome}>
-            {rightIcon->Option.getWithDefault(React.null)}
+            {rightIcon->Option.getOr(React.null)}
           </UIUtils.RenderIf>
           {leftSection}
         </div>
         <div className="flex flex-col gap-2">
           <p className=headerTextCss> {headerText->React.string} </p>
           <UIUtils.RenderIf condition={subText->Option.isSome}>
-            <p className=subTextCss> {subText->Option.getWithDefault("")->React.string} </p>
+            <p className=subTextCss> {subText->Option.getOr("")->React.string} </p>
           </UIUtils.RenderIf>
           <div>
             <UIUtils.RenderIf condition={subTextCustomValues->Option.isSome}>
               <div className={`flex flex-col gap-3 mt-4`}>
                 {subTextCustomValues
-                ->Option.getWithDefault([])
+                ->Option.getOr([])
                 ->Array.mapWithIndex((val, index) => {
                   <div key={index->string_of_int} className=subTextCss> {val->React.string} </div>
                 })
@@ -530,30 +530,30 @@ module Section = {
                 headerIcon=subSectionValue.headerIcon
                 customIconCss=subSectionValue.customIconCss
                 url=subSectionValue.url
-                displayFrontendLang={subSectionValue.displayFrontendLang->Option.getWithDefault("")}
-                displayBackendLang={subSectionValue.displayBackendLang->Option.getWithDefault("")}
+                displayFrontendLang={subSectionValue.displayFrontendLang->Option.getOr("")}
+                displayBackendLang={subSectionValue.displayBackendLang->Option.getOr("")}
               />
             : <LandingPageTileForIntegrateDocs
                 key={index->string_of_int}
                 headerIcon=subSectionValue.headerIcon
-                headerText={subSectionValue.headerText->Option.getWithDefault("")}
+                headerText={subSectionValue.headerText->Option.getOr("")}
                 subText=subSectionValue.subText
                 buttonText=subSectionValue.buttonText
                 customIconCss=subSectionValue.customIconCss
                 url=subSectionValue.url
-                isIconImg={subSectionValue.isIconImg->Option.getWithDefault(false)}
-                imagePath={subSectionValue.imagePath->Option.getWithDefault("")}
+                isIconImg={subSectionValue.isIconImg->Option.getOr(false)}
+                imagePath={subSectionValue.imagePath->Option.getOr("")}
                 leftSection={<LanguageTag
-                  frontendLang={subSectionValue.frontEndLang->Option.getWithDefault("")}
-                  backendLang={subSectionValue.backEndLang->Option.getWithDefault("")}
+                  frontendLang={subSectionValue.frontEndLang->Option.getOr("")}
+                  backendLang={subSectionValue.backEndLang->Option.getOr("")}
                 />}
                 isFromOnboardingChecklist
                 subTextCustomValues=subSectionValue.subTextCustomValues
-                buttonType={subSectionValue.buttonType->Option.getWithDefault(Secondary)}
-                isSkipButton={subSectionValue.isSkipButton->Option.getWithDefault(false)}
-                isTileVisible={subSectionValue.isTileVisible->Option.getWithDefault(true)}
+                buttonType={subSectionValue.buttonType->Option.getOr(Secondary)}
+                isSkipButton={subSectionValue.isSkipButton->Option.getOr(false)}
+                isTileVisible={subSectionValue.isTileVisible->Option.getOr(true)}
                 rightIcon={subSectionValue.rightIcon}
-                customRedirection={customRedirection->Option.getWithDefault("")}
+                customRedirection={customRedirection->Option.getOr("")}
               />
         })
         ->React.array}
diff --git a/src/screens/HyperSwitch/Settings/BusinessDetails.res b/src/screens/HyperSwitch/Settings/BusinessDetails.res
index 60d82bb68..0ec875297 100644
--- a/src/screens/HyperSwitch/Settings/BusinessDetails.res
+++ b/src/screens/HyperSwitch/Settings/BusinessDetails.res
@@ -72,7 +72,7 @@ let make = () => {
       let accountUrl = getURL(~entityName=MERCHANT_ACCOUNT, ~methodType=Post, ~id=uid, ())
       let merchantDetails = await updateDetails(
         accountUrl,
-        values->getSettingsPayload(uid->Option.getWithDefault("")),
+        values->getSettingsPayload(uid->Option.getOr("")),
         Post,
         (),
       )
diff --git a/src/screens/HyperSwitch/Settings/HSwitchSettingTypes.res b/src/screens/HyperSwitch/Settings/HSwitchSettingTypes.res
index 424420470..74e5e1b76 100644
--- a/src/screens/HyperSwitch/Settings/HSwitchSettingTypes.res
+++ b/src/screens/HyperSwitch/Settings/HSwitchSettingTypes.res
@@ -84,8 +84,8 @@ type colType =
 type apiModalState = Create | Update | Loading | SettingApiModalError | Success
 
 type parseMerchantJson = {
-  apiKeys: Js.Dict.t<Js.Json.t>,
-  merchantInfo: Js.Dict.t<Js.Json.t>,
+  apiKeys: Dict.t<Js.Json.t>,
+  merchantInfo: Dict.t<Js.Json.t>,
 }
 
 type validationFields =
diff --git a/src/screens/HyperSwitch/Settings/HSwitchSettings.res b/src/screens/HyperSwitch/Settings/HSwitchSettings.res
index 2304ff3c2..a96931e53 100644
--- a/src/screens/HyperSwitch/Settings/HSwitchSettings.res
+++ b/src/screens/HyperSwitch/Settings/HSwitchSettings.res
@@ -113,11 +113,11 @@ module PersonalSettings = {
           key={string_of_int(index)}
           heading={sections.heading}
           subHeading={sections.subHeading}
-          redirect={sections.redirect->Option.getWithDefault("")}
-          isComingSoon={sections.isComingSoon->Option.getWithDefault(false)}
-          buttonText={sections.buttonText->Option.getWithDefault("Add Details")}
+          redirect={sections.redirect->Option.getOr("")}
+          isComingSoon={sections.isComingSoon->Option.getOr(false)}
+          buttonText={sections.buttonText->Option.getOr("Add Details")}
           redirectUrl={sections.redirectUrl}
-          isApiCall={sections.isApiCall->Option.getWithDefault(false)}
+          isApiCall={sections.isApiCall->Option.getOr(false)}
           cardName={sections.cardName}
         />
       )
diff --git a/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res b/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res
index d66fcfb75..91b9b7003 100644
--- a/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res
+++ b/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res
@@ -259,7 +259,7 @@ let getSettingsPayload = (values: Js.Json.t, merchantId) => {
     valuesDict->getOptionString("primary_contact_person"),
   )
   let primaryEmail = valuesDict->getOptionString("primary_email")
-  if primaryEmail->Option.getWithDefault("")->String.length > 0 {
+  if primaryEmail->Option.getOr("")->String.length > 0 {
     merchantDetailsValue->setOptionString("primary_email", primaryEmail)
   }
   merchantDetailsValue->setOptionString(
@@ -271,7 +271,7 @@ let getSettingsPayload = (values: Js.Json.t, merchantId) => {
     valuesDict->getOptionString("secondary_contact_person"),
   )
   let secondaryEmail = valuesDict->getOptionString("secondary_email")
-  if secondaryEmail->Option.getWithDefault("")->String.length > 0 {
+  if secondaryEmail->Option.getOr("")->String.length > 0 {
     merchantDetailsValue->setOptionString(
       "secondary_email",
       valuesDict->getOptionString("secondary_email"),
@@ -405,7 +405,7 @@ let validateMerchantAccountForm = (
     value->String.length <= 0 ? key->validateEmptyValue(errors) : key->validateCustom(errors, value)
   })
 
-  setIsDisabled->Belt.Option.mapWithDefault((), disableBtn => {
+  setIsDisabled->Option.mapOr((), disableBtn => {
     let isValueChanged = checkValueChange(~initialDict, ~valuesDict)
     disableBtn(_ => !isValueChanged)
   })
@@ -462,7 +462,7 @@ let getValueFromBusinessProfile = businessProfileValue => {
     ->getArrayFromJson([])
     ->Js.Array2.reverseInPlace
     ->convertObjectToType
-  businessDetails->Belt.Array.get(0)->Option.getWithDefault(defaultValueForBusinessProfile)
+  businessDetails->Array.get(0)->Option.getOr(defaultValueForBusinessProfile)
 }
 
 let useGetBusinessProflile = profileId => {
@@ -470,7 +470,7 @@ let useGetBusinessProflile = profileId => {
   ->Recoil.useRecoilValueFromAtom
   ->getArrayOfBusinessProfile
   ->Array.find(profile => profile.profile_id == profileId)
-  ->Option.getWithDefault(defaultValueForBusinessProfile)
+  ->Option.getOr(defaultValueForBusinessProfile)
 }
 
 module BusinessProfile = {
@@ -504,7 +504,7 @@ let useFetchBusinessProfiles = () => {
       Js.Nullable.return(stringifiedResponse->getValueFromBusinessProfile)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
         Js.Exn.raiseError(err)
       }
     }
diff --git a/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccountUtils.res b/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccountUtils.res
index 4489cdf61..decc37a02 100644
--- a/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccountUtils.res
+++ b/src/screens/HyperSwitch/SetupAccount/HSwitchSetupAccountUtils.res
@@ -20,8 +20,7 @@ let constructBody = (~connectorName, ~json, ~profileId) => {
   open LogicUtils
   open ConnectorUtils
   let connectorAccountDict = json->getDictFromJsonObject->getDictfromDict("connector_auth")
-  let bodyType =
-    connectorAccountDict->Dict.keysToArray->Belt.Array.get(0)->Option.getWithDefault("")
+  let bodyType = connectorAccountDict->Dict.keysToArray->Array.get(0)->Option.getOr("")
 
   let connectorAccountDetails =
     [("auth_type", bodyType->Js.Json.string), ("api_key", "test"->Js.Json.string)]
diff --git a/src/screens/HyperSwitch/Sidebar/Sidebar.res b/src/screens/HyperSwitch/Sidebar/Sidebar.res
index 7de7f5fae..87b92c0df 100644
--- a/src/screens/HyperSwitch/Sidebar/Sidebar.res
+++ b/src/screens/HyperSwitch/Sidebar/Sidebar.res
@@ -116,7 +116,7 @@ module SidebarItem = {
 
     | RemoteLink(tabOption) => {
         let {name, icon, link, access, ?remoteIcon} = tabOption
-        let (remoteUi, link) = if remoteIcon->Option.getWithDefault(false) {
+        let (remoteUi, link) = if remoteIcon->Option.getOr(false) {
           (<Icon name="external-link-alt" size=14 className="ml-3" />, link)
         } else {
           (React.null, `${link}${getSearchParamByLink(link)}`)
@@ -145,9 +145,9 @@ module SidebarItem = {
               <SidebarOption name icon isExpanded isSelected />
               <UIUtils.RenderIf condition={isExpanded}>
                 <Icon
-                  size={iconSize->Option.getWithDefault(26)}
+                  size={iconSize->Option.getOr(26)}
                   name=iconTag
-                  className={`ml-2 ${iconStyles->Option.getWithDefault("w-26 h-26")}`}
+                  className={`ml-2 ${iconStyles->Option.getOr("w-26 h-26")}`}
                 />
               </UIUtils.RenderIf>
             </div>
@@ -205,9 +205,9 @@ module NestedSidebarItem = {
                   <UIUtils.RenderIf condition={iconTag->Option.isSome && isSideBarExpanded}>
                     <div className=linkTagPadding>
                       <Icon
-                        size={iconSize->Option.getWithDefault(26)}
-                        name={iconTag->Option.getWithDefault("")}
-                        className={iconStyles->Option.getWithDefault("w-26 h-26")}
+                        size={iconSize->Option.getOr(26)}
+                        name={iconTag->Option.getOr("")}
+                        className={iconStyles->Option.getOr("w-26 h-26")}
                       />
                     </div>
                   </UIUtils.RenderIf>
diff --git a/src/screens/HyperSwitch/Sidebar/SidebarProvider.res b/src/screens/HyperSwitch/Sidebar/SidebarProvider.res
index a14fa6524..2f5da663d 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.getWithDefault(""))
+  "sidebar"->LocalStorage.setItem(localStorageData->Js.Json.stringifyAny->Option.getOr(""))
 }
 
 let getFromSidebarDetails = key => {
diff --git a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res
index 33a12c2d4..e1445ba8c 100644
--- a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res
+++ b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res
@@ -53,7 +53,7 @@ let make = () => {
       let enums =
         (await getEnumDetails(QuickStartUtils.quickStartEnumIntialArray))
         ->Js.Nullable.toOption
-        ->Option.getWithDefault(Dict.make())
+        ->Option.getOr(Dict.make())
         ->Js.Json.object_
         ->QuickStartUtils.getTypedValueFromDict
 
diff --git a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res
index fb43561be..9fbd3e789 100644
--- a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res
+++ b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res
@@ -35,7 +35,7 @@ module SelectPaymentMethods = {
         let _ = await StringEnumType(connectorChoiceValue)->postEnumDetails(configurationType)
       } catch {
       | Js.Exn.Error(e) => {
-          let err = Js.Exn.message(e)->Option.getWithDefault("Failed to update!")
+          let err = Js.Exn.message(e)->Option.getOr("Failed to update!")
           Js.Exn.raiseError(err)
         }
       }
diff --git a/src/screens/HyperSwitch/Surcharge/Surcharge.res b/src/screens/HyperSwitch/Surcharge/Surcharge.res
index 02c1600ec..f781ac3b8 100644
--- a/src/screens/HyperSwitch/Surcharge/Surcharge.res
+++ b/src/screens/HyperSwitch/Surcharge/Surcharge.res
@@ -2,7 +2,7 @@ module ActiveRulePreview = {
   open LogicUtils
   @react.component
   let make = (~initialRule) => {
-    let rule = initialRule->Option.getWithDefault(Dict.make())
+    let rule = initialRule->Option.getOr(Dict.make())
 
     let name = rule->getString("name", "")
     let description = rule->getString("description", "")
@@ -41,7 +41,7 @@ module ConfigureSurchargeRule = {
 
     let addRule = (index, _copy) => {
       let existingRules = ruleInput.value->LogicUtils.getArrayFromJson([])
-      let newRule = existingRules[index]->Option.getWithDefault(Js.Json.null)
+      let newRule = existingRules[index]->Option.getOr(Js.Json.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.getWithDefault([])
+        let rule = ruleInput.value->Js.Json.decodeArray->Option.getOr([])
         let keyExtractor = (index, _rule, isDragging) => {
           let id = {`algorithm.rules[${string_of_int(index)}]`}
           <AdvancedRouting.Wrapper
@@ -134,7 +134,7 @@ let make = () => {
       setInitialRule(_ => Some(intitialValue))
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+      let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
       Js.Exn.raiseError(err)
     }
   }
@@ -147,7 +147,7 @@ let make = () => {
       setScreenState(_ => Success)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+        let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
         if err->String.includes("HE_02") {
           setShowWarning(_ => false)
           setPageView(_ => LANDING)
@@ -181,7 +181,7 @@ let make = () => {
       setScreenState(_ => Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       showToast(~message=err, ~toastType=ToastError, ())
     }
     Js.Nullable.null
diff --git a/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res b/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
index 503ce2857..b1c7f964e 100644
--- a/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
+++ b/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
@@ -59,7 +59,7 @@ let getTypedSurchargeConnectorSelection = ruleDict => {
   AdvancedRoutingUtils.getDefaultSelection(connectorsDict)
 }
 
-let ruleInfoTypeMapper: Js.Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithmData = json => {
+let ruleInfoTypeMapper: Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithmData = json => {
   open LogicUtils
   let rulesArray = json->getArrayFromDict("rules", [])
 
@@ -90,17 +90,17 @@ let ruleInfoTypeMapper: Js.Dict.t<Js.Json.t> => AdvancedRoutingTypes.algorithmDa
 
 let getDefaultSurchargeType = surchargeType => {
   surchargeType
-  ->Option.getWithDefault(Js.Nullable.null)
+  ->Option.getOr(Js.Nullable.null)
   ->Js.Nullable.toOption
-  ->Option.getWithDefault(defaultSurcharge)
+  ->Option.getOr(defaultSurcharge)
 }
 
 let validateSurchargeRate = ruleDict => {
   let connectorSelection = ruleDict->getTypedSurchargeConnectorSelection
 
   let surchargeType = getDefaultSurchargeType(connectorSelection.surcharge_details)
-  let surchargeValuePercent = surchargeType.surcharge.value.percentage->Option.getWithDefault(0.0)
-  let surchargeValueAmount = surchargeType.surcharge.value.amount->Option.getWithDefault(0.0)
+  let surchargeValuePercent = surchargeType.surcharge.value.percentage->Option.getOr(0.0)
+  let surchargeValueAmount = surchargeType.surcharge.value.amount->Option.getOr(0.0)
   let isSurchargeAmountValid = if surchargeType.surcharge.\"type" == "rate" {
     surchargeValuePercent == 0.0 || surchargeValuePercent > 100.0
   } else {
diff --git a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
index 712bb6193..96392b350 100644
--- a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
+++ b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
@@ -159,7 +159,7 @@ module ExternalUser = {
         let extractMerchantObject =
           typedValueOfResponse
           ->Array.find(ele => ele.merchant_id === defaultMerchantId)
-          ->Option.getWithDefault({
+          ->Option.getOr({
             merchant_id: defaultMerchantId,
             merchant_name: defaultMerchantId,
           })
diff --git a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
index 09978325e..291e989f2 100644
--- a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
+++ b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
@@ -1,11 +1,11 @@
 open RoutingTypes
-external toWasm: Js.Dict.t<Js.Json.t> => wasmModule = "%identity"
+external toWasm: Dict.t<Js.Json.t> => wasmModule = "%identity"
 
 module ActiveRulePreview = {
   open LogicUtils
   @react.component
   let make = (~initialRule) => {
-    let ruleInfo = initialRule->Option.getWithDefault(Dict.make())
+    let ruleInfo = initialRule->Option.getOr(Dict.make())
     let name = ruleInfo->getString("name", "")
     let description = ruleInfo->getString("description", "")
 
@@ -46,7 +46,7 @@ module Configure3DSRule = {
     }, [rules])
     let addRule = (index, _copy) => {
       let existingRules = ruleInput.value->LogicUtils.getArrayFromJson([])
-      let newRule = existingRules[index]->Option.getWithDefault(Js.Json.null)
+      let newRule = existingRules[index]->Option.getOr(Js.Json.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.getWithDefault([])
+        let rule = ruleInput.value->Js.Json.decodeArray->Option.getOr([])
         let keyExtractor = (index, _rule, isDragging) => {
           let id = {`algorithm.rules[${string_of_int(index)}]`}
           let i = 1
@@ -140,7 +140,7 @@ let make = () => {
       setInitialRule(_ => Some(intitialValue))
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+      let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
       Js.Exn.raiseError(err)
     }
   }
@@ -153,7 +153,7 @@ let make = () => {
       setScreenState(_ => Success)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
+        let err = Js.Exn.message(e)->Option.getOr("Something went wrong")
         if err->String.includes("HE_02") {
           setShowWarning(_ => false)
           setPageView(_ => LANDING)
@@ -173,9 +173,7 @@ let make = () => {
   React.useEffect1(() => {
     let searchParams = url.search
     let filtersFromUrl =
-      LogicUtils.getDictFromUrlSearchParams(searchParams)
-      ->Dict.get("type")
-      ->Option.getWithDefault("")
+      LogicUtils.getDictFromUrlSearchParams(searchParams)->Dict.get("type")->Option.getOr("")
     setPageView(_ => filtersFromUrl->pageStateMapper)
     None
   }, [url.search])
@@ -199,7 +197,7 @@ let make = () => {
       setScreenState(_ => Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => Error(err))
     }
     Js.Nullable.null
diff --git a/src/screens/HyperSwitch/UserManagement/InviteUsers.res b/src/screens/HyperSwitch/UserManagement/InviteUsers.res
index dd84a4d9b..ce39b3eb8 100644
--- a/src/screens/HyperSwitch/UserManagement/InviteUsers.res
+++ b/src/screens/HyperSwitch/UserManagement/InviteUsers.res
@@ -9,7 +9,9 @@ module InviteEmailForm = {
     let (roleListData, setRoleListData) = React.useState(_ => [])
 
     let emailList =
-      ReactFinalForm.useField("emailList").input.value->getArrayFromJson([])->Array.joinWith(",")
+      ReactFinalForm.useField("emailList").input.value
+      ->getArrayFromJson([])
+      ->Array.joinWithUnsafe(",")
     let role =
       ReactFinalForm.useField(`roleType`).input.value
       ->getArrayFromJson([])
@@ -119,7 +121,7 @@ let make = () => {
         | Js.Json.JSONObject(jsonDict) => {
             let passwordFromResponse = jsonDict->getString("password", "")
             [
-              ("email", emailList[index]->Option.getWithDefault("")->Js.Json.string),
+              ("email", emailList[index]->Option.getOr("")->Js.Json.string),
               ("password", passwordFromResponse->Js.Json.string),
             ]->getJsonFromArrayOfJson
           }
@@ -187,7 +189,7 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
         setScreenState(_ => PageLoaderWrapper.Error(err))
       }
     }
@@ -198,7 +200,7 @@ let make = () => {
     if roleTypeValue->Option.isNone {
       getRoleForUser(permissionInfoValue)->ignore
     } else {
-      settingUpValues(roleTypeValue->Option.getWithDefault(Js.Json.null), permissionInfoValue)
+      settingUpValues(roleTypeValue->Option.getOr(Js.Json.null), permissionInfoValue)
     }
   }
 
diff --git a/src/screens/HyperSwitch/UserManagement/ShowUserData.res b/src/screens/HyperSwitch/UserManagement/ShowUserData.res
index 2e5ff9c29..7558f4bbe 100644
--- a/src/screens/HyperSwitch/UserManagement/ShowUserData.res
+++ b/src/screens/HyperSwitch/UserManagement/ShowUserData.res
@@ -91,7 +91,7 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
-      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => PageLoaderWrapper.Error(err))
     }
   }
diff --git a/src/screens/HyperSwitch/UserManagement/UserManagementUtils.res b/src/screens/HyperSwitch/UserManagement/UserManagementUtils.res
index 1b069e741..80f6cb2fc 100644
--- a/src/screens/HyperSwitch/UserManagement/UserManagementUtils.res
+++ b/src/screens/HyperSwitch/UserManagement/UserManagementUtils.res
@@ -37,7 +37,7 @@ let validateForm = (values, ~fieldsToValidate: array<string>) => {
       key->validateEmptyValue(errors)
     } else {
       value->Array.forEach(ele => {
-        if ele->Js.Json.decodeString->Option.getWithDefault("")->HSwitchUtils.isValidEmail {
+        if ele->Js.Json.decodeString->Option.getOr("")->HSwitchUtils.isValidEmail {
           errors->Dict.set("email", "Please enter a valid email"->Js.Json.string)
         }
       })
@@ -77,7 +77,7 @@ let getArrayOfPermissionData = json => {
   json
   ->LogicUtils.getDictFromJsonObject
   ->LogicUtils.getArrayFromDict("permissions", [])
-  ->Array.map(i => i->Js.Json.decodeString->Option.getWithDefault(""))
+  ->Array.map(i => i->Js.Json.decodeString->Option.getOr(""))
 }
 
 let updatePresentInInfoList = (infoData, permissionsData) => {
@@ -151,7 +151,7 @@ module RolePermissionValueRenderer = {
   }
 }
 
-let roleListResponseMapper: Js.Dict.t<Js.Json.t> => UserRoleEntity.roleListResponse = dict => {
+let roleListResponseMapper: Dict.t<Js.Json.t> => UserRoleEntity.roleListResponse = dict => {
   open LogicUtils
   {
     role_id: dict->getString("role_id", ""),
diff --git a/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res b/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res
index 49c74a73f..d513ca34a 100644
--- a/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res
+++ b/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res
@@ -57,7 +57,7 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => {
           RescriptReactRouter.replace(sidebarOption.link)
         }
       }
-      let subOptionsArray = sidebarOption.subOptions->Option.getWithDefault([])
+      let subOptionsArray = sidebarOption.subOptions->Option.getOr([])
       <div
         key={i->string_of_int}
         className={`p-6 border-y border-gray-200 cursor-pointer ${background}`}
diff --git a/src/screens/HyperSwitch/Utils/HSwitchGlobalSearchBar.res b/src/screens/HyperSwitch/Utils/HSwitchGlobalSearchBar.res
index 4b62a0045..899fa072e 100644
--- a/src/screens/HyperSwitch/Utils/HSwitchGlobalSearchBar.res
+++ b/src/screens/HyperSwitch/Utils/HSwitchGlobalSearchBar.res
@@ -1,7 +1,7 @@
 let matchInSearchOption = (searchOptions, searchText, name, link, ~sectionName, ()) => {
   open LogicUtils
   searchOptions
-  ->Option.getWithDefault([])
+  ->Option.getOr([])
   ->Array.filter(item => {
     let (searchKey, _redirection) = item
     checkStringStartsWithSubstring(~itemToCheck=searchKey, ~searchText)
@@ -273,8 +273,7 @@ let make = () => {
                             <div className=activeClasses>
                               {elementsArray
                               ->Array.mapWithIndex((item, index) => {
-                                let elementValue =
-                                  item->Js.Json.decodeString->Option.getWithDefault("")
+                                let elementValue = item->Js.Json.decodeString->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 84eb0ba0f..84895b6a8 100644
--- a/src/screens/HyperSwitch/Utils/HSwitchUtils.res
+++ b/src/screens/HyperSwitch/Utils/HSwitchUtils.res
@@ -50,7 +50,7 @@ module BackgroundImageWrapper = {
           ~backgroundSize=`cover`,
           (),
         )}>
-        {children->Option.getWithDefault(React.null)}
+        {children->Option.getOr(React.null)}
       </div>
     </UIUtils.RenderIf>
   }
@@ -64,16 +64,14 @@ let setMerchantDetails = (key, value) => {
   let localStorageData = getInfoFromLocalStorage(~lStorageKey="merchant")
   localStorageData->Dict.set(key, value)
 
-  "merchant"->LocalStorage.setItem(
-    localStorageData->Js.Json.stringifyAny->Option.getWithDefault(""),
-  )
+  "merchant"->LocalStorage.setItem(localStorageData->Js.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.getWithDefault(""))
+  "user"->LocalStorage.setItem(localStorageData->Js.Json.stringifyAny->Option.getOr(""))
 }
 let getSearchOptionsForProcessors = (~processorList, ~getNameFromString) => {
   let searchOptionsForProcessors =
@@ -96,7 +94,7 @@ let useMerchantDetailsValue = () =>
 let getClientCountry = clientTimeZone => {
   Country.country
   ->Array.find(item => item.timeZones->Array.find(i => i == clientTimeZone)->Option.isSome)
-  ->Option.getWithDefault(Country.defaultTimeZone)
+  ->Option.getOr(Country.defaultTimeZone)
 }
 
 let getBrowswerDetails = () => {
diff --git a/src/screens/componentsDemo/DragNDropDemo.res b/src/screens/componentsDemo/DragNDropDemo.res
index fd7697d0c..d2d81b85e 100644
--- a/src/screens/componentsDemo/DragNDropDemo.res
+++ b/src/screens/componentsDemo/DragNDropDemo.res
@@ -49,7 +49,7 @@ type props = {
 let default = (props: props) => {
   let {listItems, setListItems, keyExtractor} = props
 
-  let isHorizontal = props.isHorizontal->Option.getWithDefault(true)
+  let isHorizontal = props.isHorizontal->Option.getOr(true)
 
   let onDragEnd = result => {
     // dropped outside the list
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res
index 2da15c7fd..7221bc886 100644
--- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res
+++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res
@@ -153,7 +153,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType,
           }
         | (_, ResetPassword) => {
             let queryDict = url.search->getDictFromUrlSearchParams
-            let password_reset_token = queryDict->Dict.get("token")->Option.getWithDefault("")
+            let password_reset_token = queryDict->Dict.get("token")->Option.getOr("")
             let password = getString(valuesDict, "create_password", "")
             let body = getResetpasswordBodyJson(password, password_reset_token)
             setResetPassword(body)
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
index 0aa64e185..30ab29bbd 100644
--- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
+++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
@@ -108,7 +108,7 @@ let getEmailBody = (email, ~country=?, ()) => {
 let parseResponseJson = (~json, ~email) => {
   open HSwitchUtils
   open LogicUtils
-  let valuesDict = json->Js.Json.decodeObject->Option.getWithDefault(Dict.make())
+  let valuesDict = json->Js.Json.decodeObject->Option.getOr(Dict.make())
 
   // * Setting all local storage values
   setMerchantDetails(
@@ -125,8 +125,7 @@ let parseResponseJson = (~json, ~email) => {
   //     : valuesDict->getBool("is_metadata_filled", true)->getStringFromBool->Js.Json.string,
   // )
 
-  let verificationValue =
-    valuesDict->getOptionInt("verification_days_left")->Option.getWithDefault(-1)
+  let verificationValue = valuesDict->getOptionInt("verification_days_left")->Option.getOr(-1)
 
   setMerchantDetails("verification", verificationValue->Belt.Int.toString->Js.Json.string)
   valuesDict->getString("token", "")
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchEmailVerifyScreen.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchEmailVerifyScreen.res
index daf4e25f5..b51b611e8 100644
--- a/src/screens/login/HSwitchLoginFlow/HyperSwitchEmailVerifyScreen.res
+++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchEmailVerifyScreen.res
@@ -1,7 +1,6 @@
 let generateBody = (url: RescriptReactRouter.url) => {
   let body = Dict.make()
-  let val =
-    url.search->LogicUtils.getDictFromUrlSearchParams->Dict.get("token")->Option.getWithDefault("")
+  let val = url.search->LogicUtils.getDictFromUrlSearchParams->Dict.get("token")->Option.getOr("")
 
   body->Dict.set("token", val->Js.Json.string)
   body->Js.Json.object_
@@ -22,8 +21,7 @@ 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.getWithDefault(Dict.make())->getString("email", "")
+      let email = res->Js.Json.decodeObject->Option.getOr(Dict.make())->getString("email", "")
       let token = HyperSwitchAuthUtils.parseResponseJson(~json=res, ~email)
       if !(token->isEmptyString) && !(email->isEmptyString) {
         setAuthStatus(LoggedIn(HyperSwitchAuthTypes.getDummyAuthInfoForToken(token)))
@@ -35,7 +33,7 @@ let make = (~setAuthType, ~setAuthStatus, ~authType) => {
       }
     } catch {
     | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Verification Failed")
+        let err = Js.Exn.message(e)->Option.getOr("Verification Failed")
         setErrorMessage(_ => err)
         setAuthStatus(LoggedOut)
       }
diff --git a/src/server/NodeJs.res b/src/server/NodeJs.res
index 6a13d8ffb..01b2e9a67 100644
--- a/src/server/NodeJs.res
+++ b/src/server/NodeJs.res
@@ -34,7 +34,7 @@ module Http = {
 
   type on = (. string, unit => unit) => unit
   type read = (. unit) => Js.Nullable.t<string>
-  type headers = Js.Dict.t<string>
+  type headers = Dict.t<string>
   type server
   type request = {url: url, headers: headers, method: string, on: on, read: read}
 
diff --git a/src/server/Server.res b/src/server/Server.res
index 73d4c35e3..f58722ec1 100644
--- a/src/server/Server.res
+++ b/src/server/Server.res
@@ -1,5 +1,5 @@
 @val @scope("process")
-external env: Js.Dict.t<string> = "env"
+external env: Dict.t<string> = "env"
 
 let appName = env->Dict.get("appName")
 
@@ -44,21 +44,20 @@ external execSync: (string, encodeType) => string = "execSync"
 
 @val external nullableGitCommitStr: option<string> = "GIT_COMMIT_HASH"
 
-let currentCommitHash = nullableGitCommitStr->Option.getWithDefault("no-commit-hash")
+let currentCommitHash = nullableGitCommitStr->Option.getOr("no-commit-hash")
 
 let serverHandler: Http.serverHandler = (request, response) => {
   open Belt.Option
   let arr = request.url.toString(.)->String.split("?")
   let path =
     arr
-    ->Belt.Array.get(0)
+    ->Array.get(0)
     ->getWithDefault("")
     ->String.replaceRegExp(%re("/^\/\//"), "/")
     ->String.replaceRegExp(%re("/^\/v4\//"), "/")
 
   if path === "/config/merchant-access" && request.method === "POST" {
-    let path =
-      env->Dict.get("configPath")->Option.getWithDefault("dist/server/config/FeatureFlag.json")
+    let path = env->Dict.get("configPath")->Option.getOr("dist/server/config/FeatureFlag.json")
     Promise.make((resolve, _reject) => {
       configHandler(request, response, true, path)
       ()->resolve(. _)
@@ -119,8 +118,7 @@ let serverHandler: Http.serverHandler = (request, response) => {
 let serverHandlerWrapper = (req, res) => {
   try {serverHandler(req, res)} catch {
   | err => {
-      let err =
-        err->Js.Exn.asJsExn->Option.flatMap(Js.Exn.message)->Option.getWithDefault("Error Found")
+      let err = err->Js.Exn.asJsExn->Option.flatMap(Js.Exn.message)->Option.getOr("Error Found")
       res.writeHead(. 200, Http.makeHeader({"Content-Type": "text/plain"}))
       `Error : ${err}`->res.write(. _)
       res.end(.)
diff --git a/src/utils/AnalyticsNewUtils.res b/src/utils/AnalyticsNewUtils.res
index 3b8b8dc41..fafa820b4 100644
--- a/src/utils/AnalyticsNewUtils.res
+++ b/src/utils/AnalyticsNewUtils.res
@@ -57,10 +57,10 @@ let makeFilters = (~filters: Js.Json.t, ~cardinalityArr) => {
     })
   let expressionArr = Array.concat(cardinalityArr, expressionArr)
   if expressionArr->Array.length === 1 {
-    expressionArr->Belt.Array.get(0)
+    expressionArr->Array.get(0)
   } else if expressionArr->Array.length > 1 {
-    let leftInitial = Array.pop(expressionArr)->Option.getWithDefault(Dict.make())->Js.Json.object_
-    let rightInitial = Array.pop(expressionArr)->Option.getWithDefault(Dict.make())->Js.Json.object_
+    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 complexFilterDict = Dict.fromArray([
       ("and", Dict.fromArray([("left", leftInitial), ("right", rightInitial)])->Js.Json.object_),
@@ -110,12 +110,12 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getWithDefault("")->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->Js.Json.string),
                   ("condition", "NotEquals"->Js.Json.string),
                   (
                     "val",
                     value[1]
-                    ->Option.getWithDefault("")
+                    ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
                     ->Js.Json.string,
                   ),
@@ -132,12 +132,12 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getWithDefault("")->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->Js.Json.string),
                   ("condition", "Greater"->Js.Json.string),
                   (
                     "val",
                     value[1]
-                    ->Option.getWithDefault("")
+                    ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
                     ->Js.Json.string,
                   ),
@@ -154,12 +154,12 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getWithDefault("")->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->Js.Json.string),
                   ("condition", "Less"->Js.Json.string),
                   (
                     "val",
                     value[1]
-                    ->Option.getWithDefault("")
+                    ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
                     ->Js.Json.string,
                   ),
@@ -176,12 +176,12 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getWithDefault("")->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->Js.Json.string),
                   ("condition", "GreaterThanEquall"->Js.Json.string),
                   (
                     "val",
                     value[1]
-                    ->Option.getWithDefault("")
+                    ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
                     ->Js.Json.string,
                   ),
@@ -198,12 +198,12 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getWithDefault("")->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->Js.Json.string),
                   ("condition", "LessThanEqual"->Js.Json.string),
                   (
                     "val",
                     value[1]
-                    ->Option.getWithDefault("")
+                    ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
                     ->Js.Json.string,
                   ),
@@ -220,12 +220,12 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getWithDefault("")->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->Js.Json.string),
                   ("condition", "Equals"->Js.Json.string),
                   (
                     "val",
                     value[1]
-                    ->Option.getWithDefault("")
+                    ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
                     ->Js.Json.string,
                   ),
@@ -242,12 +242,12 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getWithDefault("")->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->Js.Json.string),
                   ("condition", "In"->Js.Json.string),
                   (
                     "val",
                     value[1]
-                    ->Option.getWithDefault("")
+                    ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
                     ->String.replaceRegExp(%re("/\(/g"), "")
                     ->String.replaceRegExp(%re("/\)/g"), "")
@@ -268,12 +268,12 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getWithDefault("")->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->Js.Json.string),
                   ("condition", "NotIn"->Js.Json.string),
                   (
                     "val",
                     value[1]
-                    ->Option.getWithDefault("")
+                    ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
                     ->String.replaceRegExp(%re("/\(/g"), "")
                     ->String.replaceRegExp(%re("/\)/g"), "")
@@ -294,12 +294,12 @@ let getFilterBody = (
             if value->Array.length >= 2 {
               Some(
                 Dict.fromArray([
-                  ("field", value[0]->Option.getWithDefault("")->Js.Json.string),
+                  ("field", value[0]->Option.getOr("")->Js.Json.string),
                   ("condition", "Like"->Js.Json.string),
                   (
                     "val",
                     value[1]
-                    ->Option.getWithDefault("")
+                    ->Option.getOr("")
                     ->String.replaceRegExp(%re("/'/gi"), "")
                     ->Js.Json.string,
                   ),
@@ -315,11 +315,11 @@ let getFilterBody = (
         ->Belt.Array.keepMap(item => item)
 
       if filterValueArr->Array.length === 1 {
-        filterValueArr->Belt.Array.get(0)
+        filterValueArr->Array.get(0)
       } else if filterValueArr->Array.length >= 2 {
-        let leftInitial = filterValueArr[0]->Option.getWithDefault(Dict.make())
-        let rightInitial = filterValueArr[1]->Option.getWithDefault(Dict.make())
-        let conditionInitital = andAndOr->Belt.Array.get(0)->Option.getWithDefault("and")
+        let leftInitial = filterValueArr[0]->Option.getOr(Dict.make())
+        let rightInitial = filterValueArr[1]->Option.getOr(Dict.make())
+        let conditionInitital = andAndOr->Array.get(0)->Option.getOr("and")
         let complexFilterDict = Dict.fromArray([
           (
             conditionInitital,
@@ -335,7 +335,7 @@ let getFilterBody = (
         filterValueArr->Array.forEachWithIndex((item, index) => {
           let complextFilterDictCopy = complexFilterDict->Dict.toArray->Array.copy->Dict.fromArray
           complexFilterDict->Dict.set(
-            andAndOr->Belt.Array.get(index)->Option.getWithDefault("and"),
+            andAndOr->Array.get(index)->Option.getOr("and"),
             Dict.fromArray([
               ("left", complextFilterDictCopy->Js.Json.object_),
               ("right", item->Js.Json.object_),
@@ -393,7 +393,7 @@ let getFilterBody = (
           ])->Js.Json.object_,
         ),
       ])
-    | false => jsonFormattedFilter->Js.Json.decodeObject->Option.getWithDefault(Dict.make())
+    | false => jsonFormattedFilter->Js.Json.decodeObject->Option.getOr(Dict.make())
     }
   | None => filterValue
   }
@@ -455,7 +455,7 @@ let apiBodyMaker = (
   | _ => []
   }
 
-  let activeTabArr = groupBy->Option.getWithDefault([])->Array.map(Js.Json.string)
+  let activeTabArr = groupBy->Option.getOr([])->Array.map(Js.Json.string)
   finalBody->Dict.set("metric", metric->Js.Json.string)
   let filterVal = getFilterBody(
     filterValueFromUrl,
diff --git a/src/utils/DateRangeUtils.res b/src/utils/DateRangeUtils.res
index f29dd9b3c..aa34ae330 100644
--- a/src/utils/DateRangeUtils.res
+++ b/src/utils/DateRangeUtils.res
@@ -168,14 +168,14 @@ let convertTimeStamp = (~isoStringToCustomTimeZone, timestamp, format) => {
 
 let changeTimeFormat = (~customTimezoneToISOString, ~date, ~time, ~format) => {
   let dateSplit = String.split(date, "T")
-  let date = dateSplit[0]->Option.getWithDefault("")->String.split("-")
-  let dateDay = date[2]->Option.getWithDefault("")
-  let dateYear = date[0]->Option.getWithDefault("")
-  let dateMonth = date[1]->Option.getWithDefault("")
+  let date = dateSplit[0]->Option.getOr("")->String.split("-")
+  let dateDay = date[2]->Option.getOr("")
+  let dateYear = date[0]->Option.getOr("")
+  let dateMonth = date[1]->Option.getOr("")
   let timeSplit = String.split(time, ":")
-  let timeHour = timeSplit->Belt.Array.get(0)->Option.getWithDefault("00")
-  let timeMinute = timeSplit->Belt.Array.get(1)->Option.getWithDefault("00")
-  let timeSecond = timeSplit->Belt.Array.get(2)->Option.getWithDefault("00")
+  let timeHour = timeSplit->Array.get(0)->Option.getOr("00")
+  let timeMinute = timeSplit->Array.get(1)->Option.getOr("00")
+  let timeSecond = timeSplit->Array.get(2)->Option.getOr("00")
   let dateTimeCheck = customTimezoneToISOString(
     dateYear,
     dateMonth,
diff --git a/src/utils/DateTimeUtils.res b/src/utils/DateTimeUtils.res
index 7705ecaa7..c7081ff80 100644
--- a/src/utils/DateTimeUtils.res
+++ b/src/utils/DateTimeUtils.res
@@ -90,11 +90,11 @@ let getStartEndDiff = (startDate, endDate) => {
 let isStartBeforeEndDate = (start, end) => {
   let getDate = date => {
     let datevalue = Js.Date.makeWithYMD(
-      ~year=Js.Float.fromString(date[0]->Option.getWithDefault("")),
+      ~year=Js.Float.fromString(date[0]->Option.getOr("")),
       ~month=Js.Float.fromString(
-        String.make(Js.Float.fromString(date[1]->Option.getWithDefault("")) -. 1.0),
+        String.make(Js.Float.fromString(date[1]->Option.getOr("")) -. 1.0),
       ),
-      ~date=Js.Float.fromString(date[2]->Option.getWithDefault("")),
+      ~date=Js.Float.fromString(date[2]->Option.getOr("")),
       (),
     )
     datevalue
diff --git a/src/utils/DictionaryUtils.res b/src/utils/DictionaryUtils.res
index e2452df34..8f1717589 100644
--- a/src/utils/DictionaryUtils.res
+++ b/src/utils/DictionaryUtils.res
@@ -1,4 +1,4 @@
-let deleteKey = (dictionary: Js.Dict.t<'a>, key: string) => {
+let deleteKey = (dictionary: Dict.t<'a>, key: string) => {
   dictionary
   ->Dict.toArray
   ->Belt.Array.keepMap(entry => {
@@ -8,7 +8,7 @@ let deleteKey = (dictionary: Js.Dict.t<'a>, key: string) => {
   ->Dict.fromArray
 }
 
-let deleteKeys = (dictionary: Js.Dict.t<'a>, keys: array<string>) => {
+let deleteKeys = (dictionary: Dict.t<'a>, keys: array<string>) => {
   let updatedDict =
     dictionary
     ->Dict.toArray
@@ -21,7 +21,7 @@ let deleteKeys = (dictionary: Js.Dict.t<'a>, keys: array<string>) => {
   updatedDict
 }
 
-let mergeDicts = (arrDict: array<Js.Dict.t<'a>>) => {
+let mergeDicts = (arrDict: array<Dict.t<'a>>) => {
   arrDict
   ->Array.reduce([], (acc, dict) => {
     acc->Array.concat(dict->Dict.toArray)
diff --git a/src/utils/HSwitchGlobalVars.res b/src/utils/HSwitchGlobalVars.res
index a1f4fac3d..c07292ea1 100644
--- a/src/utils/HSwitchGlobalVars.res
+++ b/src/utils/HSwitchGlobalVars.res
@@ -1,6 +1,6 @@
 @val external appVersion: string = "appVersion"
 
-let mixpanelToken = Window.env.mixpanelToken->Option.getWithDefault("mixpanel-token")
+let mixpanelToken = Window.env.mixpanelToken->Option.getOr("mixpanel-token")
 
 type hostType = Live | Sandbox | Local | Netlify
 
@@ -28,7 +28,7 @@ let netlifyUrl = Netlify->getHostURLFromVariant
 
 let isHyperSwitchDashboard = GlobalVars.dashboardAppName === #hyperswitch
 
-let hyperSwitchApiPrefix = Window.env.apiBaseUrl->Option.getWithDefault("/api")
+let hyperSwitchApiPrefix = Window.env.apiBaseUrl->Option.getOr("/api")
 
 let dashboardUrl = switch hostType {
 | Live => Live->getHostURLFromVariant
diff --git a/src/utils/HyperSwitchUtils.res b/src/utils/HyperSwitchUtils.res
index 2a3d184fb..e667a5e1c 100644
--- a/src/utils/HyperSwitchUtils.res
+++ b/src/utils/HyperSwitchUtils.res
@@ -1,5 +1,5 @@
 let fetchRequestIdFromAPI = res => {
-  Fetch.Headers.get("x-request-id")(res->Fetch.Response.headers)->Option.getWithDefault("")
+  Fetch.Headers.get("x-request-id")(res->Fetch.Response.headers)->Option.getOr("")
 }
 
 let getMixpanelRouteName = (pageTitle, url: RescriptReactRouter.url) => {
@@ -21,17 +21,13 @@ let getMixpanelRouteName = (pageTitle, url: RescriptReactRouter.url) => {
   | (list{"routing", routingType}, _) => `/${pageTitle}/${routingType}/oldrouting`
   | (list{"settings"}, searchParamValue) => {
       let type_ =
-        LogicUtils.getDictFromUrlSearchParams(searchParamValue)
-        ->Dict.get("type")
-        ->Option.getWithDefault("")
+        LogicUtils.getDictFromUrlSearchParams(searchParamValue)->Dict.get("type")->Option.getOr("")
       `/${pageTitle}/${type_}`
     }
 
   | (list{"onboarding"}, searchParamValue) => {
       let type_ =
-        LogicUtils.getDictFromUrlSearchParams(searchParamValue)
-        ->Dict.get("type")
-        ->Option.getWithDefault("")
+        LogicUtils.getDictFromUrlSearchParams(searchParamValue)->Dict.get("type")->Option.getOr("")
       `/${pageTitle}/${type_}`
     }
 
diff --git a/src/utils/JsonFlattenUtils.res b/src/utils/JsonFlattenUtils.res
index b60c24aed..7d0a5be52 100644
--- a/src/utils/JsonFlattenUtils.res
+++ b/src/utils/JsonFlattenUtils.res
@@ -39,9 +39,9 @@ let rec setNested = (dict, keys, value) => {
   if keys->Array.length === 0 {
     ()
   } else if keys->Array.length === 1 {
-    Dict.set(dict, keys[0]->Option.getWithDefault(""), value)
+    Dict.set(dict, keys[0]->Option.getOr(""), value)
   } else {
-    let key = keys[0]->Option.getWithDefault("")
+    let key = keys[0]->Option.getOr("")
     let subDict = switch Dict.get(dict, key) {
     | Some(json) =>
       switch json->Js.Json.decodeObject {
diff --git a/src/utils/LogicUtils.res b/src/utils/LogicUtils.res
index 7fbdc57a9..a30ec59ff 100644
--- a/src/utils/LogicUtils.res
+++ b/src/utils/LogicUtils.res
@@ -33,7 +33,7 @@ let safeParseOpt = st => {
 }
 // parse a string into json and return json with null default
 let safeParse = st => {
-  safeParseOpt(st)->Option.getWithDefault(Js.Json.null)
+  safeParseOpt(st)->Option.getOr(Js.Json.null)
 }
 
 type numericComparisionType =
@@ -99,15 +99,14 @@ let toCamelCase = str => {
 let getNameFromEmail = email => {
   email
   ->String.split("@")
-  ->Belt.Array.get(0)
-  ->Option.getWithDefault("")
+  ->Array.get(0)
+  ->Option.getOr("")
   ->String.split(".")
   ->Array.map(name => {
     if name == "" {
       name
     } else {
-      name->String.get(0)->Option.getWithDefault("")->String.toUpperCase ++
-        name->String.sliceToEnd(~start=1)
+      name->String.get(0)->Option.getOr("")->String.toUpperCase ++ name->String.sliceToEnd(~start=1)
     }
   })
   ->Array.joinWith(" ")
@@ -118,19 +117,19 @@ let getOptionString = (dict, key) => {
 }
 
 let getString = (dict, key, default) => {
-  getOptionString(dict, key)->Option.getWithDefault(default)
+  getOptionString(dict, key)->Option.getOr(default)
 }
 
 let getStringFromJson = (json: Js.Json.t, default) => {
-  json->Js.Json.decodeString->Option.getWithDefault(default)
+  json->Js.Json.decodeString->Option.getOr(default)
 }
 
 let getBoolFromJson = (json, defaultValue) => {
-  json->Js.Json.decodeBoolean->Option.getWithDefault(defaultValue)
+  json->Js.Json.decodeBoolean->Option.getOr(defaultValue)
 }
 
 let getArrayFromJson = (json: Js.Json.t, default) => {
-  json->Js.Json.decodeArray->Option.getWithDefault(default)
+  json->Js.Json.decodeArray->Option.getOr(default)
 }
 
 let getOptionalArrayFromDict = (dict, key) => {
@@ -138,7 +137,7 @@ let getOptionalArrayFromDict = (dict, key) => {
 }
 
 let getArrayFromDict = (dict, key, default) => {
-  dict->getOptionalArrayFromDict(key)->Option.getWithDefault(default)
+  dict->getOptionalArrayFromDict(key)->Option.getOr(default)
 }
 
 let getArrayDataFromJson = (json, itemToObjMapper) => {
@@ -153,8 +152,8 @@ let getArrayDataFromJson = (json, itemToObjMapper) => {
 let getStrArray = (dict, key) => {
   dict
   ->getOptionalArrayFromDict(key)
-  ->Option.getWithDefault([])
-  ->Belt.Array.map(json => json->Js.Json.decodeString->Option.getWithDefault(""))
+  ->Option.getOr([])
+  ->Array.map(json => json->Js.Json.decodeString->Option.getOr(""))
 }
 
 let getStrArrayFromJsonArray = jsonArr => {
@@ -162,7 +161,7 @@ let getStrArrayFromJsonArray = jsonArr => {
 }
 
 let getStrArryFromJson = arr => {
-  arr->Js.Json.decodeArray->Belt.Option.map(getStrArrayFromJsonArray)->Option.getWithDefault([])
+  arr->Js.Json.decodeArray->Belt.Option.map(getStrArrayFromJsonArray)->Option.getOr([])
 }
 
 let getOptionStrArrayFromJson = json => {
@@ -170,7 +169,7 @@ let getOptionStrArrayFromJson = json => {
 }
 
 let getStrArrayFromDict = (dict, key, default) => {
-  dict->Dict.get(key)->Option.flatMap(getOptionStrArrayFromJson)->Option.getWithDefault(default)
+  dict->Dict.get(key)->Option.flatMap(getOptionStrArrayFromJson)->Option.getOr(default)
 }
 
 let getOptionStrArrayFromDict = (dict, key) => {
@@ -198,11 +197,11 @@ let getOptionBool = (dict, key) => {
 }
 
 let getBool = (dict, key, default) => {
-  getOptionBool(dict, key)->Option.getWithDefault(default)
+  getOptionBool(dict, key)->Option.getOr(default)
 }
 
 let getJsonObjectFromDict = (dict, key) => {
-  dict->Dict.get(key)->Option.getWithDefault(Js.Json.object_(Dict.make()))
+  dict->Dict.get(key)->Option.getOr(Js.Json.object_(Dict.make()))
 }
 
 let getBoolFromString = (boolString, default: bool) => {
@@ -293,11 +292,11 @@ let getFloat = (dict, key, default) => {
   dict
   ->Dict.get(key)
   ->Belt.Option.map(json => getFloatFromJson(json, default))
-  ->Option.getWithDefault(default)
+  ->Option.getOr(default)
 }
 
 let getObj = (dict, key, default) => {
-  dict->Dict.get(key)->Option.flatMap(Js.Json.decodeObject)->Option.getWithDefault(default)
+  dict->Dict.get(key)->Option.flatMap(Js.Json.decodeObject)->Option.getOr(default)
 }
 
 let getDictFromUrlSearchParams = searchParams => {
@@ -316,18 +315,16 @@ let getDictFromUrlSearchParams = searchParams => {
   ->Dict.fromArray
 }
 let setOptionString = (dict, key, optionStr) =>
-  optionStr->Belt.Option.mapWithDefault((), str => dict->Dict.set(key, str->Js.Json.string))
+  optionStr->Option.mapOr((), str => dict->Dict.set(key, str->Js.Json.string))
 
 let setOptionBool = (dict, key, optionInt) =>
-  optionInt->Belt.Option.mapWithDefault((), bool => dict->Dict.set(key, bool->Js.Json.boolean))
+  optionInt->Option.mapOr((), bool => dict->Dict.set(key, bool->Js.Json.boolean))
 
 let setOptionArray = (dict, key, optionArray) =>
-  optionArray->Belt.Option.mapWithDefault((), array => dict->Dict.set(key, array->Js.Json.array))
+  optionArray->Option.mapOr((), array => dict->Dict.set(key, array->Js.Json.array))
 
 let setOptionDict = (dict, key, optionDictValue) =>
-  optionDictValue->Belt.Option.mapWithDefault((), value =>
-    dict->Dict.set(key, value->Js.Json.object_)
-  )
+  optionDictValue->Option.mapOr((), value => dict->Dict.set(key, value->Js.Json.object_))
 
 let capitalizeString = str => {
   String.toUpperCase(String.charAt(str, 0)) ++ Js.String2.substringToEnd(str, ~from=1)
@@ -371,11 +368,11 @@ let titleToSnake = str => {
 }
 
 let getIntFromString = (str, default) => {
-  str->Belt.Int.fromString->Option.getWithDefault(default)
+  str->Belt.Int.fromString->Option.getOr(default)
 }
 
 let removeTrailingZero = (numeric_str: string) => {
-  numeric_str->Belt.Float.fromString->Option.getWithDefault(0.)->Belt.Float.toString
+  numeric_str->Belt.Float.fromString->Option.getOr(0.)->Belt.Float.toString
 }
 
 let shortNum = (
@@ -448,8 +445,7 @@ let latencyShortNum = (~labelValue: float, ~includeMilliseconds=?, ()) => {
       ""
     }
     let millisec_disp = if (
-      (labelValue < 1.0 ||
-        (includeMilliseconds->Option.getWithDefault(false) && labelValue < 60.0)) &&
+      (labelValue < 1.0 || (includeMilliseconds->Option.getOr(false) && labelValue < 60.0)) &&
         labelValue > 0.0
     ) {
       `.${String.make(mod((labelValue *. 1000.0)->Belt.Int.fromFloat, 1000))}`
@@ -512,8 +508,7 @@ let getDictfromDict = (dict, key) => {
 
 let checkLeapYear = year => (mod(year, 4) === 0 && mod(year, 100) !== 0) || mod(year, 400) === 0
 
-let getValueFromArray = (arr, index, default) =>
-  arr->Belt.Array.get(index)->Option.getWithDefault(default)
+let getValueFromArray = (arr, index, default) => arr->Array.get(index)->Option.getOr(default)
 
 let isEqualStringArr = (arr1, arr2) => {
   let arr1 = arr1->getUniqueArray
@@ -548,7 +543,7 @@ let getObjectArrayFromJson = json => {
 }
 
 let getListHead = (~default="", list) => {
-  list->Belt.List.head->Option.getWithDefault(default)
+  list->Belt.List.head->Option.getOr(default)
 }
 
 let dataMerge = (~dataArr: array<array<Js.Json.t>>, ~dictKey: array<string>) => {
diff --git a/src/utils/Modal.res b/src/utils/Modal.res
index 9de65a4c5..c8073d8cc 100644
--- a/src/utils/Modal.res
+++ b/src/utils/Modal.res
@@ -162,7 +162,7 @@ module ModalOverlay = {
     let attributeId =
       addAttributeId === ""
         ? switch modalHeading {
-          | Some(_heading) => `:${modalHeading->Option.getWithDefault("")}`
+          | Some(_heading) => `:${modalHeading->Option.getOr("")}`
           | None => ""
           }
         : `:${addAttributeId}`
diff --git a/src/utils/NumericUtils.res b/src/utils/NumericUtils.res
index ee285ec84..fec6c5949 100644
--- a/src/utils/NumericUtils.res
+++ b/src/utils/NumericUtils.res
@@ -3,7 +3,7 @@
 let pretty = (range: array<float>, n: int) => {
   if range->Array.length === 2 {
     let range = if range[0] === range[1] {
-      [0., range[1]->Option.getWithDefault(0.)]
+      [0., range[1]->Option.getOr(0.)]
     } else {
       range
     }
@@ -12,9 +12,7 @@ let pretty = (range: array<float>, n: int) => {
     let shrink_sml = 0.75
     let high_u_bias = 1.5
     let u5_bias = 0.5 +. 1.5 *. high_u_bias
-    let d = Js.Math.abs_float(
-      range[0]->Option.getWithDefault(0.) -. range[1]->Option.getWithDefault(0.),
-    )
+    let d = Js.Math.abs_float(range[0]->Option.getOr(0.) -. range[1]->Option.getOr(0.))
 
     let c = if Js.Math.log(d) /. Js.Math._LN10 < -2. {
       Js.Math.abs_float(d) *. shrink_sml /. min_n
@@ -44,21 +42,20 @@ let pretty = (range: array<float>, n: int) => {
     }
 
     let ticks = []
-    let i = if range[0]->Option.getWithDefault(0.) <= unit.contents {
+    let i = if range[0]->Option.getOr(0.) <= unit.contents {
       0.
     } else {
-      let i123 =
-        Js.Math.floor_float(range[0]->Option.getWithDefault(0.) /. unit.contents) *. unit.contents
+      let i123 = Js.Math.floor_float(range[0]->Option.getOr(0.) /. unit.contents) *. unit.contents
 
       i123
       ->Js.Float.toFixedWithPrecision(~digits=base_toFixed)
       ->Belt.Float.fromString
-      ->Option.getWithDefault(0.)
+      ->Option.getOr(0.)
     }
 
     let iRef = ref(i)
     let break = ref(false)
-    while iRef.contents < range[1]->Option.getWithDefault(0.) && unit.contents > 0. {
+    while iRef.contents < range[1]->Option.getOr(0.) && unit.contents > 0. {
       ticks->Array.push(iRef.contents)->ignore
       iRef := iRef.contents +. unit.contents
       if base_toFixed > 0 && unit.contents > 0. {
@@ -66,7 +63,7 @@ let pretty = (range: array<float>, n: int) => {
           iRef.contents
           ->Js.Float.toFixedWithPrecision(~digits=base_toFixed)
           ->Belt.Float.fromString
-          ->Option.getWithDefault(0.)
+          ->Option.getOr(0.)
       } else {
         break := true
       }
diff --git a/src/utils/PromiseUtils.res b/src/utils/PromiseUtils.res
index 8a74431e2..9d28e3046 100644
--- a/src/utils/PromiseUtils.res
+++ b/src/utils/PromiseUtils.res
@@ -11,7 +11,7 @@ let allSettledPolyfill = (arr: array<promise<Js.Json.t>>) => {
     ->Promise.catch(err => {
       switch err {
       | Js.Exn.Error(e) =>
-        let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+        let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
         err->Js.Json.string
       | _ => Js.Json.null
       }->Promise.resolve
diff --git a/src/utils/UrlUtils.res b/src/utils/UrlUtils.res
index 8e7102ed9..a99fa9bdb 100644
--- a/src/utils/UrlUtils.res
+++ b/src/utils/UrlUtils.res
@@ -10,8 +10,8 @@ let useGetFilterDictFromUrl = prefix => {
         ->String.split("&")
         ->Array.map(str => {
           let arr = str->String.split("=")
-          let key = arr->Belt.Array.get(0)->Option.getWithDefault("-")
-          let val = arr->Belt.Array.sliceToEnd(1)->Array.joinWith("=")
+          let key = arr->Array.get(0)->Option.getOr("-")
+          let val = arr->Array.sliceToEnd(~start=1)->Array.joinWith("=")
 
           (key, val->UrlFetchUtils.getFilterValue) // it will return the Json string, Json array
         })
diff --git a/src/utils/UserPrefUtils.res b/src/utils/UserPrefUtils.res
index c08d8f73a..ac03b2343 100644
--- a/src/utils/UserPrefUtils.res
+++ b/src/utils/UserPrefUtils.res
@@ -2,11 +2,11 @@ open LogicUtils
 
 type moduleVisePref = {
   searchParams?: string,
-  moduleConfig?: Js.Dict.t<Js.Json.t>, // we store array of string here
+  moduleConfig?: Dict.t<Js.Json.t>, // we store array of string here
 }
 type userPref = {
   lastVisitedTab?: string,
-  moduleVisePref?: Js.Dict.t<moduleVisePref>,
+  moduleVisePref?: Dict.t<moduleVisePref>,
 }
 external userPrefToJson: userPref => Js.Json.t = "%identity"
 
@@ -53,7 +53,7 @@ let converToUserPref = dict => {
 }
 
 // this will be changed to api call on every change to url this save will happen
-let saveUserPref = (userPref: Js.Dict.t<userPref>) => {
+let saveUserPref = (userPref: Dict.t<userPref>) => {
   LocalStorage.setItem(
     userPreferenceKeyInLocalStorage,
     userPref
@@ -72,18 +72,14 @@ let saveUserPref = (userPref: Js.Dict.t<userPref>) => {
 let getUserPref = () => {
   switch LocalStorage.getItem(userPreferenceKeyInLocalStorage)->Js.Nullable.toOption {
   | Some(str) =>
-    str
-    ->LogicUtils.safeParse
-    ->Js.Json.decodeObject
-    ->Option.getWithDefault(Dict.make())
-    ->converToUserPref
+    str->LogicUtils.safeParse->Js.Json.decodeObject->Option.getOr(Dict.make())->converToUserPref
 
   | None => Dict.make()
   }
 }
 
-let getSearchParams = (moduleWisePref: Js.Dict.t<moduleVisePref>, ~key: string) => {
-  switch moduleWisePref->Dict.get(key)->Option.getWithDefault({}) {
+let getSearchParams = (moduleWisePref: Dict.t<moduleVisePref>, ~key: string) => {
+  switch moduleWisePref->Dict.get(key)->Option.getOr({}) {
   | {searchParams} => searchParams
   | _ => ""
   }