diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js
index e4f74da..35a972a 100644
--- a/src/components/CodeViewer.js
+++ b/src/components/CodeViewer.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
@@ -56,7 +56,7 @@ const AccordionDetails = withStyles((theme) => ({
 
 class CodeViewer extends Component {
 
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
       expanded: true,
@@ -67,12 +67,12 @@ class CodeViewer extends Component {
 
   componentDidMount() {
     Prism.highlightAll();
-    this.setState({componentHeight: this.myDiv.current.offsetHeight+'px'});
+    this.setState({ componentHeight: this.myDiv.current.offsetHeight + 'px' });
   }
 
   componentDidUpdate(props, state) {
-    if(this.myDiv.current && this.myDiv.current.offsetHeight+'px' !== this.state.componentHeight){
-      this.setState({componentHeight: this.myDiv.current.offsetHeight+'px'});
+    if (this.myDiv.current && this.myDiv.current.offsetHeight + 'px' !== this.state.componentHeight) {
+      this.setState({ componentHeight: this.myDiv.current.offsetHeight + 'px' });
     }
     Prism.highlightAll();
   }
@@ -85,19 +85,19 @@ class CodeViewer extends Component {
     var curlyBrackets = '{ }';
     var unequal = '<>';
     return (
-      <Card style={{height: '100%', maxHeight: '500px'}} ref={this.myDiv}>
+      <Card style={{ height: '100%', maxHeight: '80vH' }} ref={this.myDiv}>
         <Accordion
           square={true}
-          style={{margin: 0}}
+          style={{ margin: 0 }}
           expanded={this.state.expanded}
           onChange={this.onChange}
         >
           <AccordionSummary>
-            <b style={{fontSize: '20px', marginRight: '5px', width: '35px'}}>{curlyBrackets}</b>
-            <div style={{margin: 'auto 5px 2px 0px'}}>Arduino Quellcode</div>
+            <b style={{ fontSize: '20px', marginRight: '5px', width: '35px' }}>{curlyBrackets}</b>
+            <div style={{ margin: 'auto 5px 2px 0px' }}>Arduino Quellcode</div>
           </AccordionSummary>
-          <AccordionDetails style={{padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white'}}>
-            <pre className="line-numbers" style={{paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
+          <AccordionDetails style={{ padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white' }}>
+            <pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}>
               <code className="language-clike">
                 {this.props.arduino}
               </code>
@@ -106,16 +106,16 @@ class CodeViewer extends Component {
         </Accordion>
         <Accordion
           square={true}
-          style={{margin: 0}}
+          style={{ margin: 0 }}
           expanded={!this.state.expanded}
           onChange={this.onChange}
         >
           <AccordionSummary>
-            <b style={{fontSize: '20px', marginRight: '5px', width: '35px'}}>{unequal}</b>
-            <div style={{margin: 'auto 5px 2px 0px'}}>XML Blöcke</div>
+            <b style={{ fontSize: '20px', marginRight: '5px', width: '35px' }}>{unequal}</b>
+            <div style={{ margin: 'auto 5px 2px 0px' }}>XML Blöcke</div>
           </AccordionSummary>
-          <AccordionDetails style={{padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white'}}>
-            <pre className="line-numbers" style={{paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
+          <AccordionDetails style={{ padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white' }}>
+            <pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}>
               <code className="language-xml">
                 {`${this.props.xml}`}
               </code>
diff --git a/src/components/Home.js b/src/components/Home.js
index fc0f35d..86deb9a 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -56,7 +56,7 @@ class Home extends Component {
     Blockly.svgResize(workspace);
   }
 
-  componentWillUnmount(){
+  componentWillUnmount() {
     this.props.clearStats();
     this.props.workspaceName(null);
   }
@@ -73,21 +73,21 @@ class Home extends Component {
   render() {
     return (
       <div>
-        <div style={{float: 'right', height: '40px', marginBottom: '20px'}}><WorkspaceFunc /></div>
-        <div style={{float: 'left', height: '40px', position: 'relative'}}><WorkspaceStats /></div>
+        <div style={{ float: 'right', height: '40px', marginBottom: '20px' }}><WorkspaceFunc /></div>
+        <div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
         <Grid container spacing={2}>
           <Grid item xs={12} md={this.state.codeOn ? 6 : 12} style={{ position: 'relative' }}>
             <Tooltip title={this.state.codeOn ? 'Code ausblenden' : 'Code anzeigen'} >
               <IconButton
                 className={this.state.codeOn ? this.props.classes.codeOn : this.props.classes.codeOff}
-                style={{width: '40px', height: '40px', position: 'absolute', top: -12, right: 8, zIndex: 21 }}
+                style={{ width: '40px', height: '40px', position: 'absolute', top: -12, right: 8, zIndex: 21 }}
                 onClick={() => this.onChange()}
               >
-                <FontAwesomeIcon icon={faCode} size="xs"/>
+                <FontAwesomeIcon icon={faCode} size="xs" />
               </IconButton>
             </Tooltip>
             <TrashcanButtons />
-            <BlocklyWindow blocklyCSS={{height: '500px'}} blockDisabled/>
+            <BlocklyWindow blocklyCSS={{ height: '80vH' }} blockDisabled />
           </Grid>
           {this.state.codeOn ?
             <Grid item xs={12} md={6}>
diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js
index 2756ba2..3cd546b 100644
--- a/src/components/Tutorial/Assessment.js
+++ b/src/components/Tutorial/Assessment.js
@@ -14,13 +14,13 @@ import Typography from '@material-ui/core/Typography';
 
 class Assessment extends Component {
 
-  componentDidMount(){
+  componentDidMount() {
     // alert(this.props.name);
     this.props.workspaceName(this.props.name);
   }
 
-  componentDidUpdate(props){
-    if(props.name !== this.props.name){
+  componentDidUpdate(props) {
+    if (props.name !== this.props.name) {
       // alert(this.props.name);
       this.props.workspaceName(this.props.name);
     }
@@ -34,23 +34,23 @@ class Assessment extends Component {
     var statusTask = status.tasks[taskIndex];
 
     return (
-      <div style={{width: '100%'}}>
-        <Typography variant='h4' style={{float: 'left', marginBottom: '5px', height: '40px', display: 'table'}}>{currentTask.headline}</Typography>
-        <div style={{float: 'right', height: '40px'}}><WorkspaceFunc solutionCheck/></div>
-        <Grid container spacing={2} style={{marginBottom: '5px'}}>
+      <div style={{ width: '100%' }}>
+        <Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
+        <div style={{ float: 'right', height: '40px' }}><WorkspaceFunc solutionCheck /></div>
+        <Grid container spacing={2} style={{ marginBottom: '5px' }}>
           <Grid item xs={12} md={6} lg={8}>
             <BlocklyWindow
               initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
               blockDisabled
-              blocklyCSS={{height: '500px'}}
+              blocklyCSS={{ height: '65vH' }}
             />
           </Grid>
-          <Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? {height: 'max-content'} : {}}>
-            <Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}>
+          <Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? { height: 'max-content' } : {}}>
+            <Card style={{ height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px' }}>
               <Typography variant='h5'>Arbeitsauftrag</Typography>
               <Typography>{currentTask.text}</Typography>
             </Card>
-            <div style={isWidthDown('sm', this.props.width) ? {height: '500px'} : {height: '50%'}}>
+            <div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
               <CodeViewer />
             </div>
           </Grid>