diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/MatchColumnsStep.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/MatchColumnsStep.tsx
index 7108c93..cef1002 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/MatchColumnsStep.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/MatchColumnsStep.tsx
@@ -1,8 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from "react"
-import { UserTableColumn } from "./components/UserTableColumn"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 import { useRsi } from "../../hooks/useRsi"
-import { TemplateColumn } from "./components/TemplateColumn"
-import { ColumnGrid } from "./components/ColumnGrid"
 import { setColumn } from "./utils/setColumn"
 import { setIgnoreColumn } from "./utils/setIgnoreColumn"
 import { setSubColumn } from "./utils/setSubColumn"
@@ -11,20 +8,7 @@ import type { Field, RawData, Fields } from "../../types"
 import { getMatchedColumns } from "./utils/getMatchedColumns"
 import { findUnmatchedRequiredFields } from "./utils/findUnmatchedRequiredFields"
 import { toast } from "sonner"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-} from "@/components/ui/alert-dialog"
 import { DeepReadonly as TsDeepReadonly } from "ts-essentials"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import {
   Select,
   SelectContent,
@@ -35,13 +19,13 @@ import {
 import { useQuery } from "@tanstack/react-query"
 import config from "@/config"
 import { Button } from "@/components/ui/button"
-import { CheckCircle2, AlertCircle, HelpCircle } from "lucide-react"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { CheckCircle2, AlertCircle, InfoIcon, EyeIcon, EyeOffIcon, ArrowRightIcon, XIcon, FileIcon, LinkIcon } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Separator } from "@/components/ui/separator"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 
 export type MatchColumnsProps<T extends string> = {
   data: RawData[]
@@ -126,7 +110,7 @@ export const MatchColumnsStep = <T extends string>({
   onBack,
   initialGlobalSelections
 }: MatchColumnsProps<T>) => {
-  const dataExample = data.slice(0, 2)
+  const dataExample = useMemo(() => data.slice(0, 3), [data]) // Show 3 sample rows
   const { fields, autoMapHeaders, autoMapSelectValues, autoMapDistance, translations } = useRsi<T>()
   const [isLoading, setIsLoading] = useState(false)
   const [columns, setColumns] = useState<Columns<T>>(
@@ -134,6 +118,26 @@ export const MatchColumnsStep = <T extends string>({
     ([...headerValues] as string[]).map((value, index) => ({ type: ColumnType.empty, index, header: value ?? "" })),
   )
   const [globalSelections, setGlobalSelections] = useState<GlobalSelections>(initialGlobalSelections || {})
+  const [showAllColumns, setShowAllColumns] = useState(false)
+  const [expandedValueMappings, setExpandedValueMappings] = useState<number[]>([])
+
+  // Toggle the expanded state for value mappings
+  const toggleValueMapping = (columnIndex: number) => {
+    setExpandedValueMappings(prev => 
+      prev.includes(columnIndex) 
+        ? prev.filter(idx => idx !== columnIndex)
+        : [...prev, columnIndex]
+    );
+  };
+
+  // Check if column is expandable (has value mappings)
+  const isExpandable = useCallback((column: Column<T>) => {
+    return (
+      column.type === ColumnType.matchedSelect ||
+      column.type === ColumnType.matchedSelectOptions ||
+      column.type === ColumnType.matchedMultiSelect
+    );
+  }, []);
 
   // Initialize with any provided global selections
   useEffect(() => {
@@ -182,6 +186,290 @@ export const MatchColumnsStep = <T extends string>({
     enabled: !!globalSelections.line,
   });
 
+  // Find mapped column for a specific field
+  const findMappedColumnForField = useCallback((fieldKey: string) => {
+    return columns.find(col => {
+      // Check if it's a matched column with value property
+      return "value" in col && col.value === fieldKey && 
+        (col.type === ColumnType.matched || 
+         col.type === ColumnType.matchedCheckbox || 
+         col.type === ColumnType.matchedSelect || 
+         col.type === ColumnType.matchedSelectOptions || 
+         col.type === ColumnType.matchedMultiInput ||
+         col.type === ColumnType.matchedMultiSelect);
+    });
+  }, [columns]);
+
+  // Get the first value from the sample data for a column
+  const getFirstValueFromColumn = useCallback((column: Column<T>) => {
+    if (!data.length || !data[0]) return null;
+    return data[0][column.index];
+  }, [data]);
+
+  // Get mapped company value (if company is mapped to a column)
+  const mappedCompanyColumn = useMemo(() => findMappedColumnForField('company'), [findMappedColumnForField]);
+  const mappedCompanyValue = useMemo(() => {
+    // If using global selection, return that
+    if (globalSelections.company) return globalSelections.company;
+
+    // If company is mapped to a column, get the first value
+    if (mappedCompanyColumn && "matchedOptions" in mappedCompanyColumn) {
+      const firstEntry = data[0]?.[mappedCompanyColumn.index];
+      // Find the mapped value for this entry
+      const mappedOption = mappedCompanyColumn.matchedOptions.find(opt => opt.entry === firstEntry);
+      return mappedOption?.value as string || null;
+    }
+    
+    return null;
+  }, [globalSelections.company, mappedCompanyColumn, data]);
+
+  // Get mapped line value (if line is mapped to a column)
+  const mappedLineColumn = useMemo(() => findMappedColumnForField('line'), [findMappedColumnForField]);
+  const mappedLineValue = useMemo(() => {
+    // If using global selection, return that
+    if (globalSelections.line) return globalSelections.line;
+
+    // If line is mapped to a column, get the first value
+    if (mappedLineColumn && "matchedOptions" in mappedLineColumn) {
+      const firstEntry = data[0]?.[mappedLineColumn.index];
+      // Find the mapped value for this entry
+      const mappedOption = mappedLineColumn.matchedOptions.find(opt => opt.entry === firstEntry);
+      return mappedOption?.value as string || null;
+    }
+    
+    return null;
+  }, [globalSelections.line, mappedLineColumn, data]);
+
+  // Fetch product lines for mapped company
+  const { data: mappedProductLines } = useQuery({
+    queryKey: ["product-lines-mapped", mappedCompanyValue],
+    queryFn: async () => {
+      if (!mappedCompanyValue) return [];
+      const response = await fetch(`${config.apiUrl}/import/product-lines/${mappedCompanyValue}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch product lines for mapped company");
+      }
+      return response.json();
+    },
+    enabled: !!mappedCompanyValue && mappedCompanyValue !== globalSelections.company,
+  });
+
+  // Fetch sublines for mapped line
+  const { data: mappedSublines } = useQuery({
+    queryKey: ["sublines-mapped", mappedLineValue],
+    queryFn: async () => {
+      if (!mappedLineValue) return [];
+      const response = await fetch(`${config.apiUrl}/import/sublines/${mappedLineValue}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch sublines for mapped line");
+      }
+      return response.json();
+    },
+    enabled: !!mappedLineValue && mappedLineValue !== globalSelections.line,
+  });
+
+  // Check if a field is covered by global selections
+  const isFieldCoveredByGlobalSelections = useCallback((key: string) => {
+    const isCovered = (key === 'supplier' && globalSelections.supplier) ||
+                     (key === 'company' && globalSelections.company) ||
+                     (key === 'line' && globalSelections.line) ||
+                     (key === 'subline' && globalSelections.subline);
+    console.log(`Field ${key} covered by global selections:`, isCovered);
+    return isCovered;
+  }, [globalSelections]);
+
+  // Get possible mapping values for a field
+  const getFieldOptions = useCallback((fieldKey: string) => {
+    const fieldsArray = Array.isArray(fields) ? fields : [fields];
+    const field = fieldsArray.find(f => f.key === fieldKey);
+    
+    if (!field) {
+      console.log(`Field ${fieldKey} not found`);
+      return [];
+    }
+    
+    // Handle special hierarchical fields
+    if (fieldKey === 'line') {
+      // For line, return the appropriate product lines based on the company
+      if (globalSelections.company) {
+        console.log(`Using product lines for global company:`, productLines);
+        return productLines || [];
+      } else if (mappedCompanyValue) {
+        console.log(`Using product lines for mapped company:`, mappedProductLines);
+        return mappedProductLines || [];
+      }
+    } else if (fieldKey === 'subline') {
+      // For subline, return the appropriate sublines based on the line
+      if (globalSelections.line) {
+        console.log(`Using sublines for global line:`, sublines);
+        return sublines || [];
+      } else if (mappedLineValue) {
+        console.log(`Using sublines for mapped line:`, mappedSublines);
+        return mappedSublines || [];
+      }
+    }
+    
+    // For other fields, check in both places - directly on the field or in fieldType.options
+    let options = field.options || [];
+    
+    // If no options at the root level, check in fieldType
+    if ((!options || options.length === 0) && field.fieldType && field.fieldType.options) {
+      options = field.fieldType.options;
+      console.log(`Found options in fieldType for ${fieldKey}:`, options);
+    } else {
+      console.log(`Using options from root level for ${fieldKey}:`, options);
+    }
+    
+    if (!options || options.length === 0) {
+      console.log(`No options found for field ${fieldKey}`, field);
+    }
+    
+    return options || [];
+  }, [
+    fields, 
+    globalSelections.company, 
+    globalSelections.line, 
+    productLines, 
+    sublines, 
+    mappedCompanyValue, 
+    mappedLineValue, 
+    mappedProductLines, 
+    mappedSublines
+  ]);
+
+  // Check if a column has unmapped values (for select fields)
+  const hasUnmappedValues = useCallback((column: Column<T>) => {
+    if (!isExpandable(column) || !("matchedOptions" in column) || !("value" in column)) {
+      return false;
+    }
+    
+    const fieldOptions = getFieldOptions(column.value as string);
+    
+    // If there are options available but some values aren't mapped, consider it unmapped
+    return fieldOptions.length > 0 && 
+           column.matchedOptions.some(option => !option.value);
+  }, [isExpandable, getFieldOptions]);
+
+  // Get matched, unmapped, and columns with unmapped values
+  const { matchedColumns, unmatchedColumns, columnsWithUnmappedValues } = useMemo(() => {
+    // First identify columns with unmapped values (they need special treatment)
+    const withUnmappedValues = columns.filter(col => 
+      col.type !== ColumnType.empty && 
+      col.type !== ColumnType.ignored && 
+      hasUnmappedValues(col)
+    );
+    
+    // These are columns that are mapped AND have all their values properly mapped
+    const fullyMapped = columns.filter(col => 
+      col.type !== ColumnType.empty && 
+      col.type !== ColumnType.ignored && 
+      !hasUnmappedValues(col)
+    );
+    
+    // Unmapped columns
+    const unmatched = columns.filter(col => col.type === ColumnType.empty);
+    
+    return { 
+      matchedColumns: fullyMapped, 
+      unmatchedColumns: unmatched,
+      columnsWithUnmappedValues: withUnmappedValues
+    };
+  }, [columns, hasUnmappedValues]);
+
+  // Get ignored columns
+  const ignoredColumns = useMemo(() => {
+    return columns.filter(col => col.type === ColumnType.ignored);
+  }, [columns]);
+
+  // Get mapping information for required fields
+  const requiredFieldMappings = useMemo(() => {
+    const fieldsArray = Array.isArray(fields) ? fields : [fields];
+    const mappings = new Map<string, { isGlobal: boolean, columnHeader?: string, columnIndex?: number }>();
+    
+    // Check global selections
+    fieldsArray.forEach(field => {
+      const key = field.key as string;
+      if (isFieldCoveredByGlobalSelections(key)) {
+        mappings.set(key, { isGlobal: true });
+      }
+    });
+    
+    // Check column mappings
+    columns.forEach(column => {
+      if ("value" in column) {
+        const key = column.value as string;
+        if (!mappings.has(key) || !mappings.get(key)?.isGlobal) {
+          mappings.set(key, { 
+            isGlobal: false, 
+            columnHeader: column.header,
+            columnIndex: column.index
+          });
+        }
+      }
+    });
+    
+    return mappings;
+  }, [columns, fields, isFieldCoveredByGlobalSelections]);
+
+  // Available fields for mapping (excluding already mapped fields)
+  const availableFields = useMemo(() => {
+    const fieldsArray = Array.isArray(fields) ? fields : [fields];
+    const mappedFieldKeys = matchedColumns
+      .filter(col => "value" in col)
+      .map(col => (col as any).value);
+    
+    return fieldsArray.filter(field => 
+      !mappedFieldKeys.includes(field.key) && 
+      !isFieldCoveredByGlobalSelections(field.key)
+    );
+  }, [fields, matchedColumns, isFieldCoveredByGlobalSelections]);
+
+  // All available fields including already mapped ones (for editing mapped columns)
+  const allFields = useMemo(() => {
+    const fieldsArray = Array.isArray(fields) ? fields : [fields];
+    return fieldsArray.filter(field => !isFieldCoveredByGlobalSelections(field.key));
+  }, [fields, isFieldCoveredByGlobalSelections]);
+
+  // For filtering fields by type
+  const getFieldsByKeyPrefix = useCallback((prefix: string, fieldsToUse = availableFields) => {
+    return fieldsToUse.filter(field => 
+      typeof field.key === 'string' && field.key.startsWith(prefix)
+    );
+  }, [availableFields]);
+
+  // Group all fields by category (for editing mapped columns)
+  const allFieldCategories = useMemo(() => {
+    return [
+      { name: "Basic Info", fields: getFieldsByKeyPrefix('basic', allFields) },
+      { name: "Product", fields: getFieldsByKeyPrefix('product', allFields) },
+      { name: "Inventory", fields: getFieldsByKeyPrefix('inventory', allFields) },
+      { name: "Pricing", fields: getFieldsByKeyPrefix('pricing', allFields) },
+      { name: "Other", fields: allFields.filter(f => 
+        !f.key.startsWith('basic') && 
+        !f.key.startsWith('product') && 
+        !f.key.startsWith('inventory') && 
+        !f.key.startsWith('pricing')
+      ) }
+    ].filter(category => category.fields.length > 0);
+  }, [allFields, getFieldsByKeyPrefix]);
+
+  // Group available fields by category (for unmapped columns)
+  const availableFieldCategories = useMemo(() => {
+    return [
+      { name: "Basic Info", fields: getFieldsByKeyPrefix('basic') },
+      { name: "Product", fields: getFieldsByKeyPrefix('product') },
+      { name: "Inventory", fields: getFieldsByKeyPrefix('inventory') },
+      { name: "Pricing", fields: getFieldsByKeyPrefix('pricing') },
+      { name: "Other", fields: availableFields.filter(f => 
+        !f.key.startsWith('basic') && 
+        !f.key.startsWith('product') && 
+        !f.key.startsWith('inventory') && 
+        !f.key.startsWith('pricing')
+      ) }
+    ].filter(category => category.fields.length > 0);
+  }, [availableFields, getFieldsByKeyPrefix]);
+
+  // Override onChange to handle the new interface
   const onChange = useCallback(
     (value: T, columnIndex: number) => {
       const field = (fields as Fields<T>).find((f) => f.key === value)
@@ -193,7 +481,41 @@ export const MatchColumnsStep = <T extends string>({
         columns.map<Column<T>>((column, index) => {
           if (columnIndex === index) {
             // Set the new column value
-            return setColumn(column, field as Field<T>, data, autoMapSelectValues)
+            const updatedColumn = setColumn(column, field as Field<T>, data, autoMapSelectValues);
+            
+            // Auto-map values if this is a field with options
+            if (isExpandable(updatedColumn) && "matchedOptions" in updatedColumn) {
+              // Get available options for this field
+              const fieldOptions = getFieldOptions(field.key as string);
+              
+              if (fieldOptions && fieldOptions.length > 0) {
+                // Try to auto-map each value
+                updatedColumn.matchedOptions = updatedColumn.matchedOptions.map(option => {
+                  // If already mapped, keep it
+                  if (option.value) return option;
+                  
+                  const entryValue = String(option.entry || '').trim();
+                  
+                  // Try to find a case-insensitive match
+                  const matchingOption = fieldOptions.find((opt: { label: string, value: string }) => 
+                    String(opt.label).toLowerCase() === entryValue.toLowerCase() || 
+                    String(opt.value).toLowerCase() === entryValue.toLowerCase()
+                  );
+                  
+                  if (matchingOption) {
+                    console.log(`Auto-matched "${entryValue}" to "${matchingOption.label}" (${matchingOption.value})`);
+                    return {
+                      ...option,
+                      value: matchingOption.value
+                    };
+                  }
+                  
+                  return option;
+                });
+              }
+            }
+            
+            return updatedColumn;
           } else if (index === existingFieldIndex) {
             // Clear the old column that had this field
             toast.warning(translations.matchColumnsStep.duplicateColumnWarningTitle, {
@@ -212,11 +534,64 @@ export const MatchColumnsStep = <T extends string>({
       columns,
       data,
       fields,
+      getFieldOptions,
+      isExpandable,
       translations.matchColumnsStep.duplicateColumnWarningDescription,
       translations.matchColumnsStep.duplicateColumnWarningTitle,
     ],
   )
 
+  // Auto-map values for all columns
+  const autoMapAllValues = useCallback(() => {
+    setColumns(
+      columns.map<Column<T>>((column) => {
+        // Only process expandable columns with unmatched options
+        if (isExpandable(column) && "matchedOptions" in column && "value" in column) {
+          const fieldKey = column.value as string;
+          const fieldOptions = getFieldOptions(fieldKey);
+          
+          if (fieldOptions && fieldOptions.length > 0) {
+            // Create a copy of the column
+            const updatedColumn = { ...column };
+            
+            // Try to auto-map each value
+            updatedColumn.matchedOptions = updatedColumn.matchedOptions.map(option => {
+              // If already mapped, keep it
+              if (option.value) return option;
+              
+              const entryValue = String(option.entry || '').trim();
+              
+              // Try to find a case-insensitive match
+              const matchingOption = fieldOptions.find((opt: { label: string, value: string }) => 
+                String(opt.label).toLowerCase() === entryValue.toLowerCase() || 
+                String(opt.value).toLowerCase() === entryValue.toLowerCase()
+              );
+              
+              if (matchingOption) {
+                console.log(`Auto-matched "${entryValue}" to "${matchingOption.label}" (${matchingOption.value})`);
+                return {
+                  ...option,
+                  value: matchingOption.value
+                };
+              }
+              
+              return option;
+            });
+            
+            return updatedColumn;
+          }
+        }
+        
+        return column;
+      }),
+    )
+  }, [columns, getFieldOptions, isExpandable]);
+
+  // Run auto-mapping on component mount
+  useEffect(() => {
+    autoMapAllValues();
+  }, [autoMapAllValues]);
+
   const onIgnore = useCallback(
     (columnIndex: number) => {
       setColumns(columns.map((column, index) => (columnIndex === index ? setIgnoreColumn<T>(column) : column)))
@@ -315,16 +690,6 @@ export const MatchColumnsStep = <T extends string>({
     return field?.label || key;
   }, [fields]);
 
-  // Check if a field is covered by global selections
-  const isFieldCoveredByGlobalSelections = useCallback((key: string) => {
-    const isCovered = (key === 'supplier' && globalSelections.supplier) ||
-                     (key === 'company' && globalSelections.company) ||
-                     (key === 'line' && globalSelections.line) ||
-                     (key === 'subline' && globalSelections.subline);
-    console.log(`Field ${key} covered by global selections:`, isCovered);
-    return isCovered;
-  }, [globalSelections]);
-
   const handleOnContinue = useCallback(async () => {
     setIsLoading(true)
     // Normalize the data with global selections before continuing
@@ -343,19 +708,173 @@ export const MatchColumnsStep = <T extends string>({
     [],
   )
 
+  // Helper to get sample data for a column
+  const getColumnSamples = (columnIndex: number) => {
+    return dataExample.map(row => row[columnIndex]);
+  };
+
+  // Automatically expand columns with unmapped values
+  useEffect(() => {
+    columnsWithUnmappedValues.forEach(column => {
+      if (!expandedValueMappings.includes(column.index)) {
+        setExpandedValueMappings(prev => [...prev, column.index]);
+      }
+    });
+  }, [columnsWithUnmappedValues, expandedValueMappings]);
+
+  // Render the sample data preview
+  const renderSamplePreview = (columnIndex: number) => {
+    const samples = getColumnSamples(columnIndex);
+    return (
+      <div className="flex items-center justify-center">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <FileIcon className="h-4 w-4 text-muted-foreground" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent side="right" align="start" className="w-[250px] p-0">
+            <div className="p-3 border-b">
+              <h4 className="text-sm font-medium">Sample Data</h4>
+            </div>
+            <ScrollArea className="h-[200px] overflow-auto">
+              <div className="p-3 space-y-2">
+                {samples.map((sample, i) => (
+                  <div key={i} className="text-sm">
+                    <span className="text-muted-foreground text-xs mr-2">{i + 1}:</span>
+                    <span className="font-medium">{String(sample || '(empty)')}</span>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </PopoverContent>
+        </Popover>
+      </div>
+    );
+  };
+
+  // Render the field selector for a column
+  const renderFieldSelector = (column: Column<T>, isUnmapped: boolean = false) => {
+    // For ignored columns, show a badge
+    if (column.type === ColumnType.ignored) {
+      return <Badge variant="outline">Ignored</Badge>;
+    }
+    
+    // Get the current value if this is a mapped column
+    const currentValue = "value" in column ? column.value as string : undefined;
+    
+    // Use all fields for mapped columns, and only available fields for unmapped columns
+    const fieldCategoriesForSelector = isUnmapped ? availableFieldCategories : allFieldCategories;
+    
+    return (
+      <Select
+        value={currentValue}
+        onValueChange={(value) => onChange(value as T, column.index)}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder="Select field..." />
+        </SelectTrigger>
+        <SelectContent>
+          {fieldCategoriesForSelector.map(category => (
+            <div key={category.name}>
+              <div className="px-2 py-1.5 text-sm font-semibold text-muted-foreground">
+                {category.name}
+              </div>
+              {category.fields.map(field => (
+                <SelectItem key={field.key as string} value={field.key as string}>
+                  {field.label}
+                </SelectItem>
+              ))}
+              <Separator className="my-1" />
+            </div>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  };
+
+  // Render value mappings for select-type fields
+  const renderValueMappings = (column: Column<T>) => {
+    if (!isExpandable(column) || !("matchedOptions" in column) || !("value" in column)) {
+      return null;
+    }
+    
+    const fieldOptions = getFieldOptions(column.value as string);
+    console.log(`Rendering value mappings for ${column.header}`, fieldOptions);
+    
+    // If no options available, show a message
+    if (!fieldOptions || fieldOptions.length === 0) {
+      return (
+        <div className="pl-10 pr-2 py-4 bg-muted/30 border-t border-b">
+          <p className="text-sm text-muted-foreground">
+            No options available for this field. Options mapping is not required.
+          </p>
+        </div>
+      );
+    }
+    
+    return (
+      <div className="pl-10 pr-2 py-3 bg-muted/30 border-t border-b">
+        <div className="mb-2">
+          <h4 className="text-sm font-medium">Map Values from Column to Field Options</h4>
+          <p className="text-xs text-muted-foreground mb-2">
+            Match values found in your spreadsheet to options available in the system
+          </p>
+        </div>
+        <div className="space-y-2">
+          {column.matchedOptions.map((matched, i) => {
+            // Set default value if none exists
+            const currentValue = (matched.value as string) || "";
+            // Ensure entry is a string
+            const entryValue = matched.entry || "";
+            const isUnmapped = !currentValue;
+            
+            return (
+              <div key={i} className="grid grid-cols-3 gap-2 items-center">
+                <div className={`text-sm truncate ${isUnmapped ? "font-medium text-amber-600" : ""}`}>
+                  {entryValue || '(empty)'}
+                </div>
+                <div className="flex-grow flex justify-center">
+                  <ArrowRightIcon className={`h-4 w-4 ${isUnmapped ? "text-amber-600" : "text-muted-foreground"}`} />
+                </div>
+                <Select
+                  value={currentValue}
+                  onValueChange={(value) => onSubChange(value, column.index, entryValue)}
+                >
+                  <SelectTrigger className={`h-8 ${isUnmapped ? "border-amber-600 text-amber-600" : ""}`}>
+                    <SelectValue placeholder="Select option..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {fieldOptions.map((option: any) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="flex h-[calc(100vh-10rem)] flex-col">
       <div className="flex-1 overflow-hidden">
         <div className="h-full flex flex-col">
-          <div className="px-8 py-6 flex-1 overflow-auto">
-            <div className="space-y-8 pb-4">
-              {/* Global Selections Section */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Global Selections</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="grid grid-cols-2 gap-4">
+          <div className="px-6 py-4 flex-1 overflow-auto">
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 h-full">
+              {/* Left panel - Global selections & Required fields */}
+              <div className="lg:col-span-1 space-y-4">
+                <div>
+                  <h3 className="text-lg font-medium mb-4">Global Settings</h3>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Apply these values to all imported items
+                  </p>
+                  
+                  <div className="space-y-4">
                     <div className="space-y-2">
                       <label className="text-sm font-medium">Supplier</label>
                       <Select
@@ -447,104 +966,332 @@ export const MatchColumnsStep = <T extends string>({
                       </Select>
                     </div>
                   </div>
-                </CardContent>
-              </Card>
-
-              <div className="flex-1">
-                <ColumnGrid
-                  columns={columns}
-                  onContinue={handleOnContinue}
-                  onBack={onBack}
-                  isLoading={isLoading}
-                  userColumn={(column) => (
-                    <UserTableColumn
-                      column={column}
-                      onIgnore={onIgnore}
-                      onRevertIgnore={onRevertIgnore}
-                      entries={dataExample.map((row) => row[column.index])}
-                    />
-                  )}
-                  templateColumn={(column) => <TemplateColumn column={column} onChange={onChange} onSubChange={onSubChange} />}
-                />
-              </div>
-
-              {/* Required Fields Checklist */}
-              <Card className="mt-8">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    Required Fields
+                </div>
+                
+                <Separator className="my-6" />
+                
+                {/* Required Fields Section - Updated to show source column */}
+                <div>
+                  <div className="flex items-center gap-2 mb-4">
+                    <h3 className="text-lg font-medium">Required Fields</h3>
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger asChild>
-                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                          <InfoIcon className="h-4 w-4 text-muted-foreground" />
                         </TooltipTrigger>
                         <TooltipContent>
-                          <p className="max-w-xs">
-                            These fields are required for product import. You can either map them from your spreadsheet or set them globally above.
-                            {unmatchedRequiredFields.length > 0 && " Missing fields will need to be filled in during validation."}
-                          </p>
+                          <p className="max-w-xs">Map columns to required fields or set them globally</p>
                         </TooltipContent>
                       </Tooltip>
                     </TooltipProvider>
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="grid grid-cols-2 gap-4">
+                  </div>
+                  
+                  <div className="space-y-2">
                     {requiredFields.length > 0 ? (
                       requiredFields.map(field => {
                         const isMatched = matchedRequiredFields.includes(field.key);
-                        const isCoveredByGlobal = isFieldCoveredByGlobalSelections(field.key);
+                        const fieldMapping = requiredFieldMappings.get(field.key);
+                        const isCoveredByGlobal = fieldMapping?.isGlobal;
                         const isAccountedFor = isMatched || isCoveredByGlobal;
                         
                         return (
                           <div key={field.key} className="flex items-center gap-2">
                             {isAccountedFor ? (
-                              <CheckCircle2 className="h-5 w-5 text-green-500" />
+                              <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
                             ) : (
-                              <AlertCircle className="h-5 w-5 text-amber-500" />
+                              <AlertCircle className="h-4 w-4 text-amber-500 flex-shrink-0" />
                             )}
-                            <span className={isAccountedFor ? "text-green-700 dark:text-green-400" : "text-amber-700 dark:text-amber-400"}>
+                            <span className={`text-sm ${isAccountedFor ? "text-green-700 dark:text-green-400" : "text-amber-700 dark:text-amber-400"}`}>
                               {getFieldLabel(field.key)}
                             </span>
-                            {isCoveredByGlobal && (
-                              <span className="text-xs text-muted-foreground">(set globally)</span>
-                            )}
+                            <span className="text-xs text-muted-foreground ml-auto">
+                              {isCoveredByGlobal ? 
+                                "(global)" : 
+                                fieldMapping?.columnHeader ?
+                                  `(from "${fieldMapping.columnHeader}")` :
+                                  ""
+                              }
+                            </span>
                           </div>
                         );
                       })
                     ) : (
-                      <div className="col-span-2 text-muted-foreground">
-                        No required fields found in the configuration.
+                      <div className="text-sm text-muted-foreground">
+                        No required fields found.
                       </div>
                     )}
                   </div>
-                </CardContent>
-              </Card>
+                </div>
+                
+                {/* Stats summary for column mapping */}
+                <div className="mt-6 pt-4">
+                  <div className="flex flex-col gap-1">
+                    <div className="flex justify-between">
+                      <span className="text-sm">Columns total:</span>
+                      <span className="text-sm font-medium">{columns.length}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-sm">Mapped:</span>
+                      <span className="text-sm font-medium">{matchedColumns.length}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-sm">Ignored:</span>
+                      <span className="text-sm font-medium">{ignoredColumns.length}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-sm">Unmapped:</span>
+                      <span className="text-sm font-medium">{unmatchedColumns.length}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              {/* Right panel - Column mapping interface */}
+              <div className="lg:col-span-3 h-full">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center gap-2">
+                    <h3 className="text-lg font-medium">Map Spreadsheet Columns</h3>
+                    <Badge variant={unmatchedRequiredFields.length > 0 ? "destructive" : "outline"}>
+                      {unmatchedRequiredFields.length} required missing
+                    </Badge>
+                    {columnsWithUnmappedValues.length > 0 && (
+                      <Badge variant="outline" className="bg-amber-100 text-amber-800 hover:bg-amber-100 border-amber-300">
+                        {columnsWithUnmappedValues.length} with unmapped values
+                      </Badge>
+                    )}
+                  </div>
+                  
+                  <div className="flex items-center gap-3">
+                    <Button 
+                      variant="outline" 
+                      size="sm"
+                      onClick={() => setShowAllColumns(!showAllColumns)}
+                    >
+                      {showAllColumns ? <EyeOffIcon className="h-3.5 w-3.5 mr-1" /> : <EyeIcon className="h-3.5 w-3.5 mr-1" />}
+                      {showAllColumns ? "Hide mapped" : "Show all"}
+                    </Button>
+                  </div>
+                </div>
+                
+                <div className="bg-background border rounded-md h-[calc(100%-3rem)] overflow-hidden">
+                  <ScrollArea className="h-full">
+                    <Table>
+                      <TableHeader className="sticky top-0 bg-muted z-10">
+                        <TableRow>
+                          <TableHead className="w-1/3">Spreadsheet Column</TableHead>
+                          <TableHead className="w-12 text-center">Data</TableHead>
+                          <TableHead className="w-12"></TableHead>
+                          <TableHead>Map To Field</TableHead>
+                          <TableHead className="w-24 text-right">Action</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {/* Always show columns with unmapped values */}
+                        {columnsWithUnmappedValues.map((column) => {
+                          const isExpanded = expandedValueMappings.includes(column.index);
+                          
+                          return (
+                            <React.Fragment key={`unmapped-values-${column.index}`}>
+                              <TableRow className="bg-amber-50 dark:bg-amber-950/20">
+                                <TableCell className="font-medium">{column.header}</TableCell>
+                                <TableCell className="text-center">
+                                  {renderSamplePreview(column.index)}
+                                </TableCell>
+                                <TableCell>
+                                  <ArrowRightIcon className="h-4 w-4 mx-auto text-amber-600" />
+                                </TableCell>
+                                <TableCell>
+                                  {renderFieldSelector(column)}
+                                </TableCell>
+                                <TableCell className="flex justify-end items-center gap-1">
+                                  <Button 
+                                    variant="ghost" 
+                                    size="sm"
+                                    onClick={() => toggleValueMapping(column.index)}
+                                    className="h-7 px-2 text-amber-600"
+                                  >
+                                    {isExpanded ? 
+                                      "Hide values" : 
+                                      <>
+                                        <AlertCircle className="h-3.5 w-3.5 mr-1" />
+                                        Map values
+                                      </>
+                                    }
+                                  </Button>
+                                  <Button 
+                                    variant="ghost" 
+                                    size="sm"
+                                    onClick={() => onIgnore(column.index)}
+                                    className="h-7 px-2"
+                                  >
+                                    <XIcon className="h-4 w-4" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                              
+                              {/* Value mappings row */}
+                              {isExpanded && (
+                                <TableRow>
+                                  <TableCell colSpan={5} className="p-0">
+                                    {renderValueMappings(column)}
+                                  </TableCell>
+                                </TableRow>
+                              )}
+                            </React.Fragment>
+                          );
+                        })}
+                        
+                        {/* Always show unmapped columns */}
+                        {unmatchedColumns.map((column) => (
+                          <TableRow key={`unmatched-${column.index}`}>
+                            <TableCell className="font-medium">{column.header}</TableCell>
+                            <TableCell className="text-center">
+                              {renderSamplePreview(column.index)}
+                            </TableCell>
+                            <TableCell>
+                              <ArrowRightIcon className="h-4 w-4 mx-auto text-muted-foreground" />
+                            </TableCell>
+                            <TableCell>
+                              {renderFieldSelector(column, true)}
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <Button 
+                                variant="ghost" 
+                                size="sm"
+                                onClick={() => onIgnore(column.index)}
+                                className="h-7 px-2"
+                                title="Ignore this column"
+                              >
+                                <XIcon className="h-4 w-4" />
+                              </Button>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                        
+                        {/* Show matched columns if showAllColumns is true */}
+                        {showAllColumns && matchedColumns.map((column) => {
+                          const isExpanded = expandedValueMappings.includes(column.index);
+                          const canExpandValues = isExpandable(column);
+                          
+                          return (
+                            <React.Fragment key={`matched-${column.index}`}>
+                              <TableRow className="group">
+                                <TableCell className="font-medium">{column.header}</TableCell>
+                                <TableCell className="text-center">
+                                  {renderSamplePreview(column.index)}
+                                </TableCell>
+                                <TableCell>
+                                  <ArrowRightIcon className="h-4 w-4 mx-auto text-muted-foreground" />
+                                </TableCell>
+                                <TableCell>
+                                  {renderFieldSelector(column)}
+                                </TableCell>
+                                <TableCell className="flex justify-end items-center gap-1">
+                                  {canExpandValues && (
+                                    <Button 
+                                      variant="ghost" 
+                                      size="sm"
+                                      onClick={() => toggleValueMapping(column.index)}
+                                      className="h-7 px-2"
+                                    >
+                                      {isExpanded ? 
+                                        "Hide values" : 
+                                        <>
+                                          <LinkIcon className="h-3.5 w-3.5 mr-1" />
+                                          Map values
+                                        </>
+                                      }
+                                    </Button>
+                                  )}
+                                  <Button 
+                                    variant="ghost" 
+                                    size="sm"
+                                    onClick={() => onIgnore(column.index)}
+                                    className="h-7 px-2"
+                                  >
+                                    <XIcon className="h-4 w-4" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                              
+                              {/* Value mappings row */}
+                              {isExpanded && canExpandValues && (
+                                <TableRow>
+                                  <TableCell colSpan={5} className="p-0">
+                                    {renderValueMappings(column)}
+                                  </TableCell>
+                                </TableRow>
+                              )}
+                            </React.Fragment>
+                          );
+                        })}
+                        
+                        {/* Show ignored columns if showAllColumns is true */}
+                        {showAllColumns && ignoredColumns.map((column) => (
+                          <TableRow key={`ignored-${column.index}`} className="text-muted-foreground">
+                            <TableCell className="font-medium">{column.header}</TableCell>
+                            <TableCell className="text-center">
+                              {renderSamplePreview(column.index)}
+                            </TableCell>
+                            <TableCell>
+                              <ArrowRightIcon className="h-4 w-4 mx-auto" />
+                            </TableCell>
+                            <TableCell>
+                              <Badge variant="outline">Ignored</Badge>
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <Button 
+                                variant="ghost" 
+                                size="sm"
+                                onClick={() => onRevertIgnore(column.index)}
+                                className="h-7 px-2"
+                                title="Unmatch this column"
+                              >
+                                <CheckCircle2 className="h-4 w-4" />
+                              </Button>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                        
+                        {/* Show a message if all columns are mapped/ignored */}
+                        {unmatchedColumns.length === 0 && columnsWithUnmappedValues.length === 0 && !showAllColumns && (
+                          <TableRow>
+                            <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
+                              All columns have been mapped or ignored. 
+                              <Button 
+                                variant="link" 
+                                onClick={() => setShowAllColumns(true)} 
+                                className="px-1 h-auto"
+                              >
+                                Show all columns
+                              </Button>
+                            </TableCell>
+                          </TableRow>
+                        )}
+                      </TableBody>
+                    </Table>
+                  </ScrollArea>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div className="border-t bg-muted px-8 py-4">
+      
+      <div className="border-t bg-muted px-6 py-4">
         <div className="flex items-center justify-between">
           {onBack && (
             <Button variant="outline" onClick={onBack}>
               {translations.matchColumnsStep.backButtonTitle}
             </Button>
           )}
-          <div className="flex items-center gap-4">
-            {unmatchedRequiredFields.length > 0 && (
-              <span className="text-sm text-amber-600 dark:text-amber-400">
-                {unmatchedRequiredFields.length} required field(s) missing
-              </span>
-            )}
-            <Button 
-              className="ml-auto"
-              disabled={isLoading}
-              onClick={handleOnContinue}
-            >
-              {translations.matchColumnsStep.nextButtonTitle}
-            </Button>
-          </div>
+          <Button 
+            className="ml-auto"
+            disabled={isLoading}
+            onClick={handleOnContinue}
+          >
+            {translations.matchColumnsStep.nextButtonTitle}
+          </Button>
         </div>
       </div>
     </div>