diff --git a/.vscode/launch.json b/.vscode/launch.json
index 3441cbc..8c05997 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,7 +5,7 @@
             "name": "Flask",
             "type": "debugpy",
             "request": "launch",
-            "program": "${workspaceFolder}/app.py",
+            "program": "${workspaceFolder}/py-src/data_formulator/app.py",
             "args": ["run", "--no-debugger", "--no-reload"],
             "env": {
                 "FLASK_APP": "app.py",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index c8c5f79..80b2117 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -106,7 +106,7 @@ export const ImportStateButton: React.FC<{}> = ({ }) => {
 
     
     return <Tooltip title="load a saved session">
-                <Button variant="text" color="primary" component="label" 
+                <Button variant="text" color="primary" 
                     //endIcon={<InputIcon />}
                 >
                     <Input inputProps={{ accept: '.dfstate', multiple: false  }} id="upload-data-file"
@@ -224,6 +224,9 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
             custom: {
                 main: "rgb(255, 160, 122)", //lightsalmon
             },
+            warning: {
+                main: '#bf5600', // New accessible color, original (#ed6c02) has insufficient color contrast of 3.11
+            },
         },
     });
 
@@ -245,12 +248,12 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
                 aria-label="View Mode"
                 sx={{ marginRight: "8px", height: 32, padding: "4px 0px", marginTop: "2px", "& .MuiToggleButton-root": { padding: "0px 6px" } }}
             >
-                <ToggleButton value="carousel">
+                <ToggleButton value="carousel" aria-label="view list">
                     <Tooltip title="view list">
                         <ViewSidebarIcon fontSize="small" sx={{ transform: "scaleX(-1)" }} />
                     </Tooltip>
                 </ToggleButton>
-                <ToggleButton value="gallery">
+                <ToggleButton value="gallery" aria-label="view grid">
                     <Tooltip title="view grid">
                         <GridViewIcon fontSize="small" />
                     </Tooltip>
diff --git a/src/scss/App.scss b/src/scss/App.scss
index f631f74..40d4dc1 100644
--- a/src/scss/App.scss
+++ b/src/scss/App.scss
@@ -26,7 +26,7 @@ h2.view-title {
     margin: 0;
     line-height: 1.75;
     display: inline-block;
-    color: #777;
+    color: #717171;
     //font-weight: 600;
     //text-transform: uppercase;
     font-size: 14px;
diff --git a/src/scss/DataView.scss b/src/scss/DataView.scss
index 2d1d642..e0ac6a1 100644
--- a/src/scss/DataView.scss
+++ b/src/scss/DataView.scss
@@ -32,7 +32,7 @@
     margin-top: 4px;
     display: inline-block;
     font-size: 18px;
-    color: #777;
+    color: #717171;
 }
 
 .table-container-small {
diff --git a/src/scss/EncodingShelf.scss b/src/scss/EncodingShelf.scss
index c20f32e..d399bff 100644
--- a/src/scss/EncodingShelf.scss
+++ b/src/scss/EncodingShelf.scss
@@ -44,6 +44,10 @@
         flex-direction: column;
         justify-content: center
     }
+
+    .table-list-item {
+        display: flex;
+    }
 }
 
 .auto-sort-option-label {
diff --git a/src/views/ConceptCard.tsx b/src/views/ConceptCard.tsx
index 44b6ab1..3d976f8 100644
--- a/src/views/ConceptCard.tsx
+++ b/src/views/ConceptCard.tsx
@@ -130,7 +130,7 @@ export const ConceptCard: FC<ConceptCardProps> = function ConceptCard({ field })
     
 
 
-    let opacity = isDragging ? 0.3 :(notInFocusedTable ? 0.4 : 1);
+    let opacity = isDragging ? 0.3 :(notInFocusedTable ? 0.65 : 1);
     let fontStyle = "inherit";
     let border = "hidden";
 
@@ -278,7 +278,7 @@ export const ConceptCard: FC<ConceptCardProps> = function ConceptCard({ field })
                 <Typography className="draggable-card-title" sx={{ fontSize: 13, height: 28, width: "100%" }} component={'span'} gutterBottom>
                     {typeIconMenu}
                     {fieldNameEntry}
-                    {field.semanticType ? <Typography sx={{fontSize: "xx-small", marginLeft: "6px", color: 'darkgray', fontStyle: 'italic'}}>-- {field.semanticType}</Typography> : ""}
+                    {field.semanticType ? <Typography sx={{fontSize: "xx-small", marginLeft: "6px", fontStyle: 'italic'}}>-- {field.semanticType}</Typography> : ""}
                     {/* {field.source == "custom" ? exampleToComponent(field.domain.values, 3) : ""} */}
                 </Typography>
                 <Box className='draggable-card-action-button' sx={{ position: "absolute", right: 1, background: 'rgba(255, 255, 255, 0.95)' }}>{cardHeaderOptions}</Box>
diff --git a/src/views/ConceptShelf.tsx b/src/views/ConceptShelf.tsx
index 1cbf35d..490edcc 100644
--- a/src/views/ConceptShelf.tsx
+++ b/src/views/ConceptShelf.tsx
@@ -129,7 +129,7 @@ export const ConceptShelf: FC<ConceptShelfProps> = function ConceptShelf() {
                 <Box className="data-fields-list">
                     <Box sx={{display: "block", width: "100%"}}>
                         <Divider orientation="horizontal" textAlign="left">
-                            <Typography component="h2" sx={{fontSize: "10px"}} color="darkgray">
+                            <Typography component="h2" sx={{fontSize: "10px"}} color="text.secondary">
                                 field operators
                             </Typography>
                         </Divider>
@@ -143,7 +143,7 @@ export const ConceptShelf: FC<ConceptShelfProps> = function ConceptShelf() {
                     </Box>
                     {groupNames.map(gp => [
                         <Box sx={{display: "block", width: "100%"}}>
-                            <Divider orientation="horizontal" textAlign="left"><Typography component="h2" sx={{fontSize: "10px"}} color="darkgray">
+                            <Divider orientation="horizontal" textAlign="left"><Typography component="h2" sx={{fontSize: "10px"}} color="text.secondary">
                                 {gp}
                             </Typography></Divider>
                         </Box>,
diff --git a/src/views/DataThread.tsx b/src/views/DataThread.tsx
index 8a98248..1f004d4 100644
--- a/src/views/DataThread.tsx
+++ b/src/views/DataThread.tsx
@@ -5,29 +5,18 @@ import React, { FC, useEffect, useRef, useState } from 'react';
 
 import {
     Box,
-    Button,
     Divider,
     Typography,
     LinearProgress,
-    ListItem,
     Stack,
     ListItemIcon,
-    List,
     Card,
     IconButton,
     Tooltip,
     ButtonGroup,
     useTheme,
-    Drawer,
-    ListItemButton,
-    ListItemText,
-    Collapse,
-    Grow,
-    alpha,
 } from '@mui/material';
 
-import embed from 'vega-embed';
-import AnimateOnChange from 'react-animate-on-change'
 import { VegaLite } from 'react-vega'
 
 
@@ -128,11 +117,11 @@ let SingleThreadView: FC<{
             let currentActiveFields = new Set(extractActiveFields(trigger))
             let fieldsIdentical = _.isEqual(previousActiveFields, currentActiveFields)
 
-            let triggerCard = <ListItem key={'thread-card-trigger-box'} sx={{padding: '0'}}>
+            let triggerCard = <div key={'thread-card-trigger-box'}>
                 <Box sx={{flex: 1}} /*sx={{ width: 'calc(100% - 8px)', marginLeft: 1, borderLeft: '1px dashed darkgray' }}*/ >
                     <TriggerCard className={selectedClassName} trigger={trigger} hideFields={fieldsIdentical} />   
                 </Box>
-            </ListItem>;
+            </div>;
 
             return <Box sx={{display: 'flex', flexDirection: 'column'}} key={`trigger-card-${trigger.chartRef}`}>
                 {triggerCard}
@@ -165,7 +154,7 @@ let SingleThreadView: FC<{
         // only charts without dependency can be deleted
         let tableDeleteEnabled = table?.derive && !tables.some(t => t.derive?.trigger.tableId == tableId);
             
-        let colloapsedTableBox = <ListItem sx={{padding: 0}}>
+        let colloapsedTableBox = <div style={{padding: 0}}>
             <Box sx={{textTransform: 'none', padding: 0, minWidth: 0, color: 'gray'}} >
                 <Stack direction="row" sx={{fontSize: '12px', fontWeight: tableId == focusedTableId ? 'bold' : 'normal'}} alignItems="center" gap={"2px"}>
                     <TableRowsIcon fontSize="inherit"  sx={{fontWeight: 'inherit'}}/>
@@ -174,9 +163,9 @@ let SingleThreadView: FC<{
                     </Typography>
                 </Stack>
             </Box>
-        </ListItem>;
+        </div>;
 
-        let regularTableBox = <ListItem ref={relevantCharts.some(c => c.chartId == focusedChartId) ? scrollRef : null} sx={{padding: '0px'}}>
+        let regularTableBox = <div ref={relevantCharts.some(c => c.chartId == focusedChartId) ? scrollRef : null} style={{padding: '0px'}}>
             <Card className={`data-thread-card ${selectedClassName}`} variant="outlined" 
                     sx={{ width: '100%', background: 'aliceblue' }} 
                     onClick={() => { 
@@ -222,14 +211,14 @@ let SingleThreadView: FC<{
                     </ButtonGroup>
                 </Box>
             </Card>
-        </ListItem>
+        </div>
 
         let chartElementProps = collapsed ? {display: 'flex', flexWrap: 'wrap'} : {}
 
         return [
             regularTableBox,
             <Box sx={{display: 'flex', flexDirection: 'row'}}>
-                <Button sx={{minWidth: '1px', padding: '0px', width: '17px',  flex: 'none', display: 'flex'
+                <div style={{minWidth: '1px', padding: '0px', width: '17px',  flex: 'none', display: 'flex'
                             //borderLeft: '1px dashed darkgray',
                             }}>
                     <Box sx={{padding:0, width: '1px', margin:'auto', height: '100%',
@@ -238,7 +227,7 @@ let SingleThreadView: FC<{
                                 backgroundImage: 'linear-gradient(180deg, darkgray, darkgray 75%, transparent 75%, transparent 100%)',
                                 backgroundSize: '1px 6px, 3px 100%'
                             }}></Box>
-                </Button>
+                </div>
                 <Box sx={{flex: 1, padding: '8px 0px', minHeight: '8px', ...chartElementProps}}>
                     {releventChartElements}
                 </Box>
@@ -281,14 +270,14 @@ let SingleThreadView: FC<{
                 "& .MuiDivider-wrapper": { display: 'flex', flexDirection: 'row' },
                 "&::before, &::after": {  borderColor: 'darkgray',  borderWidth: '2px', width: 50 },
             }}>
-                <Typography sx={{fontSize: "10px", fontWeight: 'bold', color:'rgba(100, 100, 100, 0.8)', textTransform: 'none'}}>
+                <Typography sx={{fontSize: "10px", fontWeight: 'bold', color:'text.secondary', textTransform: 'none'}}>
                     {`thread - ${threadIdx + 1}`}
                 </Typography>
             </Divider>
         </Box>
-        <List sx={{padding: '2px 4px 2px 4px', marginTop: 0, marginBottom: '8px', direction: 'ltr'}}>
+        <div style={{padding: '2px 4px 2px 4px', marginTop: 0, marginBottom: '8px', direction: 'ltr'}}>
             {content}
-        </List>
+        </div>
     </Box>    
 }
 
@@ -480,9 +469,11 @@ export const DataThread: FC<{}> = function ({ }) {
                 <Typography className="view-title" component="h2" sx={{marginTop: "6px"}}>
                     Data Threads
                 </Typography>
-                <IconButton size={'small'} color="primary" disabled={leafTables.length <= 1} onClick={() => { setThreadDrawerOpen(!threadDrawerOpen); }}>
-                    {drawerOpen ? <ChevronLeftIcon /> : <ChevronRightIcon />}
-                </IconButton>
+                <Tooltip title={drawerOpen ? "collapse" : "expand"}>
+                    <IconButton size={'small'} color="primary" disabled={leafTables.length <= 1} onClick={() => { setThreadDrawerOpen(!threadDrawerOpen); }}>
+                        {drawerOpen ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+                    </IconButton>
+                </Tooltip>
             </Box>
             <Box sx={{transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', overflow: 'auto', 
                       direction: 'rtl', display: 'flex', flex: 1}}  
diff --git a/src/views/DataView.tsx b/src/views/DataView.tsx
index a47707c..cd5095d 100644
--- a/src/views/DataView.tsx
+++ b/src/views/DataView.tsx
@@ -84,7 +84,7 @@ export const FreeDataViewFC: FC<FreeDataViewProps> = function DataView({  $table
         if (colDefs) {
             colDefs = [{
                 id: "#rowId", label: "#", minWidth: 10, align: undefined, width: 40,
-                format: (value: any) => <Typography fontSize="inherit" color="rgba(0,0,0,0.5)">{value}</Typography>, 
+                format: (value: any) => <Typography fontSize="inherit" color="rgba(0,0,0,0.65)">{value}</Typography>, 
                 dataType: Type.Number,
                 source: "original", 
             }, ...colDefs]
@@ -110,7 +110,7 @@ export const FreeDataViewFC: FC<FreeDataViewProps> = function DataView({  $table
 
     let genTableLink =  (t: DictTable) => 
         <Link underline="hover" key={t.id} sx={{cursor: "pointer"}} 
-            color="primary" onClick={()=>{ dispatch(dfActions.setFocusedTable(t.id)) }}>
+            color="#1770c7" onClick={()=>{ dispatch(dfActions.setFocusedTable(t.id)) }}>
             <Typography sx={{fontWeight: t.id == focusedTableId? "bold" : "inherit", fontSize: 'inherit'}} component='span'>{t.id}</Typography>
         </Link>;
 
diff --git a/src/views/EncodingBox.tsx b/src/views/EncodingBox.tsx
index 0d944c8..ecd40d0 100644
--- a/src/views/EncodingBox.tsx
+++ b/src/views/EncodingBox.tsx
@@ -594,14 +594,14 @@ export const EncodingBox: FC<EncodingBoxProps> = function EncodingBox({ channel,
         }}
         freeSolo
         renderInput={(params) => (
-            <TextField {...params} variant="standard" autoComplete='off' 
+            <TextField {...params} variant="standard" autoComplete='off' placeholder='field or concept'
                 sx={{height: "24px", "& .MuiInput-root": {height: "24px", fontSize: "small"}}} />
         )}
     />
 
     const filter = createFilterOptions<string>();
     // when there is no field added, allow users to directly type concepts here, and it will be created on the fly.
-    let encContent = field == undefined ? 
+    const encContent = field == undefined ? 
         (encoding.aggregate == 'count' ? [ aggregateDisplay ] : [
             normalizedDisplay,
             aggregateDisplay,
diff --git a/src/views/EncodingShelfCard.tsx b/src/views/EncodingShelfCard.tsx
index 935a19e..9e8691a 100644
--- a/src/views/EncodingShelfCard.tsx
+++ b/src/views/EncodingShelfCard.tsx
@@ -208,7 +208,7 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
         .map(([group, channelList]) => {
 
             let component = <Box>
-                <Typography key={`encoding-group-${group}`} sx={{ fontSize: 10, color: "darkgray", marginTop: "6px", marginBottom: "2px" }}>{group}</Typography>
+                <Typography key={`encoding-group-${group}`} sx={{ fontSize: 10, color: "text.secondary", marginTop: "6px", marginBottom: "2px" }}>{group}</Typography>
                 {channelList.filter(channel => Object.keys(encodingMap).includes(channel))
                     .map(channel => <EncodingBox key={`shelf-${channel}`} channel={channel as Channel} chartId={chartId} />)}
             </Box>
@@ -538,30 +538,36 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
         <Box sx={{ width: "100%", minWidth: "210px", height: '100%', display: "flex", flexDirection: "column" }}>
             <Box key='mark-selector-box' sx={{ flex: '0 0 auto' }}>
                 <FormControl sx={{ m: 1, minWidth: 120, width: "100%", margin: "0px 0"}} size="small">
+                    <InputLabel 
+                        id="chart-mark-select-label"
+                        sx={{
+                            color: "text.secondary",
+                            transform: "none",
+                            fontSize: "10px",
+                            margin: "-2px 0px 0px 4px",
+                        }}
+                    >Chart Type</InputLabel>
                     <Select
                         variant="standard"
                         labelId="chart-mark-select-label"
                         id="chart-mark-select"
                         value={chart.chartType}
-                        label="Visualization Type"
+                        title="Chart Type"
                         renderValue={(value: string) => {
                             const t = getChartTemplate(value);
                             return (
-                                <Box>
-                                    {/* <InputLabel shrink id="chart-mark-select-label">Visualization Type</InputLabel> */}
-                                    <MenuItem sx={{padding: "0px 0px 0px 4px"}}>
-                                        <ListItemIcon sx={{minWidth: "24px"}}>
-                                            {typeof t?.icon == 'string' ? <img height="24px" width="24px" src={t?.icon} alt="" role="presentation" /> : t?.icon}
-                                            </ListItemIcon>
-                                        <ListItemText sx={{marginLeft: "2px", whiteSpace: "initial"}} primaryTypographyProps={{fontSize: '12px'}}>{t?.chart}</ListItemText>
-                                    </MenuItem>
-                                </Box>
+                                <div style={{display: 'flex', padding: "0px 0px 0px 4px"}}>
+                                    <ListItemIcon sx={{minWidth: "24px"}}>
+                                        {typeof t?.icon == 'string' ? <img height="24px" width="24px" src={t?.icon} alt="" role="presentation" /> : t?.icon}
+                                        </ListItemIcon>
+                                    <ListItemText sx={{marginLeft: "2px", whiteSpace: "initial"}} primaryTypographyProps={{fontSize: '12px'}}>{t?.chart}</ListItemText>
+                                </div>
                             )
                         }}
                         onChange={(event) => { handleUpdateChartType(event.target.value) }}>
                         {Object.entries(CHART_TEMPLATES).map(([group, templates]) => {
                             return [
-                                <ListSubheader sx={{ color: "darkgray", lineHeight: 2, fontSize: 12 }} key={group}>{group}</ListSubheader>,
+                                <ListSubheader sx={{ color: "text.secondary", lineHeight: 2, fontSize: 12 }} key={group}>{group}</ListSubheader>,
                                 ...templates.map((t, i) => (
                                     <MenuItem sx={{ fontSize: 12, paddingLeft: 3, paddingRight: 3 }} value={t.chart} key={`${group}-${i}`}>
                                         <ListItemIcon>
diff --git a/src/views/EncodingShelfThread.tsx b/src/views/EncodingShelfThread.tsx
index 4f714ed..358ecbc 100644
--- a/src/views/EncodingShelfThread.tsx
+++ b/src/views/EncodingShelfThread.tsx
@@ -13,7 +13,6 @@ import {
     IconButton,
     Tooltip,
     Collapse,
-    ListItem,
     Stack,
     Card,
 } from '@mui/material';
@@ -197,7 +196,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
 
     const dispatch = useDispatch<AppDispatch>();
 
-    const w: any = (a: any[], b: any[], spaceElement?: any) => a.length ? [a[0], spaceElement || '',...w(b, a.slice(1), spaceElement)] : b;
+    const interleaveArrays: any = (a: any[], b: any[], spaceElement?: any) => a.length ? [a[0], spaceElement || '',...interleaveArrays(b, a.slice(1), spaceElement)] : b;
 
     let previousInstructions : any = ""
 
@@ -405,7 +404,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
     }
 
     //let triggers = currentTable.derive.triggers;
-    let tableList = activeTableThread.map((tableId) => <ListItem sx={{padding: 0}}>
+    let tableList = activeTableThread.map((tableId) => <div className="table-list-item">
         <Button variant="text" sx={{textTransform: 'none', padding: 0, minWidth: 0}} onClick={() => { dispatch(dfActions.setFocusedTable(tableId)) }}>
             <Stack direction="row" sx={{fontSize: '12px'}} alignItems="center" gap={"2px"}>
                 <TableRowsIcon fontSize="inherit" />
@@ -414,7 +413,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
                 </Typography>
             </Stack>
         </Button>
-    </ListItem>);
+    </div>);
 
     let tableCards = activeTableThread.map((tableId) => 
         <Card variant='outlined' sx={{padding: '2px 0 2px 0'}}>
@@ -455,9 +454,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
                     </Box>
                     <TriggerCard className="encoding-shelf-trigger-card" trigger={trigger} hideFields={fieldsIdentical} />
                     {i == triggers.length - 1 && chart.intermediate == undefined ? 
-                        <Tooltip title={<Typography sx={{fontSize: 11}}>
-                                            reformulate: override <TableRowsIcon sx={{fontSize: 10, marginBottom: '-1px'}}/>{chart.tableRef}
-                                        </Typography>}>
+                        <Tooltip title={`reformulate: override ${chart.tableRef}`}>
                             <IconButton color="warning" size="small"
                                 onClick={() => {
                                     reFormulate(triggers[triggers.length - 1]);
@@ -478,7 +475,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
     previousInstructions = 
         <Collapse orientation="vertical" in={true} sx={{width: "100%" }}>
             <Box  sx={{padding: '4px 0px', display: 'flex', flexDirection: "column" }}>
-                {w(tableCardsSublist, instructionCardsSublist, spaceElement)}
+                {interleaveArrays(tableCardsSublist, instructionCardsSublist, spaceElement)}
                 {/* {w(tableList.slice(0, tableList.length - 1), instructionList.slice(0, instructionList.length - 1))}  */}
                 {/* <Button sx={{minWidth: '24px'}}><RestartAlt /></Button> */}
             </Box>
@@ -504,7 +501,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
         let postInstructEndPoint = activeTableThread.findIndex(s => s == activeThreadChart.tableRef);
         postInstruction = <Collapse orientation="vertical" in={true} sx={{width: "100%"}}>
                 <Box  sx={{padding: '4px 0px', display: 'flex', flexDirection: "column" }}>
-                    {w([<Box sx={{width: '17px', height: '12px'}}>
+                    {interleaveArrays([<Box sx={{width: '17px', height: '12px'}}>
                             <Box sx={{padding:0, width: '1px', margin:'auto', height: '100%',
                                                     backgroundImage: 'linear-gradient(180deg, darkgray, darkgray 75%, transparent 75%, transparent 100%)',
                                                     backgroundSize: '1px 6px, 3px 100%'}}></Box>
diff --git a/src/views/ModelSelectionDialog.tsx b/src/views/ModelSelectionDialog.tsx
index 286ecd1..67a726f 100644
--- a/src/views/ModelSelectionDialog.tsx
+++ b/src/views/ModelSelectionDialog.tsx
@@ -118,11 +118,12 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
         onClick={() => {setTempSelectedMode(undefined)}}
     >
         <TableCell align="right">
-            <Radio checked={tempSelectedModel == undefined} name="radio-buttons" />
+            <Radio checked={tempSelectedModel == undefined} name="radio-buttons" inputProps={{'aria-label': 'Select this model'}}/>
         </TableCell>
         <TableCell align="left">
             <FormControl sx={{width: 100 }} size="small">
                 <Select
+                    title='key type'
                     value={newKeyType}
                     input={<OutlinedInput sx={{fontSize: '0.875rem'}}/>}
                     onChange={(event: SelectChangeEvent) => {
@@ -135,7 +136,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
             </FormControl>
         </TableCell>
         <TableCell component="th" scope="row">
-            {newKeyType == "openai" ? <Typography sx={{color: "lightgray"}} fontSize='inherit'>N/A</Typography> : <TextField size="small" type="text" fullWidth
+            {newKeyType == "openai" ? <Typography sx={{color: "text.secondary"}} fontSize='inherit'>N/A</Typography> : <TextField size="small" type="text" fullWidth
                 disabled={newKeyType == "openai"}
                 InputProps={{ style: { fontSize: "0.875rem" } }}
                 value={newEndpoint}  onChange={(event: any) => { setNewEndpoint(event.target.value); }} 
@@ -163,6 +164,10 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                         //label={modelExists ? "endpoint and model exists" : ""}
                         {...params}
                         InputProps={{ ...params.InputProps, style: { fontSize: "0.875rem" } }}
+                        inputProps={{
+                            ...params.inputProps, // Spread params.inputProps to preserve existing functionality
+                            'aria-label': 'Select or enter a model', // Apply aria-label directly to inputProps
+                        }}
                         size="small"
                         onChange={(event: any) => { setNewModel(event.target.value); }}
                     />
@@ -234,21 +239,19 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                     
                     let message = status == "unknown" ? "Status unknown, click the status icon to test again." : 
                         (testedModels.find(m => m.model === oaiModel.model && m.endpoint === oaiModel.endpoint)?.message || "Unknown error");
-                    const borderStyle = ['error', 'unknown'].includes(status) ? '1px dashed lightgray' : undefined;
+                    const borderStyle = ['error', 'unknown'].includes(status) ? '1px dashed text.secondary' : undefined;
                     const noBorderStyle = ['error', 'unknown'].includes(status) ? 'none' : undefined;
 
                     return (
                         <>
                         <TableRow
-                            role="checkbox"
-                            aria-checked={isItemSelected}
                             selected={isItemSelected}
                             key={`${oaiModel.endpoint}-${oaiModel.model}`}
                             onClick={() => { setTempSelectedMode({model: oaiModel.model, endpoint: oaiModel.endpoint}) }}
                             sx={{ cursor: 'pointer'}}
                         >
                             <TableCell align="right" sx={{ borderBottom: noBorderStyle }}>
-                                <Radio checked={isItemSelected} name="radio-buttons" />
+                                <Radio checked={isItemSelected} name="radio-buttons" inputProps={{'aria-label': 'Select this model'}} />
                             </TableCell>
                             <TableCell align="left" sx={{ borderBottom: noBorderStyle }}>
                                 {oaiModel.endpoint == 'openai' ? 'openai' : 'azure openai'}
@@ -258,37 +261,41 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                             </TableCell>
                             <TableCell align="left" sx={{ borderBottom: borderStyle }}>
                                 {oaiModel.key != "" ? 
-                                    (showKeys ? (oaiModel.key || <Typography sx={{color: "lightgray"}} fontSize='inherit'>N/A</Typography>) : "************") :
-                                    <Typography sx={{color: "lightgray"}} fontSize='inherit'>N/A</Typography> 
+                                    (showKeys ? (oaiModel.key || <Typography sx={{color: "text.secondary"}} fontSize='inherit'>N/A</Typography>) : "************") :
+                                    <Typography sx={{color: "text.secondary"}} fontSize='inherit'>N/A</Typography> 
                                 }
                             </TableCell>
                             <TableCell align="left" sx={{ borderBottom: borderStyle }}>{oaiModel.model}</TableCell>
                             <TableCell sx={{fontWeight: 'bold', borderBottom: borderStyle}} align="right">
-                                <IconButton
-                                    onClick ={() => { testModel(oaiModel.endpoint, oaiModel.key, oaiModel.model)  }}
-                                >
-                                    {statusIcon}
-                                </IconButton>
+                                <Tooltip title={message}>
+                                    <IconButton
+                                        onClick ={() => { testModel(oaiModel.endpoint, oaiModel.key, oaiModel.model)  }}
+                                    >
+                                        {statusIcon}
+                                    </IconButton>
+                                </Tooltip>
                             </TableCell>
                             <TableCell sx={{ borderBottom: borderStyle }} align="right">
-                                <IconButton disabled={oaiModel.endpoint=="default"} 
-                                    onClick={()=>{
-                                        dispatch(dfActions.removeModel({model: oaiModel.model, endpoint: oaiModel.endpoint}));
-                                        if ((tempSelectedModel) 
-                                                && tempSelectedModel.endpoint == oaiModel.endpoint 
-                                                && tempSelectedModel.model == oaiModel.model) {
-                                            if (oaiModels.length == 0) {
-                                                setTempSelectedMode(undefined);
-                                            } else {
-                                                let chosenModel = oaiModels[oaiModels.length - 1];
-                                                setTempSelectedMode({
-                                                    model: chosenModel.model, endpoint: chosenModel.endpoint
-                                                })
+                                <Tooltip title="remove model">
+                                    <IconButton disabled={oaiModel.endpoint=="default"} 
+                                        onClick={()=>{
+                                            dispatch(dfActions.removeModel({model: oaiModel.model, endpoint: oaiModel.endpoint}));
+                                            if ((tempSelectedModel) 
+                                                    && tempSelectedModel.endpoint == oaiModel.endpoint 
+                                                    && tempSelectedModel.model == oaiModel.model) {
+                                                if (oaiModels.length == 0) {
+                                                    setTempSelectedMode(undefined);
+                                                } else {
+                                                    let chosenModel = oaiModels[oaiModels.length - 1];
+                                                    setTempSelectedMode({
+                                                        model: chosenModel.model, endpoint: chosenModel.endpoint
+                                                    })
+                                                }
                                             }
-                                        }
-                                    }}>
-                                    <ClearIcon/>
-                                </IconButton>
+                                        }}>
+                                        <ClearIcon/>
+                                    </IconButton>
+                                </Tooltip>
                             </TableCell>
                         </TableRow>
                         {['error', 'unknown'].includes(status) && (
@@ -304,7 +311,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                             >
                                 <TableCell colSpan={2} align="right" ></TableCell>
                                 <TableCell colSpan={5}>
-                                    <Typography variant="caption" color="error">
+                                    <Typography variant="caption" color="#c82c2c">
                                         {message}
                                     </Typography>
                                 </TableCell>
@@ -320,7 +327,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
 
     return <>
         <Tooltip title="select model">
-            <Button sx={{fontSize: "inherit"}} variant="text" color="primary" component="label" onClick={()=>{setModelDialogOpen(true)}} endIcon={selectedModel ? <SettingsIcon /> : ''}>
+            <Button sx={{fontSize: "inherit"}} variant="text" color="primary" onClick={()=>{setModelDialogOpen(true)}} endIcon={selectedModel ? <SettingsIcon /> : ''}>
                 {selectedModel ? `Model: ${(selectedModel as any).model}` : 'Select A Model'}
             </Button>
         </Tooltip>
diff --git a/src/views/ReactTable.tsx b/src/views/ReactTable.tsx
index 3fc286e..3cb92e0 100644
--- a/src/views/ReactTable.tsx
+++ b/src/views/ReactTable.tsx
@@ -87,7 +87,7 @@ export const CustomReactTable: React.FC<CustomReactTableProps> = ({ rows, column
                         {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                             .map((row, i) => {
                                 return (
-                                    <TableRow hover role="checkbox" tabIndex={-1} key={i} sx={{ background: i % 2 == 0 ? '#F0F0F0' : "none" }}>
+                                    <TableRow hover tabIndex={-1} key={i} sx={{ background: i % 2 == 0 ? '#F0F0F0' : "none" }}>
                                         {columnDefs.map((column, j) => {
                                             const value = row[column.id];
                                             let backgroundColor = "none";
diff --git a/src/views/SelectableDataGrid.tsx b/src/views/SelectableDataGrid.tsx
index 375e437..89c2640 100644
--- a/src/views/SelectableDataGrid.tsx
+++ b/src/views/SelectableDataGrid.tsx
@@ -275,6 +275,7 @@ export const SelectableDataGrid: React.FC<SelectableDataGridProps> = ({ rows, ta
                 </IconButton>
             </Tooltip> */}
             
+            <Tooltip title="Infer Data Type">
             <IconButton size="small" color="primary"
                 onClick={() => {
                         console.log(`[fyi] just sent request to process load data`);
@@ -312,7 +313,7 @@ export const SelectableDataGrid: React.FC<SelectableDataGridProps> = ({ rows, ta
                             });
                     }
                 }
-            ><AutoFixNormalIcon /></IconButton>
+            ><AutoFixNormalIcon /></IconButton></Tooltip>
             <Divider flexItem  orientation="vertical" sx={{marginRight: 1}}/>
         </Box>
 
@@ -394,9 +395,11 @@ export const SelectableDataGrid: React.FC<SelectableDataGridProps> = ({ rows, ta
                                                     }}
                                                 >
                                                     <Box component="span" className="data-view-header-title">
-                                                        <IconButton size="small" sx={{ fontSize: "inherit", padding: "2px" }} component="span">
-                                                            {getIconFromType(columnDef.dataType)}
-                                                        </IconButton>
+                                                        <Tooltip title={`${columnDef.dataType} type`} >
+                                                            <span role="img" style={{ fontSize: "inherit", padding: "2px", display: "inline-flex", alignItems: "center" }}>
+                                                                {getIconFromType(columnDef.dataType)}
+                                                            </span>
+                                                        </Tooltip>
                                                         <Typography className="data-view-header-name">{columnDef.label}</Typography>
                                                     </Box>
                                                 </TableSortLabel>
@@ -433,21 +436,23 @@ export const SelectableDataGrid: React.FC<SelectableDataGridProps> = ({ rows, ta
             <Paper className="table-footer-container"
                 sx={{ borderTop: '1px solid', borderColor: 'rgba(0, 0, 0, 0.12)', padding: '6px', 
                       display: 'flex', flexDirection: 'row',  position: 'absolute', bottom: 0, right: 15 }}>
-                <ToggleButton
-                    color="primary"
-                    size="small"
-                    value="check"
-                    sx={{ margin: "0px 6px 0px 0px", padding: "0px 2px", border: 'none', color: theme.palette.primary.main }}
-                    selected={footerActionExpand}
-                    onChange={() => {
-                        if (footerActionExpand) {
-                            setSearchText("");
-                        }
-                        setFooterActionExpand(!footerActionExpand);
-                    }}
-                    >
-                    {footerActionExpand ? <ChevronLeftIcon sx={{transform: footerActionExpand ? 'rotate(180deg)' : 'rotate(0)'}} /> : <Tooltip title="Table options"><ChevronLeftIcon /></Tooltip> }
-                </ToggleButton>
+                <Tooltip title="Table options">
+                    <ToggleButton
+                        color="primary"
+                        size="small"
+                        value="check"
+                        sx={{ margin: "0px 6px 0px 0px", padding: "0px 2px", border: 'none', color: theme.palette.primary.main }}
+                        selected={footerActionExpand}
+                        onChange={() => {
+                            if (footerActionExpand) {
+                                setSearchText("");
+                            }
+                            setFooterActionExpand(!footerActionExpand);
+                        }}
+                        >
+                        {footerActionExpand ? <ChevronLeftIcon sx={{transform: footerActionExpand ? 'rotate(180deg)' : 'rotate(0)'}} /> : <ChevronLeftIcon /> }
+                    </ToggleButton>
+                </Tooltip>
                 {/* <Button variant="text" sx={{padding: '0px 4px', margin:'0px 2px', minWidth: 0}} size="small" 
                         onClick={() => { setFooterActionExpand(!footerActionExpand) }}>{"<"}</Button> */}
                 <Collapse orientation="horizontal"  in={footerActionExpand}>
diff --git a/src/views/TableSelectionView.tsx b/src/views/TableSelectionView.tsx
index da2d5d1..7e05b1e 100644
--- a/src/views/TableSelectionView.tsx
+++ b/src/views/TableSelectionView.tsx
@@ -139,7 +139,7 @@ export const TableSelectionView: React.FC<TableSelectionViewProps> = function Ta
             return  <TabPanel value={value} index={i} >
                         {content}
                         <Box width="100%" sx={{display: "flex"}}>
-                            <Typography sx={{fontSize: 10, color: "gray"}}>{Object.keys(t.rows[0]).length} columns{hideRowNum ? "" : ` ⨉ ${t.rows.length} rows`}</Typography>
+                            <Typography sx={{fontSize: 10, color: "text.secondary"}}>{Object.keys(t.rows[0]).length} columns{hideRowNum ? "" : ` ⨉ ${t.rows.length} rows`}</Typography>
                             <Box sx={{marginLeft: "auto"}} >
                                 {handleDeleteTable == undefined ? "" : 
                                     <IconButton size="small" color="primary" sx={{marginRight: "12px"}}
@@ -186,7 +186,7 @@ export const TableSelectionDialog: React.FC<{ buttonElement: any }> = function T
     let dispatch = useDispatch<AppDispatch>();
 
     return <>
-        <Button sx={{fontSize: "inherit"}} component="label" onClick={() => {
+        <Button sx={{fontSize: "inherit"}} onClick={() => {
             setTableDialogOpen(true);
         }}>
             {buttonElement}
@@ -274,7 +274,7 @@ export const TableUploadDialog: React.FC<TableUploadDialogProps> = ({ buttonElem
         }
     };
 
-    return <Button sx={{fontSize: "inherit"}} variant="text" color="primary" component="label" 
+    return <Button sx={{fontSize: "inherit"}} variant="text" color="primary" 
                    disabled={disabled}>
                 <Input inputProps={{ accept: '.csv,.tsv,.json', multiple: true  }} id="upload-data-file"
                     type="file"  sx={{ display: 'none' }} aria-hidden={true} 
@@ -346,7 +346,7 @@ export const TableCopyDialog: React.FC<TableCopyDialogProps> = ({ buttonElement,
         </Dialog>;
 
     return <>
-        <Button sx={{fontSize: "inherit"}} variant="text" color="primary" component="label" 
+        <Button sx={{fontSize: "inherit"}} variant="text" color="primary" 
                     disabled={disabled} onClick={()=>{setDialogOpen(true)}}>
                 {buttonElement}
         </Button>
@@ -425,7 +425,7 @@ export const TableURLDialog: React.FC<TableURLDialogProps> = ({ buttonElement, d
         </Dialog>;
 
     return <>
-        <Button sx={{fontSize: "inherit"}} variant="text" color="primary" component="label" 
+        <Button sx={{fontSize: "inherit"}} variant="text" color="primary" 
                     disabled={disabled} onClick={()=>{setDialogOpen(true)}}>
                 {buttonElement}
         </Button>
@@ -745,7 +745,7 @@ export const TableCopyDialogV2: React.FC<TableCopyDialogProps> = ({ buttonElemen
         </Dialog>;
 
     return <>
-        <Button sx={{fontSize: "inherit"}} variant="text" color="primary" component="label" 
+        <Button sx={{fontSize: "inherit"}} variant="text" color="primary" 
                     disabled={disabled} onClick={()=>{setDialogOpen(true)}}>
                 {buttonElement}
         </Button>
diff --git a/src/views/VisualizationView.tsx b/src/views/VisualizationView.tsx
index a0c99e0..4f6c1ec 100644
--- a/src/views/VisualizationView.tsx
+++ b/src/views/VisualizationView.tsx
@@ -383,6 +383,7 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
                 </Tooltip>
             </IconButton>
         ) : (
+            <Tooltip title="save a copy">
             <IconButton color="primary" key="unsave-btn" size="small" sx={{ textTransform: "none" }}
                 disabled={chartUnavailable}
                 onClick={() => {
@@ -392,13 +393,13 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
                     // });
                     dispatch(dfActions.saveUnsaveChart(focusedChart.id));
                 }}>
-                <Tooltip title="save a copy">
                     <StarBorderIcon  />
-                </Tooltip>
-            </IconButton>
+                </IconButton>
+            </Tooltip>
         );
 
-    let duplicateButton = <IconButton color="primary" key="duplicate-btn" size="small" sx={{ textTransform: "none" }}
+    let duplicateButton = <Tooltip title="duplicate the chart">
+        <IconButton color="primary" key="duplicate-btn" size="small" sx={{ textTransform: "none" }}
         disabled={focusedChart.intermediate != undefined}
         onClick={() => {
             // trackEvent('save-chart', { 
@@ -407,10 +408,10 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
             // });
             dispatch(dfActions.duplicateChart(focusedChart.id));
         }}>
-        <Tooltip title="duplicate the chart">
+        
             <ContentCopyIcon  />
-        </Tooltip>
-    </IconButton>
+        </IconButton>
+    </Tooltip>
 
     let createNewChartButton =  <ChartCreationMenu tableId={focusedChart.tableRef} buttonElement={
             <Tooltip title="create a new chart">
@@ -680,18 +681,24 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
     let [scaleMin, scaleMax] = [0.2, 2.4]
 
     let chartResizer = <Stack spacing={1} direction="row" sx={{ padding: '8px', width: 160, position: "absolute", zIndex: 10, color: 'darkgray' }} alignItems="center">
-        <IconButton color="primary" size='small' disabled={scaleFactor <= scaleMin} onClick={()=>{
-            dispatch(dfActions.updateChartScaleFactor({chartId: focusedChart.id, scaleFactor: scaleFactor - 0.1}))
-        }}>
-            <ZoomOutIcon fontSize="small" />
-        </IconButton>
+        <Tooltip title="zoom out">
+            <IconButton color="primary" size='small' disabled={scaleFactor <= scaleMin} onClick={() => {
+                dispatch(dfActions.updateChartScaleFactor({ chartId: focusedChart.id, scaleFactor: scaleFactor - 0.1 }))
+            }}>
+                <ZoomOutIcon fontSize="small" />
+            </IconButton>
+        </Tooltip>
         <Slider aria-label="chart-resize" defaultValue={1} step={0.1} min={scaleMin} max={scaleMax} 
                 value={scaleFactor} onChange={(event: Event, newValue: number | number[]) => {
             dispatch(dfActions.updateChartScaleFactor({chartId: focusedChart.id, scaleFactor: newValue as number}))
         }} />
-        <IconButton color="primary" size='small' disabled={scaleFactor >= scaleMax} onClick={()=>{
-            dispatch(dfActions.updateChartScaleFactor({chartId: focusedChart.id, scaleFactor: scaleFactor + 0.1}))
-        }}><ZoomInIcon fontSize="small" /></IconButton>
+        <Tooltip title="zoom in">
+            <IconButton color="primary" size='small' disabled={scaleFactor >= scaleMax} onClick={() => {
+                dispatch(dfActions.updateChartScaleFactor({ chartId: focusedChart.id, scaleFactor: scaleFactor + 0.1 }))
+            }}>
+                <ZoomInIcon fontSize="small" />
+            </IconButton>
+        </Tooltip>
     </Stack>
 
     return <Box ref={componentRef} sx={{overflow: "hidden", display: 'flex', flex: 1}}>