diff --git a/src/components/Accordion.res b/src/components/Accordion.res
index ad2d0d420..d5d1f00a7 100644
--- a/src/components/Accordion.res
+++ b/src/components/Accordion.res
@@ -27,9 +27,9 @@ module SectionAccordion = {
     <AddDataAttributes attributes=[("data-section", title)]>
       <div className={`border md:border-0 dark:border-jp-gray-950 ${headerBg}`}>
         <DesktopView>
-          <UIUtils.RenderIf condition={!hideHeaderWeb}>
+          <RenderIf condition={!hideHeaderWeb}>
             <h3 className={`text-base ${headingClass}`}> {title->React.string} </h3>
-          </UIUtils.RenderIf>
+          </RenderIf>
           <p
             className="text-gray-900 text-opacity-50 dark:text-jp-gray-text_darktheme dark:text-opacity-50">
             {subtext->React.string}
diff --git a/src/components/Button.res b/src/components/Button.res
index bbd63883b..7a56e0d39 100644
--- a/src/components/Button.res
+++ b/src/components/Button.res
@@ -696,11 +696,11 @@ let make = (
       }}
       {switch buttonRightText {
       | Some(text) =>
-        <UIUtils.RenderIf condition={!(text->LogicUtils.isEmptyString)}>
+        <RenderIf condition={!(text->LogicUtils.isEmptyString)}>
           <span className="text-jp-2-light-primary-600 font-semibold text-fs-14">
             {React.string(text)}
           </span>
-        </UIUtils.RenderIf>
+        </RenderIf>
       | None => React.null
       }}
       {switch rightIcon {
diff --git a/src/components/Chip.res b/src/components/Chip.res
index 20fcce272..c6b50b3b4 100644
--- a/src/components/Chip.res
+++ b/src/components/Chip.res
@@ -1,6 +1,5 @@
 @react.component
 let make = (~values=[], ~showButton=false, ~onButtonClick=_ => (), ~converterFn=str => str) => {
-  open UIUtils
   <RenderIf condition={values->Array.length !== 0}>
     <div className="flex flex-wrap flex-row">
       {values
diff --git a/src/components/CollapsableTableRow.res b/src/components/CollapsableTableRow.res
index ee4d5a4e8..967c9ef46 100644
--- a/src/components/CollapsableTableRow.res
+++ b/src/components/CollapsableTableRow.res
@@ -10,7 +10,6 @@ let make = (
   ~heading,
   ~title,
 ) => {
-  open UIUtils
   let isCurrentRowExpanded = expandedRowIndexArray->Array.includes(rowIndex)
   let headingArray = []
 
diff --git a/src/components/CustomCharts/FunnelChart.res b/src/components/CustomCharts/FunnelChart.res
index 0a7da99db..a33e17478 100644
--- a/src/components/CustomCharts/FunnelChart.res
+++ b/src/components/CustomCharts/FunnelChart.res
@@ -61,7 +61,7 @@ let make = (
       </div>
     | None => React.null
     }}
-    <UIUtils.RenderIf condition={someData}>
+    <RenderIf condition={someData}>
       <div className="flex flex-col">
         <div className="flex gap-6 justify-end">
           <div className={`flex flex-col ${widthClass}`} />
@@ -188,6 +188,6 @@ let make = (
           </div>
         </div>
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   </div>
 }
diff --git a/src/components/CustomCharts/HighchartTimeSeriesChart.res b/src/components/CustomCharts/HighchartTimeSeriesChart.res
index d825666db..af5130b50 100644
--- a/src/components/CustomCharts/HighchartTimeSeriesChart.res
+++ b/src/components/CustomCharts/HighchartTimeSeriesChart.res
@@ -695,7 +695,7 @@ module LineChart1D = {
               <HighchartsReact highcharts={highchartsModule} options key={chartKey} />
             </div>
           </AddDataAttributes>
-          <UIUtils.RenderIf condition={showTableLegend && isMobileView}>
+          <RenderIf condition={showTableLegend && isMobileView}>
             <div
               className="flex flex-row items-center gap-2 w-fit self-end cursor-pointer mr-5 mb-2"
               onClick={_ => {setHideLegend(prev => !prev)}}>
@@ -705,7 +705,7 @@ module LineChart1D = {
                 className="text-neutral-400"
               />
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
           {if showTableLegend && !hideLegend {
             <div className={`${tableWidth}  pl-5 pt-0 min-w-max`}>
               <LoadedTable
diff --git a/src/components/CustomExpandableTable.res b/src/components/CustomExpandableTable.res
index d30214588..8c5017c27 100644
--- a/src/components/CustomExpandableTable.res
+++ b/src/components/CustomExpandableTable.res
@@ -17,7 +17,6 @@ let make = (
   ~getRowDetails,
   ~showSerial=false,
 ) => {
-  open UIUtils
   if showSerial {
     heading->Array.unshift(makeHeaderInfo(~key="serial_number", ~title="S.No", ()))->ignore
   }
diff --git a/src/components/DesktopView.res b/src/components/DesktopView.res
index 83c8f7336..b035e1dfe 100644
--- a/src/components/DesktopView.res
+++ b/src/components/DesktopView.res
@@ -2,5 +2,5 @@
 let make = (~children) => {
   let isMobileView = MatchMedia.useMobileChecker()
 
-  <UIUtils.RenderIf condition={!isMobileView}> children </UIUtils.RenderIf>
+  <RenderIf condition={!isMobileView}> children </RenderIf>
 }
diff --git a/src/components/DynamicChart.res b/src/components/DynamicChart.res
index 297e52863..b6cbeffbf 100644
--- a/src/components/DynamicChart.res
+++ b/src/components/DynamicChart.res
@@ -821,7 +821,7 @@ let make = (
                   <Shimmer styleClass="w-full h-96 dark:bg-black bg-white" shimmerType={Big} />
                 } else if comparitionWidget {
                   <div>
-                    <UIUtils.RenderIf condition={featureFlagDetails.granularity}>
+                    <RenderIf condition={featureFlagDetails.granularity}>
                       <div className="w-full flex justify-end p-2">
                         <GranularitySelectBox
                           selectedGranularity
@@ -830,7 +830,7 @@ let make = (
                           endTime={endTimeFromUrl}
                         />
                       </div>
-                    </UIUtils.RenderIf>
+                    </RenderIf>
                     {entityAllMetrics
                     ->Array.mapWithIndex((selectedMetrics, index) => {
                       switch uriConfig->Array.get(0) {
diff --git a/src/components/DynamicSingleStat.res b/src/components/DynamicSingleStat.res
index 4955b09ea..242d380f7 100644
--- a/src/components/DynamicSingleStat.res
+++ b/src/components/DynamicSingleStat.res
@@ -141,7 +141,6 @@ let make = (
   ~wrapperClass=?,
   ~formaPayload: option<singleStatBodyEntity => string>=?,
 ) => {
-  open UIUtils
   open LogicUtils
   let {filterValueJson} = React.useContext(FilterContext.filterContext)
   let fetchApi = AuthHooks.useApiFetcher()
diff --git a/src/components/DynamicTable.res b/src/components/DynamicTable.res
index 38d192ef9..ca83a532f 100644
--- a/src/components/DynamicTable.res
+++ b/src/components/DynamicTable.res
@@ -338,7 +338,7 @@ let make = (
           } else {
             React.null
           }}
-          <UIUtils.RenderIf condition=showRemoteFilter>
+          <RenderIf condition=showRemoteFilter>
             <LabelVisibilityContext showLabel=false>
               <Filter
                 defaultFilters=entity.defaultFilters
@@ -359,7 +359,7 @@ let make = (
                 showSelectFiltersSearch=showFiltersSearch
               />
             </LabelVisibilityContext>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
       if isFiltersInPortal {
         <Portal to=portalKey> {children} </Portal>
diff --git a/src/components/DynamicTableUtils.res b/src/components/DynamicTableUtils.res
index 5584b8e17..fd7bd0935 100644
--- a/src/components/DynamicTableUtils.res
+++ b/src/components/DynamicTableUtils.res
@@ -227,9 +227,9 @@ module TableLoadingErrorIndicator = {
     }
 
     <div className={`flex flex-col w-full`}>
-      <UIUtils.RenderIf condition={!hideTitle}>
+      <RenderIf condition={!hideTitle}>
         <TableHeading title />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <TableFilterSectionContext isFilterSection=true>
         <div className=filtersBorder> {filters} </div>
       </TableFilterSectionContext>
diff --git a/src/components/DynamicTabs.res b/src/components/DynamicTabs.res
index c89519efb..e4828413c 100644
--- a/src/components/DynamicTabs.res
+++ b/src/components/DynamicTabs.res
@@ -76,7 +76,7 @@ module TabInfo = {
     let borderClass = ""
 
     let lineStyle = "bg-black w-full h-0.5 rounded-full"
-    open UIUtils
+
     let crossIcon = switch isRemovable {
     | true =>
       <svg
@@ -169,7 +169,6 @@ module TabInfo = {
 module IndicationArrow = {
   @react.component
   let make = (~iconName, ~side, ~refElement: React.ref<Js.nullable<Dom.element>>, ~isVisible) => {
-    open UIUtils
     let isMobileView = MatchMedia.useMobileChecker()
     let onClick = {
       _ev =>
@@ -526,11 +525,11 @@ let make = (
   <div className={isMobileView ? `sticky top-0 z-15 ${bgClass}` : ""}>
     <ErrorBoundary>
       <div className="py-0 flex flex-row">
-        <UIUtils.RenderIf condition={!isMobileView}>
+        <RenderIf condition={!isMobileView}>
           <IndicationArrow
             iconName="caret-left" side="left" refElement=firstTabRef isVisible=isLeftArrowVisible
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div
           className={`overflow-x-auto no-scrollbar overflow-y-hidden ${outerAllignmentClass}`}
           ref={scrollRef->ReactDOM.Ref.domRef}
@@ -578,15 +577,15 @@ let make = (
           </div>
         </div>
         <div className="flex flex-row">
-          <UIUtils.RenderIf condition={!isMobileView}>
+          <RenderIf condition={!isMobileView}>
             <IndicationArrow
               iconName="caret-right"
               side="right"
               refElement=lastTabRef
               isVisible=isRightArrowVisible
             />
-          </UIUtils.RenderIf>
-          <UIUtils.RenderIf condition={showAddMoreTabs && formattedOptions->Array.length > 0}>
+          </RenderIf>
+          <RenderIf condition={showAddMoreTabs && formattedOptions->Array.length > 0}>
             <div
               className="flex flex-row"
               style={ReactDOMStyle.make(~marginTop="20px", ~marginLeft="7px", ())}>
@@ -604,7 +603,7 @@ let make = (
                 tooltipWidthClass="w-fit"
               />
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
       </div>
       <SelectModal
diff --git a/src/components/Filter.res b/src/components/Filter.res
index 76eee4947..3ac9e4203 100644
--- a/src/components/Filter.res
+++ b/src/components/Filter.res
@@ -67,7 +67,7 @@ module ClearFilters = {
       ->Array.length > 0
     }, (formState.initialValues, defaultFilterKeys))
     let text = "Clear All"
-    <UIUtils.RenderIf condition={hasExtraFilters || outsidefilter}>
+    <RenderIf condition={hasExtraFilters || outsidefilter}>
       <Button
         text
         customButtonStyle="bg-white rounded-lg !p-2 !h-10 !border mt-3"
@@ -77,7 +77,7 @@ module ClearFilters = {
         onClick=handleClearFilter
         buttonType={Secondary}
       />
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
@@ -296,14 +296,14 @@ let make = (
       <div>
         <div className={`flex gap-3 items-center flex-wrap ${verticalGap}`}>
           {customLeftView}
-          <UIUtils.RenderIf condition={fixedFilters->Array.length > 0}>
+          <RenderIf condition={fixedFilters->Array.length > 0}>
             <FormRenderer.FieldsRenderer
               fields={fixedFilters->Array.map(item => item.field)}
               labelClass="hidden"
               fieldWrapperClass="p-0"
             />
-          </UIUtils.RenderIf>
-          <UIUtils.RenderIf condition={allFilters->Array.length > 0}>
+          </RenderIf>
+          <RenderIf condition={allFilters->Array.length > 0}>
             <Menu \"as"="div" className="relative inline-block text-left">
               {_menuProps =>
                 <div>
@@ -344,14 +344,13 @@ let make = (
                                         }
                                         `${activeClasses} font-medium`
                                       }>
-                                      <UIUtils.RenderIf
+                                      <RenderIf
                                         condition={option.label->LogicUtils.isNonEmptyString}>
                                         <div className="mr-5">
                                           {option.label->LogicUtils.snakeToTitle->React.string}
                                         </div>
-                                      </UIUtils.RenderIf>
-                                      <UIUtils.RenderIf
-                                        condition={option.label->LogicUtils.isEmptyString}>
+                                      </RenderIf>
+                                      <RenderIf condition={option.label->LogicUtils.isEmptyString}>
                                         <div className="mr-5">
                                           {option.inputNames
                                           ->Array.get(0)
@@ -359,7 +358,7 @@ let make = (
                                           ->LogicUtils.snakeToTitle
                                           ->React.string}
                                         </div>
-                                      </UIUtils.RenderIf>
+                                      </RenderIf>
                                     </button>
                                   </div>}
                               </Menu.Item>
@@ -372,15 +371,15 @@ let make = (
                   </Transition>
                 </div>}
             </Menu>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
         <div className="flex gap-3 flex-wrap">
           <FormRenderer.FieldsRenderer
             fields={filterList} labelClass="hidden" fieldWrapperClass="p-0 mt-3"
           />
-          <UIUtils.RenderIf condition={count > 0}>
+          <RenderIf condition={count > 0}>
             <ClearFilters defaultFilterKeys ?clearFilters outsidefilter={initalCount > 0} />
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
       </div>
     </AddDataAttributes>}
diff --git a/src/components/FilterSelectBox.res b/src/components/FilterSelectBox.res
index c6a98e4c3..64bd01987 100644
--- a/src/components/FilterSelectBox.res
+++ b/src/components/FilterSelectBox.res
@@ -700,7 +700,7 @@ module BaseSelect = {
         {if showSelectAll && isDropDown {
           if !isMobileView {
             let clearAllCondition = noOfSelected > 0
-            <UIUtils.RenderIf
+            <RenderIf
               condition={filteredOptions->Array.length > 1 &&
                 filteredOptions->Array.find(item => item.value === "Loading...")->Option.isNone}>
               <div
@@ -713,7 +713,7 @@ module BaseSelect = {
                 />
                 {{clearAllCondition ? "Clear All" : "Select All"}->React.string}
               </div>
-            </UIUtils.RenderIf>
+            </RenderIf>
           } else {
             <div
               onClick={selectAll(noOfSelected !== options->Array.length)}
@@ -1101,14 +1101,14 @@ module RenderListItemInBaseRadio = {
         | Some(str) =>
           <div key={i->Int.toString} className="flex flex-row">
             listItemComponent
-            <UIUtils.RenderIf condition={!isHorizontal}>
+            <RenderIf condition={!isHorizontal}>
               <ToolTip
                 description={str}
                 toolTipFor={<div className="py-4 px-4">
                   <Icon size=12 name="info-circle" />
                 </div>}
               />
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
         | None => listItemComponent
         }
@@ -1331,11 +1331,11 @@ module BaseRadio = {
           ? "animate-textTransition transition duration-400"
           : "animate-textTransitionOff transition duration-400"}`}>
       {switch searchable {
-      | Some(val) => <UIUtils.RenderIf condition={val}> searchInputUI </UIUtils.RenderIf>
+      | Some(val) => <RenderIf condition={val}> searchInputUI </RenderIf>
       | None =>
-        <UIUtils.RenderIf condition={isDropDown && (options->Array.length > 5 || addDynamicValue)}>
+        <RenderIf condition={isDropDown && (options->Array.length > 5 || addDynamicValue)}>
           searchInputUI
-        </UIUtils.RenderIf>
+        </RenderIf>
       }}
       <div
         className={`${maxHeight} ${listPadding} ${overflowClass} text-jp-2-gray-300 text-fs-14 font-medium"
@@ -1871,12 +1871,12 @@ module BaseDropdown = {
                         {selectButtonText->React.string}
                       </div>
                       {buttonIcon}
-                      <UIUtils.RenderIf condition={badgeForSelect.color === BadgeBlue}>
+                      <RenderIf condition={badgeForSelect.color === BadgeBlue}>
                         <div
                           className="px-2 py-0.5 bg-blue-500 rounded-lg text-white text-sm font-medium leading-5 mx-1 h-fit">
                           {badgeForSelect.value->React.string}
                         </div>
-                      </UIUtils.RenderIf>
+                      </RenderIf>
                     </div>
 
                   <div
diff --git a/src/components/HSwitchSingleStatTableWidget.res b/src/components/HSwitchSingleStatTableWidget.res
index cbce102f8..cede12bff 100644
--- a/src/components/HSwitchSingleStatTableWidget.res
+++ b/src/components/HSwitchSingleStatTableWidget.res
@@ -188,11 +188,11 @@ let make = (
       <div
         className={`h-full flex flex-col border ${borderRounded} dark:border-jp-gray-850 bg-white dark:bg-jp-gray-lightgray_background overflow-hidden singlestatBox p-2 md:mr-4`}>
         <div className="p-4 flex flex-col justify-start h-full gap-2">
-          <UIUtils.RenderIf condition={singleStatLoading && loaderType === SideLoader}>
+          <RenderIf condition={singleStatLoading && loaderType === SideLoader}>
             <div className="animate-spin self-end absolute">
               <Icon name="spinner" size=16 />
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
           <div className={"flex gap-2 items-center text-jp-gray-700 font-bold self-start"}>
             <div className="font-semibold text-base text-black dark:text-white">
               {title->React.string}
@@ -220,9 +220,9 @@ let make = (
                   </div>
                 })
                 ->React.array}
-                <UIUtils.RenderIf condition={modifiedData->Array.length > 5}>
+                <RenderIf condition={modifiedData->Array.length > 5}>
                   <ShowMore value=modifiedData title tableEntity />
-                </UIUtils.RenderIf>
+                </RenderIf>
               </>
             } else {
               <div
diff --git a/src/components/HSwitchSingleStatWidget.res b/src/components/HSwitchSingleStatWidget.res
index 312ae4d88..aac4f002b 100644
--- a/src/components/HSwitchSingleStatWidget.res
+++ b/src/components/HSwitchSingleStatWidget.res
@@ -122,11 +122,11 @@ let make = (
       <div
         className={`h-full flex flex-col border ${borderRounded} dark:border-jp-gray-850 bg-white dark:bg-jp-gray-lightgray_background overflow-hidden singlestatBox p-2 md:mr-4`}>
         <div className="p-4 flex flex-col justify-between h-full gap-auto">
-          <UIUtils.RenderIf condition={singleStatLoading && loaderType === SideLoader}>
+          <RenderIf condition={singleStatLoading && loaderType === SideLoader}>
             <div className="animate-spin self-end absolute">
               <Icon name="spinner" size=16 />
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
           <div className="flex justify-between w-full h-1/2 items-end">
             <div className="font-bold text-3xl w-1/3">
               {statValue(statType)->String.toLowerCase->React.string}
diff --git a/src/components/HeadlessUISelectBox.res b/src/components/HeadlessUISelectBox.res
index c9e022589..ae71801ac 100644
--- a/src/components/HeadlessUISelectBox.res
+++ b/src/components/HeadlessUISelectBox.res
@@ -120,13 +120,13 @@ let make = (
                                 | _ => React.null
                                 }}
                               </div>
-                              <UIUtils.RenderIf condition=selected>
+                              <RenderIf condition=selected>
                                 {if isCloseIcon {
                                   <Icon name="close" size=10 className="text-red-500 mr-1" />
                                 } else {
                                   <Tick isSelected=selected />
                                 }}
-                              </UIUtils.RenderIf>
+                              </RenderIf>
                             </div>
                           }}
                         </Menu.Item>
diff --git a/src/components/LoadedTable.res b/src/components/LoadedTable.res
index ab0d931ec..a7e8e939a 100644
--- a/src/components/LoadedTable.res
+++ b/src/components/LoadedTable.res
@@ -890,9 +890,9 @@ let make = (
       | Some(x) =>
         <AdvancedSearchComponent entity ?setData ?setSummary> {x} </AdvancedSearchComponent>
       | None =>
-        <UIUtils.RenderIf condition={searchFields->Array.length > 0}>
+        <RenderIf condition={searchFields->Array.length > 0}>
           <AdvancedSearchModal searchFields url=searchUrl entity />
-        </UIUtils.RenderIf>
+        </RenderIf>
       }}
       <DesktopView>
         {switch tableActions {
@@ -934,21 +934,20 @@ let make = (
             hideTitle ? "" : ` mt-4 mb-2`
           )}>
           <div className="w-full">
-            <UIUtils.RenderIf condition={!hideTitle}>
+            <RenderIf condition={!hideTitle}>
               <NewThemeHeading
                 heading=title
                 headingSize=titleSize
                 outerMargin=""
                 ?description
-                rightActions={<UIUtils.RenderIf
-                  condition={!isMobileView && !isTableActionBesideFilters}>
+                rightActions={<RenderIf condition={!isMobileView && !isTableActionBesideFilters}>
                   {tableActionElements}
-                </UIUtils.RenderIf>}
+                </RenderIf>}
               />
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
         </div>
-        <UIUtils.RenderIf condition={!hideFilterTopPortals}>
+        <RenderIf condition={!hideFilterTopPortals}>
           <div className="flex justify-between items-center">
             <PortalCapture
               key={`tableFilterTopLeft-${title}`}
@@ -961,7 +960,7 @@ let make = (
               customStyle="flex flex-row-reverse items-center gap-x-2"
             />
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div
           className={`flex flex-row mobile:flex-wrap items-center ${tableActionBorder} ${filtersOuterMargin}`}>
           <TableFilterSectionContext isFilterSection=true>
@@ -981,9 +980,9 @@ let make = (
               <PortalCapture key={`extraFilters-${title}`} name={`extraFilters-${title}`} />
             </div>
           </TableFilterSectionContext>
-          <UIUtils.RenderIf condition={isTableActionBesideFilters || isMobileView || hideTitle}>
+          <RenderIf condition={isTableActionBesideFilters || isMobileView || hideTitle}>
             {tableActionElements}
-          </UIUtils.RenderIf>
+          </RenderIf>
           customizeColumsButtons
         </div>
       </div>
@@ -992,9 +991,9 @@ let make = (
       } else {
         loadedTableUI
       }}
-      <UIUtils.RenderIf condition={tableDataLoading && !dataLoading}>
+      <RenderIf condition={tableDataLoading && !dataLoading}>
         <TableDataLoadingIndicator showWithData={rows->Array.length !== 0} />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <div
         className={`${tableActions->Option.isSome && isMobileView
             ? `flex flex-row-reverse justify-between mb-10 ${tableDataBackgroundClass}`
diff --git a/src/components/LoadedTableWithCustomColumns.res b/src/components/LoadedTableWithCustomColumns.res
index 782878dc2..1496190fd 100644
--- a/src/components/LoadedTableWithCustomColumns.res
+++ b/src/components/LoadedTableWithCustomColumns.res
@@ -87,7 +87,7 @@ let make = (
     </div>
 
   let customizeColumn =
-    <UIUtils.RenderIf condition={!hideRightTitleElement}>
+    <RenderIf condition={!hideRightTitleElement}>
       <Portal to={`${title}CustomizeColumn`}>
         <Button
           leftIcon=Button.CustomIcon(<Icon name="edit" size=16 />)
@@ -98,7 +98,7 @@ let make = (
           customButtonStyle="!rounded-lg !bg-white !h-10 !text-black"
         />
       </Portal>
-    </UIUtils.RenderIf>
+    </RenderIf>
 
   let rightTitleElement = !previewOnly ? customizeColumn : React.null
 
diff --git a/src/components/MobileView.res b/src/components/MobileView.res
index de7bbf007..c95d35a86 100644
--- a/src/components/MobileView.res
+++ b/src/components/MobileView.res
@@ -2,5 +2,5 @@
 let make = (~children) => {
   let isMobileView = MatchMedia.useMobileChecker()
 
-  <UIUtils.RenderIf condition=isMobileView> children </UIUtils.RenderIf>
+  <RenderIf condition=isMobileView> children </RenderIf>
 }
diff --git a/src/components/OrderUtils.res b/src/components/OrderUtils.res
index 2e95bb16e..2e56adc2c 100644
--- a/src/components/OrderUtils.res
+++ b/src/components/OrderUtils.res
@@ -53,11 +53,11 @@ module DisplayKeyValueParams = {
             <div className={`${overiddingHeadingStyles}`}>
               {React.string(showTitle ? heading.title : "")}
             </div>
-            <UIUtils.RenderIf condition={description->LogicUtils.isNonEmptyString}>
+            <RenderIf condition={description->LogicUtils.isNonEmptyString}>
               <div className="text-sm text-gray-500 mx-2 -mt-1">
                 <ToolTip description={description} toolTipPosition={ToolTip.Top} />
               </div>
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
           <div className={`${fontClass} font-semibold text-left  mr-5 ${textColor} ${breakWords}`}>
             <Table.TableCell
@@ -137,10 +137,10 @@ module Details = {
         customCssClass={`${borderRequired
             ? "border border-jp-gray-940 border-opacity-75 dark:border-jp-gray-960"
             : ""} ${bgColor} rounded-md `}>
-        <UIUtils.RenderIf condition=isHeadingRequired>
+        <RenderIf condition=isHeadingRequired>
           <Heading topic=heading headingCss> {headRightElement} </Heading>
-        </UIUtils.RenderIf>
-        <UIUtils.RenderIf condition=showDetails>
+        </RenderIf>
+        <RenderIf condition=showDetails>
           <FormRenderer.DesktopRow>
             <div
               className={`${flexClass} ${justifyClassName} dark:bg-jp-gray-lightgray_background dark:border-jp-gray-no_data_border`}>
@@ -187,7 +187,7 @@ module Details = {
               }}
             </div>
           </FormRenderer.DesktopRow>
-        </UIUtils.RenderIf>
+        </RenderIf>
         {switch children {
         | Some(ele) => ele
         | None => React.null
diff --git a/src/components/Paginator.res b/src/components/Paginator.res
index 2deecc27a..7a3e20e7e 100644
--- a/src/components/Paginator.res
+++ b/src/components/Paginator.res
@@ -70,7 +70,7 @@ let make = (
   if totalResults >= resultsPerPage {
     <div className={`flex ${flexDirection} justify-between ${marginClass} ${paginationClass} `}>
       <div className={`flex flex-row w-full ${justify}`}>
-        <UIUtils.RenderIf condition={!isMobileView && showResultsPerPageSelector}>
+        <RenderIf condition={!isMobileView && showResultsPerPageSelector}>
           <div
             className="flex self-center text-center text-gray-400 dark:text-gray-500 font-medium">
             {React.string(
@@ -88,7 +88,7 @@ let make = (
               baseComponent={<Icon className="pl-2" size=20 name="chevron-down" />}
             />
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
         {switch downloadCsv {
         | Some(actionData) =>
           <div className="md:mr-2 lg:mr-5 mb-2">
diff --git a/src/components/PopUpConfirm.res b/src/components/PopUpConfirm.res
index 2c6c62649..b77056d75 100644
--- a/src/components/PopUpConfirm.res
+++ b/src/components/PopUpConfirm.res
@@ -136,7 +136,7 @@ let make = (
         <div className={`h-2 w-12/12 p-0 mt-0 ${popUpHeadingColor} ${rounded_top_border}`} />
         <div className={`flex flex-row ${popupMargin} justify-between`}>
           <div className="flex flex-row gap-5 pt-4 items-center w-full">
-            <UIUtils.RenderIf condition=showIcon>
+            <RenderIf condition=showIcon>
               {switch popUpType {
               | Warning =>
                 <img className=imageStyle src={`${appPrefix}/icons/warning.svg`} alt="warning" />
@@ -147,7 +147,7 @@ let make = (
               | Secondary => <Icon className=iconStyle size=40 name="info-circle" />
               | Denied => <Icon name="denied" size=50 className=iconStyle />
               }}
-            </UIUtils.RenderIf>
+            </RenderIf>
             <div className="w-full">
               <AddDataAttributes attributes=[("data-header-text", confirmType)]>
                 <div className=headerStyle> {confirmType->React.string} </div>
@@ -158,9 +158,9 @@ let make = (
             </div>
           </div>
           <div className="flex justify-end ">
-            <UIUtils.RenderIf condition=showCloseIcon>
+            <RenderIf condition=showCloseIcon>
               <Close onClick=handlePopUp />
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
         </div>
         <div className={`flex justify-between items-center flex-row ${paddingCss} py-4 mt-4`}>
diff --git a/src/components/ReactWindowTable.res b/src/components/ReactWindowTable.res
index 822f0dc83..de9bc747a 100644
--- a/src/components/ReactWindowTable.res
+++ b/src/components/ReactWindowTable.res
@@ -365,16 +365,16 @@ module ReactWindowTableComponent = {
                 <div className="">
                   <div className="flex flex-row">
                     <div className="font-bold text-fs-13"> {React.string(item.title)} </div>
-                    <UIUtils.RenderIf condition={item.description->Option.isSome}>
+                    <RenderIf condition={item.description->Option.isSome}>
                       <div className="text-sm text-gray-500 mx-2">
                         <ToolTip
                           description={item.description->Option.getOr("")}
                           toolTipPosition={ToolTip.Bottom}
                         />
                       </div>
-                    </UIUtils.RenderIf>
+                    </RenderIf>
                   </div>
-                  <UIUtils.RenderIf condition={item.showMultiSelectCheckBox->Option.getOr(false)}>
+                  <RenderIf condition={item.showMultiSelectCheckBox->Option.getOr(false)}>
                     <div className=" mt-1 mr-2">
                       <CheckBoxIcon
                         isSelected={isAllSelected}
@@ -383,13 +383,13 @@ module ReactWindowTableComponent = {
                         checkboxDimension
                       />
                     </div>
-                  </UIUtils.RenderIf>
-                  <UIUtils.RenderIf condition={item.data->Option.isSome}>
+                  </RenderIf>
+                  <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.getOr(""))}
                     </div>
-                  </UIUtils.RenderIf>
+                  </RenderIf>
                 </div>
                 {if item.showFilter || item.showSort {
                   <div className={`flex flex-row items-center`}>
diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
index b13428139..af547c619 100644
--- a/src/components/SelectBox.res
+++ b/src/components/SelectBox.res
@@ -731,7 +731,7 @@ module BaseSelect = {
           </div>
         } else if !isMobileView {
           let clearAllCondition = noOfSelected > 0
-          <UIUtils.RenderIf
+          <RenderIf
             condition={filteredOptions->Array.length > 1 &&
               filteredOptions->Array.find(item => item.value === "Loading...")->Option.isNone}>
             <div
@@ -744,7 +744,7 @@ module BaseSelect = {
               />
               {{clearAllCondition ? "Clear All" : "Select All"}->React.string}
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         } else {
           <div
             onClick={selectAll(noOfSelected !== options->Array.length)}
@@ -895,7 +895,7 @@ module BaseSelect = {
           onClick
         />
       } else {
-        <UIUtils.RenderIf condition={isDropDown && noOfSelected > 0 && showSelectCountButton}>
+        <RenderIf condition={isDropDown && noOfSelected > 0 && showSelectCountButton}>
           <Button
             buttonType=Primary
             text={`Select ${noOfSelected->Int.toString}`}
@@ -903,7 +903,7 @@ module BaseSelect = {
             customButtonStyle="w-full items-center"
             onClick
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
       }}
     </div>
   }
@@ -1140,14 +1140,14 @@ module RenderListItemInBaseRadio = {
         | Some(str) =>
           <div key={i->Int.toString} className="flex flex-row">
             listItemComponent
-            <UIUtils.RenderIf condition={!isHorizontal}>
+            <RenderIf condition={!isHorizontal}>
               <ToolTip
                 description={str}
                 toolTipFor={<div className="py-4 px-4">
                   <Icon size=12 name="info-circle" />
                 </div>}
               />
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
         | None => listItemComponent
         }
@@ -1370,11 +1370,11 @@ module BaseRadio = {
           ? "animate-textTransition transition duration-400"
           : "animate-textTransitionOff transition duration-400"}`}>
       {switch searchable {
-      | Some(val) => <UIUtils.RenderIf condition={val}> searchInputUI </UIUtils.RenderIf>
+      | Some(val) => <RenderIf condition={val}> searchInputUI </RenderIf>
       | None =>
-        <UIUtils.RenderIf condition={isDropDown && (options->Array.length > 5 || addDynamicValue)}>
+        <RenderIf condition={isDropDown && (options->Array.length > 5 || addDynamicValue)}>
           searchInputUI
-        </UIUtils.RenderIf>
+        </RenderIf>
       }}
       <div
         className={`${maxHeight} ${listPadding} ${overflowClass} text-fs-13 font-semibold text-jp-gray-900 text-opacity-75 dark:text-jp-gray-text_darktheme dark:text-opacity-75 ${inlineClass} ${baseComponentCustomStyle}`}>
diff --git a/src/components/Table.res b/src/components/Table.res
index 84f13b289..b8d07c29e 100644
--- a/src/components/Table.res
+++ b/src/components/Table.res
@@ -418,7 +418,7 @@ module TableHeadingCell = {
                 : justifyClass}`}>
             <div className="">
               <div className={"flex flex-row"}>
-                <UIUtils.RenderIf condition={item.showMultiSelectCheckBox->Option.getOr(false)}>
+                <RenderIf condition={item.showMultiSelectCheckBox->Option.getOr(false)}>
                   <div className=" mt-1 mr-2">
                     <CheckBoxIcon
                       isSelected={isAllSelected}
@@ -427,13 +427,13 @@ module TableHeadingCell = {
                       checkboxDimension
                     />
                   </div>
-                </UIUtils.RenderIf>
+                </RenderIf>
                 <div className="flex justify-between items-center">
                   {switch item.headerElement {
                   | Some(headerElement) => headerElement
                   | _ => <div className=tableHeadingTextClass> {React.string(item.title)} </div>
                   }}
-                  <UIUtils.RenderIf condition={item.data->Option.isSome}>
+                  <RenderIf condition={item.data->Option.isSome}>
                     <AddDataAttributes
                       attributes=[("data-heading-value", item.data->Option.getOr(""))]>
                       <div
@@ -441,7 +441,7 @@ module TableHeadingCell = {
                         {React.string(` (${item.data->Option.getOr("")})`)}
                       </div>
                     </AddDataAttributes>
-                  </UIUtils.RenderIf>
+                  </RenderIf>
                   {if item.showFilter || item.showSort || filterRow->Option.isSome {
                     let selfClass = "self-end"
                     <div className={`flex flex-row ${selfClass} items-center`}>
@@ -507,10 +507,10 @@ module TableHeadingCell = {
                     React.null
                   }}
                 </div>
-                <UIUtils.RenderIf condition={item.isMandatory->Option.getOr(false)}>
+                <RenderIf condition={item.isMandatory->Option.getOr(false)}>
                   <div className="text-red-400 text-sm ml-1"> {React.string("*")} </div>
-                </UIUtils.RenderIf>
-                <UIUtils.RenderIf
+                </RenderIf>
+                <RenderIf
                   condition={item.description->Option.getOr("")->LogicUtils.isNonEmptyString}>
                   <div className="text-sm text-gray-500 mx-2">
                     <ToolTip
@@ -518,7 +518,7 @@ module TableHeadingCell = {
                       toolTipPosition={ToolTip.Bottom}
                     />
                   </div>
-                </UIUtils.RenderIf>
+                </RenderIf>
               </div>
             </div>
           </div>
@@ -837,9 +837,9 @@ let make = (
   let frozenTable = {
     <table
       className={`table-auto ${frozenTableWidthClass} ${parentBoderColor} rounded-lg ${tableBorderClass} ${stickCol}`}>
-      <UIUtils.RenderIf condition=showHeading>
+      <RenderIf condition=showHeading>
         {renderTableHeadingRow(frozenHeading, true, false, lastHeadingClass)}
-      </UIUtils.RenderIf>
+      </RenderIf>
       <tbody>
         {tableFilterRow(~isFrozen=true)}
         {tableRows(frozenRow, false)}
@@ -851,14 +851,14 @@ let make = (
 
   let customizeColumn = {
     <table className={`table-auto rounded-lg sticky right-0 !px-0 !py-0 z-10`}>
-      <UIUtils.RenderIf condition=showHeading>
+      <RenderIf condition=showHeading>
         {renderTableHeadingRow(
           frozenCustomiseColumnHeading,
           true,
           true,
           `${lastHeadingClass} rounded-tl-none rounded-tr-lg`,
         )}
-      </UIUtils.RenderIf>
+      </RenderIf>
       <tbody>
         {tableRows(
           Array.fromInitializer(~length=totalLength, i => i + 1)->Array.map(_ => [Text("")]),
@@ -877,9 +877,9 @@ let make = (
 
   let nonFrozenTable = {
     <table id="table" className=tableBorderClass>
-      <UIUtils.RenderIf condition=showHeading>
+      <RenderIf condition=showHeading>
         {renderTableHeadingRow(remainingHeading, false, false, `${lastHeadingClass}`)}
-      </UIUtils.RenderIf>
+      </RenderIf>
       <tbody>
         {tableFilterRow(~isFrozen=false)}
         {tableRows(remaingRow, false)}
@@ -912,15 +912,15 @@ let make = (
       (),
     )} //replaced "overflow-auto" -> to be tested with master
   >
-    <UIUtils.RenderIf condition={frozenUpto > 0}> {frozenTable} </UIUtils.RenderIf>
+    <RenderIf condition={frozenUpto > 0}> {frozenTable} </RenderIf>
     <div className={`flex-1 ${overflowClass} no-scrollbar ${childMinWidthClass}`}>
       nonFrozenTable
     </div>
     {switch customizeColumnNewTheme {
     | Some(customizeColumnObj) =>
-      <UIUtils.RenderIf condition={customizeColumnObj.customizeColumnUi !== React.null}>
+      <RenderIf condition={customizeColumnObj.customizeColumnUi !== React.null}>
         {customizeColumn}
-      </UIUtils.RenderIf>
+      </RenderIf>
     | None => React.null
     }}
   </div>
diff --git a/src/components/TableLocalFilters.res b/src/components/TableLocalFilters.res
index 7090a9ff2..2d57f0f3c 100644
--- a/src/components/TableLocalFilters.res
+++ b/src/components/TableLocalFilters.res
@@ -69,7 +69,7 @@ module RangeSliderLocalFilter = {
           onClick={_ => setShowDropDown(prev => !prev)}>
           {rightIcon}
         </div>
-        <UIUtils.RenderIf condition={min !== max && showDropDown}>
+        <RenderIf condition={min !== max && showDropDown}>
           <div
             ref={dropdownRef->ReactDOM.Ref.domRef}
             className=" top-3.5 px-4 pt-4 pb-2 bg-white border dark:bg-jp-gray-lightgray_background border-jp-gray-lightmode_steelgray border-opacity-75 dark:border-jp-gray-960 rounded shadow-generic_shadow dark:shadow-generic_shadow_dark mt-8 absolute border border-jp-gray-lightmode_steelgray border-opacity-75 dark:border-jp-gray-960 rounded shadow-generic_shadow dark:shadow-generic_shadow_dark z-20 ">
@@ -77,7 +77,7 @@ module RangeSliderLocalFilter = {
               <RangeSlider min max maxSlide minSlide />
             </div>
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </div>
   }
diff --git a/src/components/TableUtils.res b/src/components/TableUtils.res
index 451d02b9c..3a3468b43 100644
--- a/src/components/TableUtils.res
+++ b/src/components/TableUtils.res
@@ -645,13 +645,13 @@ module DeltaColumn = {
             {React.string(Float.toFixedWithPrecision(value, ~digits=2) ++ "%")}
           </p>
         </div>
-        <UIUtils.RenderIf condition={delta !== value}>
+        <RenderIf condition={delta !== value}>
           <div className=paraparentCss>
             <p className={`px-2 py-0.5 fira-code text-fs-10  ${textColor}`}>
               {React.string(detlaStr)}
             </p>
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </div>
   }
diff --git a/src/components/Tabs.res b/src/components/Tabs.res
index d2aace15e..9bcac97c9 100644
--- a/src/components/Tabs.res
+++ b/src/components/Tabs.res
@@ -260,9 +260,9 @@ let make = (
           </div>
         </div>
       </div>
-      <UIUtils.RenderIf condition={!showStickyHeader && showBorder}>
+      <RenderIf condition={!showStickyHeader && showBorder}>
         <div className=bottomBorderClass />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <div className=renderedTabClassName>
         <ErrorBoundary key={Int.toString(selectedIndex)}>
           {switch tabs->Array.get(selectedIndex) {
diff --git a/src/components/form/FormRenderer.res b/src/components/form/FormRenderer.res
index 2a4eaddfe..04faa4922 100644
--- a/src/components/form/FormRenderer.res
+++ b/src/components/form/FormRenderer.res
@@ -217,23 +217,23 @@ module FieldWrapper = {
       <div className={fieldWrapperClass}>
         {<>
           <div className="flex items-center">
-            <UIUtils.RenderIf condition=showLabel>
+            <RenderIf condition=showLabel>
               <AddDataAttributes attributes=[("data-form-label", label)]>
                 <label className={`${labelPadding} ${labelTextClass} ${labelClass}`}>
                   {React.string(label)}
-                  <UIUtils.RenderIf condition=isRequired>
+                  <RenderIf condition=isRequired>
                     <span className="text-red-950"> {React.string(" *")} </span>
-                  </UIUtils.RenderIf>
+                  </RenderIf>
                 </label>
               </AddDataAttributes>
-            </UIUtils.RenderIf>
+            </RenderIf>
             {switch description {
             | Some(description) =>
-              <UIUtils.RenderIf condition={description->LogicUtils.isNonEmptyString}>
+              <RenderIf condition={description->LogicUtils.isNonEmptyString}>
                 <div className="text-sm text-gray-500 mx-2">
                   <ToolTip description toolTipPosition />
                 </div>
-              </UIUtils.RenderIf>
+              </RenderIf>
             | None => React.null
             }}
             {switch descriptionComponent {
diff --git a/src/components/form/PasswordStrengthInputAsChips.res b/src/components/form/PasswordStrengthInputAsChips.res
index fe6ccd36c..d1a45132e 100644
--- a/src/components/form/PasswordStrengthInputAsChips.res
+++ b/src/components/form/PasswordStrengthInputAsChips.res
@@ -25,9 +25,9 @@ module PasswordChip = {
     let textClass = isCheckPassed ? "text-green-700 font-medium" : "font-base dark:text-gray-100"
 
     <p className={isCheckPassed ? passedClassName : initalClassName}>
-      <UIUtils.RenderIf condition=isCheckPassed>
+      <RenderIf condition=isCheckPassed>
         <Icon name="check" size=9 />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <span className={`${textClass} ${customTextStyle}`}> {React.string(checkName)} </span>
     </p>
   }
diff --git a/src/components/priority-logics/AddPLGateway.res b/src/components/priority-logics/AddPLGateway.res
index 0e81a6c53..e7c70194a 100644
--- a/src/components/priority-logics/AddPLGateway.res
+++ b/src/components/priority-logics/AddPLGateway.res
@@ -13,11 +13,11 @@ module GatewayView = {
                             ${textColor.primaryNormal} hover:${textColor.primaryNormal} bg-gradient-to-b from-jp-gray-250 to-jp-gray-200
                             dark:from-jp-gray-950 dark:to-jp-gray-950 focus:outline-none px-2 gap-1`}>
           {React.string(ruleGateway.connector.connector)}
-          <UIUtils.RenderIf condition={ruleGateway.split !== 0}>
+          <RenderIf condition={ruleGateway.split !== 0}>
             <span className="text-jp-gray-700 dark:text-jp-gray-600 ml-1">
               {React.string(ruleGateway.split->Int.toString ++ "%")}
             </span>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
       })
       ->React.array}
@@ -137,9 +137,9 @@ let make = (
 
   if isExpanded {
     <div className="flex flex-row ml-2">
-      <UIUtils.RenderIf condition={!isFirst}>
+      <RenderIf condition={!isFirst}>
         <div className="w-8 h-10 border-jp-gray-700 ml-10 border-dashed border-b border-l " />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <div className="flex flex-col gap-6 mt-6 mb-4 pt-0.5">
         <div className="flex flex-wrap gap-4">
           <div className="flex">
@@ -181,7 +181,7 @@ let make = (
                       removeItem(i)
                     }}
                   />
-                  <UIUtils.RenderIf condition={isDistribute && selectedOptions->Array.length > 0}>
+                  <RenderIf condition={isDistribute && selectedOptions->Array.length > 0}>
                     {<>
                       <input
                         className="w-10 text-right outline-none bg-white dark:bg-jp-gray-970 px-1 border border-jp-gray-300 dark:border-jp-gray-850 rounded-md"
@@ -196,7 +196,7 @@ let make = (
                       />
                       <div> {React.string("%")} </div>
                     </>}
-                  </UIUtils.RenderIf>
+                  </RenderIf>
                 </div>
               </div>
             }
diff --git a/src/components/tooltip/ToolTip.res b/src/components/tooltip/ToolTip.res
index 67cb0e47a..a16b700ee 100644
--- a/src/components/tooltip/ToolTip.res
+++ b/src/components/tooltip/ToolTip.res
@@ -281,7 +281,7 @@ module DescriptionSection = {
       })
       ->React.array}
       <div className=descriptionComponentClass>
-        <UIUtils.RenderIf condition=dismissable>
+        <RenderIf condition=dismissable>
           <Icon
             name="popUpClose"
             className="stroke-jp-2-dark-gray-2000 cursor-pointer"
@@ -289,7 +289,7 @@ module DescriptionSection = {
             size=20
             onClick={_ => setIsToolTipVisible(prev => !prev)}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
         {descriptionComponent}
       </div>
     </div>
diff --git a/src/entryPoints/AcceptInviteHome.res b/src/entryPoints/AcceptInviteHome.res
index 8d7063487..fb7870f0a 100644
--- a/src/entryPoints/AcceptInviteHome.res
+++ b/src/entryPoints/AcceptInviteHome.res
@@ -1,7 +1,7 @@
 @react.component
 let make = () => {
   open APIUtils
-  open UIUtils
+
   let updateDetails = useUpdateMethod()
   let showToast = ToastState.useShowToast()
   let fetchSwitchMerchantList = SwitchMerchantListHook.useFetchSwitchMerchantList()
diff --git a/src/entryPoints/AuthModule/AuthModuleHooks.res b/src/entryPoints/AuthModule/AuthModuleHooks.res
index eed344da8..bc18eacd1 100644
--- a/src/entryPoints/AuthModule/AuthModuleHooks.res
+++ b/src/entryPoints/AuthModule/AuthModuleHooks.res
@@ -131,7 +131,6 @@ let useAuthMethods = (): authMethodProps => {
 }
 
 let useNote = (authType, setAuthType, ()) => {
-  open UIUtils
   open CommonAuthTypes
   let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
   let authId = HyperSwitchEntryUtils.getSessionData(~key="auth_id", ())
diff --git a/src/entryPoints/AuthModule/AuthWrapper.res b/src/entryPoints/AuthModule/AuthWrapper.res
index c2ba4fe65..30e2aeabd 100644
--- a/src/entryPoints/AuthModule/AuthWrapper.res
+++ b/src/entryPoints/AuthModule/AuthWrapper.res
@@ -25,17 +25,17 @@ module AuthHeaderWrapper = {
             <Div layoutId="border" className="border-b w-full" />
             <div className={`p-7 ${childrenStyle}`}> {children} </div>
           </Div>
-          <UIUtils.RenderIf condition={!branding}>
+          <RenderIf condition={!branding}>
             <Div
               layoutId="footer-links"
               className="justify-center text-sm mobile:text-base flex flex-col mobile:flex-row mobile:gap-3 items-center w-full max-w-xl text-center">
               <CommonAuth.TermsAndCondition />
             </Div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
-        <UIUtils.RenderIf condition={!branding}>
+        <RenderIf condition={!branding}>
           <CommonAuth.PageFooterSection />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </HSwitchUtils.BackgroundImageWrapper>
   }
@@ -160,13 +160,13 @@ let make = (~children) => {
     | LoggedOut =>
       <PageLoaderWrapper screenState>
         <AuthHeaderWrapper childrenStyle="flex flex-col gap-4">
-          <UIUtils.RenderIf condition={checkAuthMethodExists([PASSWORD, MAGIC_LINK])}>
+          <RenderIf condition={checkAuthMethodExists([PASSWORD, MAGIC_LINK])}>
             <TwoFaAuthScreen setAuthStatus />
-          </UIUtils.RenderIf>
-          <UIUtils.RenderIf condition={checkAuthMethodExists([OPEN_ID_CONNECT])}>
-            <UIUtils.RenderIf condition={checkAuthMethodExists([PASSWORD, MAGIC_LINK])}>
+          </RenderIf>
+          <RenderIf condition={checkAuthMethodExists([OPEN_ID_CONNECT])}>
+            <RenderIf condition={checkAuthMethodExists([PASSWORD, MAGIC_LINK])}>
               {PreLoginUtils.divider}
-            </UIUtils.RenderIf>
+            </RenderIf>
             {authMethods
             ->Array.mapWithIndex((authMethod, index) =>
               <React.Fragment key={index->Int.toString}>
@@ -174,7 +174,7 @@ let make = (~children) => {
               </React.Fragment>
             )
             ->React.array}
-          </UIUtils.RenderIf>
+          </RenderIf>
         </AuthHeaderWrapper>
       </PageLoaderWrapper>
     | PreLogin(_) => <DecisionScreen />
diff --git a/src/entryPoints/AuthModule/BasicAuth/BasicAuth.res b/src/entryPoints/AuthModule/BasicAuth/BasicAuth.res
index 19024fd92..f9e2d048b 100644
--- a/src/entryPoints/AuthModule/BasicAuth/BasicAuth.res
+++ b/src/entryPoints/AuthModule/BasicAuth/BasicAuth.res
@@ -237,9 +237,9 @@ let make = (~authType, ~setAuthType) => {
           {switch authType {
           | LoginWithPassword => <EmailPasswordForm setAuthType />
           | ForgetPassword =>
-            <UIUtils.RenderIf condition={featureFlagValues.email}>
+            <RenderIf condition={featureFlagValues.email}>
               <EmailForm />
-            </UIUtils.RenderIf>
+            </RenderIf>
           | LoginWithEmail
           | ResendVerifyEmail
           | SignUP =>
diff --git a/src/entryPoints/AuthModule/BasicAuth/BasicAuthScreen.res b/src/entryPoints/AuthModule/BasicAuth/BasicAuthScreen.res
index 6b2a67e1b..b7b3d6178 100644
--- a/src/entryPoints/AuthModule/BasicAuth/BasicAuthScreen.res
+++ b/src/entryPoints/AuthModule/BasicAuth/BasicAuthScreen.res
@@ -16,9 +16,9 @@ module BasicAuthPage = {
       <div
         className="h-full flex flex-col items-center justify-between overflow-scoll text-grey-0 w-full mobile:w-30-rem">
         <div className="flex flex-col items-center gap-6 flex-1 mt-4 mobile:my-20">
-          <UIUtils.RenderIf condition={testLiveToggle}>
+          <RenderIf condition={testLiveToggle}>
             <ToggleLiveTestMode authType mode setMode setAuthType />
-          </UIUtils.RenderIf>
+          </RenderIf>
           <Div layoutId="form" className="bg-white w-full text-black mobile:border rounded-lg">
             <div className="px-7 py-6">
               <Div layoutId="logo">
@@ -30,17 +30,17 @@ module BasicAuthPage = {
               <BasicAuth authType setAuthType />
             </div>
           </Div>
-          <UIUtils.RenderIf condition={!branding}>
+          <RenderIf condition={!branding}>
             <Div
               layoutId="footer-links"
               className="justify-center text-sm mobile:text-base flex flex-col mobile:flex-row mobile:gap-3 items-center w-full max-w-xl text-center">
               <CommonAuth.TermsAndCondition />
             </Div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
-        <UIUtils.RenderIf condition={!branding}>
+        <RenderIf condition={!branding}>
           <CommonAuth.PageFooterSection />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
 
     <HSwitchUtils.BackgroundImageWrapper
diff --git a/src/entryPoints/AuthModule/Common/CommonAuth.res b/src/entryPoints/AuthModule/Common/CommonAuth.res
index eae19e6bb..64a7f5b6b 100644
--- a/src/entryPoints/AuthModule/Common/CommonAuth.res
+++ b/src/entryPoints/AuthModule/Common/CommonAuth.res
@@ -101,7 +101,7 @@ module Header = {
     }
     let (signUpAllowed, _) = isSignUpAllowed()
     <div className={`${headerStyle} gap-2 h-fit mb-7 w-96`}>
-      <UIUtils.RenderIf condition={showInfoIcon}>
+      <RenderIf condition={showInfoIcon}>
         <div className="flex justify-center my-5">
           {switch authType {
           | MagicLinkEmailSent | ForgetPasswordEmailSent | ResendVerifyEmailSent =>
@@ -110,20 +110,20 @@ module Header = {
           | _ => React.null
           }}
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
       <h1 id="card-header" className="font-semibold text-xl md:text-2xl">
         {cardHeaderText->React.string}
       </h1>
       {switch authType {
       | LoginWithPassword | LoginWithEmail =>
-        <UIUtils.RenderIf condition={signUpAllowed}>
+        <RenderIf condition={signUpAllowed}>
           {getHeaderLink(
             ~prefix="New to Hyperswitch?",
             ~authType=SignUP,
             ~path="/register",
             ~sufix="Sign up",
           )}
-        </UIUtils.RenderIf>
+        </RenderIf>
 
       | SignUP =>
         getHeaderLink(
diff --git a/src/entryPoints/AuthModule/Common/CommonAuthForm.res b/src/entryPoints/AuthModule/Common/CommonAuthForm.res
index 7f08a0346..3328b1503 100644
--- a/src/entryPoints/AuthModule/Common/CommonAuthForm.res
+++ b/src/entryPoints/AuthModule/Common/CommonAuthForm.res
@@ -11,7 +11,7 @@ module EmailPasswordForm = {
       <FormRenderer.FieldRenderer field=emailField labelClass fieldWrapperClass />
       <div className="flex flex-col gap-3">
         <FormRenderer.FieldRenderer field=passwordField labelClass fieldWrapperClass />
-        <UIUtils.RenderIf condition={email}>
+        <RenderIf condition={email}>
           <AddDataAttributes attributes=[("data-testid", "forgot-password")]>
             <label
               className={`not-italic text-[12px] font-semibold font-ibm-plex ${textColor.primaryNormal} cursor-pointer`}
@@ -19,7 +19,7 @@ module EmailPasswordForm = {
               {"Forgot Password?"->React.string}
             </label>
           </AddDataAttributes>
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </div>
   }
diff --git a/src/entryPoints/AuthModule/Common/CommonAuthHooks.res b/src/entryPoints/AuthModule/Common/CommonAuthHooks.res
index fd4c375c3..903593082 100644
--- a/src/entryPoints/AuthModule/Common/CommonAuthHooks.res
+++ b/src/entryPoints/AuthModule/Common/CommonAuthHooks.res
@@ -1,5 +1,4 @@
 let useNote = (authType, setAuthType, isMagicLinkEnabled) => {
-  open UIUtils
   open CommonAuthTypes
   let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
   let authId = HyperSwitchEntryUtils.getSessionData(~key="auth_id", ())
diff --git a/src/entryPoints/AuthModule/Common/CommonInviteScreen.res b/src/entryPoints/AuthModule/Common/CommonInviteScreen.res
index d490d3932..0e0c4fe67 100644
--- a/src/entryPoints/AuthModule/Common/CommonInviteScreen.res
+++ b/src/entryPoints/AuthModule/Common/CommonInviteScreen.res
@@ -50,20 +50,20 @@ let make = (~merchantData, ~acceptInviteOnClick, ~onClickLoginToDashboard) => {
                   </span>
                 </div>
               </div>
-              <UIUtils.RenderIf condition={!isActive}>
+              <RenderIf condition={!isActive}>
                 <Button
                   text="Accept"
                   buttonType={PrimaryOutline}
                   customButtonStyle="!p-2"
                   onClick={_ => acceptInviteOnClick(index)}
                 />
-              </UIUtils.RenderIf>
-              <UIUtils.RenderIf condition={isActive}>
+              </RenderIf>
+              <RenderIf condition={isActive}>
                 <div className="flex items-center gap-1 text-green-accepted_green_800">
                   <Icon name="green-tick-without-background" />
                   {"Accepted"->React.string}
                 </div>
-              </UIUtils.RenderIf>
+              </RenderIf>
             </div>
           })
           ->React.array}
diff --git a/src/entryPoints/AuthModule/Common/ResendBtn.res b/src/entryPoints/AuthModule/Common/ResendBtn.res
index 10ad09cfb..afbc24cca 100644
--- a/src/entryPoints/AuthModule/Common/ResendBtn.res
+++ b/src/entryPoints/AuthModule/Common/ResendBtn.res
@@ -32,10 +32,10 @@ let make = (~callBackFun) => {
       }}>
       {"Send again."->React.string}
     </a>
-    <UIUtils.RenderIf condition={isDisabled}>
+    <RenderIf condition={isDisabled}>
       <div className={`${textColor.primaryNormal}`}>
         {`(${mod(seconds, 60)->Int.toString}sec)`->React.string}
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   </div>
 }
diff --git a/src/entryPoints/AuthModule/PreLoginModule/AuthSelect.res b/src/entryPoints/AuthModule/PreLoginModule/AuthSelect.res
index 5db0cc3c2..5fe4d5b97 100644
--- a/src/entryPoints/AuthModule/PreLoginModule/AuthSelect.res
+++ b/src/entryPoints/AuthModule/PreLoginModule/AuthSelect.res
@@ -86,9 +86,9 @@ let make = (~setSelectedAuthId) => {
               ->Array.mapWithIndex((authMethod, index) =>
                 <React.Fragment key={index->Int.toString}>
                   {authMethod->renderComponentForAuthTypes}
-                  <UIUtils.RenderIf condition={index === 0 && authMethods->Array.length !== 2}>
+                  <RenderIf condition={index === 0 && authMethods->Array.length !== 2}>
                     {PreLoginUtils.divider}
-                  </UIUtils.RenderIf>
+                  </RenderIf>
                 </React.Fragment>
               )
               ->React.array}
diff --git a/src/entryPoints/AuthModule/TwoFaAuth/TotpSetup.res b/src/entryPoints/AuthModule/TwoFaAuth/TotpSetup.res
index a70240aa0..de332167a 100644
--- a/src/entryPoints/AuthModule/TwoFaAuth/TotpSetup.res
+++ b/src/entryPoints/AuthModule/TwoFaAuth/TotpSetup.res
@@ -181,12 +181,12 @@ module ConfigureTotpScreen = {
         <p className={`${h2TextStyle} text-grey-900`}> {modalHeaderText->React.string} </p>
       </div>
       <div className="px-12 py-8 flex flex-col gap-12 justify-between flex-1">
-        <UIUtils.RenderIf condition={twoFaStatus === TWO_FA_NOT_SET}>
+        <RenderIf condition={twoFaStatus === TWO_FA_NOT_SET}>
           <TwoFaElements.TotpScanQR totpUrl isQrVisible />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div className="flex flex-col justify-center items-center gap-4">
           <TwoFaElements.TotpInput otp setOtp />
-          <UIUtils.RenderIf condition={twoFaStatus === TWO_FA_SET}>
+          <RenderIf condition={twoFaStatus === TWO_FA_SET}>
             <p className={`${p2Regular} text-jp-gray-700`}>
               {"Didn't get a code? "->React.string}
               <span
@@ -195,7 +195,7 @@ module ConfigureTotpScreen = {
                 {"Use recovery-code"->React.string}
               </span>
             </p>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
         <div className="flex justify-end gap-4">
           <Button
diff --git a/src/entryPoints/AuthModule/TwoFaAuth/TwoFaAuth.res b/src/entryPoints/AuthModule/TwoFaAuth/TwoFaAuth.res
index b50396f84..0d70ba7ae 100644
--- a/src/entryPoints/AuthModule/TwoFaAuth/TwoFaAuth.res
+++ b/src/entryPoints/AuthModule/TwoFaAuth/TwoFaAuth.res
@@ -270,19 +270,18 @@ let make = (~setAuthStatus, ~authType, ~setAuthType) => {
           {switch authType {
           | LoginWithPassword => <EmailPasswordForm setAuthType />
           | ForgetPassword =>
-            <UIUtils.RenderIf
-              condition={featureFlagValues.email && checkAuthMethodExists([PASSWORD])}>
+            <RenderIf condition={featureFlagValues.email && checkAuthMethodExists([PASSWORD])}>
               <EmailForm />
-            </UIUtils.RenderIf>
+            </RenderIf>
           | ResendVerifyEmail
           | SignUP =>
             <>
-              <UIUtils.RenderIf condition={signUpAllowed && signupMethod === SSOTypes.MAGIC_LINK}>
+              <RenderIf condition={signUpAllowed && signupMethod === SSOTypes.MAGIC_LINK}>
                 <EmailForm />
-              </UIUtils.RenderIf>
-              <UIUtils.RenderIf condition={signUpAllowed && signupMethod == SSOTypes.PASSWORD}>
+              </RenderIf>
+              <RenderIf condition={signUpAllowed && signupMethod == SSOTypes.PASSWORD}>
                 <EmailPasswordForm setAuthType />
-              </UIUtils.RenderIf>
+              </RenderIf>
             </>
 
           | LoginWithEmail =>
diff --git a/src/entryPoints/HyperSwitchApp.res b/src/entryPoints/HyperSwitchApp.res
index 1696e9458..5dc3c95ff 100644
--- a/src/entryPoints/HyperSwitchApp.res
+++ b/src/entryPoints/HyperSwitchApp.res
@@ -1,6 +1,5 @@
 @react.component
 let make = () => {
-  open UIUtils
   open HSwitchUtils
   open GlobalVars
   open APIUtils
@@ -455,9 +454,9 @@ let make = () => {
                             remainingPath
                             renderList={() => <HSwitchProfileSettings />}
                             renderShow={_value =>
-                              <UIUtils.RenderIf condition={featureFlagDetails.totp}>
+                              <RenderIf condition={featureFlagDetails.totp}>
                                 <ModifyTwoFaSettings />
-                              </UIUtils.RenderIf>}
+                              </RenderIf>}
                           />
 
                         | list{"business-details"} =>
diff --git a/src/entryPoints/SidebarValues.res b/src/entryPoints/SidebarValues.res
index c364c1a87..297801f0f 100644
--- a/src/entryPoints/SidebarValues.res
+++ b/src/entryPoints/SidebarValues.res
@@ -33,9 +33,9 @@ module GetProductionAccess = {
         <div className={`text-white ${textStyles} !font-semibold`}>
           {productionAccessString->React.string}
         </div>
-        <UIUtils.RenderIf condition={!isProdIntent}>
+        <RenderIf condition={!isProdIntent}>
           <Icon name="thin-right-arrow" customIconColor="text-white" size=20 />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     | None =>
       <Shimmer
diff --git a/src/hooks/AnalyticsHooks.res b/src/hooks/AnalyticsHooks.res
deleted file mode 100644
index 70f6f3760..000000000
--- a/src/hooks/AnalyticsHooks.res
+++ /dev/null
@@ -1 +0,0 @@
-let defaultFilter = Recoil.atom("defaultFilter", "")
diff --git a/src/hooks/QueryHook.res b/src/hooks/QueryHook.res
deleted file mode 100644
index 25277d41e..000000000
--- a/src/hooks/QueryHook.res
+++ /dev/null
@@ -1,11 +0,0 @@
-let parseUrlIntoDict = queryUrl => {
-  let arr = queryUrl->decodeURI->String.split("&")->Array.map(e => e->String.split("="))
-  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->Array.get(0)->Option.getOr(""), e->Array.get(1)->Option.getOr(""))
-  })
-
-  dict
-}
-type queryInput = String(string, string) | Array(string, array<string>)
diff --git a/src/screens/Analytics/Analytics.res b/src/screens/Analytics/Analytics.res
index ba2a3cf7e..a9cbdbc59 100644
--- a/src/screens/Analytics/Analytics.res
+++ b/src/screens/Analytics/Analytics.res
@@ -354,13 +354,13 @@ module TableWrapper = {
               />
             </Form>
           </div>
-          <UIUtils.RenderIf condition={tableData->Array.length > 0}>
+          <RenderIf condition={tableData->Array.length > 0}>
             <div
               className={`flex items-start ${borderColor.primaryNormal} text-sm rounded-md gap-2 px-4 py-3`}>
               <Icon name="info-vacent" className={`${textColor.primaryNormal} mt-1`} size=18 />
               {"'NA' denotes those incomplete or failed payments with no assigned values for the corresponding parameters due to reasons like customer drop-offs, technical failures, etc."->React.string}
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </>
       : <Loader />
   }
@@ -676,18 +676,18 @@ let make = (
     </div>
   }
 
-  <UIUtils.RenderIf condition={filterValueDict->Dict.toArray->Array.length > 0}>
+  <RenderIf condition={filterValueDict->Dict.toArray->Array.length > 0}>
     {switch chartEntity1 {
     | Some(chartEntity) =>
       <div>
         <div className="flex items-center justify-between">
           <PageUtils.PageHeading title=pageTitle subTitle=pageSubTitle />
-          <UIUtils.RenderIf condition={generateReport}>
+          <RenderIf condition={generateReport}>
             {switch generateReportType {
             | Some(entityName) => <GenerateReport entityName />
             | None => React.null
             }}
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
         <div className="mt-2 -ml-1"> topFilterUi </div>
         <div>
@@ -865,5 +865,5 @@ let make = (
       </div>
     | _ => React.null
     }}
-  </UIUtils.RenderIf>
+  </RenderIf>
 }
diff --git a/src/screens/Analytics/AnalyticsNew.res b/src/screens/Analytics/AnalyticsNew.res
index 440dc7fef..a42a0dd5e 100644
--- a/src/screens/Analytics/AnalyticsNew.res
+++ b/src/screens/Analytics/AnalyticsNew.res
@@ -303,13 +303,13 @@ module TableWrapper = {
               />
             </Form>
           </div>
-          <UIUtils.RenderIf condition={tableData->Array.length > 0}>
+          <RenderIf condition={tableData->Array.length > 0}>
             <div
               className={`flex items-start ${borderColor.primaryNormal} text-sm rounded-md gap-2 px-4 py-3`}>
               <Icon name="info-vacent" className={`${textColor.primaryNormal} mt-1`} size=18 />
               {"'NA' denotes those incomplete or failed payments with no assigned values for the corresponding parameters due to reasons like customer drop-offs, technical failures, etc."->React.string}
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </>
       : <Loader />
   }
diff --git a/src/screens/Analytics/GlobalSearch/GlobalSearchBar.res b/src/screens/Analytics/GlobalSearch/GlobalSearchBar.res
index 8f060710b..7fc5dccf8 100644
--- a/src/screens/Analytics/GlobalSearch/GlobalSearchBar.res
+++ b/src/screens/Analytics/GlobalSearch/GlobalSearchBar.res
@@ -122,7 +122,7 @@ module ModalWrapper = {
 module SearchResultsComponent = {
   open GlobalSearchTypes
   open LogicUtils
-  open UIUtils
+
   @react.component
   let make = (~searchResults, ~searchText, ~redirectOnSelect, ~setShowModal) => {
     React.useEffect(() => {
@@ -203,7 +203,7 @@ let make = () => {
   open GlobalSearchBarUtils
   open HeadlessUI
   open LogicUtils
-  open UIUtils
+
   let getURL = APIUtils.useGetURL()
   let prefix = useUrlPrefix()
   let setGLobalSearchResults = HyperswitchAtom.globalSeacrchAtom->Recoil.useSetRecoilState
diff --git a/src/screens/Analytics/GlobalSearch/GlobalSearchBarUtils.res b/src/screens/Analytics/GlobalSearch/GlobalSearchBarUtils.res
index 1c4b2d5f0..4429eceb7 100644
--- a/src/screens/Analytics/GlobalSearch/GlobalSearchBarUtils.res
+++ b/src/screens/Analytics/GlobalSearch/GlobalSearchBarUtils.res
@@ -7,7 +7,7 @@ module ShowMoreLink = {
     ~textStyleClass="",
     ~searchText,
   ) => {
-    <UIUtils.RenderIf condition={section.total_results > 10}>
+    <RenderIf condition={section.total_results > 10}>
       {
         let linkText = `View ${section.total_results->Int.toString} result${section.total_results > 1
             ? "s"
@@ -33,7 +33,7 @@ module ShowMoreLink = {
           </div>
         }
       }
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
diff --git a/src/screens/Analytics/GlobalSearchResults/SearchResultsPage.res b/src/screens/Analytics/GlobalSearchResults/SearchResultsPage.res
index b6de1c9b4..fdfbb1f25 100644
--- a/src/screens/Analytics/GlobalSearchResults/SearchResultsPage.res
+++ b/src/screens/Analytics/GlobalSearchResults/SearchResultsPage.res
@@ -1,7 +1,7 @@
 module RenderSearchResultBody = {
   open GlobalSearchTypes
   open LogicUtils
-  open UIUtils
+
   @react.component
   let make = (~section: resultType) => {
     let redirectOnSelect = element => {
diff --git a/src/screens/Analytics/HomePageOverview/HomePageOverviewComponent.res b/src/screens/Analytics/HomePageOverview/HomePageOverviewComponent.res
index e328356b6..db59d0c59 100644
--- a/src/screens/Analytics/HomePageOverview/HomePageOverviewComponent.res
+++ b/src/screens/Analytics/HomePageOverview/HomePageOverviewComponent.res
@@ -42,7 +42,7 @@ module ConnectorOverview = {
       <div className="flex"> {icons->React.array} </div>
     }
 
-    <UIUtils.RenderIf condition={configuredConnectors->Array.length > 0}>
+    <RenderIf condition={configuredConnectors->Array.length > 0}>
       <div className=boxCss>
         {getConnectorIconsList()}
         <div className="flex items-center gap-2">
@@ -61,7 +61,7 @@ module ConnectorOverview = {
           }}
         />
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
@@ -169,7 +169,7 @@ module OverviewInfo = {
       }
     }
 
-    <UIUtils.RenderIf condition={sampleData}>
+    <RenderIf condition={sampleData}>
       <div className="flex bg-white border rounded-md gap-2 px-9 py-3">
         <Icon name="info-vacent" className={`${textColor.primaryNormal}`} size=20 />
         <span>
@@ -182,7 +182,7 @@ module OverviewInfo = {
         </span>
         <span> {"sample data"->React.string} </span>
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
@@ -194,12 +194,12 @@ let make = () => {
     <p className=headingStyle> {"Overview"->React.string} </p>
     <div className="grid grid-cols-1 md:grid-cols-3 w-full gap-4">
       <ConnectorOverview />
-      <UIUtils.RenderIf condition={userPermissionJson.analyticsView === Access}>
+      <RenderIf condition={userPermissionJson.analyticsView === Access}>
         <PaymentOverview />
-      </UIUtils.RenderIf>
-      <UIUtils.RenderIf condition={systemMetrics}>
+      </RenderIf>
+      <RenderIf condition={systemMetrics}>
         <SystemMetricsInsights />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
     <OverviewInfo />
   </div>
diff --git a/src/screens/Analytics/Logs/LogUtils/ApiDetailsComponent.res b/src/screens/Analytics/Logs/LogUtils/ApiDetailsComponent.res
index b8337d4fd..1a3f3bee2 100644
--- a/src/screens/Analytics/Logs/LogUtils/ApiDetailsComponent.res
+++ b/src/screens/Analytics/Logs/LogUtils/ApiDetailsComponent.res
@@ -180,11 +180,11 @@ let make = (
   <div className="flex items-start gap-4">
     <div className="flex flex-col items-center h-full">
       <div className={`w-fit h-fit p-1  border rounded-md bg-${stepperColor} border-gray-300`} />
-      <UIUtils.RenderIf condition={index !== logsDataLength}>
+      <RenderIf condition={index !== logsDataLength}>
         <div
           className={`h-full border-${stepperBorderColor} border-dashed rounded divide-x-2 border-2 my-1`}
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
     <div
       className={`flex gap-6 items-start w-full py-3 px-3 cursor-pointer ${borderClass} -mt-5 mb-8`}
diff --git a/src/screens/Analytics/Logs/LogUtils/AuditLogUI.res b/src/screens/Analytics/Logs/LogUtils/AuditLogUI.res
index 041a7abd8..728702b08 100644
--- a/src/screens/Analytics/Logs/LogUtils/AuditLogUI.res
+++ b/src/screens/Analytics/Logs/LogUtils/AuditLogUI.res
@@ -68,7 +68,7 @@ module TabDetails = {
         | Event
         | Request =>
           <div className="px-5 py-3">
-            <UIUtils.RenderIf
+            <RenderIf
               condition={logDetails.request->isNonEmptyString &&
                 selectedOption.optionType !== WEBHOOKS}>
               <div className="flex justify-end">
@@ -77,31 +77,31 @@ module TabDetails = {
                 />
               </div>
               <PrettyPrintJson jsonToDisplay=logDetails.request />
-            </UIUtils.RenderIf>
-            <UIUtils.RenderIf
+            </RenderIf>
+            <RenderIf
               condition={logDetails.request->isEmptyString &&
                 selectedOption.optionType !== WEBHOOKS}>
               <NoDataFound
                 customCssClass={"my-6"} message="No Data Available" renderType=Painting
               />
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
         | Metadata
         | Response =>
           <div className="px-5 py-3">
-            <UIUtils.RenderIf condition={logDetails.response->isNonEmptyString}>
+            <RenderIf condition={logDetails.response->isNonEmptyString}>
               <div className="flex justify-end">
                 <HelperComponents.CopyTextCustomComp
                   displayValue=" " copyValue={logDetails.response->Some} customTextCss="text-nowrap"
                 />
               </div>
               <PrettyPrintJson jsonToDisplay={logDetails.response} />
-            </UIUtils.RenderIf>
-            <UIUtils.RenderIf condition={logDetails.response->isEmptyString}>
+            </RenderIf>
+            <RenderIf condition={logDetails.response->isEmptyString}>
               <NoDataFound
                 customCssClass={"my-6"} message="No Data Available" renderType=Painting
               />
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
         | _ => React.null
         }}
@@ -248,7 +248,7 @@ let make = (~id, ~urls, ~logType: LogTypes.pageType) => {
     </div>
 
   let codeBlock =
-    <UIUtils.RenderIf
+    <RenderIf
       condition={logDetails.response->isNonEmptyString || logDetails.request->isNonEmptyString}>
       <div
         className="flex flex-col gap-4 border-l-2 border-border-light-grey show-scrollbar scroll-smooth overflow-scroll  w-3/5">
@@ -265,7 +265,7 @@ let make = (~id, ~urls, ~logType: LogTypes.pageType) => {
         </div>
         <TabDetails activeTab logDetails selectedOption />
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
 
   open OrderUtils
   <PageLoaderWrapper
@@ -277,7 +277,7 @@ let make = (~id, ~urls, ~logType: LogTypes.pageType) => {
       message={`No logs available for this ${(logType :> string)->String.toLowerCase}`}
     />}>
     {<>
-      <UIUtils.RenderIf condition={id->HSwitchOrderUtils.isTestData || data->Array.length === 0}>
+      <RenderIf condition={id->HSwitchOrderUtils.isTestData || data->Array.length === 0}>
         <div
           className="flex items-center gap-2 bg-white w-full border-2 p-3 !opacity-100 rounded-lg text-md font-medium">
           <Icon name="info-circle-unfilled" size=16 />
@@ -285,14 +285,14 @@ let make = (~id, ~urls, ~logType: LogTypes.pageType) => {
             {`No logs available for this ${(logType :> string)->String.toLowerCase}`->React.string}
           </div>
         </div>
-      </UIUtils.RenderIf>
-      <UIUtils.RenderIf condition={!(id->HSwitchOrderUtils.isTestData || data->Array.length === 0)}>
+      </RenderIf>
+      <RenderIf condition={!(id->HSwitchOrderUtils.isTestData || data->Array.length === 0)}>
         <Section
           customCssClass={`bg-white dark:bg-jp-gray-lightgray_background rounded-md pt-2 pb-4 flex gap-7 justify-between h-48-rem !max-h-50-rem !min-w-[55rem] max-w-[72rem] overflow-scroll`}>
           {timeLine}
           {codeBlock}
         </Section>
-      </UIUtils.RenderIf>
+      </RenderIf>
     </>}
   </PageLoaderWrapper>
 }
diff --git a/src/screens/Analytics/Logs/LogUtils/LogsWrapper.res b/src/screens/Analytics/Logs/LogUtils/LogsWrapper.res
index 6af4de7d4..55cadf278 100644
--- a/src/screens/Analytics/Logs/LogUtils/LogsWrapper.res
+++ b/src/screens/Analytics/Logs/LogUtils/LogsWrapper.res
@@ -20,9 +20,9 @@ let make = (~wrapperFor, ~children) => {
   let isSmallDevice = MatchMedia.useMatchMedia("(max-width: 700px)")
 
   <div className="overflow-x-scroll">
-    <UIUtils.RenderIf condition={isSmallDevice}>
+    <RenderIf condition={isSmallDevice}>
       <EventLogMobileView wrapperFor />
-    </UIUtils.RenderIf>
-    <UIUtils.RenderIf condition={!isSmallDevice && auditTrail}> {children} </UIUtils.RenderIf>
+    </RenderIf>
+    <RenderIf condition={!isSmallDevice && auditTrail}> {children} </RenderIf>
   </div>
 }
diff --git a/src/screens/Analytics/Logs/LogUtils/PrettyPrintJson.res b/src/screens/Analytics/Logs/LogUtils/PrettyPrintJson.res
index 0045349ab..d65660ebe 100644
--- a/src/screens/Analytics/Logs/LogUtils/PrettyPrintJson.res
+++ b/src/screens/Analytics/Logs/LogUtils/PrettyPrintJson.res
@@ -32,16 +32,16 @@ let make = (
     </div>
 
   <div className="flex flex-col gap-2">
-    <UIUtils.RenderIf condition={parsedJson->isNonEmptyString}>
+    <RenderIf condition={parsedJson->isNonEmptyString}>
       {<>
-        <UIUtils.RenderIf condition={headerText->Option.isSome}>
+        <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.getOr("")->React.string}
             </p>
             {copyParsedJson}
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div className="overflow-auto">
           <ReactSyntaxHighlighter.SyntaxHighlighter
             style={ReactSyntaxHighlighter.lightfair}
@@ -62,8 +62,8 @@ let make = (
           </ReactSyntaxHighlighter.SyntaxHighlighter>
         </div>
       </>}
-    </UIUtils.RenderIf>
-    <UIUtils.RenderIf condition={parsedJson->isEmptyString}>
+    </RenderIf>
+    <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.getOr("")->React.string}
@@ -72,6 +72,6 @@ let make = (
           {"Failed to load!"->React.string}
         </p>
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   </div>
 }
diff --git a/src/screens/Analytics/PaymentsAnalytics/PaymentAnalytics.res b/src/screens/Analytics/PaymentsAnalytics/PaymentAnalytics.res
index 92fcf8c9a..43286c74c 100644
--- a/src/screens/Analytics/PaymentsAnalytics/PaymentAnalytics.res
+++ b/src/screens/Analytics/PaymentsAnalytics/PaymentAnalytics.res
@@ -232,9 +232,9 @@ let make = () => {
     <div className="flex flex-col gap-5">
       <div className="flex items-center justify-between ">
         <PageUtils.PageHeading title subTitle />
-        <UIUtils.RenderIf condition={generateReport}>
+        <RenderIf condition={generateReport}>
           <GenerateReport entityName={PAYMENT_REPORT} />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
       <div
         className="-ml-1 sticky top-0 z-30  p-1 bg-hyperswitch_background py-3 -mt-3 rounded-lg border">
diff --git a/src/screens/Analytics/SystemMetrics/SystemMetricsAnalytics.res b/src/screens/Analytics/SystemMetrics/SystemMetricsAnalytics.res
index d0b82d323..8780da2b4 100644
--- a/src/screens/Analytics/SystemMetrics/SystemMetricsAnalytics.res
+++ b/src/screens/Analytics/SystemMetrics/SystemMetricsAnalytics.res
@@ -286,7 +286,7 @@ module SystemMetricsAnalytics = {
     }, (startTimeVal, endTimeVal, filterBody->JSON.Encode.object->JSON.stringify))
     let filterData = filterDataJson->Option.getOr(Dict.make()->JSON.Encode.object)
 
-    <UIUtils.RenderIf condition={getModuleFilters->Dict.toArray->Array.length > 0}>
+    <RenderIf condition={getModuleFilters->Dict.toArray->Array.length > 0}>
       {switch chartEntity1 {
       | Some(chartEntity) =>
         <div className="h-75-vh">
@@ -320,7 +320,7 @@ module SystemMetricsAnalytics = {
         </div>
       | _ => React.null
       }}
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
diff --git a/src/screens/ConfigurePMTs/PaymentMethodConfig.res b/src/screens/ConfigurePMTs/PaymentMethodConfig.res
index c6b6e3bf2..24f20ef2e 100644
--- a/src/screens/ConfigurePMTs/PaymentMethodConfig.res
+++ b/src/screens/ConfigurePMTs/PaymentMethodConfig.res
@@ -154,7 +154,7 @@ let make = (
   let id = `payment_methods_enabled[${payment_method_index->Int.toString}].payment_method_types[${payment_method_types_index->Int.toString}]`
 
   <>
-    <UIUtils.RenderIf condition={showPaymentMthdConfigModal}>
+    <RenderIf condition={showPaymentMthdConfigModal}>
       <Modal
         childClass="p-0"
         showModal={showPaymentMthdConfigModal}
@@ -194,7 +194,7 @@ let make = (
           </Form>
         </PageLoaderWrapper>
       </Modal>
-    </UIUtils.RenderIf>
+    </RenderIf>
     <ACLDiv
       permission=permissionJson.connectorsManage
       className="cursor-pointer w-150"
diff --git a/src/screens/Connectors/ConnectPayPalFlow/ConnectPayPal.res b/src/screens/Connectors/ConnectPayPalFlow/ConnectPayPal.res
index 4fca4d62a..c597177e2 100644
--- a/src/screens/Connectors/ConnectPayPalFlow/ConnectPayPal.res
+++ b/src/screens/Connectors/ConnectPayPalFlow/ConnectPayPal.res
@@ -111,7 +111,6 @@ module LandingScreen = {
 module ErrorPage = {
   @react.component
   let make = (~setupAccountStatus, ~actionUrl, ~getPayPalStatus, ~setScreenState) => {
-    open UIUtils
     let errorPageDetails = setupAccountStatus->PayPalFlowUtils.getPageDetailsForAutomatic
 
     <div className="flex flex-col gap-6">
diff --git a/src/screens/Connectors/ConnectPayPalFlow/MenuOptionForPayPal.res b/src/screens/Connectors/ConnectPayPalFlow/MenuOptionForPayPal.res
index 1cc2b5f52..314e6806e 100644
--- a/src/screens/Connectors/ConnectPayPalFlow/MenuOptionForPayPal.res
+++ b/src/screens/Connectors/ConnectPayPalFlow/MenuOptionForPayPal.res
@@ -11,7 +11,7 @@ let make = (
   ~setInitialValues,
 ) => {
   open HeadlessUI
-  open UIUtils
+
   let showPopUp = PopUpState.useShowPopUp()
   let showToast = ToastState.useShowToast()
   let deleteTrackingDetails = PayPalFlowUtils.useDeleteTrackingDetails()
diff --git a/src/screens/Connectors/ConnectorAccountDetailsHelper.res b/src/screens/Connectors/ConnectorAccountDetailsHelper.res
index 4dc2d3adb..2f17af8cd 100644
--- a/src/screens/Connectors/ConnectorAccountDetailsHelper.res
+++ b/src/screens/Connectors/ConnectorAccountDetailsHelper.res
@@ -85,7 +85,7 @@ module ErrorValidation = {
     let errorDict = formState.values->validate->getDictFromJsonObject
     let {touched} = ReactFinalForm.useField(fieldName).meta
     let err = touched ? errorDict->Dict.get(fieldName) : None
-    <UIUtils.RenderIf condition={err->Option.isSome}>
+    <RenderIf condition={err->Option.isSome}>
       <div
         className={`flex flex-row items-center text-orange-950 dark:text-orange-400 pt-2 text-base font-medium text-start ml-1`}>
         <div className="flex mr-2">
@@ -93,7 +93,7 @@ module ErrorValidation = {
         </div>
         {React.string(err->Option.getOr(""->JSON.Encode.string)->getStringFromJson(""))}
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
@@ -122,7 +122,7 @@ module RenderConnectorInputFields = {
       let label = details->getString(field, "")
 
       let formName = isLabelNested ? `${name}.${field}` : name
-      <UIUtils.RenderIf condition={label->isNonEmptyString} key={i->Int.toString}>
+      <RenderIf condition={label->isNonEmptyString} key={i->Int.toString}>
         <AddDataAttributes attributes=[("data-testid", label->titleToSnake->String.toLowerCase)]>
           <div key={label}>
             <FormRenderer.FieldRenderer
@@ -159,7 +159,7 @@ module RenderConnectorInputFields = {
             />
           </div>
         </AddDataAttributes>
-      </UIUtils.RenderIf>
+      </RenderIf>
     })
     ->React.array
   }
@@ -390,7 +390,7 @@ module BusinessProfileRender = {
           (),
         )}
       />
-      <UIUtils.RenderIf condition={!isUpdateFlow}>
+      <RenderIf condition={!isUpdateFlow}>
         <div className="text-gray-400 text-sm mt-3">
           <span> {"Manage your list of profiles."->React.string} </span>
           <span
@@ -402,7 +402,7 @@ module BusinessProfileRender = {
             {React.string("here.")}
           </span>
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
       <BusinessProfile isFromSettings=false showModalFromOtherScreen setShowModalFromOtherScreen />
     </>
   }
@@ -453,9 +453,7 @@ module VerifyConnectorModal = {
                 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-100 rounded-md font-semibold">
                 {`${verifyErrorMessage->Option.getOr("")}`->React.string}
               </div>
-              <UIUtils.RenderIf condition={suggestedActionExists}>
-                {suggestedAction}
-              </UIUtils.RenderIf>
+              <RenderIf condition={suggestedActionExists}> {suggestedAction} </RenderIf>
             </div>
           </div>
           <div className="flex flex-row justify-end gap-5 mt-4 mb-2 p-3">
@@ -505,7 +503,7 @@ module ConnectorHeaderWrapper = {
           </h2>
         </div>
         <div className="flex flex-row mt-6 md:mt-0 md:justify-self-end h-min">
-          <UIUtils.RenderIf
+          <RenderIf
             condition={connectorsWithIntegrationSteps->Array.includes(connectorNameFromType) &&
               conditionForIntegrationSteps}>
             <a
@@ -515,11 +513,11 @@ module ConnectorHeaderWrapper = {
               {React.string("View integration steps")}
               <Icon name="external-link-alt" size=14 className="ml-2" />
             </a>
-          </UIUtils.RenderIf>
+          </RenderIf>
           {headerButton}
         </div>
       </div>
-      <UIUtils.RenderIf
+      <RenderIf
         condition={switch connectorNameFromType {
         | Processors(BRAINTREE) => true
         | _ => false
@@ -536,7 +534,7 @@ module ConnectorHeaderWrapper = {
             </div>
           </h1>
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
       {children}
     </>
   }
diff --git a/src/screens/Connectors/ConnectorHome.res b/src/screens/Connectors/ConnectorHome.res
index bfd471fca..a92c460cb 100644
--- a/src/screens/Connectors/ConnectorHome.res
+++ b/src/screens/Connectors/ConnectorHome.res
@@ -37,9 +37,9 @@ module ConnectorCurrentStepIndicator = {
                   <p className=textColor> {(i + 1)->Int.toString->React.string} </p>
                 }}
               </div>
-              <UIUtils.RenderIf condition={i !== stepsArr->Array.length - 1}>
+              <RenderIf condition={i !== stepsArr->Array.length - 1}>
                 <div className={`h-0.5 ${stepLineIndicator} ml-2 flex-1`} />
-              </UIUtils.RenderIf>
+              </RenderIf>
             </div>
             <div className={stepNameIndicator}>
               {step->ConnectorUtils.getStepName->React.string}
@@ -216,7 +216,7 @@ let make = (~isPayoutFlow=false, ~showStepIndicator=true, ~showBreadCrumb=true)
 
   <PageLoaderWrapper screenState customUI={customUiForPaypal}>
     <div className="flex flex-col gap-10 overflow-scroll h-full w-full">
-      <UIUtils.RenderIf condition={showBreadCrumb}>
+      <RenderIf condition={showBreadCrumb}>
         <BreadCrumbNavigation
           path=[
             connectorID === "new"
@@ -233,16 +233,16 @@ let make = (~isPayoutFlow=false, ~showStepIndicator=true, ~showBreadCrumb=true)
           currentPageTitle={connector->ConnectorUtils.getDisplayNameForConnector}
           cursorStyle="cursor-pointer"
         />
-      </UIUtils.RenderIf>
-      <UIUtils.RenderIf condition={currentStep !== Preview && showStepIndicator}>
+      </RenderIf>
+      <RenderIf condition={currentStep !== Preview && showStepIndicator}>
         <ConnectorCurrentStepIndicator currentStep stepsArr borderWidth />
-      </UIUtils.RenderIf>
-      <UIUtils.RenderIf
+      </RenderIf>
+      <RenderIf
         condition={connectorTypeFromName->checkIsDummyConnector(featureFlagDetails.testProcessors)}>
         <HSwitchUtils.WarningArea
           warningText="This is a test connector and will not be reflected on your payment processor dashboard."
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <div
         className="bg-white rounded-lg border h-3/4 overflow-scroll shadow-boxShadowMultiple show-scrollbar">
         {switch currentStep {
diff --git a/src/screens/Connectors/ConnectorList.res b/src/screens/Connectors/ConnectorList.res
index bf01174b9..ef29da5c9 100644
--- a/src/screens/Connectors/ConnectorList.res
+++ b/src/screens/Connectors/ConnectorList.res
@@ -1,6 +1,5 @@
 @react.component
 let make = (~isPayoutFlow=false) => {
-  open UIUtils
   open ConnectorUtils
   let {showFeedbackModal, setShowFeedbackModal} = React.useContext(GlobalProvider.defaultContext)
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
diff --git a/src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res b/src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res
index 37ed3f26a..66d7fe6b0 100644
--- a/src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res
+++ b/src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res
@@ -23,11 +23,11 @@ module SimplifiedHelper = {
             <p className={`font-medium text-base ${textColor.primaryNormal}`}>
               {heading->React.string}
             </p>
-            <UIUtils.RenderIf condition={subText->Option.isSome}>
+            <RenderIf condition={subText->Option.isSome}>
               <p className={`mt-2 text-base text-hyperswitch_black opacity-50 font-normal`}>
                 {subText->Option.getOr("")->React.string}
               </p>
-            </UIUtils.RenderIf>
+            </RenderIf>
             {switch customElement {
             | Some(element) => element
             | _ => React.null
diff --git a/src/screens/Connectors/ConnectorPreview.res b/src/screens/Connectors/ConnectorPreview.res
index 809baffe3..011ef10d9 100644
--- a/src/screens/Connectors/ConnectorPreview.res
+++ b/src/screens/Connectors/ConnectorPreview.res
@@ -3,12 +3,12 @@ module InfoField = {
   let make = (~render, ~label) => {
     let str = render->Option.getOr("")
 
-    <UIUtils.RenderIf condition={str->LogicUtils.isNonEmptyString}>
+    <RenderIf condition={str->LogicUtils.isNonEmptyString}>
       <div>
         <h2 className="text-lg font-semibold"> {label->React.string} </h2>
         <h3 className=" break-words"> {str->React.string} </h3>
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
@@ -358,7 +358,7 @@ let make = (
                 className={`px-4 py-2 rounded-full w-fit font-medium text-sm !text-black ${isConnectorDisabled->connectorStatusStyle}`}>
                 {(isConnectorDisabled ? "DISABLED" : "ENABLED")->React.string}
               </div>
-              <UIUtils.RenderIf condition={showMenuOption}>
+              <RenderIf condition={showMenuOption}>
                 {switch (connector->getConnectorNameTypeFromString(), paypalAutomaticFlow) {
                 | (Processors(PAYPAL), true) =>
                   <MenuOptionForPayPal
@@ -374,7 +374,7 @@ let make = (
                 | (_, _) =>
                   <MenuOption setCurrentStep disableConnector isConnectorDisabled connector />
                 }}
-              </UIUtils.RenderIf>
+              </RenderIf>
             </div>
 
           | _ =>
diff --git a/src/screens/Connectors/ConnectorUIUtils/PaymentMethod.res b/src/screens/Connectors/ConnectorUIUtils/PaymentMethod.res
index 4658140ad..0c0d2b4c7 100644
--- a/src/screens/Connectors/ConnectorUIUtils/PaymentMethod.res
+++ b/src/screens/Connectors/ConnectorUIUtils/PaymentMethod.res
@@ -19,7 +19,7 @@ module CardRenderer = {
   open ConnectorTypes
   open ConnectorUtils
   open Wallet
-  open UIUtils
+
   @react.component
   let make = (
     ~updateDetails,
diff --git a/src/screens/Connectors/Wallets/WalletHelper.res b/src/screens/Connectors/Wallets/WalletHelper.res
index 113af929c..4e452eb10 100644
--- a/src/screens/Connectors/Wallets/WalletHelper.res
+++ b/src/screens/Connectors/Wallets/WalletHelper.res
@@ -123,11 +123,11 @@ module SimplifiedHelper = {
             <p className={`font-medium text-base ${textColor.primaryNormal}`}>
               {heading->React.string}
             </p>
-            <UIUtils.RenderIf condition={subText->Option.isSome}>
+            <RenderIf condition={subText->Option.isSome}>
               <p className={`mt-2 text-base text-hyperswitch_black opacity-50 font-normal`}>
                 {subText->Option.getOr("")->React.string}
               </p>
-            </UIUtils.RenderIf>
+            </RenderIf>
             {switch customElement {
             | Some(element) => element
             | _ => React.null
diff --git a/src/screens/Customers/ShowCustomers.res b/src/screens/Customers/ShowCustomers.res
index d7d7f2cae..c3e00b04d 100644
--- a/src/screens/Customers/ShowCustomers.res
+++ b/src/screens/Customers/ShowCustomers.res
@@ -20,7 +20,7 @@ module CustomerInfo = {
             className={`flex flex-wrap ${justifyClassName} dark:bg-jp-gray-lightgray_background dark:border-jp-gray-no_data_border`}>
             {detailsFields
             ->Array.mapWithIndex((colType, i) => {
-              <UIUtils.RenderIf
+              <RenderIf
                 condition={!(excludeColKeys->Array.includes(colType))} key={Int.toString(i)}>
                 <div className={`flex ${widthClass} items-center`}>
                   <OrderUtils.DisplayKeyValueParams
@@ -32,14 +32,14 @@ module CustomerInfo = {
                     textColor="!font-normal !text-jp-gray-700"
                   />
                 </div>
-              </UIUtils.RenderIf>
+              </RenderIf>
             })
             ->React.array}
           </div>
         </FormRenderer.DesktopRow>
-        <UIUtils.RenderIf condition={children->Option.isSome}>
+        <RenderIf condition={children->Option.isSome}>
           {children->Option.getOr(React.null)}
-        </UIUtils.RenderIf>
+        </RenderIf>
       </OrderUtils.Section>
     }
   }
diff --git a/src/screens/Developer/APIKeys/PublishableAndHashKeySection.res b/src/screens/Developer/APIKeys/PublishableAndHashKeySection.res
index 3184b313e..5f581899b 100644
--- a/src/screens/Developer/APIKeys/PublishableAndHashKeySection.res
+++ b/src/screens/Developer/APIKeys/PublishableAndHashKeySection.res
@@ -63,7 +63,7 @@ let make = () => {
               customParentClass="flex items-center gap-5"
             />
           </div>
-          <UIUtils.RenderIf condition={paymentResponsHashKey->String.length !== 0}>
+          <RenderIf condition={paymentResponsHashKey->String.length !== 0}>
             <div className="flex flex-col gap-4">
               <div className="break-all text-md text-base text-grey-700 font-semibold">
                 {"Payment Response Hash Key"->React.string}
@@ -74,7 +74,7 @@ let make = () => {
                 customParentClass="flex items-center gap-5"
               />
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </FormRenderer.DesktopRow>
       </div>
     </div>
diff --git a/src/screens/Developer/PaymentSettings/PaymentSettings.res b/src/screens/Developer/PaymentSettings/PaymentSettings.res
index 72d7fba62..8e6a8e4da 100644
--- a/src/screens/Developer/PaymentSettings/PaymentSettings.res
+++ b/src/screens/Developer/PaymentSettings/PaymentSettings.res
@@ -12,7 +12,7 @@ module InfoViewForWebhooks = {
       <p className="font-semibold text-fs-15"> {heading->React.string} </p>
       <div className="flex gap-2 break-all w-full items-start">
         <p className="font-medium text-fs-14 text-black opacity-50"> {subHeading->React.string} </p>
-        <UIUtils.RenderIf condition={isCopy}>
+        <RenderIf condition={isCopy}>
           <img
             src={`/assets/CopyToClipboard.svg`}
             className="cursor-pointer"
@@ -20,7 +20,7 @@ module InfoViewForWebhooks = {
               onCopyClick(ev)
             }}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </div>
   }
@@ -97,11 +97,11 @@ module AuthenticationInput = {
           <TextInput input={valueInput} placeholder={"Enter value"} />
         </div>
       </DesktopRow>
-      <UIUtils.RenderIf condition={authHeaders->Array.length > 1}>
+      <RenderIf condition={authHeaders->Array.length > 1}>
         <div className="mt-6 flex gap-4">
           <ModalCloseIcon onClick={_ev => removeAuthHeaders(index, key)} />
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   }
 }
@@ -165,7 +165,7 @@ module WebHookAuthenticationHeaders = {
           <div className=" col-span-4">
             <AuthenticationInput removeAuthHeaders authHeaders index />
           </div>
-          <UIUtils.RenderIf condition={index === authHeaders->Array.length - 1 && index != 3}>
+          <RenderIf condition={index === authHeaders->Array.length - 1 && index != 3}>
             <div className="flex justify-start items-center mt-4">
               <Icon
                 name="plus"
@@ -174,7 +174,7 @@ module WebHookAuthenticationHeaders = {
                 onClick={_ => addAuthHeaders()}
               />
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
       })
       ->React.array}
@@ -281,7 +281,7 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
 
   <PageLoaderWrapper screenState>
     <div className={`${showFormOnly ? "" : "py-4 md:py-10"} h-full flex flex-col`}>
-      <UIUtils.RenderIf condition={!showFormOnly}>
+      <RenderIf condition={!showFormOnly}>
         <BreadCrumbNavigation
           path=[
             {
@@ -292,7 +292,7 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
           currentPageTitle={busiProfieDetails.profile_name}
           cursorStyle="cursor-pointer"
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <div className={`${showFormOnly ? "" : "mt-4"}`}>
         <div
           className={`w-full ${showFormOnly
@@ -364,7 +364,7 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
                     )}
                   />
                 </DesktopRow>
-                <UIUtils.RenderIf condition={isBusinessProfileHasThreeds}>
+                <RenderIf condition={isBusinessProfileHasThreeds}>
                   <DesktopRow>
                     <FieldRenderer
                       field={threedsConnectorList
@@ -381,7 +381,7 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
                       fieldWrapperClass="max-w-xl"
                     />
                   </DesktopRow>
-                </UIUtils.RenderIf>
+                </RenderIf>
                 <ReturnUrl />
                 <WebHook />
                 <DesktopRow>
diff --git a/src/screens/Developer/PaymentSettings/PaymentSettingsList.res b/src/screens/Developer/PaymentSettings/PaymentSettingsList.res
index c48675e9b..28aadb746 100644
--- a/src/screens/Developer/PaymentSettings/PaymentSettingsList.res
+++ b/src/screens/Developer/PaymentSettings/PaymentSettingsList.res
@@ -10,7 +10,7 @@ let make = (
 
   let businessProfileValues = HyperswitchAtom.businessProfilesAtom->Recoil.useRecoilValueFromAtom
 
-  <UIUtils.RenderIf condition=isFromSettings>
+  <RenderIf condition=isFromSettings>
     <div className="relative h-full">
       <div className="flex flex-col-reverse md:flex-col">
         <PageUtils.PageHeading
@@ -32,5 +32,5 @@ let make = (
         />
       </div>
     </div>
-  </UIUtils.RenderIf>
+  </RenderIf>
 }
diff --git a/src/screens/Disputes/Disputes.res b/src/screens/Disputes/Disputes.res
index 567b2a3cd..7dba57705 100644
--- a/src/screens/Disputes/Disputes.res
+++ b/src/screens/Disputes/Disputes.res
@@ -41,7 +41,7 @@ let make = () => {
 
   let customUI =
     <>
-      <UIUtils.RenderIf condition={!branding}>
+      <RenderIf condition={!branding}>
         <div
           className={`${borderColor.primaryNormal} flex  items-start  text-sm rounded-md gap-2 px-4 py-3 mt-5`}>
           <Icon name="info-vacent" className={`${textColor.primaryNormal} mt-1`} size=18 />
@@ -56,7 +56,7 @@ let make = () => {
             {"for your processor."->React.string}
           </p>
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
       <HelperComponents.BluredTableComponent
         infoText="No disputes as of now." moduleName=" " showRedirectCTA=false
       />
@@ -67,9 +67,9 @@ let make = () => {
   <div>
     <PageUtils.PageHeading title="Disputes" subTitle="View and manage all disputes" />
     <div className="flex w-full justify-end pb-3 gap-3">
-      <UIUtils.RenderIf condition={generateReport && disputesData->Array.length > 0}>
+      <RenderIf condition={generateReport && disputesData->Array.length > 0}>
         <GenerateReport entityName={DISPUTE_REPORT} />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
     <PageLoaderWrapper screenState customUI>
       <div className="flex flex-col gap-4">
diff --git a/src/screens/Disputes/ShowDisputes.res b/src/screens/Disputes/ShowDisputes.res
index 92240b7bd..531936b0c 100644
--- a/src/screens/Disputes/ShowDisputes.res
+++ b/src/screens/Disputes/ShowDisputes.res
@@ -52,7 +52,6 @@ module Details = {
     open DisputeTypes
     open DisputesUtils
     open LogicUtils
-    open UIUtils
 
     let connectorTypeFromName = data.connector->ConnectorUtils.getConnectorNameTypeFromString()
     let {disputeEvidenceUpload} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
@@ -161,9 +160,9 @@ module DisputesInfo = {
         {"Summary"->React.string}
       </div>
       <Details data=disputesData getHeading getCell detailsFields=allColumns setDisputeData />
-      <UIUtils.RenderIf condition={!showNoteComponentCondition}>
+      <RenderIf condition={!showNoteComponentCondition}>
         <DisputesNoteComponent disputesData />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </>
   }
 }
@@ -216,7 +215,7 @@ let make = (~id) => {
       </div>
       <DisputesInfo orderDict={data} setDisputeData />
       <div className="mt-5" />
-      <UIUtils.RenderIf condition={featureFlagDetails.auditTrail}>
+      <RenderIf condition={featureFlagDetails.auditTrail}>
         <OrderUIUtils.RenderAccordian
           accordion={[
             {
@@ -230,7 +229,7 @@ let make = (~id) => {
             },
           ]}
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   </PageLoaderWrapper>
 }
diff --git a/src/screens/Disputes/UploadEvidenceForDisputes.res b/src/screens/Disputes/UploadEvidenceForDisputes.res
index c9bf1aa9b..bc8259a67 100644
--- a/src/screens/Disputes/UploadEvidenceForDisputes.res
+++ b/src/screens/Disputes/UploadEvidenceForDisputes.res
@@ -414,7 +414,7 @@ let make = (~disputeID, ~setUploadEvidenceModal, ~setDisputeData, ~connector) =>
   }
 
   <div className="flex gap-2">
-    <UIUtils.RenderIf
+    <RenderIf
       condition={existsInArray(
         connector->getConnectorNameTypeFromString(),
         connectorsSupportAcceptDispute,
@@ -426,7 +426,7 @@ let make = (~disputeID, ~setUploadEvidenceModal, ~setDisputeData, ~connector) =>
         customButtonStyle="!py-3 !px-2.5"
         onClick={_ => handlePopupOpen()}
       />
-    </UIUtils.RenderIf>
+    </RenderIf>
     <Button
       buttonType={Primary}
       text="Counter Dispute"
diff --git a/src/screens/FraudAndRisk/FRMConfigure.res b/src/screens/FraudAndRisk/FRMConfigure.res
index 85ea7b801..44f4c823d 100644
--- a/src/screens/FraudAndRisk/FRMConfigure.res
+++ b/src/screens/FraudAndRisk/FRMConfigure.res
@@ -84,9 +84,9 @@ let make = () => {
       <BreadCrumbNavigation
         path currentPageTitle={frmName->capitalizeString} cursorStyle="cursor-pointer"
       />
-      <UIUtils.RenderIf condition={currentStep !== Preview}>
+      <RenderIf condition={currentStep !== Preview}>
         <ConnectorHome.ConnectorCurrentStepIndicator currentStep stepsArr />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <div className="bg-white rounded border h-3/4 p-2 md:p-6 overflow-scroll">
         {switch currentStep {
         | IntegFields =>
diff --git a/src/screens/FraudAndRisk/FRMIntegrationFields.res b/src/screens/FraudAndRisk/FRMIntegrationFields.res
index a1baf06d3..1d526d0a9 100644
--- a/src/screens/FraudAndRisk/FRMIntegrationFields.res
+++ b/src/screens/FraudAndRisk/FRMIntegrationFields.res
@@ -34,11 +34,11 @@ module AdvanceSettings = {
           {"Show advanced settings"->React.string}
         </p>
       </div>
-      <UIUtils.RenderIf condition={renderCountrySelector && isFRMSettings}>
+      <RenderIf condition={renderCountrySelector && isFRMSettings}>
         <ConnectorAccountDetailsHelper.BusinessProfileRender
           isUpdateFlow selectedConnector={frmName}
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </>
   }
 }
diff --git a/src/screens/FraudAndRisk/FRMPaymentMethods.res b/src/screens/FraudAndRisk/FRMPaymentMethods.res
index d10001cc3..33a1743d4 100644
--- a/src/screens/FraudAndRisk/FRMPaymentMethods.res
+++ b/src/screens/FraudAndRisk/FRMPaymentMethods.res
@@ -96,12 +96,12 @@ module FormField = {
         </div>
       </div>
       <div className={`grid grid-cols-2 md:grid-cols-4 gap-4`}>
-        <UIUtils.RenderIf condition={sectionType == ActionType}>
+        <RenderIf condition={sectionType == ActionType}>
           <div className="flex items-center gap-2 break-all">
             {paymentMethodTypeInfo.action->getActionTypeLabel->Jsx.string}
           </div>
-        </UIUtils.RenderIf>
-        <UIUtils.RenderIf condition={sectionType != ActionType}>
+        </RenderIf>
+        <RenderIf condition={sectionType != ActionType}>
           {options
           ->Array.mapWithIndex((option, i) => {
             <RadioSection
@@ -114,7 +114,7 @@ module FormField = {
             />
           })
           ->React.array}
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </div>
   }
@@ -228,7 +228,7 @@ module CheckBoxRenderer = {
       </div>
       {frmConfigInfo.payment_methods
       ->Array.mapWithIndex((paymentMethodInfo, index) => {
-        <UIUtils.RenderIf condition={isOpen} key={index->Int.toString}>
+        <RenderIf condition={isOpen} key={index->Int.toString}>
           {paymentMethodInfo.payment_method_types
           ->Array.mapWithIndex((paymentMethodTypeInfo, i) => {
             <Accordion
@@ -272,7 +272,7 @@ module CheckBoxRenderer = {
             />
           })
           ->React.array}
-        </UIUtils.RenderIf>
+        </RenderIf>
       })
       ->React.array}
     </div>
diff --git a/src/screens/FraudAndRisk/FRMSelect.res b/src/screens/FraudAndRisk/FRMSelect.res
index 204640cef..a41e56349 100644
--- a/src/screens/FraudAndRisk/FRMSelect.res
+++ b/src/screens/FraudAndRisk/FRMSelect.res
@@ -68,17 +68,16 @@ module NewProcessorCards = {
 
     let headerText = "Connect a new fraud & risk management player"
 
-    <UIUtils.RenderIf condition={unConfiguredFRMCount > 0}>
+    <RenderIf condition={unConfiguredFRMCount > 0}>
       <div className="flex flex-col gap-4">
         {frmAvailableForIntegration->descriptedFRMs(headerText)}
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
 @react.component
 let make = () => {
-  open UIUtils
   let getURL = APIUtils.useGetURL()
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
   let fetchDetails = APIUtils.useGetMethod()
diff --git a/src/screens/FraudAndRisk/FRMSummary.res b/src/screens/FraudAndRisk/FRMSummary.res
index 3681f240f..e7f270d30 100644
--- a/src/screens/FraudAndRisk/FRMSummary.res
+++ b/src/screens/FraudAndRisk/FRMSummary.res
@@ -127,9 +127,9 @@ let make = (~initialValues, ~currentStep, ~setCurrentStep) => {
         <h4 className="text-lg font-semibold"> {"Profile id"->React.string} </h4>
         <div> {frmInfo.profile_id->React.string} </div>
       </div>
-      <UIUtils.RenderIf condition={frmConfigs->Array.length > 0}>
+      <RenderIf condition={frmConfigs->Array.length > 0}>
         <ConfigInfo frmConfigs />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   </div>
 }
diff --git a/src/screens/GenerateReports/GenerateReport.res b/src/screens/GenerateReports/GenerateReport.res
index cae179513..193c6d6d8 100644
--- a/src/screens/GenerateReports/GenerateReport.res
+++ b/src/screens/GenerateReports/GenerateReport.res
@@ -21,8 +21,8 @@ let make = (~entityName) => {
       access={accessForGenerateReports}
       toolTipPosition={Left}
     />
-    <UIUtils.RenderIf condition={reportModal}>
+    <RenderIf condition={reportModal}>
       <DownloadReportModal reportModal setReportModal entityName />
-    </UIUtils.RenderIf>
+    </RenderIf>
   </>
 }
diff --git a/src/screens/HSwitchUtils.res b/src/screens/HSwitchUtils.res
index bd5c9fe4e..daa281d38 100644
--- a/src/screens/HSwitchUtils.res
+++ b/src/screens/HSwitchUtils.res
@@ -9,9 +9,9 @@ module TextFieldRow = {
       <div
         className={`mt-2 ${labelWidth} text-gray-900/50 dark:text-jp-gray-text_darktheme dark:text-opacity-50 font-semibold text-fs-14`}>
         {label->React.string}
-        <UIUtils.RenderIf condition={isRequired}>
+        <RenderIf condition={isRequired}>
           <span className="text-red-500"> {"*"->React.string} </span>
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
       children
     </div>
@@ -37,7 +37,7 @@ module BackgroundImageWrapper = {
     ~isBackgroundFullScreen=true,
   ) => {
     let heightWidthCss = isBackgroundFullScreen ? "h-screen w-screen" : "h-full w-full"
-    <UIUtils.RenderIf condition={children->Option.isSome}>
+    <RenderIf condition={children->Option.isSome}>
       <div
         className={`bg-no-repeat bg-center bg-hyperswitch_dark_bg bg-fixed ${customPageCss} ${heightWidthCss}`}
         style={ReactDOMStyle.make(
@@ -47,7 +47,7 @@ module BackgroundImageWrapper = {
         )}>
         {children->Option.getOr(React.null)}
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
diff --git a/src/screens/Helpers/DefaultLandingPage.res b/src/screens/Helpers/DefaultLandingPage.res
index c8d88ed6e..346b8620f 100644
--- a/src/screens/Helpers/DefaultLandingPage.res
+++ b/src/screens/Helpers/DefaultLandingPage.res
@@ -12,7 +12,6 @@ let make = (
   ~overriddingStylesSubtitle="",
   ~showLogoutButton=false,
 ) => {
-  open UIUtils
   let handleLogout = APIUtils.useHandleLogout()
   let appliedWidth = width === "98%" ? "98%" : width
   let appliedHeight = height === "100%" ? "100%" : height
@@ -39,14 +38,14 @@ let make = (
         <Button
           text={buttonText} buttonSize={Large} onClick={_ => onClickHandler()} buttonType={Primary}
         />
-        <UIUtils.RenderIf condition={showLogoutButton}>
+        <RenderIf condition={showLogoutButton}>
           <Button
             text={"Logout"}
             buttonSize={Large}
             onClick={_ => onLogoutHandle()}
             buttonType={Secondary}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </RenderIf>
   </div>
diff --git a/src/screens/Helpers/HSSelfServeSidebar.res b/src/screens/Helpers/HSSelfServeSidebar.res
index 2c58cf000..58d3663eb 100644
--- a/src/screens/Helpers/HSSelfServeSidebar.res
+++ b/src/screens/Helpers/HSSelfServeSidebar.res
@@ -89,8 +89,7 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => {
           </div>
           <Icon name=icon size=20 />
         </div>
-        <UIUtils.RenderIf
-          condition={sidebarOption.status === ONGOING && subOptionsArray->Array.length > 0}>
+        <RenderIf condition={sidebarOption.status === ONGOING && subOptionsArray->Array.length > 0}>
           <div className="my-4">
             {subOptionsArray
             ->Array.mapWithIndex((subOption, i) => {
@@ -109,7 +108,7 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => {
             })
             ->React.array}
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     })
     ->React.array}
diff --git a/src/screens/Helpers/HelperComponents.res b/src/screens/Helpers/HelperComponents.res
index 175f6d31f..456ceb6d7 100644
--- a/src/screens/Helpers/HelperComponents.res
+++ b/src/screens/Helpers/HelperComponents.res
@@ -90,7 +90,7 @@ module BluredTableComponent = {
         <p className="text-center text-grey-700 font-medium opacity-50">
           {infoText->React.string}
         </p>
-        <UIUtils.RenderIf condition={showRedirectCTA}>
+        <RenderIf condition={showRedirectCTA}>
           <Button
             text=buttonText
             buttonType={Primary}
@@ -100,9 +100,9 @@ module BluredTableComponent = {
                 : setPaymentModal(_ => true)
             }}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
-      <UIUtils.RenderIf condition={paymentModal}> {onClickElement} </UIUtils.RenderIf>
+      <RenderIf condition={paymentModal}> {onClickElement} </RenderIf>
     </div>
   }
 }
diff --git a/src/screens/Helpers/PageLoaderWrapper.res b/src/screens/Helpers/PageLoaderWrapper.res
index 62b21f67c..de08f78b7 100644
--- a/src/screens/Helpers/PageLoaderWrapper.res
+++ b/src/screens/Helpers/PageLoaderWrapper.res
@@ -7,7 +7,7 @@ module ScreenLoader = {
     let {branding} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
 
     <div className={`${sectionHeight} w-scrren flex flex-col justify-center items-center`}>
-      <UIUtils.RenderIf condition={!branding}>
+      <RenderIf condition={!branding}>
         <div className="w-20 h-16">
           <ReactSuspenseWrapper>
             <div className="scale-400 pt-px">
@@ -15,10 +15,10 @@ module ScreenLoader = {
             </div>
           </ReactSuspenseWrapper>
         </div>
-      </UIUtils.RenderIf>
-      <UIUtils.RenderIf condition={branding}>
+      </RenderIf>
+      <RenderIf condition={branding}>
         <Loader />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   }
 }
diff --git a/src/screens/Helpers/PageUtils.res b/src/screens/Helpers/PageUtils.res
index ff1df7fda..7377bd020 100644
--- a/src/screens/Helpers/PageUtils.res
+++ b/src/screens/Helpers/PageUtils.res
@@ -11,7 +11,6 @@ module PageHeading = {
     ~customTagStyle="bg-extra-light-grey border-light-grey",
     ~leftIcon=None,
   ) => {
-    open UIUtils
     let headerTextStyle = HSwitchUtils.getTextClass((H1, Optional))
     <div className={`${customHeadingStyle}`}>
       {switch leftIcon {
diff --git a/src/screens/Home/CommonConnectorFlow/SetupConnector.res b/src/screens/Home/CommonConnectorFlow/SetupConnector.res
index bf6f5679a..96c0e0637 100644
--- a/src/screens/Home/CommonConnectorFlow/SetupConnector.res
+++ b/src/screens/Home/CommonConnectorFlow/SetupConnector.res
@@ -128,14 +128,14 @@ module ConfigureProcessor = {
       )
     }
     let backButton =
-      <UIUtils.RenderIf condition={isBackButtonVisible}>
+      <RenderIf condition={isBackButtonVisible}>
         <Button
           buttonType={PrimaryOutline}
           text="Back"
           onClick={_ => setConnectorConfigureState(_ => Select_configuration_type)}
           buttonSize=Small
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
 
     <Form initialValues onSubmit validate={validateMandatoryField}>
       <QuickStartUIUtils.BaseComponent
diff --git a/src/screens/Home/Home.res b/src/screens/Home/Home.res
index c6f8a5f4f..d3681751a 100644
--- a/src/screens/Home/Home.res
+++ b/src/screens/Home/Home.res
@@ -14,9 +14,9 @@ let make = () => {
 
   <div className="w-full gap-8 flex flex-col">
     <div className="flex flex-col gap-4">
-      <UIUtils.RenderIf condition={featureFlagDetails.totp && recovery_codes_left < 3}>
+      <RenderIf condition={featureFlagDetails.totp && recovery_codes_left < 3}>
         <HomeUtils.LowRecoveryCodeBanner recovery_codes_left />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <AcceptInviteHome />
     </div>
     <PageHeading
diff --git a/src/screens/Home/HomeUtils.res b/src/screens/Home/HomeUtils.res
index a7e398d17..93d621f48 100644
--- a/src/screens/Home/HomeUtils.res
+++ b/src/screens/Home/HomeUtils.res
@@ -245,9 +245,9 @@ module ControlCenter = {
           </CardFooter>
         </CardLayout>
       </div>
-      <UIUtils.RenderIf condition={!isLiveMode}>
+      <RenderIf condition={!isLiveMode}>
         <CheckoutCard />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   }
 }
diff --git a/src/screens/Home/HomeV2.res b/src/screens/Home/HomeV2.res
index 9db996fdb..0142c8670 100644
--- a/src/screens/Home/HomeV2.res
+++ b/src/screens/Home/HomeV2.res
@@ -44,21 +44,21 @@ module HomePageHorizontalStepper = {
           <div className="flex items-center gap-2">
             <span
               className={`h-6 w-7 flex items-center justify-center rounded-md font-semibold ${index->getStepperStyle} ${getTextStyle}`}>
-              <UIUtils.RenderIf condition={index < step}>
+              <RenderIf condition={index < step}>
                 <Icon name="check" size=12 className="text-blue-500" />
-              </UIUtils.RenderIf>
-              <UIUtils.RenderIf condition={index >= step}>
+              </RenderIf>
+              <RenderIf condition={index >= step}>
                 {(index + 1)->Int.toString->React.string}
-              </UIUtils.RenderIf>
+              </RenderIf>
             </span>
-            <UIUtils.RenderIf condition={index <= stepperItemsArray->Array.length - 1}>
+            <RenderIf condition={index <= stepperItemsArray->Array.length - 1}>
               <div className="relative w-full">
                 <div className={`absolute h-1 rounded-full z-1 ${index->getProgressBarStyle}`} />
-                <UIUtils.RenderIf condition={index != stepperItemsArray->Array.length - 1}>
+                <RenderIf condition={index != stepperItemsArray->Array.length - 1}>
                   <div className="w-full h-1 rounded-full bg-grey-700 bg-opacity-10" />
-                </UIUtils.RenderIf>
+                </RenderIf>
               </div>
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
           <p> {value->React.string} </p>
         </div>
@@ -211,11 +211,11 @@ module QuickStart = {
           }}
         />
       </div>
-      <UIUtils.RenderIf condition={!isMobileView}>
+      <RenderIf condition={!isMobileView}>
         <div className="h-30 md:w-[43rem] flex justify-end">
           <img src="/assets/QuickStartImage.svg" />
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   }
 }
@@ -257,11 +257,11 @@ module RecipesAndPlugins = {
               size=12
               className="group-hover:scale-125 transition duration-200 ease-in-out"
             />
-            <UIUtils.RenderIf condition={isStripePlusPayPalCompleted}>
+            <RenderIf condition={isStripePlusPayPalCompleted}>
               <div className="flex ">
                 <Icon name="success-tag" size=22 className="!w-32" />
               </div>
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
           <div className="flex gap-2 h-full">
             <p className=paragraphTextVariant>
@@ -285,11 +285,11 @@ module RecipesAndPlugins = {
               size=12
               className="group-hover:scale-125 transition duration-200 ease-in-out"
             />
-            <UIUtils.RenderIf condition={isWooCommercePalCompleted}>
+            <RenderIf condition={isWooCommercePalCompleted}>
               <div className="flex ">
                 <Icon name="success-tag" size=22 className="!w-32" />
               </div>
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
           <div className="flex gap-2 h-full">
             <p className=paragraphTextVariant>
@@ -417,9 +417,9 @@ let make = () => {
 
   <div className="w-full flex flex-col gap-6">
     <div className="flex flex-col gap-4">
-      <UIUtils.RenderIf condition={featureFlagDetails.totp && recovery_codes_left < 3}>
+      <RenderIf condition={featureFlagDetails.totp && recovery_codes_left < 3}>
         <LowRecoveryCodeBanner recovery_codes_left />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <AcceptInviteHome />
     </div>
     <div className="w-full flex flex-col gap-7">
@@ -430,9 +430,9 @@ let make = () => {
             let showRecipesAndPlugins =
               [typedEnumValue.integrationCompleted, prodIntent]->Array.includes(false)
 
-            <UIUtils.RenderIf condition={!showRecipesAndPlugins}>
+            <RenderIf condition={!showRecipesAndPlugins}>
               <RecipesAndPlugins />
-            </UIUtils.RenderIf>
+            </RenderIf>
           }
         | None => React.null
         }}
diff --git a/src/screens/Home/QuickStart/GoLive.res b/src/screens/Home/QuickStart/GoLive.res
index afaf4759a..ad99ad756 100644
--- a/src/screens/Home/QuickStart/GoLive.res
+++ b/src/screens/Home/QuickStart/GoLive.res
@@ -89,7 +89,7 @@ let make = (~goLive) => {
 
   let landingButtonGroup = {
     <div className="flex flex-col gap-4 w-full">
-      <UIUtils.RenderIf condition={!(isProdIntentCompleted->Option.getOr(false))}>
+      <RenderIf condition={!(isProdIntentCompleted->Option.getOr(false))}>
         <Button
           text="Get Production Access"
           buttonType={Primary}
@@ -98,7 +98,7 @@ let make = (~goLive) => {
             setQuickStartPageState(_ => GoLive(GO_LIVE))
           }}
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <Button
         text="Go to Home"
         buttonType={Secondary}
diff --git a/src/screens/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res b/src/screens/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res
index e4dc9d393..f6aeed45f 100644
--- a/src/screens/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res
+++ b/src/screens/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res
@@ -100,7 +100,7 @@ let make = (
             setPlatform
           />
           <div className="bg-white border rounded">
-            <UIUtils.RenderIf
+            <RenderIf
               condition={backEndLang->UserOnboardingUtils.getInstallDependencies->isNonEmptyString}>
               <UserOnboardingUIUtils.ShowCodeEditor
                 value={frontEndLang->UserOnboardingUtils.getMigrateFromStripeDX(backEndLang)}
@@ -108,7 +108,7 @@ let make = (
                 headerText="Installation"
                 langauge=backEndLang
               />
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
           <div className="bg-white border rounded">
             <UserOnboardingUIUtils.ShowCodeEditor
@@ -140,7 +140,7 @@ let make = (
             platform
             setPlatform
           />
-          <UIUtils.RenderIf
+          <RenderIf
             condition={frontEndLang->UserOnboardingUtils.getInstallDependencies->isNonEmptyString}>
             <div className="bg-white border rounded">
               <UserOnboardingUIUtils.ShowCodeEditor
@@ -150,8 +150,8 @@ let make = (
                 langauge=frontEndLang
               />
             </div>
-          </UIUtils.RenderIf>
-          <UIUtils.RenderIf
+          </RenderIf>
+          <RenderIf
             condition={frontEndLang->UserOnboardingUtils.getInstallDependencies->isNonEmptyString}>
             <div className="bg-white border rounded">
               <UserOnboardingUIUtils.ShowCodeEditor
@@ -161,8 +161,8 @@ let make = (
                 langauge=frontEndLang
               />
             </div>
-          </UIUtils.RenderIf>
-          <UIUtils.RenderIf condition={frontEndLang->UserOnboardingUtils.getLoad->isNonEmptyString}>
+          </RenderIf>
+          <RenderIf condition={frontEndLang->UserOnboardingUtils.getLoad->isNonEmptyString}>
             <div className="bg-white border rounded">
               <UserOnboardingUIUtils.ShowCodeEditor
                 value={frontEndLang->UserOnboardingUtils.getLoad}
@@ -171,9 +171,8 @@ let make = (
                 langauge=frontEndLang
               />
             </div>
-          </UIUtils.RenderIf>
-          <UIUtils.RenderIf
-            condition={frontEndLang->UserOnboardingUtils.getInitialize->isNonEmptyString}>
+          </RenderIf>
+          <RenderIf condition={frontEndLang->UserOnboardingUtils.getInitialize->isNonEmptyString}>
             <div className="bg-white border rounded">
               <UserOnboardingUIUtils.ShowCodeEditor
                 value={frontEndLang->UserOnboardingUtils.getInitialize}
@@ -182,8 +181,8 @@ let make = (
                 langauge=frontEndLang
               />
             </div>
-          </UIUtils.RenderIf>
-          <UIUtils.RenderIf
+          </RenderIf>
+          <RenderIf
             condition={frontEndLang
             ->UserOnboardingUtils.getCheckoutFormForDisplayCheckoutPage
             ->isNonEmptyString}>
@@ -195,7 +194,7 @@ let make = (
                 langauge=frontEndLang
               />
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
       </div>
     | DisplayPaymentConfirmation =>
@@ -217,8 +216,7 @@ let make = (
             platform
             setPlatform
           />
-          <UIUtils.RenderIf
-            condition={frontEndLang->UserOnboardingUtils.getHandleEvents->isNonEmptyString}>
+          <RenderIf condition={frontEndLang->UserOnboardingUtils.getHandleEvents->isNonEmptyString}>
             <div className="bg-white border rounded">
               <UserOnboardingUIUtils.ShowCodeEditor
                 value={frontEndLang->UserOnboardingUtils.getHandleEvents}
@@ -228,8 +226,8 @@ let make = (
                 langauge=frontEndLang
               />
             </div>
-          </UIUtils.RenderIf>
-          <UIUtils.RenderIf
+          </RenderIf>
+          <RenderIf
             condition={frontEndLang->UserOnboardingUtils.getDisplayConformation->isNonEmptyString}>
             <div className="bg-white border rounded">
               <UserOnboardingUIUtils.ShowCodeEditor
@@ -240,7 +238,7 @@ let make = (
                 langauge=frontEndLang
               />
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
       </div>
     }}
diff --git a/src/screens/Home/QuickStart/QuickStartUIUtils.res b/src/screens/Home/QuickStart/QuickStartUIUtils.res
index 72b2fb158..e96b54aff 100644
--- a/src/screens/Home/QuickStart/QuickStartUIUtils.res
+++ b/src/screens/Home/QuickStart/QuickStartUIUtils.res
@@ -16,21 +16,21 @@ module BaseComponent = {
       className="w-standardPageWidth h-45-rem bg-white rounded-md flex flex-col gap-6 shadow-boxShadowMultiple overflow-scroll ">
       <div className="flex justify-between items-center px-10 pt-6">
         <div className="flex gap-2 items-center">
-          <UIUtils.RenderIf
+          <RenderIf
             condition={customIcon->Option.isNone && headerLeftIcon->LogicUtils.isNonEmptyString}>
             <Icon name=headerLeftIcon size=25 />
-          </UIUtils.RenderIf>
-          <UIUtils.RenderIf condition={customIcon->Option.isSome}>
+          </RenderIf>
+          <RenderIf condition={customIcon->Option.isSome}>
             {customIcon->Option.getOr(React.null)}
-          </UIUtils.RenderIf>
+          </RenderIf>
           <p className=headerStyle> {headerText->React.string} </p>
         </div>
-        <UIUtils.RenderIf condition={showRightButtons}>
+        <RenderIf condition={showRightButtons}>
           <div className="flex gap-4 items-center">
             {backButton}
             {nextButton}
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
       <div className="h-px w-full border" />
       <div className={`h-full px-10 pb-6 overflow-y-scroll ${customCss} overflow-x-hidden`}>
@@ -89,13 +89,13 @@ module VerticalChoiceTile = {
             className={`p-6 flex flex-col gap-8 rounded-md cursor-pointer ${items.variantType->getBlockColor} rounded-md justify-between`}
             onClick={_ => setChoiceState(_ => items.variantType)}>
             <div className="flex justify-between items-center">
-              <UIUtils.RenderIf condition={items.leftIcon->Option.isSome}>
+              <RenderIf condition={items.leftIcon->Option.isSome}>
                 <Icon
                   name={items.leftIcon->Option.getOr("hyperswitch-short")}
                   size=40
                   className="cursor-pointer"
                 />
-              </UIUtils.RenderIf>
+              </RenderIf>
               <Icon
                 name={choiceState === items.variantType ? "selected" : "nonselected"}
                 size=20
@@ -106,7 +106,7 @@ module VerticalChoiceTile = {
               <p className=headerTextStyle> {items.displayText->React.string} </p>
               <p className=descriptionStyle> {items.description->React.string} </p>
             </div>
-            <UIUtils.RenderIf condition={items.footerTags->Option.isSome}>
+            <RenderIf condition={items.footerTags->Option.isSome}>
               <div className="flex gap-2 mt-6">
                 {items.footerTags
                 ->Option.getOr([])
@@ -118,7 +118,7 @@ module VerticalChoiceTile = {
                 )
                 ->React.array}
               </div>
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
         </AddDataAttributes>
       })
@@ -166,10 +166,9 @@ module HorizontalChoiceTile = {
                 className={`cursor-pointer !${textColor.primaryNormal}`}
               />
             </div>
-            <UIUtils.RenderIf
-              condition={items.imageLink->Option.getOr("")->LogicUtils.isNonEmptyString}>
+            <RenderIf condition={items.imageLink->Option.getOr("")->LogicUtils.isNonEmptyString}>
               <img alt="" src={items.imageLink->Option.getOr("")} />
-            </UIUtils.RenderIf>
+            </RenderIf>
             <div className="flex gap-2 items-center ">
               <p className=descriptionStyle> {items.description->React.string} </p>
             </div>
@@ -272,7 +271,7 @@ module SelectConnectorGrid = {
     }
 
     <div className="flex flex-col gap-12">
-      <UIUtils.RenderIf condition={popularConnectorList->Array.length > 0}>
+      <RenderIf condition={popularConnectorList->Array.length > 0}>
         <div className="flex flex-col gap-4">
           <p className=headerClass> {"Popular Processors"->React.string} </p>
           <div className="grid grid-cols-1 gap-6 md:grid-cols-5 ">
@@ -303,7 +302,7 @@ module SelectConnectorGrid = {
             ->React.array}
           </div>
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
       <div className="flex flex-col gap-4">
         <p className=headerClass> {"More Processors"->React.string} </p>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8">
diff --git a/src/screens/Order/Metadata.res b/src/screens/Order/Metadata.res
index 461f26712..f69402006 100644
--- a/src/screens/Order/Metadata.res
+++ b/src/screens/Order/Metadata.res
@@ -1,6 +1,5 @@
 @react.component
 let make = (~displayValue, ~endValue=17) => {
-  open UIUtils
   let (isTextVisible, setIsTextVisible) = React.useState(_ => false)
 
   let handleClick = ev => {
diff --git a/src/screens/Order/OrderRefundForm.res b/src/screens/Order/OrderRefundForm.res
index 27e38e754..4f3307ca4 100644
--- a/src/screens/Order/OrderRefundForm.res
+++ b/src/screens/Order/OrderRefundForm.res
@@ -184,11 +184,11 @@ let make = (
             <FormRenderer.DesktopRow>
               <FormRenderer.FieldRenderer field=amountField labelClass="text-fs-11" />
             </FormRenderer.DesktopRow>
-            <UIUtils.RenderIf condition={showRefundReason}>
+            <RenderIf condition={showRefundReason}>
               <FormRenderer.DesktopRow>
                 <FormRenderer.FieldRenderer field=reasonField labelClass="text-fs-11" />
               </FormRenderer.DesktopRow>
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
         </div>
         <div className="flex justify-end gap-4 pr-5 pb-2 mb-3 mt-14">
diff --git a/src/screens/Order/OrderUIUtils.res b/src/screens/Order/OrderUIUtils.res
index 73ff4a07f..3bcfa31e6 100644
--- a/src/screens/Order/OrderUIUtils.res
+++ b/src/screens/Order/OrderUIUtils.res
@@ -119,7 +119,7 @@ module GenerateSampleDataButton = {
       openPopUpModal()
     }
 
-    <UIUtils.RenderIf condition={sampleData && !previewOnly}>
+    <RenderIf condition={sampleData && !previewOnly}>
       <div className="flex items-center">
         <ACLButton
           access={userPermissionJson.operationsManage}
@@ -138,7 +138,7 @@ module GenerateSampleDataButton = {
           <Icon name="delete" size=20 />
         </ACLDiv>
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
diff --git a/src/screens/Order/Orders.res b/src/screens/Order/Orders.res
index 572add4e3..69e0d8e23 100644
--- a/src/screens/Order/Orders.res
+++ b/src/screens/Order/Orders.res
@@ -110,13 +110,13 @@ let make = (~previewOnly=false) => {
         title="Payment Operations" subTitle="View and manage all payments" customTitleStyle
       />
       <div className="flex">
-        <UIUtils.RenderIf condition={!previewOnly}>
+        <RenderIf condition={!previewOnly}>
           <div className="flex-1"> {filtersUI} </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div className="flex justify-end gap-3">
-          <UIUtils.RenderIf condition={generateReport && orderData->Array.length > 0}>
+          <RenderIf condition={generateReport && orderData->Array.length > 0}>
             <GenerateReport entityName={PAYMENT_REPORT} />
-          </UIUtils.RenderIf>
+          </RenderIf>
           <GenerateSampleDataButton previewOnly getOrdersList={fetchOrders} />
           <PortalCapture key={`OrdersCustomizeColumn`} name={`OrdersCustomizeColumn`} />
         </div>
diff --git a/src/screens/Order/ShowOrder.res b/src/screens/Order/ShowOrder.res
index 8e95f84a5..8c0f33c97 100644
--- a/src/screens/Order/ShowOrder.res
+++ b/src/screens/Order/ShowOrder.res
@@ -36,7 +36,7 @@ module ShowOrderDetails = {
         </div>
       | _ => React.null
       }}
-      <UIUtils.RenderIf condition=isButtonEnabled>
+      <RenderIf condition=isButtonEnabled>
         <div className="flex items-center flex-wrap gap-3 m-3">
           <div className="flex items-start">
             <div className="md:text-5xl font-bold">
@@ -64,7 +64,7 @@ module ShowOrderDetails = {
               : Disabled}
           />
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
       <FormRenderer.DesktopRow>
         <div
           className={`flex flex-wrap ${justifyClassName} dark:bg-jp-gray-lightgray_background dark:border-jp-gray-no_data_border`}>
@@ -507,7 +507,7 @@ module FraudRiskBannerDetails = {
         })
         ->React.array}
       </div>
-      <UIUtils.RenderIf
+      <RenderIf
         condition={order.merchant_decision->String.length === 0 &&
         order.frm_message.frm_status === "fraud" &&
         order.status->HSwitchOrderUtils.statusVariantMapper === Succeeded}>
@@ -527,7 +527,7 @@ module FraudRiskBannerDetails = {
             onClick={_ => openPopUp(~decision=#APPROVE)}
           />
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   }
 }
@@ -679,7 +679,7 @@ let make = (~id) => {
             cursorStyle="cursor-pointer"
           />
         </div>
-        <UIUtils.RenderIf condition={showSyncButton()}>
+        <RenderIf condition={showSyncButton()}>
           <ACLButton
             access={userPermissionJson.operationsView}
             text="Sync"
@@ -692,14 +692,14 @@ let make = (~id) => {
             buttonType={Primary}
             onClick={_ => refreshStatus()->ignore}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div />
       </div>
       <OrderActions orderData={orderData} refetch={refreshStatus} showModal setShowModal />
     </div>
-    <UIUtils.RenderIf condition={orderData.frm_message.frm_status === "fraud"}>
+    <RenderIf condition={orderData.frm_message.frm_status === "fraud"}>
       <FraudRiskBanner frmMessage={orderData.frm_message} refElement=frmDetailsRef />
-    </UIUtils.RenderIf>
+    </RenderIf>
     <PageLoaderWrapper
       screenState
       customUI={<NoDataFound
@@ -712,7 +712,7 @@ let make = (~id) => {
           openRefundModal
           isNonRefundConnector={isNonRefundConnector(orderData.connector)}
         />
-        <UIUtils.RenderIf condition={featureFlagDetails.auditTrail}>
+        <RenderIf condition={featureFlagDetails.auditTrail}>
           <RenderAccordian
             initialExpandedArray=[0]
             accordion={[
@@ -727,11 +727,11 @@ let make = (~id) => {
               },
             ]}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div className="overflow-scroll">
           <Attempts order={orderData} />
         </div>
-        <UIUtils.RenderIf condition={isRefundDataAvailable}>
+        <RenderIf condition={isRefundDataAvailable}>
           <div className="overflow-scroll">
             <RenderAccordian
               initialExpandedArray={isRefundDataAvailable ? [0] : []}
@@ -746,8 +746,8 @@ let make = (~id) => {
               ]}
             />
           </div>
-        </UIUtils.RenderIf>
-        <UIUtils.RenderIf condition={isDisputeDataVisible}>
+        </RenderIf>
+        <RenderIf condition={isDisputeDataVisible}>
           <div className="overflow-scroll">
             <RenderAccordian
               initialExpandedArray={isDisputeDataVisible ? [0] : []}
@@ -762,7 +762,7 @@ let make = (~id) => {
               ]}
             />
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
         <RenderAccordian
           accordion={[
             {
@@ -883,7 +883,7 @@ let make = (~id) => {
             },
           ]}
         />
-        <UIUtils.RenderIf
+        <RenderIf
           condition={orderData.payment_method === "card" &&
             orderData.payment_method_data->Option.isSome}>
           <RenderAccordian
@@ -904,8 +904,8 @@ let make = (~id) => {
               },
             ]}
           />
-        </UIUtils.RenderIf>
-        <UIUtils.RenderIf condition={orderData.external_authentication_details->Option.isSome}>
+        </RenderIf>
+        <RenderIf condition={orderData.external_authentication_details->Option.isSome}>
           <RenderAccordian
             accordion={[
               {
@@ -919,8 +919,8 @@ let make = (~id) => {
               },
             ]}
           />
-        </UIUtils.RenderIf>
-        <UIUtils.RenderIf condition={!(orderData.metadata->LogicUtils.isEmptyDict)}>
+        </RenderIf>
+        <RenderIf condition={!(orderData.metadata->LogicUtils.isEmptyDict)}>
           <RenderAccordian
             accordion={[
               {
@@ -937,7 +937,7 @@ let make = (~id) => {
               },
             ]}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div className="overflow-scroll">
           <RenderAccordian
             accordion={[
diff --git a/src/screens/PayoutRouting/PayoutRoutingStack.res b/src/screens/PayoutRouting/PayoutRoutingStack.res
index 779320f98..209c47751 100644
--- a/src/screens/PayoutRouting/PayoutRoutingStack.res
+++ b/src/screens/PayoutRouting/PayoutRoutingStack.res
@@ -128,7 +128,7 @@ let make = (~remainingPath, ~previewOnly=false) => {
           types=[VOLUME_SPLIT, ADVANCED, DEFAULTFALLBACK] onRedirectBaseUrl="payoutrouting"
         />
       </div>
-      <UIUtils.RenderIf condition={!previewOnly}>
+      <RenderIf condition={!previewOnly}>
         <div className="flex flex-col gap-12">
           <EntityScaffold
             entityName="HyperSwitch Priority Logic"
@@ -148,7 +148,7 @@ let make = (~remainingPath, ~previewOnly=false) => {
               />}
           />
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   </PageLoaderWrapper>
 }
diff --git a/src/screens/Payouts/ShowPayout.res b/src/screens/Payouts/ShowPayout.res
index 71c3a20e7..f41b16180 100644
--- a/src/screens/Payouts/ShowPayout.res
+++ b/src/screens/Payouts/ShowPayout.res
@@ -109,7 +109,7 @@ module PayoutInfo = {
             className={`flex flex-wrap ${justifyClassName} dark:bg-jp-gray-lightgray_background dark:border-jp-gray-no_data_border`}>
             {detailsFields
             ->Array.mapWithIndex((colType, i) => {
-              <UIUtils.RenderIf
+              <RenderIf
                 condition={!(excludeColKeys->Array.includes(colType))} key={Int.toString(i)}>
                 <div className={`flex ${widthClass} items-center`}>
                   <OrderUtils.DisplayKeyValueParams
@@ -121,14 +121,14 @@ module PayoutInfo = {
                     textColor="!font-normal !text-jp-gray-700"
                   />
                 </div>
-              </UIUtils.RenderIf>
+              </RenderIf>
             })
             ->React.array}
           </div>
         </FormRenderer.DesktopRow>
-        <UIUtils.RenderIf condition={children->Option.isSome}>
+        <RenderIf condition={children->Option.isSome}>
           {children->Option.getOr(React.null)}
-        </UIUtils.RenderIf>
+        </RenderIf>
       </OrderUtils.Section>
     }
   }
diff --git a/src/screens/Processors/DummyProcessorModal.res b/src/screens/Processors/DummyProcessorModal.res
index 4b02c6787..44e3e52c4 100644
--- a/src/screens/Processors/DummyProcessorModal.res
+++ b/src/screens/Processors/DummyProcessorModal.res
@@ -11,7 +11,7 @@ let make = (
   let featureFlagDetails = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
   let showTestProcessor = featureFlagDetails.testProcessors
 
-  <UIUtils.RenderIf condition={processorModal}>
+  <RenderIf condition={processorModal}>
     <Modal
       modalHeading="Connect a Dummy Processor"
       showModal=processorModal
@@ -27,5 +27,5 @@ let make = (
         connectorType=ConnectorTypes.Processor
       />
     </Modal>
-  </UIUtils.RenderIf>
+  </RenderIf>
 }
diff --git a/src/screens/Processors/ProcessorCards.res b/src/screens/Processors/ProcessorCards.res
index 70b0a5d78..834856fca 100644
--- a/src/screens/Processors/ProcessorCards.res
+++ b/src/screens/Processors/ProcessorCards.res
@@ -1,10 +1,9 @@
-open UIUtils
 let p1MediumTextStyle = HSwitchUtils.getTextClass((P1, Medium))
 
 module RequestConnector = {
   @react.component
   let make = (~connectorList, ~setShowModal) => {
-    <UIUtils.RenderIf condition={connectorList->Array.length === 0}>
+    <RenderIf condition={connectorList->Array.length === 0}>
       <div
         className="flex flex-col gap-6 items-center justify-center w-full bg-white rounded-lg border p-8">
         <div className="mb-8 mt-4 max-w-full h-auto">
@@ -17,7 +16,7 @@ module RequestConnector = {
           text={"Request a processor"} buttonType=Primary onClick={_ => setShowModal(_ => true)}
         />
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
@@ -26,7 +25,7 @@ module CantFindProcessor = {
   let make = (~showRequestConnectorBtn, ~setShowModal) => {
     let userPermissionJson = Recoil.useRecoilValueFromAtom(HyperswitchAtom.userPermissionAtom)
 
-    <UIUtils.RenderIf condition={showRequestConnectorBtn}>
+    <RenderIf condition={showRequestConnectorBtn}>
       <ACLButton
         access={userPermissionJson.merchantDetailsManage}
         text="Request a Processor"
@@ -42,7 +41,7 @@ module CantFindProcessor = {
           />,
         )}
       />
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
diff --git a/src/screens/Refunds/Refund.res b/src/screens/Refunds/Refund.res
index 7dbbc8eb4..b455f9429 100644
--- a/src/screens/Refunds/Refund.res
+++ b/src/screens/Refunds/Refund.res
@@ -81,9 +81,9 @@ let make = () => {
             />}
           />
         </div>
-        <UIUtils.RenderIf condition={generateReport && refundData->Array.length > 0}>
+        <RenderIf condition={generateReport && refundData->Array.length > 0}>
           <GenerateReport entityName={REFUND_REPORT} />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <PortalCapture key={`RefundsCustomizeColumn`} name={`RefundsCustomizeColumn`} />
       </div>
       <PageLoaderWrapper screenState customUI>
diff --git a/src/screens/Refunds/ShowRefund.res b/src/screens/Refunds/ShowRefund.res
index c828e31b4..fdcb7fd61 100644
--- a/src/screens/Refunds/ShowRefund.res
+++ b/src/screens/Refunds/ShowRefund.res
@@ -154,7 +154,7 @@ let make = (~id) => {
             cursorStyle="cursor-pointer"
           />
         </div>
-        <UIUtils.RenderIf condition={showSyncButton()}>
+        <RenderIf condition={showSyncButton()}>
           <ACLButton
             access={userPermissionJson.operationsView}
             text="Sync"
@@ -167,7 +167,7 @@ let make = (~id) => {
             buttonType={Primary}
             onClick={_ => syncData()}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </div>
     <PageLoaderWrapper
@@ -179,7 +179,7 @@ let make = (~id) => {
       />}>
       <RefundInfo orderDict={refundData->LogicUtils.getDictFromJsonObject} />
       <div className="mt-5" />
-      <UIUtils.RenderIf condition={featureFlagDetails.auditTrail}>
+      <RenderIf condition={featureFlagDetails.auditTrail}>
         <OrderUIUtils.RenderAccordian
           initialExpandedArray=[0]
           accordion={[
@@ -194,8 +194,8 @@ let make = (~id) => {
             },
           ]}
         />
-      </UIUtils.RenderIf>
-      <UIUtils.RenderIf condition={userPermissionJson.operationsView !== NoAccess}>
+      </RenderIf>
+      <RenderIf condition={userPermissionJson.operationsView !== NoAccess}>
         <LoadedTable
           title="Payment"
           actualData=orderData
@@ -207,7 +207,7 @@ let make = (~id) => {
           setOffset
           currrentFetchCount=1
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </PageLoaderWrapper>
   </div>
 }
diff --git a/src/screens/Routing/ActiveRouting.res b/src/screens/Routing/ActiveRouting.res
index fb42a2c01..eb0a1fde6 100644
--- a/src/screens/Routing/ActiveRouting.res
+++ b/src/screens/Routing/ActiveRouting.res
@@ -101,7 +101,7 @@ module ActiveSection = {
             </p>
             <Icon name="primary-tag" size=25 className="w-20" />
           </div>
-          <UIUtils.RenderIf condition={profileId->isNonEmptyString}>
+          <RenderIf condition={profileId->isNonEmptyString}>
             <div className="flex gap-2">
               <HelperComponents.BusinessProfileComponent
                 profile_id={profileId} className="text-lightgray_background  opacity-50 text-sm"
@@ -110,7 +110,7 @@ module ActiveSection = {
                 {`: ${profileId}`->React.string}
               </p>
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
         <div className="text-lightgray_background font-medium text-base opacity-50 text-fs-14 ">
           {`${getContent(activeRoutingType).heading} : ${getContent(
diff --git a/src/screens/Routing/AdvancedRouting/RoutingPreviewer.res b/src/screens/Routing/AdvancedRouting/RoutingPreviewer.res
index f147ad546..93dadfeb6 100644
--- a/src/screens/Routing/AdvancedRouting/RoutingPreviewer.res
+++ b/src/screens/Routing/AdvancedRouting/RoutingPreviewer.res
@@ -4,7 +4,7 @@ module SimplePreview = {
   @react.component
   let make = (~gateways) => {
     let {globalUIConfig: {backgroundColor}} = React.useContext(ThemeProvider.themeContext)
-    <UIUtils.RenderIf condition={gateways->Array.length > 0}>
+    <RenderIf condition={gateways->Array.length > 0}>
       <div
         className="w-full mb-6 p-4 px-6 bg-white dark:bg-jp-gray-lightgray_background rounded-md border border-jp-gray-600 dark:border-jp-gray-850">
         <div
@@ -24,7 +24,7 @@ module SimplePreview = {
           ->React.array}
         </div>
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
diff --git a/src/screens/Routing/RoutingStack.res b/src/screens/Routing/RoutingStack.res
index 8268cdbf1..3f959de4e 100644
--- a/src/screens/Routing/RoutingStack.res
+++ b/src/screens/Routing/RoutingStack.res
@@ -127,7 +127,7 @@ let make = (~remainingPath, ~previewOnly=false) => {
           types=[VOLUME_SPLIT, ADVANCED, DEFAULTFALLBACK] onRedirectBaseUrl="routing"
         />
       </div>
-      <UIUtils.RenderIf condition={!previewOnly}>
+      <RenderIf condition={!previewOnly}>
         <div className="flex flex-col gap-12">
           <EntityScaffold
             entityName="HyperSwitch Priority Logic"
@@ -147,7 +147,7 @@ let make = (~remainingPath, ~previewOnly=false) => {
               />}
           />
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   </PageLoaderWrapper>
 }
diff --git a/src/screens/Routing/VolumeSplitRouting.res b/src/screens/Routing/VolumeSplitRouting.res
index 4f56ad313..e010ae86b 100644
--- a/src/screens/Routing/VolumeSplitRouting.res
+++ b/src/screens/Routing/VolumeSplitRouting.res
@@ -177,7 +177,7 @@ module VolumeRoutingView = {
                 }}
                 customButtonStyle="w-1/5 rounded-sm"
               />
-              <UIUtils.RenderIf condition={!isActive}>
+              <RenderIf condition={!isActive}>
                 <Button
                   text={"Activate Configuration"}
                   buttonType={Primary}
@@ -187,8 +187,8 @@ module VolumeRoutingView = {
                   customButtonStyle="w-1/5 rounded-sm"
                   buttonState={Normal}
                 />
-              </UIUtils.RenderIf>
-              <UIUtils.RenderIf condition={isActive}>
+              </RenderIf>
+              <RenderIf condition={isActive}>
                 <Button
                   text={"Deactivate Configuration"}
                   buttonType={Primary}
@@ -198,7 +198,7 @@ module VolumeRoutingView = {
                   customButtonStyle="w-1/5 rounded-sm"
                   buttonState=Normal
                 />
-              </UIUtils.RenderIf>
+              </RenderIf>
             </div>
           </div>
         | _ => React.null
@@ -354,7 +354,7 @@ let make = (
             />
           </div>
         </div>
-        <UIUtils.RenderIf condition={formState != CreateConfig}>
+        <RenderIf condition={formState != CreateConfig}>
           <VolumeRoutingView
             setScreenState
             pageState
@@ -370,7 +370,7 @@ let make = (
             connectorList
             baseUrlForRedirection
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <FormValuesSpy />
       </Form>
     </PageLoaderWrapper>
diff --git a/src/screens/RoutingRevamp/AddRuleGateway.res b/src/screens/RoutingRevamp/AddRuleGateway.res
index ae621a747..3e5c5bccc 100644
--- a/src/screens/RoutingRevamp/AddRuleGateway.res
+++ b/src/screens/RoutingRevamp/AddRuleGateway.res
@@ -154,9 +154,9 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded) => {
   }
   if isExpanded {
     <div className="flex flex-row ml-2">
-      <UIUtils.RenderIf condition={!isFirst}>
+      <RenderIf condition={!isFirst}>
         <div className="w-8 h-10 border-jp-gray-700 ml-10 border-dashed border-b border-l " />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <div className="flex flex-col gap-6 mt-6 mb-4 pt-0.5">
         <div className="flex flex-wrap gap-4">
           <div className="flex">
@@ -206,7 +206,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded) => {
                     removeItem(i)
                   }}
                 />
-                <UIUtils.RenderIf condition={isDistribute && selectedOptions->Array.length > 0}>
+                <RenderIf condition={isDistribute && selectedOptions->Array.length > 0}>
                   {<>
                     <input
                       className="w-10 text-right outline-none bg-white dark:bg-jp-gray-970 px-1 border border-jp-gray-300 dark:border-jp-gray-850 rounded-md"
@@ -223,13 +223,13 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded) => {
                     />
                     <div> {React.string("%")} </div>
                   </>}
-                </UIUtils.RenderIf>
+                </RenderIf>
               </div>
             </div>
           })
           ->React.array}
         </div>
-        <UIUtils.RenderIf condition={selectedOptions->Array.length > 0}>
+        <RenderIf condition={selectedOptions->Array.length > 0}>
           <div
             className="flex flex-col md:flex-row md:items-center gap-4 md:gap-3 lg:gap-4 lg:ml-6">
             <div className={`flex flex-row items-center gap-4 md:gap-1 lg:gap-2`}>
@@ -244,7 +244,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded) => {
               <div> {React.string("Distribute")} </div>
             </div>
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </div>
   } else {
diff --git a/src/screens/RoutingRevamp/AdvancedRouting.res b/src/screens/RoutingRevamp/AdvancedRouting.res
index bca12716c..37579558a 100644
--- a/src/screens/RoutingRevamp/AdvancedRouting.res
+++ b/src/screens/RoutingRevamp/AdvancedRouting.res
@@ -17,9 +17,9 @@ module Add3DSCondition = {
 
     if isExpanded {
       <div className="flex flex-row ml-2">
-        <UIUtils.RenderIf condition={!isFirst}>
+        <RenderIf condition={!isFirst}>
           <div className="w-8 h-10 border-jp-gray-700 ml-10 border-dashed border-b border-l " />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div className="flex flex-col gap-6 mt-6 mb-4 pt-0.5">
           <div className="flex flex-wrap gap-4 -mt-2">
             <div className=classStyle> {"Auth type"->React.string} </div>
@@ -83,9 +83,9 @@ module AddSurchargeCondition = {
     {
       if isExpanded {
         <div className="flex flex-row ml-2">
-          <UIUtils.RenderIf condition={!isFirst}>
+          <RenderIf condition={!isFirst}>
             <div className="w-8 h-10 border-jp-gray-700 ml-10 border-dashed border-b border-l " />
-          </UIUtils.RenderIf>
+          </RenderIf>
           <div className="flex flex-col gap-6 mt-6 mb-4 pt-0.5">
             <div className="flex flex-wrap gap-4">
               <div className=classStyle> {"Surcharge is"->React.string} </div>
@@ -246,7 +246,7 @@ module Wrapper = {
       <div
         className={`flex flex-row gap-3 md:gap-10 items-center justify-end
         ${isMobileView ? "" : "w-1/3 mr-6"}`}>
-        <UIUtils.RenderIf condition={notFirstRule}>
+        <RenderIf condition={notFirstRule}>
           <div
             onMouseEnter={_ => setDragBtnHover(_ => !isMobileView)}
             onMouseLeave={_ => setDragBtnHover(_ => false)}
@@ -254,11 +254,11 @@ module Wrapper = {
                 ? "py-1"
                 : ""} bg-gray-100 dark:bg-jp-gray-970 rounded-full border border-jp-gray-600 cursor-pointer`}>
             <Icon name="grip-vertical" className="text-jp-gray-700" size=14 />
-            <UIUtils.RenderIf condition={dragBtnHover}>
+            <RenderIf condition={dragBtnHover}>
               <div className="text-sm "> {React.string("Drag Rule")} </div>
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div
           onClick=onClickAdd
           onMouseEnter={_ => setAddBtnHover(_ => !isMobileView)}
@@ -267,9 +267,9 @@ module Wrapper = {
               ? "py-1"
               : ""} bg-gray-100 dark:bg-jp-gray-970 rounded-full border border-jp-gray-600 cursor-pointer`}>
           <Icon name="plus" className="text-jp-gray-700" size=12 />
-          <UIUtils.RenderIf condition={addBtnHover}>
+          <RenderIf condition={addBtnHover}>
             <div className="text-sm "> {React.string("Add New Rule")} </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
         {switch onClickCopy {
         | Some(onClick) =>
@@ -281,13 +281,13 @@ module Wrapper = {
                 ? "py-1"
                 : ""} bg-gray-100 dark:bg-jp-gray-970 rounded-full border border-jp-gray-600 cursor-pointer`}>
             <Icon name="copy" className="text-jp-gray-700" size=12 />
-            <UIUtils.RenderIf condition={copyBtnHover}>
+            <RenderIf condition={copyBtnHover}>
               <div className="text-sm "> {React.string("Copy Rule")} </div>
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
         | None => React.null
         }}
-        <UIUtils.RenderIf condition={notFirstRule}>
+        <RenderIf condition={notFirstRule}>
           <div
             onClick=onClickRemove
             onMouseEnter={_ => setDeleteBtnHover(_ => !isMobileView)}
@@ -296,18 +296,18 @@ module Wrapper = {
                 ? "py-1"
                 : ""} bg-gray-100 dark:bg-jp-gray-970 rounded-full border border-jp-gray-600 cursor-pointer`}>
             <Icon name="trash" className="text-jp-gray-700" size=12 />
-            <UIUtils.RenderIf condition={deleteBtnHover}>
+            <RenderIf condition={deleteBtnHover}>
               <div className="text-sm "> {React.string("Delete Rule")} </div>
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
 
     <div className="flex flex-col">
       <div className={`flex flex-row tems-center justify-between z-10 -mt-6 mx-2`}>
-        <UIUtils.RenderIf condition={!isMobileView}>
+        <RenderIf condition={!isMobileView}>
           <div className="hidden lg:flex w-1/3" />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div
           onClick={handleClickExpand}
           className={`cursor-pointer flex flex-row gap-2 items-center justify-between p-2 bg-blue-100 dark:bg-jp-gray-970 rounded-full border ${borderColor.primaryNormal} dark:${borderColor.primaryNormal}`}>
@@ -323,20 +323,20 @@ module Wrapper = {
             p-4 py-6 bg-gray-50 dark:bg-jp-gray-lightgray_background rounded-md border 
             ${border} 
             ${borderColor.primaryNormal}`}>
-        <UIUtils.RenderIf condition={!isFirst}>
+        <RenderIf condition={!isFirst}>
           <AdvancedRoutingUIUtils.MakeRuleField id isExpanded wasm isFrom3ds isFromSurcharge />
-        </UIUtils.RenderIf>
-        <UIUtils.RenderIf condition={!isFrom3ds && !isFromSurcharge}>
+        </RenderIf>
+        <RenderIf condition={!isFrom3ds && !isFromSurcharge}>
           <AddRuleGateway id gatewayOptions isExpanded isFirst />
-        </UIUtils.RenderIf>
-        <UIUtils.RenderIf condition={isFrom3ds}>
+        </RenderIf>
+        <RenderIf condition={isFrom3ds}>
           <Add3DSCondition isFirst id isExpanded threeDsType />
-        </UIUtils.RenderIf>
-        <UIUtils.RenderIf condition={isFromSurcharge}>
+        </RenderIf>
+        <RenderIf condition={isFromSurcharge}>
           <AddSurchargeCondition
             isFirst id isExpanded surchargeType surchargeTypeValue surchargePercentage
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </div>
   }
@@ -792,7 +792,7 @@ let make = (
                   profile
                   setProfile
                 />
-                <UIUtils.RenderIf condition={formState != CreateConfig}>
+                <RenderIf condition={formState != CreateConfig}>
                   <div className="mb-5">
                     <RuleBasedUI
                       gatewayOptions=connectorOptions
@@ -805,7 +805,7 @@ let make = (
                     {switch pageState {
                     | Preview =>
                       <div className="flex flex-col md:flex-row gap-4 my-5">
-                        <UIUtils.RenderIf condition={!isActive}>
+                        <RenderIf condition={!isActive}>
                           <Button
                             text={"Activate Configuration"}
                             buttonType={Primary}
@@ -815,8 +815,8 @@ let make = (
                             customButtonStyle="w-1/5 rounded-sm"
                             buttonState=Normal
                           />
-                        </UIUtils.RenderIf>
-                        <UIUtils.RenderIf condition={isActive}>
+                        </RenderIf>
+                        <RenderIf condition={isActive}>
                           <Button
                             text={"Deactivate Configuration"}
                             buttonType={Primary}
@@ -826,13 +826,13 @@ let make = (
                             customButtonStyle="w-1/5 rounded-sm"
                             buttonState=Normal
                           />
-                        </UIUtils.RenderIf>
+                        </RenderIf>
                       </div>
                     | Create => <RoutingUtils.ConfigureRuleButton setShowModal />
                     | _ => React.null
                     }}
                   </div>
-                </UIUtils.RenderIf>
+                </RenderIf>
                 <CustomModal.RoutingCustomModal
                   showModal
                   setShowModal
diff --git a/src/screens/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/RoutingRevamp/AdvancedRoutingUIUtils.res
index 2181bf11b..f8b3a655a 100644
--- a/src/screens/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -207,9 +207,9 @@ module MetadataInp = {
       value: valueField.value,
       checked: true,
     }
-    <UIUtils.RenderIf condition={keyType->variantTypeMapper === Metadata_value}>
+    <RenderIf condition={keyType->variantTypeMapper === Metadata_value}>
       <TextInput placeholder={"Enter Key"} input=textInput />
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
@@ -375,15 +375,15 @@ module RuleFieldBase = {
       }
     }, [])
 
-    <UIUtils.RenderIf condition={methodKeys->Array.length > 0}>
+    <RenderIf condition={methodKeys->Array.length > 0}>
       {if isExpanded {
         <div
           className={`flex flex-wrap items-center px-1 ${hover
               ? "rounded-md bg-white dark:bg-black shadow"
               : ""}`}>
-          <UIUtils.RenderIf condition={!isFirst}>
+          <RenderIf condition={!isFirst}>
             <LogicalOps id />
-          </UIUtils.RenderIf>
+          </RenderIf>
           <div className="-mt-5 p-1">
             <FieldWrapper label="">
               <FieldInp methodKeys prefix=id onChangeMethod />
@@ -398,7 +398,7 @@ module RuleFieldBase = {
           <div className="-mt-5">
             <FieldRenderer field={valueInput(id, variantValues, keyType)} />
           </div>
-          <UIUtils.RenderIf condition={!isFirst}>
+          <RenderIf condition={!isFirst}>
             <div
               onClick
               onMouseEnter={_ => setHover(_ => true)}
@@ -406,12 +406,12 @@ module RuleFieldBase = {
               className="flex items-center cursor-pointer rounded-full  border border-jp-gray-500 dark:border-jp-gray-960 bg-red-400 hover:shadow focus:outline-none p-2">
               <Icon size=10 className="text-gray-50 font-semibold" name="close" />
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
       } else {
         <MakeRuleFieldComponent.CompressedView isFirst id />
       }}
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
diff --git a/src/screens/RoutingRevamp/BasicDetailsForm.res b/src/screens/RoutingRevamp/BasicDetailsForm.res
index 4b891e470..2c1ad5335 100644
--- a/src/screens/RoutingRevamp/BasicDetailsForm.res
+++ b/src/screens/RoutingRevamp/BasicDetailsForm.res
@@ -144,7 +144,7 @@ let make = (
       <>
         <div className="flex">
           <div className="w-full md:w-1/2 lg:w-1/3">
-            <UIUtils.RenderIf condition={!isThreeDs}>
+            <RenderIf condition={!isThreeDs}>
               <BusinessProfileInp
                 setProfile={setProfile->Option.getOr(_ => ())}
                 profile={profile->Option.getOr(defaultBusinessProfile.profile_id)}
@@ -152,7 +152,7 @@ let make = (
                 label="Profile"
                 routingType
               />
-            </UIUtils.RenderIf>
+            </RenderIf>
             <FieldRenderer field=configurationNameInput />
             <FieldRenderer field=descriptionInput />
           </div>
diff --git a/src/screens/RoutingRevamp/Previewers/RulePreviewer.res b/src/screens/RoutingRevamp/Previewers/RulePreviewer.res
index 2f2fe2866..ea1bc3c6f 100644
--- a/src/screens/RoutingRevamp/Previewers/RulePreviewer.res
+++ b/src/screens/RoutingRevamp/Previewers/RulePreviewer.res
@@ -16,11 +16,11 @@ module GatewayView = {
           key={Int.toString(index)}
           className={`my-2 h-6 md:h-8 flex items-center rounded-md border border-jp-gray-500 dark:border-jp-gray-960 font-medium ${textColor.primaryNormal} hover:${textColor.primaryNormal} bg-gradient-to-b from-jp-gray-250 to-jp-gray-200 dark:from-jp-gray-950 dark:to-jp-gray-950 focus:outline-none px-2 gap-1`}>
           {connectorStr->React.string}
-          <UIUtils.RenderIf condition={percent->Option.isSome}>
+          <RenderIf condition={percent->Option.isSome}>
             <span className="text-jp-gray-700 dark:text-jp-gray-600 ml-1">
               {(percent->Option.getOr(0)->Int.toString ++ "%")->React.string}
             </span>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </div>
       })
       ->React.array}
@@ -115,20 +115,20 @@ let make = (~ruleInfo: algorithmData, ~isFrom3ds=false, ~isFromSurcharge=false)
 
                     let metadataKey = metadataDict->getOptionString("key")
                     <div key={Int.toString(index)} className="flex flex-wrap items-center gap-2">
-                      <UIUtils.RenderIf condition={index !== 0}>
+                      <RenderIf condition={index !== 0}>
                         <MakeRuleFieldComponent.TextView
                           str=logical
                           fontColor={`${textColor.primaryNormal}`}
                           fontWeight="font-semibold"
                         />
-                      </UIUtils.RenderIf>
+                      </RenderIf>
                       <MakeRuleFieldComponent.TextView str=field />
-                      <UIUtils.RenderIf condition={typeString == "metadata_variant"}>
+                      <RenderIf condition={typeString == "metadata_variant"}>
                         <MakeRuleFieldComponent.TextView str=metadataKeyValue />
-                      </UIUtils.RenderIf>
-                      <UIUtils.RenderIf condition={metadataKey->Option.isSome}>
+                      </RenderIf>
+                      <RenderIf condition={metadataKey->Option.isSome}>
                         <MakeRuleFieldComponent.TextView str={metadataKey->Option.getOr("")} />
-                      </UIUtils.RenderIf>
+                      </RenderIf>
                       <MakeRuleFieldComponent.TextView
                         str=operator fontColor="text-red-500" fontWeight="font-semibold"
                       />
@@ -137,22 +137,22 @@ let make = (~ruleInfo: algorithmData, ~isFrom3ds=false, ~isFromSurcharge=false)
                   })
                   ->React.array}
                 </div>
-                <UIUtils.RenderIf condition={rule.statements->Array.length > 0}>
+                <RenderIf condition={rule.statements->Array.length > 0}>
                   <Icon size=14 name="arrow-right" className="mx-4 text-jp-gray-700" />
-                </UIUtils.RenderIf>
-                <UIUtils.RenderIf condition={isFrom3ds}>
+                </RenderIf>
+                <RenderIf condition={isFrom3ds}>
                   <ThreedsTypeView threeDsType />
-                </UIUtils.RenderIf>
-                <UIUtils.RenderIf condition={!isFrom3ds}>
+                </RenderIf>
+                <RenderIf condition={!isFrom3ds}>
                   <GatewayView gateways={rule.connectorSelection.data->Option.getOr([])} />
-                </UIUtils.RenderIf>
-                <UIUtils.RenderIf condition={isFromSurcharge}>
+                </RenderIf>
+                <RenderIf condition={isFromSurcharge}>
                   <SurchargeCompressedView
                     surchargeType={surchargeType.surcharge.\"type"}
                     surchargeTypeValue
                     surchargePercentage={surchargeType.tax_on_surcharge.percentage}
                   />
-                </UIUtils.RenderIf>
+                </RenderIf>
               </div>
             </div>
           })
diff --git a/src/screens/SelfServe/HSwitchProdOnboarding/LiveEndpointsSetup.res b/src/screens/SelfServe/HSwitchProdOnboarding/LiveEndpointsSetup.res
index 64dddf337..68e0bda2e 100644
--- a/src/screens/SelfServe/HSwitchProdOnboarding/LiveEndpointsSetup.res
+++ b/src/screens/SelfServe/HSwitchProdOnboarding/LiveEndpointsSetup.res
@@ -31,7 +31,7 @@ module ReplaceAPIKey = {
         rightTag={<Icon name="client-tag" size=30 customWidth="50" />}
       />
       <div className={`${dividerColor} px-2`} />
-      <UIUtils.RenderIf
+      <RenderIf
         condition={previewVariant->Option.isSome && webhookEndpoint->LogicUtils.isNonEmptyString}>
         <ProdOnboardingUIUtils.SetupWebhookProcessor
           headerSectionText="Merchant Webhook Endpoint"
@@ -41,7 +41,7 @@ module ReplaceAPIKey = {
           />}
         />
         <div className={`${dividerColor} px-2`} />
-        <UIUtils.RenderIf condition={paymentResponseHashKey->LogicUtils.isNonEmptyString}>
+        <RenderIf condition={paymentResponseHashKey->LogicUtils.isNonEmptyString}>
           <ProdOnboardingUIUtils.SetupWebhookProcessor
             headerSectionText="Payment Response Hash Key"
             subtextSectionText="Download the provided key to authenticate and verify live events sent by Hyperswitch. Learn more"
@@ -50,9 +50,9 @@ module ReplaceAPIKey = {
               shadowClass="shadow shadow-hyperswitch_box_shadow md:!w-full"
             />}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <div className={`${dividerColor} px-2`} />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <ProdOnboardingUIUtils.SetupWebhookProcessor
         headerSectionText="API Key"
         subtextSectionText="Use this key to authenticate all API requests from your application's server to Hyperswitch server"
@@ -97,7 +97,7 @@ module SetupWebhookUser = {
           <TextInput input=webhookEndpoint placeholder="Enter your webhook endpoint here " />
         </FormRenderer.FieldWrapper>}
       />
-      <UIUtils.RenderIf condition={paymentResponseHashKey->LogicUtils.isNonEmptyString}>
+      <RenderIf condition={paymentResponseHashKey->LogicUtils.isNonEmptyString}>
         <ProdOnboardingUIUtils.SetupWebhookProcessor
           headerSectionText="Payment Response Hash Key"
           subtextSectionText="Download the provided key to authenticate and verify live events sent by Hyperswitch. Learn more"
@@ -106,7 +106,7 @@ module SetupWebhookUser = {
             shadowClass="shadow shadow-hyperswitch_box_shadow md:!w-full"
           />}
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   }
 }
@@ -201,9 +201,9 @@ let make = (~pageView, ~setPageView, ~previewState: option<ProdOnboardingTypes.p
         <p className=headerTextStyle> {headerText->React.string} </p>
         <p className=subTextStyle> {subHeaderText->React.string} </p>
       </div>
-      <UIUtils.RenderIf condition={previewState->Option.isNone}>
+      <RenderIf condition={previewState->Option.isNone}>
         <div className="flex gap-4">
-          <UIUtils.RenderIf condition={backButtonEnabled}>
+          <RenderIf condition={backButtonEnabled}>
             <Button
               text="Back"
               buttonSize={Small}
@@ -213,7 +213,7 @@ let make = (~pageView, ~setPageView, ~previewState: option<ProdOnboardingTypes.p
                 setPageView(_ => pageView->ProdOnboardingUtils.getBackPageView)
               }}
             />
-          </UIUtils.RenderIf>
+          </RenderIf>
           <Button
             text={"Connect and Proceed"}
             buttonSize={Small}
@@ -223,7 +223,7 @@ let make = (~pageView, ~setPageView, ~previewState: option<ProdOnboardingTypes.p
             onClick={_ => handleSubmit()}
           />
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
     <ProdOnboardingUIUtils.WarningBlock
       customComponent={Some(<>
diff --git a/src/screens/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res b/src/screens/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res
index 7d07e9485..0c637f3d8 100644
--- a/src/screens/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res
+++ b/src/screens/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res
@@ -55,9 +55,9 @@ module CheckListSection = {
           </p>
           <p className=unselectedSubHeading> {headerText->React.string} </p>
         </div>
-        <UIUtils.RenderIf condition={!(checkListItems->Array.includes(pageView))}>
+        <RenderIf condition={!(checkListItems->Array.includes(pageView))}>
           <Icon name="lock-outlined" size=20 />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
       {checkListItems
       ->Array.mapWithIndex((value, index) => {
diff --git a/src/screens/SelfServe/HSwitchProdOnboarding/ProdOnboardingUIUtils.res b/src/screens/SelfServe/HSwitchProdOnboarding/ProdOnboardingUIUtils.res
index be760df49..c286f7c77 100644
--- a/src/screens/SelfServe/HSwitchProdOnboarding/ProdOnboardingUIUtils.res
+++ b/src/screens/SelfServe/HSwitchProdOnboarding/ProdOnboardingUIUtils.res
@@ -71,7 +71,7 @@ module SetupWebhookProcessor = {
 
     <div className="flex flex-col gap-8">
       // TODO To pick up when Product Team will give all the Docs
-      // <UIUtils.RenderIf condition={connectorName->isNonEmptyString}>
+      // <RenderIf condition={connectorName->isNonEmptyString}>
       //   <p
       //     className={`${highlightedText} underline`}
       //     onClick={_ => {
@@ -79,7 +79,7 @@ module SetupWebhookProcessor = {
       //     }}>
       //     {`View Steps to Setup Webhooks on ${connectorName}`->React.string}
       //   </p>
-      // </UIUtils.RenderIf>
+      // </RenderIf>
       <div
         className="grid grid-cols-1 lg:grid-cols-2 bg-jp-gray-light_gray_bg p-10 items-center gap-6">
         <div className="flex flex-col gap-2 col-span-1">
@@ -133,11 +133,11 @@ module BasicAccountSetupSuccessfulPage = {
       <div className={`p-4 h-5/6 ${bgColor} flex flex-col justify-center items-center gap-8`}>
         <Icon name=iconName size=120 />
         <p className=headerTextStyle> {statusText->React.string} </p>
-        <UIUtils.RenderIf condition={statusText == "Payment Failed"}>
+        <RenderIf condition={statusText == "Payment Failed"}>
           <p className="text-center"> {errorMessage->React.string} </p>
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
-      <UIUtils.RenderIf condition={isButtonVisible}>
+      <RenderIf condition={isButtonVisible}>
         <Button
           text=buttonText
           buttonSize={Small}
@@ -146,7 +146,7 @@ module BasicAccountSetupSuccessfulPage = {
           onClick={_ => buttonOnClick()}
           buttonState
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   }
 }
diff --git a/src/screens/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res b/src/screens/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
index 70b38d810..d677b1b87 100644
--- a/src/screens/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
+++ b/src/screens/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
@@ -58,7 +58,7 @@ module ConnectorDetailsForm = {
         suggestedAction
         setVerifyDone
       />
-      <UIUtils.RenderIf condition={checkboxText->LogicUtils.isNonEmptyString}>
+      <RenderIf condition={checkboxText->LogicUtils.isNonEmptyString}>
         <div className="flex gap-2 items-center">
           <CheckBoxIcon
             isSelected=isCheckboxSelected
@@ -68,7 +68,7 @@ module ConnectorDetailsForm = {
             {connectorVariant->ProdOnboardingUtils.getCheckboxText->React.string}
           </p>
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   }
 }
@@ -311,9 +311,9 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
     switch pageView {
     | SETUP_CREDS =>
       <>
-        <UIUtils.RenderIf condition={warningBlock->Option.isSome}>
+        <RenderIf condition={warningBlock->Option.isSome}>
           <ProdOnboardingUIUtils.WarningBlock customComponent={warningBlock} />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <ConnectorDetailsForm
           connectorName
           connectorDetails
diff --git a/src/screens/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res b/src/screens/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res
index 8e0acb7d4..444ede28a 100644
--- a/src/screens/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res
+++ b/src/screens/SelfServe/HSwitchSandboxOnboarding/IntegrationDocs.res
@@ -172,7 +172,7 @@ let make = (
     <div className="flex flex-col w-full h-full p-6 gap-4 ">
       <div
         className={`flex ${languageSelection ? "justify-between" : "justify-end"} flex-wrap gap-2`}>
-        <UIUtils.RenderIf condition=languageSelection>
+        <RenderIf condition=languageSelection>
           <UserOnboardingUIUtils.BackendFrontendPlatformLangDropDown
             frontEndLang
             setFrontEndLang
@@ -182,8 +182,8 @@ let make = (
             platform
             setPlatform
           />
-        </UIUtils.RenderIf>
-        <UIUtils.RenderIf condition={!isFromOnboardingChecklist}>
+        </RenderIf>
+        <RenderIf condition={!isFromOnboardingChecklist}>
           <Button
             text={"Mark as done"}
             customButtonStyle=buttonStyle
@@ -192,7 +192,7 @@ let make = (
             buttonState={tabIndex === tabs->Array.length - 1 ? Normal : Disabled}
             onClick={_ => handleMarkAsDone()}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
       {if requestedPlatform->Option.isSome {
         <RequestPage requestedPlatform currentRoute />
@@ -214,7 +214,7 @@ let make = (
               setTabIndex(_ => indx)
             }}
           />
-          <UIUtils.RenderIf condition={tabIndex !== tabs->Array.length - 1}>
+          <RenderIf condition={tabIndex !== tabs->Array.length - 1}>
             <div className="flex my-4 w-full justify-end">
               <Button
                 text={"Next Step"}
@@ -233,7 +233,7 @@ let make = (
                 }}
               />
             </div>
-          </UIUtils.RenderIf>
+          </RenderIf>
           <div className="flex gap-1 flex-wrap pb-5 justify-between ">
             <div className="flex gap-2">
               <p className="text-base font-normal text-grey-700">
diff --git a/src/screens/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res b/src/screens/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
index 9ec4c7515..9f5fbb67f 100644
--- a/src/screens/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
+++ b/src/screens/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
@@ -98,9 +98,9 @@ module DownloadAPIKeyButton = {
             }
           }}
         />
-        <UIUtils.RenderIf condition=showCopyToClipboard>
+        <RenderIf condition=showCopyToClipboard>
           <div className="text-green-700 text-lg"> {"Copied to clipboard"->React.string} </div>
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     switch currentRoute {
     | WooCommercePlugin =>
@@ -282,7 +282,7 @@ module BackendFrontendPlatformLangDropDown = {
 
     <Form initialValues={Dict.make()->JSON.Encode.object}>
       <div className="flex flex-row gap-4 flex-wrap">
-        <UIUtils.RenderIf condition={!isFromLanding && currentRoute !== SampleProjects}>
+        <RenderIf condition={!isFromLanding && currentRoute !== SampleProjects}>
           <SelectBox.BaseDropdown
             allowMultiSelect=false
             buttonText="Select Platform"
@@ -303,8 +303,8 @@ module BackendFrontendPlatformLangDropDown = {
               customButtonStyle="!bg-white !border !rounded-md"
             />}
           />
-        </UIUtils.RenderIf>
-        <UIUtils.RenderIf condition={!(requestOnlyPlatforms->Array.includes(platform))}>
+        </RenderIf>
+        <RenderIf condition={!(requestOnlyPlatforms->Array.includes(platform))}>
           <SelectBox.BaseDropdown
             allowMultiSelect=false
             buttonText="Select Frontend"
@@ -349,7 +349,7 @@ module BackendFrontendPlatformLangDropDown = {
               customButtonStyle="!bg-white !border !rounded-md"
             />}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </Form>
   }
@@ -358,12 +358,12 @@ module BackendFrontendPlatformLangDropDown = {
 module LanguageTag = {
   @react.component
   let make = (~frontendLang="", ~backendLang="") => {
-    <UIUtils.RenderIf condition={frontendLang->isNonEmptyString && backendLang->isNonEmptyString}>
+    <RenderIf condition={frontendLang->isNonEmptyString && backendLang->isNonEmptyString}>
       <div className="flex gap-2 items-center">
         <Icon name={`${frontendLang}`} size=25 />
         <Icon name={`${backendLang}`} size=25 />
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
@@ -427,7 +427,7 @@ module LandingPageTileForIntegrateDocs = {
       }
       setDashboardPageState(_ => #HOME)
     }
-    <UIUtils.RenderIf condition={!isFromOnboardingChecklist || isTileVisible}>
+    <RenderIf condition={!isFromOnboardingChecklist || isTileVisible}>
       <div
         className="p-8 border rounded-md flex flex-col gap-7 justify-between bg-white w-full md:w-1/3">
         <div className="flex justify-between flex-wrap">
@@ -438,18 +438,18 @@ module LandingPageTileForIntegrateDocs = {
           } else {
             <Icon size=35 name=headerIcon className=customIconCss />
           }}
-          <UIUtils.RenderIf condition={rightIcon->Option.isSome}>
+          <RenderIf condition={rightIcon->Option.isSome}>
             {rightIcon->Option.getOr(React.null)}
-          </UIUtils.RenderIf>
+          </RenderIf>
           {leftSection}
         </div>
         <div className="flex flex-col gap-2">
           <p className=headerTextCss> {headerText->React.string} </p>
-          <UIUtils.RenderIf condition={subText->Option.isSome}>
+          <RenderIf condition={subText->Option.isSome}>
             <p className=subTextCss> {subText->Option.getOr("")->React.string} </p>
-          </UIUtils.RenderIf>
+          </RenderIf>
           <div>
-            <UIUtils.RenderIf condition={subTextCustomValues->Option.isSome}>
+            <RenderIf condition={subTextCustomValues->Option.isSome}>
               <div className={`flex flex-col gap-3 mt-4`}>
                 {subTextCustomValues
                 ->Option.getOr([])
@@ -458,7 +458,7 @@ module LandingPageTileForIntegrateDocs = {
                 })
                 ->React.array}
               </div>
-            </UIUtils.RenderIf>
+            </RenderIf>
           </div>
         </div>
         <Button
@@ -467,7 +467,7 @@ module LandingPageTileForIntegrateDocs = {
           onClick={_ => isSkipButton ? skipAndContinue()->ignore : redirect()}
         />
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
@@ -579,7 +579,7 @@ module CreatePayment = {
         </p>
       </p>}>
       <div className=defaultEditorStyle>
-        <UIUtils.RenderIf condition={backEndLang->getInstallDependencies->isNonEmptyString}>
+        <RenderIf condition={backEndLang->getInstallDependencies->isNonEmptyString}>
           <ShowCodeEditor
             value={backEndLang->getInstallDependencies}
             theme
@@ -587,7 +587,7 @@ module CreatePayment = {
             langauge=backEndLang
           />
           <div className="w-full h-px bg-jp-gray-700" />
-        </UIUtils.RenderIf>
+        </RenderIf>
         <ShowCodeEditor
           value={backEndLang->getCreateAPayment}
           theme
@@ -680,7 +680,7 @@ let getTabsForIntegration = (
         renderContent: () =>
           <TabsContentWrapper currentRoute tabIndex customUi={<PublishableKeyArea />}>
             <div className=defaultEditorStyle>
-              <UIUtils.RenderIf condition={frontEndLang->getInstallDependencies->isNonEmptyString}>
+              <RenderIf condition={frontEndLang->getInstallDependencies->isNonEmptyString}>
                 <ShowCodeEditor
                   value={frontEndLang->getInstallDependencies}
                   theme
@@ -688,20 +688,20 @@ let getTabsForIntegration = (
                   langauge=frontEndLang
                 />
                 <div className="w-full h-px bg-jp-gray-700" />
-              </UIUtils.RenderIf>
-              <UIUtils.RenderIf condition={frontEndLang->getInstallDependencies->isNonEmptyString}>
+              </RenderIf>
+              <RenderIf condition={frontEndLang->getInstallDependencies->isNonEmptyString}>
                 <ShowCodeEditor
                   value={frontEndLang->getImports} theme headerText="Imports" langauge=frontEndLang
                 />
                 <div className="w-full h-px bg-jp-gray-700" />
-              </UIUtils.RenderIf>
-              <UIUtils.RenderIf condition={frontEndLang->getLoad->isNonEmptyString}>
+              </RenderIf>
+              <RenderIf condition={frontEndLang->getLoad->isNonEmptyString}>
                 <ShowCodeEditor
                   value={frontEndLang->getLoad} theme headerText="Load" langauge=frontEndLang
                 />
                 <div className="w-full h-px bg-jp-gray-700" />
-              </UIUtils.RenderIf>
-              <UIUtils.RenderIf condition={frontEndLang->getInitialize->isNonEmptyString}>
+              </RenderIf>
+              <RenderIf condition={frontEndLang->getInitialize->isNonEmptyString}>
                 <ShowCodeEditor
                   value={frontEndLang->getInitialize}
                   theme
@@ -709,8 +709,8 @@ let getTabsForIntegration = (
                   langauge=frontEndLang
                 />
                 <div className="w-full h-px bg-jp-gray-700" />
-              </UIUtils.RenderIf>
-              <UIUtils.RenderIf
+              </RenderIf>
+              <RenderIf
                 condition={frontEndLang->getCheckoutFormForDisplayCheckoutPage->isNonEmptyString}>
                 <ShowCodeEditor
                   value={frontEndLang->getCheckoutFormForDisplayCheckoutPage}
@@ -718,7 +718,7 @@ let getTabsForIntegration = (
                   headerText="Checkout Form"
                   langauge=frontEndLang
                 />
-              </UIUtils.RenderIf>
+              </RenderIf>
             </div>
           </TabsContentWrapper>,
       },
@@ -727,7 +727,7 @@ let getTabsForIntegration = (
         renderContent: () =>
           <TabsContentWrapper currentRoute tabIndex customUi={<PublishableKeyArea />}>
             <div className=defaultEditorStyle>
-              <UIUtils.RenderIf condition={frontEndLang->getHandleEvents->isNonEmptyString}>
+              <RenderIf condition={frontEndLang->getHandleEvents->isNonEmptyString}>
                 <ShowCodeEditor
                   value={frontEndLang->getHandleEvents}
                   theme
@@ -736,8 +736,8 @@ let getTabsForIntegration = (
                   langauge=frontEndLang
                 />
                 <div className="w-full h-px bg-jp-gray-700" />
-              </UIUtils.RenderIf>
-              <UIUtils.RenderIf condition={frontEndLang->getDisplayConformation->isNonEmptyString}>
+              </RenderIf>
+              <RenderIf condition={frontEndLang->getDisplayConformation->isNonEmptyString}>
                 <ShowCodeEditor
                   value={frontEndLang->getDisplayConformation}
                   theme
@@ -745,7 +745,7 @@ let getTabsForIntegration = (
                   customHeight="20vh"
                   langauge=frontEndLang
                 />
-              </UIUtils.RenderIf>
+              </RenderIf>
             </div>
           </TabsContentWrapper>,
       },
diff --git a/src/screens/Settings/BusinessMapping/BusinessProfile.res b/src/screens/Settings/BusinessMapping/BusinessProfile.res
index d57f60d42..26e57f976 100644
--- a/src/screens/Settings/BusinessMapping/BusinessProfile.res
+++ b/src/screens/Settings/BusinessMapping/BusinessProfile.res
@@ -92,7 +92,7 @@ module AddEntryBtn = {
     }
 
     <div>
-      <UIUtils.RenderIf condition=isFromSettings>
+      <RenderIf condition=isFromSettings>
         <ACLButton
           text="Add"
           access={userPermissionJson.merchantDetailsManage}
@@ -103,7 +103,7 @@ module AddEntryBtn = {
             setShowModal(_ => true)
           }}
         />
-      </UIUtils.RenderIf>
+      </RenderIf>
       <Modal
         showModal
         modalHeading=modalHeaderText
@@ -169,18 +169,18 @@ let make = (
   }
 
   <PageLoaderWrapper screenState>
-    <UIUtils.RenderIf condition=isFromSettings>
+    <RenderIf condition=isFromSettings>
       <div className="relative h-full">
         <div className="flex flex-col-reverse md:flex-col gap-2">
           <PageUtils.PageHeading
             title="Business Profiles"
             subTitle="Add and manage profiles to represent different businesses across countries."
           />
-          <UIUtils.RenderIf condition={businessProfileValues->Array.length > 1}>
+          <RenderIf condition={businessProfileValues->Array.length > 1}>
             <HSwitchUtils.WarningArea
               warningText="Warning! Now that you've configured more than one profile, you must mandatorily pass 'profile_id' in payments API request every time"
             />
-          </UIUtils.RenderIf>
+          </RenderIf>
           <LoadedTable
             title="Business profiles"
             hideTitle=true
@@ -207,8 +207,8 @@ let make = (
           </div>
         </div>
       </div>
-    </UIUtils.RenderIf>
-    <UIUtils.RenderIf condition={!isFromSettings}>
+    </RenderIf>
+    <RenderIf condition={!isFromSettings}>
       <AddEntryBtn
         isFromSettings
         onSubmit
@@ -219,6 +219,6 @@ let make = (
         updatedProfileId
         setModalState
       />
-    </UIUtils.RenderIf>
+    </RenderIf>
   </PageLoaderWrapper>
 }
diff --git a/src/screens/Settings/HSwitchProfile/HSwitchProfileSettings.res b/src/screens/Settings/HSwitchProfile/HSwitchProfileSettings.res
index 87b5cecef..b6c865665 100644
--- a/src/screens/Settings/HSwitchProfile/HSwitchProfileSettings.res
+++ b/src/screens/Settings/HSwitchProfile/HSwitchProfileSettings.res
@@ -93,7 +93,7 @@ module ResetPassword = {
         <p className="text-hyperswitch_black opacity-50 text-base font-semibold break-all">
           {"********"->React.string}
         </p>
-        <UIUtils.RenderIf condition={!isPlayground}>
+        <RenderIf condition={!isPlayground}>
           <Button
             text={"Reset Password"}
             loadingText="Sending mail..."
@@ -102,7 +102,7 @@ module ResetPassword = {
             buttonSize={Small}
             onClick={_ => setPassword()}
           />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </div>
   }
@@ -189,9 +189,9 @@ module BasicDetailsSection = {
           <p className=subTitleClass> {email->React.string} </p>
         </div>
         <hr />
-        <UIUtils.RenderIf condition={!isPlayground && featureFlagDetails.email}>
+        <RenderIf condition={!isPlayground && featureFlagDetails.email}>
           <ResetPassword />
-        </UIUtils.RenderIf>
+        </RenderIf>
       </div>
     </div>
   }
@@ -212,9 +212,9 @@ let make = () => {
     <div className="flex flex-col flex-wrap  gap-12">
       <BasicDetailsSection />
       <MerchantDetailsSection />
-      <UIUtils.RenderIf condition={featureFlagDetails.totp && showTwoFaSettings}>
+      <RenderIf condition={featureFlagDetails.totp && showTwoFaSettings}>
         <TwoFactorAuthenticationDetails />
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   </div>
 }
diff --git a/src/screens/Settings/HSwitchProfile/ModifyTwoFaSettings.res b/src/screens/Settings/HSwitchProfile/ModifyTwoFaSettings.res
index d0db429bf..74b06b641 100644
--- a/src/screens/Settings/HSwitchProfile/ModifyTwoFaSettings.res
+++ b/src/screens/Settings/HSwitchProfile/ModifyTwoFaSettings.res
@@ -21,7 +21,7 @@ module Verify2FAModalComponent = {
       | Totp =>
         <>
           <TwoFaElements.TotpInput otp setOtp />
-          <UIUtils.RenderIf condition={!showOnlyTotp}>
+          <RenderIf condition={!showOnlyTotp}>
             <p className={`${p2Regular} text-jp-gray-700`}>
               {"Didn't get a code? "->React.string}
               <span
@@ -34,7 +34,7 @@ module Verify2FAModalComponent = {
                 {"Use recovery-code"->React.string}
               </span>
             </p>
-          </UIUtils.RenderIf>
+          </RenderIf>
         </>
 
       | RecoveryCode =>
@@ -54,9 +54,9 @@ module Verify2FAModalComponent = {
           </p>
         </>
       }}
-      <UIUtils.RenderIf condition={errorMessage->String.length > 0}>
+      <RenderIf condition={errorMessage->String.length > 0}>
         <div className="text-sm text-red-600"> {`Error: ${errorMessage}`->React.string} </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
     </div>
   }
 }
diff --git a/src/screens/Sidebar/Sidebar.res b/src/screens/Sidebar/Sidebar.res
index a8e05081b..4ba23c1de 100644
--- a/src/screens/Sidebar/Sidebar.res
+++ b/src/screens/Sidebar/Sidebar.res
@@ -75,7 +75,6 @@ module SidebarSubOption = {
 module SidebarItem = {
   @react.component
   let make = (~tabInfo, ~isSelected, ~isExpanded, ~setOpenItem=_ => ()) => {
-    open UIUtils
     let sidebarItemRef = React.useRef(Nullable.null)
     let {getSearchParamByLink} = React.useContext(UserPrefContext.userPrefContext)
     let getSearchParamByLink = link => getSearchParamByLink(String.substringToEnd(link, ~start=0))
@@ -176,7 +175,6 @@ module SidebarItem = {
 module NestedSidebarItem = {
   @react.component
   let make = (~tabInfo, ~isSelected, ~isSideBarExpanded, ~isSectionExpanded) => {
-    open UIUtils
     let {getSearchParamByLink} = React.useContext(UserPrefContext.userPrefContext)
     let getSearchParamByLink = link => getSearchParamByLink(Js.String2.substr(link, ~from=0))
 
@@ -252,7 +250,6 @@ module NestedSectionItem = {
     ~isSubLevelItemSelected,
     ~isSideBarExpanded,
   ) => {
-    open UIUtils
     let iconColor = isAnySubItemSelected ? "text-white" : "text-white opacity-60"
 
     let iconOuterClass = if !isSideBarExpanded {
@@ -341,7 +338,6 @@ module SidebarNestedSection = {
     ~setOpenItem=_ => (),
     ~isSectionAutoCollapseEnabled=false,
   ) => {
-    open UIUtils
     let isSubLevelItemSelected = tabInfo => {
       switch tabInfo {
       | SubLevelLink(item) => linkSelectionCheck(firstPart, item.link)
@@ -451,7 +447,6 @@ module SidebarNestedSection = {
 module PinIconComponentStates = {
   @react.component
   let make = (~isHSSidebarPinned, ~setIsSidebarExpanded, ~isSidebarExpanded) => {
-    open UIUtils
     let isMobileView = MatchMedia.useMobileChecker()
     let {setIsSidebarDetails} = React.useContext(SidebarProvider.defaultContext)
 
@@ -495,7 +490,6 @@ let make = (
   ~linkSelectionCheck=defaultLinkSelectionCheck,
   ~verticalOffset="120px",
 ) => {
-  open UIUtils
   open CommonAuthHooks
   let {globalUIConfig: {sidebarColor: {backgroundColor}}} = React.useContext(
     ThemeProvider.themeContext,
diff --git a/src/screens/Surcharge/Surcharge.res b/src/screens/Surcharge/Surcharge.res
index 571a31e8e..09c92ec4e 100644
--- a/src/screens/Surcharge/Surcharge.res
+++ b/src/screens/Surcharge/Surcharge.res
@@ -9,7 +9,7 @@ module ActiveRulePreview = {
 
     let ruleInfo = rule->getDictfromDict("algorithm")->SurchargeUtils.ruleInfoTypeMapper
 
-    <UIUtils.RenderIf condition={initialRule->Option.isSome}>
+    <RenderIf condition={initialRule->Option.isSome}>
       <div className="relative flex flex-col gap-6 w-full border p-6 bg-white rounded-md">
         <div
           className="absolute top-0 right-0 bg-green-700 text-white py-2 px-4 rounded-bl font-semibold">
@@ -25,7 +25,7 @@ module ActiveRulePreview = {
         </div>
         <RulePreviewer ruleInfo isFromSurcharge=true />
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
diff --git a/src/screens/SwitchMerchant/SwitchMerchant.res b/src/screens/SwitchMerchant/SwitchMerchant.res
index e96a20b25..17f5e3452 100644
--- a/src/screens/SwitchMerchant/SwitchMerchant.res
+++ b/src/screens/SwitchMerchant/SwitchMerchant.res
@@ -124,7 +124,6 @@ module AddNewMerchantButton = {
 module ExternalUser = {
   @react.component
   let make = (~switchMerchant, ~isAddMerchantEnabled) => {
-    open UIUtils
     let {merchant_id: defaultMerchantId} =
       CommonAuthHooks.useCommonAuthInfo()->Option.getOr(CommonAuthHooks.defaultAuthInfo)
     let {globalUIConfig: {font: {textColor}}} = React.useContext(ThemeProvider.themeContext)
diff --git a/src/screens/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/ThreeDSFlow/HSwitchThreeDS.res
index 174aea29e..d1e21d3f7 100644
--- a/src/screens/ThreeDSFlow/HSwitchThreeDS.res
+++ b/src/screens/ThreeDSFlow/HSwitchThreeDS.res
@@ -362,9 +362,9 @@ let make = () => {
         </div>
       | LANDING =>
         <div className="flex flex-col gap-6">
-          <UIUtils.RenderIf condition={initialRule->Option.isSome}>
+          <RenderIf condition={initialRule->Option.isSome}>
             <ActiveRulePreview initialRule setInitialRule />
-          </UIUtils.RenderIf>
+          </RenderIf>
           <div className="w-full border p-6 flex flex-col gap-6 bg-white rounded-md">
             <p className="text-base font-semibold text-grey-700">
               {"Configure 3DS Rule"->React.string}
diff --git a/src/screens/ThreeDsProcessors/ThreeDsConnectorList.res b/src/screens/ThreeDsProcessors/ThreeDsConnectorList.res
index 4c51c5bc0..4706d2fcf 100644
--- a/src/screens/ThreeDsProcessors/ThreeDsConnectorList.res
+++ b/src/screens/ThreeDsProcessors/ThreeDsConnectorList.res
@@ -1,7 +1,5 @@
 @react.component
 let make = () => {
-  open UIUtils
-
   let fetchConnectorListResponse = ConnectorListHook.useFetchConnectorList()
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Success)
   let (configuredConnectors, setConfiguredConnectors) = React.useState(_ => [])
diff --git a/src/screens/UserManagement/CreateCustomRole.res b/src/screens/UserManagement/CreateCustomRole.res
index deb2713dc..689c3fcda 100644
--- a/src/screens/UserManagement/CreateCustomRole.res
+++ b/src/screens/UserManagement/CreateCustomRole.res
@@ -19,7 +19,7 @@ module RenderCustomRoles = {
       setCheckboxSelected(prev => !prev)
     }
 
-    <UIUtils.RenderIf
+    <RenderIf
       condition={groupName->PermissionUtils.mapStringToPermissionType !== OrganizationManage}>
       <div className="flex gap-6 items-start cursor-pointer" onClick={_ => onClickGroup(groupName)}>
         <div className="mt-1">
@@ -32,7 +32,7 @@ module RenderCustomRoles = {
           </div>
         </div>
       </div>
-    </UIUtils.RenderIf>
+    </RenderIf>
   }
 }
 
@@ -66,7 +66,7 @@ module NewCustomRoleInputFields = {
 let make = (~isInviteUserFlow=true, ~setNewRoleSelected=_ => ()) => {
   open APIUtils
   open LogicUtils
-  open UIUtils
+
   let getURL = useGetURL()
   let fetchDetails = useGetMethod()
   let updateDetails = useUpdateMethod()
diff --git a/src/screens/UserManagement/InviteUsers.res b/src/screens/UserManagement/InviteUsers.res
index 2d84f6000..13d6313d5 100644
--- a/src/screens/UserManagement/InviteUsers.res
+++ b/src/screens/UserManagement/InviteUsers.res
@@ -4,7 +4,7 @@ module InviteEmailForm = {
   let make = (~setRoleTypeValue, ~isEmailTextInputVisible, ~setNewRoleSelected) => {
     open LogicUtils
     open APIUtils
-    open UIUtils
+
     let getURL = useGetURL()
     let {globalUIConfig: {border: {borderColor}}} = React.useContext(ThemeProvider.themeContext)
     let fetchDetails = useGetMethod()
@@ -91,7 +91,7 @@ let make = (~isInviteUserFlow=true, ~setNewRoleSelected=_ => (), ~currentRole=?)
   open UserManagementUtils
   open APIUtils
   open LogicUtils
-  open UIUtils
+
   let getURL = useGetURL()
   let fetchDetails = useGetMethod()
   let updateDetails = useUpdateMethod()
diff --git a/src/screens/UserManagement/ShowUserData.res b/src/screens/UserManagement/ShowUserData.res
index bc26b2833..5127ad9d7 100644
--- a/src/screens/UserManagement/ShowUserData.res
+++ b/src/screens/UserManagement/ShowUserData.res
@@ -1,5 +1,4 @@
 open UserManagementUtils
-open UIUtils
 
 external typeConversion: array<Nullable.t<UserRoleEntity.userTableTypes>> => array<
   UserRoleEntity.userTableTypes,
diff --git a/src/utils/BreadCrumbNavigation.res b/src/utils/BreadCrumbNavigation.res
index 928832993..78309af6d 100644
--- a/src/utils/BreadCrumbNavigation.res
+++ b/src/utils/BreadCrumbNavigation.res
@@ -57,7 +57,7 @@ let make = (
             },
           })
       }
-      <UIUtils.RenderIf key={Int.toString(index)} condition=showCrumb>
+      <RenderIf key={Int.toString(index)} condition=showCrumb>
         <div className={`flex ${flexDirection} ${childGapClass} items-center`}>
           {if collapse {
             <div
@@ -87,7 +87,7 @@ let make = (
           }}
           divider
         </div>
-      </UIUtils.RenderIf>
+      </RenderIf>
     })
     ->React.array}
     <AddDataAttributes attributes=[("data-breadcrumb", currentPageTitle)]>
diff --git a/src/utils/LoaderModal.res b/src/utils/LoaderModal.res
index 48799a00d..e3b80f20f 100644
--- a/src/utils/LoaderModal.res
+++ b/src/utils/LoaderModal.res
@@ -1,6 +1,6 @@
 @react.component
 let make = (~showModal, ~setShowModal, ~text) => {
-  <UIUtils.RenderIf condition={showModal}>
+  <RenderIf condition={showModal}>
     <Modal
       showModal
       setShowModal
@@ -12,5 +12,5 @@ let make = (~showModal, ~setShowModal, ~text) => {
         <div className="text-xl font-semibold mb-4"> {text->React.string} </div>
       </div>
     </Modal>
-  </UIUtils.RenderIf>
+  </RenderIf>
 }
diff --git a/src/utils/RenderIf.res b/src/utils/RenderIf.res
new file mode 100644
index 000000000..c3984be15
--- /dev/null
+++ b/src/utils/RenderIf.res
@@ -0,0 +1,8 @@
+@react.component
+let make = (~condition, ~children) => {
+  if condition {
+    children
+  } else {
+    React.null
+  }
+}
diff --git a/src/utils/UIUtils.res b/src/utils/UIUtils.res
deleted file mode 100644
index c30e44c52..000000000
--- a/src/utils/UIUtils.res
+++ /dev/null
@@ -1,10 +0,0 @@
-module RenderIf = {
-  @react.component
-  let make = (~condition, ~children) => {
-    if condition {
-      children
-    } else {
-      React.null
-    }
-  }
-}