diff --git a/src/pages/setting/personality/components/GenericSection.tsx b/src/pages/setting/personality/components/GenericSection.tsx
index 28c1fd7..e018bd6 100644
--- a/src/pages/setting/personality/components/GenericSection.tsx
+++ b/src/pages/setting/personality/components/GenericSection.tsx
@@ -15,10 +15,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
 
     const { activeSection, activeItemIndex, data, setActiveSection, setActiveItemIndex } = usePersonalityStore()
 
-    // Helper function to get numeric height
-    const getNumericHeight = (height?: string) => {
-        return parseInt(height?.replace(/px|em|rem|%/g, '') || "123")
-    }
+
 
     // Helper function to generate border style object based on selected sides
     const generateBorderStyle = (border?: { width?: string; color?: string; style?: string; sides?: string[] }) => {
@@ -38,7 +35,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
         }
 
         // Generate individual border sides
-        const borderStyle: any = {}
+        const borderStyle: Record<string, string> = {}
         sides.forEach(side => {
             borderStyle[`border${side.charAt(0).toUpperCase() + side.slice(1)}`] = `${width} ${style} ${color}`
         })
@@ -125,7 +122,6 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
             {
                 sectionData.columnsCount > 0 ?
                     <td style={{
-                        padding: '10px',
                         ...(() => {
                             const borderStyle = generateBorderStyle(sectionData.border)
                             if (activeSection === sectionKey) {
@@ -149,7 +145,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
                         })(),
                         borderRadius: '24px',
                         cursor: 'pointer',
-                        height: sectionData.height || '123px'
+                        padding: sectionData.padding || '10px'
                     }}>
                         <table width="100%" cellPadding="0" cellSpacing="0" border={0} style={{ tableLayout: 'fixed' }}>
                             <tbody>
@@ -193,7 +189,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
                                                                     <tr>
                                                                         <td
                                                                             width="100%"
-                                                                            height={getNumericHeight(sectionData.height).toString()}
+                                                                            height={parseInt(sectionData.height || '123px')}
                                                                             style={{
                                                                                 padding: '8px',
                                                                                 cursor: 'pointer'
@@ -210,7 +206,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
                                                                             <tr>
                                                                                 <td
                                                                                     width="100%"
-                                                                                    height={getNumericHeight(sectionData.height).toString()}
+                                                                                    height={parseInt(sectionData.height || '123px')}
                                                                                     align={getButtonHorizontalAlign(item.buttons[0])}
                                                                                     valign={getButtonVerticalAlign(item.buttons[0])}
                                                                                     style={{
@@ -231,8 +227,8 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
                                                                                     <td
                                                                                         width="100%"
                                                                                         height={item?.buttons && item.buttons.length > 0 ?
-                                                                                            Math.floor(getNumericHeight(sectionData.height) * 0.6).toString() :
-                                                                                            Math.floor(getNumericHeight(sectionData.height) * 0.8).toString()}
+                                                                                            Math.max(parseInt(sectionData.height || '123px') - 50, 30) :
+                                                                                            Math.max(parseInt(sectionData.height || '123px') - 25, 30)}
                                                                                         align={item?.texts?.[0]?.alignment || 'center'}
                                                                                         valign={item?.texts?.[0]?.verticalAlignment === VerticalAlignment.TOP ? 'top' :
                                                                                             item?.texts?.[0]?.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'middle'}
@@ -264,7 +260,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
                                                                                     <tr>
                                                                                         <td
                                                                                             width="100%"
-                                                                                            height={Math.floor(getNumericHeight(sectionData.height) * 0.2).toString()}
+                                                                                            height="25"
                                                                                             align={getButtonHorizontalAlign(item.buttons[0])}
                                                                                             valign={getButtonVerticalAlign(item.buttons[0])}
                                                                                             style={{
diff --git a/src/pages/setting/personality/components/SettingSideBar.tsx b/src/pages/setting/personality/components/SettingSideBar.tsx
index c2f25c5..1b899f5 100644
--- a/src/pages/setting/personality/components/SettingSideBar.tsx
+++ b/src/pages/setting/personality/components/SettingSideBar.tsx
@@ -14,11 +14,12 @@ import { Trash } from 'iconsax-react';
 
 const SettingSideBar: FC = () => {
     const { t } = useTranslation()
-    const { activeSection, setColumnsCount, updateActiveItem, data, activeItemIndex, removeSection, setSectionHeight, setSectionBorder } = usePersonalityStore()
+    const { activeSection, setColumnsCount, updateActiveItem, data, activeItemIndex, removeSection, setSectionPadding, setSectionHeight, setSectionBorder } = usePersonalityStore()
     const [color, setColor] = useState("#aabbcc");
     const [backgroundSize, setBackgroundSize] = useState<BackgroundSize>(BackgroundSize.COVER)
     const [backgroundPosition, setBackgroundPosition] = useState<BackgroundPosition>(BackgroundPosition.CENTER)
     const [isUploading, setIsUploading] = useState<boolean>(false)
+    const [sectionPadding, setSectionPaddingState] = useState<string>('0px')
     const [sectionHeight, setSectionHeightState] = useState<string>('123px')
     const [borderWidth, setBorderWidth] = useState<string>('0px')
     const [borderColor, setBorderColor] = useState<string>('#E5E7EB')
@@ -62,8 +63,13 @@ const SettingSideBar: FC = () => {
                 setBackgroundPosition(currentPosition)
             }
 
-            // بروزرسانی section height و border
-            setSectionHeightState(currentSection?.height || '123px')
+            // بروزرسانی section padding, height و border
+            setSectionPaddingState(currentSection?.padding || '0px')
+
+            // مقدار پیش‌فرض height بر اساس نوع سکشن
+            const defaultHeight = currentSection?.isContent ? '246px' : '123px'
+            setSectionHeightState(currentSection?.height || defaultHeight)
+
             setBorderWidth(currentSection?.border?.width || '0px')
             setBorderColor(currentSection?.border?.color || '#E5E7EB')
             setBorderStyle(currentSection?.border?.style || 'solid')
@@ -97,6 +103,13 @@ const SettingSideBar: FC = () => {
         updateActiveItem({ backgroundColor: color })
     }
 
+    const handleSectionPaddingChange = (padding: string) => {
+        if (activeSection) {
+            setSectionPaddingState(padding)
+            setSectionPadding(activeSection, padding)
+        }
+    }
+
     const handleSectionHeightChange = (height: string) => {
         if (activeSection) {
             setSectionHeightState(height)
@@ -378,6 +391,17 @@ const SettingSideBar: FC = () => {
                 />
             </div>
 
+            {/* Section Padding Control */}
+            <div className='mt-5'>
+                <Input
+                    label="فاصله داخلی سکشن"
+                    value={sectionPadding}
+                    onChange={(e) => handleSectionPaddingChange(e.target.value)}
+                    placeholder="مثال: 20px"
+                    disabled={isUploading}
+                />
+            </div>
+
             {/* Section Height Control */}
             <div className='mt-5'>
                 <Input
diff --git a/src/pages/setting/personality/store/Store.ts b/src/pages/setting/personality/store/Store.ts
index da74c15..5668759 100644
--- a/src/pages/setting/personality/store/Store.ts
+++ b/src/pages/setting/personality/store/Store.ts
@@ -273,6 +273,17 @@ export const usePersonalityStore = create<PersonalityStore>((set, get) => ({
       };
     }),
 
+  setSectionPadding: (sectionKey: string, padding: string) =>
+    set((state) => ({
+      data: {
+        ...state.data,
+        [sectionKey]: {
+          ...state.data[sectionKey],
+          padding,
+        },
+      },
+    })),
+
   setSectionHeight: (sectionKey: string, height: string) =>
     set((state) => ({
       data: {
diff --git a/src/pages/setting/personality/types/Types.ts b/src/pages/setting/personality/types/Types.ts
index 376f347..7b979d8 100644
--- a/src/pages/setting/personality/types/Types.ts
+++ b/src/pages/setting/personality/types/Types.ts
@@ -103,6 +103,7 @@ export type SectionType = {
   columnsCount: number;
   sortNumber: number;
   items: SectionItemType[];
+  padding?: string;
   height?: string;
   border?: {
     width?: string;
@@ -207,6 +208,7 @@ export type PersonalityStore = {
   updateActiveItem: (updates: Partial<SectionItemType>) => void;
   removeItem: (sectionKey: string, id: string) => void;
   setColumnsCount: (sectionKey: string, columnsCount: number) => void;
+  setSectionPadding: (sectionKey: string, padding: string) => void;
   setSectionHeight: (sectionKey: string, height: string) => void;
   setSectionBorder: (
     sectionKey: string,
diff --git a/src/pages/setting/personality/utils/ExportHTML.ts b/src/pages/setting/personality/utils/ExportHTML.ts
index 3633efd..d4a8b73 100644
--- a/src/pages/setting/personality/utils/ExportHTML.ts
+++ b/src/pages/setting/personality/utils/ExportHTML.ts
@@ -369,7 +369,7 @@ export const exportPersonalityToHTML = async (
 
   // Render section equivalent (HeaderSection, ContentSection, FooterSection)
   const renderSection = (
-    section: SectionType,
+    section: SectionType & { name?: string; isContent?: boolean },
     sectionHeight: string,
     paddingTop = ""
   ) => {
@@ -453,7 +453,7 @@ export const exportPersonalityToHTML = async (
                                   ${renderImages(item?.images || [])}
                                   ${renderSocials(item?.socials || [])}
                                   ${
-                                    sectionHeight === "246px"
+                                    section?.isContent
                                       ? '<div style="margin: 0 0 10px 0; text-align: right; color: #888; font-size: 14px;">{{content}}</div>'
                                       : ""
                                   }
@@ -461,18 +461,19 @@ export const exportPersonalityToHTML = async (
                                 </td>
                               </tr>`;
                               } else {
-                                // ردیف اصلی برای متن و تصاویر
+                                // ردیف اصلی برای متن و تصاویر - محاسبه بر اساس height سکشن
+                                const sectionHeightNumber = parseInt(
+                                  sectionHeight
+                                );
                                 const mainHeight = hasButtons
-                                  ? sectionHeight === "123px"
-                                    ? "60"
-                                    : sectionHeight === "246px"
-                                    ? "203"
-                                    : "40"
-                                  : sectionHeight === "123px"
-                                  ? "87"
-                                  : sectionHeight === "246px"
-                                  ? "230"
-                                  : "67";
+                                  ? Math.max(
+                                      sectionHeightNumber - 50,
+                                      30
+                                    ).toString()
+                                  : Math.max(
+                                      sectionHeightNumber - 25,
+                                      30
+                                    ).toString();
 
                                 result += `<tr>
                               <td width="100%" height="${mainHeight}" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
@@ -480,7 +481,7 @@ export const exportPersonalityToHTML = async (
                                 ${renderImages(item?.images || [])}
                                 ${renderSocials(item?.socials || [])}
                                 ${
-                                  sectionHeight === "246px" &&
+                                  section?.isContent &&
                                   !hasTexts &&
                                   !hasImages &&
                                   !hasSocials
@@ -506,15 +507,22 @@ export const exportPersonalityToHTML = async (
                             } else {
                               // اگر هیچ محتوایی نداریم و content section است
                               console.log(
-                                "🔥 [ExportHTML] Empty content section detected, sectionHeight:",
-                                sectionHeight
+                                "🔥 [ExportHTML] Empty section detected, isContent:",
+                                section?.isContent
                               );
-                              if (sectionHeight === "246px") {
+                              if (section?.isContent) {
                                 console.log(
                                   "🔥 [ExportHTML] Adding {{content}} placeholder to empty content"
                                 );
+                                const sectionHeightNumber = parseInt(
+                                  sectionHeight
+                                );
+                                const emptyHeight = Math.max(
+                                  sectionHeightNumber - 25,
+                                  30
+                                );
                                 result += `<tr>
-                              <td width="100%" height="230" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
+                              <td width="100%" height="${emptyHeight}" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
                                 <div style="margin: 0; text-align: right; color: #888; font-size: 14px;">{{content}}</div>
                               </td>
                             </tr>`;
@@ -548,22 +556,26 @@ export const exportPersonalityToHTML = async (
       </tr>`;
     } else {
       // حالت خالی
-      const emptyMessages = {
-        "123px": "سربرگ ایمیل",
-        "246px": "محتوای ایمیل",
+      const getEmptyMessage = (
+        section: SectionType & { name?: string; isContent?: boolean }
+      ) => {
+        if (section?.isContent) return "محتوای ایمیل";
+        if (section?.name) return section.name;
+        return "سکشن خالی";
       };
-      const emptyMessage =
-        emptyMessages[sectionHeight as keyof typeof emptyMessages] ||
-        "فوتر ایمیل";
+
+      const emptyMessage = getEmptyMessage(section);
+      const sectionHeightNumber = parseInt(sectionHeight);
+      const displayHeight = section?.isContent
+        ? Math.max(sectionHeightNumber + 40, 286)
+        : sectionHeight;
 
       return `<tr>
         ${paddingTop ? `<td style="padding-top: ${paddingTop};">` : "<td>"}
           <table width="100%" cellpadding="0" cellspacing="0" border="0">
             <tbody>
               <tr>
-                <td style="height: ${
-                  sectionHeight === "246px" ? "286px" : sectionHeight
-                }; border-radius: 24px; text-align: right; vertical-align: middle; padding: 0px;">
+                <td style="height: ${displayHeight}; border-radius: 24px; text-align: right; vertical-align: middle; padding: 0px;">
                   <div style="color: #888; font-size: 14px; margin-bottom: 8px;">
                     ${emptyMessage}
                   </div>
@@ -583,7 +595,15 @@ export const exportPersonalityToHTML = async (
   ) => {
     console.log(`🔥 [ExportHTML] Getting height for section: ${sectionKey}`, {
       isContent: sectionData?.isContent,
+      customHeight: sectionData?.height,
     });
+
+    // اگر height سفارشی تعریف شده باشد، از آن استفاده کن
+    if (sectionData?.height) {
+      return sectionData.height;
+    }
+
+    // مقدار پیش‌فرض بر اساس نوع سکشن
     if (sectionKey === "content" || sectionData?.isContent) {
       return "246px";
     }
@@ -619,14 +639,8 @@ export const exportPersonalityToHTML = async (
         isContent: sectionData.isContent,
       });
 
-      // Pass only the section structure (without name and isContent)
-      const sectionStructure = {
-        columnsCount: sectionData.columnsCount,
-        items: sectionData.items || [],
-        sortNumber: sectionData.sortNumber,
-      };
-
-      const renderedSection = renderSection(sectionStructure, height, "");
+      // Pass the complete section data for rendering
+      const renderedSection = renderSection(sectionData, height, "");
       console.log(
         `🔥 [ExportHTML] Section ${sectionKey} rendered, HTML length:`,
         renderedSection.length