diff --git a/react/ui-components/README.md b/react/ui-components/README.md
index 0459e5ed13..9ee921bf2a 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.19 making CheckBox more customizable and adding custom color for Button
 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
diff --git a/react/ui-components/package.json b/react/ui-components/package.json
index 5297b54f9b..f78098e118 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.18",
+  "version": "0.0.1-beta.19",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
diff --git a/react/ui-components/src/atoms/Button.js b/react/ui-components/src/atoms/Button.js
index 3ea4b4f7ae..56527965cd 100644
--- a/react/ui-components/src/atoms/Button.js
+++ b/react/ui-components/src/atoms/Button.js
@@ -7,11 +7,13 @@ const Button = (props) => {
   //To render the icon
   const IconRender = () => {
     const iconFill =
-      props?.variation === "primary"
-        ? "#FFFFFF"
-        : props?.isDisabled
-        ? "#C5C5C5"
-        : "#C84C0E";
+      props.iconFill? 
+        props.iconFill:
+        props?.variation === "primary"
+          ? "#FFFFFF"
+          : props?.isDisabled
+          ? "#C5C5C5"
+          : "#C84C0E";
     const iconReq = props?.icon;
     let width, height;
 
diff --git a/react/ui-components/src/atoms/CheckBox.js b/react/ui-components/src/atoms/CheckBox.js
index 4dc5a70d54..73a8894a1c 100644
--- a/react/ui-components/src/atoms/CheckBox.js
+++ b/react/ui-components/src/atoms/CheckBox.js
@@ -21,7 +21,7 @@ const CheckBox = ({
 }) => {
   const { t } = useTranslation();
   const userType = pageType || window?.Digit?.SessionStorage.get("userType");
-  let styles = props.styles;
+  let styles = props?.styles;
 
   const sentenceCaseLabel = StringManipulator("TOSENTENCECASE", label);
 
@@ -29,10 +29,10 @@ const CheckBox = ({
     <div
       className={`digit-checkbox-container ${
         !isLabelFirst ? "checkboxFirst" : "labelFirst"
-      } ${disabled ? "disabled" : " "}`}
+      } ${disabled ? "disabled" : " "} ${props?.mainClassName}`}
     >
       {isLabelFirst ? (
-        <p className="label" style={{ maxWidth: "100%", width: "auto" ,marginRight:"0rem"}}>
+        <p className={`label ${props?.labelClassName} `} style={{ maxWidth: "100%", width: "auto" ,marginRight:"0rem"}} onClick={props?.onLabelClick}>
           {customLabelMarkup ? (
             <>
               <span>{t("COMMON_CERTIFY_ONE")}</span>
@@ -47,27 +47,27 @@ const CheckBox = ({
           )}
         </p>
       ) : null}
-      <div style={{ cursor: "pointer", display: "flex", position: "relative" }}>
+      <div style={{ cursor: "pointer", display: "flex", position: "relative" }} className={props?.inputWrapperClassName}>
         <input
           type="checkbox"
-          className={`input ${userType === "employee" ? "input-emp" : ""}`}
+          className={`input ${userType === "employee" ? "input-emp" : ""} ${props?.inputClassName} `}
           onChange={onChange}
           value={value || label}
           {...props}
           ref={inputRef}
           disabled={disabled}
           checked={checked}
-        />
+          />
         <p
           className={`digit-custom-checkbox ${
             userType === "employee" ? "digit-custom-checkbox-emp" : ""
-          }`}
+          } ${props?.inputIconClassname} `}
         >
-          <SVG.Check fill={disabled ? "#C5C5C5" : "#C84C0E"} />
+          <SVG.Check fill={props?.iconFill || (disabled ? "#C5C5C5" : "#C84C0E")} />
         </p>
       </div>
       {!isLabelFirst ? (
-        <p className="label" style={{ maxWidth: "100%", width: "100%",marginRight:"0rem" }}>
+        <p className={`label ${props?.labelClassName} `} style={{ maxWidth: "100%", width: "100%",marginRight:"0rem" }} onClick={props?.onLabelClick}>
           {customLabelMarkup ? (
             <>
               <span>{t("COMMON_CERTIFY_ONE")}</span>