diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx
index 3eb8fb7..b8a3189 100644
--- a/react/src/AppThemed.tsx
+++ b/react/src/AppThemed.tsx
@@ -64,6 +64,8 @@ import UpdateDialog from './UpdateDialog';
 
 import { ReactComponent as RenameOutlineIcon } from './svg/drive_file_rename_outline_black_24dp.svg';
 import { ReactComponent as SaveBankAsIcon } from './svg/ic_save_bank_as.svg';
+import { ReactComponent as EditBanksIcon } from './svg/ic_edit_banks.svg';
+
 import { ReactComponent as EditBanksIcon } from './svg/ic_edit_banks.svg';
 import { ReactComponent as SettingsIcon } from './svg/ic_settings.svg';
 import { ReactComponent as HelpOutlineIcon } from './svg/ic_help_outline.svg';
@@ -808,19 +810,19 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
                             <ListItemIcon >
                                 <RenameOutlineIcon color='inherit' className={classes.menuIcon} />
                             </ListItemIcon>
-                            <ListItemText primary='Rename Bank' />
+                            <ListItemText primary='Rename bank' />
                         </ListItem>
                         <ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} >
                             <ListItemIcon>
                                 <SaveBankAsIcon color="inherit" className={classes.menuIcon} />
                             </ListItemIcon>
-                            <ListItemText primary='Save As New Bank' />
+                            <ListItemText primary='Save as new bank' />
                         </ListItem>
                         <ListItem button key='EditBanks' onClick={() => { this.handleDrawerManageBanks(); }}>
                             <ListItemIcon>
                                 <EditBanksIcon color="inherit" className={classes.menuIcon} />
                             </ListItemIcon>
-                            <ListItemText primary='Manage Banks...' />
+                            <ListItemText primary='Manage banks...' />
                         </ListItem>
                     </List>
                     <Divider />
diff --git a/react/src/BankDialog.tsx b/react/src/BankDialog.tsx
index edd387e..94ce27b 100644
--- a/react/src/BankDialog.tsx
+++ b/react/src/BankDialog.tsx
@@ -24,11 +24,11 @@ import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
 import { BankIndexEntry, BankIndex } from './Banks';
 import Button from "@mui/material/Button";
 import ButtonBase from "@mui/material/ButtonBase";
-import Slide, {SlideProps} from '@mui/material/Slide';
+import Slide, { SlideProps } from '@mui/material/Slide';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import { Theme, createStyles } from '@mui/material/styles';
-import { WithStyles,withStyles } from "@mui/styles";
+import { WithStyles, withStyles } from "@mui/styles";
 import DraggableGrid, { ScrollDirection } from './DraggableGrid';
 import Fade from '@mui/material/Fade';
 
@@ -46,8 +46,12 @@ import MenuItem from '@mui/material/MenuItem';
 import DialogEx from './DialogEx';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
-import { ReactComponent as DownloadIcon} from './svg/file_download_black_24dp.svg';
-import { ReactComponent as UploadIcon} from './svg/file_upload_black_24dp.svg';
+import { ReactComponent as DownloadIcon } from './svg/file_download_black_24dp.svg';
+import { ReactComponent as UploadIcon } from './svg/file_upload_black_24dp.svg';
+import { ReactComponent as BankIcon } from './svg/ic_bank.svg';
+//import PublishIcon from '@mui/icons-material/Publish';
+// import FileDownloadIcon from '@mui/icons-material/FileDownload';
+// import AppsIcon from '@mui/icons-material/Apps';
 
 interface BankDialogProps extends WithStyles<typeof styles> {
     show: boolean;
@@ -73,8 +77,8 @@ interface BankDialogState {
 
 const styles = (theme: Theme) => createStyles({
     listIcon: {
-        width: 24, height: 24, 
-        opacity: 0.6, fill: theme.palette.text.primary 
+        width: 24, height: 24,
+        opacity: 0.6, fill: theme.palette.text.primary
     },
     dialogAppBar: {
         position: 'relative',
@@ -166,7 +170,7 @@ const BankDialog = withStyles(styles, { withTheme: true })(
                     uploadAfter = await this.model.uploadBank(fileList[i], uploadAfter);
                 }
             } catch (error) {
-                this.model.showAlert(error +"");
+                this.model.showAlert(error + "");
             };
             return uploadAfter;
         }
@@ -300,11 +304,11 @@ const BankDialog = withStyles(styles, { withTheme: true })(
                     >
                         <SelectHoverBackground selected={bankEntry.instanceId === selectedItem} showHover={true} />
                         <div className={classes.itemFrame}>
-                            <div className={classes.iconFrame}>
-                                <img src="img/ic_bank.svg" className={classes.itemIcon} alt="" />
+                            <div className={classes.ListItemIcon}>
+                                <BankIcon className={classes.listIcon}/>
                             </div>
                             <div className={classes.itemLabel}>
-                                <Typography noWrap>
+                                <Typography noWrap variant="body2" color="textPrimary">
                                     {bankEntry.name}
                                 </Typography>
                             </div>
@@ -405,8 +409,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
             return (
                 <DialogEx tag="bank" fullScreen open={this.props.show}
                     onClose={() => { this.handleDialogClose() }} TransitionComponent={Transition}
-                    style={{userSelect: "none"}}
-                    >
+                    style={{ userSelect: "none" }}
+                >
                     <div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
                         <div style={{ flex: "0 0 auto" }}>
                             <AppBar className={classes.dialogAppBar} style={{ display: this.isEditMode() ? "none" : "block" }} >
@@ -482,8 +486,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
                                                 >
                                                     <MenuItem onClick={() => { this.handleDownloadBank(); }} >
                                                         <ListItemIcon>
-                                                            <DownloadIcon className="listIcon"
-                                                                />
+                                                            <DownloadIcon className={classes.listIcon}
+                                                            />
                                                         </ListItemIcon>
                                                         <ListItemText>
                                                             Download bank
@@ -494,9 +498,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
                                                         <MenuItem onClick={(e) => this.handleUploadBank()}>
 
 
-                                                            <ListItemIcon>
-                                                            <UploadIcon className="listIcon"
-                                                                />
+                                                            <ListItemIcon >
+                                                                <UploadIcon className={classes.listIcon} />
                                                             </ListItemIcon>
                                                             <ListItemText>
                                                                 Upload bank
@@ -541,15 +544,15 @@ const BankDialog = withStyles(styles, { withTheme: true })(
                     />
 
                     <DialogEx tag="deletePrompt" open={this.state.showDeletePrompt} onClose={() => this.handleDeletePromptClose()}
-                        style={{userSelect: "none"}}>
+                        style={{ userSelect: "none" }}>
                         <DialogContent>
-                                <Typography>Are you sure you want to delete bank '{this.getSelectedBankName()}'?</Typography>
+                            <Typography>Are you sure you want to delete bank '{this.getSelectedBankName()}'?</Typography>
                         </DialogContent>
                         <DialogActions>
-                            <Button variant="dialogSecondary" onClick={()=> this.handleDeletePromptClose()} color="primary">
+                            <Button variant="dialogSecondary" onClick={() => this.handleDeletePromptClose()} color="primary">
                                 Cancel
                             </Button>
-                            <Button variant="dialogPrimary" onClick={()=> this.handleDeletePromptOk()}  color="secondary" >
+                            <Button variant="dialogPrimary" onClick={() => this.handleDeletePromptOk()} color="secondary" >
                                 DELETE
                             </Button>
 
diff --git a/react/src/SettingsDialog.tsx b/react/src/SettingsDialog.tsx
index 7b0726b..c8481da 100644
--- a/react/src/SettingsDialog.tsx
+++ b/react/src/SettingsDialog.tsx
@@ -671,7 +671,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                     <ButtonBase className={classes.setting} disabled={!isConfigValid} onClick={() => this.handleMidiMessageSettings()}  >
                                         <SelectHoverBackground selected={false} showHover={true} />
                                         <div style={{ width: "100%" }}>
-                                            <Typography className={classes.primaryItem} display="block" variant="body2" noWrap>System MIDI Bindings</Typography>
+                                            <Typography className={classes.primaryItem} display="block" variant="body2" noWrap>System MIDI bindings</Typography>
 
                                         </div>
                                     </ButtonBase>
@@ -754,7 +754,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                         <SelectHoverBackground selected={false} showHover={true} />
                                         <div style={{ width: "100%" }}>
                                             <Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
-                                                Color Theme</Typography>
+                                                Color theme</Typography>
                                             <Typography className={classes.secondaryItem} display="block" variant="caption" color="textSecondary" noWrap>
                                                 { this.model.getTheme() === ColorTheme.Dark ? "Dark" :
                                                 (this.model.getTheme() ===  ColorTheme.Light ? "Light": "System")}
diff --git a/react/src/svg/file_download_black_24dp.svg b/react/src/svg/file_download_black_24dp.svg
index efc0c46..c9c36ed 100644
--- a/react/src/svg/file_download_black_24dp.svg
+++ b/react/src/svg/file_download_black_24dp.svg
@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" >
+    <g>
+        <rect fill="none" height="24" width="24"/>
+    </g>
+    <g>
+        <path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/react/src/svg/ic_bank.svg b/react/src/svg/ic_bank.svg
new file mode 100644
index 0000000..64a6601
--- /dev/null
+++ b/react/src/svg/ic_bank.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M18.993,8.993L18.99,5c0-1.1-0.891-2-1.99-2h-4h-3H6C4.9,3,4.01,3.9,4.01,5L4.007,8.993L4,9v10c0,1.1,0.891,2,1.99,2H6h11
+	h0.01c1.1,0,1.99-0.9,1.99-2V9L18.993,8.993z M17,10v9H6v-9V5h5h1h5V10z"/>
+<rect x="8" y="7" width="2" height="2"/>
+<rect x="12" y="7" width="3" height="2"/>
+<rect x="8" y="11" width="2" height="2"/>
+<rect x="12" y="11" width="3" height="2"/>
+<rect x="8" y="15" width="2" height="2"/>
+<rect x="12" y="15" width="3" height="2"/>
+</svg>