diff --git a/frontend/app/(dashboard)/shipments/page.tsx b/frontend/app/(dashboard)/shipments/page.tsx
index 3e937bfa..d1a55081 100644
--- a/frontend/app/(dashboard)/shipments/page.tsx
+++ b/frontend/app/(dashboard)/shipments/page.tsx
@@ -9,7 +9,7 @@ import { ShipmentCard } from '../../../components/shipment/shipment-card';
 import { ShipmentCardSkeleton } from '../../../components/ui/skeleton';
 import { Button } from '../../../components/ui/button';
 import { toast } from 'sonner';
-import { apiClient } from '../../../lib/api/client';
+import { ExportButton, type ExportFilters } from '../../../package/components/ExportButton';
 
 const STATUS_TABS: { label: string; value: ShipmentStatus | 'all' }[] = [
   { label: 'All', value: 'all' },
@@ -25,25 +25,13 @@ export default function ShipmentsPage() {
   const [result, setResult] = useState<PaginatedShipments | null>(null);
   const [activeTab, setActiveTab] = useState<ShipmentStatus | 'all'>('all');
   const [loading, setLoading] = useState(true);
-  const [exporting, setExporting] = useState(false);
 
-  const exportCsv = async () => {
-    setExporting(true);
-    try {
-      const blob = await apiClient<Blob>('/shipments/export?format=csv', {
-        headers: { Accept: 'text/csv' },
-      });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'shipments.csv';
-      a.click();
-      URL.revokeObjectURL(url);
-    } catch {
-      toast.error('Failed to export CSV. Please try again.');
-    } finally {
-      setExporting(false);
+  const getActiveFilters = (): ExportFilters => {
+    const filters: ExportFilters = {};
+    if (activeTab !== 'all') {
+      filters.status = activeTab;
     }
+    return filters;
   };
 
   useEffect(() => {
@@ -64,25 +52,11 @@ export default function ShipmentsPage() {
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-2xl font-bold text-foreground">{pageTitle}</h1>
         <div className="flex items-center gap-2">
-          <Button
+          <ExportButton
+            filters={getActiveFilters()}
             variant="outline"
             size="sm"
-            onClick={exportCsv}
-            disabled={exporting}
-            aria-label="Export shipments as CSV"
-          >
-            {exporting ? (
-              <>
-                <svg className="animate-spin h-3.5 w-3.5 mr-1.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-                </svg>
-                Exporting…
-              </>
-            ) : (
-              'Export CSV'
-            )}
-          </Button>
+          />
           {isShipper && (
             <Button asChild>
               <Link href="/shipments/new">+ New Shipment</Link>
diff --git a/frontend/package/components/DateRangePicker/DateRangePicker.tsx b/frontend/package/components/DateRangePicker/DateRangePicker.tsx
new file mode 100644
index 00000000..4cf04c8a
--- /dev/null
+++ b/frontend/package/components/DateRangePicker/DateRangePicker.tsx
@@ -0,0 +1,469 @@
+'use client';
+
+import * as React from 'react';
+import { format, startOfDay, endOfDay, startOfMonth, endOfMonth, startOfQuarter, endOfQuarter, subDays, subMonths, addMonths, isSameDay, isWithinInterval, isAfter, isBefore } from 'date-fns';
+import { CalendarIcon, X } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { Button } from '@/components/ui/button';
+
+export interface DateRange {
+  start: Date | undefined;
+  end: Date | undefined;
+}
+
+export interface DateRangePickerProps {
+  /** Selected date range */
+  value?: DateRange;
+  /** Callback when date range changes */
+  onChange?: (range: DateRange | undefined) => void;
+  /** Custom class name for styling */
+  className?: string;
+  /** Placeholder text for the input */
+  placeholder?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Number of months to display (1 for mobile, 2 for desktop) */
+  months?: 1 | 2;
+  /** Initial month to display */
+  defaultMonth?: Date;
+  /** First day of the week (0 = Sunday, 1 = Monday) */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Name for form integration */
+  name?: string;
+}
+
+type SelectionPhase = 'start' | 'end';
+
+interface PresetRange {
+  label: string;
+  getValue: () => DateRange;
+}
+
+const PRESET_RANGES: PresetRange[] = [
+  {
+    label: 'Today',
+    getValue: () => ({
+      start: startOfDay(new Date()),
+      end: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: 'Last 7 Days',
+    getValue: () => ({
+      start: startOfDay(subDays(new Date(), 6)),
+      end: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: 'Last 30 Days',
+    getValue: () => ({
+      start: startOfDay(subDays(new Date(), 29)),
+      end: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: 'This Month',
+    getValue: () => ({
+      start: startOfMonth(new Date()),
+      end: endOfMonth(new Date()),
+    }),
+  },
+  {
+    label: 'Last Quarter',
+    getValue: () => {
+      const currentQuarterStart = startOfQuarter(new Date());
+      const lastQuarterEnd = endOfDay(subDays(currentQuarterStart, 1));
+      return {
+        start: startOfQuarter(lastQuarterEnd),
+        end: endOfQuarter(lastQuarterEnd),
+      };
+    },
+  },
+];
+
+const DAY_NAMES = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+/**
+ * DateRangePicker component for selecting a date range.
+ * Features:
+ * - Calendar popup with two months side-by-side on desktop, one month on mobile
+ * - Click to set start date then end date
+ * - Selected range highlighted in calendar
+ * - Preset shortcuts: Today, Last 7 Days, Last 30 Days, This Month, Last Quarter
+ * - Clear button to reset selection
+ * - React Hook Form integration support
+ */
+export function DateRangePicker({
+  value,
+  onChange,
+  className = '',
+  placeholder = 'Select date range',
+  disabled = false,
+  months = 2,
+  defaultMonth,
+  weekStartsOn = 0,
+  minDate,
+  maxDate,
+  name,
+}: DateRangePickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const [displayMonth, setDisplayMonth] = React.useState(() => {
+    if (value?.start) return value.start;
+    if (defaultMonth) return defaultMonth;
+    return new Date();
+  });
+  const [selectionPhase, setSelectionPhase] = React.useState<SelectionPhase>('start');
+  const [tempRange, setTempRange] = React.useState<DateRange | undefined>(value);
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setOpen(false);
+        setTempRange(value);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [value]);
+
+  // Sync temp range when value changes
+  React.useEffect(() => {
+    setTempRange(value);
+  }, [value]);
+
+  // Update display month when value changes
+  React.useEffect(() => {
+    if (value?.start) {
+      setDisplayMonth(value.start);
+    }
+  }, [value]);
+
+  const handleDateClick = (date: Date) => {
+    if (disabled) return;
+
+    // Check min/max date constraints
+    if (minDate && isBefore(date, minDate)) return;
+    if (maxDate && isAfter(date, maxDate)) return;
+
+    if (selectionPhase === 'start') {
+      setTempRange({ start: date, end: undefined });
+      setSelectionPhase('end');
+    } else {
+      // If clicking a date before the start date, reset to start
+      if (tempRange?.start && isBefore(date, tempRange.start)) {
+        setTempRange({ start: date, end: undefined });
+        setSelectionPhase('end');
+      } else {
+        const newRange = { start: tempRange?.start, end: date };
+        setTempRange(newRange);
+        onChange?.(newRange);
+        setOpen(false);
+        setSelectionPhase('start');
+      }
+    }
+  };
+
+  const handleClear = () => {
+    setTempRange(undefined);
+    onChange?.(undefined);
+    setSelectionPhase('start');
+    setOpen(false);
+  };
+
+  const handlePresetClick = (preset: PresetRange) => {
+    const range = preset.getValue();
+    setTempRange(range);
+    onChange?.(range);
+    setSelectionPhase('start');
+    setOpen(false);
+  };
+
+  const handleCancel = () => {
+    setTempRange(value);
+    setSelectionPhase('start');
+    setOpen(false);
+  };
+
+  const isDateSelected = (date: Date) => {
+    if (!tempRange?.start) return false;
+    if (!tempRange?.end) return isSameDay(date, tempRange.start);
+    return isWithinInterval(date, { start: tempRange.start, end: tempRange.end }) ||
+      isSameDay(date, tempRange.start) ||
+      isSameDay(date, tempRange.end);
+  };
+
+  const isDateInRange = (date: Date) => {
+    if (!tempRange?.start || !tempRange?.end) return false;
+    return isWithinInterval(date, { start: tempRange.start, end: tempRange.end });
+  };
+
+  const isStartDate = (date: Date) => {
+    return tempRange?.start && isSameDay(date, tempRange.start);
+  };
+
+  const isEndDate = (date: Date) => {
+    return tempRange?.end && isSameDay(date, tempRange.end);
+  };
+
+  const isDateDisabled = (date: Date) => {
+    if (minDate && isBefore(date, minDate)) return true;
+    if (maxDate && isAfter(date, maxDate)) return true;
+    return false;
+  };
+
+  const getDaysInMonth = (date: Date) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const days: (Date | null)[] = [];
+
+    // Add null placeholders for days before the first day of the month
+    const startingDay = firstDay.getDay();
+    for (let i = 0; i < startingDay; i++) {
+      days.push(null);
+    }
+
+    // Add all days of the month
+    for (let d = 1; d <= lastDay.getDate(); d++) {
+      days.push(new Date(year, month, d));
+    }
+
+    return days;
+  };
+
+  const formatDisplayValue = () => {
+    if (!value?.start) return '';
+    if (!value?.end) return format(value.start, 'MMM d, yyyy');
+    return `${format(value.start, 'MMM d, yyyy')} - ${format(value.end, 'MMM d, yyyy')}`;
+  };
+
+  const renderCalendar = (monthOffset: number) => {
+    const currentMonth = addMonths(displayMonth, monthOffset);
+    const days = getDaysInMonth(currentMonth);
+    const monthLabel = format(currentMonth, 'MMMM yyyy');
+
+    return (
+      <div className="flex-1 min-w-[200px]" key={monthOffset}>
+        <div className="text-sm font-medium text-center mb-2">{monthLabel}</div>
+        <div className="grid grid-cols-7 gap-0">
+          {DAY_NAMES.map((day) => (
+            <div
+              key={day}
+              className="text-xs text-muted-foreground text-center py-1 font-medium"
+            >
+              {day}
+            </div>
+          ))}
+          {days.map((day, index) => {
+            if (!day) {
+              return <div key={`empty-${index}`} className="aspect-square" />;
+            }
+
+            const selected = isDateSelected(day);
+            const inRange = isDateInRange(day);
+            const start = isStartDate(day);
+            const end = isEndDate(day);
+            const isDisabled = isDateDisabled(day);
+
+            let cellClasses = 'aspect-square flex items-center justify-center text-sm cursor-pointer relative ';
+
+            if (isDisabled) {
+              cellClasses += 'text-muted-foreground/30 cursor-not-allowed ';
+            } else if (start || end) {
+              cellClasses += 'bg-primary text-primary-foreground font-semibold rounded-full ';
+            } else if (inRange) {
+              cellClasses += 'bg-accent rounded-none ';
+            } else if (selected) {
+              cellClasses += 'bg-primary/20 text-primary font-semibold rounded-full ';
+            } else {
+              cellClasses += 'hover:bg-accent rounded-full ';
+            }
+
+            // Add rounded corners for range edges
+            if (start && tempRange?.end) {
+              cellClasses += 'rounded-l-full ';
+            }
+            if (end && tempRange?.start) {
+              cellClasses += 'rounded-r-full ';
+            }
+
+            // Extend range background to fill gaps
+            if (inRange && !start && !end) {
+              cellClasses += 'rounded-none ';
+            }
+
+            return (
+              <button
+                key={day.toISOString()}
+                type="button"
+                className={cellClasses}
+                onClick={() => !isDisabled && handleDateClick(day)}
+                disabled={isDisabled}
+                aria-label={format(day, 'MMMM d, yyyy')}
+                aria-selected={selected}
+                tabIndex={isDisabled ? -1 : 0}
+              >
+                {day.getDate()}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  const monthsToShow = months;
+
+  return (
+    <div ref={containerRef} className={cn('relative inline-block', className)}>
+      {/* Trigger Button */}
+      <button
+        type="button"
+        className={cn(
+          'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'hover:bg-accent hover:text-accent-foreground'
+        )}
+        onClick={() => !disabled && setOpen(!open)}
+        disabled={disabled}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-label="Select date range"
+      >
+        <div className="flex items-center gap-2">
+          <CalendarIcon className="h-4 w-4 text-muted-foreground" />
+          <span className={cn(!value?.start && 'text-muted-foreground')}>
+            {formatDisplayValue() || placeholder}
+          </span>
+        </div>
+        {value?.start && (
+          <button
+            type="button"
+            className="ml-2 rounded-full p-0.5 hover:bg-muted"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleClear();
+            }}
+            aria-label="Clear date range"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        )}
+      </button>
+
+      {/* Hidden input for form integration */}
+      {name && (
+        <>
+          <input type="hidden" name={`${name}.start`} value={value?.start?.toISOString() || ''} />
+          <input type="hidden" name={`${name}.end`} value={value?.end?.toISOString() || ''} />
+        </>
+      )}
+
+      {/* Dropdown */}
+      {open && (
+        <div
+          className="absolute z-50 mt-2 min-w-[320px] rounded-md border bg-popover p-4 shadow-md animate-in fade-in zoom-in-95"
+          role="dialog"
+          aria-label="Date range picker"
+        >
+          {/* Preset Ranges */}
+          <div className="flex flex-wrap gap-1 mb-4">
+            {PRESET_RANGES.map((preset) => (
+              <Button
+                key={preset.label}
+                type="button"
+                variant="outline"
+                size="sm"
+                className="text-xs h-7"
+                onClick={() => handlePresetClick(preset)}
+              >
+                {preset.label}
+              </Button>
+            ))}
+          </div>
+
+          {/* Calendar Navigation */}
+          <div className="flex items-center justify-between mb-4">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={() => setDisplayMonth(subMonths(displayMonth, 1))}
+              aria-label="Previous month"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="m15 18-6-6 6-6" />
+              </svg>
+            </Button>
+            <span className="text-sm font-medium">
+              {format(displayMonth, 'MMMM yyyy')}
+              {monthsToShow === 2 && (
+                <span> - {format(addMonths(displayMonth, 1), 'MMMM yyyy')}</span>
+              )}
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={() => setDisplayMonth(addMonths(displayMonth, 1))}
+              aria-label="Next month"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="m9 18 6-6-6-6" />
+              </svg>
+            </Button>
+          </div>
+
+          {/* Calendar Grid */}
+          <div className={cn(
+            'flex gap-4',
+            monthsToShow === 1 ? 'justify-center' : 'md:flex-row flex-col'
+          )}>
+            {renderCalendar(0)}
+            {monthsToShow === 2 && renderCalendar(1)}
+          </div>
+
+          {/* Selection hint */}
+          <div className="mt-3 text-xs text-muted-foreground text-center">
+            {selectionPhase === 'start'
+              ? 'Select start date'
+              : 'Select end date'}
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex justify-between mt-4 pt-3 border-t">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={handleCancel}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={handleClear}
+              disabled={!value?.start}
+            >
+              Clear
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/package/components/DateRangePicker/index.ts b/frontend/package/components/DateRangePicker/index.ts
new file mode 100644
index 00000000..aca99138
--- /dev/null
+++ b/frontend/package/components/DateRangePicker/index.ts
@@ -0,0 +1,2 @@
+export { DateRangePicker } from './DateRangePicker';
+export type { DateRangePickerProps, DateRange } from './DateRangePicker';
\ No newline at end of file
diff --git a/frontend/package/components/ExportButton/ExportButton.tsx b/frontend/package/components/ExportButton/ExportButton.tsx
new file mode 100644
index 00000000..c85c63c5
--- /dev/null
+++ b/frontend/package/components/ExportButton/ExportButton.tsx
@@ -0,0 +1,201 @@
+'use client';
+
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { apiClient } from '../../../lib/api/client';
+import { ShipmentStatus } from '../../../types/shipment.types';
+import { Button } from '@/components/ui/button';
+
+export interface ExportFilters {
+  /** Status filter for shipments */
+  status?: ShipmentStatus | 'all';
+  /** Search query for origin/destination */
+  search?: string;
+  /** Origin filter */
+  origin?: string;
+  /** Destination filter */
+  destination?: string;
+  /** Start date for date range filter (ISO string) */
+  startDate?: string;
+  /** End date for date range filter (ISO string) */
+  endDate?: string;
+}
+
+export interface ExportButtonProps {
+  /** Current active filters to include in the export */
+  filters?: ExportFilters;
+  /** Custom class name for styling */
+  className?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Custom label for the button */
+  label?: string;
+  /** Variant of the button */
+  variant?: 'default' | 'outline' | 'ghost';
+  /** Size of the button */
+  size?: 'sm' | 'md' | 'lg';
+  /** Callback when export starts */
+  onExportStart?: () => void;
+  /** Callback when export succeeds */
+  onExportSuccess?: () => void;
+  /** Callback when export fails */
+  onExportError?: (error: Error) => void;
+}
+
+/**
+ * ExportButton component for exporting shipment data as CSV.
+ * Triggers a file download using the current active filter state.
+ */
+export function ExportButton({
+  filters,
+  className = '',
+  disabled = false,
+  label = 'Export CSV',
+  variant = 'outline',
+  size = 'sm',
+  onExportStart,
+  onExportSuccess,
+  onExportError,
+}: ExportButtonProps) {
+  const [exporting, setExporting] = useState(false);
+
+  const buildQueryString = (): string => {
+    const params = new URLSearchParams();
+    params.set('format', 'csv');
+
+    if (filters) {
+      if (filters.status && filters.status !== 'all') {
+        params.set('status', filters.status);
+      }
+      if (filters.search) {
+        params.set('search', filters.search);
+      }
+      if (filters.origin) {
+        params.set('origin', filters.origin);
+      }
+      if (filters.destination) {
+        params.set('destination', filters.destination);
+      }
+      if (filters.startDate) {
+        params.set('startDate', filters.startDate);
+      }
+      if (filters.endDate) {
+        params.set('endDate', filters.endDate);
+      }
+    }
+
+    return params.toString();
+  };
+
+  const handleClick = async () => {
+    if (exporting || disabled) return;
+
+    setExporting(true);
+    onExportStart?.();
+
+    try {
+      const queryString = buildQueryString();
+      const blob = await apiClient<Blob>(`/shipments/export?${queryString}`, {
+        headers: { Accept: 'text/csv' },
+      });
+
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `shipments-export-${new Date().toISOString().split('T')[0]}.csv`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      onExportSuccess?.();
+      toast.success('Shipments exported successfully');
+    } catch (error) {
+      onExportError?.(error as Error);
+      toast.error('Failed to export CSV. Please try again.');
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  // Button base styles
+  const baseStyles = 'inline-flex items-center justify-center font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
+
+  // Variant styles
+  const variantStyles = {
+    default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+    outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+    ghost: 'hover:bg-accent hover:text-accent-foreground',
+  };
+
+  // Size styles
+  const sizeStyles = {
+    sm: 'h-8 px-3 text-xs',
+    md: 'h-10 px-4 text-sm',
+    lg: 'h-12 px-6 text-base',
+  };
+
+  const buttonClasses = [
+    baseStyles,
+    variantStyles[variant],
+    sizeStyles[size],
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <Button
+      type="button"
+      className={buttonClasses}
+      onClick={handleClick}
+      disabled={exporting || disabled}
+      aria-label="Export shipments as CSV"
+      aria-busy={exporting}
+    >
+      {exporting ? (
+        <>
+          <svg
+            className="animate-spin h-3.5 w-3.5 mr-1.5"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8v8H4z"
+            />
+          </svg>
+          Exporting…
+        </>
+      ) : (
+        <>
+          <svg
+            className="h-4 w-4 mr-1.5"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+          </svg>
+          {label}
+        </>
+      )}
+    </Button>
+  );
+}
\ No newline at end of file
diff --git a/frontend/package/components/ExportButton/index.ts b/frontend/package/components/ExportButton/index.ts
new file mode 100644
index 00000000..09c1fedb
--- /dev/null
+++ b/frontend/package/components/ExportButton/index.ts
@@ -0,0 +1,2 @@
+export { ExportButton } from './ExportButton';
+export type { ExportButtonProps, ExportFilters } from './ExportButton';
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..4da8d25d
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "FrieghtFlow",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}