diff --git a/src/commons/sagas/WorkspaceSaga.ts b/src/commons/sagas/WorkspaceSaga.ts
index e0f4f00da7..ba91932000 100644
--- a/src/commons/sagas/WorkspaceSaga.ts
+++ b/src/commons/sagas/WorkspaceSaga.ts
@@ -1232,6 +1232,14 @@ export function* evalCode(
     yield* dumpDisplayBuffer(workspaceLocation, isStoriesBlock, storyEnv);
     if (!isStoriesBlock) {
       yield put(actions.evalInterpreterError(context.errors, workspaceLocation));
+      // enable the CSE machine visualizer during errors
+      if (context.executionMethod === 'cse-machine' && needUpdateCse) {
+        yield put(actions.updateStepsTotal(context.runtime.envStepsTotal + 1, workspaceLocation));
+        yield put(actions.toggleUpdateCse(false, workspaceLocation as any));
+        yield put(
+          actions.updateBreakpointSteps(context.runtime.breakpointSteps, workspaceLocation)
+        );
+      }
     } else {
       // Safe to use ! as storyEnv will be defined from above when we call from EVAL_STORY
       yield put(actions.evalStoryError(context.errors, storyEnv!));
diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap
index 2b891ca541..3ded2a0fb5 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap
@@ -27,7 +27,7 @@ exports[`CSE Machine component renders correctly 1`] = `
         className="bp5-slider-track"
       >
         <div
-          className="bp5-slider-progress"
+          className="bp5-slider-progress bp5-intent-primary"
           style={
             Object {
               "left": "0.00%",
@@ -37,7 +37,7 @@ exports[`CSE Machine component renders correctly 1`] = `
           }
         />
         <div
-          className="bp5-slider-progress bp5-intent-primary"
+          className="bp5-slider-progress"
           style={
             Object {
               "left": "0.00%",
@@ -59,13 +59,24 @@ exports[`CSE Machine component renders correctly 1`] = `
       </div>
       <div
         className="bp5-slider-axis"
-      />
+      >
+        <div
+          className="bp5-slider-label"
+          style={
+            Object {
+              "left": "NaN%",
+            }
+          }
+        >
+          0
+        </div>
+      </div>
       <span
         aria-disabled={true}
         aria-orientation="horizontal"
         aria-valuemax={0}
-        aria-valuemin={1}
-        aria-valuenow={1}
+        aria-valuemin={0}
+        aria-valuenow={0}
         className="bp5-slider-handle"
         role="slider"
         style={Object {}}
@@ -74,7 +85,7 @@ exports[`CSE Machine component renders correctly 1`] = `
         <span
           className="bp5-slider-label"
         >
-          1
+          0
         </span>
       </span>
     </div>
@@ -335,6 +346,7 @@ exports[`CSE Machine component renders correctly 1`] = `
     </div>
   </div>
    
+  <div />
   <div
     className="bp5-running-text"
     data-testid="cse-machine-default-text"
diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
index a5494c3a4e..39f0a7621c 100644
--- a/src/commons/sideContent/content/SideContentCseMachine.tsx
+++ b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -15,12 +15,13 @@ import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { Output } from 'src/commons/repl/Repl';
 import type { PlaygroundWorkspaceState } from 'src/commons/workspace/WorkspaceTypes';
 import CseMachine from 'src/features/cseMachine/CseMachine';
 import { CseAnimation } from 'src/features/cseMachine/CseMachineAnimation';
 import { Layout } from 'src/features/cseMachine/CseMachineLayout';
 
-import { OverallState } from '../../application/ApplicationTypes';
+import { InterpreterOutput, OverallState } from '../../application/ApplicationTypes';
 import { HighlightedLines } from '../../editor/EditorTypes';
 import Constants, { Links } from '../../utils/Constants';
 import {
@@ -50,6 +51,7 @@ type StateProps = {
   currentStep: number;
   breakpointSteps: number[];
   needCseUpdate: boolean;
+  machineOutput: InterpreterOutput[];
 };
 
 type OwnProps = {
@@ -96,8 +98,9 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
         // This comment is copied over from workspace saga
         props.setEditorHighlightedLines(0, segments);
       },
+      // We shouldn't be able to move slider to a step number beyond the step limit
       isControlEmpty => {
-        this.setState({ stepLimitExceeded: !isControlEmpty && this.state.lastStep });
+        this.setState({ stepLimitExceeded: false });
       }
     );
   }
@@ -200,11 +203,11 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
         <div className={classNames('sa-substituter', Classes.DARK)}>
           <Slider
             disabled={!this.state.visualization}
-            min={1}
+            min={0}
             max={this.props.stepsTotal}
             onChange={this.sliderShift}
             onRelease={this.sliderRelease}
-            value={this.state.value < 1 ? 1 : this.state.value}
+            value={this.state.value < 0 ? 0 : this.state.value}
           />
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <ButtonGroup>
@@ -296,6 +299,15 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
             </ButtonGroup>
           </div>
         </div>{' '}
+        {this.state.visualization &&
+        this.props.machineOutput.length &&
+        this.props.machineOutput[0].type === 'errors' ? (
+          this.props.machineOutput.map((slice, index) => (
+            <Output output={slice} key={index} usingSubst={false} isHtml={false} />
+          ))
+        ) : (
+          <div></div>
+        )}
         {this.state.visualization ? (
           this.state.stepLimitExceeded ? (
             <div
@@ -387,7 +399,7 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
   };
 
   private stepPrevious = () => {
-    if (this.state.value !== 1) {
+    if (this.state.value !== 0) {
       this.sliderShift(this.state.value - 1);
       this.sliderRelease(this.state.value - 1);
     }
@@ -404,8 +416,8 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
 
   private stepFirst = () => {
     // Move to the first step
-    this.sliderShift(1);
-    this.sliderRelease(1);
+    this.sliderShift(0);
+    this.sliderRelease(0);
   };
 
   private stepLast = (lastStepValue: number) => () => {
@@ -435,8 +447,8 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
         return;
       }
     }
-    this.sliderShift(1);
-    this.sliderRelease(1);
+    this.sliderShift(0);
+    this.sliderRelease(0);
   };
 }
 
@@ -467,7 +479,8 @@ const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
     stepsTotal: workspace.stepsTotal,
     currentStep: workspace.currentStep,
     breakpointSteps: workspace.breakpointSteps,
-    needCseUpdate: workspace.updateCse
+    needCseUpdate: workspace.updateCse,
+    machineOutput: workspace.output
   };
 };
 
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
index 134723b2b5..250b5fc50b 100644
--- a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
+++ b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
@@ -732,36 +732,42 @@ and also the
                                   class="bp5-slider-track"
                                 >
                                   <div
-                                    class="bp5-slider-progress"
-                                    style="left: 0.00%; right: 0.00%; top: 0px;"
+                                    class="bp5-slider-progress bp5-intent-primary"
+                                    style="left: 0.00%; right: 100.00%; top: 0px;"
                                   />
                                   <div
-                                    class="bp5-slider-progress bp5-intent-primary"
-                                    style="left: 0.00%; right: 0.00%; top: 0px;"
+                                    class="bp5-slider-progress"
+                                    style="left: 0.00%; right: 100.00%; top: 0px;"
                                   />
                                   <div
                                     class="bp5-slider-progress"
-                                    style="left: 0.00%; right: 0.00%; top: 0px;"
+                                    style="left: 0.00%; right: 100.00%; top: 0px;"
                                   />
                                 </div>
                                 <div
                                   class="bp5-slider-axis"
-                                />
+                                >
+                                  <div
+                                    class="bp5-slider-label"
+                                  >
+                                    0
+                                  </div>
+                                </div>
                                 <span
                                   aria-disabled="true"
                                   aria-orientation="horizontal"
                                   aria-valuemax="0"
-                                  aria-valuemin="1"
-                                  aria-valuenow="1"
+                                  aria-valuemin="0"
+                                  aria-valuenow="0"
                                   class="bp5-slider-handle"
                                   role="slider"
-                                  style="left: calc(0.00% - 0px);"
+                                  style="left: calc(NaN% - 0px);"
                                   tabindex="0"
                                 >
                                   <span
                                     class="bp5-slider-label"
                                   >
-                                    1
+                                    0
                                   </span>
                                 </span>
                               </div>
@@ -951,6 +957,7 @@ and also the
                               </div>
                             </div>
                              
+                            <div />
                             <div
                               class="bp5-running-text"
                               data-testid="cse-machine-default-text"