diff --git a/CHANGELOG.md b/CHANGELOG.md
index f7615acfb..716a1b93c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,5 @@
+## [0.82.2](https://github.com/juspay/hyperswitch-web/compare/v0.82.1...v0.82.2) (2024-08-09)
+
 ## [0.82.1](https://github.com/juspay/hyperswitch-web/compare/v0.82.0...v0.82.1) (2024-08-07)
 
 
diff --git a/package-lock.json b/package-lock.json
index 76c1507e7..16b45f54d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orca-payment-page",
-  "version": "0.82.1",
+  "version": "0.82.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orca-payment-page",
-      "version": "0.82.1",
+      "version": "0.82.2",
       "hasInstallScript": true,
       "dependencies": {
         "@glennsl/rescript-fetch": "^0.2.0",
diff --git a/package.json b/package.json
index a3fb71ceb..81fa68ae2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.82.1",
+  "version": "0.82.2",
   "main": "index.js",
   "private": true,
   "dependencies": {
diff --git a/src/Components/DropdownField.res b/src/Components/DropdownField.res
index f79587ea2..2ddbdd595 100644
--- a/src/Components/DropdownField.res
+++ b/src/Components/DropdownField.res
@@ -101,42 +101,40 @@ let make = (
         </div>
       </RenderIf>
       <div className="relative">
-        <div className={`Input ${className} appearance-none relative`}>
-          <RenderIf condition={isDisplayValueVisible && displayValue->Option.isSome}>
-            <div
-              className="absolute top-1 left-1 right-0 bottom-0  pointer-events-none rounded-sm z-20 whitespace-nowrap"
-              style={
-                background: disabled ? disbaledBG : themeObj.colorBackground,
-                opacity: disabled ? "35%" : "",
-                padding: themeObj.spacingUnit,
-                width: "95%",
-              }>
-              {React.string(displayValue->Option.getOr(""))}
-            </div>
-          </RenderIf>
-          <select
-            ref={dropdownRef->ReactDOM.Ref.domRef}
+        <RenderIf condition={isDisplayValueVisible && displayValue->Option.isSome}>
+          <div
+            className="absolute top-1 left-1 right-0 bottom-0  pointer-events-none rounded-sm z-20 whitespace-nowrap"
             style={
               background: disabled ? disbaledBG : themeObj.colorBackground,
               opacity: disabled ? "35%" : "",
               padding: themeObj.spacingUnit,
-              width: "100%",
-            }
-            name=""
-            value
-            disabled={readOnly || disabled}
-            onChange=handleChange
-            onFocus=handleFocus
-            className={`${inputClassStyles} ${className} w-full appearance-none outline-none ${cursorClass}`}>
-            {options
-            ->Array.mapWithIndex((item, index) => {
-              <option key={Int.toString(index)} value=item.value>
-                {React.string(item.label->Option.getOr(item.value))}
-              </option>
-            })
-            ->React.array}
-          </select>
-        </div>
+              width: "95%",
+            }>
+            {React.string(displayValue->Option.getOr(""))}
+          </div>
+        </RenderIf>
+        <select
+          ref={dropdownRef->ReactDOM.Ref.domRef}
+          style={
+            background: disabled ? disbaledBG : themeObj.colorBackground,
+            opacity: disabled ? "35%" : "",
+            padding: themeObj.spacingUnit,
+            width: "100%",
+          }
+          name=""
+          value
+          disabled={readOnly || disabled}
+          onChange=handleChange
+          onFocus=handleFocus
+          className={`${inputClassStyles} ${className} w-full appearance-none outline-none ${cursorClass}`}>
+          {options
+          ->Array.mapWithIndex((item, index) => {
+            <option key={Int.toString(index)} value=item.value>
+              {React.string(item.label->Option.getOr(item.value))}
+            </option>
+          })
+          ->React.array}
+        </select>
         <RenderIf condition={config.appearance.labels == Floating}>
           <div
             className={`Label ${floatinglabelClass} absolute bottom-0 ml-3 ${focusClass}`}
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index 273645123..3fc1d3b90 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -493,13 +493,14 @@ let make = (
       ->React.array}
       <RenderIf condition={isRenderDynamicFieldsInsideBilling}>
         <div
-          className={`${spacedStylesForBiilingDetails} w-full text-left`}
+          className={`billing-section ${spacedStylesForBiilingDetails} w-full text-left`}
           style={
             border: {isSpacedInnerLayout ? `1px solid ${themeObj.borderColor}` : ""},
             borderRadius: {isSpacedInnerLayout ? themeObj.borderRadius : ""},
             margin: {isSpacedInnerLayout ? `10px 0` : ""},
           }>
           <div
+            className="billing-details-text"
             style={
               marginBottom: "5px",
               fontSize: themeObj.fontSizeLg,