diff --git a/react/src/App.tsx b/react/src/App.tsx
index 61277d0..1f3774f 100644
--- a/react/src/App.tsx
+++ b/react/src/App.tsx
@@ -21,12 +21,12 @@ import React from 'react';
 import { ThemeProvider, createTheme, StyledEngineProvider, Theme } from '@mui/material/styles';
 
 import AppThemed from "./AppThemed";
-import {isDarkMode} from './DarkMode';
+import { isDarkMode } from './DarkMode';
 
 declare module '@mui/material/styles' {
     interface Theme {
-      mainBackground: React.CSSProperties['color'];
-      toolbarColor: React.CSSProperties['color'];
+        mainBackground: React.CSSProperties['color'];
+        toolbarColor: React.CSSProperties['color'];
     }
     interface ThemeOptions {
         mainBackground?: React.CSSProperties['color'];
@@ -35,12 +35,17 @@ declare module '@mui/material/styles' {
 
 }
 
-
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        dialogPrimary: true;
+        dialogSecondary: true;
+    }
+}
 
 
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface DefaultTheme extends Theme {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface DefaultTheme extends Theme { }
 }
 
 
@@ -49,34 +54,71 @@ declare module '@mui/styles/defaultTheme' {
 const theme = createTheme(
     isDarkMode() ?
         {
-        palette: {
-            mode: 'dark',
-            primary: {
-                main: '#A770E4'// #6750A4"   // #5B5690  #60529A  #5C5694
+            components: {
+                MuiButton: {
+                    variants: [
+                        {
+                            props: { variant: 'dialogPrimary' },
+                            style: {
+                                color: "#FFFFFF"
+                            }
+                        },
+                        {
+                            props: { variant: 'dialogSecondary',  },
+                            style: {
+                                color: "rgb(255,255,255,0.7)"
+                            },
+                        },
+                    ],
+                },
             },
-            secondary: {
-                main: "#FF6060"
+
+            palette: {
+                mode: 'dark',
+                primary: {
+                    main: '#A770E4'// #6750A4"   // #5B5690  #60529A  #5C5694
+                },
+                secondary: {
+                    main: "#0AA102" //'"#FF6060"
+                },
             },
-        },
-        mainBackground: "#222",
-        toolbarColor: '#222'
-    }
+            mainBackground: "#222",
+            toolbarColor: '#222'
+        }
         :
         {
-        palette: {
-            primary: {
-                main: "#6750A4"   // #5B5690  #60529A  #5C5694
+            components: {
+                MuiButton: {
+                    variants: [
+                        {
+                            props: { variant: 'dialogPrimary' },
+                            style: {
+                                color: "rgb(0,0,0,0.87)"
+                            }
+                        },
+                        {
+                            props: { variant: 'dialogSecondary',  },
+                            style: {
+                                color: "rgb(0,0,0,0.6)"
+                            },
+                        },
+                    ],
+                },
             },
-            secondary: {
-                main: "#FF6060"
-            }
+            palette: {
+                primary: {
+                    main: "#6750A4"   // #5B5690  #60529A  #5C5694
+                },
+                secondary: {
+                    main: "#FF6060"
+                }
 
-        },
-        mainBackground: "#FFFFFF",
-        toolbarColor: '#FFFFFF'
+            },
+            mainBackground: "#FFFFFF",
+            toolbarColor: '#FFFFFF'
 
 
-    }
+        }
 );
 
 
@@ -97,7 +139,7 @@ const App = (class extends React.Component {
         return (
             <StyledEngineProvider injectFirst>
                 <ThemeProvider theme={theme}>
-                    <AppThemed/>
+                    <AppThemed />
                 </ThemeProvider>
             </StyledEngineProvider>
         );
diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx
index 94b00b1..19965bc 100644
--- a/react/src/AppThemed.tsx
+++ b/react/src/AppThemed.tsx
@@ -879,7 +879,7 @@ render() {
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={this.handleCloseAlert} color="primary" autoFocus>
+                    <Button variant="dialogPrimary" onClick={this.handleCloseAlert} color="primary" autoFocus>
                         OK
                     </Button>
                 </DialogActions>
diff --git a/react/src/BankDialog.tsx b/react/src/BankDialog.tsx
index 8ceb2d4..eb61160 100644
--- a/react/src/BankDialog.tsx
+++ b/react/src/BankDialog.tsx
@@ -546,10 +546,10 @@ const BankDialog = withStyles(styles, { withTheme: true })(
                                 <Typography>Are you sure you want to delete bank '{this.getSelectedBankName()}'?</Typography>
                         </DialogContent>
                         <DialogActions>
-                            <Button onClick={()=> this.handleDeletePromptClose()} color="primary">
+                            <Button variant="dialogSecondary" onClick={()=> this.handleDeletePromptClose()} color="primary">
                                 Cancel
                             </Button>
-                            <Button onClick={()=> this.handleDeletePromptOk()}  color="secondary" >
+                            <Button variant="dialogPrimary" onClick={()=> this.handleDeletePromptOk()}  color="secondary" >
                                 DELETE
                             </Button>
 
diff --git a/react/src/FilePropertyDialog.tsx b/react/src/FilePropertyDialog.tsx
index 72c1b6f..af384e2 100644
--- a/react/src/FilePropertyDialog.tsx
+++ b/react/src/FilePropertyDialog.tsx
@@ -553,12 +553,12 @@ export default withStyles(styles, { withTheme: true })(
                             </Button>
                             <div style={{ flex: "1 1 auto" }}>&nbsp;</div>
 
-                            <Button onClick={() => { this.props.onCancel(); }} aria-label="cancel">
+                            <Button variant="dialogSecondary" onClick={() => { this.props.onCancel(); }} aria-label="cancel">
                                 Cancel
                             </Button>
-                            <Button style={{ flex: "0 0 auto" }}
+                            <Button variant="dialogPrimary" style={{ flex: "0 0 auto" }}
                                 onClick={() => { this.openSelectedFile(); }}
-                                color="secondary"
+                                
                                 disabled={(!this.state.hasSelection) && this.state.selectedFile !== ""} aria-label="select"
                             >
                                 Select
diff --git a/react/src/FilePropertyDirectorySelectDialog.tsx b/react/src/FilePropertyDirectorySelectDialog.tsx
index 8ee9bb4..ec468c3 100644
--- a/react/src/FilePropertyDirectorySelectDialog.tsx
+++ b/react/src/FilePropertyDirectorySelectDialog.tsx
@@ -334,10 +334,10 @@ export default class FilePropertyDirectorySelectDialog extends ResizeResponsiveC
                 </DialogContent>
                 <Divider />
                 <DialogActions>
-                    <Button onClick={() => { this.onClose(); }} color="primary">
+                    <Button variant="dialogSecondary"  onClick={() => { this.onClose(); }} color="primary">
                         Cancel
                     </Button>
-                    <Button onClick={() => { this.onOK(); }} color="secondary" disabled={!this.state.hasSelection} >
+                    <Button variant="dialogPrimary" onClick={() => { this.onOK(); }} color="secondary" disabled={!this.state.hasSelection} >
                         OK
                     </Button>
                 </DialogActions>
diff --git a/react/src/JackServerSettingsDialog.tsx b/react/src/JackServerSettingsDialog.tsx
index 34b3fec..38c811b 100644
--- a/react/src/JackServerSettingsDialog.tsx
+++ b/react/src/JackServerSettingsDialog.tsx
@@ -362,10 +362,10 @@ const JackServerSettingsDialog = withStyles(styles)(
                     </DialogContent>
 
                     <DialogActions>
-                        <Button onClick={handleClose} color="primary">
+                        <Button variant="dialogSecondary" onClick={handleClose} >
                             Cancel
                         </Button>
-                        <Button onClick={() => this.handleApply()} color="primary" disabled={
+                        <Button variant="dialogPrimary" onClick={() => this.handleApply()} disabled={
                             (!this.state.alsaDevices) || !this.state.jackServerSettings.valid}>
                             OK
                         </Button>
diff --git a/react/src/ListSelectDialog.tsx b/react/src/ListSelectDialog.tsx
index 0124104..03f145d 100644
--- a/react/src/ListSelectDialog.tsx
+++ b/react/src/ListSelectDialog.tsx
@@ -106,7 +106,7 @@ export default class ListSelectDialog extends ResizeResponsiveComponent<ListSele
                 }
                 </List>
                 <DialogActions>
-                    <Button onClick={()=> this.props.onClose()} color="primary">
+                    <Button variant="dialogSecondary" onClick={()=> this.props.onClose()} color="primary">
                         Cancel
                     </Button>
                 </DialogActions>
diff --git a/react/src/LoadPluginDialog.tsx b/react/src/LoadPluginDialog.tsx
index 5c7c93b..fea41e4 100644
--- a/react/src/LoadPluginDialog.tsx
+++ b/react/src/LoadPluginDialog.tsx
@@ -814,8 +814,8 @@ export const LoadPluginDialog =
                                                 </div>
                                             </div>
                                             <div style={{ position: "relative", float: "right", flex: "0 1 200px", width: 200, display: "flex", alignItems: "center" }}>
-                                                <Button onClick={this.handleCancel} style={{ width: 120 }} >Cancel</Button>
-                                                <Button onClick={this.handleOk} color="secondary" disabled={selectedPlugin === null} style={{ width: 180 }} >SELECT</Button>
+                                                <Button variant="dialogSecondary" onClick={this.handleCancel} style={{ width: 120 }} >Cancel</Button>
+                                                <Button variant="dialogPrimary" onClick={this.handleOk} disabled={selectedPlugin === null} style={{ width: 180 }} >SELECT</Button>
                                             </div>
                                         </div>
                                     </DialogActions>
@@ -839,8 +839,8 @@ export const LoadPluginDialog =
                                         <div className={classes.bottom} style={{height: 64}}>
                                             <div style={{ flex: "1 1 1px" }} />
                                             <div style={{ position: "relative", flex: "0 1 auto", display: "flex", alignItems: "center" }}>
-                                                <Button onClick={this.handleCancel} style={{ height: 48 }} >Cancel</Button>
-                                                <Button onClick={this.handleOk} color="secondary" disabled={selectedPlugin === null} style={{ height: 48 }} >SELECT</Button>
+                                                <Button variant="dialogSecondary"  onClick={this.handleCancel} style={{ height: 48 }} >Cancel</Button>
+                                                <Button variant="dialogPrimary" onClick={this.handleOk} disabled={selectedPlugin === null} style={{ height: 48 }} >SELECT</Button>
                                             </div>
                                         </div>
                                     </DialogActions>
diff --git a/react/src/OkCancelDialog.tsx b/react/src/OkCancelDialog.tsx
index 72f8ab4..726ac3b 100644
--- a/react/src/OkCancelDialog.tsx
+++ b/react/src/OkCancelDialog.tsx
@@ -70,10 +70,10 @@ export default class OkCancelDialog extends React.Component<OkCancelDialogProps,
                     >{text}</Typography>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={handleClose} color="primary">
+                    <Button variant="dialogSecondary" onClick={handleClose} >
                         Cancel
                     </Button>
-                    <Button onClick={handleOk} color="secondary" >
+                    <Button variant="dialogPrimary" onClick={handleOk}  >
                         {okButtonText}
                     </Button>
                 </DialogActions>
diff --git a/react/src/PiPedalModel.tsx b/react/src/PiPedalModel.tsx
index fad9d26..ae9fd62 100644
--- a/react/src/PiPedalModel.tsx
+++ b/react/src/PiPedalModel.tsx
@@ -2644,8 +2644,11 @@ export class PiPedalModel //implements PiPedalModel
         if (this.getTheme() !== value)
         {
             setColorScheme(value);
-            this.reloadPage();
-        }
+            setTimeout(()=>{
+                this.reloadPage();
+            },
+            200);
+}
     }
 
     reloadRequested: boolean = false;
@@ -2653,7 +2656,9 @@ export class PiPedalModel //implements PiPedalModel
     reloadPage() {
         this.reloadRequested = true;
         // eslint-disable-next-line no-restricted-globals
-        window.location.reload();
+        let url = window.location.href.split('#')[0];
+        window.location.href = url;
+        //window.location.reload();
     }
 
 };
diff --git a/react/src/PluginInfoDialog.tsx b/react/src/PluginInfoDialog.tsx
index 465361a..2e9bfca 100644
--- a/react/src/PluginInfoDialog.tsx
+++ b/react/src/PluginInfoDialog.tsx
@@ -317,7 +317,7 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
                         </div>
                     </PluginInfoDialogContent>
                     <PluginInfoDialogActions>
-                        <Button autoFocus onClick={handleClose} color="primary" style={{ width: "130px" }}>
+                        <Button variant="dialogPrimary"  autoFocus onClick={handleClose} style={{ width: "130px" }}>
                             OK
                         </Button>
                     </PluginInfoDialogActions>
diff --git a/react/src/RenameDialog.tsx b/react/src/RenameDialog.tsx
index 72a68f6..2cb82bc 100644
--- a/react/src/RenameDialog.tsx
+++ b/react/src/RenameDialog.tsx
@@ -131,10 +131,10 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
                     />
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={handleClose} color="primary">
+                    <Button onClick={handleClose} variant="dialogSecondary" >
                         Cancel
                     </Button>
-                    <Button onClick={handleOk} color="secondary" >
+                    <Button onClick={handleOk} variant="dialogPrimary"  >
                         {acceptActionName}
                     </Button>
                 </DialogActions>
diff --git a/react/src/SelectChannelsDialog.tsx b/react/src/SelectChannelsDialog.tsx
index de9edd6..ccabcd2 100644
--- a/react/src/SelectChannelsDialog.tsx
+++ b/react/src/SelectChannelsDialog.tsx
@@ -107,10 +107,10 @@ function SelectChannelsDialog(props: SelectChannelsDialogProps) {
                     )}
                 </List>
                 <DialogActions>
-                    <Button onClick={handleClose} color="primary">
+                    <Button onClick={handleClose} variant="dialogSecondary" >
                         Cancel
                     </Button>
-                    <Button onClick={handleOk} color="primary" disabled={currentSelection.length === 0 || currentSelection.length > 2} >
+                    <Button onClick={handleOk} variant="dialogPrimary"  disabled={currentSelection.length === 0 || currentSelection.length > 2} >
                         OK
                     </Button>
                 </DialogActions>
diff --git a/react/src/SelectMidiChannelsDialog.tsx b/react/src/SelectMidiChannelsDialog.tsx
index bd51194..df621bc 100644
--- a/react/src/SelectMidiChannelsDialog.tsx
+++ b/react/src/SelectMidiChannelsDialog.tsx
@@ -110,10 +110,10 @@ function SelectMidiChannelsDialog(props: SelectMidiChannelsDialogProps) {
                 )}
             </List>
             <DialogActions>
-                <Button onClick={handleClose} color="primary">
+                <Button onClick={handleClose} variant="dialogSecondary" >
                     Cancel
                 </Button>
-                <Button onClick={handleOk} color="primary"  >
+                <Button onClick={handleOk} variant="dialogPrimary"   >
                     OK
                 </Button>
             </DialogActions>
diff --git a/react/src/SelectThemeDialog.tsx b/react/src/SelectThemeDialog.tsx
index f928663..c4db808 100644
--- a/react/src/SelectThemeDialog.tsx
+++ b/react/src/SelectThemeDialog.tsx
@@ -79,10 +79,10 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
                 </FormControl>
             </DialogContent>
             <DialogActions>
-                <Button onClick={handleClose} color="primary">
+                <Button onClick={handleClose} variant="dialogSecondary" >
                     Cancel
                 </Button>
-                <Button onClick={handleOk} color="primary"  >
+                <Button onClick={handleOk} variant="dialogPrimary"   >
                     OK
                 </Button>
             </DialogActions>
diff --git a/react/src/SettingsDialog.tsx b/react/src/SettingsDialog.tsx
index 53f5da5..bd1d863 100644
--- a/react/src/SettingsDialog.tsx
+++ b/react/src/SettingsDialog.tsx
@@ -885,7 +885,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                 onClose={()=> { this.setState({showThemeSelectDialog: false});} }
                                 onOk={(selectedTheme: ColorTheme) => {
                                     this.model.setTheme(selectedTheme);
-                                    this.setState({showThemeSelectDialog: false}); 
+                                    this.setState({showThemeSelectDialog: false});
                                 }}
                                 defaultTheme={this.model.getTheme()}
                             />
diff --git a/react/src/UploadFileDialog.tsx b/react/src/UploadFileDialog.tsx
index f6b0d72..4e1cd31 100644
--- a/react/src/UploadFileDialog.tsx
+++ b/react/src/UploadFileDialog.tsx
@@ -384,7 +384,8 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
 
                 <DialogActions >
                     <Button
-                        component="label" color="primary" style={{ whiteSpace: "nowrap", textOverflow: "ellipsis", marginLeft: 16, width: 120, flex: "0 0 auto" }}
+                        component="label" variant="dialogPrimary"  style={{ whiteSpace: "nowrap", 
+                            textOverflow: "ellipsis", marginLeft: 16, width: 120, flex: "0 0 auto" }}
                     >
                         Select&nbsp;Files
                         <input
@@ -399,12 +400,12 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
                     {
                         this.state.okEnabled ?
                             (
-                                <Button onClick={() => this.handleClose()} color="primary">
+                                <Button onClick={() => this.handleClose()} variant="dialogPrimary" >
                                     OK
                                 </Button>
 
                             ) : (
-                                <Button onClick={() => this.handleCancel()} color="primary">
+                                <Button onClick={() => this.handleCancel()} variant="dialogPrimary" >
                                     Cancel
                                 </Button>
 
diff --git a/react/src/UploadPresetDialog.tsx b/react/src/UploadPresetDialog.tsx
index 9381473..073179c 100644
--- a/react/src/UploadPresetDialog.tsx
+++ b/react/src/UploadPresetDialog.tsx
@@ -182,11 +182,11 @@ export default class UploadPresetDialog extends ResizeResponsiveComponent<Upload
                 </DialogContent>
 
                 <DialogActions>
-                    <Button onClick={() => this.handleClose()} color="primary">
+                    <Button onClick={() => this.handleClose()} variant="dialogSecondary" >
                         Cancel
                     </Button>
                     <Button
-                        component="label" color="secondary" style={{width: 120}}
+                        component="label" variant="dialogPrimary"  style={{width: 120}}
                     >
                         Select File
                         <input
diff --git a/react/src/WifiConfigDialog.tsx b/react/src/WifiConfigDialog.tsx
index eef12fa..cdc4099 100644
--- a/react/src/WifiConfigDialog.tsx
+++ b/react/src/WifiConfigDialog.tsx
@@ -337,10 +337,10 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
 
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={handleClose} color="primary" style={{ width: 120 }}>
+                    <Button onClick={handleClose} variant="dialogSecondary"  style={{ width: 120 }}>
                         Cancel
                     </Button>
-                    <Button onClick={()=> this.handleOk(false)} color="success" style={{ width: 120 }} >
+                    <Button onClick={()=> this.handleOk(false)} variant="dialogPrimary"  style={{ width: 120 }} >
                         OK
                     </Button>
                 </DialogActions>
@@ -356,13 +356,13 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
                         </Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={()=> this.setState({showWifiWarningDialog: false})} color="primary" style={{ width: 120 }}>
+                        <Button onClick={()=> this.setState({showWifiWarningDialog: false})} variant="dialogSecondary"  style={{ width: 120 }}>
                             Cancel
                         </Button>
                         <Button onClick={()=> {
                             this.setState({showWifiWarningDialog: false});
                             this.handleOk(true);
-                        }} color="secondary" style={{ width: 120 }} >
+                        }} variant="dialogPrimary"  style={{ width: 120 }} >
                             PROCEED
                         </Button>
                     </DialogActions>
diff --git a/react/src/WifiDirectConfigDialog.tsx b/react/src/WifiDirectConfigDialog.tsx
index 1402c08..50bad7a 100644
--- a/react/src/WifiDirectConfigDialog.tsx
+++ b/react/src/WifiDirectConfigDialog.tsx
@@ -506,10 +506,10 @@ const WifiDirectConfigDialog = withStyles(styles, { withTheme: true })(
                     )}
 
                     <DialogActions>
-                        <Button onClick={handleClose} color="primary" style={{ width: 120 }}>
+                        <Button onClick={handleClose} variant="dialogSecondary"  style={{ width: 120 }}>
                             Cancel
                         </Button>
-                        <Button onClick={() => this.handleOk()} color="primary" style={{ width: 120 }} >
+                        <Button onClick={() => this.handleOk()} variant="dialogPrimary"  style={{ width: 120 }} >
                             OK
                         </Button>
                     </DialogActions>