diff --git a/package.json b/package.json
index 66bfcfd..f8a7b0e 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
         "validator": "^13.15.20",
         "vega": "^6.2.0",
         "vega-embed": "^6.21.0",
-        "vega-lite": "^5.5.0",
+        "vega-lite": "6.4.1",
         "vm-browserify": "^1.1.2"
     },
     "scripts": {
diff --git a/py-src/data_formulator/agents/agent_py_data_rec.py b/py-src/data_formulator/agents/agent_py_data_rec.py
index 3fb1e5a..2fce791 100644
--- a/py-src/data_formulator/agents/agent_py_data_rec.py
+++ b/py-src/data_formulator/agents/agent_py_data_rec.py
@@ -33,7 +33,7 @@
     "display_instruction": "..." // string, the even shorter verb phrase describing the users' goal.
     "recommendation": "..." // string, explain why this recommendation is made
     "output_fields": [...] // string[], describe the desired output fields that the output data should have (i.e., the goal of transformed data), it's a good idea to preseve intermediate fields here
-    "chart_type": "" // string, one of "point", "bar", "line", "area", "heatmap", "group_bar". "chart_type" should either be inferred from user instruction, or recommend if the user didn't specify any.
+    "chart_type": "" // string, one of "point", "bar", "line", "area", "heatmap", "group_bar", 'boxplot'. "chart_type" should either be inferred from user instruction, or recommend if the user didn't specify any.
     "chart_encodings": {
         "x": "",
         "y": "",
@@ -65,7 +65,7 @@
         - if you mention column names from the input or the output data, highlight the text in **bold**.
             * the column can either be a column in the input data, or a new column that will be computed in the output data.
             * the mention don't have to be exact match, it can be semantically matching, e.g., if you mentioned "average score" in the text while the column to be computed is "Avg_Score", you should still highlight "**average score**" in the text.
-    - "chart_type" must be one of "point", "bar", "line", "area", "heatmap", "group_bar"
+    - "chart_type" must be one of "point", "bar", "line", "area", "heatmap", "group_bar", "boxplot"
     - "chart_encodings" should specify which fields should be used to create the visualization
         - decide which visual channels should be used to create the visualization appropriate for the chart type.
             - point: x, y, color, size, facet
@@ -75,6 +75,7 @@
             - area: x, y, color, facet
             - heatmap: x, y, color, facet
             - group_bar: x, y, color, facet
+            - boxplot: x, y, color, facet
         - note that all fields used in "chart_encodings" should be included in "output_fields".
             - all fields you need for visualizations should be transformed into the output fields!
             - "output_fields" should include important intermediate fields that are not used in visualization but are used for data transformation.
@@ -108,6 +109,10 @@
                 - best for: Trends over time, continuous data
             - (heatmap) Heatmaps: x,y: Categorical (you need to convert quantitative to nominal), color: Quantitative intensity, 
                 - best for: Pattern discovery in matrix data
+            - (boxplot) Box plots: x: Categorical (nominal/ordinal), y: Quantitative, color: Categorical (optional for creating grouped boxplots), 
+                - best for: Distribution of a quantitative field
+                - use x values directly if x values are categorical, and transform the data into bins if the field values are quantitative.
+                - when color is specified, the boxplot will be grouped automatically (items with the same x values will be grouped).
         - facet channel is available for all chart types, it supports a categorical field with small cardinality to visualize the data in different facets.
         - if you really need additional legend fields:
             - you can use opacity for legend (support Quantitative and Categorical).
@@ -135,7 +140,7 @@
             
     2. Then, write a python function based on the inferred goal, the function input is a dataframe "df" (or multiple dataframes based on tables presented in the [CONTEXT] section) and the output is the transformed dataframe "transformed_df". 
 "transformed_df" should contain all "output_fields" from the refined user intent in the json object.
-The python function must follow the template provided in [TEMPLATE], do not import any other libraries or modify function name. The function should be as simple as possible and easily readable. 
+The python function must follow the template provided in [TEMPLATE]. The function should be as simple as possible and easily readable. 
 If there is no data transformation needed based on "output_fields", the transformation function can simply "return df".
 
 [TEMPLATE]
@@ -144,7 +149,7 @@
 import pandas as pd
 import collections
 import numpy as np
-from sklearn import ... # import necessary libraries from sklearn if needed
+# from sklearn import ... # import from sklearn if you need it.
 
 def transform_data(df1, df2, ...): 
     # complete the template here
diff --git a/py-src/data_formulator/agents/agent_py_data_transform.py b/py-src/data_formulator/agents/agent_py_data_transform.py
index 6bed538..b492857 100644
--- a/py-src/data_formulator/agents/agent_py_data_transform.py
+++ b/py-src/data_formulator/agents/agent_py_data_transform.py
@@ -89,7 +89,7 @@
 import pandas as pd
 import collections
 import numpy as np
-from sklearn import ... # import necessary libraries from sklearn if needed
+# from sklearn import ... # import from sklearn if you need it.
 
 def transform_data(df1, df2, ...): 
     # complete the template here
diff --git a/py-src/data_formulator/tables_routes.py b/py-src/data_formulator/tables_routes.py
index 74f31f2..b065e04 100644
--- a/py-src/data_formulator/tables_routes.py
+++ b/py-src/data_formulator/tables_routes.py
@@ -841,4 +841,86 @@ def data_loader_ingest_data_from_query():
         return jsonify({
             "status": "error", 
             "message": safe_msg
+        }), status_code
+
+
+@tables_bp.route('/refresh-derived-data', methods=['POST'])
+def refresh_derived_data():
+    """
+    Re-run Python transformation code with new input data to refresh a derived table.
+    
+    This endpoint takes:
+    - input_tables: list of {name: string, rows: list} objects representing the parent tables
+    - code: the Python transformation code to execute
+    
+    Returns:
+    - status: 'ok' or 'error'
+    - rows: the resulting rows if successful
+    - message: error message if failed
+    """
+    try:
+        from data_formulator.py_sandbox import run_transform_in_sandbox2020
+        from flask import current_app
+        
+        data = request.get_json()
+        input_tables = data.get('input_tables', [])
+        code = data.get('code', '')
+        
+        if not input_tables:
+            return jsonify({
+                "status": "error",
+                "message": "No input tables provided"
+            }), 400
+            
+        if not code:
+            return jsonify({
+                "status": "error", 
+                "message": "No transformation code provided"
+            }), 400
+        
+        # Convert input tables to pandas DataFrames
+        df_list = []
+        for table in input_tables:
+            table_name = table.get('name', '')
+            table_rows = table.get('rows', [])
+            
+            if not table_rows:
+                return jsonify({
+                    "status": "error",
+                    "message": f"Table '{table_name}' has no rows"
+                }), 400
+                
+            df = pd.DataFrame.from_records(table_rows)
+            df_list.append(df)
+        
+        # Get exec_python_in_subprocess setting from app config
+        exec_python_in_subprocess = current_app.config.get('CLI_ARGS', {}).get('exec_python_in_subprocess', False)
+        
+        # Run the transformation code
+        result = run_transform_in_sandbox2020(code, df_list, exec_python_in_subprocess)
+        
+        if result['status'] == 'ok':
+            result_df = result['content']
+            
+            # Convert result DataFrame to list of records
+            rows = json.loads(result_df.to_json(orient='records', date_format='iso'))
+            
+            return jsonify({
+                "status": "ok",
+                "rows": rows,
+                "message": "Successfully refreshed derived data"
+            })
+        else:
+            return jsonify({
+                "status": "error",
+                "message": result.get('content', 'Unknown error during transformation')
+            }), 400
+            
+    except Exception as e:
+        logger.error(f"Error refreshing derived data: {str(e)}")
+        logger.error(traceback.format_exc())
+        safe_msg, status_code = sanitize_db_error_message(e)
+        return jsonify({
+            "status": "error",
+            "message": safe_msg
         }), status_code
\ No newline at end of file
diff --git a/pyproject.toml b/pyproject.toml
index 71e11f8..37c8b16 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "data_formulator"
-version = "0.5.1"
+version = "0.5.1.1"
 
 requires-python = ">=3.9"
 authors = [
diff --git a/src/app/App.tsx b/src/app/App.tsx
index fdf0396..209f3ac 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -64,16 +64,12 @@ import { DictTable } from '../components/ComponentType';
 import { AppDispatch } from './store';
 import dfLogo from '../assets/df-logo.png';
 import { ModelSelectionButton } from '../views/ModelSelectionDialog';
-import { TableCopyDialogV2 } from '../views/TableSelectionView';
-import { TableUploadDialog } from '../views/TableSelectionView';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import UploadFileIcon from '@mui/icons-material/UploadFile';
 import DownloadIcon from '@mui/icons-material/Download';
-import { DBTableSelectionDialog, handleDBDownload } from '../views/DBTableManager';
-import CloudQueueIcon from '@mui/icons-material/CloudQueue';
+import { handleDBDownload } from '../views/DBTableManager';
 import { getUrls } from './utils';
-import { DataLoadingChatDialog } from '../views/DataLoadingChat';
+import { UnifiedDataUploadDialog } from '../views/UnifiedDataUploadDialog';
 import ChatIcon from '@mui/icons-material/Chat';
 import { AgentRulesDialog } from '../views/AgentRulesDialog';
 import ArticleIcon from '@mui/icons-material/Article';
@@ -220,85 +216,23 @@ export interface AppFCProps {
 
 // Extract menu components into separate components to prevent full app re-renders
 const TableMenu: React.FC = () => {
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-    const [openDialog, setOpenDialog] = useState<'database' | 'extract' | 'paste' | 'upload' | null>(null);
-    const fileInputRef = React.useRef<HTMLInputElement>(null);
-    const open = Boolean(anchorEl);
-
-    const handleOpenDialog = (dialog: 'database' | 'extract' | 'paste' | 'upload') => {
-        setAnchorEl(null);
-        if (dialog === 'upload') {
-            // For file upload, trigger the hidden file input
-            fileInputRef.current?.click();
-        } else {
-            setOpenDialog(dialog);
-        }
-    };
+    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
     
     return (
         <>
             <Button
                 variant="text"
-                onClick={(e) => setAnchorEl(e.currentTarget)}
-                endIcon={<KeyboardArrowDownIcon />}
-                aria-controls={open ? 'add-table-menu' : undefined}
-                aria-haspopup="true"
-                aria-expanded={open ? 'true' : undefined}
+                onClick={() => setDialogOpen(true)}
                 sx={{ textTransform: 'none' }}
             >
                 Data
             </Button>
-            <Menu
-                id="add-table-menu"
-                anchorEl={anchorEl}
-                open={open}
-                onClose={() => setAnchorEl(null)}
-                slotProps={{
-                    paper: { sx: { py: '4px', px: '8px' } }
-                }}
-                aria-labelledby="add-table-button"
-                sx={{ 
-                    '& .MuiMenuItem-root': { padding: '4px 8px' },
-                    '& .MuiTypography-root': { fontSize: 14, display: 'flex', alignItems: 'center', textTransform: 'none', gap: 1 }
-                }}
-            >
-                <MenuItem onClick={() => handleOpenDialog('database')}>
-                    <Typography fontSize="inherit">
-                        connect to database <CloudQueueIcon fontSize="inherit" /> 
-                    </Typography>
-                </MenuItem>
-                <MenuItem onClick={() => handleOpenDialog('extract')}>
-                    <Typography fontSize="inherit">
-                        extract data <span style={{fontSize: '11px'}}>(image/messy text)</span>
-                    </Typography>
-                </MenuItem>
-                <MenuItem onClick={() => handleOpenDialog('paste')}>
-                    <Typography>
-                        paste data <span style={{fontSize: '11px'}}>(csv/tsv)</span>
-                    </Typography>
-                </MenuItem>
-                <MenuItem onClick={() => handleOpenDialog('upload')}>
-                    <Typography>
-                        upload data file <span style={{fontSize: '11px'}}>(csv/tsv/json)</span>
-                    </Typography>
-                </MenuItem>
-            </Menu>
             
-            {/* Dialogs rendered outside the Menu to avoid keyboard event issues */}
-            <DBTableSelectionDialog 
-                open={openDialog === 'database'} 
-                onClose={() => setOpenDialog(null)} 
-            />
-            <DataLoadingChatDialog 
-                open={openDialog === 'extract'} 
-                onClose={() => setOpenDialog(null)} 
-            />
-            <TableCopyDialogV2 
-                open={openDialog === 'paste'} 
-                onClose={() => setOpenDialog(null)} 
-            />
-            <TableUploadDialog 
-                fileInputRef={fileInputRef}
+            {/* Unified Data Upload Dialog */}
+            <UnifiedDataUploadDialog 
+                open={dialogOpen}
+                onClose={() => setDialogOpen(false)}
+                initialTab="menu"
             />
         </>
     );
diff --git a/src/app/dfSlice.tsx b/src/app/dfSlice.tsx
index 393d134..7664b0f 100644
--- a/src/app/dfSlice.tsx
+++ b/src/app/dfSlice.tsx
@@ -475,6 +475,29 @@ export const dataFormulatorSlice = createSlice({
             let attachedMetadata = action.payload.attachedMetadata;
             state.tables = state.tables.map(t => t.id == tableId ? {...t, attachedMetadata} : t);
         },
+        updateTableRows: (state, action: PayloadAction<{tableId: string, rows: any[]}>) => {
+            // Update the rows of a table while preserving all other table properties
+            // This is used for refreshing data in original (non-derived) tables
+            let tableId = action.payload.tableId;
+            let newRows = action.payload.rows;
+            
+            state.tables = state.tables.map(t => {
+                if (t.id == tableId) {
+                    // Update metadata type inference based on new data
+                    let newMetadata = { ...t.metadata };
+                    for (let name of t.names) {
+                        if (newRows.length > 0 && name in newRows[0]) {
+                            newMetadata[name] = {
+                                ...newMetadata[name],
+                                type: inferTypeFromValueArray(newRows.map(r => r[name])),
+                            };
+                        }
+                    }
+                    return { ...t, rows: newRows, metadata: newMetadata };
+                }
+                return t;
+            });
+        },
         extendTableWithNewFields: (state, action: PayloadAction<{tableId: string, columnName: string, values: any[], previousName: string | undefined, parentIDs: string[]}>) => {
             // extend the existing extTable with new columns from the new table
             let newValues = action.payload.values;
diff --git a/src/app/store.ts b/src/app/store.ts
index 027f4ac..edc7c72 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -26,3 +26,6 @@ let store = configureStore({
 })
 
 export default store;
+
+// Export store instance for use in utilities
+export { store };
diff --git a/src/app/utils.tsx b/src/app/utils.tsx
index 8344af1..8ed501c 100644
--- a/src/app/utils.tsx
+++ b/src/app/utils.tsx
@@ -56,9 +56,125 @@ export function getUrls() {
         QUERY_COMPLETION: `/api/agent/query-completion`,
         GET_RECOMMENDATION_QUESTIONS: `/api/agent/get-recommendation-questions`,
         GENERATE_REPORT_STREAM: `/api/agent/generate-report-stream`,
+
+        // Refresh data endpoint
+        REFRESH_DERIVED_DATA: `/api/tables/refresh-derived-data`,
     };
 }
 
+/**
+ * List of API endpoints that require a session ID
+ * These endpoints will automatically fetch session ID if missing
+ */
+const SESSION_REQUIRED_ENDPOINTS = [
+    '/api/tables/upload-db-file',
+    '/api/tables/download-db-file',
+    '/api/tables/reset-db-file',
+    '/api/tables/list-tables',
+    '/api/tables/get-table',
+    '/api/tables/create-table',
+    '/api/tables/delete-table',
+    '/api/tables/analyze',
+    '/api/tables/sample-table',
+    '/api/tables/data-loader/list-tables',
+    '/api/tables/data-loader/ingest-data',
+    '/api/tables/data-loader/view-query-sample',
+    '/api/tables/data-loader/ingest-data-from-query',
+    '/api/tables/refresh-derived-data',
+];
+
+/**
+ * Enhanced fetch wrapper that automatically handles session ID at the app level
+ * If a request fails with "No session ID found" or similar errors,
+ * it will automatically fetch the session ID and retry the request
+ * 
+ * This function can be used as a drop-in replacement for fetch() in components
+ * that have access to Redux dispatch
+ * 
+ * @param url - The URL to fetch
+ * @param options - Fetch options (same as native fetch)
+ * @param dispatch - Redux dispatch function (optional, will try to get from store if not provided)
+ * @returns Promise<Response>
+ */
+export async function fetchWithSession(
+    url: string | URL,
+    options: RequestInit = {},
+    dispatch?: any
+): Promise<Response> {
+    const urlString = typeof url === 'string' ? url : url.toString();
+    
+    // Check if this endpoint requires session ID
+    const requiresSession = SESSION_REQUIRED_ENDPOINTS.some(endpoint => 
+        urlString.includes(endpoint)
+    );
+    
+    // Make the initial request
+    let response = await fetch(url, options);
+    
+    // If the response indicates a session ID issue, try to fetch it and retry
+    if (requiresSession && !response.ok) {
+        try {
+            const errorData = await response.clone().json().catch(() => null);
+            const errorMessage = errorData?.message || errorData?.error || '';
+            
+            // Check if error is related to missing session ID
+            if (errorMessage.toLowerCase().includes('session') && 
+                (errorMessage.toLowerCase().includes('not found') || 
+                 errorMessage.toLowerCase().includes('no session'))) {
+                
+                // Try to get dispatch from store if not provided
+                let dispatchFn = dispatch;
+                if (!dispatchFn) {
+                    try {
+                        const { store } = await import('./store');
+                        dispatchFn = store.dispatch;
+                    } catch (storeError) {
+                        console.error('Failed to access store:', storeError);
+                        // Return the original error response
+                        return response;
+                    }
+                }
+                
+                // Fetch session ID and retry
+                if (dispatchFn) {
+                    try {
+                        const { getSessionId } = await import('./dfSlice');
+                        // Dispatch the thunk and unwrap the result
+                        await dispatchFn(getSessionId()).unwrap();
+                        
+                        // Retry the original request
+                        response = await fetch(url, options);
+                    } catch (sessionError) {
+                        console.error('Failed to fetch session ID:', sessionError);
+                        // Return the original error response
+                    }
+                }
+            }
+        } catch (parseError) {
+            // If we can't parse the error, just return the original response
+        }
+    }
+    
+    return response;
+}
+
+/**
+ * React hook that provides a fetch function with automatic session ID handling
+ * Use this in components instead of native fetch for API calls that require session ID
+ * 
+ * @example
+ * const fetchWithSession = useFetchWithSession();
+ * const response = await fetchWithSession('/api/tables/list-tables');
+ */
+export function useFetchWithSession() {
+    // Dynamic import to avoid circular dependency
+    const { useDispatch } = require('react-redux');
+    const dispatch = useDispatch();
+    
+    return (url: string | URL, options: RequestInit = {}) => 
+        fetchWithSession(url, options, dispatch);
+}
+
 import * as vm from 'vm-browserify';
 import { generateFreshChart } from "./dfSlice";
 
diff --git a/src/data/utils.ts b/src/data/utils.ts
index 4c9743f..1b98deb 100644
--- a/src/data/utils.ts
+++ b/src/data/utils.ts
@@ -204,35 +204,47 @@ export const loadBinaryDataWrapper = async (title: string, arrayBuffer: ArrayBuf
         // Create tables for each sheet
         const tables: DictTable[] = [];
         
-        workbook.eachSheet((worksheet, sheetId) => {
-            const jsonData: any[] = [];
-            
-            // Get the first row as headers
-            const headerRow = worksheet.getRow(1);
-            const headers: string[] = [];
-            headerRow.eachCell((cell, colNumber) => {
-                headers[colNumber - 1] = cell.value?.toString() || `Column${colNumber}`;
-            });
-            
-            // Process data rows (skip header row)
-            worksheet.eachRow((row, rowNumber) => {
-                if (rowNumber === 1) return; // Skip header row
-                
-                const rowData: any = {};
-                row.eachCell((cell, colNumber) => {
-                    const header = headers[colNumber - 1] || `Column${colNumber}`;
-                    rowData[header] = cell.value;
+        workbook.eachSheet((worksheet) => {
+            try {
+                const jsonData: any[] = [];
+
+                // Get the first row as headers
+                const headerRow = worksheet.getRow(1);
+                const headers: string[] = [];
+                headerRow.eachCell((cell, colNumber) => {
+                    headers[colNumber - 1] = cell.value?.toString() || `Column${colNumber}`;
+                });
+
+                if (headers.length === 0) {
+                    return;
+                }
+
+                // Process data rows (skip header row)
+                worksheet.eachRow((row, rowNumber) => {
+                    if (rowNumber === 1) return; // Skip header row
+
+                    const rowData: any = {};
+                    row.eachCell((cell, colNumber) => {
+                        const header = headers[colNumber - 1] || `Column${colNumber}`;
+                        rowData[header] = cell.value;
+                    });
+
+                    // Only add row if it has data
+                    if (Object.keys(rowData).length > 0) {
+                        jsonData.push(rowData);
+                    }
                 });
-                
-                // Only add row if it has data
-                if (Object.keys(rowData).length > 0) {
-                    jsonData.push(rowData);
+
+                if (jsonData.length === 0) {
+                    return;
                 }
-            });
-            
-            // Create a table from the JSON data with sheet name included in the title
-            const sheetTable = createTableFromFromObjectArray(`${title}-${worksheet.name}`, jsonData, true);
-            tables.push(sheetTable);
+
+                // Create a table from the JSON data with sheet name included in the title
+                const sheetTable = createTableFromFromObjectArray(`${title}-${worksheet.name}`, jsonData, true);
+                tables.push(sheetTable);
+            } catch (error) {
+                console.error(`Error processing sheet ${worksheet.name}:`, error);
+            }
         });
         
         return tables;
diff --git a/src/scss/App.scss b/src/scss/App.scss
index 28edf46..31ca838 100644
--- a/src/scss/App.scss
+++ b/src/scss/App.scss
@@ -148,3 +148,26 @@ h2.view-title {
     transform-origin: bottom right;
     animation: writing-pencil 0.8s ease-in-out infinite;
 }
+
+// Fix MUI Dialog bottom scrolling issues
+.MuiDialog-paper {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100% - 64px);
+    
+    .MuiDialogTitle-root {
+        flex-shrink: 0;
+    }
+    
+    .MuiDialogContent-root {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+        box-sizing: border-box;
+        min-height: 0; // Ensures content can shrink in flex container
+    }
+    
+    .MuiDialogActions-root {
+        flex-shrink: 0;
+    }
+}
diff --git a/src/views/About.tsx b/src/views/About.tsx
index 8277733..689c076 100644
--- a/src/views/About.tsx
+++ b/src/views/About.tsx
@@ -1,16 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { Box, Typography, Button, useTheme, alpha, IconButton, Divider } from "@mui/material";
-import React, { FC, useState, useEffect, useRef } from "react";
-import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import { Box, Typography, Button, useTheme, alpha, Divider } from "@mui/material";
+import React, { FC } from "react";
 import GridViewIcon from '@mui/icons-material/GridView';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 import PrecisionManufacturingIcon from '@mui/icons-material/PrecisionManufacturing';
 
-import dfLogo from '../assets/df-logo.png';
 import { toolName } from "../app/App";
 import { useSelector } from "react-redux";
 import { DataFormulatorState } from "../app/dfSlice";
@@ -50,241 +47,129 @@ const features: Feature[] = [
     }
 ];
 
-const screenshots: {url: string, description: string}[] = [
-    {url: "/data-formulator-screenshot-v0.5.webp", description: "Explore consumer price trends from 2005 to 2025"},
-    {url: "/screenshot-movies-report.webp", description: "Report: Top directors by their revenue"},
-    {url: "/screenshot-renewable-energy.webp", description: "Renewable energy percentage by country"},
-    {url: '/screenshot-unemployment.webp', description: 'Report: Unemployment rate affected by 2008 financial crisis'},
-    {url: '/screenshot-claude-performance.webp', description: 'Compare Claude models\' performance on different tasks'},
-];
-
 export const About: FC<{}> = function About({ }) {
     const theme = useTheme();
-    const [currentFeature, setCurrentFeature] = useState(0);
-    const [currentScreenshot, setCurrentScreenshot] = useState(0);
-    const videoRef = useRef<HTMLVideoElement | null>(null);
-    const videoDurationsRef = useRef<Map<string, number>>(new Map());
-
-    const handlePrevious = () => {
-        setCurrentFeature((prev) => (prev === 0 ? features.length - 1 : prev - 1));
-    };
-
-    const handleNext = () => {
-        setCurrentFeature((prev) => (prev === features.length - 1 ? 0 : prev + 1));
-    };
-
-    // Auto-advance features based on video duration
-    useEffect(() => {
-        const currentMedia = features[currentFeature].media;
-        const isVideo = features[currentFeature].mediaType === 'video';
-        
-        // Default duration for images or if video duration is not yet loaded
-        let duration = 10000; // 10 seconds for images
-        
-        if (isVideo && videoDurationsRef.current.has(currentMedia)) {
-            // Use the stored video duration (in milliseconds)
-            duration = videoDurationsRef.current.get(currentMedia)! * 1000;
-            duration = duration + 3000; // add 3 seconds to the video duration
-        }
-
-        const timeoutId = setTimeout(() => {
-            setCurrentFeature((prev) => (prev + 1) % features.length);
-        }, duration);
-
-        return () => clearTimeout(timeoutId);
-    }, [currentFeature]);
-
-    // Preload adjacent carousel items for smoother transitions
-    useEffect(() => {
-        const preloadMedia = (index: number) => {
-            const feature = features[index];
-            if (feature.mediaType === 'video') {
-                const video = document.createElement('video');
-                video.src = feature.media;
-                video.preload = 'metadata';
-            } else {
-                const img = new Image();
-                img.src = feature.media;
-            }
-        };
-
-        // Preload next and previous features
-        const nextIndex = (currentFeature + 1) % features.length;
-        const prevIndex = currentFeature === 0 ? features.length - 1 : currentFeature - 1;
-        
-        preloadMedia(nextIndex);
-        preloadMedia(prevIndex);
-
-        // Preload next and previous screenshots
-        const nextScreenshot = (currentScreenshot + 1) % screenshots.length;
-        const prevScreenshot = currentScreenshot === 0 ? screenshots.length - 1 : currentScreenshot - 1;
-        
-        const img1 = new Image();
-        img1.src = screenshots[nextScreenshot].url;
-        const img2 = new Image();
-        img2.src = screenshots[prevScreenshot].url;
-    }, [currentFeature, currentScreenshot]);
-
     const serverConfig = useSelector((state: DataFormulatorState) => state.serverConfig);
 
     let actionButtons = !serverConfig.PROJECT_FRONT_PAGE ? (
-        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 1, mb: 4, flexWrap: 'wrap' }}>
+        <Box component="nav" aria-label="Primary actions" sx={{ display: 'flex', justifyContent: 'center', gap: 1.5, mb: 4, flexWrap: 'wrap' }}>
             <Button size="large" variant="contained" color="primary" 
-                startIcon={<PrecisionManufacturingIcon sx={{ fontSize: '1rem' }} />}
+                startIcon={<PrecisionManufacturingIcon aria-hidden="true" />}
                 href="/app"
             >Start Exploration</Button>
         </Box>
     ) : (
-        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, mb: 4, flexWrap: 'wrap', '.MuiButton-root': { textTransform: 'none' } }}>
+        <Box component="nav" aria-label="Primary actions" sx={{ display: 'flex', justifyContent: 'center', gap: 1.5, mb: 4, flexWrap: 'wrap' }}>
             <Button size="large" variant="outlined" color="primary" 
-                startIcon={<YouTubeIcon sx={{ fontSize: '1rem', color: '#FF0000' }} />}
+                sx={{ textTransform: 'none' }}
+                startIcon={<Box component="img" sx={{ width: 20, height: 20 }} alt="" aria-hidden="true" src="/pip-logo.svg" />}
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://www.youtube.com/watch?v=GfTE2FLyMrs"
-            >What's New in v0.5?</Button>
+                aria-label="Install Locally via pip (opens in new tab)"
+                href="https://pypi.org/project/data-formulator/"
+            >Install Locally</Button>
+            <Button size="large" variant="contained" color="primary" 
+                sx={{ textTransform: 'none' }}
+                startIcon={<GridViewIcon aria-hidden="true" />}
+                href="/app"
+            >Try Online Demo</Button>
             <Button size="large" variant="outlined" color="primary" 
-                startIcon={<GitHubIcon sx={{ fontSize: '1rem', color: '#000000' }} />}
+                sx={{ textTransform: 'none' }}
+                startIcon={<YouTubeIcon sx={{ color: '#FF0000' }} aria-hidden="true" />}
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://github.com/microsoft/data-formulator"
-            >GitHub</Button>
-            <Divider orientation="vertical" sx={{ mx: 1 }} flexItem />
+                aria-label="Watch Video on YouTube (opens in new tab)"
+                href="https://www.youtube.com/watch?v=GfTE2FLyMrs"
+            >Video</Button>
             <Button size="large" variant="outlined" color="primary" 
-                startIcon={<Box component="img" sx={{ width: 24, height: 24 }} alt="" src="/pip-logo.svg" />}
+                sx={{ textTransform: 'none' }}
+                startIcon={<GitHubIcon aria-hidden="true" />}
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://pypi.org/project/data-formulator/"
-            >Install Locally</Button>
-            <Button size="large" variant="outlined" color="primary" 
-                sx={{
-                    animation: 'subtleGlow 2s ease-in-out infinite',
-                    '@keyframes subtleGlow': {
-                        '0%, 100%': {
-                            boxShadow: `0 0 8px ${alpha(theme.palette.primary.main, 0.4)}, 0 0 16px ${alpha(theme.palette.primary.main, 0.2)}`,
-                        },
-                        '50%': {
-                            boxShadow: `0 0 12px ${alpha(theme.palette.primary.main, 0.6)}, 0 0 24px ${alpha(theme.palette.primary.main, 0.3)}, 0 0 32px ${alpha(theme.palette.primary.main, 0.1)}`,
-                        }
-                    },
-                    '&:hover': {
-                        animation: 'subtleGlow 1.5s ease-in-out infinite',
-                        boxShadow: `0 0 16px ${alpha(theme.palette.primary.main, 0.7)}, 0 0 32px ${alpha(theme.palette.primary.main, 0.4)} !important`,
-                    }
-                }}
-                startIcon={<GridViewIcon sx={{ fontSize: '1rem' }} />}
-                href="/app"
-            >Try Online Demo</Button>
-            <Typography variant="caption" sx={{ mt: 1.5, color: 'text.secondary', fontStyle: 'italic' }}>
-                Psst — install locally for the full experience ✨. The online demo has limited features (at the moment).
-            </Typography>
+                aria-label="View on GitHub (opens in new tab)"
+                href="https://github.com/microsoft/data-formulator"
+            >GitHub</Button>
         </Box>
     );
 
     return (
-        <Box sx={{
-            display: "flex", 
-            flexDirection: "column", 
-            textAlign: "center", 
-            overflowY: "auto",
-            width: '100%',
-            height: '100%',
-            background: `
-                linear-gradient(90deg, ${alpha(theme.palette.text.secondary, 0.01)} 1px, transparent 1px),
-                linear-gradient(0deg, ${alpha(theme.palette.text.secondary, 0.01)} 1px, transparent 1px)
-            `,
-            backgroundSize: '16px 16px',
-        }}>
-            <Box sx={{margin:'auto', pb: '5%', display: "flex", flexDirection: "column", textAlign: "center", maxWidth: 1200}}>
-                {/* Header with logo and title */}
-                <Box sx={{display: 'flex', mx: 'auto', mt: 4}}>
-                    <Typography fontSize={84} sx={{ml: 2, letterSpacing: '0.05em'}}>{toolName}</Typography> 
+        <Box 
+            component="main"
+            role="main"
+            sx={{
+                display: "flex", 
+                flexDirection: "column", 
+                overflowY: "auto",
+                width: '100%',
+                height: '100%',
+                background: `
+                    linear-gradient(90deg, ${alpha(theme.palette.text.secondary, 0.01)} 1px, transparent 1px),
+                    linear-gradient(0deg, ${alpha(theme.palette.text.secondary, 0.01)} 1px, transparent 1px)
+                `,
+                backgroundSize: '16px 16px',
+            }}
+        >
+            <Box sx={{margin:'auto', py: 4, display: "flex", flexDirection: "column", textAlign: "center", maxWidth: 1000, width: '100%', px: 3}}>
+                {/* Header with title */}
+                <Box component="header" sx={{display: 'flex', flexDirection: 'column', mx: 'auto', mt: 2}}>
+                    <Typography component="h1" fontSize={84} sx={{letterSpacing: '0.05em'}}>{toolName}</Typography> 
+                    <Typography component="p" sx={{ 
+                        fontSize: 24, color: theme.palette.text.secondary, 
+                        textAlign: 'center', mb: 4}}>
+                        Explore data with visualizations, powered by AI agents. 
+                    </Typography>
                 </Box>
-                <Typography sx={{ 
-                    fontSize: 24, color: theme.palette.text.secondary, 
-                    textAlign: 'center', mb: 4}}>
-                    Explore data with visualizations, powered by AI agents. 
-                </Typography>
                 
                 {actionButtons}
 
-                {/* Interactive Features Carousel */}
-                <Box sx={{
-                    mx: 'auto',
-                    maxWidth: 1200,
-                    borderRadius: 3, 
-                    position: 'relative',
-                }}>
-                    <Box sx={{ 
-                        display: 'flex', 
-                        alignItems: 'center', 
-                        gap: 3,
-                        height: '40vh',
-                        minHeight: 320,
-                    }}>
-                        {/* Left Arrow */}
-                        <IconButton 
-                            onClick={handlePrevious}
+                {/* Features Grid - 2 columns, 4 rows */}
+                <Box 
+                    component="section" 
+                    aria-label="Features"
+                    sx={{ display: 'flex', flexDirection: 'column', gap: 5, mt: 2 }}
+                >
+                    {features.map((feature, index) => (
+                        <Box 
+                            component="article"
+                            key={index}
+                            aria-labelledby={`feature-title-${index}`}
                             sx={{ 
-                                flexShrink: 0,
-                                bgcolor: alpha(theme.palette.primary.main, 0.1),
-                                '&:hover': {
-                                    bgcolor: alpha(theme.palette.primary.main, 0.2),
-                                }
+                                display: 'flex', 
+                                flexDirection: index % 2 === 0 ? 'row' : 'row-reverse',
+                                gap: 4,
+                                alignItems: 'center',
                             }}
                         >
-                            <ArrowBackIosNewIcon />
-                        </IconButton>
-
-                        {/* Feature Content */}
-                        <Box sx={{ 
-                            flex: 1, 
-                            display: 'flex', 
-                            flexDirection: 'row',
-                            gap: 4,
-                            alignItems: 'center',
-                        }}>
                             {/* Text Content */}
                             <Box sx={{ 
                                 flex: 1,
-                                textAlign: 'left',
-                                minWidth: 300,
+                                textAlign: index % 2 === 0 ? 'left' : 'right',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'center',
                             }}>
                                 <Typography 
-                                    variant="h4" 
-                                    sx={{ mb: 2 }}
+                                    component="h2"
+                                    id={`feature-title-${index}`}
+                                    sx={{ 
+                                        fontSize: 28,
+                                        fontWeight: 500,
+                                        mb: 1.5,
+                                        color: theme.palette.text.primary,
+                                    }}
                                 >
-                                    {features[currentFeature].title}
+                                    {feature.title}
                                 </Typography>
                                 <Typography 
-                                    variant="body1" 
-                                    sx={{ color: 'text.secondary', lineHeight: 1.8 }}
+                                    component="p"
+                                    sx={{ 
+                                        fontSize: 17,
+                                        color: 'text.secondary', 
+                                        lineHeight: 1.7,
+                                    }}
                                 >
-                                    {features[currentFeature].description}
+                                    {feature.description}
                                 </Typography>
-                                
-                                {/* Feature Indicators */}
-                                <Box sx={{ display: 'flex', gap: 1, mt: 3 }}>
-                                    {features.map((_, index) => (
-                                        <Box
-                                            key={index}
-                                            onClick={() => setCurrentFeature(index)}
-                                            sx={{
-                                                width: 32,
-                                                height: 4,
-                                                borderRadius: 2,
-                                                bgcolor: index === currentFeature 
-                                                    ? theme.palette.primary.main 
-                                                    : alpha(theme.palette.text.secondary, 0.2),
-                                                cursor: 'pointer',
-                                                '&:hover': {
-                                                    bgcolor: index === currentFeature 
-                                                        ? theme.palette.primary.main 
-                                                        : alpha(theme.palette.text.secondary, 0.4),
-                                                }
-                                            }}
-                                        />
-                                    ))}
-                                </Box>
                             </Box>
 
                             {/* Media Content */}
@@ -292,30 +177,18 @@ export const About: FC<{}> = function About({ }) {
                                 flex: 1,
                                 borderRadius: 2,
                                 overflow: 'hidden',
-                                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
-                                minWidth: 300,
-                                maxWidth: 500,
+                                border: '1px solid rgba(0,0,0,0.1)',
                             }}>
-                                {features[currentFeature].mediaType === 'video' ? (
+                                {feature.mediaType === 'video' ? (
                                     <Box
                                         component="video"
-                                        key={features[currentFeature].media}
-                                        src={features[currentFeature].media}
-                                        ref={videoRef}
+                                        src={feature.media}
                                         autoPlay
                                         loop
                                         muted
                                         playsInline
                                         preload="metadata"
-                                        onLoadedMetadata={(e) => {
-                                            const video = e.currentTarget as HTMLVideoElement;
-                                            if (video.duration && !isNaN(video.duration)) {
-                                                videoDurationsRef.current.set(
-                                                    features[currentFeature].media,
-                                                    video.duration
-                                                );
-                                            }
-                                        }}
+                                        aria-label={`Video demonstration: ${feature.title}`}
                                         sx={{
                                             width: '100%',
                                             height: 'auto',
@@ -325,8 +198,8 @@ export const About: FC<{}> = function About({ }) {
                                 ) : (
                                     <Box
                                         component="img"
-                                        src={features[currentFeature].media}
-                                        alt={features[currentFeature].title}
+                                        src={feature.media}
+                                        alt={feature.title}
                                         loading="lazy"
                                         sx={{
                                             width: '100%',
@@ -337,161 +210,48 @@ export const About: FC<{}> = function About({ }) {
                                 )}
                             </Box>
                         </Box>
-
-                        {/* Right Arrow */}
-                        <IconButton 
-                            onClick={handleNext}
-                            sx={{ 
-                                flexShrink: 0,
-                                bgcolor: alpha(theme.palette.primary.main, 0.1),
-                                '&:hover': {
-                                    bgcolor: alpha(theme.palette.primary.main, 0.2),
-                                }
-                            }}
-                        >
-                            <ArrowForwardIosIcon />
-                        </IconButton>
-                    </Box>
-                </Box>
-                
-                {/* Screenshots Carousel Section */}
-                <Box sx={{ mt: 6, mx: 2 }}>
-                    <Box sx={{ 
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        gap: 3
-                    }}>
-                        {/* Screenshot Container */}
-                        <Box 
-                            key={currentScreenshot}
-                            onClick={() => setCurrentScreenshot((currentScreenshot + 1) % screenshots.length)}
-                            sx={{
-                                height: 680,
-                                width: 'auto',
-                                borderRadius: 8,
-                                cursor: 'pointer',
-                                overflow: 'hidden',
-                                border: '1px solid rgba(0,0,0,0.1)',
-                                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
-                                position: 'relative',
-                                display: 'flex',
-                                justifyContent: 'center',
-                                textDecoration: 'none',
-                                animation: 'fadeSlideIn 0.1s ease-out',
-                                '&:hover': {
-                                    boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
-                                    '& .description-overlay': {
-                                        opacity: 1,
-                                    }
-                                }
-                            }}
-                        >
-                            <Box 
-                                component="img" 
-                                sx={{
-                                    display: 'block',
-                                    clipPath: 'inset(2px 0 0 0)'
-                                }} 
-                                alt={screenshots[currentScreenshot].description} 
-                                src={screenshots[currentScreenshot].url}
-                                loading="lazy"
-                            />
-                            <Box
-                                className="description-overlay"
-                                sx={{
-                                    position: 'absolute',
-                                    bottom: 0,
-                                    left: 0,
-                                    right: 0,
-                                    backgroundColor: 'rgba(250, 250, 250, 0.6)',
-                                    backdropFilter: 'blur(8px)',
-                                    padding: 2,
-                                    opacity: 0,
-                                    transition: 'opacity 0.3s ease',
-                                }}
-                            >
-                                <Typography 
-                                    variant="body1" 
-                                    color="text.secondary"
-                                    sx={{ 
-                                        fontSize: '2rem',
-                                        fontWeight: 400,
-                                        textAlign: 'center'
-                                    }}
-                                >
-                                    {screenshots[currentScreenshot].description}
-                                </Typography>
-                            </Box>
-                        </Box>
-
-                        {/* Screenshot Indicators */}
-                        <Box sx={{ display: 'flex', gap: 1 }}>
-                            {screenshots.map((_, index) => (
-                                <Box
-                                    key={index}
-                                    onClick={() => setCurrentScreenshot(index)}
-                                    sx={{
-                                        width: 32,
-                                        height: 4,
-                                        borderRadius: 2,
-                                        bgcolor: index === currentScreenshot 
-                                            ? theme.palette.primary.main 
-                                            : alpha(theme.palette.text.secondary, 0.2),
-                                        cursor: 'pointer',
-                                        transition: 'all 0.3s ease',
-                                        '&:hover': {
-                                            bgcolor: index === currentScreenshot 
-                                                ? theme.palette.primary.main 
-                                                : alpha(theme.palette.text.secondary, 0.4),
-                                        }
-                                    }}
-                                />
-                            ))}
-                        </Box>
-                    </Box>
+                    ))}
                 </Box>
 
                 <Box sx={{ mt: 6, mx: 2 }}>
-                    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                        <Typography variant="caption">
-                            How does Data Formulator handle your data?
-                        </Typography>
-                        <Typography 
-                            variant="caption" 
-                            sx={{ mt: 1, textAlign: 'left' }}
-                        >
-                            <li><strong>Data Storage:</strong> Uploaded data (csv, xlsx, json, clipboard, messy data etc.) is stored in browser's local storage only</li>
-                            <li><strong>Data Processing:</strong> Local installation runs Python on your machine; online demo sends the data to server for data transformations (but not stored)</li>
-                            <li><strong>Database:</strong> Only available for locally installed Data Formulator (a DuckDB database file is created in temp directory to store data); not available in online demo</li>
-                            <li><strong>LLM Endpoints:</strong> Small data samples are sent to LLM endpoints along with the prompt. Use your trusted model provider if working with private data.</li>
-                        </Typography>
-                        <Typography variant="caption" sx={{ mt: 4, color: 'text.secondary' }}>
-                            Research Prototype from Microsoft Research
-                        </Typography>
-                    </Box>
+                    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                        <strong>Data handling:</strong> Data stored in browser only • Local install runs Python locally; online demo processes server-side (not stored) • LLM receives small samples with prompts
+                    </Typography>
+                    <Typography variant="body2" sx={{ display: 'block', mt: 1, color: 'text.secondary' }}>
+                        Research Prototype from Microsoft Research
+                    </Typography>
                 </Box>
             </Box>
 
             {/* Footer */}
-            <Box sx={{ color: 'text.secondary', display: 'flex', 
-                        backgroundColor: 'rgba(255, 255, 255, 0.89)',
-                        alignItems: 'center', justifyContent: 'center' }}>
+            <Box 
+                component="footer"
+                role="contentinfo"
+                sx={{ color: 'text.secondary', display: 'flex', 
+                    backgroundColor: 'rgba(255, 255, 255, 0.89)',
+                    alignItems: 'center', justifyContent: 'center' }}
+            >
                 <Button size="small" color="inherit" 
-                        sx={{ textTransform: 'none'}} 
-                        target="_blank" rel="noopener noreferrer" 
+                        sx={{ textTransform: 'none' }} 
+                        target="_blank" 
+                        rel="noopener noreferrer" 
+                        aria-label="Privacy & Cookies (opens in new tab)"
                         href="https://www.microsoft.com/en-us/privacy/privacystatement">Privacy & Cookies</Button>
-                <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} />
+                <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} aria-hidden="true" />
                 <Button size="small" color="inherit" 
-                        sx={{ textTransform: 'none'}} 
-                        target="_blank" rel="noopener noreferrer" 
+                        sx={{ textTransform: 'none' }} 
+                        target="_blank" 
+                        rel="noopener noreferrer" 
+                        aria-label="Terms of Use (opens in new tab)"
                         href="https://www.microsoft.com/en-us/legal/intellectualproperty/copyright">Terms of Use</Button>
-                <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} />
+                <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} aria-hidden="true" />
                 <Button size="small" color="inherit" 
-                        sx={{ textTransform: 'none'}} 
-                        target="_blank" rel="noopener noreferrer" 
+                        sx={{ textTransform: 'none' }} 
+                        target="_blank" 
+                        rel="noopener noreferrer" 
+                        aria-label="Contact Us (opens in new tab)"
                         href="https://github.com/microsoft/data-formulator/issues">Contact Us</Button>
-                <Typography sx={{ display: 'inline', fontSize: '12px', ml: 1 }}> @ {new Date().getFullYear()}</Typography>
+                <Typography component="span" sx={{ fontSize: '12px', ml: 1 }}>© {new Date().getFullYear()}</Typography>
             </Box>
         </Box>)
 }
diff --git a/src/views/ChartRecBox.tsx b/src/views/ChartRecBox.tsx
index 943f833..850631b 100644
--- a/src/views/ChartRecBox.tsx
+++ b/src/views/ChartRecBox.tsx
@@ -69,111 +69,6 @@ export interface ChartRecBoxProps {
     sx?: SxProps;
 }
 
-// Table selector component for ChartRecBox
-const NLTableSelector: FC<{
-    selectedTableIds: string[],
-    tables: DictTable[],
-    updateSelectedTableIds: (tableIds: string[]) => void,
-    requiredTableIds?: string[]
-}> = ({ selectedTableIds, tables, updateSelectedTableIds, requiredTableIds = [] }) => {
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-    const open = Boolean(anchorEl);
-
-    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
-
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const handleTableSelect = (table: DictTable) => {
-        if (!selectedTableIds.includes(table.id)) {
-            updateSelectedTableIds([...selectedTableIds, table.id]);
-        }
-        handleClose();
-    };
-
-    return (
-        <Box sx={{ 
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '2px',
-            padding: '4px',
-            marginBottom: 0.5,
-        }}>
-            {selectedTableIds.map((tableId) => {
-                const isRequired = requiredTableIds.includes(tableId);
-                return (
-                    <Chip
-                        key={tableId}
-                        label={tables.find(t => t.id == tableId)?.displayId}
-                        size="small"
-                        sx={{
-                            height: 16,
-                            fontSize: '10px',
-                            borderRadius: '2px',
-                            bgcolor: isRequired ? 'rgba(25, 118, 210, 0.2)' : 'rgba(25, 118, 210, 0.1)',
-                            color: 'rgba(0, 0, 0, 0.7)',
-                            '& .MuiChip-label': {
-                                pl: '4px',
-                                pr: '6px'
-                            }
-                        }}
-                        deleteIcon={isRequired ? undefined : <CloseIcon sx={{ fontSize: '8px', width: '12px', height: '12px' }} />}
-                        onDelete={isRequired ? undefined : () => updateSelectedTableIds(selectedTableIds.filter(id => id !== tableId))}
-                    />
-                );
-            })}
-            <Tooltip title="select tables for data formulation">
-                <IconButton
-                    size="small"
-                    onClick={handleClick}
-                    sx={{ 
-                        width: 16,
-                        height: 16,
-                        fontSize: '10px',
-                        padding: 0
-                    }}
-                >
-                    <AddIcon fontSize="inherit" />
-                </IconButton>
-            </Tooltip>
-            <Menu
-                anchorEl={anchorEl}
-                open={open}
-                onClose={handleClose}
-            >
-                {tables
-                    .filter(t => t.derive === undefined || t.anchored)
-                    .map((table) => {
-                        const isSelected = selectedTableIds.includes(table.id);
-                        const isRequired = requiredTableIds.includes(table.id);
-                        return (
-                            <MenuItem 
-                                disabled={isSelected}
-                                key={table.id}
-                                onClick={() => handleTableSelect(table)}
-                                sx={{ 
-                                    fontSize: '12px',
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    alignItems: 'center'
-                                }}
-                            >
-                                {table.displayId}
-                                {isRequired && <Typography sx={{ fontSize: '10px', color: 'text.secondary' }}>(required)</Typography>}
-                            </MenuItem>
-                        );
-                    })
-                }
-            </Menu>
-        </Box>
-    );
-};
-
-
-
 export const IdeaChip: FC<{
     mini?: boolean,
     idea: {text?: string, questions?: string[], goal: string, difficulty: 'easy' | 'medium' | 'hard', type?: 'branch' | 'deep_dive'} 
@@ -357,17 +252,11 @@ export const ChartRecBox: FC<ChartRecBoxProps> = function ({ tableId, placeHolde
     const currentTable = tables.find(t => t.id === tableId);
 
     const availableTables = tables.filter(t => t.derive === undefined || t.anchored);
-    const [additionalTableIds, setAdditionalTableIds] = useState<string[]>([]);
-
+  
     // Combine the main tableId with additional selected tables
-    const selectedTableIds = currentTable?.derive ? [...currentTable.derive.source, ...additionalTableIds] : [tableId, ...additionalTableIds];
-
-    const handleTableSelectionChange = (newTableIds: string[]) => {
-        // Filter out the main tableId since it's always included
-        const additionalIds = newTableIds.filter(id => id !== tableId);
-        setAdditionalTableIds(additionalIds);
-    };
-
+    let selectedTableIds = currentTable?.derive ? [...currentTable.derive.source] : [tableId];
+    selectedTableIds = [...selectedTableIds, ...availableTables.map(t => t.id).filter(id => !selectedTableIds.includes(id))];
+    
     // Function to get a question from the list with cycling
     const getQuestion = (): string => {
         return mode === "agent" ? "let's explore something interesting about the data" : "show something interesting about the data";
@@ -1238,17 +1127,6 @@ export const ChartRecBox: FC<ChartRecBoxProps> = function ({ tableId, placeHolde
                         }} 
                     />
                 )}
-                {showTableSelector && (
-                    <Box>
-                        <NLTableSelector
-                            selectedTableIds={selectedTableIds}
-                            tables={availableTables}
-                            updateSelectedTableIds={handleTableSelectionChange}
-                            requiredTableIds={[tableId]}
-                        />
-                    </Box>
-                )}
-
                 <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'flex-end' }}>
                     <TextField
                         variant="standard"
@@ -1268,7 +1146,10 @@ export const ChartRecBox: FC<ChartRecBoxProps> = function ({ tableId, placeHolde
                             "& .MuiInput-underline:not(.Mui-disabled):before": {
                                 borderBottom: 'none',
                             },
-                            "& .MuiInput-underline:(.Mui-disabled):before": {
+                            "& .MuiInput-underline.Mui-disabled:before": {
+                                borderBottom: 'none',
+                            },
+                            "& .MuiInput-underline.Mui-disabled:after": {
                                 borderBottom: 'none',
                             },
                             "& .MuiInput-underline:after": {
diff --git a/src/views/DBTableManager.tsx b/src/views/DBTableManager.tsx
index da5bc8c..8d09016 100644
--- a/src/views/DBTableManager.tsx
+++ b/src/views/DBTableManager.tsx
@@ -1,5 +1,5 @@
 // TableManager.tsx
-import React, { useState, useEffect, FC } from 'react';
+import React, { useState, useEffect, useCallback, FC, useRef } from 'react';
 import { 
   Card, 
   CardContent, 
@@ -9,13 +9,7 @@ import {
   Box,
   IconButton,
   Paper,
-  Tabs,
-  Tab,
   TextField,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
   Divider,
   SxProps,
   Table,
@@ -26,29 +20,29 @@ import {
   TableRow,
   CircularProgress,
   ButtonGroup,
+  ToggleButton,
+  ToggleButtonGroup,
   Tooltip,
   MenuItem,
+  Menu,
   Chip,
   Collapse,
   styled,
-  ToggleButtonGroup,
-  ToggleButton,
   useTheme,
   Link,
-  Checkbox
+  Checkbox,
+  Popover
 } from '@mui/material';
 
 import DeleteIcon from '@mui/icons-material/Delete';
 import CloseIcon from '@mui/icons-material/Close';
-import AnalyticsIcon from '@mui/icons-material/Analytics';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import TableRowsIcon from '@mui/icons-material/TableRows';
 import RefreshIcon from '@mui/icons-material/Refresh';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import SearchIcon from '@mui/icons-material/Search';
 
-import { getUrls } from '../app/utils';
+import { getUrls, fetchWithSession } from '../app/utils';
 import { CustomReactTable } from './ReactTable';
 import { DictTable } from '../components/ComponentType';
 import { Type } from '../data/types';
@@ -58,27 +52,68 @@ import { alpha } from '@mui/material';
 import { DataFormulatorState } from '../app/dfSlice';
 import { fetchFieldSemanticType } from '../app/dfSlice';
 import { AppDispatch } from '../app/store';
-import Editor from 'react-simple-code-editor';
 import Markdown from 'markdown-to-jsx';
 
-import Prism from 'prismjs'
-import 'prismjs/components/prism-javascript' // Language
-import 'prismjs/themes/prism.css'; //Example style, you can use another
-import PrecisionManufacturingIcon from '@mui/icons-material/PrecisionManufacturing';
 import CheckIcon from '@mui/icons-material/Check';
 import MuiMarkdown from 'mui-markdown';
 import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import DownloadIcon from '@mui/icons-material/Download';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import StorageIcon from '@mui/icons-material/Storage';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import SettingsIcon from '@mui/icons-material/Settings';
 
-export const handleDBDownload = async (sessionId: string) => {
+// Industry-standard database icons
+const TableIcon: React.FC<{ sx?: SxProps }> = ({ sx }) => (
+    <Box
+        component="svg"
+        viewBox="0 0 16 16"
+        sx={{
+            width: 16,
+            height: 16,
+            ...sx
+        }}
+    >
+        {/* Single rectangle with grid lines - standard table icon */}
+        <rect x="2" y="2" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.2" rx="0.5"/>
+        <line x1="2" y1="6" x2="14" y2="6" stroke="currentColor" strokeWidth="1"/>
+        <line x1="2" y1="10" x2="14" y2="10" stroke="currentColor" strokeWidth="1"/>
+        <line x1="6" y1="2" x2="6" y2="14" stroke="currentColor" strokeWidth="1"/>
+        <line x1="10" y1="2" x2="10" y2="14" stroke="currentColor" strokeWidth="1"/>
+    </Box>
+);
+
+const ViewIcon: React.FC<{ sx?: SxProps }> = ({ sx }) => (
+    <Box
+        component="svg"
+        viewBox="0 0 16 16"
+        sx={{
+            width: 16,
+            height: 16,
+            ...sx
+        }}
+    >
+        {/* Two overlapping rectangles - standard view icon */}
+        <rect x="2" y="2" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.2" rx="0.5" opacity="0.8"/>
+        <rect x="4" y="4" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.2" rx="0.5"/>
+    </Box>
+);
+
+export const handleDBDownload = async (sessionId: string, dispatch?: any) => {
     try {
-        const response = await fetch(getUrls().DOWNLOAD_DB_FILE, {
-            method: 'GET',
-        });
+        // Use fetchWithSession which automatically handles session ID if missing
+        const response = await fetchWithSession(
+            getUrls().DOWNLOAD_DB_FILE,
+            { method: 'GET' },
+            dispatch
+        );
         
         // Check if the response is ok
         if (!response.ok) {
             const errorData = await response.json();
-            throw new Error(errorData.error || 'Failed to download database file');
+            throw new Error(errorData.error || errorData.message || 'Failed to download database file');
         }
 
         // Get the blob directly from response
@@ -88,7 +123,7 @@ export const handleDBDownload = async (sessionId: string) => {
         // Create a temporary link element
         const link = document.createElement('a');
         link.href = url;
-        link.download = `df_${sessionId?.slice(0, 4)}.db`;
+        link.download = `df_${sessionId?.slice(0, 4) || 'db'}.db`;
         document.body.appendChild(link);    
         
         // Trigger download
@@ -126,116 +161,9 @@ interface ColumnStatistics {
     };
 }
 
-interface TableStatisticsViewProps {
-    tableName: string;
-    columnStats: ColumnStatistics[];
-}
-
-export class TableStatisticsView extends React.Component<TableStatisticsViewProps> {
-    render() {
-        const { tableName, columnStats } = this.props;
-
-        // Common styles for header cells
-        const headerCellStyle = {
-            backgroundColor: '#fff',
-            fontSize: 10,
-            color: "#333",
-            borderBottomColor: (theme: any) => theme.palette.primary.main,
-            borderBottomWidth: '1px',
-            borderBottomStyle: 'solid',
-            padding: '6px' 
-        };
-        
-        // Common styles for body cells
-        const bodyCellStyle = { 
-            fontSize: 10, 
-            padding: '6px' 
-        };
-        
-        return (
-            <Box sx={{ 
-                height: '310px',  // Match the table container height from CustomReactTable
-                display: 'flex', 
-                flexDirection: 'column' 
-            }}>
-                <TableContainer sx={{ 
-                    flex: 1, 
-                    maxHeight: '310px',  // Adjust to account for the header
-                    overflow: 'auto' 
-                }}>
-                    <Table size="small" stickyHeader>
-                        <TableHead>
-                            <TableRow>
-                                <TableCell sx={{...headerCellStyle, backgroundColor: "#f7f7f7", fontWeight: "bold"}}>Column</TableCell>
-                                <TableCell sx={headerCellStyle}>Type</TableCell>
-                                <TableCell align="right" sx={headerCellStyle}>Count</TableCell>
-                                <TableCell align="right" sx={headerCellStyle}>Unique</TableCell>
-                                <TableCell align="right" sx={headerCellStyle}>Null</TableCell>
-                                <TableCell align="right" sx={headerCellStyle}>Min</TableCell>
-                                <TableCell align="right" sx={headerCellStyle}>Max</TableCell>
-                                <TableCell align="right" sx={headerCellStyle}>Avg</TableCell>
-                            </TableRow>
-                        </TableHead>
-                        <TableBody>
-                            {columnStats.map((stat, idx) => (
-                                <TableRow 
-                                    key={stat.column} 
-                                    hover
-                                    sx={{ }}
-                                >
-                                    <TableCell 
-                                        component="th" 
-                                        scope="row" 
-                                        sx={{...bodyCellStyle, fontWeight: "bold", backgroundColor: "#f7f7f7"}}
-                                    >
-                                        {stat.column}
-                                    </TableCell>
-                                    <TableCell sx={bodyCellStyle}>
-                                        {stat.type}
-                                    </TableCell>
-                                    <TableCell align="right" sx={bodyCellStyle}>
-                                        {stat.statistics.count}
-                                    </TableCell>
-                                    <TableCell align="right" sx={bodyCellStyle}>
-                                        {stat.statistics.unique_count}
-                                    </TableCell>
-                                    <TableCell align="right" sx={bodyCellStyle}>
-                                        {stat.statistics.null_count}
-                                    </TableCell>
-                                    <TableCell align="right" sx={bodyCellStyle}>
-                                        {stat.statistics.min !== undefined ? stat.statistics.min : '-'}
-                                    </TableCell>
-                                    <TableCell align="right" sx={bodyCellStyle}>
-                                        {stat.statistics.max !== undefined ? stat.statistics.max : '-'}
-                                    </TableCell>
-                                    <TableCell align="right" sx={bodyCellStyle}>
-                                        {stat.statistics.avg !== undefined ? 
-                                            Number(stat.statistics.avg).toFixed(2) : '-'}
-                                    </TableCell>
-                                </TableRow>
-                            ))}
-                        </TableBody>
-                    </Table>
-                </TableContainer>
-            </Box>
-        );
-    }
-}
 
-export const DBTableSelectionDialog: React.FC<{ 
-    buttonElement?: any, 
-    sx?: SxProps,
-    onOpen?: () => void,
-    // Controlled mode props
-    open?: boolean,
-    onClose?: () => void
-}> = function DBTableSelectionDialog({ 
-    buttonElement,
-    sx,
-    onOpen,
-    open: controlledOpen,
-    onClose,
-}) {
+export const DBManagerPane: React.FC<{ 
+}> = function DBManagerPane({ }) {
     
     const theme = useTheme();
 
@@ -243,15 +171,10 @@ export const DBTableSelectionDialog: React.FC<{
     const sessionId = useSelector((state: DataFormulatorState) => state.sessionId);
     const tables = useSelector((state: DataFormulatorState) => state.tables);
     const serverConfig = useSelector((state: DataFormulatorState) => state.serverConfig);
+    const dataLoaderConnectParams = useSelector((state: DataFormulatorState) => state.dataLoaderConnectParams);
 
-    const [internalOpen, setInternalOpen] = useState<boolean>(false);
     
     // Support both controlled and uncontrolled modes
-    const isControlled = controlledOpen !== undefined;
-    const tableDialogOpen = isControlled ? controlledOpen : internalOpen;
-    const setTableDialogOpen = isControlled 
-        ? (open: boolean) => { if (!open && onClose) onClose(); }
-        : setInternalOpen;
     const [tableAnalysisMap, setTableAnalysisMap] = useState<Record<string, ColumnStatistics[] | null>>({});
     
     // maps data loader type to list of param defs
@@ -261,8 +184,15 @@ export const DBTableSelectionDialog: React.FC<{
 
     const [dbTables, setDbTables] = useState<DBTable[]>([]);
     const [selectedTabKey, setSelectedTabKey] = useState("");
+    const [selectedDataLoader, setSelectedDataLoader] = useState<string>("");
+    const [connectorMenuAnchorEl, setConnectorMenuAnchorEl] = useState<HTMLElement | null>(null);
 
     const [isUploading, setIsUploading] = useState<boolean>(false);
+    const [resetAnchorEl, setResetAnchorEl] = useState<HTMLElement | null>(null);
+    const [tableMenuAnchorEl, setTableMenuAnchorEl] = useState<HTMLElement | null>(null);
+    const [showViews, setShowViews] = useState<boolean>(false);
+    const dbFileInputRef = useRef<HTMLInputElement>(null);
+    const menuButtonRef = useRef<HTMLButtonElement>(null);
 
     let setSystemMessage = (content: string, severity: "error" | "warning" | "info" | "success") => {
         dispatch(dfActions.addMessages({
@@ -278,18 +208,20 @@ export const DBTableSelectionDialog: React.FC<{
     }, []);
 
     useEffect(() => {
-        if (!selectedTabKey.startsWith("dataLoader:") && dbTables.length == 0) {
-            setSelectedTabKey("");
-        } else if (!selectedTabKey.startsWith("dataLoader:") && dbTables.find(t => t.name === selectedTabKey) == undefined) {
-            setSelectedTabKey(dbTables[0].name);
+        if (selectedDataLoader === "") {
+            if (dbTables.length == 0) {
+                setSelectedTabKey("");
+            } else if (dbTables.find(t => t.name === selectedTabKey) == undefined) {
+                setSelectedTabKey(dbTables[0]?.name || "");
+            }
         }
-    }, [dbTables]);
+    }, [dbTables, selectedDataLoader]);
 
     // Fetch list of tables
     const fetchTables = async () => {
         if (serverConfig.DISABLE_DATABASE) return;
         try {
-            const response = await fetch(getUrls().LIST_TABLES);
+            const response = await fetchWithSession(getUrls().LIST_TABLES, { method: 'GET' }, dispatch);
             const data = await response.json();
             if (data.status === 'success') {
                 setDbTables(data.tables);
@@ -329,10 +261,10 @@ export const DBTableSelectionDialog: React.FC<{
     
         try {
             setIsUploading(true);
-            const response = await fetch(getUrls().UPLOAD_DB_FILE, {
+            const response = await fetchWithSession(getUrls().UPLOAD_DB_FILE, {
                 method: 'POST',
                 body: formData
-            });
+            }, dispatch);
             const data = await response.json();
             if (data.status === 'success') {
                 fetchTables();  // Refresh table list
@@ -357,10 +289,10 @@ export const DBTableSelectionDialog: React.FC<{
     
         try {
             setIsUploading(true);
-            const response = await fetch(getUrls().CREATE_TABLE, {
+            const response = await fetchWithSession(getUrls().CREATE_TABLE, {
                 method: 'POST',
                 body: formData
-            });
+            }, dispatch);
             const data = await response.json();
             if (data.status === 'success') {
                 if (data.is_renamed) {
@@ -383,9 +315,9 @@ export const DBTableSelectionDialog: React.FC<{
 
     const handleDBReset = async () => {
         try {
-            const response = await fetch(getUrls().RESET_DB_FILE, {
+            const response = await fetchWithSession(getUrls().RESET_DB_FILE, {
                 method: 'POST',
-            });
+            }, dispatch);
             const data = await response.json();
             if (data.status === 'success') {
                 fetchTables();
@@ -405,13 +337,13 @@ export const DBTableSelectionDialog: React.FC<{
                 let deletedViews = [];
                 for (let view of unreferencedViews) {
                     try {
-                        const response = await fetch(getUrls().DELETE_TABLE, {
+                        const response = await fetchWithSession(getUrls().DELETE_TABLE, {
                             method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json',
                             },
                             body: JSON.stringify({ table_name: view.name })
-                        });
+                        }, dispatch);
                         const data = await response.json();
                         if (data.status === 'success') {
                             deletedViews.push(view.name);
@@ -438,13 +370,13 @@ export const DBTableSelectionDialog: React.FC<{
         }
 
         try {
-            const response = await fetch(getUrls().DELETE_TABLE, {
+            const response = await fetchWithSession(getUrls().DELETE_TABLE, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({ table_name: tableName })
-            });
+            }, dispatch);
             const data = await response.json();
             if (data.status === 'success') {
                 fetchTables();
@@ -457,24 +389,21 @@ export const DBTableSelectionDialog: React.FC<{
         }
     };
 
-    // Handle data analysis
-    const handleAnalyzeData = async (tableName: string) => {
+    // Handle data analysis - auto-fetch when table is selected
+    const handleAnalyzeData = useCallback(async (tableName: string) => {
         if (!tableName) return;
         if (tableAnalysisMap[tableName]) return;
 
-        console.log('Analyzing table:', tableName);
-        
         try {
-            const response = await fetch(getUrls().GET_COLUMN_STATS, {
+            const response = await fetchWithSession(getUrls().GET_COLUMN_STATS, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({ table_name: tableName })
-            });
+            }, dispatch);
             const data = await response.json();
             if (data.status === 'success') {
-                console.log('Analysis results:', data);
                 // Update the analysis map with the new results
                 setTableAnalysisMap(prevMap => ({
                     ...prevMap,
@@ -483,24 +412,16 @@ export const DBTableSelectionDialog: React.FC<{
             }
         } catch (error) {
             console.error('Failed to analyze table data:', error);
-            setSystemMessage('Failed to analyze table data, please check if the server is running', "error");
+            // Don't show error message for auto-fetch, just fail silently
         }
-    };
+    }, [tableAnalysisMap]);
 
-    // Toggle analysis view
-    const toggleAnalysisView = (tableName: string) => {
-        if (tableAnalysisMap[tableName]) {
-            // If we already have analysis, remove it to show table data again
-            setTableAnalysisMap(prevMap => {
-                const newMap = { ...prevMap };
-                delete newMap[tableName];
-                return newMap;
-            });
-        } else {
-            // If no analysis yet, fetch it
-            handleAnalyzeData(tableName);
+    // Auto-fetch stats when a table is selected
+    useEffect(() => {
+        if (selectedTabKey && selectedDataLoader === "") {
+            handleAnalyzeData(selectedTabKey);
         }
-    };
+    }, [selectedTabKey, selectedDataLoader, handleAnalyzeData]);
 
     const handleAddTableToDF = (dbTable: DBTable) => {
         const convertSqlTypeToAppType = (sqlType: string): Type => {
@@ -542,44 +463,12 @@ export const DBTableSelectionDialog: React.FC<{
         }
        dispatch(dfActions.loadTable(table));
        dispatch(fetchFieldSemanticType(table));
-       setTableDialogOpen(false);
     }
 
-    const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
-        setSelectedTabKey(newValue);
-    };
 
     useEffect(() => {
-        if (tableDialogOpen) {
-            fetchTables();
-        }
-    }, [tableDialogOpen]);
-
-    let importButton = (buttonElement: React.ReactNode) => {
-        return <Tooltip title="import a duckdb .db file to the local database">
-            <span>
-                <Button variant="text" sx={{fontSize: "inherit", minWidth: "auto"}} component="label" disabled={isUploading}>
-                    {buttonElement}
-                    <input type="file" hidden onChange={handleDBUpload} accept=".db" disabled={isUploading} />
-                </Button>
-            </span>
-        </Tooltip>
-    }
-
-    let exportButton = 
-        <Tooltip title="save the local database to a duckdb .db file">
-            <span>
-                <Button variant="text" size="small" onClick={() => {
-                    handleDBDownload(sessionId ?? '')
-                        .catch(error => {
-                            console.error('Failed to download database:', error);
-                            setSystemMessage('Failed to download database file', "error");
-                        });
-                }} disabled={isUploading || dbTables.length === 0}>
-                    export
-                </Button>
-            </span>
-        </Tooltip>
+        fetchTables();
+    }, []);
 
     function uploadFileButton(element: React.ReactNode, buttonSx?: SxProps) {
         return (
@@ -605,81 +494,182 @@ export const DBTableSelectionDialog: React.FC<{
         );
     }
 
-    let hasDerivedViews = dbTables.filter(t => t.view_source !== null).length > 0;
-
-    let dataLoaderPanel = <Box sx={{ p: 1, display: 'flex', flexDirection: 'column', backgroundColor: alpha(theme.palette.secondary.main, 0.02) }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', px: 1, mb: 1 }}>
+    let tableSelectionPanel = <Box sx={{ 
+        px: 0.5, pt: 1, 
+        display: 'flex', 
+        flexDirection: 'column', 
+        width: '100%'
+    }}>
+        {/* Recent Data Loaders */}
+        <Box sx={{ px: 1, mb: 1 }}>
+                <Typography variant="caption" sx={{
+                    color: "text.disabled",
+                    fontSize: "0.75rem",
+                    my: 1,
+                    display: 'block'
+                }}>
+                    External Data Loaders
+                </Typography>
+                <Box sx={{ 
+                    display: 'flex', 
+                    flexWrap: 'wrap', 
+                    gap: 0.5,
+                    alignItems: 'flex-start',
+                    width: '100%',
+                    minWidth: 0
+                }}>
+                    <Chip
+                        key="file upload"
+                        label="file"
+                        size="small"
+                        variant="outlined"
+                        onClick={() => setSelectedDataLoader("file upload")}
+                        sx={{
+                            fontSize: '0.7rem',
+                            height: 20,
+                            maxWidth: '100%',
+                            borderColor: selectedDataLoader === "file upload"
+                                ? theme.palette.secondary.main
+                                : theme.palette.divider,
+                            '& .MuiChip-label': {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap'
+                            },
+                        }}
+                    />
+                    {Object.keys(dataLoaderMetadata ?? {})
+                        .map((dataLoaderType) => (
+                            <Chip
+                                key={dataLoaderType}
+                                label={dataLoaderType}
+                                size="small"
+                                variant="outlined"
+                                onClick={() => setSelectedDataLoader(dataLoaderType)}
+                                sx={{
+                                    fontSize: '0.7rem',
+                                    height: 20,
+                                    maxWidth: '100%',
+                                    backgroundColor: selectedDataLoader === dataLoaderType 
+                                        ? alpha(theme.palette.secondary.main, 0.2) 
+                                        : 'transparent',
+                                    borderColor: selectedDataLoader === dataLoaderType
+                                        ? theme.palette.secondary.main
+                                        : theme.palette.divider,
+                                    '& .MuiChip-label': {
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap'
+                                    },
+                                }}
+                            />
+                        ))}
+                </Box>
+            </Box>
+        
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 1, my: 1 }}>
             <Typography variant="caption" sx={{
                 color: "text.disabled", 
                 fontWeight: "500", 
                 flexGrow: 1,
                 fontSize: "0.75rem",
             }}>
-                Data Connectors
+                Local DuckDB
             </Typography>
-        </Box>
-        
-        {["file upload", ...Object.keys(dataLoaderMetadata ?? {})].map((dataLoaderType, i) => (
-            <Button
-                key={`dataLoader:${dataLoaderType}`}
-                variant="text"
-                size="small"
-                onClick={() => {
-                    setSelectedTabKey('dataLoader:' + dataLoaderType);
+            <IconButton 
+                ref={menuButtonRef}
+                size="small" 
+                onClick={(e) => setTableMenuAnchorEl(e.currentTarget)}
+                sx={{ 
+                    padding: 0.5,
+                    '&:hover': {
+                        backgroundColor: alpha(theme.palette.primary.main, 0.08),
+                    }
+                }}
+            >
+                <MoreVertIcon sx={{ fontSize: 16 }} />
+            </IconButton>
+            <Menu
+                anchorEl={tableMenuAnchorEl}
+                open={Boolean(tableMenuAnchorEl)}
+                onClose={() => setTableMenuAnchorEl(null)}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
                 }}
-                color='secondary'
-                sx={{
-                    textTransform: "none",
-                    width: 120,
-                    justifyContent: 'flex-start',
-                    textAlign: 'left',
-                    borderRadius: 0,
-                    py: 0.5,
-                    px: 2,
-                    color: selectedTabKey === 'dataLoader:' + dataLoaderType ? 'secondary.main' : 'text.secondary',
-                    borderRight: selectedTabKey === 'dataLoader:' + dataLoaderType ? 2 : 0,
-                    borderColor: 'secondary.main',
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'left',
                 }}
             >
-                <Typography 
-                    fontSize='inherit'
-                    sx={{
-                        textTransform: "none", 
-                        width: "calc(100% - 4px)", 
-                        textAlign: 'left', 
-                        textOverflow: 'ellipsis', 
-                        overflow: 'hidden', 
-                        whiteSpace: 'nowrap',
-                    }}>
-                    {dataLoaderType}
-                </Typography>
-            </Button>
-        ))}
-    </Box>;
-
-    let tableSelectionPanel = <Box sx={{ px: 0.5, pt: 1, display: 'flex', flexDirection: 'column', backgroundColor: alpha(theme.palette.primary.main, 0.02) }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', px: 1, mb: 1 }}>
-            <Typography variant="caption" sx={{
-                color: "text.disabled", 
-                fontWeight: "500", 
-                flexGrow: 1,
-                fontSize: "0.75rem",
-            }}>
-                Data Tables
-            </Typography>
-            <Tooltip title="refresh the table list">
-                <IconButton size="small" color="primary" sx={{
-                    '&:hover': {
-                        transform: 'rotate(180deg)',
-                    },
-                    transition: 'transform 0.3s ease-in-out',
-                }} onClick={() => {
-                    fetchTables();
-                }}>
-                    <RefreshIcon sx={{fontSize: 14}} />
-                </IconButton>
-            </Tooltip>
+                <MenuItem 
+                    onClick={() => {
+                        fetchTables();
+                        setTableMenuAnchorEl(null);
+                    }}
+                    dense
+                >
+                    <RefreshIcon sx={{ fontSize: 16, mr: 1 }} />
+                    Refresh table list
+                </MenuItem>
+                <Divider />
+                <MenuItem 
+                    onClick={() => {
+                        dbFileInputRef.current?.click();
+                        setTableMenuAnchorEl(null);
+                    }}
+                    disabled={isUploading}
+                    dense
+                >
+                    <UploadFileIcon sx={{ fontSize: 16, mr: 1 }} />
+                    Import database file
+                </MenuItem>
+                <MenuItem 
+                    onClick={() => {
+                        if (!isUploading && dbTables.length > 0) {
+                            // fetchWithSession will automatically handle session ID if missing
+                            handleDBDownload(sessionId ?? '', dispatch)
+                                .catch(error => {
+                                    console.error('Failed to download database:', error);
+                                    setSystemMessage('Failed to download database file', "error");
+                                });
+                        }
+                        setTableMenuAnchorEl(null);
+                    }}
+                    disabled={isUploading || dbTables.length === 0}
+                    dense
+                >
+                    <DownloadIcon sx={{ fontSize: 16, mr: 1 }} />
+                    Export database file
+                </MenuItem>
+                <MenuItem 
+                    onClick={() => {
+                        setTableMenuAnchorEl(null);
+                        if (!isUploading && menuButtonRef.current) {
+                            // Use setTimeout to ensure menu closes before popover opens
+                            setTimeout(() => {
+                                setResetAnchorEl(menuButtonRef.current);
+                            }, 100);
+                        }
+                    }}
+                    disabled={isUploading}
+                    dense
+                    sx={{ color: 'error.main' }}
+                >
+                    <RestartAltIcon sx={{ fontSize: 16, mr: 1 }} />
+                    Reset database
+                </MenuItem>
+            </Menu>
+            <input 
+                ref={dbFileInputRef}
+                type="file" 
+                hidden 
+                onChange={handleDBUpload} 
+                accept=".db" 
+                disabled={isUploading} 
+            />
         </Box>
+    
         
         {dbTables.length == 0 && 
             <Typography variant="caption" sx={{color: "lightgray", px: 2, py: 0.5, fontStyle: "italic"}}>
@@ -688,122 +678,165 @@ export const DBTableSelectionDialog: React.FC<{
         }
         
         {/* Regular Tables */}
-        {dbTables.filter(t => t.view_source === null).map((t, i) => (
-            <Button
-                key={t.name}
-                variant="text"
-                size="small"
-                color='primary'
-                onClick={() => {
-                    setSelectedTabKey(t.name);
-                }}
-                sx={{
-                    textTransform: "none",
-                    width: 160,
-                    justifyContent: 'flex-start',
-                    textAlign: 'left',
-                    borderRadius: 0,
-                    py: 0.5,
-                    px: 2,
-                    color: selectedTabKey === t.name ? 'primary.main' : 'text.secondary',
-                    borderRight: selectedTabKey === t.name ? 2 : 0,
-                }}
-            >
-                <Typography 
-                    fontSize='inherit'
+        {dbTables.filter(t => t.view_source === null).map((t, i) => {
+            const isLoaded = tables.some(loadedTable => loadedTable.id === t.name);
+            return (
+                <Button
+                    key={t.name}
+                    variant="text"
+                    size="small"
+                    color='primary'
+                    onClick={() => {
+                        setSelectedTabKey(t.name);
+                        // If in data loader view, go back to table view
+                        if (selectedDataLoader !== "") {
+                            setSelectedDataLoader("");
+                        }
+                    }}
                     sx={{
-                        width: "calc(100% - 4px)", 
-                        textAlign: 'left', 
-                        textOverflow: 'ellipsis', 
-                        overflow: 'hidden', 
-                        whiteSpace: 'nowrap',
-                    }}>
-                    {t.name}
-                </Typography>
-            </Button>
-        ))}
+                        textTransform: "none",
+                        width: '100%',
+                        maxWidth: '100%',
+                        justifyContent: 'flex-start',
+                        textAlign: 'left',
+                        borderRadius: 0,
+                        py: 0.5,
+                        px: 2,
+                        color: (selectedTabKey === t.name && selectedDataLoader === "") ? 'primary.main' : 'text.secondary',
+                        borderRight: (selectedTabKey === t.name && selectedDataLoader === "") ? 2 : 0,
+                        minWidth: 0,
+                    }}
+                    startIcon={<TableIcon />}
+                    endIcon={isLoaded ? <CheckIcon sx={{ fontSize: 14, color: 'success.main' }} /> : null}
+                >
+                    <Typography 
+                        fontSize='inherit'
+                        sx={{
+                            flex: 1,
+                            minWidth: 0,
+                            textAlign: 'left', 
+                            textOverflow: 'ellipsis', 
+                            overflow: 'hidden', 
+                            whiteSpace: 'nowrap',
+                        }}>
+                        {t.name}
+                    </Typography>
+                </Button>
+            );
+        })}
         
         {/* Derived Views Section */}
-        {hasDerivedViews && (
+        {dbTables.filter(t => t.view_source !== null).length > 0 && (
             <Box sx={{ mt: 2, display: 'flex', flexDirection: 'column' }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', px: 1, mb: 1 }}>
-                    <Typography variant="caption" sx={{
-                        color: "text.disabled", 
-                        fontWeight: "500", 
-                        flexGrow: 1,
-                        fontSize: "0.75rem",
-                    }}>
-                        Derived Views
-                    </Typography>
-                    <Tooltip title="clean up unreferenced derived views">
-                        <IconButton size="small" color="primary" sx={{
-                            '&:hover': {
-                                transform: 'rotate(180deg)',
-                            },
-                            transition: 'transform 0.3s ease-in-out',
-                        }} 
-                        disabled={dbTables.filter(t => t.view_source !== null).length === 0}
-                        onClick={() => {
-                            handleCleanDerivedViews();
-                        }}>
-                            <CleaningServicesIcon sx={{fontSize: 14}} />
-                        </IconButton>
-                    </Tooltip>
-                </Box>
-                
-                {dbTables.filter(t => t.view_source !== null).map((t, i) => (
+                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
                     <Button
-                        key={t.name}
                         variant="text"
                         size="small"
-                        onClick={() => {
-                            setSelectedTabKey(t.name);
-                        }}
+                        onClick={() => setShowViews(!showViews)}
                         sx={{
                             textTransform: "none",
-                            width: 160,
+                            flex: 1,
                             justifyContent: 'flex-start',
                             textAlign: 'left',
                             borderRadius: 0,
                             py: 0.5,
                             px: 2,
-                            color: selectedTabKey === t.name ? 'primary.main' : 'text.secondary',
-                            backgroundColor: 'transparent',
-                            borderRight: selectedTabKey === t.name ? 2 : 0,
-                            borderColor: 'primary.main',
+                            color: 'text.secondary',
+                            minWidth: 0,
                             '&:hover': {
-                                backgroundColor: selectedTabKey === t.name ? 'primary.100' : 'primary.50'
+                                backgroundColor: alpha(theme.palette.primary.main, 0.08)
                             }
                         }}
+                        startIcon={showViews ? <ExpandLessIcon sx={{ fontSize: 16 }} /> : <ExpandMoreIcon sx={{ fontSize: 16 }} />}
                     >
                         <Typography 
-                            fontSize='inherit'
+                            fontSize='0.75rem'
                             sx={{
-                                width: "calc(100% - 4px)", 
-                                textAlign: 'left', 
-                                textOverflow: 'ellipsis', 
-                                overflow: 'hidden', 
-                                whiteSpace: 'nowrap',
-                                
+                                flex: 1,
+                                minWidth: 0,
+                                textAlign: 'left',
                             }}>
-                            {t.name}
+                            Views ({dbTables.filter(t => t.view_source !== null).length})
                         </Typography>
                     </Button>
-                ))}
+                    <Tooltip title="Clean up unused views">
+                        <IconButton
+                            size="small"
+                            onClick={handleCleanDerivedViews}
+                            disabled={dbTables.filter(t => t.view_source !== null && t.view_source !== undefined && !tables.some(t2 => t2.id === t.name)).length === 0}
+                            sx={{
+                                padding: 0.5,
+                                mr: 0.5,
+                                '&:hover': {
+                                    backgroundColor: alpha(theme.palette.primary.main, 0.08),
+                                }
+                            }}
+                        >
+                            <CleaningServicesIcon sx={{ fontSize: 16 }} />
+                        </IconButton>
+                    </Tooltip>
+                </Box>
+                <Collapse in={showViews}>
+                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                        {dbTables.filter(t => t.view_source !== null).map((t, i) => {
+                            return (
+                            <Button
+                                key={t.name}
+                                variant="text"
+                                size="small"
+                                onClick={() => {
+                                    setSelectedTabKey(t.name);
+                                    // If in data loader view, go back to table view
+                                    if (selectedDataLoader !== "") {
+                                        setSelectedDataLoader("");
+                                    }
+                                }}
+                                sx={{
+                                    textTransform: "none",
+                                    width: '100%',
+                                    maxWidth: '100%',
+                                    justifyContent: 'flex-start',
+                                    textAlign: 'left',
+                                    borderRadius: 0,
+                                    py: 0.5,
+                                    px: 2,
+                                    color: (selectedTabKey === t.name && selectedDataLoader === "") ? 'primary.main' : 'text.secondary',
+                                    backgroundColor: 'transparent',
+                                    borderRight: (selectedTabKey === t.name && selectedDataLoader === "") ? 2 : 0,
+                                    borderColor: 'primary.main',
+                                    minWidth: 0,
+                                    '&:hover': {
+                                        backgroundColor: (selectedTabKey === t.name && selectedDataLoader === "") ? 'primary.100' : 'primary.50'
+                                    }
+                                }}
+                                startIcon={<ViewIcon />}
+                            >
+                                <Typography 
+                                    fontSize='inherit'
+                                    sx={{
+                                        flex: 1,
+                                        minWidth: 0,
+                                        textAlign: 'left', 
+                                        textOverflow: 'ellipsis', 
+                                        overflow: 'hidden', 
+                                        whiteSpace: 'nowrap',
+                                    }}>
+                                    {t.name}
+                                </Typography>
+                            </Button>
+                            );
+                        })}
+                    </Box>
+                </Collapse>
             </Box>
         )}
     </Box>
 
-    let tableView = <Box sx={{ flex: 1, width: 880, overflow: 'auto', p: 2 }}>
-        {/* Empty state */}
-        {selectedTabKey === '' && (
-            <Typography variant="caption" sx={{color: "text.secondary", px: 1}}>
-                The database is empty, refresh the table list or import some data to get started.
-            </Typography>
-        )}
+    let dataConnectorView = <Box sx={{ height: '100%', overflowY: 'auto', overflowX: 'hidden', p: 2, display: 'flex', flexDirection: 'column', minWidth: 0, overscrollBehavior: 'contain' }}>
+
         
         {/* File upload */}
-        {selectedTabKey === 'dataLoader:file upload' && (
+        {selectedDataLoader === 'file upload' && (
             <Box>
                 {uploadFileButton(<Typography component="span" fontSize={18} textTransform="none">{isUploading ? 'uploading...' : 'upload a csv/tsv file to the local database'}</Typography>)} 
             </Box>
@@ -811,7 +844,7 @@ export const DBTableSelectionDialog: React.FC<{
         
         {/* Data loader forms */}
         {dataLoaderMetadata && Object.entries(dataLoaderMetadata).map(([dataLoaderType, metadata]) => (
-            selectedTabKey === 'dataLoader:' + dataLoaderType && (
+            selectedDataLoader === dataLoaderType && (
                 <Box key={`dataLoader:${dataLoaderType}`} sx={{ position: "relative", maxWidth: '100%' }}>
                     <DataLoaderForm 
                         key={`data-loader-form-${dataLoaderType}`}
@@ -824,6 +857,8 @@ export const DBTableSelectionDialog: React.FC<{
                         onFinish={(status, message, importedTables) => {
                             setIsUploading(false);
                             fetchTables().then(() => {
+                                // Switch back to tables view after import
+                                setSelectedDataLoader("");
                                 // Navigate to the first imported table after tables are fetched
                                 if (status === "success" && importedTables && importedTables.length > 0) {
                                     setSelectedTabKey(importedTables[0]);
@@ -837,196 +872,253 @@ export const DBTableSelectionDialog: React.FC<{
                 </Box>
             )
         ))}
+    </Box>;
+
+    let tableView = <Box sx={{ height: '100%', overflowY: 'auto', overflowX: 'hidden', p: 2, minWidth: 0, overscrollBehavior: 'contain' }}>
+        {/* Empty state */}
+        {selectedTabKey === '' && (
+            <Typography variant="caption" sx={{color: "text.secondary", px: 1}}>
+                The database is empty, refresh the table list or import some data to get started.
+            </Typography>
+        )}
         
         {/* Table content */}
         {dbTables.map((t, i) => {
             if (selectedTabKey !== t.name) return null;
             
             const currentTable = t;
-            const showingAnalysis = tableAnalysisMap[currentTable.name] !== undefined;
+            const columnStats = tableAnalysisMap[currentTable.name] ?? [];
+            const statsMap = new Map(columnStats.map((stat: ColumnStatistics) => [stat.column, stat]));
+            
             return (
                 <Box key={t.name} sx={{ maxWidth: '100%', overflowX: 'auto', display: 'flex', flexDirection: 'column', gap: 1 }}>
-                    <Paper variant="outlined">
-                        <Box sx={{ px: 1, display: 'flex', alignItems: 'center', borderBottom: '1px solid rgba(0,0,0,0.1)' }}>
-                            <Typography variant="caption" sx={{  }}>
-                                {showingAnalysis ? "column stats for " : "sample data from "} 
-                                <Typography component="span" sx={{fontSize: 12, fontWeight: "bold"}}>
-                                    {currentTable.name}
-                                </Typography>
-                                <Typography component="span" sx={{ml: 1, fontSize: 10, color: "text.secondary"}}>
-                                    ({currentTable.columns.length} columns × {currentTable.row_count} rows)
-                                </Typography>
+                    <Box sx={{ px: 1, display: 'flex', alignItems: 'center' }}>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            {currentTable.view_source ? <ViewIcon /> : <TableIcon />}
+                            <Typography component="span" sx={{fontSize: 16, fontWeight: "bold"}}>
+                                {currentTable.name}
+                            </Typography>
+                        </Box>
+                        <Tooltip title="Drop Table">
+                            <IconButton 
+                                size="small" 
+                                color="error"
+                                sx={{ml: 'auto'}}
+                                onClick={() => handleDropTable(currentTable.name)}
+                                title="Drop Table"
+                            >
+                                <DeleteIcon fontSize="small" />
+                            </IconButton>
+                        </Tooltip>
+                    </Box>
+                    <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1, p: 1 }}>
+                        <Box sx={{ position: 'relative' }}>
+                            <TableContainer sx={{ maxHeight: 340, overflow: 'auto' }}>
+                                <Table stickyHeader aria-label="sticky table" size="small">
+                                    <TableHead>
+                                        <TableRow>
+                                            {currentTable.columns.map((col) => {
+                                                const stat = statsMap.get(col.name);
+                                                return (
+                                                    <TableCell
+                                                        key={col.name}
+                                                        sx={{
+                                                            minWidth: 80,
+                                                            fontSize: 10,
+                                                            color: "#333",
+                                                            backgroundColor: '#fff',
+                                                            borderBottomColor: theme.palette.primary.main,
+                                                            borderBottomWidth: '1px',
+                                                            borderBottomStyle: 'solid',
+                                                            padding: '4px 6px',
+                                                            verticalAlign: 'top'
+                                                        }}
+                                                    >
+                                                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                                                            <Typography sx={{ fontSize: 11, fontWeight: 600, lineHeight: 1.2 }}>
+                                                                {col.name}
+                                                            </Typography>
+                                                            {stat ? (
+                                                                <Typography sx={{ fontSize: 9, color: 'text.secondary', lineHeight: 1.2 }}>
+                                                                    {stat.type}
+                                                                </Typography>
+                                                            ) : (
+                                                                <Typography sx={{ fontSize: 9, color: 'text.disabled', lineHeight: 1.2, fontStyle: 'italic' }}>
+                                                                    {col.type}
+                                                                </Typography>
+                                                            )}
+                                                        </Box>
+                                                    </TableCell>
+                                                );
+                                            })}
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {currentTable.sample_rows.slice(0, 9).map((row: any, rowIdx: number) => (
+                                            <TableRow 
+                                                hover 
+                                                tabIndex={-1} 
+                                                key={rowIdx} 
+                                                sx={{ background: rowIdx % 2 == 0 ? '#F0F0F0' : "none" }}
+                                            >
+                                                {currentTable.columns.map((col) => {
+                                                    const value = row[col.name];
+                                                    return (
+                                                        <TableCell
+                                                            key={col.name}
+                                                            sx={{
+                                                                fontSize: 10,
+                                                                maxWidth: "80px",
+                                                                padding: "6px",
+                                                                overflow: "clip",
+                                                                textOverflow: "ellipsis",
+                                                                whiteSpace: "nowrap"
+                                                            }}
+                                                        >
+                                                            {String(value ?? '')}
+                                                        </TableCell>
+                                                    );
+                                                })}
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+                            {currentTable.row_count > 10 && (
+                                <Box sx={{ px: 1, py: 0.5}}>
+                                    <Typography variant="caption" sx={{ fontSize: 9, color: 'text.secondary', fontStyle: 'italic' }}>
+                                        Showing first 9 rows of {currentTable.row_count} total rows
+                                    </Typography>
+                                </Box>
+                            )}
+                        </Box>
+                    </Box>
+                    {tables.some(t => t.id === currentTable.name) ? (
+                        <Box 
+                            sx={{
+                                ml: 'auto',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 0.5,
+                                color: 'success.main',
+                                fontSize: '12px',
+                                fontWeight: 500
+                            }}
+                        >
+                            <CheckIcon sx={{ fontSize: 16 }} />
+                            <Typography sx={{ fontSize: 'inherit', color: 'inherit', fontWeight: 'inherit' }}>
+                                Loaded
                             </Typography>
-                            <Box sx={{ marginLeft: 'auto', display: 'flex', gap: 1 }}>
-                                <Button 
+                        </Box>
+                    ) : (
+                        <Button 
+                            variant="contained"
+                            size="small"
+                            sx={{ml: 'auto', textTransform: 'none'}}
+                            disabled={isUploading || dbTables.length === 0 || dbTables.find(t => t.name === selectedTabKey) === undefined}
+                            onClick={() => {
+                                let t = dbTables.find(t => t.name === selectedTabKey);
+                                if (t) {
+                                    handleAddTableToDF(t);
+                                }
+                            }}>
+                            Load Table
+                        </Button>
+                    )}
+                </Box>
+            );
+        })}
+    </Box>;
+
+    let mainContent =  
+        <Box sx={{ display: 'flex', flexDirection: 'column', bgcolor: 'white', flex: 1, overflow: 'hidden', height: '100%' }}>
+            <Box sx={{ display: 'flex', flexDirection: 'row', flex: 1, overflow: 'hidden', minHeight: 0, height: '100%' }}>
+                {/* Button navigation - similar to TableSelectionView */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', px: 1, width: 240, minWidth: 240, maxWidth: 240, overflow: 'hidden', height: '100%' }}>
+                    <Box sx={{ 
+                        display: 'flex',
+                        flexDirection: 'column',
+                        overflowY: 'auto',
+                        overflowX: 'hidden',
+                        flex: 1,
+                        minHeight: 0,
+                        height: '100%',
+                        position: 'relative',
+                        borderRight: `1px solid ${theme.palette.divider}`,
+                        overscrollBehavior: 'contain'
+                    }}>
+                        {/* Available Tables Section - always visible */}
+                        {tableSelectionPanel}
+                    </Box>
+                    {/* Reset Confirmation Popover */}
+                    <Popover
+                        open={Boolean(resetAnchorEl)}
+                        anchorEl={resetAnchorEl}
+                        onClose={() => setResetAnchorEl(null)}
+                        anchorOrigin={{
+                            vertical: 'bottom',
+                            horizontal: 'left',
+                        }}
+                        transformOrigin={{
+                            vertical: 'top',
+                            horizontal: 'left',
+                        }}
+                    >
+                        <Box sx={{ p: 1.5, width: '240px' }}>
+                            <Typography variant="body2" sx={{ mb: 1.5, fontSize: '12px' }}>
+                                Reset backend database and delete all tables? This cannot be undone.
+                            </Typography>
+                            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+                                <Button
                                     size="small"
-                                    color={showingAnalysis ? "secondary" : "primary"}
-                                    onClick={() => toggleAnalysisView(currentTable.name)}
-                                    startIcon={<AnalyticsIcon fontSize="small" />}
-                                    sx={{textTransform: "none"}}
+                                    onClick={() => setResetAnchorEl(null)}
+                                    sx={{ textTransform: 'none', fontSize: '12px', minWidth: 'auto', px: 0.75, py: 0.25, minHeight: '24px' }}
                                 >
-                                    {showingAnalysis ? "show data samples" : "show column stats"}
+                                    Cancel
                                 </Button>
-                                <IconButton 
-                                    size="small" 
+                                <Button
+                                    size="small"
                                     color="error"
-                                    onClick={() => handleDropTable(currentTable.name)}
-                                    title="Drop Table"
+                                    variant="contained"
+                                    onClick={async () => {
+                                        setResetAnchorEl(null);
+                                        await handleDBReset();
+                                    }}
+                                    sx={{ textTransform: 'none', fontSize: '12px', minWidth: 'auto', px: 0.75, py: 0.25, minHeight: '24px' }}
                                 >
-                                    <DeleteIcon fontSize="small" />
-                                </IconButton>
+                                    Reset
+                                </Button>
                             </Box>
                         </Box>
-                        {showingAnalysis ? (
-                            <TableStatisticsView 
-                                tableName={currentTable.name}
-                                columnStats={tableAnalysisMap[currentTable.name] ?? []}
-                            />
-                        ) : (
-                            <CustomReactTable 
-                                rows={currentTable.sample_rows.map((row: any) => {
-                                    return Object.fromEntries(Object.entries(row).map(([key, value]: [string, any]) => {
-                                        return [key, String(value)];
-                                    }));
-                                }).slice(0, 9)} 
-                                columnDefs={currentTable.columns.map(col => ({
-                                    id: col.name,
-                                    label: col.name,
-                                    minWidth: 60
-                                }))}
-                                rowsPerPageNum={-1}
-                                compact={false}
-                                isIncompleteTable={currentTable.row_count > 10}
-                            />
-                        )}
-                    </Paper>
-                    <Button 
-                        variant="contained"
-                        size="small"
-                        sx={{ml: 'auto'}}
-                        disabled={isUploading || dbTables.length === 0 || dbTables.find(t => t.name === selectedTabKey) === undefined}
-                        onClick={() => {
-                            let t = dbTables.find(t => t.name === selectedTabKey);
-                            if (t) {
-                                handleAddTableToDF(t);
-                                setTableDialogOpen(false);
-                            }
-                        }}>
-                        Load Table
-                    </Button>
+                    </Popover>
                 </Box>
-            );
-        })}
-    </Box>;
-
-    let mainContent =  
-        <Box sx={{ display: 'flex', flexDirection: 'row', minHeight: 400, borderRadius: 2, width: 'fit-content', bgcolor: 'white' }}>
-            {/* Button navigation - similar to TableSelectionView */}
-            <Box sx={{ display: 'flex', flexDirection: 'column', px: 1, borderRight: 1, borderColor: 'divider' }}>
-                <Box sx={{ 
-                    minWidth: 180, 
-                    display: 'flex',
-                    flexDirection: 'row',
-                    flexWrap: 'nowrap',
-                    overflowY: 'auto',
-                    flexGrow: 1
-                }}>
-                    {/* External Data Loaders Section */}
-                    {dataLoaderPanel}
-                    {/* Available Tables Section */}
-                    {tableSelectionPanel}
+                {/* Content area - show connector view if a connector is selected, otherwise show table view */}
+                <Box sx={{ flex: 1, overflow: 'hidden', minWidth: 0, minHeight: 0, height: '100%', position: 'relative' }}>
+                    {selectedDataLoader !== "" ? dataConnectorView : tableView}
                 </Box>
-                <Typography variant="caption" sx={{ mr: 'auto', mt: 'auto', mb: 1, textWrap: 'wrap', '& .MuiButton-root': { minWidth: 'auto',  textTransform: "none" } }}>
-                    {importButton(<Typography component="span" fontSize="inherit">Import</Typography>)}
-                    ,
-                    {exportButton}
-                    or
-                    <Button
-                        variant="text" size="small"
-                        color="warning"
-                        onClick={handleDBReset}
-                        disabled={isUploading}
-                        //endIcon={<RestartAltIcon />}
-                    >
-                        reset
-                    </Button>
-                    the backend database
-                </Typography>
             </Box>
-            {/* Content area - using conditional rendering instead of TabPanel */}
-            {tableView}
         </Box>  
 
     return (
-        <>
-            {buttonElement && (
-                <Tooltip 
-                    title={serverConfig.DISABLE_DATABASE ? (
-                        <Typography sx={{ fontSize: '11px' }}>
-                            Install Data Formulator locally to use database. <br />
-                            Link: <Link 
-                                href="https://github.com/microsoft/data-formulator" 
-                                target="_blank" 
-                                rel="noopener noreferrer"
-                                sx={{ color: 'inherit', textDecoration: 'underline' }}
-                                onClick={(e) => e.stopPropagation()}
-                            >
-                                https://github.com/microsoft/data-formulator
-                            </Link>
-                    </Typography>
-                ) : ""}
-                    placement="top"
-                >
-                    <span style={{cursor: serverConfig.DISABLE_DATABASE ? 'help' : 'pointer'}}>
-                        <Button variant="text" sx={{fontSize: "inherit", gap: 1}} disabled={serverConfig.DISABLE_DATABASE} onClick={() => {
-                            setTableDialogOpen(true);
-                            onOpen?.();
-                        }}>
-                            {buttonElement}
-                        </Button>
-                    </span>
-                </Tooltip>
+        <Box sx={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }}>
+            {mainContent}
+            {isUploading && (
+                <Box sx={{ 
+                    position: 'absolute', 
+                    top: 0, 
+                    left: 0, 
+                    width: '100%', 
+                    height: '100%', 
+                    display: 'flex', 
+                    alignItems: 'center', 
+                    justifyContent: 'center',
+                    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                    zIndex: 1000
+                }}>
+                    <CircularProgress size={60} thickness={5} />
+                </Box>
             )}
-            <Dialog
-                key="db-table-selection-dialog" 
-                onClose={() => {setTableDialogOpen(false)}} 
-                open={tableDialogOpen}
-                sx={{ '& .MuiDialog-paper': { maxWidth: '100%', maxHeight: 800, minWidth: 800 } }}
-            >
-                <DialogTitle sx={{display: "flex" }} >
-                    Database
-                    <IconButton
-                        sx={{marginLeft: "auto"}}
-                        edge="start"
-                        size="small"
-                        color="inherit"
-                        aria-label="close"
-                        onClick={() => setTableDialogOpen(false)}
-                    >
-                        <CloseIcon fontSize="inherit"/>
-                    </IconButton>
-                </DialogTitle>
-                <DialogContent  sx={{p: 1, position: "relative"}}>
-                    {mainContent}
-                    {isUploading && (
-                        <Box sx={{ 
-                            position: 'absolute', 
-                            top: 0, 
-                            left: 0, 
-                            width: '100%', 
-                            height: '100%', 
-                            display: 'flex', 
-                            alignItems: 'center', 
-                            justifyContent: 'center',
-                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
-                            zIndex: 1000
-                        }}>
-                            <CircularProgress size={60} thickness={5} />
-                        </Box>
-                    )}
-                </DialogContent>
-            </Dialog>
-        </>
+        </Box>
     );
   
 }
@@ -1047,46 +1139,14 @@ export const DataLoaderForm: React.FC<{
     let [tableFilter, setTableFilter] = useState<string>("");
     const [selectedTables, setSelectedTables] = useState<Set<string>>(new Set());
 
-    const [displayAuthInstructions, setDisplayAuthInstructions] = useState(false);
-
     let [isConnecting, setIsConnecting] = useState(false);
-    let [mode, setMode] = useState<"view tables" | "query">("view tables");
 
     const toggleDisplaySamples = (tableName: string) => {
         setDisplaySamples({...displaySamples, [tableName]: !displaySamples[tableName]});
     }
 
-    const handleModeChange = (event: React.MouseEvent<HTMLElement>, newMode: "view tables" | "query") => {
-        if (newMode != null) {
-            setMode(newMode);
-        }
-    };
-
     let tableMetadataBox = [
-        <Box sx={{my: 2}}>
-            <ToggleButtonGroup
-                color="primary"
-                value={mode}
-                exclusive
-                size="small"
-                onChange={handleModeChange}
-                aria-label="Platform"
-                sx={{
-                    '& .MuiButtonBase-root': {
-                    lineHeight: 1,
-                    color: "text.primary",
-                    textTransform: 'none',
-                    '&.Mui-selected': {
-                        fontWeight: 'bold',
-                    }
-                }}}
-            >
-                <ToggleButton value="view tables">View Tables</ToggleButton>
-                <ToggleButton value="query">Query Data</ToggleButton>
-            </ToggleButtonGroup>
-            <Typography variant="body2" sx={{mb: 1,}}></Typography>
-        </Box>,
-        mode === "view tables" && <TableContainer component={Paper} sx={{maxHeight: 360, overflowY: "auto"}} >
+        <TableContainer component={Box} sx={{borderTop: '1px solid rgba(0, 0, 0, 0.1)', maxHeight: 340, overflowY: "auto"}} >
             <Table sx={{ minWidth: 650 }} size="small" aria-label="simple table">
             <TableBody>
                 {Object.entries(tableMetadata).map(([tableName, metadata]) => {
@@ -1095,17 +1155,32 @@ export const DataLoaderForm: React.FC<{
                         key={tableName}
                         sx={{ 
                             '&:last-child td, &:last-child th': { border: 0 }, 
-                            '& .MuiTableCell-root': { padding: 0.25, wordWrap: 'break-word', whiteSpace: 'normal' },
+                            '& .MuiTableCell-root': { 
+                                borderBottom: displaySamples[tableName] ? 'none' : '1px solid rgba(0, 0, 0, 0.1)',
+                                padding: 0.25, wordWrap: 'break-word', whiteSpace: 'normal'},
                             backgroundColor: selectedTables.has(tableName) ? 'action.selected' : 'inherit',
-                            '&:hover': { backgroundColor: selectedTables.has(tableName) ? 'action.selected' : 'action.hover' }
+                            '&:hover': { backgroundColor: selectedTables.has(tableName) ? 'action.selected' : 'action.hover' },
+                            cursor: 'pointer',
+                        }}
+                        onClick={() => {
+                            const newSelected = new Set(selectedTables);
+                            if (newSelected.has(tableName)) {
+                                newSelected.delete(tableName);
+                            } else {
+                                newSelected.add(tableName);
+                            }
+                            setSelectedTables(newSelected);
                         }}
                     >
-                        <TableCell sx={{borderBottom: displaySamples[tableName] ? 'none' : '1px solid rgba(0, 0, 0, 0.1)'}}>
-                            <IconButton size="small" onClick={() => toggleDisplaySamples(tableName)}>
+                        <TableCell>
+                            <IconButton size="small" onClick={(e) => {
+                                e.stopPropagation();
+                                toggleDisplaySamples(tableName);
+                            }}>
                                 {displaySamples[tableName] ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                             </IconButton>
                         </TableCell>
-                        <TableCell sx={{maxWidth: 240, borderBottom: displaySamples[tableName] ? 'none' : '1px solid rgba(0, 0, 0, 0.1)'}} component="th" scope="row">
+                        <TableCell sx={{maxWidth: 240}} component="th" scope="row">
                             {tableName} <Typography variant="caption" sx={{color: "text.secondary"}} fontSize={10}>
                                 ({metadata.row_count > 0 ? `${metadata.row_count} rows × ` : ""}{metadata.columns.length} cols)
                             </Typography>
@@ -1115,19 +1190,10 @@ export const DataLoaderForm: React.FC<{
                                 <Chip key={column.name} label={column.name} sx={{fontSize: 11, margin: 0.25, height: 20}} size="small" />
                             ))}
                         </TableCell>
-                        <TableCell sx={{width: 40}} padding="checkbox">
+                        <TableCell sx={{width: 40}}>
                             <Checkbox
                                 size="small"
                                 checked={selectedTables.has(tableName)}
-                                onChange={(e) => {
-                                    const newSelected = new Set(selectedTables);
-                                    if (e.target.checked) {
-                                        newSelected.add(tableName);
-                                    } else {
-                                        newSelected.delete(tableName);
-                                    }
-                                    setSelectedTables(newSelected);
-                                }}
                             />
                         </TableCell>
                     </TableRow>,
@@ -1135,7 +1201,7 @@ export const DataLoaderForm: React.FC<{
                         <TableCell colSpan={4} sx={{ paddingBottom: 0, paddingTop: 0, px: 0, maxWidth: 800, overflowX: "auto", 
                                          borderBottom: displaySamples[tableName] ? '1px solid rgba(0, 0, 0, 0.1)' : 'none' }}>
                         <Collapse in={displaySamples[tableName]} timeout="auto" unmountOnExit>
-                            <Box sx={{ px: 1, py: 0.5}}>
+                            <Card variant="outlined" sx={{ ml: 5, my: 1}}>
                                 <CustomReactTable rows={metadata.sample_rows.slice(0, 9).map((row: any) => {
                                     return Object.fromEntries(Object.entries(row).map(([key, value]: [string, any]) => {
                                         return [key, String(value)];
@@ -1146,7 +1212,7 @@ export const DataLoaderForm: React.FC<{
                                 compact={false} 
                                 isIncompleteTable={metadata.row_count > 10}
                                 />
-                            </Box>
+                            </Card>
                         </Collapse>
                         </TableCell>
                     </TableRow>]
@@ -1154,18 +1220,20 @@ export const DataLoaderForm: React.FC<{
                 </TableBody>
                 </Table>
             </TableContainer>,
-        mode === "view tables" && Object.keys(tableMetadata).length > 0 && <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 1 }}>
+        Object.keys(tableMetadata).length > 0 && <Box sx={{ display: 'flex', justifyContent: 'center', mt: 1 }}>
             <Button 
-                variant="contained" 
+                variant="outlined" 
+                color="secondary"
                 size="small"
                 disabled={selectedTables.size === 0}
+                sx={{ textTransform: 'none' }}
                 onClick={() => {
                     const tablesToImport = Array.from(selectedTables);
                     onImport();
                     
                     // Import all selected tables sequentially
                     const importPromises = tablesToImport.map(tableName => 
-                        fetch(getUrls().DATA_LOADER_INGEST_DATA, {
+                        fetchWithSession(getUrls().DATA_LOADER_INGEST_DATA, {
                             method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json',
@@ -1175,7 +1243,7 @@ export const DataLoaderForm: React.FC<{
                                 data_loader_params: params, 
                                 table_name: tableName
                             })
-                        }).then(response => response.json())
+                        }, dispatch).then((response: Response) => response.json())
                     );
                     
                     Promise.all(importPromises)
@@ -1183,7 +1251,13 @@ export const DataLoaderForm: React.FC<{
                             const errors = results.filter(r => r.status !== "success");
                             if (errors.length === 0) {
                                 setSelectedTables(new Set());
-                                onFinish("success", `Successfully imported ${tablesToImport.length} table(s)`, tablesToImport);
+                                // Get the actual table names that were created (may be sanitized)
+                                const actualTableNames = results
+                                    .filter(r => r.status === "success" && r.table_name)
+                                    .map(r => r.table_name);
+                                // Fallback to original names if actual names not provided
+                                const finalTableNames = actualTableNames.length > 0 ? actualTableNames : tablesToImport;
+                                onFinish("success", `Successfully imported ${tablesToImport.length} table(s)`, finalTableNames);
                             } else {
                                 onFinish("error", `Failed to import some tables: ${errors.map(e => e.error).join(", ")}`);
                             }
@@ -1194,17 +1268,18 @@ export const DataLoaderForm: React.FC<{
                         });
                 }}
             >
-                Import Selected ({selectedTables.size})
+                Import Selected Tables ({selectedTables.size})
             </Button>
-        </Box>,
-        mode === "query" && <DataQueryForm 
-            dataLoaderType={dataLoaderType} 
-            availableTables={Object.keys(tableMetadata).map(t => ({name: t, fields: tableMetadata[t].columns.map((c: any) => c.name)}))} 
-            dataLoaderParams={params} onImport={onImport} onFinish={onFinish} />
+        </Box>
     ]
 
+    const isConnected = Object.keys(tableMetadata).length > 0;
+
     return (
         <Box sx={{p: 0}}>
+            <Typography sx={{fontSize: 16, flex: 1}}>
+                Import tables from <Typography component="span" sx={{ fontSize: 'inherit', color: 'secondary.main', fontWeight: 'bold'}}>{dataLoaderType}</Typography>
+            </Typography>
             {isConnecting && <Box sx={{
                 position: "absolute", top: 0, left: 0, width: "100%", height: "100%", 
                 display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000,
@@ -1212,366 +1287,237 @@ export const DataLoaderForm: React.FC<{
             }}>
                 <CircularProgress size={20} />
             </Box>}
-            <Typography variant="body2" sx={{}}>
-                Data Connector (<Typography component="span" sx={{color: "secondary.main", fontWeight: "bold"}}>{dataLoaderType}</Typography>)
-            </Typography>
-            <Box sx={{display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 1, ml: 4, mt: 2}}>
-                {paramDefs.map((paramDef) => (
-                    <Box key={paramDef.name}>
-                        <TextField
-                            disabled={Object.keys(tableMetadata).length > 0}
-                            sx={{width: "270px", 
-                                '& .MuiInputLabel-root': {fontSize: 14},
-                                '& .MuiInputBase-root': {fontSize: 14},
-                                '& .MuiInputBase-input::placeholder': {fontSize: 12, fontStyle: "italic"}
-                            }}
-                            variant="standard"
-                            size="small"
-                            required={paramDef.required}
-                            key={paramDef.name}
-                            label={paramDef.name}
-                            value={params[paramDef.name] ?? ''}
-                            placeholder={paramDef.default ? `e.g. ${paramDef.default}` : paramDef.description}
-                            onChange={(event: any) => { 
-                                dispatch(dfActions.updateDataLoaderConnectParam({
-                                    dataLoaderType, paramName: paramDef.name, 
-                                    paramValue: event.target.value}));
-                            }}
-                            slotProps={{
-                                inputLabel: {shrink: true}
-                            }}
-                        />
+            {isConnected ? (
+                // Connected state: show connection parameters and disconnect button
+                <Box sx={{mt: 2}}>
+                    <Box sx={{mb: 2}}>
+                        <Box sx={{display: "flex", flexDirection: "row", alignItems: "center", gap: 1, mb: 2, flexWrap: "wrap"}}>
+                            <Box sx={{flex: 1, minWidth: 200, display: "flex", flexDirection: "row", alignItems: "center", gap: 1.5, flexWrap: "wrap"}}>
+                                {paramDefs.filter((paramDef) => params[paramDef.name]).map((paramDef, index) => (
+                                    <Box key={paramDef.name} sx={{display: "flex", alignItems: "center", gap: 0.5}}>
+                                        <Typography variant="body2" component="span" sx={{fontSize: 13, color: 'text.secondary', fontWeight: 500}}>
+                                            {paramDef.name}:
+                                        </Typography>
+                                        <Typography variant="body2" component="span" sx={{fontSize: 13, color: 'text.primary'}}>
+                                            {params[paramDef.name] || '(empty)'}
+                                        </Typography>
+                                        {index < paramDefs.filter((paramDef) => params[paramDef.name]).length - 1 && (
+                                            <Typography variant="body2" component="span" sx={{fontSize: 13, color: 'text.secondary', mx: 0.5}}>
+                                                •
+                                            </Typography>
+                                        )}
+                                    </Box>
+                                ))}
+                            </Box>
+                        </Box>
+                        <Box sx={{display: "flex", flexDirection: "row", gap: 1}}>
+                            <Box sx={{display: "flex", flexDirection: "row", alignItems: "center", gap: 1, width: "calc(40% - 1rem)"}}>
+                                <Box sx={{display: "flex", flexDirection: "row", alignItems: "center", gap: 0.5, minWidth: "70px"}}>
+                                    <SearchIcon sx={{ fontSize: 12, color: theme.palette.secondary.main }} />
+                                    <Typography 
+                                        sx={{
+                                            fontSize: 12,
+                                            fontWeight: 400,
+                                            color: theme.palette.secondary.main
+                                        }}
+                                    >
+                                        table filter
+                                    </Typography>
+                                </Box>
+                                <TextField
+                                    sx={{
+                                        flex: 1,
+                                        '& .MuiInputBase-root': {fontSize: 12, height: '32px'},
+                                        '& .MuiInputBase-input': {fontSize: 12, py: 0.75},
+                                        '& .MuiInputBase-input::placeholder': {fontSize: 11, fontStyle: "italic"},
+                                        '& .MuiOutlinedInput-root': {
+                                            '& fieldset': {borderColor: theme.palette.secondary.main},
+                                            '&:hover fieldset': {borderColor: theme.palette.secondary.dark},
+                                        }
+                                    }}
+                                    variant="outlined"
+                                    size="small"
+                                    color="secondary"
+                                    autoComplete="off"
+                                    placeholder="load only tables containing keywords"
+                                    value={tableFilter}
+                                    onChange={(event) => setTableFilter(event.target.value)}
+                                />
+                            </Box>
+                            <Box sx={{display: "flex", flexDirection: "row", alignItems: "center", gap: 1}}>
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    sx={{textTransform: "none"}}
+                                    onClick={() => {
+                                        setIsConnecting(true);
+                                        fetchWithSession(getUrls().DATA_LOADER_LIST_TABLES, {
+                                            method: 'POST',
+                                            headers: {
+                                                'Content-Type': 'application/json',
+                                            },
+                                            body: JSON.stringify({
+                                                data_loader_type: dataLoaderType, 
+                                                data_loader_params: params,
+                                                table_filter: tableFilter.trim() || null
+                                            })
+                                        }, dispatch).then((response: Response) => response.json())
+                                    .then((data: any) => {
+                                        if (data.status === "success") {
+                                            console.log(data.tables);
+                                            setTableMetadata(Object.fromEntries(data.tables.map((table: any) => {
+                                                return [table.name, table.metadata];
+                                            })));
+                                        } else {
+                                            console.error('Failed to fetch data loader tables: {}', data.message);
+                                            onFinish("error", `Failed to fetch data loader tables: ${data.message}`);
+                                        }
+                                        setIsConnecting(false);
+                                    })
+                                    .catch((error: any) => {
+                                        onFinish("error", `Failed to fetch data loader tables, please check the server is running`);
+                                        setIsConnecting(false);
+                                    });
+                                    }}
+                                >
+                                    Refresh
+                                </Button>
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    sx={{textTransform: "none"}}
+                                    onClick={() => {
+                                        setTableMetadata({});
+                                        setTableFilter("");
+                                    }}
+                                >
+                                    Disconnect
+                                </Button>
+                            </Box>
+                        </Box>
                     </Box>
-                ))}
-                <TextField
-                    size="small"
-                    color="secondary"
-                    sx={{width: "270px", 
-                        '& .MuiInputLabel-root': {fontSize: 14, color: theme.palette.secondary.main},
-                        '& .MuiInputBase-root': {fontSize: 14},
-                        '& .MuiInputBase-input::placeholder': {fontSize: 12, fontStyle: "italic"},
-                        '&:hover': {
-                            backgroundColor: alpha(theme.palette.secondary.main, 0.03),
-                        },
-                    }}
-                    key="table-filter"
-                    autoComplete="off"
-                    variant="standard"
-                    label={<Box sx={{display: "flex", flexDirection: "row", alignItems: "center", gap: 0.5}}>
-                        <SearchIcon sx={{ fontSize: 16, color: theme.palette.secondary.main }} />
-                        table filter
-                    </Box>}
-                    placeholder="load only tables containing keywords"
-                    value={tableFilter}
-                    onChange={(event) => setTableFilter(event.target.value)}
-                    slotProps={{
-                        inputLabel: {shrink: true},
-                    }}
-                />
-                {paramDefs.length > 0 && <ButtonGroup sx={{height: 32, mt: 'auto'}} size="small" 
-                 variant="contained" color="primary">
-                    <Button 
-                        sx={{textTransform: "none"}}
-                        onClick={() => {
-                            setIsConnecting(true);
-                            setDisplayAuthInstructions(false);
-                            fetch(getUrls().DATA_LOADER_LIST_TABLES, {
-                                method: 'POST',
-                                headers: {
-                                    'Content-Type': 'application/json',
-                                },
-                                body: JSON.stringify({
-                                    data_loader_type: dataLoaderType, 
-                                    data_loader_params: params,
-                                    table_filter: tableFilter.trim() || null
+                    
+                    {tableMetadataBox}
+                </Box>
+            ) : (
+                // Not connected: show connection forms
+                <>
+                    <Box sx={{display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 1, mt: 2}}>
+                        {paramDefs.map((paramDef) => (
+                            <Box key={paramDef.name} 
+                                sx={{display: "flex", flexDirection: "row", mr: 1,alignItems: "center", gap: 1, width: "calc(50% - 1rem)"}}>
+                                <Typography 
+                                    sx={{
+                                        minWidth: "70px",
+                                        fontSize: 12,
+                                        fontWeight: paramDef.required ? 500 : 400,
+                                        color: paramDef.required ? 'text.primary' : 'text.secondary'
+                                    }}
+                                >
+                                    {paramDef.name}
+                                    {paramDef.required && <span style={{color: 'red'}}> *</span>}
+                                </Typography>
+                                <TextField
+                                    sx={{
+                                        flex: 1,
+                                        '& .MuiInputBase-root': {fontSize: 12, height: '32px'},
+                                        '& .MuiInputBase-input': {fontSize: 12, py: 0.75},
+                                        '& .MuiInputBase-input::placeholder': {fontSize: 11, fontStyle: "italic"}
+                                    }}
+                                    variant="outlined"
+                                    size="small"
+                                    required={paramDef.required}
+                                    value={params[paramDef.name] ?? ''}
+                                    placeholder={paramDef.default ? `e.g. ${paramDef.default}` : paramDef.description}
+                                    onChange={(event: any) => { 
+                                        dispatch(dfActions.updateDataLoaderConnectParam({
+                                            dataLoaderType, paramName: paramDef.name, 
+                                            paramValue: event.target.value}));
+                                    }}
+                                />
+                            </Box>
+                        ))}
+                        <Box sx={{display: "flex", flexDirection: "row", alignItems: "center", gap: 1, width: "calc(50% - 1rem)", mr: 1}}>
+                            <Box sx={{display: "flex", flexDirection: "row", alignItems: "center", gap: 0.5, minWidth: "70px"}}>
+                                <SearchIcon sx={{ fontSize: 12, color: theme.palette.secondary.main }} />
+                                <Typography 
+                                    sx={{
+                                        fontSize: 12,
+                                        fontWeight: 400,
+                                        color: theme.palette.secondary.main
+                                    }}
+                                >
+                                    table filter
+                                </Typography>
+                            </Box>
+                            <TextField
+                                sx={{
+                                    flex: 1,
+                                    '& .MuiInputBase-root': {fontSize: 12, height: '32px'},
+                                    '& .MuiInputBase-input': {fontSize: 12, py: 0.75},
+                                    '& .MuiInputBase-input::placeholder': {fontSize: 11, fontStyle: "italic"},
+                                    '& .MuiOutlinedInput-root': {
+                                        '& fieldset': {borderColor: theme.palette.secondary.main},
+                                        '&:hover fieldset': {borderColor: theme.palette.secondary.dark},
+                                    }
+                                }}
+                                variant="outlined"
+                                size="small"
+                                color="secondary"
+                                autoComplete="off"
+                                placeholder="load only tables containing keywords"
+                                value={tableFilter}
+                                onChange={(event) => setTableFilter(event.target.value)}
+                            />
+                        </Box>
+                        {paramDefs.length > 0 && <ButtonGroup sx={{height: 32, mt: 'auto'}} size="small" 
+                         variant="contained" color="primary">
+                            <Button 
+                                sx={{textTransform: "none"}}
+                                onClick={() => {
+                                    setIsConnecting(true);
+                                    fetchWithSession(getUrls().DATA_LOADER_LIST_TABLES, {
+                                        method: 'POST',
+                                        headers: {
+                                            'Content-Type': 'application/json',
+                                        },
+                                        body: JSON.stringify({
+                                            data_loader_type: dataLoaderType, 
+                                            data_loader_params: params,
+                                            table_filter: tableFilter.trim() || null
+                                        })
+                                    }, dispatch).then((response: Response) => response.json())
+                                .then((data: any) => {
+                                    if (data.status === "success") {
+                                        console.log(data.tables);
+                                        setTableMetadata(Object.fromEntries(data.tables.map((table: any) => {
+                                            return [table.name, table.metadata];
+                                        })));
+                                    } else {
+                                        console.error('Failed to fetch data loader tables: {}', data.message);
+                                        onFinish("error", `Failed to fetch data loader tables: ${data.message}`);
+                                    }
+                                    setIsConnecting(false);
                                 })
-                        }).then(response => response.json())
-                        .then(data => {
-                            if (data.status === "success") {
-                                console.log(data.tables);
-                                setTableMetadata(Object.fromEntries(data.tables.map((table: any) => {
-                                    return [table.name, table.metadata];
-                                })));
-                            } else {
-                                console.error('Failed to fetch data loader tables: {}', data.message);
-                                onFinish("error", `Failed to fetch data loader tables: ${data.message}`);
-                            }
-                            setIsConnecting(false);
-                        })
-                        .catch(error => {
-                            onFinish("error", `Failed to fetch data loader tables, please check the server is running`);
-                            setIsConnecting(false);
-                        });
-                    }}>
-                        {Object.keys(tableMetadata).length > 0 ? "refresh" : "connect"} {tableFilter.trim() ? "with filter" : ""}
-                    </Button>
-                    <Button 
-                        disabled={Object.keys(tableMetadata).length === 0}
-                        sx={{textTransform: "none"}}                        onClick={() => {
-                            setTableMetadata({});
-                            setTableFilter("");
-                        }}>
-                        disconnect
-                    </Button>
-                </ButtonGroup>}
-
-            </Box>            
-            <Box  sx={{display: "flex", flexDirection: "row", alignItems: "center", gap: 1, ml: 4, mt: 4}}>
-                
-            </Box>
-            <Button
-                variant="text" 
-                size="small" 
-                sx={{textTransform: "none", height: 32, mt: 1}}
-                onClick={() => setDisplayAuthInstructions(!displayAuthInstructions)}>
-                {displayAuthInstructions ? "hide" : "show"} authentication instructions
-            </Button>
-            {<Collapse in={displayAuthInstructions} timeout="auto" unmountOnExit>
-                <Paper sx={{px: 1, py: 0.5, maxHeight: 300, overflowY: "auto"}}>
-                    <Typography variant="body2" sx={{fontSize: 12, whiteSpace: "pre-wrap", p: 1}}>
+                                .catch((error: any) => {
+                                    onFinish("error", `Failed to fetch data loader tables, please check the server is running`);
+                                    setIsConnecting(false);
+                                });
+                            }}>
+                                connect {tableFilter.trim() ? "with filter" : ""}
+                            </Button>
+                        </ButtonGroup>}
+                    </Box>
+                    <Box  sx={{display: "flex", flexDirection: "row", alignItems: "center", gap: 1, ml: 4, mt: 4}}>
+                        
+                    </Box>
+                    <Typography variant="body2" sx={{
+                        color: "text.secondary",
+                        fontSize: 12, overflowY: "auto", whiteSpace: "pre-wrap", p: 1}}>
                         {authInstructions.trim()}
                     </Typography>
-                </Paper>
-                </Collapse>
-            }
-            
-            {Object.keys(tableMetadata).length > 0 && tableMetadataBox }
+                </>
+            )}
         </Box>
     );
-}
-
-export const DataQueryForm: React.FC<{
-    dataLoaderType: string,
-    availableTables: {name: string, fields: string[]}[],
-    dataLoaderParams: Record<string, string>,
-    onImport: () => void,
-    onFinish: (status: "success" | "error", message: string) => void
-}> = ({dataLoaderType, availableTables, dataLoaderParams, onImport, onFinish}) => {
-
-    let activeModel = useSelector(dfSelectors.getActiveModel);
-
-    const [selectedTables, setSelectedTables] = useState<string[]>(availableTables.map(t => t.name).slice(0, 5));
-
-    const [waiting, setWaiting] = useState(false);
-
-    const [query, setQuery] = useState("-- query the data source / describe your goal and ask AI to help you write the query\n");
-    const [queryResult, setQueryResult] = useState<{
-        status: string,
-        message: string,
-        sample: any[],
-        code: string,
-    } | undefined>(undefined);
-    const [queryResultName, setQueryResultName] = useState("");
-    
-    const aiCompleteQuery = (query: string) => {
-        if (queryResult?.status === "error") {
-            setQueryResult(undefined);
-        }
-        let data = {
-            data_source_metadata: {
-                data_loader_type: dataLoaderType,
-                tables: availableTables.filter(t => selectedTables.includes(t.name))
-            },
-            query: query,
-            model: activeModel
-        }
-        setWaiting(true);
-        fetch(getUrls().QUERY_COMPLETION, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(data)
-        })
-        .then(response => response.json())
-        .then(data => {
-            setWaiting(false);
-            if (data.status === "ok") {
-                setQuery(data.query);
-            } else {
-                onFinish("error", data.reasoning);
-            }
-        })
-        .catch(error => {
-            setWaiting(false);
-            onFinish("error", `Failed to complete query please try again.`);
-        });
-    }
-
-    const handleViewQuerySample = (query: string) => {
-        setQueryResult(undefined);
-        setWaiting(true);
-        fetch(getUrls().DATA_LOADER_VIEW_QUERY_SAMPLE, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                data_loader_type: dataLoaderType,
-                data_loader_params: dataLoaderParams,
-                query: query
-            })
-        })
-        .then(response => response.json())
-        .then(data => {
-            setWaiting(false);
-            if (data.status === "success") {
-                setQueryResult({
-                    status: "success",
-                    message: "Data loaded successfully",
-                    sample: data.sample,
-                    code: query
-                });
-                let newName = `r_${Math.random().toString(36).substring(2, 4)}`;
-                setQueryResultName(newName);
-            } else {
-                setQueryResult({
-                    status: "error",
-                    message: data.message,
-                    sample: [],
-                    code: query
-                });
-            }
-        })
-        .catch(error => {
-            setWaiting(false);
-            setQueryResult({
-                status: "error",
-                message: `Failed to view query sample, please try again.`,
-                sample: [],
-                code: query
-            });
-        });
-    }
-
-    const handleImportQueryResult = () => {
-        setWaiting(true);
-        fetch(getUrls().DATA_LOADER_INGEST_DATA_FROM_QUERY, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                data_loader_type: dataLoaderType,
-                data_loader_params: dataLoaderParams,
-                query: queryResult?.code ?? query,
-                name_as: queryResultName
-            })
-        })
-        .then(response => response.json())
-        .then(data => {
-            setWaiting(false);
-            if (data.status === "success") {
-                onFinish("success", "Data imported successfully");
-            } else {
-                onFinish("error", data.reasoning);
-            }
-        })
-        .catch(error => {
-            setWaiting(false);
-            onFinish("error", `Failed to import data, please try again.`);
-        });
-    }
-
-    let queryResultBox = queryResult?.status === "success" && queryResult.sample.length > 0 ? [
-         <Box key="query-result-table" sx={{display: "flex", flexDirection: "row", gap: 1, justifyContent: "space-between"}}>
-            <CustomReactTable rows={queryResult.sample} columnDefs={Object.keys(queryResult.sample[0]).map((t: any) => ({id: t, label: t}))} rowsPerPageNum={-1} compact={false} />
-        </Box>,
-        <Box key="query-result-controls" sx={{display: "flex", flexDirection: "row", gap: 1, alignItems: "center"}}>
-            <Button variant="outlined" color="primary" size="small" sx={{textTransform: "none", minWidth: 120, mr: 'auto'}}
-                onClick={() => {
-                    setQueryResult(undefined);
-                    setQueryResultName("");
-                }}>
-                clear result
-            </Button>
-            <TextField
-                size="small"
-                label="import as"
-                sx={{width: 120, ml: 'auto', '& .MuiInputBase-root': {fontSize: 12, height: 32}, 
-                     '& .MuiInputLabel-root': {fontSize: 12, transform: "translate(14px, -6px) scale(0.75)"}}}
-                slotProps={{
-                    inputLabel: {shrink: true},
-                }}
-                value={queryResultName}
-                onChange={(event: any) => setQueryResultName(event.target.value)}
-            />
-            <Button variant="contained" color="primary" size="small" disabled={queryResultName === ""} sx={{textTransform: "none", width: 120}}
-                onClick={() => handleImportQueryResult()}>
-            import data
-            </Button> 
-        </Box>
-    ] : [];
-    
-    return (
-        <Paper sx={{display: "flex", flexDirection: "column", gap: 1, p: 1, position: "relative"}}>
-            {waiting && <Box sx={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
-                display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000,
-                backgroundColor: "rgba(255, 255, 255, 0.7)"}}>
-                <CircularProgress size={20} />
-            </Box>}
-            <Typography variant="body2" sx={{color: "text.secondary"}}>
-                <Typography variant="caption" sx={{color: "text.primary", fontSize: 11, mx: 0.5}}>
-                    query from tables:
-                </Typography>
-                {availableTables.map((table) => (
-                    <Chip key={table.name} label={table.name} //icon={selectedTables.includes(table.name) ? <CheckIcon /> : undefined}
-                        color={selectedTables.includes(table.name) ? "primary" : "default"} variant="outlined" 
-                        sx={{ fontSize: 11, margin: 0.25, 
-                            height: 20, borderRadius: 0.5, 
-                            borderColor: selectedTables.includes(table.name) ? "primary.main" : "rgba(0, 0, 0, 0.1)",
-                            color: selectedTables.includes(table.name) ? "primary.main" : "text.secondary",
-                            '&:hover': {
-                                backgroundColor: "rgba(0, 0, 0, 0.07)",
-                            }
-                        }}
-                        size="small" 
-                        onClick={() => {
-                            setSelectedTables(selectedTables.includes(table.name) ? selectedTables.filter(t => t !== table.name) : [...selectedTables, table.name]);
-                        }}
-                    />
-                ))}
-            </Typography>
-            <Box sx={{display: "flex", flexDirection: "column", gap: 1, }}>
-                <Box sx={{maxHeight: 300, overflowY: "auto"}}>
-                    <Editor
-                        value={query}
-                        onValueChange={(tempCode: string) => {
-                            setQuery(tempCode);
-                        }}
-                        highlight={code => Prism.highlight(code, Prism.languages.sql, 'sql')}
-                        padding={10}
-                        style={{
-                            minHeight: queryResult ? 60 : 200,
-                            fontFamily: '"Fira code", "Fira Mono", monospace',
-                            fontSize: 12,
-                            paddingBottom: '24px',
-                            backgroundColor: "rgba(0, 0, 0, 0.03)",
-                            overflowY: "auto"
-                        }}
-                    />
-                </Box>
-                {queryResult?.status === "error" && <Box sx={{display: "flex", flexDirection: "row", gap: 1, alignItems: "center", overflow: "auto"}}>
-                        <Typography variant="body2" sx={{color: "text.secondary", fontSize: 11, backgroundColor: "rgba(255, 0, 0, 0.1)", p: 0.5, borderRadius: 0.5}}>
-                            {queryResult?.message} 
-                        </Typography>
-                    </Box>}
-                <Box sx={{display: "flex", flexDirection: "row", gap: 1, justifyContent: "flex-end"}}>
-                    <Button variant="outlined" color="primary" size="small" sx={{textTransform: "none"}} disabled={queryResult?.status === "error"}
-                        startIcon={<PrecisionManufacturingIcon />} onClick={() => aiCompleteQuery(query)}>
-                        help me complete the query from selected tables
-                    </Button>
-                    {queryResult?.status === "error" && <Button variant="contained" color="primary" size="small" sx={{textTransform: "none",minWidth: 120}} 
-                        startIcon={<PrecisionManufacturingIcon />} onClick={() => aiCompleteQuery(queryResult.code + "\n error:" + queryResult.message)}>
-                        help me fix the error
-                    </Button>}
-                    <Button variant="contained" color="primary" size="small" sx={{textTransform: "none", ml: 'auto', width: 80}}
-                        onClick={() => handleViewQuerySample(query)}>
-                        run query
-                    </Button>
-                </Box>
-                {queryResult && queryResultBox}
-            </Box>
-        </Paper>
-    )
 }
\ No newline at end of file
diff --git a/src/views/DataFormulator.tsx b/src/views/DataFormulator.tsx
index ead4e94..c71aaea 100644
--- a/src/views/DataFormulator.tsx
+++ b/src/views/DataFormulator.tsx
@@ -41,17 +41,14 @@ import { VisualizationViewFC } from './VisualizationView';
 import { ConceptShelf } from './ConceptShelf';
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
-import { TableCopyDialogV2, DatasetSelectionDialog } from './TableSelectionView';
-import { TableUploadDialog } from './TableSelectionView';
 import { toolName } from '../app/App';
 import { DataThread } from './DataThread';
 
 import dfLogo from '../assets/df-logo.png';
 import exampleImageTable from "../assets/example-image-table.png";
 import { ModelSelectionButton } from './ModelSelectionDialog';
-import { DBTableSelectionDialog } from './DBTableManager';
 import { getUrls } from '../app/utils';
-import { DataLoadingChatDialog } from './DataLoadingChat';
+import { UnifiedDataUploadDialog, UploadTabType } from './UnifiedDataUploadDialog';
 import { ReportView } from './ReportView';
 import { ExampleSession, exampleSessions, ExampleSessionCard } from './ExampleSessions';
 
@@ -65,6 +62,15 @@ export const DataFormulatorFC = ({ }) => {
 
     const dispatch = useDispatch();
 
+    // State for unified data upload dialog
+    const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+    const [uploadDialogInitialTab, setUploadDialogInitialTab] = useState<UploadTabType>('menu');
+
+    const openUploadDialog = (tab: UploadTabType) => {
+        setUploadDialogInitialTab(tab);
+        setUploadDialogOpen(true);
+    };
+
     const handleLoadExampleSession = (session: ExampleSession) => {
         dispatch(dfActions.addMessages({
             timestamp: Date.now(),
@@ -274,19 +280,32 @@ export const DataFormulatorFC = ({ }) => {
             </Typography>
             <Box sx={{my: 4}}>
                 <Typography sx={{ 
-                    maxWidth: 1100, fontSize: 28, color: alpha(theme.palette.text.primary, 0.8), 
-                    '& span': { textDecoration: 'underline', textUnderlineOffset: '0.2em', cursor: 'pointer' }}}>
+                    maxWidth: 1100, fontSize: 32, color: alpha(theme.palette.text.primary, 0.8), 
+                    lineHeight: 2,
+                    '& span': { 
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.02em',
+                        textDecoration: 'underline', textUnderlineOffset: '0.2em', 
+                        cursor: 'pointer', color: theme.palette.primary.main,
+                        '&:hover': {
+                            color: theme.palette.primary.dark,
+                        }
+                    }}}>
                     To begin, 
-                    <DataLoadingChatDialog buttonElement={<span>extract</span>}/>{' '}
+                    {' '}<span onClick={() => openUploadDialog('extract')}>extract</span>{' '}
                     data from images or text documents, load {' '}
-                    <DatasetSelectionDialog buttonElement={<span>examples</span>}/>, 
+                    {' '}<span onClick={() => openUploadDialog('explore')}>examples</span>{' '}, 
                     upload data from{' '}
-                    <TableCopyDialogV2 buttonElement={<span>clipboard</span>} disabled={false}/> or {' '}
-                    <TableUploadDialog buttonElement={<span>files</span>} disabled={false}/>, 
-                    
+                    {' '}<span onClick={() => openUploadDialog('paste')}>clipboard</span> or {' '}
+                    {' '}<span onClick={() => openUploadDialog('upload')}>files</span>{' '}, 
                     or connect to a{' '}
-                    <DBTableSelectionDialog buttonElement={<span>database</span>}/>.
+                    {' '}<span onClick={() => openUploadDialog('database')}>database</span>{' '}.
                 </Typography>
+                <UnifiedDataUploadDialog 
+                    open={uploadDialogOpen}
+                    onClose={() => setUploadDialogOpen(false)}
+                    initialTab={uploadDialogInitialTab}
+                />
             </Box>
             <Box sx={{mt: 4}}>
                 <Divider sx={{width: '200px', mx: 'auto', mb: 3, fontSize: '1.2rem'}}>
@@ -331,7 +350,7 @@ export const DataFormulatorFC = ({ }) => {
                         zIndex: 1000,
                     }}>
                         <Box sx={{margin:'auto', pb: '5%', display: "flex", flexDirection: "column", textAlign: "center"}}>
-                            <Box component="img" sx={{  width: 196, margin: "auto" }} alt="" src={dfLogo} fetchPriority="high" />
+                            <Box component="img" sx={{  width: 196, margin: "auto" }} alt="Data Formulator logo" src={dfLogo} fetchPriority="high" />
                             <Typography variant="h3" sx={{marginTop: "20px", fontWeight: 200, letterSpacing: '0.05em'}}>
                                 {toolName}
                             </Typography>
diff --git a/src/views/DataLoadingChat.tsx b/src/views/DataLoadingChat.tsx
index a3273a5..6602149 100644
--- a/src/views/DataLoadingChat.tsx
+++ b/src/views/DataLoadingChat.tsx
@@ -4,9 +4,7 @@
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 
-import { Box, Button, Divider, IconButton, Typography, Dialog, DialogTitle, DialogContent, Tooltip, CircularProgress } from '@mui/material';
-import RestartAltIcon from '@mui/icons-material/RestartAlt';
-import CloseIcon from '@mui/icons-material/Close';
+import { Box, Button, Divider, IconButton, Typography, Tooltip, CircularProgress, alpha, useTheme } from '@mui/material';
 
 
 import { useDispatch, useSelector } from 'react-redux';
@@ -32,7 +30,7 @@ const getUniqueTableName = (baseName: string, existingNames: Set<string>): strin
 };
 
 export const DataLoadingChat: React.FC = () => {
-
+    const theme = useTheme();
     const dispatch = useDispatch<AppDispatch>();
     const inputBoxRef = useRef<(() => void) | null>(null);
     const abortControllerRef = useRef<AbortController | null>(null);
@@ -89,12 +87,6 @@ export const DataLoadingChat: React.FC = () => {
         }
     };
 
-    if (!existOutputBlocks && !streamingContent) {
-        return <Box sx={{ width: 'calc(100% - 32px)', borderRadius: 2, px: 2 }}>
-            <DataLoadingInputBox maxLines={24} onStreamingContentUpdate={setStreamingContent} abortControllerRef={abortControllerRef} />
-        </Box>
-    }
-
     const thinkingBanner = (
         <Box sx={{ 
             py: 0.5, 
@@ -140,210 +132,241 @@ export const DataLoadingChat: React.FC = () => {
         </Box>
     );
 
-    
-    let chatCard = (
-        <Box sx={{ width: (existOutputBlocks || streamingContent) ? '960px' : '640px', minHeight: 400,
-                display: 'flex', flexDirection: 'row', borderRadius: 2 }}>
-            
-            {/* Left: Chat panel */}
-            <Box
-                sx={{
-                    width: 240,
+    // Empty state - centered layout similar to upload dialog
+    if (!existOutputBlocks && !streamingContent) {
+        return (
+            <Box sx={{ 
+                width: '100%', 
+                height: '100%', 
+                display: 'flex', 
+                justifyContent: 'center', 
+                alignItems: 'center',
+                p: 2,
+                boxSizing: 'border-box'
+            }}>
+                <Box sx={{ 
+                    width: '100%',
+                    maxWidth: 720,
                     display: 'flex',
                     flexDirection: 'column',
-                    padding: 1,
-                    position: 'relative'
-                }}
-            >
-                <Box sx={{ flex: 1,  display: 'flex', flexDirection: 'column', minHeight: '480px', 
-                    overflowY: 'auto', overflowX: 'hidden' }}>
-                    {threadsComponent}
+                    gap: 2,
+                }}>
+                    <DataLoadingInputBox 
+                        maxLines={24} 
+                        onStreamingContentUpdate={setStreamingContent} 
+                        abortControllerRef={abortControllerRef} 
+                    />
                 </Box>
-                <DataLoadingInputBox ref={inputBoxRef} maxLines={4} onStreamingContentUpdate={setStreamingContent} abortControllerRef={abortControllerRef} />
             </Box>
+        );
+    }
 
-            <Divider orientation="vertical" flexItem sx={{m: 2, color: 'divider'}} />
-
-            {streamingContent && (
-                <Box
-                    sx={{
-                        flex: 1.4,
-                        minWidth: 480,
-                        maxWidth: 640,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        padding: 1
-                    }}
-                >
-                    {thinkingBanner}
-                    <Typography variant="body2" color="text.secondary" 
-                        sx={{ mt: 4, fontSize: '11px', whiteSpace: 'pre-wrap', overflow: 'clip', maxHeight: '600px', overflowY: 'auto' }}>
-                        {streamingContent.trim()}
-                    </Typography>
-                </Box>
-            )}
-
-            {/* Right: Data preview panel */}
-            {(existOutputBlocks && !streamingContent) && (
-                <Box
-                    sx={{
-                        flex: 1.4,
-                        minWidth: 480,
+    // Main layout with sidebar (similar to DBTablePane)
+    return (
+        <Box sx={{ 
+            display: 'flex', 
+            flexDirection: 'column', 
+            bgcolor: 'white', 
+            flex: 1, 
+            overflow: 'hidden', 
+            height: '100%',
+            width: '100%'
+        }}>
+            <Box sx={{ 
+                display: 'flex', 
+                flexDirection: 'row', 
+                flex: 1, 
+                overflow: 'hidden', 
+                minHeight: 0, 
+                height: '100%' 
+            }}>
+                {/* Left sidebar - Thread list (similar to DBTablePane) */}
+                <Box sx={{ 
+                    display: 'flex', 
+                    flexDirection: 'column', 
+                    width: 240, 
+                    minWidth: 240, 
+                    maxWidth: 240, 
+                    overflow: 'hidden', 
+                    height: '100%',
+                    borderRight: '1px solid',
+                    borderColor: 'divider'
+                }}>
+                    <Box sx={{ 
                         display: 'flex',
                         flexDirection: 'column',
-                        padding: 1
-                    }}
-                >
-                    
-                    <Typography 
-                        sx={{ 
-                            fontSize: 14, 
-                            marginBottom: 1,
-                            fontWeight: 500,
-                            color: 'text.primary',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 0.5
-                        }}
-                        gutterBottom
-                    >
-                        {selectedTable && (
-                            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-                                {selectedTable?.name}
-                            </Typography>
-                        )}
-                    </Typography>
-                    
-                    <Box 
-                        sx={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            flex: 1,
-                            gap: 1,
-                            overflow: 'hidden'
-                        }}
-                    >
-                        {selectedTable ? (
-                            <DataPreviewBox />
+                        overflowY: 'auto',
+                        overflowX: 'hidden',
+                        flex: 1,
+                        minHeight: 0,
+                        height: '100%',
+                        position: 'relative',
+                        overscrollBehavior: 'contain',
+                        px: 0.5,
+                        pt: 1
+                    }}>
+                        {threadsComponent.length > 0 ? (
+                            threadsComponent
                         ) : (
-                            <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', mt: 4, fontSize: '11px' }}>
-                                No data available
+                            <Typography variant="caption" sx={{ 
+                                color: "text.disabled", 
+                                px: 2, 
+                                py: 0.5, 
+                                fontStyle: "italic",
+                                textAlign: 'center'
+                            }}>
+                                No extraction threads yet
                             </Typography>
                         )}
+                    </Box>
+                    <Box sx={{ 
+                        borderTop: '1px solid',
+                        borderColor: 'divider',
+                        p: 1
+                    }}>
+                        <DataLoadingInputBox 
+                            ref={inputBoxRef} 
+                            maxLines={4} 
+                            onStreamingContentUpdate={setStreamingContent} 
+                            abortControllerRef={abortControllerRef} 
+                        />
+                    </Box>
+                </Box>
 
-                        {/* Bottom submit bar */}
-                        <Box sx={{ mt: 'auto', pt: 1, display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 1, 
-                            '& .MuiButton-root': { textTransform: 'none' } }}>
-                            <Button
-                                variant="contained"
-                                sx={{  }}
-                                onClick={() => {
-                                    if (inputBoxRef.current) {
-                                        inputBoxRef.current();
-                                    }
+                {/* Right content area */}
+                <Box sx={{ 
+                    flex: 1, 
+                    overflow: 'hidden', 
+                    minWidth: 0, 
+                    minHeight: 0, 
+                    height: '100%', 
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: 'column'
+                }}>
+                    {streamingContent ? (
+                        <Box
+                            sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                padding: 2,
+                                height: '100%',
+                                overflow: 'auto'
+                            }}
+                        >
+                            {thinkingBanner}
+                            <Typography 
+                                variant="body2" 
+                                color="text.secondary" 
+                                sx={{ 
+                                    mt: 2, 
+                                    fontSize: '11px', 
+                                    whiteSpace: 'pre-wrap', 
+                                    overflow: 'clip', 
+                                    maxHeight: '100%', 
+                                    overflowY: 'auto' 
                                 }}
-                                disabled={!selectedTable || selectedTable.content.type !== 'image_url' || cleanInProgress}
-                                size="small"
                             >
-                                Extract data from image
-                            </Button>
-                            <Button
-                                variant="contained"
-                                sx={{ ml: 'auto' }}
-                                onClick={handleUpload}
-                                disabled={!selectedTable || selectedTable.content.type !== 'csv'}
-                                size="small"
+                                {streamingContent.trim()}
+                            </Typography>
+                        </Box>
+                    ) : existOutputBlocks ? (
+                        <Box
+                            sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                padding: 2,
+                                height: '100%',
+                                overflow: 'hidden'
+                            }}
+                        >
+                            {selectedTable && (
+                                <Typography 
+                                    sx={{ 
+                                        fontSize: 14, 
+                                        marginBottom: 1,
+                                        fontWeight: 500,
+                                        color: 'text.primary',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 0.5
+                                    }}
+                                    gutterBottom
+                                >
+                                    {selectedTable?.name}
+                                </Typography>
+                            )}
+                            
+                            <Box 
+                                sx={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    flex: 1,
+                                    gap: 1,
+                                    overflow: 'hidden',
+                                    minHeight: 0
+                                }}
                             >
-                                Load table
-                            </Button>
+                                {selectedTable ? (
+                                    <Box sx={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
+                                        <DataPreviewBox />
+                                    </Box>
+                                ) : (
+                                    <Box sx={{ 
+                                        display: 'flex', 
+                                        alignItems: 'center', 
+                                        justifyContent: 'center',
+                                        flex: 1,
+                                        minHeight: 0
+                                    }}>
+                                        <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', fontSize: '11px' }}>
+                                            Select a table from the left to preview
+                                        </Typography>
+                                    </Box>
+                                )}
+
+                                {/* Bottom submit bar */}
+                                {selectedTable && (
+                                    <Box sx={{ 
+                                        mt: 'auto', 
+                                        pt: 1, 
+                                        display: 'flex', 
+                                        flexDirection: 'row', 
+                                        alignItems: 'center', 
+                                        gap: 1, 
+                                        borderTop: '1px solid',
+                                        borderColor: 'divider',
+                                        '& .MuiButton-root': { textTransform: 'none' } 
+                                    }}>
+                                        <Button
+                                            variant="contained"
+                                            onClick={() => {
+                                                if (inputBoxRef.current) {
+                                                    inputBoxRef.current();
+                                                }
+                                            }}
+                                            disabled={!selectedTable || selectedTable.content.type !== 'image_url' || cleanInProgress}
+                                            size="small"
+                                        >
+                                            Extract data from image
+                                        </Button>
+                                        <Button
+                                            variant="contained"
+                                            sx={{ ml: 'auto' }}
+                                            onClick={handleUpload}
+                                            disabled={!selectedTable || selectedTable.content.type !== 'csv'}
+                                            size="small"
+                                        >
+                                            Load table
+                                        </Button>
+                                    </Box>
+                                )}
+                            </Box>
                         </Box>
-                    </Box>
+                    ) : null}
                 </Box>
-            )}
+            </Box>
         </Box>
     );
-
-    return chatCard;
-};
-
-export interface DataLoadingChatDialogProps {
-    buttonElement?: any;
-    disabled?: boolean;
-    onOpen?: () => void;
-    // Controlled mode props
-    open?: boolean;
-    onClose?: () => void;
-}
-
-export const DataLoadingChatDialog: React.FC<DataLoadingChatDialogProps> = ({ 
-    buttonElement, 
-    disabled = false, 
-    onOpen,
-    open: controlledOpen,
-    onClose,
-}) => {
-    const [internalOpen, setInternalOpen] = useState<boolean>(false);
-    const dispatch = useDispatch<AppDispatch>();
-    const dataCleanBlocks = useSelector((state: DataFormulatorState) => state.dataCleanBlocks);
-
-    // Support both controlled and uncontrolled modes
-    const isControlled = controlledOpen !== undefined;
-    const dialogOpen = isControlled ? controlledOpen : internalOpen;
-    const setDialogOpen = isControlled 
-        ? (open: boolean) => { if (!open && onClose) onClose(); }
-        : setInternalOpen;
-
-    return (
-        <>
-            {buttonElement && (
-                <Button 
-                    sx={{fontSize: "inherit"}} 
-                    variant="text" 
-                    color="primary" 
-                    disabled={disabled}
-                    onClick={() => {
-                        setDialogOpen(true);
-                        onOpen?.();
-                    }}
-                >
-                    {buttonElement}
-                </Button>
-            )}
-            <Dialog 
-                key="data-loading-chat-dialog" 
-                onClose={() => setDialogOpen(false)} 
-                open={dialogOpen}
-                sx={{ '& .MuiDialog-paper': { maxWidth: '100%', maxHeight: 840, minWidth: 800 } }}
-            >
-                <DialogTitle sx={{display: "flex"}}>
-                    Extract Data
-                    {dataCleanBlocks.length > 0 && <Tooltip title="Reset dialog">  
-                        <IconButton size="small" color='warning' 
-                            sx={{
-                            '&:hover': {  transform: 'rotate(180deg)', 
-                                        transition: 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)' } }} onClick={() => {
-                                            dispatch(dfActions.resetDataCleanBlocks());
-                                        }}>
-                            <RestartAltIcon fontSize="small" />
-                        </IconButton>
-                    </Tooltip>}
-                    <IconButton
-                        sx={{marginLeft: "auto"}}
-                        edge="start"
-                        size="small"
-                        color="inherit"
-                        onClick={() => setDialogOpen(false)}
-                        aria-label="close"
-                    >
-                        <CloseIcon fontSize="inherit"/>
-                    </IconButton>
-                </DialogTitle>
-                <DialogContent sx={{overflowX: "hidden", padding: 1}}>
-                    <DataLoadingChat />
-                </DialogContent>
-            </Dialog>
-        </>
-    );
 };
 
-
diff --git a/src/views/DataThread.tsx b/src/views/DataThread.tsx
index d873edb..d210fee 100644
--- a/src/views/DataThread.tsx
+++ b/src/views/DataThread.tsx
@@ -22,7 +22,9 @@ import {
     Popper,
     Paper,
     ClickAwayListener,
-    Badge
+    Badge,
+    Menu,
+    MenuItem,
 } from '@mui/material';
 
 import { VegaLite } from 'react-vega'
@@ -61,10 +63,15 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import CloudQueueIcon from '@mui/icons-material/CloudQueue';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import RefreshIcon from '@mui/icons-material/Refresh';
 
 import { alpha } from '@mui/material/styles';
 
 import { dfSelectors } from '../app/dfSlice';
+import { RefreshDataDialog } from './RefreshDataDialog';
+import { getUrls } from '../app/utils';
+import { AppDispatch } from '../app/store';
 
 export const ThinkingBanner = (message: string, sx?: SxProps) => (
     <Box sx={{ 
@@ -458,12 +465,62 @@ const EditableTableName: FC<{
     );
 };
 
+// Compact view for thread0 - displays table cards with charts in a simple grid
+// Reuses SingleThreadGroupView with compact mode
+let CompactThread0View: FC<{
+    scrollRef: any,
+    leafTables: DictTable[];
+    chartElements: { tableId: string, chartId: string, element: any }[];
+    sx?: SxProps
+}> = function ({
+    scrollRef,
+    leafTables,
+    chartElements,
+    sx
+}) {
+    const theme = useTheme();
+    
+    return (
+        <Box sx={{ ...sx, 
+            '& .selected-card': { 
+                border: `2px solid ${theme.palette.primary.light}`,
+            },
+            transition: "box-shadow 0.1s linear",
+        }}
+        data-thread-index={-1}>
+            <Box sx={{ display: 'flex', direction: 'ltr', margin: '2px 2px 8px 2px' }}>
+                <Divider flexItem sx={{
+                    margin: 'auto',
+                    "& .MuiDivider-wrapper": { display: 'flex', flexDirection: 'row' },
+                    "&::before, &::after": { borderColor: alpha(theme.palette.custom.main, 0.2), borderWidth: '2px', width: 60 },
+                }}>
+                    <Typography sx={{ fontSize: "10px",  color: 'text.secondary', textTransform: 'none' }}>
+                        workspace
+                    </Typography>
+                </Divider>
+            </Box>
+            <Box sx={{ padding: '2px 4px 2px 4px', marginTop: 0, direction: 'ltr' }}>
+                <SingleThreadGroupView
+                    scrollRef={scrollRef}
+                    threadIdx={-1}
+                    leafTables={leafTables}
+                    chartElements={chartElements}
+                    usedIntermediateTableIds={[]}
+                    compact={true}
+                    sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}
+                />
+            </Box>
+        </Box>
+    );
+}
+
 let SingleThreadGroupView: FC<{
     scrollRef: any,
     threadIdx: number,
     leafTables: DictTable[];
     chartElements: { tableId: string, chartId: string, element: any }[];
     usedIntermediateTableIds: string[],
+    compact?: boolean, // When true, only show table cards in a simple column (for thread0)
     sx?: SxProps
 }> = function ({
     scrollRef,
@@ -471,6 +528,7 @@ let SingleThreadGroupView: FC<{
     leafTables,
     chartElements,
     usedIntermediateTableIds, // tables that have been used
+    compact = false,
     sx
 }) {
 
@@ -490,6 +548,14 @@ let SingleThreadGroupView: FC<{
     const [selectedTableForMetadata, setSelectedTableForMetadata] = useState<DictTable | null>(null);
     const [metadataAnchorEl, setMetadataAnchorEl] = useState<HTMLElement | null>(null);
 
+    // Table menu state
+    const [tableMenuAnchorEl, setTableMenuAnchorEl] = useState<HTMLElement | null>(null);
+    const [selectedTableForMenu, setSelectedTableForMenu] = useState<DictTable | null>(null);
+
+    // Refresh data dialog state
+    const [refreshDialogOpen, setRefreshDialogOpen] = useState(false);
+    const [selectedTableForRefresh, setSelectedTableForRefresh] = useState<DictTable | null>(null);
+    const [isRefreshing, setIsRefreshing] = useState(false);
 
     let handleUpdateTableDisplayId = (tableId: string, displayId: string) => {
         dispatch(dfActions.updateTableDisplayId({
@@ -519,6 +585,127 @@ let SingleThreadGroupView: FC<{
         }
     };
 
+    // Table menu handlers
+    const handleOpenTableMenu = (table: DictTable, anchorEl: HTMLElement) => {
+        setSelectedTableForMenu(table);
+        setTableMenuAnchorEl(anchorEl);
+    };
+
+    const handleCloseTableMenu = () => {
+        setTableMenuAnchorEl(null);
+        setSelectedTableForMenu(null);
+    };
+
+    // Refresh data handlers
+    const handleOpenRefreshDialog = (table: DictTable) => {
+        setSelectedTableForRefresh(table);
+        setRefreshDialogOpen(true);
+        handleCloseTableMenu();
+    };
+
+    const handleCloseRefreshDialog = () => {
+        setRefreshDialogOpen(false);
+        setSelectedTableForRefresh(null);
+    };
+
+    // Function to refresh derived tables
+    const refreshDerivedTables = async (sourceTableId: string, newRows: any[]) => {
+        // Find all tables that are derived from this source table
+        const derivedTables = tables.filter(t => t.derive?.source?.includes(sourceTableId));
+        
+        for (const derivedTable of derivedTables) {
+            if (derivedTable.derive && derivedTable.derive.code) {
+                // Gather all parent tables for this derived table
+                const parentTableData = derivedTable.derive.source.map(sourceId => {
+                    const sourceTable = tables.find(t => t.id === sourceId);
+                    if (sourceTable) {
+                        // Use the new rows if this is the table being refreshed
+                        const rows = sourceId === sourceTableId ? newRows : sourceTable.rows;
+                        return {
+                            name: sourceTable.id,
+                            rows: rows
+                        };
+                    }
+                    return null;
+                }).filter(t => t !== null);
+
+                if (parentTableData.length > 0) {
+                    try {
+                        const response = await fetch(getUrls().REFRESH_DERIVED_DATA, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                input_tables: parentTableData,
+                                code: derivedTable.derive.code
+                            })
+                        });
+
+                        const result = await response.json();
+                        if (result.status === 'ok' && result.rows) {
+                            // Update the derived table with new rows
+                            dispatch(dfActions.updateTableRows({
+                                tableId: derivedTable.id,
+                                rows: result.rows
+                            }));
+
+                            // Recursively refresh tables derived from this one
+                            await refreshDerivedTables(derivedTable.id, result.rows);
+                        } else {
+                            console.error(`Failed to refresh derived table ${derivedTable.id}:`, result.message);
+                            dispatch(dfActions.addMessages({
+                                timestamp: Date.now(),
+                                type: 'error',
+                                component: 'data refresh',
+                                value: `Failed to refresh derived table "${derivedTable.displayId || derivedTable.id}": ${result.message || 'Unknown error'}`
+                            }));
+                        }
+                    } catch (error) {
+                        console.error(`Error refreshing derived table ${derivedTable.id}:`, error);
+                        dispatch(dfActions.addMessages({
+                            timestamp: Date.now(),
+                            type: 'error',
+                            component: 'data refresh',
+                            value: `Error refreshing derived table "${derivedTable.displayId || derivedTable.id}"`
+                        }));
+                    }
+                }
+            }
+        }
+    };
+
+    const handleRefreshComplete = async (newRows: any[]) => {
+        if (!selectedTableForRefresh) return;
+
+        setIsRefreshing(true);
+        try {
+            // Update the source table with new rows
+            dispatch(dfActions.updateTableRows({
+                tableId: selectedTableForRefresh.id,
+                rows: newRows
+            }));
+
+            // Refresh all derived tables
+            await refreshDerivedTables(selectedTableForRefresh.id, newRows);
+
+            dispatch(dfActions.addMessages({
+                timestamp: Date.now(),
+                type: 'success',
+                component: 'data refresh',
+                value: `Successfully refreshed data for "${selectedTableForRefresh.displayId || selectedTableForRefresh.id}" and updated derived tables.`
+            }));
+        } catch (error) {
+            console.error('Error during refresh:', error);
+            dispatch(dfActions.addMessages({
+                timestamp: Date.now(),
+                type: 'error',
+                component: 'data refresh',
+                value: `Error refreshing data: ${error}`
+            }));
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
     let buildTriggerCard = (trigger: Trigger) => {
         let selectedClassName = trigger.chart?.id == focusedChartId ? 'selected-card' : '';
         
@@ -543,7 +730,7 @@ let SingleThreadGroupView: FC<{
         </Box>;
     }
 
-    let buildTableCard = (tableId: string) => {
+    let buildTableCard = (tableId: string, compact = false) => {
 
         if (parentTable && tableId == parentTable.id && parentTable.anchored && tableIdList.length > 1) {
             let table = tables.find(t => t.id == tableId);
@@ -673,43 +860,8 @@ let SingleThreadGroupView: FC<{
                         </Box>
                     </Stack>
                     <ButtonGroup aria-label="Basic button group" variant="text" sx={{ textAlign: 'end', margin: "auto 2px auto auto" }}>
-                        {table?.derive == undefined && <Tooltip key="attach-metadata-btn-tooltip" title={table?.attachedMetadata ? "edit table metadata" : "attach table metadata"}>
-                            <IconButton aria-label="attach metadata" size="small" sx={{ 
-                                padding: 0.25, 
-                                '&:hover': {
-                                    transform: 'scale(1.2)',
-                                    transition: 'all 0.1s linear'
-                                } 
-                            }}
-                                onClick={(event) => {
-                                    event.stopPropagation();
-                                    handleOpenMetadataPopup(table!, event.currentTarget);
-                                }}
-                            >
-                                <AttachFileIcon fontSize="small" sx={{ 
-                                    fontSize: 18,
-                                    color: table?.attachedMetadata ? 'secondary.main' : 'text.secondary',
-                                    opacity: table?.attachedMetadata ? 1 : 0.7
-                                }}/>
-                            </IconButton>
-                        </Tooltip>}
-                        
-                        {tableDeleteEnabled && <Tooltip key="delete-table-btn-tooltip" title="delete table">
-                            <IconButton aria-label="share" size="small" sx={{ padding: 0.25, '&:hover': {
-                                transform: 'scale(1.2)',
-                                transition: 'all 0.1s linear'
-                                } }}
-                                onClick={(event) => {
-                                    event.stopPropagation();
-                                    dispatch(dfActions.deleteTable(tableId));
-                                }}
-                            >
-                                <DeleteIcon fontSize="small" sx={{ fontSize: 18 }} color='warning'/>
-                            </IconButton>
-                        </Tooltip>}
-                        
                         <Tooltip key="create-new-chart-btn-tooltip" title="create a new chart">
-                            <IconButton aria-label="share" size="small" sx={{ padding: 0.25, '&:hover': {
+                            <IconButton aria-label="create chart" size="small" sx={{ padding: 0.25, '&:hover': {
                                 transform: 'scale(1.2)',
                                 transition: 'all 0.1s linear'
                                 } }}
@@ -722,6 +874,48 @@ let SingleThreadGroupView: FC<{
                                 <AddchartIcon fontSize="small" sx={{ fontSize: 18 }} color='primary'/>
                             </IconButton>
                         </Tooltip>
+                        
+                        {/* For non-derived, non-virtual tables: show dropdown menu with metadata, refresh, delete */}
+                        {table?.derive == undefined && !table?.virtual && (
+                            <Tooltip key="table-menu-btn-tooltip" title="more options">
+                                <IconButton 
+                                    aria-label="more options" 
+                                    size="small" 
+                                    sx={{ 
+                                        padding: 0.25, 
+                                        '&:hover': {
+                                            transform: 'scale(1.2)',
+                                            transition: 'all 0.1s linear'
+                                        } 
+                                    }}
+                                    onClick={(event) => {
+                                        event.stopPropagation();
+                                        handleOpenTableMenu(table!, event.currentTarget);
+                                    }}
+                                >
+                                    <MoreVertIcon fontSize="small" sx={{ fontSize: 18, color: 'text.secondary' }}/>
+                                </IconButton>
+                            </Tooltip>
+                        )}
+
+                        {/* For derived tables or virtual tables: show individual buttons */}
+                        {(table?.derive != undefined || table?.virtual) && (
+                            <>
+                                {tableDeleteEnabled && <Tooltip key="delete-table-btn-tooltip" title="delete table">
+                                    <IconButton aria-label="delete" size="small" sx={{ padding: 0.25, '&:hover': {
+                                        transform: 'scale(1.2)',
+                                        transition: 'all 0.1s linear'
+                                        } }}
+                                        onClick={(event) => {
+                                            event.stopPropagation();
+                                            dispatch(dfActions.deleteTable(tableId));
+                                        }}
+                                    >
+                                        <DeleteIcon fontSize="small" sx={{ fontSize: 18 }} color='warning'/>
+                                    </IconButton>
+                                </Tooltip>}
+                            </>
+                        )}
                     </ButtonGroup>
                 </Box>
             </Card>
@@ -756,7 +950,7 @@ let SingleThreadGroupView: FC<{
                         backgroundSize: '1px 6px, 3px 100%'
                     }}></Box>
                 </Box>}
-                <Box sx={{ flex: 1, padding: '8px 0px', minHeight: '8px', ...chartElementProps }}>
+                <Box sx={{ flex: 1, padding: '4px 0px', minHeight: '0px', ...chartElementProps }}>
                     {releventChartElements}
                     {agentActionBox}
                 </Box>
@@ -829,6 +1023,94 @@ let SingleThreadGroupView: FC<{
         </Stack>;
     });
 
+    // Compact mode: just show leaf table cards in a simple column
+    if (compact) {
+        // For compact mode, ensure highlightedTableIds includes focused table if it's a leaf
+        if (focusedTableId && leafTableIds.includes(focusedTableId)) {
+            highlightedTableIds = [focusedTableId];
+        }
+        
+        return (
+            <Box sx={{ ...sx, display: 'flex', flexDirection: 'column', gap: 0.25 }}>
+                {leafTables.map((table) => {
+                    const tableCardResult = buildTableCard(table.id, compact);
+                    // buildTableCard returns an array [regularTableBox, chartBox]
+                    // In compact mode, we want to show them stacked
+                    return (
+                        <React.Fragment key={`compact-table-${table.id}`}>
+                            {tableCardResult}
+                        </React.Fragment>
+                    );
+                })}
+                <MetadataPopup
+                    open={metadataPopupOpen}
+                    anchorEl={metadataAnchorEl}
+                    onClose={handleCloseMetadataPopup}
+                    onSave={handleSaveMetadata}
+                    initialValue={selectedTableForMetadata?.attachedMetadata || ''}
+                    tableName={selectedTableForMetadata?.displayId || selectedTableForMetadata?.id || ''}
+                />
+                <Menu
+                    anchorEl={tableMenuAnchorEl}
+                    open={Boolean(tableMenuAnchorEl)}
+                    onClose={handleCloseTableMenu}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <MenuItem 
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (selectedTableForMenu) {
+                                handleOpenMetadataPopup(selectedTableForMenu, tableMenuAnchorEl!);
+                            }
+                            handleCloseTableMenu();
+                        }}
+                        sx={{ fontSize: '12px', display: 'flex', alignItems: 'center', gap: 1 }}
+                    >
+                        <AttachFileIcon sx={{ 
+                            fontSize: 16,
+                            color: selectedTableForMenu?.attachedMetadata ? 'secondary.main' : 'text.secondary',
+                        }}/>
+                        {selectedTableForMenu?.attachedMetadata ? "Edit metadata" : "Attach metadata"}
+                    </MenuItem>
+                    <MenuItem 
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (selectedTableForMenu) {
+                                handleOpenRefreshDialog(selectedTableForMenu);
+                            }
+                        }}
+                        sx={{ fontSize: '12px', display: 'flex', alignItems: 'center', gap: 1 }}
+                    >
+                        <RefreshIcon sx={{ fontSize: 16, color: 'primary.main' }}/>
+                        Refresh data
+                    </MenuItem>
+                    <MenuItem 
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (selectedTableForMenu) {
+                                dispatch(dfActions.deleteTable(selectedTableForMenu.id));
+                            }
+                            handleCloseTableMenu();
+                        }}
+                        disabled={selectedTableForMenu ? tables.some(t => t.derive?.trigger.tableId === selectedTableForMenu.id) : true}
+                        sx={{ fontSize: '12px', display: 'flex', alignItems: 'center', gap: 1, color: 'warning.main' }}
+                    >
+                        <DeleteIcon sx={{ fontSize: 16 }} color='warning'/>
+                        Delete table
+                    </MenuItem>
+                </Menu>
+                {selectedTableForRefresh && (
+                    <RefreshDataDialog
+                        open={refreshDialogOpen}
+                        onClose={handleCloseRefreshDialog}
+                        table={selectedTableForRefresh}
+                        onRefreshComplete={handleRefreshComplete}
+                    />
+                )}
+            </Box>
+        );
+    }
+
     return <Box sx={{ ...sx, 
             '& .selected-card': { 
                 border: `2px solid ${theme.palette.primary.light}`,
@@ -843,7 +1125,7 @@ let SingleThreadGroupView: FC<{
                 "&::before, &::after": { borderColor: alpha(theme.palette.custom.main, 0.2), borderWidth: '2px', width: 60 },
             }}>
                 <Typography sx={{ fontSize: "10px",  color: 'text.secondary', textTransform: 'none' }}>
-                    {`thread - ${threadIdx + 1}`}
+                    {threadIdx === -1 ? 'thread0' : `thread - ${threadIdx + 1}`}
                 </Typography>
             </Divider>
         </Box>
@@ -888,6 +1170,67 @@ let SingleThreadGroupView: FC<{
             initialValue={selectedTableForMetadata?.attachedMetadata || ''}
             tableName={selectedTableForMetadata?.displayId || selectedTableForMetadata?.id || ''}
         />
+
+        {/* Table actions menu for non-derived, non-virtual tables */}
+        <Menu
+            anchorEl={tableMenuAnchorEl}
+            open={Boolean(tableMenuAnchorEl)}
+            onClose={handleCloseTableMenu}
+            onClick={(e) => e.stopPropagation()}
+        >
+            <MenuItem 
+                onClick={(e) => {
+                    e.stopPropagation();
+                    if (selectedTableForMenu) {
+                        handleOpenMetadataPopup(selectedTableForMenu, tableMenuAnchorEl!);
+                    }
+                    handleCloseTableMenu();
+                }}
+                sx={{ fontSize: '12px', display: 'flex', alignItems: 'center', gap: 1 }}
+            >
+                <AttachFileIcon sx={{ 
+                    fontSize: 16,
+                    color: selectedTableForMenu?.attachedMetadata ? 'secondary.main' : 'text.secondary',
+                }}/>
+                {selectedTableForMenu?.attachedMetadata ? "Edit metadata" : "Attach metadata"}
+            </MenuItem>
+            <MenuItem 
+                onClick={(e) => {
+                    e.stopPropagation();
+                    if (selectedTableForMenu) {
+                        handleOpenRefreshDialog(selectedTableForMenu);
+                    }
+                }}
+                sx={{ fontSize: '12px', display: 'flex', alignItems: 'center', gap: 1 }}
+            >
+                <RefreshIcon sx={{ fontSize: 16, color: 'primary.main' }}/>
+                Refresh data
+            </MenuItem>
+            <MenuItem 
+                onClick={(e) => {
+                    e.stopPropagation();
+                    if (selectedTableForMenu) {
+                        dispatch(dfActions.deleteTable(selectedTableForMenu.id));
+                    }
+                    handleCloseTableMenu();
+                }}
+                disabled={selectedTableForMenu ? tables.some(t => t.derive?.trigger.tableId === selectedTableForMenu.id) : true}
+                sx={{ fontSize: '12px', display: 'flex', alignItems: 'center', gap: 1, color: 'warning.main' }}
+            >
+                <DeleteIcon sx={{ fontSize: 16 }} color='warning'/>
+                Delete table
+            </MenuItem>
+        </Menu>
+
+        {/* Refresh data dialog */}
+        {selectedTableForRefresh && (
+            <RefreshDataDialog
+                open={refreshDialogOpen}
+                onClose={handleCloseRefreshDialog}
+                table={selectedTableForRefresh}
+                onRefreshComplete={handleRefreshComplete}
+            />
+        )}
     </Box>
 }
 
@@ -1179,7 +1522,22 @@ export const DataThread: FC<{sx?: SxProps}> = function ({ sx }) {
         return aOrders.length - bOrders.length;
     });
 
-    let leafTableGroups = leafTables.reduce((groups: { [groupId: string]: DictTable[] }, leafTable) => {
+    // Identify hanging tables (tables with no descendants or parents)
+    let isHangingTable = (table: DictTable) => {
+        // A table is hanging if:
+        // 1. It has no derive.source (no parent)
+        // 2. No other table derives from it (no descendants)
+        const hasNoParent = table.derive == undefined;
+        const hasNoDescendants = !tables.some(t => t.derive?.trigger.tableId == table.id);
+        return hasNoParent && hasNoDescendants;
+    };
+
+    // Separate hanging tables from regular leaf tables
+    let hangingTables = leafTables.filter(t => isHangingTable(t));
+    let regularLeafTables = leafTables.filter(t => !isHangingTable(t));
+
+    // Build groups for regular leaf tables (excluding hanging tables)
+    let leafTableGroups = regularLeafTables.reduce((groups: { [groupId: string]: DictTable[] }, leafTable) => {
         // Get the immediate parent table ID (first trigger in the chain)
         const triggers = getTriggers(leafTable, tables);
         const immediateParentTableId = triggers.length > 0 ? triggers[triggers.length - 1].tableId : 'root';
@@ -1203,8 +1561,38 @@ export const DataThread: FC<{sx?: SxProps}> = function ({ sx }) {
         return groups;
     }, {});
 
-    let drawerOpen = threadDrawerOpen && leafTables.length > 1;
-    let collaposedViewWidth = Math.max(...Object.values(leafTableGroups).map(x => x.length)) > 1 ? 248 : 232
+    // Filter threads to only include those with length > 1
+    let filteredLeafTableGroups: { [groupId: string]: DictTable[] } = {};
+    Object.entries(leafTableGroups).forEach(([groupId, groupTables]) => {
+        // Calculate thread length: count all tables in the thread chain
+        const threadLength = groupTables.reduce((maxLength, leafTable) => {
+            const triggers = getTriggers(leafTable, tables);
+            // Thread length = number of triggers + 1 (the leaf table itself)
+            return Math.max(maxLength, triggers.length + 1);
+        }, 0);
+        
+        // Only include threads with length > 1
+        if (threadLength > 1) {
+            filteredLeafTableGroups[groupId] = groupTables;
+        } else {
+            // Add single-table threads to hanging tables (they go to thread0)
+            groupTables.forEach(table => {
+                if (!hangingTables.includes(table)) {
+                    hangingTables.push(table);
+                }
+            });
+        }
+    });
+
+    // Create thread0 group for hanging tables
+    let thread0Group: { [groupId: string]: DictTable[] } = {};
+    if (hangingTables.length > 0) {
+        thread0Group['thread0'] = hangingTables;
+    }
+
+    let drawerOpen = threadDrawerOpen && (Object.keys(filteredLeafTableGroups).length > 0 || hangingTables.length > 0);
+    let allGroupsForWidth = { ...filteredLeafTableGroups, ...thread0Group };
+    let collaposedViewWidth = Math.max(...Object.values(allGroupsForWidth).map(x => x.length)) > 1 ? 248 : 232
 
     let view = <Box maxWidth={drawerOpen ? 720 : collaposedViewWidth} sx={{ 
         overflow: 'auto', // Add horizontal scroll when drawer is open
@@ -1218,11 +1606,38 @@ export const DataThread: FC<{sx?: SxProps}> = function ({ sx }) {
         p: 1,
         transition: 'max-width 0.1s linear', // Smooth width transition
     }}>
-        {Object.entries(leafTableGroups).map(([groupId, leafTables], i) => {
-
-            let usedIntermediateTableIds = Object.values(leafTableGroups).slice(0, i).flat()
+        {/* Render thread0 (hanging tables) first if it exists - using compact view */}
+        {Object.entries(thread0Group).map(([groupId, leafTables], i) => {
+            return <CompactThread0View
+                key={`thread-${groupId}-${i}`}
+                scrollRef={scrollRef}
+                leafTables={leafTables} 
+                chartElements={chartElements} 
+                sx={{
+                    backgroundColor: 'white', 
+                    borderRadius: 2,
+                    padding: 1,
+                    my: 0.5,
+                    flex:  'none',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: 'fit-content',
+                    width: leafTables.length > 1 ? '216px' : '200px', 
+                    transition: 'all 0.3s ease',
+                }} />
+        })}
+        {/* Render regular threads (length > 1) */}
+        {Object.entries(filteredLeafTableGroups).map(([groupId, leafTables], i) => {
+            // Calculate used tables from thread0 and previous threads
+            let usedIntermediateTableIds = Object.values(thread0Group).flat()
                 .map(x => [ ...getTriggers(x, tables).map(y => y.tableId) || []]).flat();
-            let usedLeafTableIds = Object.values(leafTableGroups).slice(0, i).flat().map(x => x.id);
+            let usedLeafTableIds = Object.values(thread0Group).flat().map(x => x.id);
+            
+            // Add tables from previous regular threads
+            const previousThreadGroups = Object.values(filteredLeafTableGroups).slice(0, i);
+            usedIntermediateTableIds = [...usedIntermediateTableIds, ...previousThreadGroups.flat()
+                .map(x => [ ...getTriggers(x, tables).map(y => y.tableId) || []]).flat()];
+            usedLeafTableIds = [...usedLeafTableIds, ...previousThreadGroups.flat().map(x => x.id)];
                 
             return <SingleThreadGroupView
                 key={`thread-${groupId}-${i}`}
@@ -1246,11 +1661,20 @@ export const DataThread: FC<{sx?: SxProps}> = function ({ sx }) {
         })}
     </Box>
 
+    // Calculate total thread count (thread0 + regular threads)
+    let totalThreadCount = Object.keys(filteredLeafTableGroups).length + (Object.keys(thread0Group).length > 0 ? 1 : 0);
+    let threadIndices: number[] = [];
+    if (Object.keys(thread0Group).length > 0) {
+        threadIndices.push(-1); // thread0
+    }
+    threadIndices.push(...Array.from({length: Object.keys(filteredLeafTableGroups).length}, (_, i) => i));
+
     let jumpButtonsDrawerOpen = <ButtonGroup size="small" color="primary">
-        {_.chunk(Array.from({length: Object.keys(leafTableGroups).length}, (_, i) => i), 3).map((group, groupIdx) => {
-            const startNum = group[0] + 1;
-            const endNum = group[group.length - 1] + 1;
-            const label = startNum === endNum ? `${startNum}` : `${startNum}-${endNum}`;
+        {_.chunk(threadIndices, 3).map((group, groupIdx) => {
+            const getLabel = (idx: number) => idx === -1 ? '0' : String(idx + 1);
+            const startNum = getLabel(group[0]);
+            const endNum = getLabel(group[group.length - 1]);
+            const label = startNum === endNum ? startNum : `${startNum}-${endNum}`;
             
             return (
                 <Tooltip key={`thread-nav-group-${groupIdx}`} title={`Jump to thread${startNum === endNum ? '' : 's'} ${label}`}>
@@ -1265,8 +1689,9 @@ export const DataThread: FC<{sx?: SxProps}> = function ({ sx }) {
                                 const currentIndex = Array.from(document.querySelectorAll('[data-thread-index]')).reduce((closest, element) => {
                                     const rect = element.getBoundingClientRect();
                                     const distance = Math.abs(rect.left + rect.width/2 - viewportCenter);
+                                    const idx = parseInt(element.getAttribute('data-thread-index') || '0');
                                     if (!closest || distance < closest.distance) {
-                                        return { index: parseInt(element.getAttribute('data-thread-index') || '0'), distance };
+                                        return { index: idx, distance };
                                     }
                                     return closest;
                                 }, null as { index: number, distance: number } | null)?.index || 0;
@@ -1294,21 +1719,24 @@ export const DataThread: FC<{sx?: SxProps}> = function ({ sx }) {
     </ButtonGroup>
 
     let jumpButtonDrawerClosed = <ButtonGroup size="small" color="primary" sx={{ gap: 0 }}>
-        {Object.keys(leafTableGroups).map((groupId, idx) => (
-            <Tooltip key={`thread-nav-${idx}`} title={`Jump to thread ${idx + 1}`}>
-                <IconButton 
-                    size="small" 
-                    color="primary"
-                    sx={{ fontSize: '12px', padding: '4px' }} 
-                    onClick={() => {
-                        const threadElement = document.querySelector(`[data-thread-index="${idx}"]`);
-                        threadElement?.scrollIntoView({ behavior: 'smooth' });
-                    }}
-                > 
-                    {idx + 1}
-                </IconButton>
-            </Tooltip>
-        ))}
+        {threadIndices.map((threadIdx) => {
+            const label = threadIdx === -1 ? '0' : String(threadIdx + 1);
+            return (
+                <Tooltip key={`thread-nav-${threadIdx}`} title={`Jump to thread${threadIdx === -1 ? '0' : ` ${threadIdx + 1}`}`}>
+                    <IconButton 
+                        size="small" 
+                        color="primary"
+                        sx={{ fontSize: '12px', padding: '4px' }} 
+                        onClick={() => {
+                            const threadElement = document.querySelector(`[data-thread-index="${threadIdx}"]`);
+                            threadElement?.scrollIntoView({ behavior: 'smooth' });
+                        }}
+                    > 
+                        {label}
+                    </IconButton>
+                </Tooltip>
+            );
+        })}
     </ButtonGroup>
 
     let jumpButtons = drawerOpen ? jumpButtonsDrawerOpen : jumpButtonDrawerClosed;
@@ -1338,7 +1766,7 @@ export const DataThread: FC<{sx?: SxProps}> = function ({ sx }) {
                     <Tooltip title={"expand"}>
                         <span>
                             <IconButton size={'small'} color="primary" 
-                                disabled={leafTables.length <= 1} onClick={() => { 
+                                disabled={totalThreadCount <= 1} onClick={() => { 
                                     setThreadDrawerOpen(true); 
                                 }}>
                                 <ChevronRightIcon />
diff --git a/src/views/DerivedDataDialog.tsx b/src/views/DerivedDataDialog.tsx
deleted file mode 100644
index aeb7785..0000000
--- a/src/views/DerivedDataDialog.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import { FC } from 'react'
-import {
-		Card,
-		Box,
-		Typography,
-		Dialog,
-        DialogTitle,
-        DialogContent,
-        DialogActions,
-        Button,
-        Radio,
-        styled,
-        FormControlLabel,
-        CardContent,
-        ButtonGroup,
-} from '@mui/material';
-
-import React from 'react';
-
-import { assembleVegaChart } from '../app/utils';
-import { Chart } from '../components/ComponentType';
-import { useSelector } from 'react-redux';
-import { DataFormulatorState } from '../app/dfSlice';
-
-import { createDictTable, DictTable } from '../components/ComponentType';
-import { CodeBox } from './VisualizationView';
-import embed from 'vega-embed';
-import { CustomReactTable } from './ReactTable';
-
-import DeleteIcon from '@mui/icons-material/Delete';
-import SaveIcon from '@mui/icons-material/Save';
-
-export interface DerivedDataDialogProps {
-    chart: Chart,
-    candidateTables: DictTable[],
-    open: boolean,
-    handleCloseDialog: () => void,
-    handleSelection: (selectIndex: number) => void,
-    handleDeleteChart: () => void,
-    bodyOnly?: boolean,
-}
-
-export const DerivedDataDialog: FC<DerivedDataDialogProps> = function DerivedDataDialog({ 
-        chart, candidateTables, open, handleCloseDialog, handleSelection, handleDeleteChart, bodyOnly }) {
-
-    let direction = candidateTables.length > 1 ? "horizontal" : "horizontal" ;
-
-    let [selectionIdx, setSelectionIdx] = React.useState(0);
-    const conceptShelfItems = useSelector((state: DataFormulatorState) => state.conceptShelfItems);
-
-    let body = 
-        <Box sx={{display: "flex", overflowX: "auto", flexDirection: direction == "horizontal" ? "column" : "row", 
-                  justifyContent: "space-between", position: "relative", marginTop: "10px", minHeight: "50px"}}>
-            
-            {candidateTables.map((table, idx) => {
-                let code = table.derive?.code || "";
-                let extTable = structuredClone(table.rows);
-            
-                let assembledChart: any = assembleVegaChart(chart.chartType, chart.encodingMap, conceptShelfItems, extTable, table.metadata);
-                assembledChart["background"] = "transparent";
-                // chart["autosize"] = {
-                //     "type": "fit",
-                //     "contains": "padding"
-                // };
-                const id = `chart-dialog-element-${idx}`;
-                
-                const element =
-                        <Box className="vega-thumbnail-no-hover"
-                            id={id} key={`chart-thumbnail-${idx}`} 
-                            sx={{ minWidth: '220px', margin: "auto", backgroundColor: "white", display: 'flex', justifyContent: 'center' }}
-                            onClick={() => setSelectionIdx(idx)}>
-                        </Box>;
-
-                embed('#' + id, assembledChart, { actions: false, renderer: "canvas" }).then(function (result) {
-                    // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
-                    if (result.view.container()?.getElementsByTagName("canvas")) {
-                        let comp = result.view.container()?.getElementsByTagName("canvas")[0];
-
-                        // Doesn't seem like width & height are actual numbers here on Edge bug
-                        // let width = parseInt(comp?.style.width as string);
-                        // let height = parseInt(comp?.style.height as string);
-                        if (comp) {
-                            const { width, height } = comp.getBoundingClientRect();
-                            //console.log(`THUMB: width = ${width} height = ${height}`);
-                            if (width > 240 || height > 180) {
-                                let ratio = width / height;
-                                let fixedWidth = width;
-                                if (ratio * 180 < width) {
-                                    fixedWidth = ratio * 180;
-                                }
-                                if (fixedWidth > 240) {
-                                    fixedWidth = 240;
-                                }
-                                comp?.setAttribute("style", `max-width: 240px; max-height: 180px; width: ${Math.round(fixedWidth)}px; height: ${Math.round(fixedWidth / ratio)}px; `);
-                            }
-
-                        } else {
-                            console.log("THUMB: Could not get Canvas HTML5 element")
-                        }
-                    }
-                }).catch((reason) => {
-                    // console.log(reason)
-                    // console.error(reason)
-                });
-
-                let simpleTableView = (t: DictTable) => {
-                    let colDefs = t.names.map(name => {
-                        return {
-                            id: name, label: name, minWidth: 30, align: undefined, 
-                            format: (value: any) => `${value}`, source: conceptShelfItems.find(f => f.name == name)?.source
-                        }
-                    })
-                    return <Box sx={{ position: "relative", display: "flex", flexDirection: "column" }}>
-                        <CustomReactTable rows={t.rows} columnDefs={colDefs} rowsPerPageNum={10} compact />
-                    </Box>
-                }
-
-                return <Card variant="outlined" key={`candidate-dialog-${idx}`} onClick={()=>{setSelectionIdx(idx)}} 
-                    sx={{minWidth: "280px", maxWidth: "1920px", display: "flex", flexGrow: 1, margin: "6px", 
-                        border: selectionIdx == idx ? "2px solid rgb(2 136 209 / 0.7)": "1px solid rgba(33, 33, 33, 0.1)"}}>
-                    <CardContent sx={{display: "flex", flexDirection: "column", flexGrow: 1, maxHeight: 800, padding: '2px 8px', paddingBottom: '2px !important'}}>
-                        <FormControlLabel 
-                            sx={{marginLeft: 0, fontSize: 12, position: direction == "horizontal" ? 'absolute' : 'relative',
-                                "& svg": { width: "0.5em",  height: "0.5em" },
-                                '& .MuiTypography-root': { fontSize: "inherit"}, 
-                                '& .MuiFormLabel-root': { fontSize: "inherit" } }}
-                            value={idx} control={<Radio checked={selectionIdx == idx} />} 
-                            label={<Typography color={idx == selectionIdx ? 'primary' : 'inherit'} >{`candidate-${idx+1} (${candidateTables[idx].id})`}</Typography>} />
-                        <Box sx={{display: 'flex', flexDirection: direction == "horizontal" ? "row" : "column", alignItems: "center", flex: 'auto'}}>
-                            <Box sx={{}}>
-                                {element}
-                            </Box>
-                            <Box sx={{margin: '12px', width: '100%'}}>
-                                <Box sx={{maxHeight: 300, minWidth: '200px', width: "100%", overflow: "auto", flexGrow: 1,fontSize: 10 }}>
-                                    {simpleTableView(createDictTable(table.id, extTable))}
-                                </Box>
-                            </Box>
-                            <Box sx={{maxWidth: 400, width: 'fit-content',  display: 'flex', maxHeight: 300, overflow: 'initial'}}>
-                                <CodeBox code={code} language="python" />
-                            </Box>
-                        </Box>
-                    </CardContent>
-                </Card>
-            })}
-            
-        </Box>
-
-    if (bodyOnly) {
-        return <Box sx={{marginTop: 2}}>
-            <Box sx={{width: '100%', display: 'flex', alignItems: 'center'}}>
-                <Typography fontSize="small" sx={{color: 'gray'}}>Transformation from <Typography component="span" fontSize="inherit" sx={{textDecoration: 'underline'}}>{candidateTables[0].derive?.source}</Typography></Typography>
-            </Box>
-            {body}
-            <Box sx={{width: '100%', display: 'flex', alignItems: 'center'}}>
-                <Box sx={{ display: 'flex', margin: 'auto'}}>
-                    <ButtonGroup size="small" sx={{margin: 'auto'}}>
-                        {/* <Button sx={{textTransform: 'none'}} onClick={()=>{ handleCloseDialog() }}>Cancel</Button> */}
-                        <Button sx={{textTransform: 'none', margin: 'auto',}} variant="text" startIcon={<DeleteIcon/>} color="error"
-                                onClick={() => { handleDeleteChart()} }>
-                            {`Delete all`}
-                        </Button>
-                        <Button sx={{textTransform: 'none', width: '300px', margin: 'auto',}} variant="text" startIcon={<SaveIcon />}
-                                onClick={() => { handleSelection(selectionIdx)} }>
-                            Save <Typography component="span" fontSize="inherit" sx={{margin: '0px 2px', padding: '0px 2px'}}>{`candidate ${selectionIdx + 1} (${candidateTables[selectionIdx].id})`}</Typography> as the result
-                        </Button>
-                    </ButtonGroup>
-                </Box>
-            </Box>
-        </Box>;
-    }
-
-    return (
-        <Dialog
-            sx={{ '& .MuiDialog-paper': { maxWidth: '95%', maxHeight: 860, minWidth: 300 } }}
-            maxWidth={false}
-            open={open}
-        >
-            <DialogTitle><Typography>Derived Data Candidates</Typography></DialogTitle>
-            <DialogContent sx={{overflowX: "hidden"}} dividers>
-                {body}
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={()=>{ handleCloseDialog() }}>Cancel</Button>
-                <Button onClick={() => { handleSelection(selectionIdx)} }>Ok</Button>
-            </DialogActions>
-        </Dialog>
-    );
-}
\ No newline at end of file
diff --git a/src/views/EncodingShelfCard.tsx b/src/views/EncodingShelfCard.tsx
index d66e357..bb230df 100644
--- a/src/views/EncodingShelfCard.tsx
+++ b/src/views/EncodingShelfCard.tsx
@@ -250,111 +250,6 @@ export const TriggerCard: FC<{
     </Card>
 }
 
-// Add this component before EncodingShelfCard
-const UserActionTableSelector: FC<{
-    requiredActionTableIds: string[],
-    userSelectedActionTableIds: string[],
-    tables: DictTable[],
-    updateUserSelectedActionTableIds: (tableIds: string[]) => void,
-    requiredTableIds?: string[]
-}> = ({ requiredActionTableIds, userSelectedActionTableIds, tables, updateUserSelectedActionTableIds, requiredTableIds = [] }) => {
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-    const open = Boolean(anchorEl);
-
-    let actionTableIds = [...requiredActionTableIds, ...userSelectedActionTableIds.filter(id => !requiredActionTableIds.includes(id))];
-
-    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
-
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const handleTableSelect = (table: DictTable) => {
-        if (!actionTableIds.includes(table.id)) {
-            updateUserSelectedActionTableIds([...userSelectedActionTableIds, table.id]);
-        }
-        handleClose();
-    };
-
-    return (
-        <Box sx={{ 
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '2px',
-            padding: '4px',
-            marginBottom: 0.5,
-        }}>
-            {actionTableIds.map((tableId) => {
-                const isRequired = requiredTableIds.includes(tableId);
-                return (
-                    <Chip
-                        key={tableId}
-                        label={tables.find(t => t.id == tableId)?.displayId}
-                        size="small"
-                        sx={{
-                            height: 16,
-                            fontSize: '10px',
-                            borderRadius: '0px',
-                            bgcolor: isRequired ? 'rgba(25, 118, 210, 0.2)' : 'rgba(25, 118, 210, 0.1)', // darker blue for required
-                            color: 'rgba(0, 0, 0, 0.7)',
-                            '& .MuiChip-label': {
-                                pl: '4px',
-                                pr: '6px'
-                            }
-                        }}
-                        deleteIcon={<CloseIcon sx={{ fontSize: '8px', width: '12px', height: '12px' }} />}
-                        onDelete={isRequired ? undefined : () => updateUserSelectedActionTableIds(actionTableIds.filter(id => id !== tableId))}
-                    />
-                );
-            })}
-            <Tooltip title="add more base tables for data formulation">
-                <span>
-                    <IconButton
-                        size="small"
-                        onClick={handleClick}
-                        sx={{ 
-                            width: 16,
-                            height: 16,
-                            fontSize: '10px',
-                            padding: 0
-                        }}
-                    >
-                        <AddIcon fontSize="inherit" />
-                    </IconButton>
-                </span>
-            </Tooltip>
-            <Menu
-                anchorEl={anchorEl}
-                open={open}
-                onClose={handleClose}
-            >
-                {tables
-                    .map((table) => {
-                        const isSelected = !!actionTableIds.find(t => t === table.id);
-                        return (
-                            <MenuItem 
-                                disabled={isSelected}
-                                key={table.id}
-                                onClick={() => handleTableSelect(table)}
-                                sx={{ 
-                                    fontSize: '12px',
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    alignItems: 'center'
-                                }}
-                            >
-                                {table.displayId}
-                            </MenuItem>
-                        );
-                    })
-                }
-            </Menu>
-        </Box>
-    );
-};
-
 
 export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId }) {
     const theme = useTheme();
@@ -363,7 +258,6 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
     const tables = useSelector((state: DataFormulatorState) => state.tables);
     const config = useSelector((state: DataFormulatorState) => state.config);
     const agentRules = useSelector((state: DataFormulatorState) => state.agentRules);
-    let existMultiplePossibleBaseTables = tables.filter(t => t.derive == undefined || t.anchored).length > 1;
 
     let activeModel = useSelector(dfSelectors.getActiveModel);
     let allCharts = useSelector(dfSelectors.getAllCharts);
@@ -401,9 +295,7 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
     // Check if chart is available
     let isChartAvailable = checkChartAvailability(chart, conceptShelfItems, currentTable.rows);
 
-    // Add this state
-    const [userSelectedActionTableIds, setUserSelectedActionTableIds] = useState<string[]>([]);
-    
+
     // Consolidated chart state - maps chartId to its ideas, thinkingBuffer, and loading state
     const [chartState, setChartState] = useState<Record<string, {
         ideas: {text: string, goal: string, difficulty: 'easy' | 'medium' | 'hard'}[],
@@ -441,11 +333,7 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
     
     // Add state for developer message dialog
     const [devMessageOpen, setDevMessageOpen] = useState<boolean>(false);
-    
-    // Update the handler to use state
-    const handleUserSelectedActionTableChange = (newTableIds: string[]) => {
-        setUserSelectedActionTableIds(newTableIds);
-    };
+
 
     let encodingBoxGroups = Object.entries(ChannelGroups)
         .filter(([group, channelList]) => channelList.some(ch => Object.keys(encodingMap).includes(ch)))
@@ -479,7 +367,7 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
     let requiredActionTables = selectBaseTables(activeFields, currentTable, tables);
     let actionTableIds = [
         ...requiredActionTables.map(t => t.id),
-        ...userSelectedActionTableIds.filter(id => !requiredActionTables.map(t => t.id).includes(id))
+        ...tables.filter(t => t.derive === undefined || t.anchored).map(t => t.id).filter(id => !requiredActionTables.map(t => t.id).includes(id))
     ];
 
     let getIdeasForVisualization = async () => {
@@ -1155,13 +1043,6 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
 
     let channelComponent = (
         <Box sx={{ width: "100%", minWidth: "210px", height: '100%', display: "flex", flexDirection: "column" }}>
-            {existMultiplePossibleBaseTables && <UserActionTableSelector 
-                requiredActionTableIds={requiredActionTables.map(t => t.id)}
-                userSelectedActionTableIds={userSelectedActionTableIds}
-                tables={tables.filter(t => t.derive === undefined || t.anchored)}
-                updateUserSelectedActionTableIds={handleUserSelectedActionTableChange}
-                requiredTableIds={requiredActionTables.map(t => t.id)}
-            />}
             <Box key='mark-selector-box' sx={{ flex: '0 0 auto' }}>
                 <FormControl sx={{ m: 1, minWidth: 120, width: "100%", margin: "0px 0"}} size="small">
                     <Select
diff --git a/src/views/RefreshDataDialog.tsx b/src/views/RefreshDataDialog.tsx
new file mode 100644
index 0000000..a650cc8
--- /dev/null
+++ b/src/views/RefreshDataDialog.tsx
@@ -0,0 +1,596 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React, { useState, useCallback, useRef } from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    IconButton,
+    Typography,
+    Box,
+    TextField,
+    Tabs,
+    Tab,
+    LinearProgress,
+    Input,
+    Alert,
+    Tooltip,
+    Link,
+    alpha,
+    useTheme,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch } from '../app/store';
+import { DataFormulatorState, dfActions, dfSelectors, fetchFieldSemanticType } from '../app/dfSlice';
+import { DictTable } from '../components/ComponentType';
+import { createTableFromFromObjectArray, createTableFromText, loadTextDataWrapper, loadBinaryDataWrapper } from '../data/utils';
+import { getUrls } from '../app/utils';
+
+interface TabPanelProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`refresh-tabpanel-${index}`}
+            aria-labelledby={`refresh-tab-${index}`}
+            {...other}
+        >
+            {value === index && <Box sx={{ p: 2.5, pt: 3 }}>{children}</Box>}
+        </div>
+    );
+}
+
+export interface RefreshDataDialogProps {
+    open: boolean;
+    onClose: () => void;
+    table: DictTable;
+    onRefreshComplete: (newRows: any[]) => void;
+}
+
+export const RefreshDataDialog: React.FC<RefreshDataDialogProps> = ({
+    open,
+    onClose,
+    table,
+    onRefreshComplete,
+}) => {
+    const theme = useTheme();
+    const dispatch = useDispatch<AppDispatch>();
+    const [tabValue, setTabValue] = useState(0);
+    const [pasteContent, setPasteContent] = useState('');
+    const [urlContent, setUrlContent] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const serverConfig = useSelector((state: DataFormulatorState) => state.serverConfig);
+
+    // Constants for content size limits
+    const MAX_DISPLAY_LINES = 20;
+    const LARGE_CONTENT_THRESHOLD = 50000;
+    const MAX_CONTENT_SIZE = 2 * 1024 * 1024; // 2MB
+
+    const [displayContent, setDisplayContent] = useState('');
+    const [isLargeContent, setIsLargeContent] = useState(false);
+    const [showFullContent, setShowFullContent] = useState(false);
+    const [isOverSizeLimit, setIsOverSizeLimit] = useState(false);
+
+    const validateColumns = (newRows: any[]): { valid: boolean; message: string } => {
+        if (!newRows || newRows.length === 0) {
+            return { valid: false, message: 'No data found in the uploaded content.' };
+        }
+
+        const newColumns = Object.keys(newRows[0]).sort();
+        const existingColumns = [...table.names].sort();
+
+        if (newColumns.length !== existingColumns.length) {
+            return {
+                valid: false,
+                message: `Column count mismatch. Expected ${existingColumns.length} columns (${existingColumns.join(', ')}), but got ${newColumns.length} columns (${newColumns.join(', ')}).`,
+            };
+        }
+
+        const missingColumns = existingColumns.filter(col => !newColumns.includes(col));
+        const extraColumns = newColumns.filter(col => !existingColumns.includes(col));
+
+        if (missingColumns.length > 0 || extraColumns.length > 0) {
+            let message = 'Column names do not match.';
+            if (missingColumns.length > 0) {
+                message += ` Missing: ${missingColumns.join(', ')}.`;
+            }
+            if (extraColumns.length > 0) {
+                message += ` Unexpected: ${extraColumns.join(', ')}.`;
+            }
+            return { valid: false, message };
+        }
+
+        return { valid: true, message: '' };
+    };
+
+    const processAndValidateData = (newRows: any[]): boolean => {
+        const validation = validateColumns(newRows);
+        if (!validation.valid) {
+            setError(validation.message);
+            return false;
+        }
+        setError(null);
+        onRefreshComplete(newRows);
+        handleClose();
+        return true;
+    };
+
+    const handleClose = () => {
+        setPasteContent('');
+        setUrlContent('');
+        setDisplayContent('');
+        setError(null);
+        setIsLoading(false);
+        setIsLargeContent(false);
+        setShowFullContent(false);
+        setIsOverSizeLimit(false);
+        onClose();
+    };
+
+    const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+        setTabValue(newValue);
+        setError(null);
+    };
+
+    // Handle paste content change with optimization for large content
+    const handlePasteContentChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        const newContent = event.target.value;
+        setPasteContent(newContent);
+
+        const contentSizeBytes = new Blob([newContent]).size;
+        const isOverLimit = contentSizeBytes > MAX_CONTENT_SIZE;
+        setIsOverSizeLimit(isOverLimit);
+
+        const isLarge = newContent.length > LARGE_CONTENT_THRESHOLD;
+        setIsLargeContent(isLarge);
+
+        if (isLarge && !showFullContent) {
+            const lines = newContent.split('\n');
+            const previewLines = lines.slice(0, MAX_DISPLAY_LINES);
+            const preview = previewLines.join('\n') + (lines.length > MAX_DISPLAY_LINES ? '\n... (truncated for performance)' : '');
+            setDisplayContent(preview);
+        } else {
+            setDisplayContent(newContent);
+        }
+    }, [showFullContent]);
+
+    const toggleFullContent = useCallback(() => {
+        setShowFullContent(!showFullContent);
+        if (!showFullContent) {
+            setDisplayContent(pasteContent);
+        } else {
+            const lines = pasteContent.split('\n');
+            const previewLines = lines.slice(0, MAX_DISPLAY_LINES);
+            const preview = previewLines.join('\n') + (lines.length > MAX_DISPLAY_LINES ? '\n... (truncated for performance)' : '');
+            setDisplayContent(preview);
+        }
+    }, [showFullContent, pasteContent]);
+
+    // Handle paste submit
+    const handlePasteSubmit = () => {
+        if (!pasteContent.trim()) {
+            setError('Please paste some data.');
+            return;
+        }
+
+        setIsLoading(true);
+        try {
+            let newRows: any[] = [];
+            try {
+                const jsonContent = JSON.parse(pasteContent);
+                if (Array.isArray(jsonContent)) {
+                    newRows = jsonContent;
+                } else {
+                    setError('JSON content must be an array of objects.');
+                    setIsLoading(false);
+                    return;
+                }
+            } catch {
+                // Try parsing as CSV/TSV
+                const tempTable = createTableFromText('temp', pasteContent);
+                if (tempTable) {
+                    newRows = tempTable.rows;
+                } else {
+                    setError('Could not parse the pasted content as JSON or CSV/TSV.');
+                    setIsLoading(false);
+                    return;
+                }
+            }
+            processAndValidateData(newRows);
+        } catch (err) {
+            setError('Failed to parse the pasted content.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // Handle URL submit
+    const handleUrlSubmit = () => {
+        if (!urlContent.trim()) {
+            setError('Please enter a URL.');
+            return;
+        }
+
+        const hasValidSuffix = urlContent.endsWith('.csv') || urlContent.endsWith('.tsv') || urlContent.endsWith('.json');
+        if (!hasValidSuffix) {
+            setError('URL must point to a .csv, .tsv, or .json file.');
+            return;
+        }
+
+        setIsLoading(true);
+        fetch(urlContent)
+            .then(res => res.text())
+            .then(content => {
+                let newRows: any[] = [];
+                try {
+                    const jsonContent = JSON.parse(content);
+                    if (Array.isArray(jsonContent)) {
+                        newRows = jsonContent;
+                    } else {
+                        setError('JSON content must be an array of objects.');
+                        setIsLoading(false);
+                        return;
+                    }
+                } catch {
+                    const tempTable = createTableFromText('temp', content);
+                    if (tempTable) {
+                        newRows = tempTable.rows;
+                    } else {
+                        setError('Could not parse the URL content as JSON or CSV/TSV.');
+                        setIsLoading(false);
+                        return;
+                    }
+                }
+                processAndValidateData(newRows);
+            })
+            .catch(err => {
+                setError(`Failed to fetch data from URL: ${err.message}`);
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+
+    // Handle file upload
+    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (!files || files.length === 0) return;
+
+        const file = files[0];
+        setIsLoading(true);
+
+        if (file.type === 'text/csv' ||
+            file.type === 'text/tab-separated-values' ||
+            file.type === 'application/json' ||
+            file.name.endsWith('.csv') ||
+            file.name.endsWith('.tsv') ||
+            file.name.endsWith('.json')) {
+
+            const MAX_FILE_SIZE = 5 * 1024 * 1024;
+            if (file.size > MAX_FILE_SIZE) {
+                setError(`File is too large (${(file.size / (1024 * 1024)).toFixed(2)}MB). Maximum size is 5MB.`);
+                setIsLoading(false);
+                return;
+            }
+
+            file.text().then((text) => {
+                let newRows: any[] = [];
+                try {
+                    const jsonContent = JSON.parse(text);
+                    if (Array.isArray(jsonContent)) {
+                        newRows = jsonContent;
+                    } else {
+                        setError('JSON content must be an array of objects.');
+                        setIsLoading(false);
+                        return;
+                    }
+                } catch {
+                    const tempTable = loadTextDataWrapper('temp', text, file.type);
+                    if (tempTable) {
+                        newRows = tempTable.rows;
+                    } else {
+                        setError('Could not parse the file content.');
+                        setIsLoading(false);
+                        return;
+                    }
+                }
+                processAndValidateData(newRows);
+            }).catch(err => {
+                setError(`Failed to read file: ${err.message}`);
+            }).finally(() => {
+                setIsLoading(false);
+            });
+        } else if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+            file.type === 'application/vnd.ms-excel' ||
+            file.name.endsWith('.xlsx') ||
+            file.name.endsWith('.xls')) {
+
+            const reader = new FileReader();
+            reader.onload = async (e) => {
+                const arrayBuffer = e.target?.result as ArrayBuffer;
+                if (arrayBuffer) {
+                    try {
+                        const tables = await loadBinaryDataWrapper('temp', arrayBuffer);
+                        if (tables.length > 0) {
+                            processAndValidateData(tables[0].rows);
+                        } else {
+                            setError('Failed to parse Excel file.');
+                        }
+                    } catch (err) {
+                        setError('Failed to parse Excel file.');
+                    }
+                }
+                setIsLoading(false);
+            };
+            reader.readAsArrayBuffer(file);
+        } else {
+            setError('Unsupported file format. Please use CSV, TSV, JSON, or Excel files.');
+            setIsLoading(false);
+        }
+
+        // Reset file input
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+
+    const hasValidUrlSuffix = urlContent.endsWith('.csv') || urlContent.endsWith('.tsv') || urlContent.endsWith('.json');
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            maxWidth="md"
+            fullWidth
+            sx={{ '& .MuiDialog-paper': { minHeight: 500 } }}
+        >
+            <DialogTitle sx={{ display: 'flex', alignItems: 'center', pb: 1 }}>
+                <Typography variant="h6" component="span">
+                    Refresh Data for "{table.displayId || table.id}"
+                </Typography>
+                <IconButton
+                    sx={{ marginLeft: 'auto' }}
+                    size="small"
+                    onClick={handleClose}
+                >
+                    <CloseIcon fontSize="small" />
+                </IconButton>
+            </DialogTitle>
+            <DialogContent sx={{ p: 0 }}>
+                <Box sx={{ px: 3, pt: 2.5, pb: 1.5 }}>
+                    <Typography 
+                        variant="caption" 
+                        sx={{ 
+                            display: 'block',
+                            color: 'text.secondary',
+                            fontSize: '0.75rem',
+                            mb: 2,
+                            lineHeight: 1.5
+                        }}
+                    >
+                        Upload new data to replace the current table content. Required columns: <strong style={{ color: 'inherit' }}>{table.names.join(', ')}</strong>
+                    </Typography>
+
+                    {error && (
+                        <Box 
+                            sx={{ 
+                                mb: 1.5,
+                                p: 1,
+                                backgroundColor: alpha(theme.palette.error.main, 0.08),
+                                borderLeft: `3px solid ${theme.palette.error.main}`,
+                                borderRadius: '4px',
+                            }}
+                        >
+                            <Typography variant="caption" sx={{ color: 'error.main', fontSize: '0.75rem', lineHeight: 1.5 }}>
+                                {error}
+                            </Typography>
+                        </Box>
+                    )}
+
+                    {isLoading && <LinearProgress sx={{ mb: 2, height: 2 }} />}
+                </Box>
+
+                <Tabs value={tabValue} onChange={handleTabChange} sx={{ borderBottom: 1, borderColor: 'divider', px: 3 }}>
+                    <Tab label="Paste Data" sx={{ textTransform: 'none', fontSize: '0.875rem', minHeight: 48 }} />
+                    <Tab label="Upload File" sx={{ textTransform: 'none', fontSize: '0.875rem', minHeight: 48 }} />
+                    <Tab label="From URL" sx={{ textTransform: 'none', fontSize: '0.875rem', minHeight: 48 }} />
+                </Tabs>
+
+                <TabPanel value={tabValue} index={0}>
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+                        {isOverSizeLimit && (
+                            <Box 
+                                sx={{ 
+                                    p: 1,
+                                    backgroundColor: alpha(theme.palette.error.main, 0.06),
+                                    borderLeft: `3px solid ${theme.palette.error.main}`,
+                                    borderRadius: '4px',
+                                }}
+                            >
+                                <Typography variant="caption" sx={{ color: 'error.main', fontSize: '0.75rem', lineHeight: 1.5 }}>
+                                    Content exceeds {(MAX_CONTENT_SIZE / (1024 * 1024)).toFixed(0)}MB limit ({(new Blob([pasteContent]).size / (1024 * 1024)).toFixed(2)}MB)
+                                </Typography>
+                            </Box>
+                        )}
+                        {isLargeContent && !isOverSizeLimit && (
+                            <Box sx={{ 
+                                display: 'flex', 
+                                alignItems: 'center', 
+                                gap: 1.5,
+                                p: 1, 
+                                backgroundColor: alpha(theme.palette.text.secondary, 0.04), 
+                                borderRadius: 1,
+                                border: `1px solid ${alpha(theme.palette.divider, 0.5)}`
+                            }}>
+                                <Typography variant="caption" sx={{ flex: 1, fontSize: '0.75rem', color: 'text.secondary' }}>
+                                    Large content ({Math.round(pasteContent.length / 1000)}KB) • {showFullContent ? 'Full view' : 'Preview'}
+                                </Typography>
+                                <Button 
+                                    size="small" 
+                                    variant="text" 
+                                    onClick={toggleFullContent}
+                                    sx={{ 
+                                        textTransform: 'none', 
+                                        minWidth: 'auto', 
+                                        fontSize: '0.75rem',
+                                        color: 'text.secondary',
+                                        '&:hover': {
+                                            backgroundColor: alpha(theme.palette.text.secondary, 0.08),
+                                        }
+                                    }}
+                                >
+                                    {showFullContent ? 'Preview' : 'Full'}
+                                </Button>
+                            </Box>
+                        )}
+                        <TextField
+                            autoFocus
+                            multiline
+                            fullWidth
+                            value={displayContent}
+                            onChange={handlePasteContentChange}
+                            placeholder="Paste your data here (CSV, TSV, or JSON format)"
+                            disabled={isLoading}
+                            sx={{
+                                '& .MuiInputBase-root': {
+                                    minHeight: 240,
+                                    alignItems: 'flex-start',
+                                },
+                                '& .MuiInputBase-input': {
+                                    fontSize: 12,
+                                    fontFamily: 'monospace',
+                                    lineHeight: 1.5,
+                                }
+                            }}
+                        />
+                    </Box>
+                </TabPanel>
+
+                <TabPanel value={tabValue} index={1}>
+                    {serverConfig.DISABLE_FILE_UPLOAD ? (
+                        <Box sx={{ textAlign: 'center', py: 6 }}>
+                            <Typography color="text.secondary" sx={{ mb: 1.5, fontSize: '0.875rem' }}>
+                                File upload is disabled in this environment.
+                            </Typography>
+                            <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.75rem' }}>
+                                Install Data Formulator locally to enable file upload. <br />
+                                <Link 
+                                    href="https://github.com/microsoft/data-formulator" 
+                                    target="_blank" 
+                                    rel="noopener noreferrer"
+                                    sx={{ fontSize: '0.75rem' }}
+                                >
+                                    https://github.com/microsoft/data-formulator
+                                </Link>
+                            </Typography>
+                        </Box>
+                    ) : (
+                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                            <Input
+                                inputProps={{ accept: '.csv,.tsv,.json,.xlsx,.xls' }}
+                                type="file"
+                                sx={{ display: 'none' }}
+                                inputRef={fileInputRef}
+                                onChange={handleFileUpload}
+                            />
+                            <Box
+                                sx={{
+                                    border: '2px dashed',
+                                    borderColor: 'divider',
+                                    borderRadius: 2,
+                                    p: 4,
+                                    textAlign: 'center',
+                                    cursor: 'pointer',
+                                    transition: 'all 0.2s',
+                                    '&:hover': {
+                                        borderColor: 'primary.main',
+                                        backgroundColor: alpha(theme.palette.primary.main, 0.04),
+                                    }
+                                }}
+                                onClick={() => fileInputRef.current?.click()}
+                            >
+                                <UploadFileIcon sx={{ fontSize: 40, color: 'text.secondary', mb: 1.5 }} />
+                                <Typography variant="subtitle1" gutterBottom sx={{ fontSize: '0.9375rem', fontWeight: 500 }}>
+                                    Drag & drop file here
+                                </Typography>
+                                <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.8125rem', mb: 0.5 }}>
+                                    or <Link component="button" sx={{ textDecoration: 'underline', cursor: 'pointer' }}>Browse</Link>
+                                </Typography>
+                                <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.75rem' }}>
+                                    Supported: CSV, TSV, JSON, Excel (xlsx, xls)
+                                </Typography>
+                            </Box>
+                        </Box>
+                    )}
+                </TabPanel>
+
+                <TabPanel value={tabValue} index={2}>
+                    <TextField
+                        fullWidth
+                        placeholder="Load a CSV, TSV, or JSON file from a URL, e.g. https://example.com/data.json"
+                        value={urlContent}
+                        onChange={(e) => setUrlContent(e.target.value.trim())}
+                        disabled={isLoading}
+                        error={urlContent !== '' && !hasValidUrlSuffix}
+                        helperText={urlContent !== '' && !hasValidUrlSuffix ? 'URL should link to a .csv, .tsv, or .json file' : ''}
+                        size="small"
+                        sx={{ 
+                            '& .MuiInputBase-input': {
+                                fontSize: '0.875rem',
+                            },
+                            '& .MuiInputBase-input::placeholder': {
+                                fontSize: '0.875rem',
+                            },
+                            '& .MuiFormHelperText-root': {
+                                fontSize: '0.75rem',
+                            },
+                        }}
+                    />
+                </TabPanel>
+            </DialogContent>
+            <DialogActions sx={{ px: 3, py: 2, gap: 1 }}>
+                <Button 
+                    onClick={handleClose} 
+                    disabled={isLoading}
+                    sx={{ textTransform: 'none' }}
+                >
+                    Cancel
+                </Button>
+                {tabValue === 0 && (
+                    <Button
+                        variant="contained"
+                        onClick={handlePasteSubmit}
+                        disabled={isLoading || !pasteContent.trim() || isOverSizeLimit}
+                        sx={{ textTransform: 'none' }}
+                    >
+                        Refresh Data
+                    </Button>
+                )}
+                {tabValue === 2 && (
+                    <Button
+                        variant="contained"
+                        onClick={handleUrlSubmit}
+                        disabled={isLoading || !urlContent.trim() || !hasValidUrlSuffix}
+                        sx={{ textTransform: 'none' }}
+                    >
+                        Refresh Data
+                    </Button>
+                )}
+            </DialogActions>
+        </Dialog>
+    );
+};
diff --git a/src/views/TableSelectionView.tsx b/src/views/TableSelectionView.tsx
index 4245025..ba3cbba 100644
--- a/src/views/TableSelectionView.tsx
+++ b/src/views/TableSelectionView.tsx
@@ -2,63 +2,13 @@
 // Licensed under the MIT License.
 
 import * as React from 'react';
-import validator from 'validator';
-import DOMPurify from 'dompurify';
+import { useEffect } from 'react';
 
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import { alpha, Button, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Divider, 
-         IconButton, Input, CircularProgress, LinearProgress, Paper, TextField, useTheme, 
-         Card, Tooltip, Link} from '@mui/material';
+import { Button, Card, Paper } from '@mui/material';
 import { CustomReactTable } from './ReactTable';
-import { DictTable } from "../components/ComponentType";
-
-import DeleteIcon from '@mui/icons-material/Delete';
-import { getUrls } from '../app/utils';
-import { createTableFromFromObjectArray, createTableFromText, loadTextDataWrapper, loadBinaryDataWrapper } from '../data/utils';
-
-import CloseIcon from '@mui/icons-material/Close';
-
-import { DataFormulatorState, dfActions, dfSelectors, fetchFieldSemanticType } from '../app/dfSlice';
-import { useDispatch, useSelector } from 'react-redux';
-import { useEffect, useState, useCallback } from 'react';
-import { AppDispatch } from '../app/store';
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
-
-function TabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
-
-    return (
-	    <div
-            role="tabpanel"
-            hidden={value !== index}
-            id={`vertical-tabpanel-${index}`}
-            aria-labelledby={`vertical-tab-${index}`}
-            style={{maxWidth: 'calc(100% - 120px)'}}
-            {...other}
-        >
-            {value === index && (
-                <Box sx={{ p: 2 }}>
-                    {children}
-                </Box>
-            )}
-        </div>
-    );
-}
-
-function a11yProps(index: number) {
-  return {
-	id: `vertical-tab-${index}`,
-	'aria-controls': `vertical-tabpanel-${index}`,
-  };
-}
+import { createTableFromFromObjectArray } from '../data/utils';
 
 // Update the interface to support multiple tables per dataset
 export interface DatasetMetadata {
@@ -106,704 +56,113 @@ export const DatasetSelectionView: React.FC<DatasetSelectionViewProps> = functio
     }
 
     return (
-        <Box sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 600, borderRadius: 2 }} >
+        <Box sx={{ bgcolor: 'background.paper', display: 'flex', height: '100%', borderRadius: 2, overflow: 'hidden' }} >
             {/* Button navigation */}
             <Box sx={{ 
-                minWidth: 180, 
+                minWidth: 180,
+                maxWidth: 180,
+                width: 180,
                 display: 'flex',
                 flexDirection: 'column',
                 borderRight: 1,
-                borderColor: 'divider'
+                borderColor: 'divider',
+                overflow: 'hidden',
+                height: '100%'
             }}>
-                {datasetTitles.map((title, i) => (
-                    <Button
-                        key={i}
-                        variant="text"
-                        size="small"
-                        color='primary'
-                        onClick={() => handleDatasetSelect(i)}
-                        sx={{
-                            fontSize: 12,
-                            textTransform: "none",
-                            width: 180,
-                            justifyContent: 'flex-start',
-                            textAlign: 'left',
-                            borderRadius: 0,
-                            py: 1,
-                            px: 2,
-                            color: selectedDatasetName === title ? 'primary.main' : 'text.secondary',
-                            borderRight: selectedDatasetName === title ? 2 : 0,
-                            borderColor: 'primary.main',
-                        }}
-                    >
-                        {title}
-                    </Button>
-                ))}
+                <Box sx={{ 
+                    display: 'flex',
+                    flexDirection: 'column',
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                    flex: 1,
+                    minHeight: 0,
+                    height: '100%',
+                    position: 'relative',
+                    overscrollBehavior: 'contain'
+                }}>
+                    {datasetTitles.map((title, i) => (
+                        <Button
+                            key={i}
+                            variant="text"
+                            size="small"
+                            color='primary'
+                            onClick={() => handleDatasetSelect(i)}
+                            sx={{
+                                fontSize: 12,
+                                textTransform: "none",
+                                width: 180,
+                                justifyContent: 'flex-start',
+                                textAlign: 'left',
+                                borderRadius: 0,
+                                py: 1,
+                                px: 2,
+                                color: selectedDatasetName === title ? 'primary.main' : 'text.secondary',
+                                borderRight: selectedDatasetName === title ? 2 : 0,
+                                borderColor: 'primary.main',
+                            }}
+                        >
+                            {title}
+                        </Button>
+                    ))}
+                </Box>
             </Box>
 
             {/* Content area */}
-            <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
-                {datasets.map((dataset, i) => {
-                    if (dataset.name !== selectedDatasetName) return null;
-
-                    let tableComponents = dataset.tables.map((table, j) => {
-                        let t = createTableFromFromObjectArray(table.table_name, table.sample, true);
-                        let maxDisplayRows = dataset.tables.length > 1 ? 5 : 9;
-                        if (t.rows.length < maxDisplayRows) {
-                            maxDisplayRows = t.rows.length - 1;
-                        }
-                        let sampleRows = [
-                            ...t.rows.slice(0,maxDisplayRows), 
-                            Object.fromEntries(t.names.map(n => [n, "..."]))
-                        ];
-                        let colDefs = t.names.map(name => { return {
-                            id: name, label: name, minWidth: 60, align: undefined, format: (v: any) => v,
-                        }})
-
-                        let content = <Paper variant="outlined" key={t.names.join("-")} sx={{width: 800, maxWidth: '100%', padding: "0px", marginBottom: "8px"}}>
-                            <CustomReactTable rows={sampleRows} columnDefs={colDefs} rowsPerPageNum={-1} compact={false} />
-                        </Paper>
-
+            <Box sx={{ flex: 1, overflow: 'hidden', minWidth: 0, minHeight: 0, height: '100%', position: 'relative' }}>
+                <Box sx={{ height: '100%', overflowY: 'auto', overflowX: 'hidden', p: 2, minWidth: 0, overscrollBehavior: 'contain' }}>
+                    {datasets.map((dataset, i) => {
+                        if (dataset.name !== selectedDatasetName) return null;
+
+                        let tableComponents = dataset.tables.map((table, j) => {
+                            let t = createTableFromFromObjectArray(table.table_name, table.sample, true);
+                            let maxDisplayRows = dataset.tables.length > 1 ? 5 : 9;
+                            if (t.rows.length < maxDisplayRows) {
+                                maxDisplayRows = t.rows.length - 1;
+                            }
+                            let sampleRows = [
+                                ...t.rows.slice(0,maxDisplayRows), 
+                                Object.fromEntries(t.names.map(n => [n, "..."]))
+                            ];
+                            let colDefs = t.names.map(name => { return {
+                                id: name, label: name, minWidth: 60, align: undefined, format: (v: any) => v,
+                            }})
+
+                            return (
+                                <Box key={j}>
+                                    <Typography variant="subtitle2" sx={{ mb: 1, fontSize: 12}} color="text.secondary">
+                                        {table.url.split("/").pop()?.split(".")[0]}  ({Object.keys(t.rows[0]).length} columns{hideRowNum ? "" : ` ⨉ ${t.rows.length} rows`})
+                                    </Typography>
+                                    <Box sx={{ maxWidth: '100%', overflowX: 'auto', display: 'flex', flexDirection: 'column', mb: 1 }}>
+                                        <Card variant="outlined" sx={{
+                                            width: 800, minWidth: 'fit-content', padding: "0px"}}>
+                                            <CustomReactTable rows={sampleRows} columnDefs={colDefs} rowsPerPageNum={-1} compact={false} />
+                                        </Card>
+                                    </Box>
+                                </Box>
+                            )
+                        });
+                        
                         return (
-                            <Box key={j}>
-                                <Typography variant="subtitle2" sx={{ mb: 1, fontSize: 12}} color="text.secondary">
-                                    {table.url.split("/").pop()?.split(".")[0]}  ({Object.keys(t.rows[0]).length} columns{hideRowNum ? "" : ` ⨉ ${t.rows.length} rows`})
-                                </Typography>
-                                {content}
-                            </Box>
-                        )
-                    });
-                    
-                    return (
-                        <Box key={i}>
-                            <Box sx={{mb: 1, gap: 1, maxWidth: 800, display: "flex", alignItems: "center"}}>
-                                <Typography sx={{fontSize: 12}}>
-                                    {dataset.description} <Typography variant="caption" sx={{color: "primary.light", fontSize: 10, mx: 0.5}}>[from {dataset.source}]</Typography> 
-                                </Typography>
-                                <Box sx={{marginLeft: "auto", flexShrink: 0}} >
-                                    <Button size="small" variant="contained" 
-                                            onClick={(event: React.MouseEvent<HTMLElement>) => {
-                                                handleSelectDataset(dataset);
-                                            }}>
-                                        load dataset
-                                    </Button>
+                            <Box key={i}>
+                                <Box sx={{mb: 1, gap: 1, maxWidth: 800, display: "flex", alignItems: "center"}}>
+                                    <Typography sx={{fontSize: 12}}>
+                                        {dataset.description} <Typography variant="caption" sx={{color: "primary.light", fontSize: 10, mx: 0.5}}>[from {dataset.source}]</Typography> 
+                                    </Typography>
+                                    <Box sx={{marginLeft: "auto", flexShrink: 0}} >
+                                        <Button size="small" variant="contained" 
+                                                onClick={(event: React.MouseEvent<HTMLElement>) => {
+                                                    handleSelectDataset(dataset);
+                                                }}>
+                                            load dataset
+                                        </Button>
+                                    </Box>
                                 </Box>
+                                {tableComponents}
                             </Box>
-                            {tableComponents}
-                        </Box>
-                    );
-                })}
+                        );
+                    })}
+                </Box>
             </Box>
         </Box>
     );
 }
-
-export const DatasetSelectionDialog: React.FC<{ buttonElement: any }> = function DatasetSelectionDialog({ buttonElement }) {
-
-    const [datasetPreviews, setDatasetPreviews] = React.useState<DatasetMetadata[]>([]);
-    const [tableDialogOpen, setTableDialogOpen] = useState<boolean>(false);
-
-    React.useEffect(() => {
-        // Show a loading animation/message while loading
-        fetch(`${getUrls().EXAMPLE_DATASETS}`)
-            .then((response) => response.json())
-            .then((result) => {
-                let datasets : DatasetMetadata[] = result.map((info: any) => {
-                    let tables = info["tables"].map((table: any) => {
-
-                        if (table["format"] == "json") {
-                            return {
-                                table_name: table["name"],
-                                url: table["url"],
-                                format: table["format"],
-                                sample: table["sample"],
-                            }
-                        }
-                        else if (table["format"] == "csv" || table["format"] == "tsv") {
-                            const delimiter = table["format"] === "csv" ? "," : "\t";
-                            const rows = table["sample"]
-                                .split("\n")
-                                .map((row: string) => row.split(delimiter));
-                            
-                            // Treat first row as headers and convert to object array
-                            if (rows.length > 0) {
-                                const headers = rows[0];
-                                const dataRows = rows.slice(1);
-                                const sampleData = dataRows.map((row: string[]) => {
-                                    const obj: any = {};
-                                    headers.forEach((header: string, index: number) => {
-                                        obj[header] = row[index] || '';
-                                    });
-                                    return obj;
-                                });
-                                
-                                return {
-                                    table_name: table["name"],
-                                    url: table["url"],
-                                    format: table["format"],
-                                    sample: sampleData,
-                                };
-                            }
-                            
-                            return {
-                                table_name: table["name"],
-                                url: table["url"],
-                                format: table["format"],
-                                sample: [],
-                            };
-                        }
-                    })
-                    return {tables: tables, name: info["name"], description: info["description"], source: info["source"]}
-                }).filter((t : DatasetMetadata | undefined) => t != undefined);
-                setDatasetPreviews(datasets);
-            });
-      }, []);
-
-    let dispatch = useDispatch<AppDispatch>();
-
-    return <>
-        <Button sx={{fontSize: "inherit"}} onClick={() => {
-            setTableDialogOpen(true);
-        }}>
-            {buttonElement}
-        </Button>
-        <Dialog key="sample-dataset-selection-dialog" onClose={() => {setTableDialogOpen(false)}} 
-                open={tableDialogOpen}
-                sx={{ '& .MuiDialog-paper': { maxWidth: '100%', maxHeight: 840, minWidth: 800 } }}
-            >
-                <DialogTitle sx={{display: "flex"}}>Explore
-                    <IconButton
-                        sx={{marginLeft: "auto"}}
-                        edge="start"
-                        size="small"
-                        color="inherit"
-                        onClick={() => {setTableDialogOpen(false)}}
-                        aria-label="close"
-                    >
-                        <CloseIcon fontSize="inherit"/>
-                    </IconButton>
-                </DialogTitle>
-                <DialogContent sx={{overflowX: "hidden", padding: 1}}>
-                    <DatasetSelectionView datasets={datasetPreviews} hideRowNum
-                        handleSelectDataset={(dataset) => {
-                            setTableDialogOpen(false);
-                            for (let table of dataset.tables) { 
-                                fetch(table.url)
-                                .then(res => res.text())
-                                .then(textData => {
-                                    let tableName = table.url.split("/").pop()?.split(".")[0] || 'table-' + Date.now().toString().substring(0, 8);
-                                    let dictTable;
-                                    if (table.format == "csv") {
-                                        dictTable = createTableFromText(tableName, textData);
-                                    } else if (table.format == "json") {
-                                        dictTable = createTableFromFromObjectArray(tableName, JSON.parse(textData), true);
-                                    } 
-                                    if (dictTable) {
-                                        dispatch(dfActions.loadTable(dictTable));
-                                        dispatch(fetchFieldSemanticType(dictTable));
-                                    }
-                                    
-                                });
-                            } 
-                        }}/>
-                </DialogContent>
-            </Dialog>
-    </>
-}
-
-export interface TableUploadDialogProps {
-    buttonElement?: any;
-    disabled?: boolean;
-    onOpen?: () => void;
-    // For external control of file input
-    fileInputRef?: React.RefObject<HTMLInputElement>;
-}
-
-const getUniqueTableName = (baseName: string, existingNames: Set<string>): string => {
-    let uniqueName = baseName;
-    let counter = 1;
-    while (existingNames.has(uniqueName)) {
-        uniqueName = `${baseName}_${counter}`;
-        counter++;
-    }
-    return uniqueName;
-};
-
-export const TableUploadDialog: React.FC<TableUploadDialogProps> = ({ buttonElement, disabled, onOpen, fileInputRef }) => {
-    const dispatch = useDispatch<AppDispatch>();
-    const internalRef = React.useRef<HTMLInputElement>(null);
-    const inputRef = fileInputRef || internalRef;
-    const existingTables = useSelector((state: DataFormulatorState) => state.tables);
-    const existingNames = new Set(existingTables.map(t => t.id));
-    const serverConfig = useSelector((state: DataFormulatorState) => state.serverConfig);
-
-    let handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        const files = event.target.files;
-
-        if (files) {
-            for (let file of files) {
-                const uniqueName = getUniqueTableName(file.name, existingNames);
-                
-                // Check if file is a text type (csv, tsv, json)
-                if (file.type === 'text/csv' || 
-                    file.type === 'text/tab-separated-values' || 
-                    file.type === 'application/json' ||
-                    file.name.endsWith('.csv') || 
-                    file.name.endsWith('.tsv') || 
-                    file.name.endsWith('.json')) {
-
-                    // Check if file is larger than 5MB
-                    const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB in bytes
-                    if (file.size > MAX_FILE_SIZE) {
-                        dispatch(dfActions.addMessages({
-                            "timestamp": Date.now(),
-                            "type": "error",
-                            "component": "data loader",
-                            "value": `File ${file.name} is too large (${(file.size / (1024 * 1024)).toFixed(2)}MB), upload it via DATABASE option instead.`
-                        }));
-                        continue; // Skip this file and process the next one
-                    }
-                    
-                    // Handle text files
-                    file.text().then((text) => {
-                        let table = loadTextDataWrapper(uniqueName, text, file.type);
-                        if (table) {
-                            dispatch(dfActions.loadTable(table));
-                            dispatch(fetchFieldSemanticType(table));
-                        }
-                    });
-                } else if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-                           file.type === 'application/vnd.ms-excel' ||
-                           file.name.endsWith('.xlsx') || 
-                           file.name.endsWith('.xls')) {
-                    // Handle Excel files
-                    const reader = new FileReader();
-                    reader.onload = async (e) => {
-                        const arrayBuffer = e.target?.result as ArrayBuffer;
-                        if (arrayBuffer) {
-                            try {
-                                let tables = await loadBinaryDataWrapper(uniqueName, arrayBuffer);
-                                for (let table of tables) {
-                                    dispatch(dfActions.loadTable(table));
-                                    dispatch(fetchFieldSemanticType(table));
-                                }
-                                if (tables.length == 0) {
-                                    dispatch(dfActions.addMessages({
-                                        "timestamp": Date.now(),
-                                        "type": "error",
-                                        "component": "data loader",
-                                        "value": `Failed to parse Excel file ${file.name}. Please check the file format.`
-                                    }));
-                                }
-                            } catch (error) {
-                                console.error('Error processing Excel file:', error);
-                                dispatch(dfActions.addMessages({
-                                    "timestamp": Date.now(),
-                                    "type": "error",
-                                    "component": "data loader",
-                                    "value": `Failed to parse Excel file ${file.name}. Please check the file format.`
-                                }));
-                            }
-                        }
-                    };
-                    reader.readAsArrayBuffer(file);
-                } else {
-                    // Unsupported file type
-                    dispatch(dfActions.addMessages({
-                        "timestamp": Date.now(),
-                        "type": "error",
-                        "component": "data loader",
-                        "value": `Unsupported file format: ${file.name}. Please use CSV, TSV, JSON, or Excel files.`
-                    }));
-                }
-            }
-        }
-        if (inputRef.current) {
-            inputRef.current.value = '';
-        }
-    };
-
-    return (
-        <>
-            <Input
-                inputProps={{ 
-                    accept: '.csv,.tsv,.json,.xlsx,.xls',
-                    multiple: true,
-                }}
-                id="upload-data-file"
-                type="file"
-                sx={{ display: 'none' }}
-                inputRef={inputRef}
-                onChange={handleFileUpload}
-            />
-            {buttonElement && (
-                <Tooltip 
-                    title={serverConfig.DISABLE_FILE_UPLOAD ? (
-                        <Typography sx={{ fontSize: '11px' }}>
-                            Install Data Formulator locally to enable file upload. <br />
-                            Link: <Link 
-                                href="https://github.com/microsoft/data-formulator" 
-                                target="_blank" 
-                                rel="noopener noreferrer"
-                                sx={{ color: 'inherit', textDecoration: 'underline' }}
-                                onClick={(e) => e.stopPropagation()}
-                            >
-                                https://github.com/microsoft/data-formulator
-                            </Link>
-                        </Typography>
-                    ) : ""}
-                    placement="top"
-                >
-                    <span style={{cursor: serverConfig.DISABLE_FILE_UPLOAD ? 'help' : 'pointer'}}>
-                        <Button 
-                            sx={{fontSize: "inherit"}} 
-                            variant="text" 
-                            color="primary" 
-                            disabled={disabled || serverConfig.DISABLE_FILE_UPLOAD}
-                            onClick={() => {
-                                inputRef.current?.click();
-                                onOpen?.();
-                            }}
-                        >
-                            {buttonElement}
-                        </Button>
-                    </span>
-                </Tooltip>
-            )}
-        </>
-    );
-}
-
-
-export interface TableCopyDialogProps {
-    buttonElement?: any;
-    disabled?: boolean;
-    onOpen?: () => void;
-    // Controlled mode props
-    open?: boolean;
-    onClose?: () => void;
-}
-
-export interface TableURLDialogProps {
-    buttonElement: any;
-    disabled: boolean;
-}
-
-export const TableURLDialog: React.FC<TableURLDialogProps> = ({ buttonElement, disabled }) => {
-
-    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-    const [tableURL, setTableURL] = useState<string>("");
-
-    const dispatch = useDispatch<AppDispatch>();
-
-    let handleSubmitContent = (): void => {
-
-        let  parts = tableURL.split('/');
-
-        // Get the last part of the URL, which should be the file name with extension
-        const tableName = parts[parts.length - 1];
-
-        fetch(tableURL)
-        .then(res => res.text())
-        .then(content => {
-            let table : undefined | DictTable = undefined;
-            try {
-                let jsonContent = JSON.parse(content);
-                table = createTableFromFromObjectArray(tableName || 'dataset', jsonContent, true);
-            } catch (error) {
-                table = createTableFromText(tableName || 'dataset', content);
-            }
-
-            if (table) {
-                dispatch(dfActions.loadTable(table));
-                dispatch(fetchFieldSemanticType(table));
-            }        
-        })
-    };
-
-    let hasValidSuffix = tableURL.endsWith('.csv') || tableURL.endsWith('.tsv') || tableURL.endsWith(".json");
-
-    let dialog = <Dialog key="table-url-dialog" onClose={()=>{setDialogOpen(false)}} open={dialogOpen}
-            sx={{ '& .MuiDialog-paper': { maxWidth: '80%', maxHeight: 800, minWidth: 800 } }} disableRestoreFocus
-        >
-            <DialogTitle  sx={{display: "flex"}}>Upload data URL
-                <IconButton
-                    sx={{marginLeft: "auto"}}
-                    edge="start"
-                    size="small"
-                    color="inherit"
-                    onClick={()=>{ setDialogOpen(false); }}
-                    aria-label="close"
-                >
-                    <CloseIcon fontSize="inherit"/>
-                </IconButton>
-            </DialogTitle>
-            <DialogContent sx={{overflowX: "hidden", padding: 2, display: "flex", flexDirection: "column"}} dividers>
-                <TextField error={tableURL != "" && !hasValidSuffix} autoFocus placeholder='Please enter URL of the dataset' 
-                            helperText={hasValidSuffix ? "" : "the url should links to a csv, tsv or json file"}
-                            sx={{marginBottom: 1}} size="small" value={tableURL} onChange={(event) => { setTableURL(event.target.value.trim()); }} 
-                            id="dataset-url" label="data url" variant="outlined" />
-            </ DialogContent>
-            <DialogActions>
-                <Button variant="contained" size="small" onClick={()=>{ setDialogOpen(false); }}>cancel</Button>
-                <Button variant="contained" size="small" onClick={()=>{ setDialogOpen(false); handleSubmitContent(); }} >
-                    upload
-                </Button>
-            </DialogActions>
-        </Dialog>;
-
-    return <>
-        <Button sx={{fontSize: "inherit"}} variant="text" color="primary" 
-                    disabled={disabled} onClick={()=>{setDialogOpen(true)}}>
-            {buttonElement}
-        </Button>
-        {dialog}
-    </>;
-}
-
-
-export const TableCopyDialogV2: React.FC<TableCopyDialogProps> = ({ 
-    buttonElement, 
-    disabled, 
-    onOpen,
-    open: controlledOpen,
-    onClose,
-}) => {
-
-    const [internalOpen, setInternalOpen] = useState<boolean>(false);
-    
-    // Support both controlled and uncontrolled modes
-    const isControlled = controlledOpen !== undefined;
-    const dialogOpen = isControlled ? controlledOpen : internalOpen;
-    
-    const [tableContent, setTableContent] = useState<string>("");
-    const [tableContentType, setTableContentType] = useState<'text' | 'image'>('text');
-
-    const [cleaningInProgress, setCleaningInProgress] = useState<boolean>(false);
-
-    // Add new state for display optimization
-    const [displayContent, setDisplayContent] = useState<string>("");
-    const [isLargeContent, setIsLargeContent] = useState<boolean>(false);
-    const [showFullContent, setShowFullContent] = useState<boolean>(false);
-    const [isOverSizeLimit, setIsOverSizeLimit] = useState<boolean>(false);
-    
-    // Constants for content size limits
-    const MAX_DISPLAY_LINES = 20; // Reduced from 30
-    const LARGE_CONTENT_THRESHOLD = 50000; // ~50KB threshold
-    const MAX_CONTENT_SIZE = 2 * 1024 * 1024; // 2MB in bytes (same as file upload limit)
-
-    const dispatch = useDispatch<AppDispatch>();
-    const existingTables = useSelector((state: DataFormulatorState) => state.tables);
-    const existingNames = new Set(existingTables.map(t => t.id));
-
-    let handleSubmitContent = (tableStr: string): void => {
-        let table: undefined | DictTable = undefined;
-        
-        // Generate a short unique name based on content and time if no name provided
-        const defaultName = (() => {
-            const hashStr = tableStr.substring(0, 100) + Date.now();
-            const hashCode = hashStr.split('').reduce((acc, char) => {
-                return ((acc << 5) - acc) + char.charCodeAt(0) | 0;
-            }, 0);
-            const shortHash = Math.abs(hashCode).toString(36).substring(0, 4);
-            return `data-${shortHash}`;
-        })();
-
-        const baseName = defaultName;
-        const uniqueName = getUniqueTableName(baseName, existingNames);
-
-        try {
-            let content = JSON.parse(tableStr);
-            table = createTableFromFromObjectArray(uniqueName, content, true);
-        } catch (error) {
-            table = createTableFromText(uniqueName, tableStr);
-        }
-        if (table) {
-            dispatch(dfActions.loadTable(table));
-            dispatch(fetchFieldSemanticType(table));
-        }        
-    };
-
-    // Optimized content change handler
-    const handleContentChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-        const newContent = event.target.value;
-        setTableContent(newContent);
-        
-        // Check if content exceeds size limit
-        const contentSizeBytes = new Blob([newContent]).size;
-        const isOverLimit = contentSizeBytes > MAX_CONTENT_SIZE;
-        setIsOverSizeLimit(isOverLimit);
-        
-        // Check if content is large
-        const isLarge = newContent.length > LARGE_CONTENT_THRESHOLD;
-        setIsLargeContent(isLarge);
-        
-        if (isLarge && !showFullContent) {
-            // For large content, only show a preview in the TextField
-            const lines = newContent.split('\n');
-            const previewLines = lines.slice(0, MAX_DISPLAY_LINES);
-            const preview = previewLines.join('\n') + (lines.length > MAX_DISPLAY_LINES ? '\n... (truncated for performance)' : '');
-            setDisplayContent(preview);
-        } else {
-            setDisplayContent(newContent);
-        }
-    }, [showFullContent, dispatch, MAX_CONTENT_SIZE]);
-
-    // Toggle between preview and full content
-    const toggleFullContent = useCallback(() => {
-        setShowFullContent(!showFullContent);
-        if (!showFullContent) {
-            setDisplayContent(tableContent);
-        } else {
-            const lines = tableContent.split('\n');
-            const previewLines = lines.slice(0, MAX_DISPLAY_LINES);
-            const preview = previewLines.join('\n') + (lines.length > MAX_DISPLAY_LINES ? '\n... (truncated for performance)' : '');
-            setDisplayContent(preview);
-        }
-    }, [showFullContent, tableContent]);
-
-
-    const handleCloseDialog = useCallback(() => {
-        if (isControlled) {
-            onClose?.();
-        } else {
-            setInternalOpen(false);
-        }
-        // Reset state when closing
-        setTableContent("");
-        setDisplayContent("");
-        setIsLargeContent(false);
-        setIsOverSizeLimit(false);
-        setShowFullContent(false);
-    }, [isControlled, onClose]);
-
-    let dialog = <Dialog key="table-selection-dialog" onClose={handleCloseDialog} open={dialogOpen}
-            sx={{ '& .MuiDialog-paper': { maxWidth: '80%', maxHeight: 800, minWidth: 800 } }}
-        >
-            <DialogTitle  sx={{display: "flex"}}>Paste & Upload Data
-                <IconButton
-                    sx={{marginLeft: "auto"}}
-                    edge="start"
-                    size="small"
-                    color="inherit"
-                    onClick={handleCloseDialog}
-                    aria-label="close"
-                >
-                    <CloseIcon fontSize="inherit"/>
-                </IconButton>
-            </DialogTitle>
-            <DialogContent sx={{overflowX: "hidden", padding: 2, display: "flex", 
-                                flexDirection: "column", 
-                                "& .MuiOutlinedInput-root.Mui-disabled": {backgroundColor: 'rgba(0,0,0,0.05)'}}} dividers>
-                <Box sx={{width: '100%',  display:'flex', position: 'relative', overflow: 'auto'}}>
-                    {cleaningInProgress && tableContentType == "text" ? <LinearProgress sx={{ width: '100%', height: "calc(100% - 8px)", marginTop: 1, minHeight: 200, opacity: 0.1, position: 'absolute', zIndex: 1 }} /> : ""}
-                    <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-                        {/* Size limit warning */}
-                        {isOverSizeLimit && (
-                            <Box sx={{ display: 'flex', alignItems: 'center', marginBottom: 1, padding: 1, backgroundColor: 'rgba(244, 67, 54, 0.1)', borderRadius: 1, border: '1px solid rgba(244, 67, 54, 0.3)' }}>
-                                <Typography variant="caption" sx={{ flex: 1, color: 'error.main', fontWeight: 500 }}>
-                                    ⚠️ Content exceeds {(MAX_CONTENT_SIZE / (1024 * 1024)).toFixed(0)}MB size limit. 
-                                    Current size: {(new Blob([tableContent]).size / (1024 * 1024)).toFixed(2)}MB. 
-                                    Please use the DATABASE option for large datasets.
-                                </Typography>
-                            </Box>
-                        )}
-                        {/* Content size indicator */}
-                        {isLargeContent && !isOverSizeLimit && (
-                            <Box sx={{ display: 'flex', alignItems: 'center', marginBottom: 1, padding: 1, backgroundColor: 'rgba(255, 193, 7, 0.1)', borderRadius: 1 }}>
-                                <Typography variant="caption" sx={{ flex: 1 }}>
-                                    Large content detected ({Math.round(tableContent.length / 1000)}KB). 
-                                    {showFullContent ? 'Showing full content (may be slow)' : 'Showing preview for performance'}
-                                </Typography>
-                                <Button 
-                                    size="small" 
-                                    variant="outlined" 
-                                    onClick={toggleFullContent}
-                                    sx={{ textTransform: 'none', minWidth: 'auto' }}
-                                >
-                                    {showFullContent ? 'Show Preview' : 'Show Full'}
-                                </Button>
-                            </Box>
-                        )}
-                        
-                        <TextField 
-                            disabled={cleaningInProgress} 
-                            autoFocus 
-                            size="small" 
-                            sx={{ 
-                                marginTop: 1, 
-                                flex: 1, 
-                                "& .MuiInputBase-input": {
-                                    fontSize: 12, 
-                                    lineHeight: 1.2,
-                                    // Limit height for performance
-                                    maxHeight: isLargeContent && !showFullContent ? '300px' : '400px',
-                                    overflow: 'auto'
-                                }
-                            }} 
-                            id="upload content" 
-                            value={displayContent} 
-                            maxRows={isLargeContent && !showFullContent ? MAX_DISPLAY_LINES : 25} // Dynamic max rows
-                            minRows={10} // Reduced from 15
-                            onChange={handleContentChange}
-                            slotProps={{
-                                inputLabel: {
-                                    shrink: true
-                                }
-                            }}
-                            placeholder="paste data (csv, tsv, or json) and upload it!"
-                            onPasteCapture={(e) => {
-                                if (e.clipboardData.files.length > 0) {
-                                    let file = e.clipboardData.files[0];
-                                    let read = new FileReader();
-
-                                    read.readAsDataURL(file);
-                                    read.onloadend = function(){
-                                        let res = read.result;
-                                        console.log(res);
-                                        if (res) { 
-                                            setTableContent(res as string); 
-                                            setTableContentType("image");
-                                        }
-                                    }
-                                }
-                            }}
-                            autoComplete='off'
-                            label="data content" 
-                            variant="outlined" 
-                            multiline 
-                        />
-                    </Box>
-                </Box>
-            </DialogContent>
-            <DialogActions>
-                <Button variant="text" sx={{textTransform: 'none'}} size="small" onClick={handleCloseDialog}>cancel</Button>
-                <Tooltip title={isOverSizeLimit ? `Content exceeds ${(MAX_CONTENT_SIZE / (1024 * 1024)).toFixed(0)}MB size limit` : ""} placement="top">
-                    <span>
-                        <Button disabled={tableContentType != "text" || tableContent.trim() == "" || isOverSizeLimit} variant="contained" sx={{textTransform: 'none'}} size="small" 
-                            onClick={()=>{ 
-                                handleCloseDialog(); 
-                                handleSubmitContent(tableContent); // Always use full content for processing
-                            }} >
-                            {"upload"}
-                        </Button>
-                    </span>
-                </Tooltip>
-            </DialogActions>
-            
-        </Dialog>;
-
-    return <>
-        {buttonElement && (
-            <Button sx={{fontSize: "inherit"}} variant="text" color="primary" 
-                        disabled={disabled} onClick={()=>{
-                            setInternalOpen(true);
-                            onOpen?.();
-                        }}>
-                    {buttonElement}
-            </Button>
-        )}
-        {dialog}
-    </>;
-}
-
diff --git a/src/views/UnifiedDataUploadDialog.tsx b/src/views/UnifiedDataUploadDialog.tsx
new file mode 100644
index 0000000..82be5f0
--- /dev/null
+++ b/src/views/UnifiedDataUploadDialog.tsx
@@ -0,0 +1,1221 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import * as React from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
+import {
+    Box,
+    Button,
+    Chip,
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    TextField,
+    Typography,
+    Tooltip,
+    LinearProgress,
+    Link,
+    Input,
+    alpha,
+    useTheme,
+    Card,
+} from '@mui/material';
+
+import CloseIcon from '@mui/icons-material/Close';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import LinkIcon from '@mui/icons-material/Link';
+import StorageIcon from '@mui/icons-material/Storage';
+import ImageSearchIcon from '@mui/icons-material/ImageSearch';
+import ExploreIcon from '@mui/icons-material/Explore';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import Paper from '@mui/material/Paper';
+
+import { useDispatch, useSelector } from 'react-redux';
+import { DataFormulatorState, dfActions, fetchFieldSemanticType } from '../app/dfSlice';
+import { AppDispatch } from '../app/store';
+import { DictTable } from '../components/ComponentType';
+import { createTableFromFromObjectArray, createTableFromText, loadTextDataWrapper, loadBinaryDataWrapper } from '../data/utils';
+import { DataLoadingChat } from './DataLoadingChat';
+import { DatasetSelectionView, DatasetMetadata } from './TableSelectionView';
+import { getUrls } from '../app/utils';
+import { CustomReactTable } from './ReactTable';
+import { DBManagerPane } from './DBTableManager';
+
+export type UploadTabType = 'menu' | 'upload' | 'paste' | 'url' | 'database' | 'extract' | 'explore';
+
+interface TabPanelProps {
+    children?: React.ReactNode;
+    index: UploadTabType;
+    value: UploadTabType;
+}
+
+function TabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`data-upload-tabpanel-${index}`}
+            aria-labelledby={`data-upload-tab-${index}`}
+            style={{ height: '100%', overflow: 'auto', boxSizing: 'border-box' }}
+            {...other}
+        >
+            {value === index && children}
+        </div>
+    );
+}
+
+// Data source menu card component
+interface DataSourceCardProps {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+    onClick: () => void;
+    disabled?: boolean;
+    disabledReason?: string;
+}
+
+interface PreviewPanelProps {
+    title: string;
+    loading: boolean;
+    error: string | null;
+    table?: DictTable | null;
+    tables?: DictTable[] | null;
+    emptyLabel: string;
+    meta?: string;
+    onRemoveTable?: (index: number) => void;
+    activeIndex?: number;
+    onActiveIndexChange?: (index: number) => void;
+}
+
+const PreviewPanel: React.FC<PreviewPanelProps> = ({
+    title,
+    loading,
+    error,
+    table,
+    tables,
+    emptyLabel,
+    meta,
+    onRemoveTable,
+    activeIndex: controlledActiveIndex,
+    onActiveIndexChange,
+}) => {
+    const previewTables = tables ?? (table ? [table] : null);
+    const [internalActiveIndex, setInternalActiveIndex] = useState(0);
+    const activeIndex = controlledActiveIndex !== undefined ? controlledActiveIndex : internalActiveIndex;
+    const setActiveIndex = onActiveIndexChange || setInternalActiveIndex;
+
+    useEffect(() => {
+        if (!previewTables || previewTables.length === 0) {
+            if (onActiveIndexChange) {
+                onActiveIndexChange(0);
+            } else {
+                setInternalActiveIndex(0);
+            }
+            return;
+        }
+        if (activeIndex > previewTables.length - 1) {
+            const newIndex = previewTables.length - 1;
+            if (onActiveIndexChange) {
+                onActiveIndexChange(newIndex);
+            } else {
+                setInternalActiveIndex(newIndex);
+            }
+        }
+    }, [previewTables, activeIndex, onActiveIndexChange]);
+
+    const activeTable = previewTables && previewTables.length > 0 ? previewTables[activeIndex] : null;
+    return (
+        <Box
+            sx={{
+                p: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1,
+                minHeight: 120,
+            }}
+        >
+            {loading && <LinearProgress />}
+
+            {error && (
+                <Typography variant="caption" color="error">
+                    {error}
+                </Typography>
+            )}
+
+            {!loading && !error && (!previewTables || previewTables.length === 0) && (
+                <Typography variant="caption" color="text.secondary">
+                    {emptyLabel}
+                </Typography>
+            )}
+
+            {previewTables && previewTables.length > 0 && (
+                <Box>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            flexWrap: 'nowrap',
+                            gap: 0.25,
+                            mb: 0.5,
+                            pb: 0.25,
+                            overflowX: 'auto',
+                            overflowY: 'hidden',
+                            '&::-webkit-scrollbar': { height: 4 },
+                            '&::-webkit-scrollbar-thumb': {
+                                backgroundColor: 'action.disabled',
+                                borderRadius: 4,
+                            },
+                        }}
+                    >
+                        <Typography variant="caption" sx={{ fontSize: '0.625rem', fontWeight: 'bold' }}>Preview</Typography>
+                        {previewTables.map((t, idx) => {
+                            const label = t.displayId || t.id;
+                            const isSelected = idx === activeIndex;
+                            return (
+                                <Tooltip key={`${t.id}-${idx}`} title={label} placement="top" arrow>
+                                    <Chip
+                                        label={label}
+                                        size="small"
+                                        onClick={() => {
+                                            if (onActiveIndexChange) {
+                                                onActiveIndexChange(idx);
+                                            } else {
+                                                setInternalActiveIndex(idx);
+                                            }
+                                        }}
+                                        sx={{
+                                            borderRadius: 1,
+                                            cursor: 'pointer',
+                                            maxWidth: 160,
+                                            backgroundColor: (theme) => 
+                                                isSelected 
+                                                    ? alpha(theme.palette.primary.main, 0.12)
+                                                    : 'transparent',
+                                            borderColor: (theme) => 
+                                                isSelected 
+                                                    ? alpha(theme.palette.primary.main, 0.5)
+                                                    : undefined,
+                                            color: (theme) => 
+                                                isSelected 
+                                                    ? theme.palette.primary.main
+                                                    : theme.palette.text.secondary,
+                                            '& .MuiChip-label': {
+                                                fontSize: '0.625rem',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                                maxWidth: 140,
+                                            },
+                                            '&:hover': {
+                                                backgroundColor: (theme) => 
+                                                    isSelected 
+                                                        ? alpha(theme.palette.primary.main, 0.16)
+                                                        : alpha(theme.palette.primary.main, 0.08),
+                                            },
+                                        }}
+                                    />
+                                </Tooltip>
+                            );
+                        })}
+                        {onRemoveTable && (
+                            <IconButton
+                                size="small"
+                                color="error"
+                                onClick={() => onRemoveTable(activeIndex)}
+                                sx={{ ml: 'auto', flexShrink: 0 }}
+                                aria-label="Remove table"
+                            >
+                                <DeleteIcon fontSize="small" />
+                            </IconButton>
+                        )}
+                    </Box>
+
+                    {activeTable && (
+                        <Box>
+                            <Card variant="outlined" sx={{ pb: 0.5 }}>
+                                <CustomReactTable
+                                    rows={activeTable.rows.slice(0, 12)}
+                                    columnDefs={activeTable.names.map(name => ({
+                                        id: name,
+                                        label: name,
+                                        minWidth: 60,
+                                    }))}
+                                    rowsPerPageNum={-1}
+                                    compact={true}
+                                    isIncompleteTable={activeTable.rows.length > 12}
+                                    maxHeight={200}
+                                />
+                            
+                            </Card>
+                            <Typography variant="caption" color="text.secondary">
+                            {activeTable.rows.length} rows × {activeTable.names.length} columns
+                        </Typography>
+                      </Box>
+                    )}
+                </Box>
+            )}
+        </Box>
+    );
+};
+
+const DataSourceCard: React.FC<DataSourceCardProps> = ({ 
+    icon, 
+    title, 
+    description, 
+    onClick, 
+    disabled = false,
+    disabledReason 
+}) => {
+    const theme = useTheme();
+    
+    const card = (
+        <Paper
+            elevation={0}
+            onClick={disabled ? undefined : onClick}
+            sx={{
+                p: 1.5,
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 1,
+                opacity: disabled ? 0.5 : 1,
+                transition: 'all 0.15s ease',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1.5,
+                '&:hover': disabled ? {} : {
+                    borderColor: 'primary.main',
+                    backgroundColor: alpha(theme.palette.primary.main, 0.04),
+                }
+            }}
+        >
+            <Box sx={{ 
+                color: disabled ? 'text.disabled' : 'primary.main',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 32,
+                height: 32,
+                borderRadius: 1,
+                backgroundColor: alpha(theme.palette.primary.main, 0.08),
+                flexShrink: 0,
+                '& .MuiSvgIcon-root': { fontSize: 18 }
+            }}>
+                {icon}
+            </Box>
+            <Box sx={{ flex: 1, minWidth: 0 }}>
+                <Typography 
+                    variant="body2" 
+                    sx={{ 
+                        fontWeight: 500,
+                        color: disabled ? 'text.disabled' : 'text.primary',
+                    }}
+                >
+                    {title}
+                </Typography>
+                <Typography
+                    variant="caption"
+                    sx={{
+                        color: disabled ? 'text.disabled' : 'text.secondary',
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden',
+                        lineHeight: 1.3,
+                        mt: 0.25,
+                    }}
+                >
+                    {description}
+                </Typography>
+            </Box>
+        </Paper>
+    );
+
+    if (disabled && disabledReason) {
+        return (
+            <Tooltip title={disabledReason} placement="top">
+                <span>{card}</span>
+            </Tooltip>
+        );
+    }
+
+    return card;
+};
+
+const getUniqueTableName = (baseName: string, existingNames: Set<string>): string => {
+    let uniqueName = baseName;
+    let counter = 1;
+    while (existingNames.has(uniqueName)) {
+        uniqueName = `${baseName}_${counter}`;
+        counter++;
+    }
+    return uniqueName;
+};
+
+export interface UnifiedDataUploadDialogProps {
+    open: boolean;
+    onClose: () => void;
+    initialTab?: UploadTabType;
+}
+
+export const UnifiedDataUploadDialog: React.FC<UnifiedDataUploadDialogProps> = ({
+    open,
+    onClose,
+    initialTab = 'menu',
+}) => {
+    const theme = useTheme();
+    const dispatch = useDispatch<AppDispatch>();
+    const existingTables = useSelector((state: DataFormulatorState) => state.tables);
+    const serverConfig = useSelector((state: DataFormulatorState) => state.serverConfig);
+    const dataCleanBlocks = useSelector((state: DataFormulatorState) => state.dataCleanBlocks);
+    const existingNames = new Set(existingTables.map(t => t.id));
+
+    const [activeTab, setActiveTab] = useState<UploadTabType>(initialTab === 'menu' ? 'menu' : initialTab);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    // Paste tab state
+    const [pasteContent, setPasteContent] = useState<string>("");
+    const [displayContent, setDisplayContent] = useState<string>("");
+    const [isLargeContent, setIsLargeContent] = useState<boolean>(false);
+    const [showFullContent, setShowFullContent] = useState<boolean>(false);
+    const [isOverSizeLimit, setIsOverSizeLimit] = useState<boolean>(false);
+    
+    // URL input state (merged into file upload)
+    const [tableURL, setTableURL] = useState<string>("");
+
+    // File preview state (shared with URL)
+    const [filePreviewTables, setFilePreviewTables] = useState<DictTable[] | null>(null);
+    const [filePreviewLoading, setFilePreviewLoading] = useState<boolean>(false);
+    const [filePreviewError, setFilePreviewError] = useState<string | null>(null);
+    const [filePreviewFiles, setFilePreviewFiles] = useState<File[]>([]);
+    const [filePreviewActiveIndex, setFilePreviewActiveIndex] = useState<number>(0);
+
+    // Sample datasets state
+    const [datasetPreviews, setDatasetPreviews] = useState<DatasetMetadata[]>([]);
+
+    // Constants
+    const MAX_DISPLAY_LINES = 20;
+    const LARGE_CONTENT_THRESHOLD = 50000;
+    const MAX_CONTENT_SIZE = 2 * 1024 * 1024;
+
+    // Update active tab when initialTab changes
+    useEffect(() => {
+        if (open) {
+            setActiveTab(initialTab === 'menu' ? 'menu' : initialTab);
+        }
+    }, [initialTab, open]);
+
+
+    // Load sample datasets
+    useEffect(() => {
+        if (open && activeTab === 'explore') {
+            fetch(`${getUrls().EXAMPLE_DATASETS}`)
+                .then((response) => response.json())
+                .then((result) => {
+                    let datasets: DatasetMetadata[] = result.map((info: any) => {
+                        let tables = info["tables"].map((table: any) => {
+                            if (table["format"] == "json") {
+                                return {
+                                    table_name: table["name"],
+                                    url: table["url"],
+                                    format: table["format"],
+                                    sample: table["sample"],
+                                }
+                            }
+                            else if (table["format"] == "csv" || table["format"] == "tsv") {
+                                const delimiter = table["format"] === "csv" ? "," : "\t";
+                                const rows = table["sample"]
+                                    .split("\n")
+                                    .map((row: string) => row.split(delimiter));
+                                
+                                if (rows.length > 0) {
+                                    const headers = rows[0];
+                                    const dataRows = rows.slice(1);
+                                    const sampleData = dataRows.map((row: string[]) => {
+                                        const obj: any = {};
+                                        headers.forEach((header: string, index: number) => {
+                                            obj[header] = row[index] || '';
+                                        });
+                                        return obj;
+                                    });
+                                    
+                                    return {
+                                        table_name: table["name"],
+                                        url: table["url"],
+                                        format: table["format"],
+                                        sample: sampleData,
+                                    };
+                                }
+                                
+                                return {
+                                    table_name: table["name"],
+                                    url: table["url"],
+                                    format: table["format"],
+                                    sample: [],
+                                };
+                            }
+                        })
+                        return { tables: tables, name: info["name"], description: info["description"], source: info["source"] }
+                    }).filter((t: DatasetMetadata | undefined) => t != undefined);
+                    setDatasetPreviews(datasets);
+                });
+        }
+    }, [open, activeTab]);
+
+    const handleClose = useCallback(() => {
+        // Reset state when closing
+        setPasteContent("");
+        setDisplayContent("");
+        setIsLargeContent(false);
+        setIsOverSizeLimit(false);
+        setShowFullContent(false);
+        setTableURL("");
+        setFilePreviewTables(null);
+        setFilePreviewLoading(false);
+        setFilePreviewError(null);
+        setFilePreviewFiles([]);
+        onClose();
+    }, [onClose]);
+
+    // File upload handler
+    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        const files = event.target.files;
+
+        if (files && files.length > 0) {
+            const selectedFiles = Array.from(files);
+            setFilePreviewFiles(selectedFiles);
+            setFilePreviewError(null);
+            setFilePreviewTables(null);
+            setFilePreviewLoading(true);
+            // Clear URL input when file is uploaded
+            setTableURL("");
+
+            const MAX_FILE_SIZE = 5 * 1024 * 1024;
+            const previewTables: DictTable[] = [];
+            const errors: string[] = [];
+
+            const processFiles = async () => {
+                for (const file of selectedFiles) {
+                    const uniqueName = getUniqueTableName(file.name, existingNames);
+                    const isTextFile = file.type === 'text/csv' || 
+                        file.type === 'text/tab-separated-values' || 
+                        file.type === 'application/json' ||
+                        file.name.endsWith('.csv') || 
+                        file.name.endsWith('.tsv') || 
+                        file.name.endsWith('.json');
+                    const isExcelFile = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+                        file.type === 'application/vnd.ms-excel' ||
+                        file.name.endsWith('.xlsx') || 
+                        file.name.endsWith('.xls');
+
+                    if (file.size > MAX_FILE_SIZE && isTextFile) {
+                        errors.push(`File ${file.name} is too large (${(file.size / (1024 * 1024)).toFixed(2)}MB). Use Database for large files.`);
+                        continue;
+                    }
+
+                    if (isTextFile) {
+                        try {
+                            const text = await file.text();
+                            const table = loadTextDataWrapper(uniqueName, text, file.type);
+                            if (table) {
+                                previewTables.push(table);
+                            } else {
+                                errors.push(`Failed to parse ${file.name}.`);
+                            }
+                        } catch {
+                            errors.push(`Failed to read ${file.name}.`);
+                        }
+                        continue;
+                    }
+
+                    if (isExcelFile) {
+                        try {
+                            const arrayBuffer = await file.arrayBuffer();
+                            const tables = await loadBinaryDataWrapper(uniqueName, arrayBuffer);
+                            if (tables.length > 0) {
+                                previewTables.push(...tables);
+                            } else {
+                                errors.push(`Failed to parse Excel file ${file.name}.`);
+                            }
+                        } catch {
+                            errors.push(`Failed to parse Excel file ${file.name}.`);
+                        }
+                        continue;
+                    }
+
+                    errors.push(`Unsupported file format: ${file.name}.`);
+                }
+
+                setFilePreviewTables(previewTables.length > 0 ? previewTables : null);
+                setFilePreviewError(errors.length > 0 ? errors.join(' ') : null);
+                setFilePreviewLoading(false);
+            };
+
+            processFiles();
+        }
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+
+    // Reset activeIndex when tables change
+    useEffect(() => {
+        if (filePreviewTables && filePreviewTables.length > 0) {
+            if (filePreviewActiveIndex >= filePreviewTables.length) {
+                setFilePreviewActiveIndex(filePreviewTables.length - 1);
+            }
+        } else {
+            setFilePreviewActiveIndex(0);
+        }
+    }, [filePreviewTables, filePreviewActiveIndex]);
+
+    const handleFileLoadSingleTable = (): void => {
+        if (!filePreviewTables || filePreviewTables.length === 0) {
+            return;
+        }
+        const table = filePreviewTables[filePreviewActiveIndex];
+        if (table) {
+            dispatch(dfActions.loadTable(table));
+            dispatch(fetchFieldSemanticType(table));
+            handleClose();
+        }
+    };
+
+    const handleFileLoadAllTables = (): void => {
+        if (!filePreviewTables || filePreviewTables.length === 0) {
+            return;
+        }
+        for (let table of filePreviewTables) {
+            dispatch(dfActions.loadTable(table));
+            dispatch(fetchFieldSemanticType(table));
+        }
+        handleClose();
+    };
+
+    const handleRemoveFilePreviewTable = (index: number): void => {
+        setFilePreviewTables((prev) => {
+            if (!prev) return prev;
+            const next = prev.filter((_, i) => i !== index);
+            return next.length > 0 ? next : null;
+        });
+    };
+
+    // Paste content handler
+    const handleContentChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        const newContent = event.target.value;
+        setPasteContent(newContent);
+        
+        const contentSizeBytes = new Blob([newContent]).size;
+        const isOverLimit = contentSizeBytes > MAX_CONTENT_SIZE;
+        setIsOverSizeLimit(isOverLimit);
+        
+        const isLarge = newContent.length > LARGE_CONTENT_THRESHOLD;
+        setIsLargeContent(isLarge);
+        
+        if (isLarge && !showFullContent) {
+            const lines = newContent.split('\n');
+            const previewLines = lines.slice(0, MAX_DISPLAY_LINES);
+            const preview = previewLines.join('\n') + (lines.length > MAX_DISPLAY_LINES ? '\n... (truncated for performance)' : '');
+            setDisplayContent(preview);
+        } else {
+            setDisplayContent(newContent);
+        }
+    }, [showFullContent, MAX_CONTENT_SIZE]);
+
+    const toggleFullContent = useCallback(() => {
+        setShowFullContent(!showFullContent);
+        if (!showFullContent) {
+            setDisplayContent(pasteContent);
+        } else {
+            const lines = pasteContent.split('\n');
+            const previewLines = lines.slice(0, MAX_DISPLAY_LINES);
+            const preview = previewLines.join('\n') + (lines.length > MAX_DISPLAY_LINES ? '\n... (truncated for performance)' : '');
+            setDisplayContent(preview);
+        }
+    }, [showFullContent, pasteContent]);
+
+    const handlePasteSubmit = (): void => {
+        let table: undefined | DictTable = undefined;
+        
+        const defaultName = (() => {
+            const hashStr = pasteContent.substring(0, 100) + Date.now();
+            const hashCode = hashStr.split('').reduce((acc, char) => {
+                return ((acc << 5) - acc) + char.charCodeAt(0) | 0;
+            }, 0);
+            const shortHash = Math.abs(hashCode).toString(36).substring(0, 4);
+            return `data-${shortHash}`;
+        })();
+
+        const uniqueName = getUniqueTableName(defaultName, existingNames);
+
+        try {
+            let content = JSON.parse(pasteContent);
+            table = createTableFromFromObjectArray(uniqueName, content, true);
+        } catch (error) {
+            table = createTableFromText(uniqueName, pasteContent);
+        }
+        if (table) {
+            dispatch(dfActions.loadTable(table));
+            dispatch(fetchFieldSemanticType(table));
+            handleClose();
+        }
+    };
+
+
+    const handleURLPreview = (): void => {
+        setFilePreviewLoading(true);
+        setFilePreviewError(null);
+        setFilePreviewTables(null);
+        // Clear file preview when URL is loaded
+        setFilePreviewFiles([]);
+
+        let parts = tableURL.split('/');
+        const baseName = parts[parts.length - 1] || 'dataset';
+        const tableName = getUniqueTableName(baseName, existingNames);
+
+        fetch(tableURL)
+            .then(res => res.text())
+            .then(content => {
+                let table: undefined | DictTable = undefined;
+                try {
+                    let jsonContent = JSON.parse(content);
+                    if (!Array.isArray(jsonContent)) {
+                        throw new Error('JSON content must be an array of objects.');
+                    }
+                    table = createTableFromFromObjectArray(tableName, jsonContent, true);
+                } catch (error) {
+                    table = createTableFromText(tableName, content);
+                }
+
+                if (table) {
+                    setFilePreviewTables([table]);
+                } else {
+                    setFilePreviewError('Unable to parse data from the provided URL.');
+                }
+            })
+            .catch(() => {
+                setFilePreviewError('Failed to fetch data from the URL.');
+            })
+            .finally(() => {
+                setFilePreviewLoading(false);
+            });
+    };
+
+    const hasValidUrlSuffix = tableURL.endsWith('.csv') || tableURL.endsWith('.tsv') || tableURL.endsWith(".json");
+    const hasMultipleFileTables = (filePreviewTables?.length || 0) > 1;
+    const showFilePreview = filePreviewLoading || !!filePreviewError || (filePreviewTables && filePreviewTables.length > 0);
+    const hasPasteContent = pasteContent.trim() !== '';
+
+    // Data source configurations for the menu
+    const regularDataSources = [
+        { 
+            value: 'explore' as UploadTabType, 
+            title: 'Sample Datasets', 
+            description: 'Explore and load curated example datasets',
+            icon: <ExploreIcon />, 
+            disabled: false,
+            disabledReason: undefined
+        },
+        { 
+            value: 'upload' as UploadTabType, 
+            title: 'Upload File', 
+            description: 'Structured data (CSV, TSV, JSON, Excel) from files or URLs',
+            icon: <UploadFileIcon />, 
+            disabled: false,
+            disabledReason: undefined
+        },
+        { 
+            value: 'paste' as UploadTabType, 
+            title: 'Paste Data', 
+            description: 'Paste tabular data directly from clipboard',
+            icon: <ContentPasteIcon />, 
+            disabled: false,
+            disabledReason: undefined
+        },
+        { 
+            value: 'extract' as UploadTabType, 
+            title: 'Extract from Documents', 
+            description: 'Extract tables from images, PDFs, or documents using AI',
+            icon: <ImageSearchIcon />, 
+            disabled: false,
+            disabledReason: undefined
+        },
+    ];
+
+    const databaseDataSources = [
+        { 
+            value: 'database' as UploadTabType, 
+            title: 'Database', 
+            description: 'Connect to databases or data services',
+            icon: <StorageIcon />, 
+            disabled: serverConfig.DISABLE_DATABASE,
+            disabledReason: 'Database connection is disabled in this environment'
+        },
+    ];
+
+    // Combined config for finding tab titles
+    const dataSourceConfig = [...regularDataSources, ...databaseDataSources];
+
+    // Get current tab title for header
+    const getCurrentTabTitle = () => {
+        const tab = dataSourceConfig.find(t => t.value === activeTab);
+        return tab?.title || 'Add Data';
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            maxWidth={false}
+            sx={{ 
+                '& .MuiDialog-paper': { 
+                    width: 1100,
+                    maxWidth: '95vw',
+                    height: 600, 
+                    maxHeight: '90vh',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    transition: 'width 0.2s ease',
+                } 
+            }}
+        >
+            <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1, pb: 1 }}>
+                {activeTab !== 'menu' && (
+                    <IconButton
+                        size="small"
+                        onClick={() => setActiveTab('menu')}
+                        sx={{ mr: 0.5 }}
+                    >
+                        <ArrowBackIcon fontSize="small" />
+                    </IconButton>
+                )}
+                <Typography variant="h6" component="span">
+                    {activeTab === 'menu' ? 'Load Data' : getCurrentTabTitle()}
+                </Typography>
+                {activeTab === 'extract' && dataCleanBlocks.length > 0 && (
+                    <Tooltip title="Reset extraction">
+                        <IconButton 
+                            size="small" 
+                            color='warning' 
+                            sx={{
+                                '&:hover': { 
+                                    transform: 'rotate(180deg)', 
+                                    transition: 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)' 
+                                } 
+                            }} 
+                            onClick={() => dispatch(dfActions.resetDataCleanBlocks())}
+                        >
+                            <RestartAltIcon fontSize="small" />
+                        </IconButton>
+                    </Tooltip>
+                )}
+                <IconButton
+                    sx={{ marginLeft: 'auto' }}
+                    size="small"
+                    onClick={handleClose}
+                    aria-label="close"
+                >
+                    <CloseIcon fontSize="small" />
+                </IconButton>
+            </DialogTitle>
+
+            <DialogContent sx={{ flex: 1, overflow: 'hidden', p: 0 }}>
+                {/* Main Menu */}
+                <TabPanel value={activeTab} index="menu">
+                    <Box sx={{ p: 2, boxSizing: 'border-box', width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                        <Box sx={{ 
+                            width: '100%',
+                            maxWidth: 860,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 2,
+                        }}>
+                            {/* Section hint */}
+                            <Typography 
+                                variant="body2" 
+                                color="text.secondary" 
+                                sx={{ 
+                                    textAlign: 'left',
+                                    my: 1,
+                                    opacity: 0.6,
+                                    fontSize: '0.75rem',
+                                    letterSpacing: '0.02em'
+                                }}
+                            >
+                                Local data
+                            </Typography>
+
+                            {/* Regular Data Sources Group */}
+                            <Box sx={{ 
+                                display: 'grid', 
+                                gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                                gap: 1.5,
+                            }}>
+                                {regularDataSources.map((source) => (
+                                    <DataSourceCard
+                                        key={source.value}
+                                        icon={source.icon}
+                                        title={source.title}
+                                        description={source.description}
+                                        onClick={() => setActiveTab(source.value)}
+                                        disabled={source.disabled}
+                                        disabledReason={source.disabledReason}
+                                    />
+                                ))}
+                            </Box>
+
+                            {/* Section hint */}
+                            <Typography 
+                                variant="body2" 
+                                color="text.secondary" 
+                                sx={{ 
+                                    textAlign: 'left',
+                                    my: 1,
+                                    opacity: 0.6,
+                                    fontSize: '0.75rem',
+                                    letterSpacing: '0.02em'
+                                }}
+                            >
+                                Or connect to a database
+                            </Typography>
+
+                            {/* Database Data Sources Group */}
+                            <Box sx={{ 
+                                display: 'grid', 
+                                gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                                gap: 1.5,
+                            }}>
+                                {databaseDataSources.map((source) => (
+                                    <DataSourceCard
+                                        key={source.value}
+                                        icon={source.icon}
+                                        title={source.title}
+                                        description={source.description}
+                                        onClick={() => setActiveTab(source.value)}
+                                        disabled={source.disabled}
+                                        disabledReason={source.disabledReason}
+                                    />
+                                ))}
+                            </Box>
+                        </Box>
+                    </Box>
+                </TabPanel>
+
+                {/* Upload File Tab */}
+                <TabPanel value={activeTab} index="upload">
+                    <Box sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        boxSizing: 'border-box',
+                        gap: 2,
+                        p: 2,
+                        justifyContent: showFilePreview ? 'flex-start' : 'center',
+                    }}>
+                        <Box sx={{ width: '100%', maxWidth: showFilePreview ? '60%' : 760, alignSelf: 'center', display: 'flex', flexDirection: 'column', gap: 2 }}>
+                        <Input
+                            inputProps={{ 
+                                accept: '.csv,.tsv,.json,.xlsx,.xls',
+                                multiple: true,
+                            }}
+                            id="unified-upload-data-file"
+                            type="file"
+                            sx={{ display: 'none' }}
+                            inputRef={fileInputRef}
+                            onChange={handleFileUpload}
+                        />
+                        {serverConfig.DISABLE_FILE_UPLOAD ? (
+                            <Box sx={{ textAlign: 'center', py: 4 }}>
+                                <Typography color="text.secondary" sx={{ mb: 2 }}>
+                                    File upload is disabled in this environment.
+                                </Typography>
+                                <Typography variant="body2" color="text.secondary">
+                                    Install Data Formulator locally to enable file upload. <br />
+                                    <Link 
+                                        href="https://github.com/microsoft/data-formulator" 
+                                        target="_blank" 
+                                        rel="noopener noreferrer"
+                                    >
+                                        https://github.com/microsoft/data-formulator
+                                    </Link>
+                                </Typography>
+                            </Box>
+                        ) : (
+                            <Box sx={{ 
+                                display: 'flex', 
+                                flexDirection: 'column',
+                                gap: 2,
+                                alignItems: 'stretch',
+                            }}>
+                                <Box
+                                    sx={{
+                                        border: '2px dashed',
+                                        borderColor: 'divider',
+                                        borderRadius: 2,
+                                        p: showFilePreview ? 2 : 3,
+                                        textAlign: 'center',
+                                        cursor: 'pointer',
+                                        transition: 'all 0.2s',
+                                        flex: '1',
+                                        minWidth: showFilePreview ? 0 : 'auto',
+                                        '&:hover': {
+                                            borderColor: 'primary.main',
+                                            backgroundColor: alpha(theme.palette.primary.main, 0.04),
+                                        }
+                                    }}
+                                    onClick={() => fileInputRef.current?.click()}
+                                >
+                                    <UploadFileIcon sx={{ fontSize: showFilePreview ? 28 : 36, color: 'text.secondary', mb: 1 }} />
+                                    <Typography variant={showFilePreview ? "body2" : "subtitle1"} gutterBottom>
+                                        Drag & drop file here
+                                    </Typography>
+                                    <Typography variant="body2" color="text.secondary" sx={{ fontSize: showFilePreview ? '0.75rem' : '0.875rem' }}>
+                                        or <Link component="button" sx={{ textDecoration: 'underline', cursor: 'pointer' }}>Browse</Link>
+                                    </Typography>
+                                    {!showFilePreview && (
+                                        <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+                                            Supported: CSV, TSV, JSON, Excel (xlsx, xls)
+                                        </Typography>
+                                    )}
+                                </Box>
+
+                                {/* URL Input Section */}
+                                <Box sx={{ 
+                                    display: 'flex', 
+                                    alignItems: 'center', 
+                                    gap: 1,
+                                    flex: '0 0 auto',
+                                }}>
+                                    <TextField
+                                        fullWidth
+                                        placeholder="Load a CSV, TSV, or JSON file from a URL, e.g. https://example.com/data.json"
+                                        value={tableURL}
+                                        onChange={(e) => setTableURL(e.target.value.trim())}
+                                        error={tableURL !== "" && !hasValidUrlSuffix}
+                                        size="small"
+                                        sx={{ 
+                                            flex: 1,
+                                            '& .MuiInputBase-input': {
+                                                fontSize: '0.75rem',
+                                            },
+                                            '& .MuiInputBase-input::placeholder': {
+                                                fontSize: '0.75rem',
+                                            },
+                                        }}
+                                    />
+                                    <Button
+                                        variant="outlined"
+                                        size="small"
+                                        onClick={handleURLPreview}
+                                        disabled={!hasValidUrlSuffix || filePreviewLoading}
+                                        sx={{ textTransform: 'none', whiteSpace: 'nowrap' }}
+                                    >
+                                        Preview
+                                    </Button>
+                                </Box>
+                            </Box>
+                        )}
+                        </Box>
+
+                        {showFilePreview && (
+                            <Box sx={{ width: '90%', alignSelf: 'center' }}>
+                                <PreviewPanel
+                                    title="Preview"
+                                    loading={filePreviewLoading}
+                                    error={filePreviewError}
+                                    tables={filePreviewTables}
+                                    emptyLabel={serverConfig.DISABLE_FILE_UPLOAD ? 'File upload is disabled.' : 'Select a file to preview.'}
+                                    meta={filePreviewTables && filePreviewTables.length > 0 ? `${filePreviewTables.length} table${filePreviewTables.length > 1 ? 's' : ''} previewed${hasMultipleFileTables ? ' • Multiple sheets detected' : ''}` : undefined}
+                                    onRemoveTable={handleRemoveFilePreviewTable}
+                                    activeIndex={filePreviewActiveIndex}
+                                    onActiveIndexChange={setFilePreviewActiveIndex}
+                                />
+                            </Box>
+                        )}
+
+                        {filePreviewTables && filePreviewTables.length > 0 && (
+                            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    onClick={handleFileLoadSingleTable}
+                                    disabled={serverConfig.DISABLE_FILE_UPLOAD || filePreviewLoading}
+                                    sx={{ textTransform: 'none' }}
+                                >
+                                    Load Table
+                                </Button>
+                                {hasMultipleFileTables && (
+                                    <Button
+                                        variant="contained"
+                                        size="small"
+                                        onClick={handleFileLoadAllTables}
+                                        disabled={serverConfig.DISABLE_FILE_UPLOAD || filePreviewLoading}
+                                        sx={{ textTransform: 'none' }}
+                                    >
+                                        Load All Tables
+                                    </Button>
+                                )}
+                            </Box>
+                        )}
+                    </Box>
+                </TabPanel>
+
+                {/* Paste Data Tab */}
+                <TabPanel value={activeTab} index="paste">
+                    <Box sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        boxSizing: 'border-box',
+                        p: 2,
+                        justifyContent: hasPasteContent ? 'flex-start' : 'center',
+                        alignItems: hasPasteContent ? 'stretch' : 'center',
+                    }}>
+                        {isOverSizeLimit && (
+                            <Box sx={{ 
+                                display: 'flex', 
+                                alignItems: 'center', 
+                                mb: 1, 
+                                p: 1, 
+                                backgroundColor: 'rgba(244, 67, 54, 0.1)', 
+                                borderRadius: 1, 
+                                border: '1px solid rgba(244, 67, 54, 0.3)' 
+                            }}>
+                                <Typography variant="caption" sx={{ flex: 1, color: 'error.main', fontWeight: 500 }}>
+                                    ⚠️ Content exceeds {(MAX_CONTENT_SIZE / (1024 * 1024)).toFixed(0)}MB size limit. 
+                                    Current size: {(new Blob([pasteContent]).size / (1024 * 1024)).toFixed(2)}MB. 
+                                    Please use the DATABASE tab for large datasets.
+                                </Typography>
+                            </Box>
+                        )}
+                        
+                        {isLargeContent && !isOverSizeLimit && (
+                            <Box sx={{ 
+                                display: 'flex', 
+                                alignItems: 'center', 
+                                mb: 1, 
+                                p: 1, 
+                                backgroundColor: 'rgba(255, 193, 7, 0.1)', 
+                                borderRadius: 1 
+                            }}>
+                                <Typography variant="caption" sx={{ flex: 1 }}>
+                                    Large content detected ({Math.round(pasteContent.length / 1000)}KB). 
+                                    {showFullContent ? 'Showing full content (may be slow)' : 'Showing preview for performance'}
+                                </Typography>
+                                <Button 
+                                    size="small" 
+                                    variant="outlined" 
+                                    onClick={toggleFullContent}
+                                    sx={{ textTransform: 'none', minWidth: 'auto' }}
+                                >
+                                    {showFullContent ? 'Show Preview' : 'Show Full'}
+                                </Button>
+                            </Box>
+                        )}
+
+                        <Box sx={{ width: '100%', maxWidth: hasPasteContent ? 'none' : 720 }}>
+                            <TextField
+                                autoFocus
+                                multiline
+                                fullWidth
+                                value={displayContent}
+                                onChange={handleContentChange}
+                                placeholder="Paste your data here (CSV, TSV, or JSON format)"
+                                sx={{
+                                    flex: hasPasteContent ? 1 : 'none',
+                                    '& .MuiInputBase-root': {
+                                        height: hasPasteContent ? '100%' : 220,
+                                        alignItems: 'flex-start',
+                                    },
+                                    '& .MuiInputBase-input': {
+                                        fontSize: 12,
+                                        fontFamily: 'monospace',
+                                        height: hasPasteContent ? '100% !important' : 'auto !important',
+                                        overflow: 'auto !important',
+                                    }
+                                }}
+                            />
+                        </Box>
+
+                        <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2, gap: 1 }}>
+                            <Button
+                                variant="contained"
+                                onClick={handlePasteSubmit}
+                                disabled={pasteContent.trim() === '' || isOverSizeLimit}
+                                sx={{ textTransform: 'none' }}
+                            >
+                                Upload Data
+                            </Button>
+                        </Box>
+                    </Box>
+                </TabPanel>
+
+                {/* Database Tab */}
+                <TabPanel value={activeTab} index="database">
+                    {serverConfig.DISABLE_DATABASE ? (
+                        <Box sx={{ textAlign: 'center', py: 4, px: 2 }}>
+                            <Typography color="text.secondary" sx={{ mb: 2 }}>
+                                Database connection is disabled in this environment.
+                            </Typography>
+                            <Typography variant="body2" color="text.secondary">
+                                Install Data Formulator locally to use database features. <br />
+                                <Link 
+                                    href="https://github.com/microsoft/data-formulator" 
+                                    target="_blank" 
+                                    rel="noopener noreferrer"
+                                >
+                                    https://github.com/microsoft/data-formulator
+                                </Link>
+                            </Typography>
+                        </Box>
+                    ) : (
+                        <DBManagerPane />
+                    )}
+                </TabPanel>
+
+                {/* Extract Data Tab */}
+                <TabPanel value={activeTab} index="extract">
+                    <DataLoadingChat />
+                </TabPanel>
+
+                {/* Explore Sample Datasets Tab */}
+                <TabPanel value={activeTab} index="explore">
+                    <Box sx={{ p: 2, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>
+                        <DatasetSelectionView 
+                        datasets={datasetPreviews} 
+                        hideRowNum
+                        handleSelectDataset={(dataset) => {
+                            for (let table of dataset.tables) { 
+                                fetch(table.url)
+                                    .then(res => res.text())
+                                    .then(textData => {
+                                        let tableName = table.url.split("/").pop()?.split(".")[0] || 'table-' + Date.now().toString().substring(0, 8);
+                                        let dictTable;
+                                        if (table.format == "csv") {
+                                            dictTable = createTableFromText(tableName, textData);
+                                        } else if (table.format == "json") {
+                                            dictTable = createTableFromFromObjectArray(tableName, JSON.parse(textData), true);
+                                        } 
+                                        if (dictTable) {
+                                            dispatch(dfActions.loadTable(dictTable));
+                                            dispatch(fetchFieldSemanticType(dictTable));
+                                        }
+                                    });
+                            }
+                            handleClose();
+                        }}
+                        />
+                    </Box>
+                </TabPanel>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default UnifiedDataUploadDialog;
diff --git a/src/views/VisualizationView.tsx b/src/views/VisualizationView.tsx
index 07f9819..fa55183 100644
--- a/src/views/VisualizationView.tsx
+++ b/src/views/VisualizationView.tsx
@@ -553,7 +553,7 @@ export const ChartEditorFC: FC<{}> = function ChartEditorFC({}) {
             setVisTableTotalRowCount(table.virtual?.rowCount || table.rows.length);
             setDataVersion(versionId);
         }
-    }, [dataRequirements])
+    }, [dataRequirements, table.rows])
     
 
 
diff --git a/yarn.lock b/yarn.lock
index f1d9bfb..069c709 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1134,7 +1134,7 @@
   dependencies:
     dompurify "*"
 
-"@types/estree@1.0.8", "@types/estree@^1.0.0", "@types/estree@^1.0.6", "@types/estree@^1.0.8":
+"@types/estree@1.0.8", "@types/estree@^1.0.6", "@types/estree@^1.0.8":
   version "1.0.8"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz"
   integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
@@ -1367,10 +1367,10 @@ allotment@^1.20.4:
     lodash.isequal "^4.5.0"
     use-resize-observer "^9.0.0"
 
-ansi-regex@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
-  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+ansi-regex@^6.0.1:
+  version "6.2.2"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz#60216eea464d864597ce2832000738a0589650c1"
+  integrity sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==
 
 ansi-styles@^3.2.1:
   version "3.2.1"
@@ -1379,13 +1379,18 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+ansi-styles@^4.1.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
     color-convert "^2.0.1"
 
+ansi-styles@^6.2.1:
+  version "6.2.3"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz#c044d5dcc521a076413472597a1acb1f103c4041"
+  integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
+
 archiver-utils@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz"
@@ -1733,14 +1738,14 @@ classnames@^2.3.0:
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
-cliui@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz"
-  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+cliui@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz#6f7890f386f6f1f79953adc1f78dec46fcc2d291"
+  integrity sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==
   dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.1"
-    wrap-ansi "^7.0.0"
+    string-width "^7.2.0"
+    strip-ansi "^7.1.0"
+    wrap-ansi "^9.0.0"
 
 clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
@@ -2320,10 +2325,10 @@ duplexer2@~0.1.4:
   dependencies:
     readable-stream "^2.0.2"
 
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
-  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+emoji-regex@^10.3.0:
+  version "10.6.0"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz#bf3d6e8f7f8fd22a65d9703475bc0147357a6b0d"
+  integrity sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==
 
 emoji-regex@^9.2.2:
   version "9.2.2"
@@ -2824,6 +2829,11 @@ get-caller-file@^2.0.5:
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-east-asian-width@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz#9bc4caa131702b4b61729cb7e42735bc550c9ee6"
+  integrity sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==
+
 get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7, get-intrinsic@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz"
@@ -3147,11 +3157,6 @@ is-finalizationregistry@^1.1.0:
   dependencies:
     call-bound "^1.0.3"
 
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
-  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-
 is-generator-function@^1.0.10:
   version "1.1.2"
   resolved "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz"
@@ -4171,11 +4176,6 @@ regexp.prototype.flags@^1.5.3, regexp.prototype.flags@^1.5.4:
     gopd "^1.2.0"
     set-function-name "^2.0.2"
 
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
-  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
-
 reselect@^4.1.8:
   version "4.1.8"
   resolved "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz"
@@ -4458,14 +4458,14 @@ stop-iteration-iterator@^1.1.0:
     es-errors "^1.3.0"
     internal-slot "^1.1.0"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+string-width@^7.0.0, string-width@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz#b5bb8e2165ce275d4d43476dd2700ad9091db6dc"
+  integrity sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==
   dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
+    emoji-regex "^10.3.0"
+    get-east-asian-width "^1.0.0"
+    strip-ansi "^7.1.0"
 
 string.prototype.includes@^2.0.1:
   version "2.0.1"
@@ -4549,12 +4549,12 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+strip-ansi@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz#132875abde678c7ea8d691533f2e7e22bb744dba"
+  integrity sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==
   dependencies:
-    ansi-regex "^5.0.1"
+    ansi-regex "^6.0.1"
 
 strip-json-comments@^3.1.1:
   version "3.1.1"
@@ -4801,10 +4801,10 @@ uuid@^8.3.0:
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-validator@^13.15.22:
-  version "13.15.22"
-  resolved "https://registry.yarnpkg.com/validator/-/validator-13.15.22.tgz#5f847cf4a799107e5716fc87e5cf2a337a71eb14"
-  integrity sha512-uT/YQjiyLJP7HSrv/dPZqK9L28xf8hsNca01HSz1dfmI0DgMfjopp1rO/z13NeGF1tVystF0Ejx3y4rUKPw+bQ==
+validator@^13.15.20:
+  version "13.15.23"
+  resolved "https://registry.npmjs.org/validator/-/validator-13.15.23.tgz#59a874f84e4594588e3409ab1edbe64e96d0c62d"
+  integrity sha512-4yoz1kEWqUjzi5zsPbAS/903QXSYp0UOtHsPpp7p9rHAw/W+dkInskAE386Fat3oKRROwO98d9ZB0G4cObgUyw==
 
 vega-canvas@^2.0.0:
   version "2.0.0"
@@ -4871,11 +4871,6 @@ vega-event-selector@^4.0.0, vega-event-selector@~4.0.0:
   resolved "https://registry.yarnpkg.com/vega-event-selector/-/vega-event-selector-4.0.0.tgz#425e9f2671e858a1a45b4b6a7fc452ca0b22abbf"
   integrity sha512-CcWF4m4KL/al1Oa5qSzZ5R776q8lRxCj3IafCHs5xipoEHrkgu1BWa7F/IH5HrDNXeIDnqOpSV1pFsAWRak4gQ==
 
-vega-event-selector@~3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/vega-event-selector/-/vega-event-selector-3.0.1.tgz"
-  integrity sha512-K5zd7s5tjr1LiOOkjGpcVls8GsH/f2CWCrWcpKy74gTCp+llCdwz0Enqo013ZlGaRNjfgD/o1caJRt3GSaec4A==
-
 vega-expression@^6.1.0, vega-expression@~6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/vega-expression/-/vega-expression-6.1.0.tgz#6ce358a39b9b953806bff200f6f84f44163c9e38"
@@ -4884,14 +4879,6 @@ vega-expression@^6.1.0, vega-expression@~6.1.0:
     "@types/estree" "^1.0.8"
     vega-util "^2.1.0"
 
-vega-expression@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/vega-expression/-/vega-expression-5.1.2.tgz"
-  integrity sha512-fFeDTh4UtOxlZWL54jf1ZqJHinyerWq/ROiqrQxqLkNJRJ86RmxYTgXwt65UoZ/l4VUv9eAd2qoJeDEf610Umw==
-  dependencies:
-    "@types/estree" "^1.0.0"
-    vega-util "^1.17.3"
-
 vega-force@~5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/vega-force/-/vega-force-5.1.0.tgz#aa7cf8edbe2ae3bada070f343565dfb841e501a9"
@@ -4969,17 +4956,17 @@ vega-label@~2.1.0:
     vega-scenegraph "^5.1.0"
     vega-util "^2.1.0"
 
-vega-lite@^5.5.0:
-  version "5.23.0"
-  resolved "https://registry.npmjs.org/vega-lite/-/vega-lite-5.23.0.tgz"
-  integrity sha512-l4J6+AWE3DIjvovEoHl2LdtCUkfm4zs8Xxx7INwZEAv+XVb6kR6vIN1gt3t2gN2gs/y4DYTs/RPoTeYAuEg6mA==
+vega-lite@6.4.1:
+  version "6.4.1"
+  resolved "https://registry.npmjs.org/vega-lite/-/vega-lite-6.4.1.tgz#549634ecaefd46d00f17e7922577d0c97a4663c5"
+  integrity sha512-KO3ybHNouRK4A0al/+2fN9UqgTEfxrd/ntGLY933Hg5UOYotDVQdshR3zn7OfXwQ7uj0W96Vfa5R+QxO8am3IQ==
   dependencies:
     json-stringify-pretty-compact "~4.0.0"
     tslib "~2.8.1"
-    vega-event-selector "~3.0.1"
-    vega-expression "~5.1.1"
-    vega-util "~1.17.2"
-    yargs "~17.7.2"
+    vega-event-selector "~4.0.0"
+    vega-expression "~6.1.0"
+    vega-util "~2.1.0"
+    yargs "~18.0.0"
 
 vega-loader@^5.1.0, vega-loader@~5.1.0:
   version "5.1.0"
@@ -5130,7 +5117,7 @@ vega-typings@~2.1.0:
     vega-expression "^6.1.0"
     vega-util "^2.1.0"
 
-vega-util@^1.13.1, vega-util@^1.17.2, vega-util@^1.17.3, vega-util@^1.17.4, vega-util@~1.17.2:
+vega-util@^1.13.1, vega-util@^1.17.2, vega-util@^1.17.4:
   version "1.17.4"
   resolved "https://registry.npmjs.org/vega-util/-/vega-util-1.17.4.tgz"
   integrity sha512-+y3ZW7dEqM8Ck+KRsd+jkMfxfE7MrQxUyIpNjkfhIpGEreym+aTn7XUw1DKXqclr8mqTQvbilPo16B3lnBr0wA==
@@ -5332,14 +5319,14 @@ word-wrap@^1.2.5:
   resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+wrap-ansi@^9.0.0:
+  version "9.0.2"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz#956832dea9494306e6d209eb871643bb873d7c98"
+  integrity sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==
   dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
+    ansi-styles "^6.2.1"
+    string-width "^7.0.0"
+    strip-ansi "^7.1.0"
 
 wrappy@1:
   version "1.0.2"
@@ -5361,23 +5348,22 @@ yaml@^1.10.0:
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yargs-parser@^21.1.1:
-  version "21.1.1"
-  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz"
-  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+yargs-parser@^22.0.0:
+  version "22.0.0"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz#87b82094051b0567717346ecd00fd14804b357c8"
+  integrity sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==
 
-yargs@~17.7.2:
-  version "17.7.2"
-  resolved "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz"
-  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+yargs@~18.0.0:
+  version "18.0.0"
+  resolved "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz#6c84259806273a746b09f579087b68a3c2d25bd1"
+  integrity sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==
   dependencies:
-    cliui "^8.0.1"
+    cliui "^9.0.1"
     escalade "^3.1.1"
     get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.3"
+    string-width "^7.2.0"
     y18n "^5.0.5"
-    yargs-parser "^21.1.1"
+    yargs-parser "^22.0.0"
 
 yocto-queue@^0.1.0:
   version "0.1.0"