diff --git a/frontend/src/Editor/Components/DropDown.jsx b/frontend/src/Editor/Components/DropDown.jsx
index aa9a005a20..1b7c18736c 100644
--- a/frontend/src/Editor/Components/DropDown.jsx
+++ b/frontend/src/Editor/Components/DropDown.jsx
@@ -14,7 +14,7 @@ export const DropDown = function DropDown({
   component,
 }) {
   let { label, value, display_values, values } = properties;
-  const { selectedTextColor, borderRadius, visibility, disabledState } = styles;
+  const { selectedTextColor, borderRadius, visibility, disabledState, justifyContent } = styles;
   const [currentValue, setCurrentValue] = useState(() => value);
 
   if (!_.isArray(values)) {
@@ -81,6 +81,7 @@ export const DropDown = function DropDown({
       ...provided,
       height: height,
       padding: '0 6px',
+      justifyContent,
     }),
 
     singleValue: (provided, _state) => ({
@@ -117,6 +118,7 @@ export const DropDown = function DropDown({
           };
       return {
         ...provided,
+        justifyContent,
         height: 'auto',
         display: 'flex',
         flexDirection: 'rows',
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 245a6b1907..9de8819703 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -900,6 +900,7 @@ export const componentTypes = [
       visibility: { type: 'toggle', displayName: 'Visibility' },
       selectedTextColor: { type: 'color', displayName: 'Selected Text Color' },
       disabledState: { type: 'toggle', displayName: 'Disable' },
+      justifyContent: { type: 'alignButtons', displayName: 'Align Text' },
     },
     exposedVariables: {
       value: null,