diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
index ab3eb40c2c..8ae34a5647 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
@@ -123,6 +123,14 @@ export const buttonGroupConfig = {
         defaultValue: '#007bff',
       },
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
   },
   exposedVariables: {
     selected: [1],
@@ -155,6 +163,7 @@ export const buttonGroupConfig = {
       disabledState: { value: '{{false}}' },
       selectedTextColor: { value: '#FFFFFF' },
       selectedBackgroundColor: { value: '#4368E3' },
+      alignment: { value: 'left' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/image.js b/frontend/src/AppBuilder/WidgetManager/widgets/image.js
index c4bd7b6147..b962c270a5 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/image.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/image.js
@@ -143,6 +143,15 @@ export const imageConfig = {
       },
       accordian: 'Image',
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'center',
+      },
+      accordian: 'Image',
+    },
     backgroundColor: {
       type: 'color',
       displayName: 'Background',
@@ -179,11 +188,11 @@ export const imageConfig = {
     padding: {
       type: 'switch',
       displayName: 'Padding',
-      validation: { schema: { type: 'string' }, defaultValue: 'default' },
       options: [
         { displayName: 'Default', value: 'default' },
         { displayName: 'Custom', value: 'custom' },
       ],
+      validation: { schema: { type: 'string' }, defaultValue: 'default' },
       accordian: 'Container',
       isFxNotRequired: true,
     },
@@ -244,7 +253,6 @@ export const imageConfig = {
       loadingState: { value: '{{false}}' },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
-      visible: { value: '{{true}}' },
     },
     events: [],
     styles: {
@@ -256,6 +264,7 @@ export const imageConfig = {
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
       padding: { value: 'default' },
       customPadding: { value: '{{0}}' },
+      alignment: { value: 'center' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/link.js b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
index 673abb1e75..b4da6d30ee 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/link.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
@@ -159,6 +159,14 @@ export const linkConfig = {
       ],
       accordian: 'container',
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
   },
   exposedVariables: {},
   actions: [
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js b/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js
index 6fabfa889a..116d0e9849 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js
@@ -50,6 +50,14 @@ export const paginationConfig = {
         defaultValue: false,
       },
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
   },
   exposedVariables: {
     totalPages: null,
@@ -73,6 +81,7 @@ export const paginationConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
+      alignment: { value: 'left' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js b/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js
index 315a6e2c28..9780f0cdd6 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js
@@ -32,6 +32,14 @@ export const svgImageConfig = {
         defaultValue: true,
       },
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
   },
   exposedVariables: {
     value: {},
@@ -50,6 +58,7 @@ export const svgImageConfig = {
     events: [],
     styles: {
       visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/tags.js b/frontend/src/AppBuilder/WidgetManager/widgets/tags.js
index 8af289b23a..73cd44b550 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/tags.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/tags.js
@@ -38,6 +38,14 @@ export const tagsConfig = {
         defaultValue: true,
       },
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
   },
   exposedVariables: {},
   definition: {
@@ -54,6 +62,7 @@ export const tagsConfig = {
     events: [],
     styles: {
       visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
     },
   },
 };
diff --git a/frontend/src/Editor/Components/ButtonGroup.jsx b/frontend/src/Editor/Components/ButtonGroup.jsx
index 67618a61ab..3647743e3a 100644
--- a/frontend/src/Editor/Components/ButtonGroup.jsx
+++ b/frontend/src/Editor/Components/ButtonGroup.jsx
@@ -25,6 +25,7 @@ export const ButtonGroup = function Button({
     selectedBackgroundColor,
     selectedTextColor,
     boxShadow,
+    alignment,
   } = styles;
 
   const computedStyles = {
@@ -115,38 +116,53 @@ export const ButtonGroup = function Button({
       fireEvent('onClick');
     }
   };
+
+  const mapAlignment = (alignment) => {
+    switch (alignment) {
+      case 'left':
+        return 'flex-start';
+      case 'right':
+        return 'flex-end';
+      case 'center':
+        return 'center';
+      default:
+        return 'flex-start'; // Default to left alignment if the value is unknown
+    }
+  };
   return (
-    <div className="widget-buttongroup" style={{ height }} data-cy={dataCy}>
-      {label && (
-        <p
-          style={{ display: computedStyles.display }}
-          className={`widget-buttongroup-label ${darkMode && 'text-light'}`}
-        >
-          {label}
-        </p>
-      )}
+    <div className="widget-buttongroup" style={{ height, alignItems: mapAlignment(alignment) }} data-cy={dataCy}>
       <div>
-        {data?.map((item, index) => (
-          <button
-            style={{
-              ...computedStyles,
-              backgroundColor: defaultActive?.includes(values[index]) ? selectedBackgroundColor : backgroundColor,
-              color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
-              transition: 'all .1s ease',
-              boxShadow,
-              ...(disabledState && disabledStyles),
-            }}
-            key={index}
-            disabled={disabledState}
-            className={'group-button overflow-hidden'}
-            onClick={(event) => {
-              event.stopPropagation();
-              buttonClick(index);
-            }}
+        {label && (
+          <p
+            style={{ display: computedStyles.display }}
+            className={`widget-buttongroup-label ${darkMode && 'text-light'}`}
           >
-            {item}
-          </button>
-        ))}
+            {label}
+          </p>
+        )}
+        <div>
+          {data?.map((item, index) => (
+            <button
+              style={{
+                ...computedStyles,
+                backgroundColor: defaultActive?.includes(values[index]) ? selectedBackgroundColor : backgroundColor,
+                color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
+                transition: 'all .1s ease',
+                boxShadow,
+                ...(disabledState && disabledStyles),
+              }}
+              key={index}
+              disabled={disabledState}
+              className={'group-button overflow-hidden'}
+              onClick={(event) => {
+                event.stopPropagation();
+                buttonClick(index);
+              }}
+            >
+              {item}
+            </button>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/Editor/Components/Image/Image.jsx b/frontend/src/Editor/Components/Image/Image.jsx
index 0f3ea0e2b0..6df6bd047e 100644
--- a/frontend/src/Editor/Components/Image/Image.jsx
+++ b/frontend/src/Editor/Components/Image/Image.jsx
@@ -23,8 +23,17 @@ export const Image = function Image({
 }) {
   const { imageFormat, source, jsSchema, alternativeText, zoomButtons, rotateButton, loadingState, disabledState } =
     properties;
-  const { imageFit, imageShape, backgroundColor, padding, customPadding, boxShadow, borderRadius, borderColor } =
-    styles;
+  const {
+    imageFit,
+    imageShape,
+    backgroundColor,
+    padding,
+    customPadding,
+    boxShadow,
+    borderRadius,
+    borderColor,
+    alignment,
+  } = styles;
 
   const isInitialRender = useRef(true);
 
@@ -168,6 +177,7 @@ export const Image = function Image({
         border: '1px solid',
         borderRadius: imageShape === 'circle' ? '50%' : `${borderRadius}px`,
         borderColor: borderColor ? borderColor : 'transparent',
+        objectPosition: alignment,
       }}
       height={height}
       onClick={() => fireEvent('onClick')}
diff --git a/frontend/src/Editor/Components/Pagination.jsx b/frontend/src/Editor/Components/Pagination.jsx
index c7fe5f2993..b2b052def9 100644
--- a/frontend/src/Editor/Components/Pagination.jsx
+++ b/frontend/src/Editor/Components/Pagination.jsx
@@ -12,7 +12,7 @@ export const Pagination = ({
   width,
 }) => {
   const isInitialRender = useRef(true);
-  const { visibility, disabledState, boxShadow } = styles;
+  const { visibility, disabledState, boxShadow, alignment } = styles;
   const [currentPage, setCurrentPage] = useState(() => properties?.defaultPageIndex ?? 1);
 
   const pageChanged = (number) => {
@@ -65,7 +65,12 @@ export const Pagination = ({
   };
 
   return (
-    <div data-disabled={disabledState} className="d-flex align-items-center" data-cy={dataCy} style={{ boxShadow }}>
+    <div
+      data-disabled={disabledState}
+      className="d-flex align-items-center"
+      data-cy={dataCy}
+      style={{ boxShadow, justifyContent: alignment }}
+    >
       <ul className="pagination m-0" style={computedStyles}>
         <Pagination.Operator
           operator="<<"
diff --git a/frontend/src/Editor/Components/SvgImage.jsx b/frontend/src/Editor/Components/SvgImage.jsx
index 2c3b2991a4..fdc0981b26 100644
--- a/frontend/src/Editor/Components/SvgImage.jsx
+++ b/frontend/src/Editor/Components/SvgImage.jsx
@@ -2,11 +2,14 @@ import React from 'react';
 import DOMPurify from 'dompurify';
 
 export const SvgImage = function Timeline({ properties, styles, height, dataCy }) {
-  const { visibility, boxShadow } = styles;
+  const { visibility, boxShadow, alignment } = styles;
   const { data } = properties;
   return (
     <div style={{ display: visibility ? '' : 'none', overflow: 'hidden', height: height, boxShadow }} data-cy={dataCy}>
-      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }}></div>
+      <div
+        style={{ display: 'flex', justifyContent: alignment }}
+        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }}
+      ></div>
     </div>
   );
 };
diff --git a/frontend/src/Editor/Components/Tags.jsx b/frontend/src/Editor/Components/Tags.jsx
index a4d282ca14..c11966106e 100644
--- a/frontend/src/Editor/Components/Tags.jsx
+++ b/frontend/src/Editor/Components/Tags.jsx
@@ -2,14 +2,15 @@ import React from 'react';
 
 export const Tags = function Tags({ width, height, properties, styles, dataCy }) {
   const { data } = properties;
-  const { visibility, boxShadow } = styles;
+  const { visibility, boxShadow, alignment } = styles;
 
   const computedStyles = {
     width,
     height,
-    display: visibility ? '' : 'none',
+    display: visibility ? 'flex' : 'none',
     overflowY: 'auto',
     boxShadow,
+    justifyContent: alignment,
   };
 
   function renderTag(item, index) {
diff --git a/frontend/src/Editor/WidgetManager/configs/image.js b/frontend/src/Editor/WidgetManager/configs/image.js
index 453d9b4ed6..b962c270a5 100644
--- a/frontend/src/Editor/WidgetManager/configs/image.js
+++ b/frontend/src/Editor/WidgetManager/configs/image.js
@@ -143,6 +143,15 @@ export const imageConfig = {
       },
       accordian: 'Image',
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'center',
+      },
+      accordian: 'Image',
+    },
     backgroundColor: {
       type: 'color',
       displayName: 'Background',
@@ -255,6 +264,7 @@ export const imageConfig = {
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
       padding: { value: 'default' },
       customPadding: { value: '{{0}}' },
+      alignment: { value: 'center' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/buttonGroup.js b/server/src/modules/apps/services/widget-config/buttonGroup.js
index 4523a98bb7..0b16f8b683 100644
--- a/server/src/modules/apps/services/widget-config/buttonGroup.js
+++ b/server/src/modules/apps/services/widget-config/buttonGroup.js
@@ -123,6 +123,14 @@ export const buttonGroupConfig = {
         defaultValue: '#007bff',
       },
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
   },
   exposedVariables: {
     selected: [1],
@@ -156,6 +164,7 @@ export const buttonGroupConfig = {
       disabledState: { value: '{{false}}' },
       selectedTextColor: { value: '#FFFFFF' },
       selectedBackgroundColor: { value: '#4368E3' },
+      alignment: { value: 'left' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/image.js b/server/src/modules/apps/services/widget-config/image.js
index c4bd7b6147..b962c270a5 100644
--- a/server/src/modules/apps/services/widget-config/image.js
+++ b/server/src/modules/apps/services/widget-config/image.js
@@ -143,6 +143,15 @@ export const imageConfig = {
       },
       accordian: 'Image',
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'center',
+      },
+      accordian: 'Image',
+    },
     backgroundColor: {
       type: 'color',
       displayName: 'Background',
@@ -179,11 +188,11 @@ export const imageConfig = {
     padding: {
       type: 'switch',
       displayName: 'Padding',
-      validation: { schema: { type: 'string' }, defaultValue: 'default' },
       options: [
         { displayName: 'Default', value: 'default' },
         { displayName: 'Custom', value: 'custom' },
       ],
+      validation: { schema: { type: 'string' }, defaultValue: 'default' },
       accordian: 'Container',
       isFxNotRequired: true,
     },
@@ -244,7 +253,6 @@ export const imageConfig = {
       loadingState: { value: '{{false}}' },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
-      visible: { value: '{{true}}' },
     },
     events: [],
     styles: {
@@ -256,6 +264,7 @@ export const imageConfig = {
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
       padding: { value: 'default' },
       customPadding: { value: '{{0}}' },
+      alignment: { value: 'center' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/link.js b/server/src/modules/apps/services/widget-config/link.js
index 673abb1e75..b4da6d30ee 100644
--- a/server/src/modules/apps/services/widget-config/link.js
+++ b/server/src/modules/apps/services/widget-config/link.js
@@ -159,6 +159,14 @@ export const linkConfig = {
       ],
       accordian: 'container',
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
   },
   exposedVariables: {},
   actions: [
diff --git a/server/src/modules/apps/services/widget-config/pagination.js b/server/src/modules/apps/services/widget-config/pagination.js
index 6fabfa889a..116d0e9849 100644
--- a/server/src/modules/apps/services/widget-config/pagination.js
+++ b/server/src/modules/apps/services/widget-config/pagination.js
@@ -50,6 +50,14 @@ export const paginationConfig = {
         defaultValue: false,
       },
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
   },
   exposedVariables: {
     totalPages: null,
@@ -73,6 +81,7 @@ export const paginationConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
+      alignment: { value: 'left' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/svgImage.js b/server/src/modules/apps/services/widget-config/svgImage.js
index 315a6e2c28..9780f0cdd6 100644
--- a/server/src/modules/apps/services/widget-config/svgImage.js
+++ b/server/src/modules/apps/services/widget-config/svgImage.js
@@ -32,6 +32,14 @@ export const svgImageConfig = {
         defaultValue: true,
       },
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
   },
   exposedVariables: {
     value: {},
@@ -50,6 +58,7 @@ export const svgImageConfig = {
     events: [],
     styles: {
       visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/tags.js b/server/src/modules/apps/services/widget-config/tags.js
index 8af289b23a..73cd44b550 100644
--- a/server/src/modules/apps/services/widget-config/tags.js
+++ b/server/src/modules/apps/services/widget-config/tags.js
@@ -38,6 +38,14 @@ export const tagsConfig = {
         defaultValue: true,
       },
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
   },
   exposedVariables: {},
   definition: {
@@ -54,6 +62,7 @@ export const tagsConfig = {
     events: [],
     styles: {
       visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
     },
   },
 };