diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index c03c6f8..2512f16 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -17,6 +17,7 @@ import { formatNumber, formatDuration } from '@/lib/utils/format'
 import { ArrowUpRightIcon, ArrowDownRightIcon, DownloadIcon, BarChartIcon } from '@ciphera-net/ui'
 import { Button } from '@ciphera-net/ui'
 import { Checkbox } from '@ciphera-net/ui'
+import ExportModal from './ExportModal'
 
 const COLORS = {
   brand: '#FD5E0F',
@@ -42,7 +43,7 @@ const CHART_COLORS_DARK = {
   tooltipBorder: '#404040',
 }
 
-interface DailyStat {
+export interface DailyStat {
   date: string
   pageviews: number
   visitors: number
@@ -163,6 +164,7 @@ function formatAxisValue(value: number): string {
 export default function Chart({ data, prevData, stats, prevStats, interval }: ChartProps) {
   const [metric, setMetric] = useState<MetricType>('visitors')
   const [showComparison, setShowComparison] = useState(false)
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false)
   const { resolvedTheme } = useTheme()
 
   const colors = useMemo(
@@ -213,17 +215,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
   }
 
   const handleExport = () => {
-    const csvContent = "data:text/csv;charset=utf-8," 
-      + "Date,Pageviews,Visitors\n"
-      + data.map(row => `${new Date(row.date).toISOString()},${row.pageviews},${row.visitors}`).join("\n")
-    
-    const encodedUri = encodeURI(csvContent)
-    const link = document.createElement("a")
-    link.setAttribute("href", encodedUri)
-    link.setAttribute("download", `pulse_export_${new Date().toISOString().split('T')[0]}.csv`)
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
+    setIsExportModalOpen(true)
   }
 
   const metrics = [
@@ -502,6 +494,11 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
           </div>
         )}
       </div>
+      <ExportModal
+        isOpen={isExportModalOpen}
+        onClose={() => setIsExportModalOpen(false)}
+        data={data}
+      />
     </div>
   )
 }
diff --git a/components/dashboard/ExportModal.tsx b/components/dashboard/ExportModal.tsx
new file mode 100644
index 0000000..0dd378a
--- /dev/null
+++ b/components/dashboard/ExportModal.tsx
@@ -0,0 +1,171 @@
+'use client'
+
+import { useState } from 'react'
+import { Modal, Button, Checkbox, Input, Select } from '@ciphera-net/ui'
+import type { DailyStat } from './Chart'
+
+interface ExportModalProps {
+  isOpen: boolean
+  onClose: () => void
+  data: DailyStat[]
+}
+
+type ExportFormat = 'csv' | 'json'
+
+export default function ExportModal({ isOpen, onClose, data }: ExportModalProps) {
+  const [format, setFormat] = useState<ExportFormat>('csv')
+  const [filename, setFilename] = useState(`pulse_export_${new Date().toISOString().split('T')[0]}`)
+  const [includeHeader, setIncludeHeader] = useState(true)
+  const [selectedFields, setSelectedFields] = useState<Record<keyof DailyStat, boolean>>({
+    date: true,
+    pageviews: true,
+    visitors: true,
+    bounce_rate: true,
+    avg_duration: true,
+  })
+
+  const handleFieldChange = (field: keyof DailyStat, checked: boolean) => {
+    setSelectedFields((prev) => ({ ...prev, [field]: checked }))
+  }
+
+  const handleExport = () => {
+    // Filter fields
+    const fields = (Object.keys(selectedFields) as Array<keyof DailyStat>).filter((k) => selectedFields[k])
+    
+    // Prepare data
+    const exportData = data.map((item) => {
+      const filteredItem: Partial<DailyStat> = {}
+      fields.forEach((field) => {
+        filteredItem[field] = item[field]
+      })
+      return filteredItem
+    })
+
+    let content = ''
+    let mimeType = ''
+    let extension = ''
+
+    if (format === 'csv') {
+      const header = fields.join(',')
+      const rows = exportData.map((row) =>
+        fields.map((field) => {
+            const val = row[field]
+            if (field === 'date' && typeof val === 'string') {
+                 return new Date(val).toISOString()
+            }
+            return val
+        }).join(',')
+      )
+      content = (includeHeader ? header + '\n' : '') + rows.join('\n')
+      mimeType = 'text/csv;charset=utf-8;'
+      extension = 'csv'
+    } else {
+      content = JSON.stringify(exportData, null, 2)
+      mimeType = 'application/json;charset=utf-8;'
+      extension = 'json'
+    }
+
+    const blob = new Blob([content], { type: mimeType })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.setAttribute('href', url)
+    link.setAttribute('download', `${filename || 'export'}.${extension}`)
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Export Data">
+      <div className="space-y-6">
+        {/* Filename & Format */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <label htmlFor="filename" className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+              Filename
+            </label>
+            <Input
+              id="filename"
+              value={filename}
+              onChange={(e) => setFilename(e.target.value)}
+              placeholder="filename"
+            />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="format" className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+              Format
+            </label>
+            <Select
+              id="format"
+              value={format}
+              onChange={(val) => setFormat(val as ExportFormat)}
+              options={[
+                { value: 'csv', label: 'CSV' },
+                { value: 'json', label: 'JSON' },
+              ]}
+              variant="input"
+              fullWidth
+            />
+          </div>
+        </div>
+
+        {/* Fields Selection */}
+        <div className="space-y-3">
+          <label className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+            Include Fields
+          </label>
+          <div className="grid grid-cols-2 gap-3">
+            <Checkbox
+              checked={selectedFields.date}
+              onCheckedChange={(c) => handleFieldChange('date', c)}
+              label="Date"
+            />
+            <Checkbox
+              checked={selectedFields.pageviews}
+              onCheckedChange={(c) => handleFieldChange('pageviews', c)}
+              label="Pageviews"
+            />
+            <Checkbox
+              checked={selectedFields.visitors}
+              onCheckedChange={(c) => handleFieldChange('visitors', c)}
+              label="Visitors"
+            />
+            <Checkbox
+              checked={selectedFields.bounce_rate}
+              onCheckedChange={(c) => handleFieldChange('bounce_rate', c)}
+              label="Bounce Rate"
+            />
+            <Checkbox
+              checked={selectedFields.avg_duration}
+              onCheckedChange={(c) => handleFieldChange('avg_duration', c)}
+              label="Avg Duration"
+            />
+          </div>
+        </div>
+
+        {/* Additional Options */}
+        {format === 'csv' && (
+          <div className="pt-2 border-t border-neutral-100 dark:border-neutral-800">
+             <Checkbox
+              checked={includeHeader}
+              onCheckedChange={setIncludeHeader}
+              label="Include Header Row"
+            />
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-4">
+          <Button variant="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={handleExport}>
+            Export Data
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}