diff --git a/ipi-survey-platform/src/components/common/Table.jsx b/ipi-survey-platform/src/components/common/Table.jsx
index 4ffeb93..a668498 100644
--- a/ipi-survey-platform/src/components/common/Table.jsx
+++ b/ipi-survey-platform/src/components/common/Table.jsx
@@ -135,16 +135,16 @@ const Table = ({
     'h-9 px-2 text-sm text-[#232528] disabled:text-[#C3C6CB] disabled:cursor-not-allowed transition-colors flex items-center gap-2 hover:text-[#92722A]';
 
   return (
-    <div className={`overflow-hidden rounded-lg bg-white ${className}`}>
+    <div className={`rounded-lg bg-white ${className}`}>
       {beforeHeader}
-      <div
-        className={`${disableHorizontalScroll ? 'overflow-x-hidden' : 'overflow-x-auto'} px-6 pt-2 pb-6`}
-        style={disableHorizontalScroll ? undefined : { scrollbarWidth: 'thin' }}
+      <div 
+        className="w-full overflow-x-auto px-6 pt-2 pb-6"
+        style={{ scrollbarWidth: 'thin' }}
       >
         <table
-          className={`min-w-[720px] w-full table-fixed rounded-2xl px-4 py-4${
-            separated ? `border-separate ${rowGapClass}` : 'divide-y'
-          } border border-[#C3C6CB]  rounded-2xl divide-[#C3C6CB]`}
+          className={`min-w-full w-auto table-fixed${
+            separated ? ` border-separate ${rowGapClass}` : ' divide-y divide-[#C3C6CB]'
+          } border border-[#C3C6CB] rounded-2xl`}
         >
           <thead className={headerClassName || 'bg-[#F2ECCF] rounded-2xl'}>
             <tr>
diff --git a/ipi-survey-platform/src/pages/History/History.jsx b/ipi-survey-platform/src/pages/History/History.jsx
index 60c3a86..8239e7a 100644
--- a/ipi-survey-platform/src/pages/History/History.jsx
+++ b/ipi-survey-platform/src/pages/History/History.jsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Table from '@/components/common/Table';
 import HeaderBar from '@/components/layout/HeaderBar';
 import { fetchSubmissionHistory } from '@/services/submissions/submissionService.js';
+import { fetchProducts } from '@/services/masters/masterService';
 
 const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
 const BreadcrumbVector = '/assets/images/Breadcrumb-vector.svg';
@@ -31,6 +32,9 @@ const History = () => {
   const [statusFilter, setStatusFilter] = React.useState('all');
   const [yearFilter, setYearFilter] = React.useState('');
   const [quarterFilter, setQuarterFilter] = React.useState('');
+  const [hscodeFilter, setHscodeFilter] = React.useState('');
+  const [hscodeOptions, setHscodeOptions] = React.useState([]);
+  const [isLoadingHscodes, setIsLoadingHscodes] = React.useState(false);
   const [pagination, setPagination] = React.useState({
     currentPage: 1,
     pageSize: 10,
@@ -38,6 +42,23 @@ const History = () => {
   });
   const navigate = useNavigate();
 
+  // Fetch HS Code options on component mount
+  React.useEffect(() => {
+    const loadHscodeOptions = async () => {
+      setIsLoadingHscodes(true);
+      try {
+        const products = await fetchProducts();
+        setHscodeOptions(products);
+      } catch (error) {
+        console.error('Failed to load HS Codes:', error);
+      } finally {
+        setIsLoadingHscodes(false);
+      }
+    };
+
+    loadHscodeOptions();
+  }, []);
+
   const toVariant = React.useCallback((status) => {
     const text = String(status || '').toLowerCase();
     if (text === 'approved') return 'approved';
@@ -108,14 +129,14 @@ const History = () => {
   }, []);
 
   const headers = [
-    { name: 'Submission Date & Time', className: 'text-left whitespace-nowrap w-[140px]' },
+    { name: 'Submission Date & Time', className: 'text-left whitespace-nowrap w-[200px]' },
     { name: 'Year', className: 'text-left w-[60px]' },
     { name: 'Quarter', className: 'text-left w-[70px]' },
-    { name: 'HS Code', className: 'text-left w-[80px]' },
+    { name: 'HS Code', className: 'text-left w-[110px]' },
     { name: 'Product', className: 'text-left w-[120px]' },
     { name: 'Status', className: 'text-center w-[100px]' },
     { name: 'Actors', className: 'text-left w-[150px]' },
-    { name: 'Details', className: 'text-left flex-1 min-w-[200px]' }
+    { name: 'Details', className: 'text-left flex-1 min-w-[260px]' }
   ];
 
   const statusOptions = React.useMemo(
@@ -134,11 +155,17 @@ const History = () => {
     navigate('/survey', { state: { submission, initialStep: 3 } });
   }, [navigate]);
 
-  // Get unique years from the data
+  // Years from 2015 to 2030 in descending order
   const yearOptions = React.useMemo(() => {
-    const years = [...new Set(rows.map(entry => entry.year).filter(Boolean))].sort((a, b) => b - a);
+    const currentYear = new Date().getFullYear();
+    const startYear = 2015;
+    const endYear = 2030;
+    const years = [];
+    for (let year = endYear; year >= startYear; year--) {
+      years.push(year);
+    }
     return years;
-  }, [rows]);
+  }, []);
 
   const quarterOptions = [
     { label: 'Quarter', value: '' },
@@ -399,7 +426,7 @@ const History = () => {
                   onChange={(e) => setYearFilter(e.target.value)}
                   className="h-10 w-32 rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none"
                 >
-                  <option value="">Select Year</option>
+                  <option value="">Year</option>
                   {yearOptions.map(year => (
                     <option key={year} value={year}>{year}</option>
                   ))}
@@ -426,33 +453,32 @@ const History = () => {
               </div>
               <div className="relative">
                 <select 
-                  className="h-10 w-32 rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none"
+                  value={hscodeFilter}
+                  onChange={(e) => setHscodeFilter(e.target.value)}
+                  disabled={isLoadingHscodes}
+                  className={`h-[40px] w-[170px] rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none ${isLoadingHscodes ? 'opacity-70' : ''}`}
                 >
-                  <option value="">Select HS Code</option>
-                  <option value="code1">HS Code 1</option>
-                  <option value="code2">HS Code 2</option>
+                  <option value="">HS Code/Product</option>
+                  {hscodeOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
                 </select>
-                <svg className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#6B7280]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                {isLoadingHscodes ? (
+                  <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 border-2 border-t-[#6B7280] border-r-transparent border-b-transparent border-l-transparent rounded-full animate-spin"></div>
+                ) : (
+                  <svg className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#6B7280]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                )}
               </div>
               <div className="relative">
                 <select 
                   className="h-10 w-32 rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none"
                   disabled
                 >
-                  <option value="">Select Product</option>
-                </select>
-                <svg className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#6B7280]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
-              </div>
-              <div className="relative">
-                <select 
-                  className="h-10 w-32 rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none"
-                  disabled
-                >
-                  <option value="">Select Actor</option>
+                  <option value="">Actor</option>
                 </select>
                 <svg className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#6B7280]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                   <polyline points="6 9 12 15 18 9" />
@@ -462,7 +488,7 @@ const History = () => {
                 <select 
                   className="h-10 w-32 rounded-md border border-[#E2E8F0] bg-white pl-3 pr-8 text-sm text-[#232528] focus:outline-none cursor-pointer appearance-none"
                 >
-                  <option value="">Select Status</option>
+                  <option value="">Status</option>
                   <option value="approved">Approved</option>
                   <option value="pending">Pending</option>
                   <option value="rejected">Rejected</option>