diff --git a/src/App.js b/src/App.js
index f4aad55..29289e5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { BrowserRouter as Router } from "react-router-dom";
+import { Router } from "react-router-dom";
 import { createBrowserHistory } from "history";
 
 import { Provider } from "react-redux";
diff --git a/src/components/Alert.js b/src/components/Alert.js
index ce10c87..01bac66 100644
--- a/src/components/Alert.js
+++ b/src/components/Alert.js
@@ -1,34 +1,29 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";
 
-import Typography from '@material-ui/core/Typography';
+import Typography from "@material-ui/core/Typography";
 
 const styles = (theme) => ({
   alert: {
-    marginBottom: '20px',
+    marginBottom: "20px",
     border: `1px solid ${theme.palette.primary.main}`,
-    padding: '10px 20px',
-    borderRadius: '4px',
-    background: fade(theme.palette.primary.main, 0.3),
-    color: 'rgb(70,70,70)'
-  }
+    padding: "10px 20px",
+    borderRadius: "4px",
+    background: alpha(theme.palette.primary.main, 0.3),
+    color: "rgb(70,70,70)",
+  },
 });
 
-
 export class Alert extends Component {
-
-  render(){
-    return(
+  render() {
+    return (
       <div className={this.props.classes.alert}>
-        <Typography>
-          {this.props.children}
-        </Typography>
+        <Typography>{this.props.children}</Typography>
       </div>
     );
   }
 }
 
-
 export default withStyles(styles, { withTheme: true })(Alert);
diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js
index a21738c..71847c1 100644
--- a/src/components/Tutorial/Builder/Builder.js
+++ b/src/components/Tutorial/Builder/Builder.js
@@ -482,11 +482,11 @@ class Builder extends Component {
                   {tutorial.title}{" "}
                   {tutorial.review && tutorial.public === false ? (
                     <div>
-                      <FontAwesomeIcon mx={2} icon={faUserCheck} />
-                      <FontAwesomeIcon mx={2} icon={faEyeSlash} />
+                      <FontAwesomeIcon icon={faUserCheck} />
+                      <FontAwesomeIcon icon={faEyeSlash} />
                     </div>
                   ) : tutorial.public === false ? (
-                    <FontAwesomeIcon mx={2} icon={faEyeSlash} />
+                    <FontAwesomeIcon icon={faEyeSlash} />
                   ) : null}
                 </MenuItem>
                 /* ) : tutorial.public === false ? (
diff --git a/src/components/Tutorial/Requirement.js b/src/components/Tutorial/Requirement.js
index 81584ad..42e3165 100644
--- a/src/components/Tutorial/Requirement.js
+++ b/src/components/Tutorial/Requirement.js
@@ -4,8 +4,7 @@ import { connect } from "react-redux";
 
 import clsx from "clsx";
 import { withRouter, Link } from "react-router-dom";
-
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import { withStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import List from "@material-ui/core/List";
@@ -20,18 +19,18 @@ const styles = (theme) => ({
     width: "50px",
     height: "50px",
     position: "absolute",
-    color: fade(theme.palette.secondary.main, 0.6),
+    color: alpha(theme.palette.secondary.main, 0.6),
   },
   outerDivError: {
-    stroke: fade(theme.palette.error.dark, 0.6),
-    color: fade(theme.palette.error.dark, 0.6),
+    stroke: alpha(theme.palette.error.dark, 0.6),
+    color: alpha(theme.palette.error.dark, 0.6),
   },
   outerDivSuccess: {
-    stroke: fade(theme.palette.primary.main, 0.6),
-    color: fade(theme.palette.primary.main, 0.6),
+    stroke: alpha(theme.palette.primary.main, 0.6),
+    color: alpha(theme.palette.primary.main, 0.6),
   },
   outerDivOther: {
-    stroke: fade(theme.palette.secondary.main, 0.6),
+    stroke: alpha(theme.palette.secondary.main, 0.6),
   },
   innerDiv: {
     width: "inherit",
@@ -50,7 +49,7 @@ const styles = (theme) => ({
   },
   hoverLink: {
     "&:hover": {
-      background: fade(theme.palette.secondary.main, 0.5),
+      background: alpha(theme.palette.secondary.main, 0.5),
       borderRadius: "0 25px 25px 0 ",
     },
   },
diff --git a/src/components/Tutorial/StepperHorizontal.js b/src/components/Tutorial/StepperHorizontal.js
index 6a64f39..ce4083f 100644
--- a/src/components/Tutorial/StepperHorizontal.js
+++ b/src/components/Tutorial/StepperHorizontal.js
@@ -7,8 +7,8 @@ import { withRouter } from "react-router-dom";
 import clsx from "clsx";
 
 // import tutorials from '../../data/tutorials';
+import { alpha } from "@material-ui/core/styles";
 
-import { fade } from "@material-ui/core/styles/colorManipulator";
 import { withStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import Tooltip from "@material-ui/core/Tooltip";
@@ -28,13 +28,13 @@ const styles = (theme) => ({
     justifyContent: "space-between",
   },
   stepperSuccess: {
-    backgroundColor: fade(theme.palette.primary.main, 0.6),
+    backgroundColor: alpha(theme.palette.primary.main, 0.6),
   },
   stepperError: {
-    backgroundColor: fade(theme.palette.error.dark, 0.6),
+    backgroundColor: alpha(theme.palette.error.dark, 0.6),
   },
   stepperOther: {
-    backgroundColor: fade(theme.palette.secondary.main, 0.6),
+    backgroundColor: alpha(theme.palette.secondary.main, 0.6),
   },
   color: {
     backgroundColor: "transparent ",
diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js
index 5735c3f..b1fa614 100644
--- a/src/components/Tutorial/StepperVertical.js
+++ b/src/components/Tutorial/StepperVertical.js
@@ -1,36 +1,35 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { tutorialStep } from '../../actions/tutorialActions';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { tutorialStep } from "../../actions/tutorialActions";
 
-import { withRouter } from 'react-router-dom';
+import { withRouter } from "react-router-dom";
 
-import clsx from 'clsx';
-
-import { fade } from '@material-ui/core/styles/colorManipulator';
-import { withStyles } from '@material-ui/core/styles';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import Tooltip from '@material-ui/core/Tooltip';
+import clsx from "clsx";
+import { alpha } from "@material-ui/core/styles";
+import { withStyles } from "@material-ui/core/styles";
+import Stepper from "@material-ui/core/Stepper";
+import Step from "@material-ui/core/Step";
+import StepLabel from "@material-ui/core/StepLabel";
+import Tooltip from "@material-ui/core/Tooltip";
 
 const styles = (theme) => ({
   verticalStepper: {
     padding: 0,
-    width: '30px',
+    width: "30px",
   },
   stepIcon: {
     borderStyle: `solid`,
     // borderWidth: '2px',
-    borderRadius: '50%',
+    borderRadius: "50%",
     borderColor: theme.palette.secondary.main,
-    width: '12px',
-    height: '12px',
-    margin: '0 auto',
+    width: "12px",
+    height: "12px",
+    margin: "0 auto",
   },
   stepIconLarge: {
-    width: '24px',
-    height: '24px'
+    width: "24px",
+    height: "24px",
   },
   stepIconLargeSuccess: {
     borderColor: theme.palette.primary.main,
@@ -39,28 +38,27 @@ const styles = (theme) => ({
     borderColor: theme.palette.error.dark,
   },
   stepIconActiveOther: {
-    backgroundColor: theme.palette.secondary.main
+    backgroundColor: theme.palette.secondary.main,
   },
   stepIconActiveSuccess: {
-    backgroundColor: fade(theme.palette.primary.main, 0.6)
+    backgroundColor: alpha(theme.palette.primary.main, 0.6),
   },
   stepIconActiveError: {
-    backgroundColor: fade(theme.palette.error.dark, 0.6)
+    backgroundColor: alpha(theme.palette.error.dark, 0.6),
   },
   connector: {
-    height: '10px',
+    height: "10px",
     borderLeft: `2px solid black`,
-    margin: 'auto'
-  }
+    margin: "auto",
+  },
 });
 
 class StepperVertical extends Component {
-
-  componentDidMount(){
+  componentDidMount() {
     this.props.tutorialStep(0);
   }
 
-  componentDidUpdate(props){
+  componentDidUpdate(props) {
     if (props.tutorial._id !== this.props.match.params.tutorialId) {
       this.props.tutorialStep(0);
     }
@@ -69,60 +67,103 @@ class StepperVertical extends Component {
   render() {
     var steps = this.props.steps;
     var activeStep = this.props.activeStep;
-    var tutorialStatus = this.props.status.filter(status => status._id === this.props.tutorial._id)[0];
+    var tutorialStatus = this.props.status.filter(
+      (status) => status._id === this.props.tutorial._id
+    )[0];
     return (
-      <div style={{marginRight: '10px'}}>
+      <div style={{ marginRight: "10px" }}>
         <Stepper
           activeStep={activeStep}
           orientation="vertical"
           connector={<div className={this.props.classes.connector}></div>}
-          classes={{root: this.props.classes.verticalStepper}}
+          classes={{ root: this.props.classes.verticalStepper }}
         >
           {steps.map((step, i) => {
-            var tasksIndex = tutorialStatus.tasks.findIndex(task => task._id === step._id);
-            var taskType = tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null;
-            var taskStatus = taskType === 'success' ? 'Success' : taskType === 'error' ? 'Error' : 'Other';
+            var tasksIndex = tutorialStatus.tasks.findIndex(
+              (task) => task._id === step._id
+            );
+            var taskType =
+              tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null;
+            var taskStatus =
+              taskType === "success"
+                ? "Success"
+                : taskType === "error"
+                ? "Error"
+                : "Other";
             return (
               <Step key={i}>
-                <Tooltip title={step.headline} placement='right' arrow >
-                  <div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => { this.props.tutorialStep(i)}}>
+                <Tooltip title={step.headline} placement="right" arrow>
+                  <div
+                    style={
+                      i === activeStep
+                        ? { padding: "5px 0" }
+                        : { padding: "5px 0", cursor: "pointer" }
+                    }
+                    onClick={
+                      i === activeStep
+                        ? null
+                        : () => {
+                            this.props.tutorialStep(i);
+                          }
+                    }
+                  >
                     <StepLabel
-                      StepIconComponent={'div'}
+                      StepIconComponent={"div"}
                       classes={{
-                        root: step.type === 'task' ?
-                                i === activeStep ?
-                                  clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes['stepIconLarge'+taskStatus], this.props.classes['stepIconActive'+taskStatus])
-                                : clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes['stepIconLarge'+taskStatus])
-                              : i === activeStep ?
-                                  clsx(this.props.classes.stepIcon, this.props.classes.stepIconActiveOther)
-                                : clsx(this.props.classes.stepIcon)
+                        root:
+                          step.type === "task"
+                            ? i === activeStep
+                              ? clsx(
+                                  this.props.classes.stepIcon,
+                                  this.props.classes.stepIconLarge,
+                                  this.props.classes[
+                                    "stepIconLarge" + taskStatus
+                                  ],
+                                  this.props.classes[
+                                    "stepIconActive" + taskStatus
+                                  ]
+                                )
+                              : clsx(
+                                  this.props.classes.stepIcon,
+                                  this.props.classes.stepIconLarge,
+                                  this.props.classes[
+                                    "stepIconLarge" + taskStatus
+                                  ]
+                                )
+                            : i === activeStep
+                            ? clsx(
+                                this.props.classes.stepIcon,
+                                this.props.classes.stepIconActiveOther
+                              )
+                            : clsx(this.props.classes.stepIcon),
                       }}
-                    >
-                    </StepLabel>
+                    ></StepLabel>
                   </div>
                 </Tooltip>
               </Step>
-          )})}
+            );
+          })}
         </Stepper>
       </div>
     );
-  };
+  }
 }
 
-
 StepperVertical.propTypes = {
   status: PropTypes.array.isRequired,
   change: PropTypes.number.isRequired,
   activeStep: PropTypes.number.isRequired,
   tutorialStep: PropTypes.func.isRequired,
-  tutorial: PropTypes.object.isRequired
+  tutorial: PropTypes.object.isRequired,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   change: state.tutorial.change,
   status: state.tutorial.status,
   activeStep: state.tutorial.activeStep,
-  tutorial: state.tutorial.tutorials[0]
+  tutorial: state.tutorial.tutorials[0],
 });
 
-export default connect(mapStateToProps, { tutorialStep })(withRouter(withStyles(styles, {withTheme: true})(StepperVertical)));
+export default connect(mapStateToProps, { tutorialStep })(
+  withRouter(withStyles(styles, { withTheme: true })(StepperVertical))
+);
diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js
index 9df9aef..2a73f3b 100644
--- a/src/components/Tutorial/TutorialHome.js
+++ b/src/components/Tutorial/TutorialHome.js
@@ -17,8 +17,7 @@ import clsx from "clsx";
 import Breadcrumbs from "../Breadcrumbs";
 
 import { Link } from "react-router-dom";
-
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import { withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
@@ -46,18 +45,18 @@ const styles = (theme) => ({
     bottom: "-30px",
     width: "160px",
     height: "160px",
-    color: fade(theme.palette.secondary.main, 0.6),
+    color: alpha(theme.palette.secondary.main, 0.6),
   },
   outerDivError: {
-    stroke: fade(theme.palette.error.dark, 0.6),
-    color: fade(theme.palette.error.dark, 0.6),
+    stroke: alpha(theme.palette.error.dark, 0.6),
+    color: alpha(theme.palette.error.dark, 0.6),
   },
   outerDivSuccess: {
-    stroke: fade(theme.palette.primary.main, 0.6),
-    color: fade(theme.palette.primary.main, 0.6),
+    stroke: alpha(theme.palette.primary.main, 0.6),
+    color: alpha(theme.palette.primary.main, 0.6),
   },
   outerDivOther: {
-    stroke: fade(theme.palette.secondary.main, 0.6),
+    stroke: alpha(theme.palette.secondary.main, 0.6),
   },
   innerDiv: {
     width: "inherit",
diff --git a/src/components/Workspace/CopyCode.js b/src/components/Workspace/CopyCode.js
index b701ded..02d255d 100644
--- a/src/components/Workspace/CopyCode.js
+++ b/src/components/Workspace/CopyCode.js
@@ -69,7 +69,7 @@ class CopyCode extends Component {
               className={`copyCode ${this.props.classes.iconButton}`}
               onClick={() => this.copyCode()}
             >
-              <FontAwesomeIcon icon={faCopy} size="m" />
+              <FontAwesomeIcon icon={faCopy} size="xs" />
             </IconButton>
           </Tooltip>
         ) : (
diff --git a/src/reducers/generalReducer.js b/src/reducers/generalReducer.js
index 1d1acfe..7cde579 100644
--- a/src/reducers/generalReducer.js
+++ b/src/reducers/generalReducer.js
@@ -25,7 +25,7 @@ const initialSounds = () => {
   if (window.localStorage.getItem("sounds")) {
     return window.localStorage.getItem("sounds");
   } else {
-    return "off";
+    return false;
   }
 };