diff --git a/app/client/src/components/designSystems/appsmith/MultiSelectComponent/index.styled.tsx b/app/client/src/components/designSystems/appsmith/MultiSelectComponent/index.styled.tsx
index d50e828c0ac9..de288b419fe7 100644
--- a/app/client/src/components/designSystems/appsmith/MultiSelectComponent/index.styled.tsx
+++ b/app/client/src/components/designSystems/appsmith/MultiSelectComponent/index.styled.tsx
@@ -379,6 +379,7 @@ export const MultiSelectContainer = styled.div`
       height: 100%;
       display: flex;
       align-items: center;
+      fill: ${Colors.SLATE_GRAY};
     }
     .rc-select-arrow-icon {
       &::after {
diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 5b7085811692..daa2d5d6faa2 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -32,7 +32,7 @@ const FUSE_OPTIONS = {
 };
 
 const SingleDropDown = Select.ofType<DropdownOption>();
-const StyledSingleDropDown = styled(SingleDropDown)`
+const StyledSingleDropDown = styled(SingleDropDown)<{ isSelected: boolean }>`
   div {
     flex: 1 1 auto;
   }
@@ -60,6 +60,8 @@ const StyledSingleDropDown = styled(SingleDropDown)`
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
+    color: ${(props) =>
+      props.isSelected ? Colors.SELECT_COLOR : Colors.SELECT_PLACEHOLDER};
   }
   && {
     .${Classes.ICON} {
@@ -171,6 +173,11 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
             className={this.props.isLoading ? Classes.SKELETON : ""}
             disabled={this.props.disabled}
             filterable={this.props.isFilterable}
+            isSelected={
+              !_.isEmpty(this.props.options) &&
+              this.props.selectedIndex !== undefined &&
+              this.props.selectedIndex > -1
+            }
             itemListPredicate={
               !this.props.serverSideFiltering
                 ? this.itemListPredicate
@@ -202,7 +209,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
                 this.props.selectedIndex !== undefined &&
                 this.props.selectedIndex > -1
                   ? this.props.options[this.props.selectedIndex].label
-                  : "-- Select --"
+                  : this.props.placeholder || "-- Select --"
               }
             />
           </StyledSingleDropDown>
diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx
index 024376d43f6e..ae51fbf24e7a 100644
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@@ -118,5 +118,7 @@ export const Colors = {
   BOX_SHADOW_DEFAULT_VARIANT4: "rgba(0, 0, 0, 0.25)",
   BOX_SHADOW_DEFAULT_VARIANT5: "rgba(0, 0, 0, 0.25)",
   SELECT_DISABLED: "#ced9e080",
+  SELECT_PLACEHOLDER: "#bfbfbf",
+  SELECT_COLOR: "#182026",
 };
 export type Color = typeof Colors[keyof typeof Colors];
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index 92170e671969..ef1b56e63f76 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -95,6 +95,15 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
             },
             dependencies: ["selectionType"],
           },
+          {
+            propertyName: "placeholderText",
+            label: "Placeholder",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter placeholder text",
+            isBindProperty: true,
+            isTriggerProperty: false,
+            validation: { type: ValidationTypes.TEXT },
+          },
           {
             propertyName: "isFilterable",
             label: "Filterable",