diff --git a/forms-flow-components/src/components/CustomComponents/BuildModal.tsx b/forms-flow-components/src/components/CustomComponents/BuildModal.tsx
index 95314fc6..bccced82 100644
--- a/forms-flow-components/src/components/CustomComponents/BuildModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/BuildModal.tsx
@@ -58,6 +58,7 @@ export const BuildModal: React.FC<BuildModalProps> = React.memo(
         aria-labelledby="build-modal-title"
         aria-describedby="build-modal-message"
         dialogClassName="build-modal"
+        size="sm"
       >
         <Modal.Header>
           <Modal.Title id="build-modal-title">
diff --git a/forms-flow-components/src/components/CustomComponents/Pills.tsx b/forms-flow-components/src/components/CustomComponents/Pills.tsx
index 0b5026ca..e32f257d 100644
--- a/forms-flow-components/src/components/CustomComponents/Pills.tsx
+++ b/forms-flow-components/src/components/CustomComponents/Pills.tsx
@@ -4,11 +4,12 @@ import {  DeleteIcon } from "../SvgIcons/index";
 
 interface CustomPillProps {
   label: string;
-  icon?: boolean;
+  secondaryLabel: string;
+  icon?: React.ReactNode;
   bg: string;
   dataTestid?: string;
   ariaLabel?: string;
-  onClick?: () => void;
+  onClick?: () => void; 
 }
 
 export const CustomPill: React.FC<CustomPillProps> = ({
@@ -17,12 +18,20 @@ export const CustomPill: React.FC<CustomPillProps> = ({
   bg,
   dataTestid = "",
   ariaLabel = "",
+  secondaryLabel="",
   onClick,
 }) => {
   return (
     <div>
       <Badge pill variant={bg} data-testid={dataTestid} aria-label={ariaLabel}>
-        {label} {icon && <DeleteIcon color="#253DF4" onClick={onClick} />}
+        <span className="primary-label">{label}</span> 
+        { secondaryLabel && (<span className="secondary-label" >{secondaryLabel}</span>)}
+        {icon && 
+        <button 
+        className="button-as-div"
+        aria-label="click icon" 
+        data-testid="click-icon"
+        onClick={onClick}>{icon}</button>}
       </Badge>{" "}
     </div>
   );
diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss
index 87bd36f4..8aad7488 100644
--- a/forms-flow-theme/scss/_forms.scss
+++ b/forms-flow-theme/scss/_forms.scss
@@ -340,14 +340,17 @@ select option:hover {
   display: inline-flex !important;
   padding-block: var(--spacer-050) !important;
   padding-inline: var(--spacer-100) !important;
-  color: var(--ff-black) !important;
+  color: var(--ff-gray-800) !important;
   gap: var(--spacer-050) !important;
-  border-radius: var(--ff-border-radius-xl) !important;
   background-color: var(--ff-base-100) !important;
   border: none !important;
   align-items: center !important;
   font-size: var(--font-size-sm) !important;
   font-weight: var(--ff-badge-font-md) !important;
+  border-radius: var(--radius-0150) !important;
+  .secondary-label{
+    color: var(--ff-gray-500);
+  }
 }
 
 /* ------------------------- Tabs Style ------------------------ */
diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss
index 431b3e91..2d411c4c 100644
--- a/forms-flow-theme/scss/_modal.scss
+++ b/forms-flow-theme/scss/_modal.scss
@@ -558,8 +558,12 @@
  align-self: stretch;
 }
 .build-modal{
-  width: 60.318% !important;
-  max-width: 60.318% !important;
+  .modal-body{
+    padding: 0px !important;
+  }
+  .modal-content{
+    overflow: hidden;
+  }
   .modal-header{
     border-bottom: 1px solid var(--ff-gray-000);
   }
@@ -574,6 +578,7 @@
   }
   .content-body{
     @extend .content-style;
+    text-align: left;
     color: var(--ff-gray-800);
     font-weight: var(--font-weight-sm);
   }
@@ -581,9 +586,10 @@
     display: flex;
     flex-direction: column;
     border-right: 1px solid var(--ff-gray-000) !important;
+    padding-left: var(--spacer-250) !important;
     padding: var(--spacer-200);
     cursor: pointer;
     background: none;
     border: none;
-  }
+  }     
 }