diff --git a/src/components/grapher/Dot.vue b/src/components/grapher/Dot.vue
index 83d0a67..9688162 100644
--- a/src/components/grapher/Dot.vue
+++ b/src/components/grapher/Dot.vue
@@ -48,22 +48,41 @@ import Vue from "vue";
 import StuntSheet from "@/models/StuntSheet";
 import DotAppearance from "@/models/DotAppearance";
 
+const nextSSDotAppearance = new DotAppearance({
+  filled: true,
+  fill: "purple",
+  color: "purple",
+});
+
+const nextSSUnconnectedDotAppearance = new DotAppearance({
+  ...nextSSDotAppearance,
+  fill: "deeppink",
+  color: "deeppink",
+});
+
 /**
  * Renders a single dot
  */
 export default Vue.extend({
   name: "Dot",
   props: {
+    isNextSS: Boolean,
     dotTypeIndex: Number,
     label: String,
     labeled: Boolean,
     selected: Boolean,
+    isConnected: Boolean,
   },
   computed: {
     radius(): number {
-      return 0.7;
+      return this.$props.isNextSS ? 0.5 : 0.7;
     },
     dotAppearance(): DotAppearance {
+      if (this.$props.isNextSS) {
+        return this.$props.isConnected
+          ? nextSSDotAppearance
+          : nextSSUnconnectedDotAppearance;
+      }
       const currentSS: StuntSheet = this.$store.getters.getSelectedStuntSheet;
       return currentSS.dotAppearances[this.dotTypeIndex];
     },
diff --git a/src/components/grapher/Grapher.vue b/src/components/grapher/Grapher.vue
index a12ba81..66b9ac4 100644
--- a/src/components/grapher/Grapher.vue
+++ b/src/components/grapher/Grapher.vue
@@ -10,6 +10,7 @@
       <!-- Note:Inside svg, 1px = 1 eight-to-five step -->
       <g class="grapher--wrapper" data-test="grapher--wrapper">
         <GrapherField />
+        <GrapherFlow />
         <GrapherDots />
         <GrapherTool />
       </g>
@@ -20,6 +21,7 @@
 <script lang="ts">
 import Vue from "vue";
 import GrapherField from "./GrapherField.vue";
+import GrapherFlow from "./GrapherFlow.vue";
 import GrapherDots from "./GrapherDots.vue";
 import GrapherTool from "./GrapherTool.vue";
 import svgPanZoom from "svg-pan-zoom";
@@ -33,6 +35,7 @@ export default Vue.extend({
   name: "Grapher",
   components: {
     GrapherField,
+    GrapherFlow,
     GrapherDots,
     GrapherTool,
   },
diff --git a/src/components/grapher/GrapherDots.vue b/src/components/grapher/GrapherDots.vue
index 2950c4f..15be2cf 100644
--- a/src/components/grapher/GrapherDots.vue
+++ b/src/components/grapher/GrapherDots.vue
@@ -11,7 +11,22 @@
       :label="label"
       :labeled="showDotLabels"
       :selected="selectedDotIds.includes(dot.id)"
+      :isNextSS="false"
+      :isConnected="dot.nextDotId !== null"
     />
+    <template v-if="isViewModeFlow">
+      <Dot
+        v-for="[label, dot, isConnected, isSelected] in nextSSDots"
+        :key="`${dot.id}-dots--dot`"
+        class="grapher-dots--dot"
+        :transform="`translate(${dot.xAtBeat(0)}, ${dot.yAtBeat(0)})`"
+        :label="label"
+        :labeled="showDotLabels"
+        :selected="isSelected"
+        :isNextSS="true"
+        :isConnected="isConnected"
+      />
+    </template>
   </g>
 </template>
 
@@ -20,6 +35,8 @@ import Vue from "vue";
 import StuntSheetDot from "@/models/StuntSheetDot";
 import Dot from "./Dot.vue";
 import Show from "@/models/Show";
+import { CalChartState } from "@/store";
+import { VIEW_MODES } from "@/store/constants";
 
 /**
  * Renders the field, the dots of the current stunt sheet, and pending dots
@@ -46,6 +63,35 @@ export default Vue.extend({
         return this.$store.state.beat;
       },
     },
+    isViewModeFlow(): boolean {
+      return (this.$store.state as CalChartState).viewMode === VIEW_MODES.FLOW;
+    },
+    nextSSDots(): [string | null, StuntSheetDot, boolean, boolean][] {
+      /**
+       * Returns an array with contents:
+       * 0: Previous dot's label
+       * 1: StuntSheetDot from the next stuntsheet
+       * 2: Boolean indicating if the dot is connected to the current stunt sheet
+       * 3: Boolean indicating if the dot is connected to a selected dot on the current stunt sheet
+       */
+      const { show, selectedSS } = this.$store.state as CalChartState;
+      if (selectedSS + 1 >= show.stuntSheets.length) {
+        return [];
+      }
+
+      return show.stuntSheets[selectedSS + 1].stuntSheetDots.map((dot) => {
+        const prevDotWithLabel = this.dotsWithLabels.find(
+          ([, prevDot]) => prevDot.nextDotId === dot.id
+        );
+        return [
+          prevDotWithLabel ? prevDotWithLabel[0] : null,
+          dot,
+          !!prevDotWithLabel,
+          !!prevDotWithLabel &&
+            this.selectedDotIds.includes(prevDotWithLabel[1].id),
+        ];
+      });
+    },
   },
 });
 </script>
diff --git a/src/components/grapher/GrapherFlow.vue b/src/components/grapher/GrapherFlow.vue
new file mode 100644
index 0000000..45a831b
--- /dev/null
+++ b/src/components/grapher/GrapherFlow.vue
@@ -0,0 +1,47 @@
+<template>
+  <g v-if="isViewModeFlow">
+    <g v-for="cachedFlow in selectedDotsFlows" :key="cachedFlow">
+      <polyline
+        class="grapher--flow-line"
+        v-if="cachedFlow && cachedFlow.length > 1"
+        :points="
+          cachedFlow.map((flowBeat) => `${flowBeat.x},${flowBeat.y}`).join(` `)
+        "
+      />
+    </g>
+  </g>
+</template>
+
+<script lang="ts">
+import { FlowBeat } from "@/models/util/FlowBeat";
+import { CalChartState } from "@/store";
+import { VIEW_MODES } from "@/store/constants";
+import Vue from "vue";
+
+/**
+ * Renders each selected dots' cachedFlow.
+ */
+export default Vue.extend({
+  name: "GrapherFlow",
+  computed: {
+    isViewModeFlow(): boolean {
+      return this.$store.state.viewMode === VIEW_MODES.FLOW;
+    },
+    selectedDotsFlows(): (FlowBeat[] | null)[] {
+      const { selectedDotIds, show, selectedSS } = this.$store
+        .state as CalChartState;
+      return show.stuntSheets[selectedSS].stuntSheetDots
+        .filter((dot) => selectedDotIds.includes(dot.id))
+        .map((dot) => dot.cachedFlow);
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.grapher--flow-line {
+  fill: none;
+  stroke: $founders-rock;
+  stroke-width: 0.75;
+}
+</style>
diff --git a/src/components/menu-bottom/MenuBottom.vue b/src/components/menu-bottom/MenuBottom.vue
index 84c874a..d2abe89 100644
--- a/src/components/menu-bottom/MenuBottom.vue
+++ b/src/components/menu-bottom/MenuBottom.vue
@@ -27,12 +27,15 @@ import BaseTool, { ToolConstructor } from "@/tools/BaseTool";
 import ToolBoxSelect from "@/tools/ToolBoxSelect";
 import ToolLassoSelect from "@/tools/ToolLassoSelect";
 import ToolSingleDot from "@/tools/ToolSingleDot";
+import ToolConnectDots from "@/tools/ToolConnectDots";
 import { Mutations } from "@/store/mutations";
+import { VIEW_MODES } from "@/store/constants";
 
 interface ToolData {
   label: string;
-  icon: string;
+  icon: string; // See https://materialdesignicons.com/
   tool: ToolConstructor;
+  forceViewMode?: VIEW_MODES;
   "data-test": string;
 }
 
@@ -59,8 +62,16 @@ export default Vue.extend({
         label: "Add and Remove Single Dot",
         icon: "plus-minus",
         tool: ToolSingleDot,
+        forceViewMode: VIEW_MODES.STUNTSHEET,
         "data-test": "add-rm",
       },
+      {
+        label: "Connect Dots between Stuntsheets",
+        icon: "transit-connection-horizontal",
+        tool: ToolConnectDots,
+        forceViewMode: VIEW_MODES.FLOW,
+        "data-test": "connect-dots",
+      },
     ],
     toolSelectedIndex: 0, // Assume that 0 is the pan/zoom tool
   }),
@@ -70,14 +81,16 @@ export default Vue.extend({
   methods: {
     setTool(toolIndex: number): void {
       this.$data.toolSelectedIndex = toolIndex;
-      const ToolConstructor: ToolConstructor = this.$data.toolDataList[
-        toolIndex
-      ].tool;
+      const toolItem = this.$data.toolDataList[toolIndex];
+      const ToolConstructor: ToolConstructor = toolItem.tool;
       const tool: BaseTool = new ToolConstructor();
       this.$store.commit(Mutations.SET_TOOL_SELECTED, tool);
       if (!tool.supportsSelection) {
         this.$store.commit(Mutations.CLEAR_SELECTED_DOTS);
       }
+      if (toolItem.forceViewMode) {
+        this.$store.commit(Mutations.SET_VIEW_MODE, toolItem.forceViewMode);
+      }
     },
   },
 });
diff --git a/src/components/menu-right/MenuRight.vue b/src/components/menu-right/MenuRight.vue
index 3c7822b..d84c202 100644
--- a/src/components/menu-right/MenuRight.vue
+++ b/src/components/menu-right/MenuRight.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="menu-right">
+    <ViewModeForm />
+    <hr />
     <SelectedDotEditor />
     <hr />
     <DotTypeEditorWrapper />
@@ -7,6 +9,7 @@
 </template>
 
 <script lang="ts">
+import ViewModeForm from "./ViewModeForm.vue";
 import SelectedDotEditor from "./SelectedDotEditor.vue";
 import DotTypeEditorWrapper from "./DotTypeEditorWrapper.vue";
 import Vue from "vue";
@@ -14,6 +17,7 @@ import Vue from "vue";
 export default Vue.extend({
   name: "MenuRight",
   components: {
+    ViewModeForm,
     SelectedDotEditor,
     DotTypeEditorWrapper,
   },
diff --git a/src/components/menu-right/ViewModeForm.vue b/src/components/menu-right/ViewModeForm.vue
new file mode 100644
index 0000000..7261a05
--- /dev/null
+++ b/src/components/menu-right/ViewModeForm.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <b-field label="View Mode">
+      <b-select v-model="viewMode">
+        <option
+          v-for="viewModeOption in viewModeOptions"
+          :key="viewModeOption"
+          :value="viewModeOption"
+        >
+          {{ viewModeOption }}
+        </option>
+      </b-select>
+    </b-field>
+  </div>
+</template>
+
+<script lang="ts">
+import { CalChartState } from "@/store";
+import { VIEW_MODES } from "@/store/constants";
+import { Mutations } from "@/store/mutations";
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "ViewModeForm",
+  computed: {
+    viewMode: {
+      get(): VIEW_MODES {
+        return (this.$store.state as CalChartState).viewMode;
+      },
+      set(viewModeOption: VIEW_MODES): void {
+        this.$store.commit(Mutations.SET_VIEW_MODE, viewModeOption);
+      },
+    },
+    viewModeOptions(): string[] {
+      return Object.values(VIEW_MODES);
+    },
+  },
+});
+</script>
diff --git a/src/store/constants.ts b/src/store/constants.ts
new file mode 100644
index 0000000..1f321b1
--- /dev/null
+++ b/src/store/constants.ts
@@ -0,0 +1,11 @@
+/**
+ * Defines the different ways that the data can be viewed and interacted with in the UI
+ */
+export enum VIEW_MODES {
+  // "Stuntsheet" mode is for viewing and updating a specific stuntsheet.
+  // Used for drawing and editing formations.
+  STUNTSHEET = "Stuntsheet",
+  // "Flow" mode is for viewing and updating the transition between two stuntsheets.
+  // Used for creating and editing continuities.
+  FLOW = "Flow",
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index 4235f22..c2479ae 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import Vuex, { Store } from "vuex";
+import { VIEW_MODES } from "./constants";
 import { mutations } from "./mutations";
 import getters from "./getters";
 import Show from "@/models/Show";
@@ -17,6 +18,7 @@ Vue.use(Vuex);
  * @property initialShowState  - Beginning spot for show
  * @property selectedSS        - Index of stuntsheet currently in view
  * @property beat              - The point in time the show is in
+ * @property viewMode          - Defines the possible UI interactions
  * @property fourStepGrid      - View setting to toggle the grapher grid
  * @property grapherSvgPanZoom - Initialized upon mounting Grapher
  * @property invertedCTMMatrix - Used to calculate clientX/Y to SVG X/Y
@@ -32,6 +34,8 @@ export class CalChartState extends Serializable<CalChartState> {
 
   beat = 0;
 
+  viewMode: VIEW_MODES = VIEW_MODES.STUNTSHEET;
+
   fourStepGrid = true;
 
   yardlines = true;
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 97e61dc..48ab428 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -14,6 +14,7 @@ import DotAppearance from "@/models/DotAppearance";
 import { MARCH_TYPES } from "@/models/util/constants";
 import ContETFStatic from "@/models/continuity/ContETFStatic";
 import ContGateTurn from "@/models/continuity/ContGateTurn";
+import { VIEW_MODES } from "./constants";
 
 export enum Mutations {
   // Show mutations:
@@ -34,6 +35,8 @@ export enum Mutations {
   SET_STUNT_SHEET_BEATS = "Set Stund Sheet beats",
   ADD_DOT_TYPE = "Add Marcher type",
   ADD_CONTINUITY = "Add Continuity",
+  // StuntSheetDot mutations:
+  SET_DOT_NEXT_DOT_ID = "setDotNextDotId",
   // Continuity mutations:
   UPDATE_DOT_TYPE_MARCH_STYLE = "Update Marcher Step Style",
   UPDATE_DOT_TYPE_DURATION = "Update Marcher Duration",
@@ -44,6 +47,7 @@ export enum Mutations {
   UPDATE_DOT_TYPE_ANGLE = "Update Marcher Angle",
 
   // View mutations:
+  SET_VIEW_MODE = "setViewMode",
   SET_SELECTED_SS = "setSelectedSS",
   SET_BEAT = "setBeat",
   INCREMENT_BEAT = "incrementBeat",
@@ -219,6 +223,22 @@ export const mutations: MutationTree<CalChartState> = {
     currentSS.calculateIssuesDeep(state.selectedSS);
   },
 
+  // Show -> StuntSheet -> StuntSheetDot
+  [Mutations.SET_DOT_NEXT_DOT_ID](
+    state,
+    { dotId, nextDotId }: { dotId: number; nextDotId: number | null }
+  ) {
+    const getSelectedStuntSheet = getters.getSelectedStuntSheet as (
+      state: CalChartState
+    ) => StuntSheet;
+    const currentSS = getSelectedStuntSheet(state);
+    const currentDot = currentSS.stuntSheetDots.find((dot) => dot.id === dotId);
+    if (currentDot) {
+      currentDot.nextDotId = nextDotId;
+      state.show.generateFlows(state.selectedSS);
+    }
+  },
+
   // Show -> StuntSheet -> BaseCont
   [Mutations.UPDATE_DOT_TYPE_MARCH_STYLE](
     state,
@@ -395,6 +415,9 @@ export const mutations: MutationTree<CalChartState> = {
   },
 
   // View Settings
+  [Mutations.SET_VIEW_MODE](state, viewMode: VIEW_MODES): void {
+    state.viewMode = viewMode;
+  },
   [Mutations.SET_FOUR_STEP_GRID](state, enabled: boolean): void {
     state.fourStepGrid = enabled;
   },
diff --git a/src/tools/BaseTool.ts b/src/tools/BaseTool.ts
index 0f38340..1323444 100644
--- a/src/tools/BaseTool.ts
+++ b/src/tools/BaseTool.ts
@@ -64,6 +64,23 @@ export default abstract class BaseTool {
     });
   }
 
+  /**
+   * returns dot from the next stunt sheet at mouse event, or undefined if nothing found
+   **/
+  static findNextSSDotAtEvent(event: MouseEvent): StuntSheetDot | undefined {
+    const [x, y] = BaseTool.convertClientCoordinatesRounded(event);
+    const { show, selectedSS } = GlobalStore.state;
+    const nextSelectedSS = selectedSS + 1;
+    if (nextSelectedSS >= show.stuntSheets.length) {
+      return;
+    }
+    const stuntSheetDots: StuntSheetDot[] =
+      show.stuntSheets[nextSelectedSS].stuntSheetDots;
+    return stuntSheetDots.find((dot: StuntSheetDot): boolean => {
+      return x === dot.xAtBeat(0) && y === dot.yAtBeat(0);
+    });
+  }
+
   /**
    * Convert clientX/Y to the X/Y coordinates on the SVG rectangle.
    **/
diff --git a/src/tools/ToolConnectDots.ts b/src/tools/ToolConnectDots.ts
new file mode 100644
index 0000000..6cb4836
--- /dev/null
+++ b/src/tools/ToolConnectDots.ts
@@ -0,0 +1,68 @@
+import { ToastProgrammatic as Toast } from "buefy";
+import { BNoticeComponent } from "buefy/types/components";
+import BaseMoveTool from "./BaseMoveTool";
+import BaseTool, { ToolConstructor } from "./BaseTool";
+import { GlobalStore } from "@/store";
+import { Mutations } from "@/store/mutations";
+
+/**
+ * Connect dots between stuntsheets. This tool is performed in 2 steps:
+ * 1. Select a dot in the current stuntsheet
+ * 2. Select a dot in the next stuntsheet to connect to
+ */
+const ToolConnectDots: ToolConstructor = class ToolConnectDots extends BaseMoveTool {
+  private toast: BNoticeComponent | undefined;
+
+  constructor() {
+    super();
+    GlobalStore.commit(Mutations.CLEAR_SELECTED_DOTS);
+    this.openToast(
+      "Connect Dots tool activated. Select a dot from the current stuntsheet."
+    );
+  }
+
+  onMouseUpInternal(event: MouseEvent): void {
+    const { selectedDotIds, show, selectedSS } = GlobalStore.state;
+    if (selectedDotIds.length === 1) {
+      const nextSSDot = BaseTool.findNextSSDotAtEvent(event);
+      if (nextSSDot) {
+        const stuntSheetDots = show.stuntSheets[selectedSS].stuntSheetDots;
+        const prevConnectedDot = stuntSheetDots.find(
+          (dot) => dot.nextDotId === nextSSDot.id
+        );
+        if (prevConnectedDot) {
+          GlobalStore.commit(Mutations.SET_DOT_NEXT_DOT_ID, {
+            dotId: prevConnectedDot.id,
+            nextDotId: null,
+          });
+        }
+        GlobalStore.commit(Mutations.SET_DOT_NEXT_DOT_ID, {
+          dotId: selectedDotIds[0],
+          nextDotId: nextSSDot.id,
+        });
+        GlobalStore.commit(Mutations.CLEAR_SELECTED_DOTS);
+        this.openToast("Dots successfully connectted!", 2000);
+      }
+    } else {
+      const selectedDot = BaseTool.findDotAtEvent(event);
+      if (selectedDot) {
+        GlobalStore.commit(Mutations.ADD_SELECTED_DOTS, [selectedDot.id]);
+        this.openToast(
+          "Dot selected. Now, select a dot from the next stuntsheet (pink indicates dots that have not been connected yet)."
+        );
+      }
+    }
+  }
+
+  private openToast(message: string, duration = 7000) {
+    this.toast && this.toast.close();
+    this.toast = Toast.open({
+      type: "is-info",
+      queue: false,
+      duration,
+      message,
+    });
+  }
+};
+
+export default ToolConnectDots;
diff --git a/tests/e2e/specs/menu-bottom/MenuBottom.spec.js b/tests/e2e/specs/menu-bottom/MenuBottom.spec.js
index 77400c9..e2b3303 100644
--- a/tests/e2e/specs/menu-bottom/MenuBottom.spec.js
+++ b/tests/e2e/specs/menu-bottom/MenuBottom.spec.js
@@ -4,7 +4,7 @@ describe("components/menu-bottom/MenuBottom", () => {
   });
 
   it("all buttons are rendered and box select is selected", () => {
-    cy.get('[data-test="menu-bottom--tooltip"]').should("have.length", 3);
+    cy.get('[data-test="menu-bottom--tooltip"]').should("have.length", 4);
 
     cy.get('[data-test="menu-bottom-tool--select-box-move"]').should(
       "have.class",
@@ -13,7 +13,7 @@ describe("components/menu-bottom/MenuBottom", () => {
 
     cy.get('[data-test="menu-bottom--tooltip"] .is-light').should(
       "have.length",
-      2
+      3
     );
   });
 
@@ -25,7 +25,7 @@ describe("components/menu-bottom/MenuBottom", () => {
 
     cy.get('[data-test="menu-bottom--tooltip"] .is-light').should(
       "have.length",
-      2
+      3
     );
 
     // eslint-disable-next-line cypress/require-data-selectors
diff --git a/tests/unit/components/menu-bottom/MenuBottom.spec.ts b/tests/unit/components/menu-bottom/MenuBottom.spec.ts
index 1e2588f..e8218a8 100644
--- a/tests/unit/components/menu-bottom/MenuBottom.spec.ts
+++ b/tests/unit/components/menu-bottom/MenuBottom.spec.ts
@@ -39,7 +39,7 @@ describe("components/menu-bottom/MenuBottom", () => {
 
     it("renders the correct amount of tools", () => {
       expect(menu.findAll('[data-test="menu-bottom--tooltip"]')).toHaveLength(
-        3
+        4
       );
     });