diff --git a/src/commons/sideContent/SideContent.tsx b/src/commons/sideContent/SideContent.tsx
index 75cffad579..201f1711d5 100644
--- a/src/commons/sideContent/SideContent.tsx
+++ b/src/commons/sideContent/SideContent.tsx
@@ -12,7 +12,6 @@ import type {
 
 export type SideContentProps = {
   renderActiveTabPanelOnly?: boolean;
-  editorWidth?: string;
   tabs?: {
     beforeDynamicTabs: SideContentTab[];
     afterDynamicTabs: SideContentTab[];
@@ -27,7 +26,6 @@ const renderTab = (
   tab: SideContentTab,
   shouldAlert: boolean,
   workspaceLocation?: SideContentLocation,
-  editorWidth?: string,
   sideContentHeight?: number
 ) => {
   const iconSize = 20;
@@ -56,7 +54,6 @@ const renderTab = (
         props: {
           ...tab.body.props,
           workspaceLocation,
-          editorWidth,
           sideContentHeight
         }
       }
@@ -66,7 +63,7 @@ const renderTab = (
   return <Tab key={tabId} {...tabProps} panel={tabPanel} />;
 };
 
-const SideContent = ({ renderActiveTabPanelOnly, editorWidth, ...props }: SideContentProps) => (
+const SideContent = ({ renderActiveTabPanelOnly, ...props }: SideContentProps) => (
   <SideContentProvider {...props}>
     {({ tabs: allTabs, alerts: tabAlerts, changeTabsCallback, selectedTab, height }) => (
       <div className="side-content">
@@ -80,13 +77,7 @@ const SideContent = ({ renderActiveTabPanelOnly, editorWidth, ...props }: SideCo
             >
               {allTabs.map(tab => {
                 const tabId = getTabId(tab);
-                return renderTab(
-                  tab,
-                  tabAlerts.includes(tabId),
-                  props.workspaceLocation,
-                  editorWidth,
-                  height
-                );
+                return renderTab(tab, tabAlerts.includes(tabId), props.workspaceLocation, height);
               })}
             </Tabs>
           </div>
diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
index 71aa0c31ca..9109bb2e16 100644
--- a/src/commons/sideContent/content/SideContentCseMachine.tsx
+++ b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -14,7 +14,7 @@ import { bindActionCreators } from '@reduxjs/toolkit';
 import classNames from 'classnames';
 import { Chapter } from 'js-slang/dist/types';
 import { debounce } from 'lodash';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
 import HotKeys from 'src/commons/hotkeys/HotKeys';
 import { Output } from 'src/commons/repl/Repl';
@@ -32,20 +32,7 @@ import { beginAlertSideContent } from '../SideContentActions';
 import { getLocation } from '../SideContentHelper';
 import { NonStoryWorkspaceLocation, SideContentTab, SideContentType } from '../SideContentTypes';
 
-type State = {
-  visualization: React.ReactNode;
-  value: number;
-  height: number;
-  width: number;
-  lastStep: boolean;
-  stepLimitExceeded: boolean;
-  chapter: Chapter;
-};
-
-type CseMachineProps = OwnProps & StateProps & DispatchProps;
-
 type StateProps = {
-  editorWidth?: string;
   sideContentHeight?: number;
   stepsTotal: number;
   currentStep: number;
@@ -70,470 +57,389 @@ type DispatchProps = {
   handleAlertSideContent: () => void;
 };
 
-class SideContentCseMachineBase extends React.Component<CseMachineProps, State> {
-  constructor(props: CseMachineProps) {
-    super(props);
-    this.state = {
-      visualization: null,
-      value: -1,
-      width: this.calculateWidth(props.editorWidth),
-      height: this.calculateHeight(props.sideContentHeight),
-      lastStep: false,
-      stepLimitExceeded: false,
-      chapter: props.chapter
-    };
-    if (this.isJava()) {
-      JavaCseMachine.init(
-        visualization => this.setState({ visualization }),
-        (segments: [number, number][]) => {
-          props.setEditorHighlightedLines(0, segments);
+const calculateWidth = (editorWidth?: string) => {
+  const horizontalPadding = 50;
+  const maxWidth = 5000; // limit for visible diagram width for huge screens
+  const width = window.innerWidth - horizontalPadding;
+  return Math.min(width, maxWidth);
+};
+
+const calculateHeight = (sideContentHeight?: number) => {
+  const verticalPadding = 150;
+  const maxHeight = 5000; // limit for visible diagram height for huge screens
+  let height;
+  if (window.innerWidth < Constants.mobileBreakpoint) {
+    // mobile mode
+    height = window.innerHeight - verticalPadding;
+  } else if (sideContentHeight === undefined) {
+    height = window.innerHeight - verticalPadding;
+  } else {
+    height = sideContentHeight - verticalPadding;
+  }
+  return Math.min(height, maxHeight);
+};
+
+type Props = OwnProps & StateProps & DispatchProps;
+
+const SideContentCseMachineBase: React.FC<Props> = ({
+  // DispatchProps
+  handleStepUpdate,
+  handleEditorEval,
+  setEditorHighlightedLines,
+  handleAlertSideContent,
+  ...props
+}) => {
+  const [visualization, setVisualization] = useState<React.ReactNode>(null);
+  const [value, setValue] = useState(-1);
+  const [width, setWidth] = useState(calculateWidth());
+  const [height, setHeight] = useState(calculateHeight(props.sideContentHeight));
+  const [stepLimitExceeded, setStepLimitExceeded] = useState(false);
+
+  const isJava = useCallback(() => props.chapter === Chapter.FULL_JAVA, [props.chapter]);
+
+  const handleResize = useMemo(
+    () =>
+      debounce(() => {
+        const newWidth = calculateWidth();
+        const newHeight = calculateHeight(props.sideContentHeight);
+        if (newWidth !== width || newHeight !== height) {
+          setWidth(newWidth);
+          setHeight(newHeight);
+          CseMachine.updateDimensions(newWidth, newHeight);
         }
-      );
+      }, 300),
+    [props.sideContentHeight, width, height]
+  );
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    CseMachine.redraw();
+
+    return () => {
+      handleResize.cancel();
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+
+  useEffect(() => {
+    if (isJava()) {
+      JavaCseMachine.init(setVisualization, (segments: [number, number][]) => {
+        setEditorHighlightedLines(0, segments);
+      });
     } else {
       CseMachine.init(
         visualization => {
-          this.setState({ visualization }, () => CseAnimation.playAnimation());
-          if (visualization) this.props.handleAlertSideContent();
+          setVisualization(visualization);
+          CseAnimation.playAnimation();
+          if (visualization) handleAlertSideContent();
         },
-        this.state.width,
-        this.state.height,
+        width,
+        height,
         (segments: [number, number][]) => {
-          // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
-          // This comment is copied over from workspace saga
-          props.setEditorHighlightedLines(0, segments);
+          setEditorHighlightedLines(0, segments);
         },
-        // We shouldn't be able to move slider to a step number beyond the step limit
-        isControlEmpty => {
-          this.setState({ stepLimitExceeded: false });
-        }
+        () => setStepLimitExceeded(false)
       );
     }
-  }
+  }, [isJava, handleAlertSideContent, width, height, setEditorHighlightedLines]);
 
-  private isJava(): boolean {
-    return this.props.chapter === Chapter.FULL_JAVA;
-  }
+  const sliderRelease = useCallback(
+    (newValue: number) => {
+      handleEditorEval();
+    },
+    [handleEditorEval]
+  );
 
-  private calculateWidth(editorWidth?: string) {
-    const horizontalPadding = 50;
-    const maxWidth = 5000; // limit for visible diagram width for huge screens
-    let width;
-    if (editorWidth === undefined) {
-      width = window.innerWidth - horizontalPadding;
-    } else {
-      width = Math.min(
-        maxWidth,
-        (window.innerWidth * (100 - parseFloat(editorWidth))) / 100 - horizontalPadding
-      );
-    }
-    return Math.min(width, maxWidth);
-  }
+  const sliderShift = useCallback(
+    (newValue: number) => {
+      handleStepUpdate(newValue);
+      setValue(newValue);
+    },
+    [handleStepUpdate]
+  );
 
-  private calculateHeight(sideContentHeight?: number) {
-    const verticalPadding = 150;
-    const maxHeight = 5000; // limit for visible diagram height for huge screens
-    let height;
-    if (window.innerWidth < Constants.mobileBreakpoint) {
-      // mobile mode
-      height = window.innerHeight - verticalPadding;
-    } else if (sideContentHeight === undefined) {
-      height = window.innerHeight - verticalPadding;
-    } else {
-      height = sideContentHeight - verticalPadding;
+  const stepPrevious = useCallback(() => {
+    if (value !== 0) {
+      sliderShift(value - 1);
+      sliderRelease(value - 1);
     }
-    return Math.min(height, maxHeight);
-  }
+  }, [value, sliderShift, sliderRelease]);
 
-  handleResize = debounce(() => {
-    const newWidth = this.calculateWidth(this.props.editorWidth);
-    const newHeight = this.calculateHeight(this.props.sideContentHeight);
-    if (newWidth !== this.state.width || newHeight !== this.state.height) {
-      this.setState({
-        height: newHeight,
-        width: newWidth
-      });
-      CseMachine.updateDimensions(newWidth, newHeight);
+  const stepNext = useCallback(() => {
+    const lastStepValue = props.stepsTotal;
+    if (value !== lastStepValue) {
+      sliderShift(value + 1);
+      sliderRelease(value + 1);
+      CseAnimation.enableAnimations();
     }
-  }, 300);
-
-  componentDidMount() {
-    this.handleResize();
-    window.addEventListener('resize', this.handleResize);
-    CseMachine.redraw();
-  }
+  }, [value, props.stepsTotal, sliderShift, sliderRelease]);
 
-  componentWillUnmount() {
-    this.handleResize.cancel();
-    window.removeEventListener('resize', this.handleResize);
-  }
+  const stepFirst = useCallback(() => {
+    // Move to the first step
+    sliderShift(0);
+    sliderRelease(0);
+  }, [sliderShift, sliderRelease]);
+
+  const stepLast = useCallback(
+    (lastStepValue: number) => {
+      // Move to the last step
+      sliderShift(lastStepValue);
+      sliderRelease(lastStepValue);
+    },
+    [sliderShift, sliderRelease]
+  );
 
-  componentDidUpdate(prevProps: {
-    editorWidth?: string;
-    sideContentHeight?: number;
-    stepsTotal: number;
-    needCseUpdate: boolean;
-  }) {
-    if (
-      prevProps.sideContentHeight !== this.props.sideContentHeight ||
-      prevProps.editorWidth !== this.props.editorWidth
-    ) {
-      this.handleResize();
+  const stepNextBreakpoint = useCallback(() => {
+    for (const step of props.breakpointSteps) {
+      if (step > value) {
+        sliderShift(step);
+        sliderRelease(step);
+        return;
+      }
+    }
+    sliderShift(props.stepsTotal);
+    sliderRelease(props.stepsTotal);
+  }, [props.breakpointSteps, props.stepsTotal, value, sliderShift, sliderRelease]);
+
+  const stepPrevBreakpoint = useCallback(() => {
+    for (let i = props.breakpointSteps.length - 1; i >= 0; i--) {
+      const step = props.breakpointSteps[i];
+      if (step < value) {
+        sliderShift(step);
+        sliderRelease(step);
+        return;
+      }
     }
-    if (prevProps.needCseUpdate && !this.props.needCseUpdate) {
-      this.stepFirst();
-      if (this.isJava()) {
+    sliderShift(0);
+    sliderRelease(0);
+  }, [props.breakpointSteps, value, sliderShift, sliderRelease]);
+
+  const stepNextChangepoint = useCallback(() => {
+    for (const step of props.changepointSteps) {
+      if (step > value) {
+        sliderShift(step);
+        sliderRelease(step);
+        return;
+      }
+    }
+    sliderShift(props.stepsTotal);
+    sliderRelease(props.stepsTotal);
+  }, [props.changepointSteps, props.stepsTotal, value, sliderShift, sliderRelease]);
+
+  const stepPrevChangepoint = useCallback(() => {
+    for (let i = props.changepointSteps.length - 1; i >= 0; i--) {
+      const step = props.changepointSteps[i];
+      if (step < value) {
+        sliderShift(step);
+        sliderRelease(step);
+        return;
+      }
+    }
+    sliderShift(0);
+    sliderRelease(0);
+  }, [props.changepointSteps, value, sliderShift, sliderRelease]);
+
+  useEffect(() => {
+    if (props.needCseUpdate) {
+      stepFirst();
+      if (isJava()) {
         JavaCseMachine.clearCse();
       } else {
         CseMachine.clearCse();
       }
     }
-  }
+  }, [props.needCseUpdate, isJava, stepFirst]);
 
-  public render() {
-    const hotkeyBindings: HotkeyItem[] = this.state.visualization
-      ? [
-          ['a', this.stepFirst],
-          ['f', this.stepNext],
-          ['b', this.stepPrevious],
-          ['e', this.stepLast(this.props.stepsTotal)]
-        ]
-      : [
-          ['a', () => {}],
-          ['f', () => {}],
-          ['b', () => {}],
-          ['e', () => {}]
-        ];
-
-    return (
-      <HotKeys
-        bindings={hotkeyBindings}
-        style={{
-          maxHeight: '100%',
-          overflow: this.state.visualization ? 'hidden' : 'auto'
-        }}
-      >
-        <div className={classNames('sa-substituter', Classes.DARK)}>
-          <Slider
-            disabled={!this.state.visualization}
-            min={0}
-            max={this.props.stepsTotal}
-            onChange={this.sliderShift}
-            onRelease={this.sliderRelease}
-            value={this.state.value < 0 ? 0 : this.state.value}
-          />
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: this.isJava() ? 'center' : 'space-between',
-              alignItems: 'center'
-            }}
-          >
-            {!this.isJava() && (
-              <ButtonGroup>
-                <Tooltip content="Control and Stash" compact>
-                  <AnchorButton
-                    onMouseUp={() => {
-                      if (this.state.visualization) {
-                        CseMachine.toggleControlStash();
-                        CseMachine.redraw();
-                      }
-                    }}
-                    icon="layers"
-                    disabled={!this.state.visualization}
-                  >
-                    <Checkbox
-                      checked={CseMachine.getControlStash()}
-                      disabled={!this.state.visualization}
-                      style={{ margin: 0 }}
-                    />
-                  </AnchorButton>
-                </Tooltip>
-                <Tooltip content="Truncate Control" compact>
-                  <AnchorButton
-                    onMouseUp={() => {
-                      if (this.state.visualization) {
-                        CseMachine.toggleStackTruncated();
-                        CseMachine.redraw();
-                      }
-                    }}
-                    icon="minimize"
-                    disabled={!this.state.visualization}
-                  >
-                    <Checkbox
-                      checked={CseMachine.getStackTruncated()}
-                      disabled={!this.state.visualization}
-                      style={{ margin: 0 }}
-                    />
-                  </AnchorButton>
-                </Tooltip>
-              </ButtonGroup>
-            )}
+  const zoomStage = useCallback(
+    (isZoomIn: boolean, multiplier: number) => {
+      if (isJava()) {
+        JavaCseMachine.zoomStage(isZoomIn, multiplier);
+      } else {
+        Layout.zoomStage(isZoomIn, multiplier);
+      }
+    },
+    [isJava]
+  );
+
+  const hotkeyBindings: HotkeyItem[] = useMemo(
+    () =>
+      visualization
+        ? [
+            ['a', stepFirst],
+            ['f', stepNext],
+            ['b', stepPrevious],
+            ['e', () => stepLast(props.stepsTotal)]
+          ]
+        : [
+            ['a', () => {}],
+            ['f', () => {}],
+            ['b', () => {}],
+            ['e', () => {}]
+          ],
+    [visualization, stepFirst, stepNext, stepPrevious, props.stepsTotal, stepLast]
+  );
+
+  return (
+    <HotKeys
+      bindings={hotkeyBindings}
+      style={{
+        maxHeight: '100%',
+        overflow: visualization ? 'hidden' : 'auto'
+      }}
+    >
+      <div className={classNames('sa-substituter', Classes.DARK)}>
+        <Slider
+          disabled={!visualization}
+          min={0}
+          max={props.stepsTotal}
+          onChange={sliderShift}
+          onRelease={sliderRelease}
+          value={value < 0 ? 0 : value}
+        />
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: isJava() ? 'center' : 'space-between',
+            alignItems: 'center'
+          }}
+        >
+          {!isJava() && (
             <ButtonGroup>
-              <Button
-                disabled={!this.state.visualization}
-                icon="double-chevron-left"
-                onClick={this.stepPrevBreakpoint}
-              />
-              <Button
-                disabled={!this.state.visualization}
-                icon="chevron-left"
-                onClick={
-                  this.isJava() || CseMachine.getControlStash()
-                    ? this.stepPrevious
-                    : this.stepPrevChangepoint
-                }
-              />
-              <Button
-                disabled={!this.state.visualization}
-                icon="chevron-right"
-                onClick={
-                  this.isJava() || CseMachine.getControlStash()
-                    ? this.stepNext
-                    : this.stepNextChangepoint
-                }
-              />
-              <Button
-                disabled={!this.state.visualization}
-                icon="double-chevron-right"
-                onClick={this.stepNextBreakpoint}
-              />
+              <Tooltip content="Control and Stash" compact>
+                <AnchorButton
+                  onMouseUp={() => {
+                    if (visualization) {
+                      CseMachine.toggleControlStash();
+                      CseMachine.redraw();
+                    }
+                  }}
+                  icon="layers"
+                  disabled={!visualization}
+                >
+                  <Checkbox
+                    checked={CseMachine.getControlStash()}
+                    disabled={!visualization}
+                    style={{ margin: 0 }}
+                  />
+                </AnchorButton>
+              </Tooltip>
+              <Tooltip content="Truncate Control" compact>
+                <AnchorButton
+                  onMouseUp={() => {
+                    if (visualization) {
+                      CseMachine.toggleStackTruncated();
+                      CseMachine.redraw();
+                    }
+                  }}
+                  icon="minimize"
+                  disabled={!visualization}
+                >
+                  <Checkbox
+                    checked={CseMachine.getStackTruncated()}
+                    disabled={!visualization}
+                    style={{ margin: 0 }}
+                  />
+                </AnchorButton>
+              </Tooltip>
             </ButtonGroup>
-            {!this.isJava() && (
-              <ButtonGroup>
-                <Tooltip content="Print" compact>
-                  <AnchorButton
-                    onMouseUp={() => {
-                      if (this.state.visualization) {
-                        CseMachine.togglePrintableMode();
-                        CseMachine.redraw();
-                      }
-                    }}
-                    icon="print"
-                    disabled={!this.state.visualization}
-                  >
-                    <Checkbox
-                      disabled={!this.state.visualization}
-                      checked={CseMachine.getPrintableMode()}
-                      style={{ margin: 0 }}
-                    />
-                  </AnchorButton>
-                </Tooltip>
-                <Tooltip content="Save" compact>
-                  <AnchorButton
-                    icon="floppy-disk"
-                    disabled={!this.state.visualization}
-                    onClick={Layout.exportImage}
+          )}
+          <ButtonGroup>
+            <Button
+              disabled={!visualization}
+              icon="double-chevron-left"
+              onClick={stepPrevBreakpoint}
+            />
+            <Button
+              disabled={!visualization}
+              icon="chevron-left"
+              onClick={
+                isJava() || CseMachine.getControlStash() ? stepPrevious : stepPrevChangepoint
+              }
+            />
+            <Button
+              disabled={!visualization}
+              icon="chevron-right"
+              onClick={isJava() || CseMachine.getControlStash() ? stepNext : stepNextChangepoint}
+            />
+            <Button
+              disabled={!visualization}
+              icon="double-chevron-right"
+              onClick={stepNextBreakpoint}
+            />
+          </ButtonGroup>
+          {!isJava() && (
+            <ButtonGroup>
+              <Tooltip content="Print" compact>
+                <AnchorButton
+                  onMouseUp={() => {
+                    if (visualization) {
+                      CseMachine.togglePrintableMode();
+                      CseMachine.redraw();
+                    }
+                  }}
+                  icon="print"
+                  disabled={!visualization}
+                >
+                  <Checkbox
+                    disabled={!visualization}
+                    checked={CseMachine.getPrintableMode()}
+                    style={{ margin: 0 }}
                   />
-                </Tooltip>
-              </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
-              id="cse-machine-default-text"
-              className={Classes.RUNNING_TEXT}
-              data-testid="cse-machine-default-text"
-            >
-              Maximum number of steps exceeded.
-              <Divider />
-              Please increase the step limit if you would like to see futher evaluation.
-            </div>
-          ) : (
-            this.state.visualization
-          )
-        ) : (
+                </AnchorButton>
+              </Tooltip>
+              <Tooltip content="Save" compact>
+                <AnchorButton
+                  icon="floppy-disk"
+                  disabled={!visualization}
+                  onClick={Layout.exportImage}
+                />
+              </Tooltip>
+            </ButtonGroup>
+          )}
+        </div>
+      </div>
+      {visualization && props.machineOutput.length && props.machineOutput[0].type === 'errors' ? (
+        props.machineOutput.map((slice, index) => (
+          <Output output={slice} key={index} usingSubst={false} isHtml={false} />
+        ))
+      ) : (
+        <div></div>
+      )}
+      {visualization ? (
+        stepLimitExceeded ? (
           <div
             id="cse-machine-default-text"
             className={Classes.RUNNING_TEXT}
             data-testid="cse-machine-default-text"
           >
-            {this.isJava() ? (
-              <span>
-                The CSEC machine generates control, stash, environment and class model diagrams
-                adapted from the notation introduced in{' '}
-                <a href={Links.textbookChapter3_2} rel="noopener noreferrer" target="_blank">
-                  <i>
-                    Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter
-                    3, Section 2
-                  </i>
-                </a>
-                {'. '}
-                You have chosen the sublanguage{' '}
-                <a href={`${Links.sourceDocs}java_csec/`} rel="noopener noreferrer" target="_blank">
-                  <i>Java CSEC</i>
-                </a>
-              </span>
-            ) : (
-              <span>
-                The CSE machine generates control, stash and environment model diagrams following a
-                notation introduced in{' '}
-                <a href={Links.textbookChapter3_2} rel="noopener noreferrer" target="_blank">
-                  <i>
-                    Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter
-                    3, Section 2
-                  </i>
-                </a>
-              </span>
-            )}
-            .
-            <br />
-            <br /> On this tab, the REPL will be hidden from view, so do check that your code has no
-            errors before running the stepper. You may use this tool by running your program and
-            then dragging the slider above to see the state of the control, stash and environment at
-            different stages in the evaluation of your program. Clicking on the fast-forward button
-            (double chevron) will take you to the next breakpoint in your program
-            <br />
-            <br />
+            Maximum number of steps exceeded.
             <Divider />
-            Some useful keyboard shortcuts:
-            <br />
-            <br />
-            a: Move to the first step
-            <br />
-            e: Move to the last step
-            <br />
-            f: Move to the next step
-            <br />
-            b: Move to the previous step
-            <br />
-            <br />
-            Note that these shortcuts are only active when the browser focus is on this tab.
+            Please increase the step limit if you would like to see futher evaluation.
           </div>
-        )}
-        <ButtonGroup
-          vertical={true}
-          style={{ position: 'absolute', bottom: '20px', right: '20px' }}
-        >
-          <Button
-            icon="plus"
-            disabled={!this.state.visualization}
-            onClick={() => this.zoomStage(true, 5)}
-            style={{ marginBottom: '5px', borderRadius: '3px' }}
-          />
-          <Button
-            icon="minus"
-            disabled={!this.state.visualization}
-            onClick={() => this.zoomStage(false, 5)}
-            style={{ borderRadius: '3px' }}
-          />
-        </ButtonGroup>
-      </HotKeys>
-    );
-  }
-
-  private zoomStage = (isZoomIn: boolean, multiplier: number) => {
-    if (this.isJava()) {
-      JavaCseMachine.zoomStage(isZoomIn, multiplier);
-    } else {
-      Layout.zoomStage(isZoomIn, multiplier);
-    }
-  };
-
-  private sliderRelease = (newValue: number) => {
-    if (newValue === this.props.stepsTotal) {
-      this.setState({ lastStep: true });
-    } else {
-      this.setState({ lastStep: false });
-    }
-    this.props.handleEditorEval();
-  };
-
-  private sliderShift = (newValue: number) => {
-    this.props.handleStepUpdate(newValue);
-    this.setState((state: State) => {
-      return { value: newValue };
-    });
-  };
-
-  private stepPrevious = () => {
-    if (this.state.value !== 0) {
-      this.sliderShift(this.state.value - 1);
-      this.sliderRelease(this.state.value - 1);
-    }
-  };
-
-  private stepNext = () => {
-    const lastStepValue = this.props.stepsTotal;
-    if (this.state.value !== lastStepValue) {
-      this.sliderShift(this.state.value + 1);
-      this.sliderRelease(this.state.value + 1);
-      CseAnimation.enableAnimations();
-    }
-  };
-
-  private stepFirst = () => {
-    // Move to the first step
-    this.sliderShift(0);
-    this.sliderRelease(0);
-  };
-
-  private stepLast = (lastStepValue: number) => () => {
-    // Move to the last step
-    this.sliderShift(lastStepValue);
-    this.sliderRelease(lastStepValue);
-  };
-
-  private stepNextBreakpoint = () => {
-    for (const step of this.props.breakpointSteps) {
-      if (step > this.state.value) {
-        this.sliderShift(step);
-        this.sliderRelease(step);
-        return;
-      }
-    }
-    this.sliderShift(this.props.stepsTotal);
-    this.sliderRelease(this.props.stepsTotal);
-  };
-
-  private stepPrevBreakpoint = () => {
-    for (let i = this.props.breakpointSteps.length - 1; i >= 0; i--) {
-      const step = this.props.breakpointSteps[i];
-      if (step < this.state.value) {
-        this.sliderShift(step);
-        this.sliderRelease(step);
-        return;
-      }
-    }
-    this.sliderShift(0);
-    this.sliderRelease(0);
-  };
-
-  private stepNextChangepoint = () => {
-    for (const step of this.props.changepointSteps) {
-      if (step > this.state.value) {
-        this.sliderShift(step);
-        this.sliderRelease(step);
-        return;
-      }
-    }
-    this.sliderShift(this.props.stepsTotal);
-    this.sliderRelease(this.props.stepsTotal);
-  };
-
-  private stepPrevChangepoint = () => {
-    for (let i = this.props.changepointSteps.length - 1; i >= 0; i--) {
-      const step = this.props.changepointSteps[i];
-      if (step < this.state.value) {
-        this.sliderShift(step);
-        this.sliderRelease(step);
-        return;
-      }
-    }
-    this.sliderShift(0);
-    this.sliderRelease(0);
-  };
-}
+        ) : (
+          visualization
+        )
+      ) : (
+        <CseMachineDefaultText isJava={isJava()} />
+      )}
+      <ButtonGroup vertical={true} style={{ position: 'absolute', bottom: '20px', right: '20px' }}>
+        <Button
+          icon="plus"
+          disabled={!visualization}
+          onClick={() => zoomStage(true, 5)}
+          style={{ marginBottom: '5px', borderRadius: '3px' }}
+        />
+        <Button
+          icon="minus"
+          disabled={!visualization}
+          onClick={() => zoomStage(false, 5)}
+          style={{ borderRadius: '3px' }}
+        />
+      </ButtonGroup>
+    </HotKeys>
+  );
+};
 
 const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
   state: OverallState,
@@ -602,4 +508,66 @@ const makeCseMachineTabFrom = (location: NonStoryWorkspaceLocation): SideContent
   id: SideContentType.cseMachine
 });
 
+const CseMachineDefaultText: React.FC<{ isJava: boolean }> = ({ isJava }) => {
+  return (
+    <div
+      id="cse-machine-default-text"
+      className={Classes.RUNNING_TEXT}
+      data-testid="cse-machine-default-text"
+    >
+      {isJava ? (
+        <span>
+          The CSEC machine generates control, stash, environment and class model diagrams adapted
+          from the notation introduced in{' '}
+          <a href={Links.textbookChapter3_2} rel="noopener noreferrer" target="_blank">
+            <i>
+              Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3,
+              Section 2
+            </i>
+          </a>
+          {'. '}
+          You have chosen the sublanguage{' '}
+          <a href={`${Links.sourceDocs}java_csec/`} rel="noopener noreferrer" target="_blank">
+            <i>Java CSEC</i>
+          </a>
+        </span>
+      ) : (
+        <span>
+          The CSE machine generates control, stash and environment model diagrams following a
+          notation introduced in{' '}
+          <a href={Links.textbookChapter3_2} rel="noopener noreferrer" target="_blank">
+            <i>
+              Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3,
+              Section 2
+            </i>
+          </a>
+        </span>
+      )}
+      .
+      <br />
+      <br /> On this tab, the REPL will be hidden from view, so do check that your code has no
+      errors before running the stepper. You may use this tool by running your program and then
+      dragging the slider above to see the state of the control, stash and environment at different
+      stages in the evaluation of your program. Clicking on the fast-forward button (double chevron)
+      will take you to the next breakpoint in your program
+      <br />
+      <br />
+      <Divider />
+      Some useful keyboard shortcuts:
+      <br />
+      <br />
+      a: Move to the first step
+      <br />
+      e: Move to the last step
+      <br />
+      f: Move to the next step
+      <br />
+      b: Move to the previous step
+      <br />
+      <br />
+      Note that these shortcuts are only active when the browser focus is on this tab.
+    </div>
+  );
+};
+
 export default makeCseMachineTabFrom;