diff --git a/frontend/src/Editor/Components/Image.jsx b/frontend/src/Editor/Components/Image.jsx
index e6fbb82186..858a5cc167 100644
--- a/frontend/src/Editor/Components/Image.jsx
+++ b/frontend/src/Editor/Components/Image.jsx
@@ -3,7 +3,7 @@ import LazyLoad from 'react-lazyload';
 
 export const Image = function Image({ height, properties, styles, fireEvent }) {
   const { source } = properties;
-  const { visibility, disabledState, borderType, backgroundColor } = styles;
+  const { visibility, disabledState, borderType, backgroundColor, padding } = styles;
   const widgetVisibility = visibility ?? true;
   const imageRef = useRef(null);
   const [imageOffset, setImageOffset] = useState(0);
@@ -26,7 +26,14 @@ export const Image = function Image({ height, properties, styles, fireEvent }) {
   }
 
   return (
-    <div data-disabled={disabledState} style={{ display: widgetVisibility ? '' : 'none' }} ref={imageRef}>
+    <div
+      data-disabled={disabledState}
+      style={{
+        display: widgetVisibility ? 'flex' : 'none',
+        justifyContent: 'center',
+      }}
+      ref={imageRef}
+    >
       {imageRef.current && (
         <LazyLoad
           offset={imageOffset > 0 ? imageOffset : 0}
@@ -37,7 +44,7 @@ export const Image = function Image({ height, properties, styles, fireEvent }) {
           <img
             src={source}
             className={`${borderType !== 'none' ? borderType : ''}`}
-            style={{ backgroundColor }}
+            style={{ backgroundColor, padding: Number.parseInt(padding) }}
             height={height}
             onClick={() => fireEvent('onClick')}
           />
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index ea45354ddb..09a028fac7 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -798,6 +798,7 @@ export const componentTypes = [
         ],
       },
       backgroundColor: { type: 'color', displayName: 'Background color' },
+      padding: { type: 'code', displayName: 'Padding' },
       visibility: { type: 'code', displayName: 'Visibility' },
       disabledState: { type: 'code', displayName: 'Disable' },
     },
@@ -814,6 +815,7 @@ export const componentTypes = [
       events: [],
       styles: {
         borderType: { value: 'none' },
+        padding: { value: '0' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },