diff --git a/react/example/package.json b/react/example/package.json
index 2562c2dfcc..3d36377d2d 100644
--- a/react/example/package.json
+++ b/react/example/package.json
@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.1-beta.17",
+    "@egovernments/digit-ui-components": "0.0.1-beta.18",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
diff --git a/react/example/public/index.html b/react/example/public/index.html
index e980de9ca4..461557e2b0 100644
--- a/react/example/public/index.html
+++ b/react/example/public/index.html
@@ -18,7 +18,7 @@
 
   <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css/dist/index.css"/> -->
   <!-- <script src="https://s3.ap-south-1.amazonaws.com/egov-dev-assets/globalConfigs.js"></script> -->
-  <!-- <script src="%REACT_APP_GLOBAL%"></script> -->
+  <script src="%REACT_APP_GLOBAL%"></script>
 
 </head>
 
diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json
index bd62a08d34..69f00efe77 100644
--- a/react/modules/Project/package.json
+++ b/react/modules/Project/package.json
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-        "@egovernments/digit-ui-components": "0.0.1-beta.17",
+        "@egovernments/digit-ui-components": "0.0.1-beta.18",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",
diff --git a/react/modules/core/package.json b/react/modules/core/package.json
index 56f32e05fc..4c0bc16be1 100644
--- a/react/modules/core/package.json
+++ b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.1-beta.17",
+    "@egovernments/digit-ui-components": "0.0.1-beta.18",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
index 16e4429aea..cafd4938ee 100644
--- a/react/modules/sample/package.json
+++ b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.1-beta.17",
+    "@egovernments/digit-ui-components": "0.0.1-beta.18",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",
diff --git a/react/package.json b/react/package.json
index e88f94bdb3..27f642ab2e 100644
--- a/react/package.json
+++ b/react/package.json
@@ -77,7 +77,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.4",
-    "@egovernments/digit-ui-components": "0.0.1-beta.17",
+    "@egovernments/digit-ui-components": "0.0.1-beta.18",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",
diff --git a/react/ui-components/README.md b/react/ui-components/README.md
index 18b82d5f35..0459e5ed13 100644
--- a/react/ui-components/README.md
+++ b/react/ui-components/README.md
@@ -58,6 +58,7 @@ yarn storybook
 # Changelog
 
 ```bash
+0.0.1-beta.18 updated dropdown option labels
 0.0.1-beta.17 updated toast info varinat css and category option css 
 0.0.1-beta.16 added erroe boundary atom
 0.0.1-beta.15 added info varinat for toast
diff --git a/react/ui-components/package.json b/react/ui-components/package.json
index 8745cd0981..406b873ff4 100644
--- a/react/ui-components/package.json
+++ b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.1-beta.17",
+  "version": "0.0.1-beta.18",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
diff --git a/react/ui-components/src/atoms/Dropdown.js b/react/ui-components/src/atoms/Dropdown.js
index 8a310e5301..3cc1210af0 100644
--- a/react/ui-components/src/atoms/Dropdown.js
+++ b/react/ui-components/src/atoms/Dropdown.js
@@ -306,16 +306,16 @@ const Dropdown = (props) => {
             {props.isPropertyAssess ? (
               <div>
                 {props.t
-                  ? props.t(option[props.optionKey])
-                  : option[props.optionKey]}
+                  ? props.t(option[props?.optionKey])
+                  : option[props?.optionKey]}
               </div>
             ) : (
               <span
                 className={`main-option ${props.variant ? props?.variant : ""}`}
               >
                 {props.t
-                  ? props.t(option[props.optionKey])
-                  : option[props.optionKey]}
+                  ? props.t(option[props?.optionKey])
+                  : option[props?.optionKey]}
               </span>
             )}
           </div>
@@ -352,7 +352,7 @@ const Dropdown = (props) => {
                     fill="#505a5f"
                   />
                 )}
-              {option[props.optionKey]}
+              {t(option[props?.optionKey])}
             </div>
           </div>
         );
diff --git a/react/ui-components/src/atoms/MultiSelectDropdown.js b/react/ui-components/src/atoms/MultiSelectDropdown.js
index 0ae7e8680d..c1e7a10e42 100644
--- a/react/ui-components/src/atoms/MultiSelectDropdown.js
+++ b/react/ui-components/src/atoms/MultiSelectDropdown.js
@@ -484,7 +484,7 @@ const MultiSelectDropdown = ({
                   addSelectAllCheck ? "selectAll" : ""
                 }`}
               >
-                <div className="digit-category-name">{option[optionsKey]}</div>
+                <div className="digit-category-name">{t(option[optionsKey])}</div>
                 {addCategorySelectAllCheck && (
                   <div
                     className="digit-category-selectAll"
diff --git a/react/ui-components/src/atoms/TreeSelect.js b/react/ui-components/src/atoms/TreeSelect.js
index f390e1ece2..60d1015a0d 100644
--- a/react/ui-components/src/atoms/TreeSelect.js
+++ b/react/ui-components/src/atoms/TreeSelect.js
@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { SVG } from "./SVG";
+import { useTranslation } from "react-i18next";
 
 const TreeSelectOption = ({ option, onSelect, isSelected, renderOptions, level = 0,optionsKey }) => {
   const [isExpanded, setExpanded] = useState(false);
+  const { t } = useTranslation();
   const handleToggleDropdown = () => {
     if (option.options) {
       setExpanded(!isExpanded);
@@ -29,7 +31,7 @@ const TreeSelectOption = ({ option, onSelect, isSelected, renderOptions, level =
             )}
           </div>
         )}
-        <div className="digit-option-label">{option[optionsKey]}</div>
+        <div className="digit-option-label">{t(option[optionsKey])}</div>
       </div>
       {isExpanded &&
         option.options &&
@@ -40,6 +42,7 @@ const TreeSelectOption = ({ option, onSelect, isSelected, renderOptions, level =
 };
 const TreeMultiSelect = ({ option, onSelect, isSelected, renderOptions, level = 0, isParentSelected, setParentSelected, optionsKey}) => {
   const [isExpanded, setExpanded] = useState(false);
+  const { t } = useTranslation();
   const handleToggleDropdown = () => {
     if (option.options) {
       setExpanded(!isExpanded);
@@ -155,7 +158,7 @@ const TreeMultiSelect = ({ option, onSelect, isSelected, renderOptions, level =
             <SVG.Check fill={(allChildrenSelected || isSelected(option)) && !isParentSelected ? "#FFFFFF" : "#C84C0E"} />
           )}
         </div>
-        <div className="digit-option-label">{option[optionsKey]}</div>
+        <div className="digit-option-label">{t(option[optionsKey])}</div>
       </div>
       {isExpanded && option.options && option.options.length > 0 && (
         <div className="child-options-container">