diff --git a/dealplustech-astro/src/pages/products/[slug].astro b/dealplustech-astro/src/pages/products/[slug].astro
index 2701951b4..e5123047a 100644
--- a/dealplustech-astro/src/pages/products/[slug].astro
+++ b/dealplustech-astro/src/pages/products/[slug].astro
@@ -52,19 +52,41 @@ const productTables = productData?.productTables || [];
           </h2>
           <div class="space-y-10">
             {productTables.map((table, tableIndex) => (
-              <div class="bg-white rounded-2xl border-2 border-secondary-200 overflow-hidden shadow-lg">
-                <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-secondary-800 p-5 md:p-6 bg-secondary-50 border-b-2 border-secondary-200">
+              <div class="bg-white rounded-2xl border-2 border-secondary-200 shadow-lg">
+                <h3 class="text-lg md:text-xl lg:text-2xl font-semibold text-secondary-800 p-4 md:p-6 bg-secondary-50 border-b-2 border-secondary-200">
                   {table.tableName}
                 </h3>
-                <div class="overflow-x-auto">
-                  <table class="w-full min-w-[700px]">
-                    <thead>
-                      <tr class="bg-primary-100">
-                        {table.headers.map((header, headerIndex) => (
-                          <th class="px-5 py-4 md:px-6 md:py-5 text-left text-base md:text-lg lg:text-xl font-bold text-primary-800 border-b-2 border-primary-300">
-                            {header}
-                          </th>
+                <div class="w-full overflow-x-auto -mx-2 md:mx-0">
+                  <div class="px-2 md:px-0">
+                    <table class="w-full min-w-[600px] border-collapse">
+                      <thead>
+                        <tr class="bg-primary-100">
+                          {table.headers.map((header, headerIndex) => (
+                            <th class="px-3 py-2 md:px-4 md:py-3 text-left text-xs md:text-sm lg:text-base font-bold text-primary-800 border-b-2 border-primary-300 whitespace-nowrap">
+                              {header}
+                            </th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {table.rows.map((row, rowIndex) => (
+                          <tr class={rowIndex % 2 === 0 ? 'bg-white' : 'bg-secondary-50'}>
+                            {row.map((cell, cellIndex) => (
+                              <td class="px-3 py-2 md:px-4 md:py-3 text-xs md:text-sm lg:text-base text-secondary-700 border-b border-secondary-100 break-words max-w-[200px] md:max-w-none">
+                                {cell}
+                              </td>
+                            ))}
+                          </tr>
                         ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )})}
                       </tr>
                     </thead>
                     <tbody>