diff --git a/classes/activities/class.circle-of-support.php b/classes/activities/class.circle-of-support.php
index 777539526..d359a9da8 100644
--- a/classes/activities/class.circle-of-support.php
+++ b/classes/activities/class.circle-of-support.php
@@ -88,9 +88,6 @@ public function removeConnectionFromCommunity($connectionId, $communityId)
 
     public function deleteConnection($connectionId)
     {
-        if (!isset($this->current['connections']->$connectionId)) {
-            return;
-        }
         $this->removeConnectionFromCircles($connectionId);
 
         foreach ($this->current['communities'] as $key => $value) {
@@ -100,7 +97,9 @@ public function deleteConnection($connectionId)
             $this->removeConnectionFromCommunity($connectionId, $key);
         }
 
-        unset($this->current['connections']->$connectionId);
+        if (isset($this->current['connections']->$connectionId)) {
+            unset($this->current['connections']->$connectionId);
+        }
     }
 
     public function updateConnection($id, $connection)
diff --git a/classes/class.tapestry-node.php b/classes/class.tapestry-node.php
index f17b31ed5..591b844db 100644
--- a/classes/class.tapestry-node.php
+++ b/classes/class.tapestry-node.php
@@ -46,7 +46,6 @@ class TapestryNode implements ITapestryNode
     private $license;
     private $references;
     private $mapCoordinates;
-    private $isDyad;
     private $popup;
 
     /**
@@ -99,7 +98,6 @@ public function __construct($tapestryPostId = 0, $nodeMetaId = 0)
             'lat' => '',
             'lng' => '',
         ];
-        $this->isDyad = false;
         $this->popup = null;
 
         if (TapestryHelpers::isValidTapestryNode($this->nodeMetaId)) {
@@ -208,9 +206,6 @@ public function set($node)
         if (isset($node->hideTitle) && is_bool($node->hideTitle)) {
             $this->hideTitle = $node->hideTitle;
         }
-        if (isset($node->isDyad) && is_bool($node->isDyad)) {
-            $this->isDyad = $node->isDyad;
-        }
         if (isset($node->hideProgress) && is_bool($node->hideProgress)) {
             $this->hideProgress = $node->hideProgress;
         }
@@ -304,7 +299,7 @@ public function removeConditionsById($nodeId)
         }
     }
 
-    public function getLockedState()
+    public function getLockedState($userId = 0)
     {
         $conditions = $this->conditions;
         $userProgress = new TapestryUserProgress($this->tapestryPostId, $this->nodeMetaId);
@@ -316,8 +311,7 @@ public function getLockedState()
         foreach ($conditions as $condition) {
             switch ($condition->type) {
                 case ConditionTypes::NODE_COMPLETED:
-                    $conditionProgress = new TapestryUserProgress($this->tapestryPostId, $condition->nodeId);
-                    if ($conditionProgress->isCompleted()) {
+                    if ($userId && $userProgress->isCompleted($condition->nodeId, $userId)) {
                         $condition->fulfilled = true;
                     }
                     break;
@@ -339,9 +333,9 @@ public function getLockedState()
         return $conditions;
     }
 
-    public function isLocked()
+    public function isLocked($userId = 0)
     {
-        $conditions = $this->getLockedState();
+        $conditions = $this->getLockedState($userId);
 
         $numFulfilled = 0;
         foreach ($conditions as $condition) {
@@ -389,11 +383,6 @@ public function isAuthor($userId = 0)
         return $nodeMeta->author->id == $userId;
     }
 
-    public function isDyad()
-    {
-        return $this->isDyad;
-    }
-
     public function addReview($comments)
     {
         if (NodeStatus::PUBLISH === $this->status) {
@@ -588,7 +577,6 @@ private function _formNode()
             'license' => $this->license,
             'references' => $this->references,
             'mapCoordinates' => $this->mapCoordinates,
-            'isDyad' => $this->isDyad,
             'popup' => $this->popup,
         ];
     }
diff --git a/classes/class.tapestry-user-progress.php b/classes/class.tapestry-user-progress.php
index 6320d37df..e3b8eb24a 100644
--- a/classes/class.tapestry-user-progress.php
+++ b/classes/class.tapestry-user-progress.php
@@ -13,8 +13,6 @@ class TapestryUserProgress implements ITapestryUserProgress
     private $_userId = null;
     private $postId;
     private $nodeMetaId;
-    private $_dyadLinkedUserId = null;
-    private $node;
 
     /**
      * Constructor.
@@ -26,27 +24,9 @@ class TapestryUserProgress implements ITapestryUserProgress
      */
     public function __construct($postId = null, $nodeMetaId = null)
     {
+        $this->_userId = apply_filters('determine_current_user', false);
         $this->postId = $postId;
         $this->nodeMetaId = $nodeMetaId;
-
-        if ($nodeMetaId) {
-            $this->node = new TapestryNode($postId = null, $nodeMetaId = null);
-        }
-
-        $this->_userId = apply_filters('determine_current_user', false);
-        if ($this->_userId) {
-            global $TYDE_DYAD_ROLES;
-            $isDyadUser = array_intersect(get_userdata($this->_userId)->roles, array_keys($TYDE_DYAD_ROLES));
-            if ($isDyadUser) {
-                $linkedUserId = get_user_meta($this->_userId, 'linked_dyad_user_id', true);
-                if ($linkedUserId) {
-                    if ($this->node && $this->node->isDyad()) {
-                        $this->_userId = $linkedUserId;
-                    }
-                    $this->_dyadLinkedUserId = $linkedUserId;
-                }
-            }
-        }
     }
 
     /**
@@ -62,7 +42,7 @@ public function get()
         $tapestry = new Tapestry($this->postId);
         $nodeIds = $tapestry->getNodeIds();
 
-        return $this->_getUserProgress($nodeIds);
+        return $this->_getUserProgress($nodeIds, $this->_userId);
     }
 
     /**
@@ -75,7 +55,6 @@ public function get()
     public function updateUserProgress($progressValue)
     {
         $this->_checkPostId();
-        $this->_checkProgressAbility();
 
         if (null !== $progressValue) {
             $progressValue = floatval($progressValue);
@@ -97,7 +76,6 @@ public function updateUserProgress($progressValue)
     public function complete()
     {
         $this->_checkPostId();
-        $this->_checkProgressAbility();
         $this->_complete();
     }
 
@@ -112,7 +90,6 @@ public function complete()
     public function completeQuestion($questionId, $answerType, $answerData)
     {
         $this->_checkPostId();
-        $this->_checkProgressAbility();
         $this->_completeQuestion($questionId, $answerType, $answerData);
     }
 
@@ -165,19 +142,8 @@ public function getAvatar()
         return $this->_getAvatar();
     }
 
-    public function isCompleted($nodeId = null, $userId = null)
+    public function isCompleted($nodeId, $userId)
     {
-        if (!$nodeId) {
-            $nodeId = $this->nodeMetaId;
-        }
-        if (!$userId) {
-            $userId = $this->_userId;
-        }
-
-        if (!$userId) {
-            return false;
-        }
-
         $nodeMetadata = get_metadata_by_mid('post', $nodeId)->meta_value;
         $completed_value = get_user_meta($userId, 'tapestry_'.$this->postId.'_node_completed_'.$nodeId, true);
         if (null !== $completed_value) {
@@ -232,24 +198,17 @@ private function _completeQuestion($questionId, $answerType, $answerData)
         update_user_meta($this->_userId, 'tapestry_'.$this->postId.'_'.$this->nodeMetaId.'_question_'.$questionId.'_answers', $userAnswer);
     }
 
-    private function _getUserProgress($nodeIdArr)
+    private function _getUserProgress($nodeIdArr, $userId)
     {
         $progress = new stdClass();
         $tapestry = new Tapestry($this->postId);
 
-        $nodes = $tapestry->setUnlocked($nodeIdArr, $this->_userId);
+        $nodes = $tapestry->setUnlocked($nodeIdArr, $userId);
 
         // Build json object for frontend e.g. {0: 0.1, 1: 0.2} where 0 and 1 are the node IDs
         foreach ($nodes as $node) {
             $nodeId = $node->id;
 
-            $userId = $this->_userId;
-            
-            // Use linked user's progress if the user is a dyad and this node is a dyad node
-            if ($node->isDyad && $this->_dyadLinkedUserId) {
-                $userId = $this->_dyadLinkedUserId;
-            }
-
             $progress_value = get_user_meta($userId, 'tapestry_'.$this->postId.'_progress_node_'.$nodeId, true);
             $progress->$nodeId = new stdClass();
             if (null !== $progress_value) {
@@ -262,10 +221,6 @@ private function _getUserProgress($nodeIdArr)
             $progress->$nodeId->conditions = $node->conditions;
             $progress->$nodeId->unlocked = $node->unlocked;
 
-            if ($node->isDyad && $this->_dyadLinkedUserId) {
-                $progress->$nodeId->node = $node;
-            }
-
             if ($node->accessible) {
                 $progress->$nodeId->content = [
                     'typeData' => $node->typeData,
@@ -401,11 +356,6 @@ private function _checkPostId()
         }
     }
 
-    private function _checkProgressAbility()
-    {
-        return $this->_dyadLinkedUserId && $this->node && $this->node->isDyad();
-    }
-
     private function _isValidTapestryPost()
     {
         // post ID exists in db
diff --git a/classes/class.tapestry.php b/classes/class.tapestry.php
index 8a3dd3c08..2d35c0f89 100644
--- a/classes/class.tapestry.php
+++ b/classes/class.tapestry.php
@@ -342,9 +342,9 @@ public function isEmpty()
         return empty($this->rootId);
     }
 
-    public function setUnlocked($nodeIds)
+    public function setUnlocked($nodeIds, $userId = 0)
     {
-        $nodes = $this->_setAccessibleStatus($nodeIds);
+        $nodes = $this->_setAccessibleStatus($nodeIds, $userId);
 
         return array_map(
             function ($nodeData) {
@@ -354,7 +354,6 @@ function ($nodeData) {
                 $data->accessible = $nodeData->accessible;
                 $data->conditions = $nodeData->conditions;
                 $data->unlocked = $nodeData->unlocked;
-                $data->isDyad = $nodeData->isDyad;
 
                 return $data;
             },
@@ -409,17 +408,16 @@ public function export()
         ];
     }
 
-    private function _setAccessibleStatus($nodes)
+    private function _setAccessibleStatus($nodes, $userId)
     {
         $newNodes = array_map(
-            function ($nodeId) {
+            function ($nodeId) use ($userId) {
                 $node = new TapestryNode($this->postId, $nodeId);
                 $data = new stdClass();
                 $data->id = $nodeId;
                 $data->accessible = false;
-                $data->unlocked = !$node->isLocked();
-                $data->conditions = $node->getLockedState();
-                $data->isDyad = $node->isDyad();
+                $data->unlocked = !$node->isLocked($userId);
+                $data->conditions = $node->getLockedState($userId);
 
                 return $data;
             },
@@ -433,14 +431,13 @@ function ($nodeId) {
                     break;
                 }
             }
-            $this->_recursivelySetAccessibleAndDyad($root, [], [], $newNodes);
+            $this->_recursivelySetAccessible($root, [], $newNodes);
         }
 
         return $newNodes;
     }
 
-    // Note: This also sets the isDyad node recursively
-    private function _recursivelySetAccessibleAndDyad($node, $visited, $dyadNodes, $nodeList)
+    private function _recursivelySetAccessible($node, $visited, $nodeList)
     {
         if (!isset($node)) {
             return;
@@ -448,25 +445,6 @@ private function _recursivelySetAccessibleAndDyad($node, $visited, $dyadNodes, $
         if (!in_array($node, $visited)) {
             array_push($visited, $node);
         }
-
-        // If this node is in the list of dyadNodes, mark it as dyad
-        if (in_array($node->id, $dyadNodes)) {
-            $node->isDyad = true;
-            if (($key = array_search($node->id, $dyadNodes)) !== false) {
-                unset($dyadNodes[$key]);
-            }
-        }
-
-        // If this node is dyad, save its children to be marked as dyad too
-        if ($node->isDyad) {
-            $childNodes = $this->_getNeighbours($node, 'source');
-            foreach ($childNodes as $childNode) {
-                if (!in_array($childNode, $dyadNodes)) {
-                    array_push($dyadNodes, $childNode);
-                }
-            }
-        }
-
         $node->accessible = $node->unlocked;
         if ($node->accessible) {
             $neighbourIds = $this->_getNeighbours($node);
@@ -484,19 +462,18 @@ private function _recursivelySetAccessibleAndDyad($node, $visited, $dyadNodes, $
             foreach ($neighbours as $neighbour) {
                 if (!in_array($neighbour, $visited)) {
                     array_push($visited, $neighbour);
-                    $this->_recursivelySetAccessibleAndDyad($neighbour, $visited, $dyadNodes, $nodeList);
+                    $this->_recursivelySetAccessible($neighbour, $visited, $nodeList);
                 }
             }
         }
     }
 
-    private function _getNeighbours($node, $from = 'both')
+    private function _getNeighbours($node)
     {
         $neighbourIds = [];
 
         foreach ($this->links as $link) {
-            if ((in_array($from, ['both', 'source']) && $link->source === $node->id) ||
-                (in_array($from, ['both', 'target']) && $link->target === $node->id)) {
+            if ($link->source === $node->id || $link->target === $node->id) {
                 array_push(
                     $neighbourIds,
                     $link->source === $node->id ? $link->target : $link->source
diff --git a/tapestry.php b/tapestry.php
index a4e28974c..3af240d58 100644
--- a/tapestry.php
+++ b/tapestry.php
@@ -16,18 +16,6 @@
 // Set this to false if you want to use the Vue build instead of npm dev
 $TAPESTRY_USE_DEV_MODE = true;
 
-// TYDE settings
-$TYDE_YOUTH_ROLES = [
-    'youth' => 'Youth',
-    'youth_l2' => 'Youth (Level 2)',
-    'youth_l3' => 'Youth (Level 3)',
-];
-$TYDE_DYAD_ROLES = [
-    'dyad' => 'Dyad',
-    'dyad_l2' => 'Dyad (Level 2)',
-    'dyad_l3' => 'Dyad (Level 3)',
-];
-
 /**
  * Register endpoints.
  */
@@ -144,16 +132,6 @@ function tapestry_enqueue_vue_app()
         global $TAPESTRY_VERSION_NUMBER;
         global $TAPESTRY_USE_DEV_MODE;
 
-        global $TYDE_DYAD_ROLES;
-        $isDyad = wp_get_current_user() && array_intersect(wp_get_current_user()->roles, array_keys($TYDE_DYAD_ROLES));
-        $dyadLinkedUser = null;
-        if ($isDyad) {
-            $dyadLinkedUserId = get_the_author_meta('linked_dyad_user_id', wp_get_current_user()->ID);
-            if ($dyadLinkedUserId) {
-                $dyadLinkedUser = get_user_by('id', $dyadLinkedUserId)->data;
-            }
-        }
-
         // register the Vue build script.
         $vueUrl = $TAPESTRY_USE_DEV_MODE ? 'http://localhost:8080/dist' : plugin_dir_url(__FILE__).'templates/vue/dist';
 
@@ -184,7 +162,6 @@ function tapestry_enqueue_vue_app()
                 ]),
                 'nonce' => wp_create_nonce('wp_rest'),
                 'wpUserId' => apply_filters('determine_current_user', false),
-                'dyadLinkedWpUser' => $dyadLinkedUser,
                 'adminAjaxUrl' => admin_url('admin-ajax.php'),
                 'file_upload_nonce' => wp_create_nonce('media-form'),
                 'upload_url' => admin_url('async-upload.php'),
@@ -345,70 +322,20 @@ function tapestry_tool_log_event()
 register_activation_hook(__FILE__, 'add_tyde_roles');
 function add_tyde_roles()
 {
-    global $TYDE_DYAD_ROLES;
-    foreach ($TYDE_DYAD_ROLES as $key => $label) {
-        add_role(
-            $key,
-            $label,
-            [
-                'read' => true,
-                'edit_posts' => true,
-            ]
-        );
-    }
-    global $TYDE_YOUTH_ROLES;
-    foreach ($TYDE_YOUTH_ROLES as $key => $label) {
-        add_role(
-            $key,
-            $label,
-            [
-                'read' => true,
-                'edit_posts' => true,
-            ]
-        );
-    }
-}
-
-/**
- * Show the youth user id input if the user is a dyad.
- */
-function add_dyad_youth_user_field($user)
-{
-    global $TYDE_DYAD_ROLES;
-    $isDyadUser = array_intersect($user->roles, array_keys($TYDE_DYAD_ROLES));
-
-    if ($isDyadUser) : ?>
-        <table class="form-table">
-            <tr>
-                <th><label for="linked_dyad_user_id"><?php _e('Linked Youth User ID'); ?></label></th>
-                <td>
-                    <input type="text" name="linked_dyad_user_id" id="linked_dyad_user_id" value="<?php echo esc_attr(get_the_author_meta('linked_dyad_user_id', $user->ID)); ?>" class="regular-text" /><br />
-                    <span class="description"><?php _e("Please enter the user ID for the linked youth user."); ?></span>
-                </td>
-            </tr>
-        </table>
-<?php endif;
-}
-add_action('show_user_profile', 'add_dyad_youth_user_field');
-add_action('edit_user_profile', 'add_dyad_youth_user_field');
-
-/**
- * Save the youth user id input when updated (if the user is a dyad).
- */
-function save_dyad_youth_user_field($user_id)
-{
-    if (!current_user_can('edit_user', $user_id)) {
-        return false;
-    }
-    $user = get_user_by('id', $user_id);
-
-    global $TYDE_DYAD_ROLES;
-    $isDyadUser = array_intersect($user->roles, array_keys($TYDE_DYAD_ROLES));
-    
-    if ($isDyadUser) {
-        $linked_dyad_user_id = intval($_POST['linked_dyad_user_id']);
-        update_user_meta($user_id, 'linked_dyad_user_id', $linked_dyad_user_id);
-    }
-}
-add_action('personal_options_update', 'save_dyad_youth_user_field');
-add_action('edit_user_profile_update', 'save_dyad_youth_user_field');
\ No newline at end of file
+    add_role(
+        'dyad',
+        'Dyad',
+        [
+            'read' => true,
+            'edit_posts' => true,
+        ]
+    );
+    add_role(
+        'youth',
+        'Youth',
+        [
+            'read' => true,
+            'edit_posts' => true,
+        ]
+    );
+}
\ No newline at end of file
diff --git a/templates/vue/src/assets/add-connection-to-circle.gif b/templates/vue/src/assets/add-connection-to-circle.gif
new file mode 100644
index 000000000..22962ecaa
Binary files /dev/null and b/templates/vue/src/assets/add-connection-to-circle.gif differ
diff --git a/templates/vue/src/assets/circle-selections.gif b/templates/vue/src/assets/circle-selections.gif
new file mode 100644
index 000000000..a8ed69f32
Binary files /dev/null and b/templates/vue/src/assets/circle-selections.gif differ
diff --git a/templates/vue/src/components/Lightbox/index.vue b/templates/vue/src/components/Lightbox/index.vue
index 61d172689..40fc6e26c 100644
--- a/templates/vue/src/components/Lightbox/index.vue
+++ b/templates/vue/src/components/Lightbox/index.vue
@@ -106,15 +106,11 @@ export default {
   },
   computed: {
     ...mapState(["h5pSettings", "rootId", "settings"]),
-    ...mapGetters(["getNode", "getParent", "isMultiContent", "isMultiContentRow"]),
+    ...mapGetters(["getNode", "isMultiContent", "isMultiContentRow"]),
     node() {
       const node = this.getNode(this.nodeId)
       return node
     },
-    parentNode() {
-      const parentNodeId = this.getParent(this.node.id)
-      return this.getNode(parentNodeId)
-    },
     canSkip() {
       return this.node.completed || this.node.skippable !== false
     },
@@ -301,16 +297,9 @@ export default {
       this.close()
     },
     close() {
-      let selectedNode = this.nodeId
-      if (
-        this.parentNode?.mediaType === "multi-content" &&
-        this.parentNode?.presentationStyle === "unit"
-      ) {
-        selectedNode = this.parentNode.id
-      }
       this.$router.push({
         name: names.APP,
-        params: { nodeId: selectedNode },
+        params: { nodeId: this.nodeId },
         query: this.$route.query,
       })
     },
diff --git a/templates/vue/src/components/Lightbox/media/ActivityMedia/index.vue b/templates/vue/src/components/Lightbox/media/ActivityMedia/index.vue
index 2365ba690..2c9fd6f56 100644
--- a/templates/vue/src/components/Lightbox/media/ActivityMedia/index.vue
+++ b/templates/vue/src/components/Lightbox/media/ActivityMedia/index.vue
@@ -1,17 +1,6 @@
 <template>
   <div ref="activity" class="activity-media">
     <h1 v-if="showTitle" class="media-title">{{ node.title }}</h1>
-    <b-alert
-      v-if="isDyadNodeAndUser"
-      show
-      variant="warning"
-      class="activity-alert mx-auto"
-    >
-      <strong>Note:</strong>
-      This is a dyad activity which can only be completed through the program for
-      your dyad partner, {{ linkedDyadUserName }}. Any progress displayed below is
-      for your dyad partner.
-    </b-alert>
     <completion-screen
       v-if="state === 'completion-screen'"
       :question="activeQuestion"
@@ -100,7 +89,6 @@ import Question from "./Question"
 import CompletionScreen from "./CompletionScreen"
 import { mapActions, mapGetters } from "vuex"
 import AnswerMedia from "./AnswerMedia.vue"
-import { dyadLinkedUser } from "@/services/wp"
 
 const states = {
   ACTIVITY: "activity",
@@ -150,12 +138,6 @@ export default {
     showTitle() {
       return this.context === "page" && this.node.typeData.showTitle !== false
     },
-    isDyadNodeAndUser() {
-      return !!this.linkedDyadUserName && this.node.isDyad
-    },
-    linkedDyadUserName() {
-      return dyadLinkedUser()?.display_name
-    },
     questions() {
       /* NOTE: If this is an answer node we retreive the single question
        *       that is stored in the answer node.
@@ -199,9 +181,6 @@ export default {
   },
   watch: {
     activeQuestion() {
-      if (this.isDyadNodeAndUser) {
-        return
-      }
       if (this.initialType === states.ACTIVITY) {
         if (this.hasAnswers && this.state === states.ACTIVITY) {
           this.state = states.ANSWER
@@ -212,21 +191,17 @@ export default {
     },
   },
   mounted() {
-    if (this.isDyadNodeAndUser) {
-      this.state = states.ANSWER
-    } else {
-      switch (this.initialType) {
-        case states.ACTIVITY:
-          if (this.hasAnswers) {
-            this.state = states.ANSWER
-          } else {
-            this.state = states.ACTIVITY
-          }
-          break
-        case states.ANSWER:
+    switch (this.initialType) {
+      case states.ACTIVITY:
+        if (this.hasAnswers) {
           this.state = states.ANSWER
-          break
-      }
+        } else {
+          this.state = states.ACTIVITY
+        }
+        break
+      case states.ANSWER:
+        this.state = states.ANSWER
+        break
     }
 
     this.$emit("change:dimensions", {
@@ -278,7 +253,7 @@ export default {
       }
     },
     next() {
-      this.state = this.isDyadNodeAndUser ? states.ANSWER : states.ACTIVITY
+      this.state = states.ACTIVITY
       client.recordAnalyticsEvent("user", "next", "activity", this.node.id, {
         from: this.activeQuestionIndex,
         to: this.activeQuestionIndex + 1,
@@ -286,7 +261,7 @@ export default {
       this.activeQuestionIndex++
     },
     prev() {
-      this.state = this.isDyadNodeAndUser ? states.ANSWER : states.ACTIVITY
+      this.state = states.ACTIVITY
       client.recordAnalyticsEvent("user", "prev", "activity", this.node.id, {
         from: this.activeQuestionIndex,
         to: this.activeQuestionIndex - 1,
@@ -323,10 +298,6 @@ export default {
   z-index: 10;
   padding: 24px;
 
-  .activity-alert {
-    max-width: 500px;
-  }
-
   .media-title {
     text-align: left;
     font-size: 1.75rem;
diff --git a/templates/vue/src/components/Lightbox/media/MultiContentMedia/PageMenu/index.vue b/templates/vue/src/components/Lightbox/media/MultiContentMedia/PageMenu/index.vue
index 8ef1745bd..e51e78b52 100644
--- a/templates/vue/src/components/Lightbox/media/MultiContentMedia/PageMenu/index.vue
+++ b/templates/vue/src/components/Lightbox/media/MultiContentMedia/PageMenu/index.vue
@@ -48,7 +48,7 @@
           },
         ]"
       >
-        <ul class="page-menu-items fa-ul">
+        <ul class="page-menu-item fa-ul">
           <page-menu-item
             v-for="row in rows"
             :key="row.node.id"
@@ -100,22 +100,10 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(["getDirectChildren", "getNode", "isMultiContent", "getParent"]),
+    ...mapGetters(["getDirectChildren", "getNode", "isMultiContent"]),
     nodeId() {
       return parseInt(this.$route.params.nodeId, 10)
     },
-    parentNode() {
-      const parentNodeId = this.getParent(this.node.id)
-      return this.getNode(parentNodeId)
-    },
-    parentNodeTitle() {
-      return this.parentNode?.title ? this.parentNode.title : ""
-    },
-    currentPageTitle() {
-      return this.pages[this.selectedPage]?.title
-        ? this.pages[this.selectedPage]?.title
-        : ""
-    },
     rows() {
       return this.node.childOrdering
         .map(id => {
@@ -201,10 +189,6 @@ export default {
       }
       return nodes
     },
-    changePage(pageNodeId) {
-      this.selectedPage = pageNodeId
-      this.$root.$emit("open-node", pageNodeId)
-    },
     scrollToRef(nodeId) {
       this.$nextTick(() => {
         if (this.rowRefs) {
@@ -270,11 +254,6 @@ export default {
       }
     }
 
-    &.is-unit-child {
-      width: 250px;
-      max-width: 25vw;
-    }
-
     @media screen and (min-width: 960px) {
       font-size: calc(14px + (2 * (100vw - 960px) / 1280px - 960px));
     }
@@ -295,6 +274,10 @@ export default {
       }
     }
 
+    .page-nav-title {
+      margin-bottom: 1em;
+    }
+
     .page-nav-container {
       text-align: left;
     }
@@ -311,60 +294,10 @@ export default {
           }
         }
       }
+
       &.closed {
         display: none;
       }
-
-      .page-menu-items {
-        margin-left: 2em;
-        margin-right: -0.5em;
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.unit-switch-dropdown {
-  margin: 1.2rem -24px !important;
-  button {
-    border-radius: 0;
-    background: #fff2;
-    border-color: #fff1;
-    &:hover {
-      background: transparent;
-      border-color: transparent;
-    }
-    &:first-child {
-      text-align: left;
-      padding-left: 30px;
-      font-size: 1.6em;
-      font-weight: bold;
-    }
-  }
-  .dropdown-menu {
-    width: calc(100% - 10px);
-    margin-top: 5px;
-
-    &::after {
-      content: "";
-      position: absolute;
-      width: 0;
-      height: 0;
-      border: solid 7px #fff;
-      border-bottom-width: 8px;
-      border-left-color: transparent;
-      border-right-color: transparent;
-      border-top-color: transparent;
-      top: -15px;
-      right: 2px;
-    }
-
-    > li {
-      line-height: 1.75em !important;
-      a {
-        white-space: normal !important;
-      }
     }
   }
 }
diff --git a/templates/vue/src/components/Lightbox/media/MultiContentMedia/PageRows.vue b/templates/vue/src/components/Lightbox/media/MultiContentMedia/PageRows.vue
index 4aaebb3d1..d9d0789c1 100644
--- a/templates/vue/src/components/Lightbox/media/MultiContentMedia/PageRows.vue
+++ b/templates/vue/src/components/Lightbox/media/MultiContentMedia/PageRows.vue
@@ -265,12 +265,11 @@ button[disabled] {
   }
 }
 
-.col-lg-6,
+.col-6,
 .page-rows {
   margin-right: -15px;
-  overflow-x: hidden;
 }
-.col-lg-12 {
+.col-12 {
   max-width: calc(100% - 15px);
 }
 
diff --git a/templates/vue/src/components/Lightbox/media/MultiContentMedia/index.vue b/templates/vue/src/components/Lightbox/media/MultiContentMedia/index.vue
index 476bd0d3c..de8315e85 100644
--- a/templates/vue/src/components/Lightbox/media/MultiContentMedia/index.vue
+++ b/templates/vue/src/components/Lightbox/media/MultiContentMedia/index.vue
@@ -324,7 +324,6 @@ button[disabled] {
   max-width: 150vh;
   margin: 0 auto;
   overflow: auto;
-  overflow-x: hidden;
   scrollbar-color: auto black;
   scrollbar-width: none;
 
diff --git a/templates/vue/src/components/modals/NodeModal/forms/ContentForm/MultiContentForm/index.vue b/templates/vue/src/components/modals/NodeModal/forms/ContentForm/MultiContentForm/index.vue
index 3ebf9572c..bfc8d5cbe 100644
--- a/templates/vue/src/components/modals/NodeModal/forms/ContentForm/MultiContentForm/index.vue
+++ b/templates/vue/src/components/modals/NodeModal/forms/ContentForm/MultiContentForm/index.vue
@@ -48,23 +48,14 @@ export default {
       type: String,
       required: true,
     },
-    isUnitChild: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
-  computed: {
-    presentationStyles() {
-      if (this.isUnitChild) {
-        return [{ value: "page", text: "Page" }]
-      }
-      return [
+  data() {
+    return {
+      presentationStyles: [
         { value: "accordion", text: "Accordion" },
         { value: "page", text: "Page" },
-        { value: "unit", text: "Unit (collection of pages)" },
-      ]
-    },
+      ],
+    }
   },
   mounted() {
     // set node defaults
diff --git a/templates/vue/src/components/modals/NodeModal/forms/ContentForm/index.vue b/templates/vue/src/components/modals/NodeModal/forms/ContentForm/index.vue
index 4325ebe2d..2d1f19ef2 100644
--- a/templates/vue/src/components/modals/NodeModal/forms/ContentForm/index.vue
+++ b/templates/vue/src/components/modals/NodeModal/forms/ContentForm/index.vue
@@ -77,8 +77,7 @@
           :is="activeForm"
           v-if="activeForm"
           :node="node"
-          :action-type="actionType"
-          :is-unit-child="isUnitChild"
+          :actionType="actionType"
           @load="$emit('load')"
           @unload="$emit('unload')"
         ></component>
@@ -136,44 +135,31 @@ export default {
   data() {
     return {
       addDesc: false,
+      mediaTypes: [
+        { value: "", text: "Select content type" },
+        {
+          label: "Basic",
+          options: [
+            { value: "text", text: "Text" },
+            { value: "video", text: "Video" },
+            { value: "h5p", text: "H5P" },
+            { value: "url-embed", text: "External Link" },
+            { value: "wp-post", text: "Wordpress Post" },
+            { value: "activity", text: "Activity" },
+            { value: "multi-content", text: "Multi-Content" },
+          ],
+        },
+        {
+          label: "Advanced",
+          options: [{ value: "answer", text: "Answer" }],
+        },
+      ],
       shouldShowTitle: this.node.typeData.showTitle !== false,
       addMenuTitle: false,
     }
   },
-
   computed: {
     ...mapGetters(["isMultiContentRow"]),
-    mediaTypes() {
-      if (this.isUnitChild) {
-        return [{ value: "multi-content", text: "Multi-Content" }]
-      } else {
-        return [
-          { value: "", text: "Select content type" },
-          {
-            label: "Basic",
-            options: [
-              { value: "text", text: "Text" },
-              { value: "video", text: "Video" },
-              { value: "h5p", text: "H5P" },
-              { value: "url-embed", text: "External Link" },
-              { value: "wp-post", text: "Wordpress Post" },
-              { value: "activity", text: "Activity" },
-              { value: "multi-content", text: "Multi-Content" },
-            ],
-          },
-          {
-            label: "Advanced",
-            options: [{ value: "answer", text: "Answer" }],
-          },
-        ]
-      }
-    },
-    isUnitChild() {
-      return (
-        this.parent?.mediaType === "multi-content" &&
-        this.parent?.presentationStyle === "unit"
-      )
-    },
     activeForm() {
       return this.node.mediaType ? this.node.mediaType + "-form" : null
     },
@@ -208,12 +194,6 @@ export default {
     shouldShowTitle(shouldShowTitle) {
       this.node.typeData.showTitle = shouldShowTitle
     },
-    mediaTypes() {
-      this.selectUnitChild()
-    },
-  },
-  created() {
-    this.selectUnitChild()
   },
   methods: {
     handleTypeChange(evt) {
@@ -224,12 +204,6 @@ export default {
       }
       this.$emit("type-changed", evt)
     },
-    selectUnitChild() {
-      if (this.isUnitChild) {
-        this.node.mediaType = "multi-content"
-        this.node.presentationStyle = "page"
-      }
-    },
   },
 }
 </script>
diff --git a/templates/vue/src/components/modals/NodeModal/forms/DyadForm.vue b/templates/vue/src/components/modals/NodeModal/forms/DyadForm.vue
deleted file mode 100644
index d540cbfb5..000000000
--- a/templates/vue/src/components/modals/NodeModal/forms/DyadForm.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div>
-    <h6 class="mt-4 mb-3">
-      Dyad Node
-    </h6>
-    <b-form-group>
-      <b-form-checkbox v-model="node.isDyad">
-        This is a dyad node
-      </b-form-checkbox>
-    </b-form-group>
-    <small id="emailHelp" class="form-text text-muted">
-      This checkbox only affects users who have a dyad role and a linked teen. When
-      checked, dyad users will see their linked partner's progress for this node
-      instead of their own and their own progress will not be saved. Furthermore,
-      dyad users will not be able to answer any activity nodes marked as dyad. Please
-      note that children of dyad nodes will be automatically treated as dyad nodes as
-      well, even if not marked as dyad nodes.
-    </small>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "dyad-form",
-  props: {
-    node: {
-      type: Object,
-      required: true,
-    },
-  },
-}
-</script>
diff --git a/templates/vue/src/components/modals/NodeModal/index.vue b/templates/vue/src/components/modals/NodeModal/index.vue
index 1a5442399..edaa37487 100644
--- a/templates/vue/src/components/modals/NodeModal/index.vue
+++ b/templates/vue/src/components/modals/NodeModal/index.vue
@@ -93,7 +93,6 @@
             </b-card>
             <h6 class="mt-4 mb-3">Lock Node</h6>
             <conditions-form :node="node" />
-            <dyad-form :node="node" />
           </b-tab>
           <b-tab
             v-if="node.mediaType === 'h5p' || node.mediaType === 'video'"
@@ -264,7 +263,6 @@ import ActivityForm from "./forms/ContentForm/ActivityForm"
 import AppearanceForm from "./forms/AppearanceForm"
 import BehaviourForm from "./forms/BehaviourForm"
 import ConditionsForm from "./forms/ConditionsForm"
-import DyadForm from "./forms/DyadForm"
 import CoordinatesForm from "./forms/CoordinatesForm"
 import ContentForm from "./forms/ContentForm"
 import CopyrightForm from "./forms/CopyrightForm"
@@ -295,7 +293,6 @@ export default {
     ContentForm,
     ActivityForm,
     ConditionsForm,
-    DyadForm,
     CoordinatesForm,
     CopyrightForm,
     ReferencesForm,
diff --git a/templates/vue/src/components/modals/SettingsModal/index.vue b/templates/vue/src/components/modals/SettingsModal/index.vue
index a289324af..00c25eaa4 100644
--- a/templates/vue/src/components/modals/SettingsModal/index.vue
+++ b/templates/vue/src/components/modals/SettingsModal/index.vue
@@ -300,6 +300,28 @@
               </b-col>
             </b-row>
           </b-form-group>
+          <b-form-group v-if="tydeModeEnabled">
+            <b-row style="margin: 17px 0;">
+              <b-col cols="6">
+                Enable circle view when this node is complete:
+              </b-col>
+              <b-col cols="6">
+                <combobox
+                  v-model="circleViewNode"
+                  :options="nodesValues"
+                  :placeholder="nodesValues[0].title"
+                  item-text="title"
+                  item-value="id"
+                >
+                  <template v-slot="slotProps">
+                    <p>
+                      {{ slotProps.option.title }}
+                    </p>
+                  </template>
+                </combobox>
+              </b-col>
+            </b-row>
+          </b-form-group>
           <b-form-group
             class="mt-4"
             label="Enable analytics"
@@ -441,6 +463,7 @@ export default {
       analyticsEnabled: false,
       tydeModeEnabled: false,
       tydeModeTabs: { default: {}, goals: "", profile: "" },
+      circleViewNode: null,
       draftNodesEnabled: true,
       submitNodesEnabled: true,
       renderMap: false,
@@ -527,6 +550,7 @@ export default {
         renderMap = false,
         tydeModeEnabled = false,
         tydeModeTabs = { default: {}, goals: "", profile: "" },
+        circleViewNode = null,
         analyticsEnabled = false,
         draftNodesEnabled = true,
         submitNodesEnabled = true,
@@ -544,6 +568,7 @@ export default {
       this.renderMap = renderMap
       this.tydeModeEnabled = tydeModeEnabled
       this.tydeModeTabs = tydeModeTabs
+      this.circleViewNode = circleViewNode
       this.analyticsEnabled = analyticsEnabled
       this.draftNodesEnabled = draftNodesEnabled
       this.submitNodesEnabled = submitNodesEnabled
@@ -587,6 +612,7 @@ export default {
         renderMap: this.renderMap,
         tydeModeEnabled: this.tydeModeEnabled,
         tydeModeTabs: this.tydeModeTabs,
+        circleViewNode: this.circleViewNode,
         analyticsEnabled: this.analyticsEnabled,
         draftNodesEnabled: this.draftNodesEnabled,
         submitNodesEnabled: this.submitNodesEnabled,
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CircleView/index.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/CircleView/index.vue
index cff4b43c7..74ecbe979 100644
--- a/templates/vue/src/components/tyde/activities/CircleOfSupport/CircleView/index.vue
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/CircleView/index.vue
@@ -5,15 +5,19 @@
       class="tab"
       :connections="connections"
       :communities="communities"
+      :toolTipPositioned="toolTipPositioned"
       :draggable="!dragDisabled"
-      @back="handleBack"
-      @add-connection="$emit('add-connection', $event)"
-      @edit-connection="handleEditConnection"
+      @connection-submitted="$emit('connection-submitted')"
       @add-community="$emit('add-community', $event)"
       @delete-connection="$emit('delete-connection', $event)"
+      @back="handleBack"
+      @add-connection="handleAddConnection"
+      @connection-opened="handleConnectionOpened"
+      @edit-connection="handleEditConnection"
       @drag:start="handleDragStart"
       @drag:move="handleDragMove"
       @drag:end="handleDragEnd"
+      @connection-closed="handleConnectionClosed"
     />
     <li
       v-for="(circle, index) in circlesWithData"
@@ -91,6 +95,16 @@
       :topType="currentAvatar.topType"
       :topColor="currentAvatar.topColor"
     ></avataaars>
+    <onboarding
+      :communities="communities"
+      :connections="connections"
+      :circles="circles"
+      :has-connection-in-circles="hasConnectionInCircles"
+      :parent-state="state"
+      :activeView="activeView"
+      @tooltip-positioned="handleToolTipPositioned"
+      @tooltip-removed="handleTooltipRemoved"
+    />
   </ul>
 </template>
 
@@ -99,6 +113,7 @@ import Twemoji from "twemoji"
 import avatarOptions from "@/components/modals/UserSettingsModal/avatarOptions.js"
 import Helpers from "@/utils/Helpers"
 import client from "@/services/TapestryAPI"
+import OnBoarding from "../onboarding/index.vue"
 import ConnectionsTab from "../ConnectionsTab"
 import ConnectionTooltip from "../ConnectionTooltip"
 import SingleConnection from "../SingleConnection"
@@ -116,6 +131,10 @@ const USER_AVATAR_SPACE = 20
 const States = {
   Home: 0,
   EditConnection: 1,
+  ConnectionClosed: 4,
+  AddConnection: 5,
+  MoveConnection: 6,
+  ConnectionOpened: 7,
 }
 
 export default {
@@ -124,6 +143,7 @@ export default {
     CircleToggle,
     ConnectionTooltip,
     SingleConnection,
+    onboarding: OnBoarding,
     Avataaars,
   },
   model: {
@@ -143,14 +163,24 @@ export default {
       type: Array,
       required: true,
     },
+    activeView: {
+      type: Number,
+      required: true,
+    },
+    hasConnectionInCircles: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
       activeCircle: CircleStates.All,
       activeCircleOrig: null,
       state: States.Home,
+      lastState: States.Home,
       activeConnectionId: null,
       draggingConnection: null,
+      toolTipPositioned: false,
       dragDisabled: false,
     }
   },
@@ -203,6 +233,11 @@ export default {
       })
     },
   },
+  watch: {
+    state(_, lastState) {
+      this.lastState = lastState
+    },
+  },
   methods: {
     getCircleBackground(index) {
       if (this.activeCircle === index) {
@@ -227,6 +262,7 @@ export default {
       }, 150)
     },
     handleDragMove({ x, y }) {
+      this.state = States.MoveConnection
       const connectionRef = this.$refs["dragging-connection"]
       connectionRef.style.setProperty("--x", `${x}px`)
       connectionRef.style.setProperty("--y", `${y}px`)
@@ -254,7 +290,6 @@ export default {
         connectionRef.style.setProperty("--x", `0px`)
         connectionRef.style.setProperty("--y", `0px`)
         this.draggingConnection = null
-
         setTimeout(() => this.$refs.connectionsTab.show(), 300)
       } else {
         this.activeCircle = this.activeCircleOrig
@@ -390,6 +425,26 @@ export default {
         )
       )
     },
+    handleAddConnection(event) {
+      this.state = States.AddConnection
+      this.$emit("add-connection", event)
+    },
+    handleConnectionOpened() {
+      this.state = States.ConnectionOpened
+    },
+    handleConnectionClosed() {
+      if (this.state === States.ConnectionClosed) {
+        this.state === States.Home
+      } else {
+        this.state = States.ConnectionClosed
+      }
+    },
+    handleToolTipPositioned() {
+      this.toolTipPositioned = true
+    },
+    handleTooltipRemoved() {
+      this.toolTipPositioned = false
+    },
   },
 }
 </script>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/AddCommunityTab.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/AddCommunityTab.vue
index 114f8a1a2..9ee0a1ffe 100644
--- a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/AddCommunityTab.vue
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/AddCommunityTab.vue
@@ -47,9 +47,9 @@
 
 <script>
 import AddCommunityForm from "./AddCommunityForm"
-import CosPopup from "./CosPopup"
-import CosModal from "./CosModal"
-import CosPopupButton from "./CosPopupButton"
+import CosPopup from "../CosPopup"
+import CosModal from "../CosModal"
+import CosPopupButton from "../CosPopupButton"
 import TapestryIcon from "@/components/common/TapestryIcon"
 import { MAX_COMMUNITIES } from "../cos.config"
 
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/index.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/index.vue
index 206c77d25..cfbda76dd 100644
--- a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/index.vue
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/index.vue
@@ -34,6 +34,8 @@
       :communities="communities"
       :connections="connections"
       :parent-state="state"
+      :active-view="activeView"
+      :has-connection-in-circles="hasConnectionInCircles"
       @tooltip-positioned="handleToolTipPositioned"
       @tooltip-removed="handleTooltipRemoved"
       @add-community="$emit('add-community', $event)"
@@ -42,7 +44,7 @@
 </template>
 
 <script>
-import OnBoarding from "./onboarding/index.vue"
+import OnBoarding from "../onboarding/index.vue"
 import AddCommunityTab from "./AddCommunityTab"
 import ConnectionsTab from "../ConnectionsTab"
 import CommunitiesList from "./CommunitiesList"
@@ -71,6 +73,14 @@ export default {
       type: Object,
       required: true,
     },
+    activeView: {
+      type: Number,
+      required: true,
+    },
+    hasConnectionInCircles: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/index.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/index.vue
deleted file mode 100644
index 1ffa8e8c4..000000000
--- a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/index.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<template>
-  <div
-    style="height: 100%; width: 100%;"
-    @connection-closed="handleConnectionClosed"
-    @connection-submitted="handleConnectionSubmitted"
-  >
-    <welcome-communities
-      v-if="isState('Communities.Welcome')"
-      class="welcome-communities"
-      @continue="handleContinue"
-    />
-    <welcome-connections
-      v-if="isState('Connections.Welcome')"
-      class="welcome-connections"
-      @continue="handleContinue"
-    />
-    <add-confirmation
-      v-if="isState('Communities.AddMoreConfirmation')"
-      @later="send(OnboardingEvents.AddLater)"
-      @another="send(OnboardingEvents.AddAnother)"
-    />
-    <ob-finish-view
-      v-if="isState('Connections.Finish')"
-      :connections="connections"
-      @ob-finish="send(OnboardingEvents.Done)"
-    />
-    <tooltip
-      v-if="isState('Communities.AddLaterTooltip')"
-      class="right"
-      @tooltip-positioned="$emit('tooltip-positioned')"
-    >
-      <h3>
-        Remember - you can click this button whenever you'd like to add another
-        community!
-      </h3>
-      <b-button
-        pill
-        variant="secondary"
-        @click="handleClick(OnboardingEvents.Continue)"
-      >
-        Got it &#8594;
-      </b-button>
-    </tooltip>
-    <tooltip
-      v-if="isState('Communities.AddAnotherTooltip')"
-      class="right"
-      @tooltip-positioned="$emit('tooltip-positioned')"
-    >
-      <h3>
-        Click here to add another community!
-      </h3>
-      <b-button pill variant="secondary" @click="handleClick(OnboardingEvents.Add)">
-        Got it &#8594;
-      </b-button>
-    </tooltip>
-    <tooltip
-      v-if="isState('Connections.AddAnotherTooltip')"
-      class="left"
-      @tooltip-positioned="$emit('tooltip-positioned')"
-    >
-      <h3 style="max-width:300px;">
-        Click here to add some of your connections!
-      </h3>
-      <b-button pill variant="secondary" @click="handleClick(OnboardingEvents.Add)">
-        Got it &#8594;
-      </b-button>
-    </tooltip>
-  </div>
-</template>
-
-<script>
-import { interpret } from "xstate"
-import onboardingMachine, { OnboardingEvents } from "./onboardingMachine"
-import WelcomeCommunities from "./WelcomeCommunities"
-import AddConfirmation from "./AddConfirmation"
-import WelcomeConnections from "./WelcomeConnections"
-import ObFinishView from "./ObFinishView"
-import Tooltip from "./Tooltip"
-const States = {
-  Home: 0,
-  AddCommunity: 1,
-  EditCommunity: 2,
-  EditConnection: 3,
-  ConnectionClosed: 4,
-  AddConnection: 5,
-}
-export default {
-  components: {
-    WelcomeCommunities,
-    AddConfirmation,
-    WelcomeConnections,
-    ObFinishView,
-    Tooltip,
-  },
-  props: {
-    connections: {
-      type: Object,
-      required: true,
-    },
-    communities: {
-      type: Object,
-      required: true,
-    },
-    parentState: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      onboarding: {
-        service: interpret(onboardingMachine),
-        current: onboardingMachine.initialState,
-      },
-      OnboardingEvents: OnboardingEvents,
-    }
-  },
-  watch: {
-    communities() {
-      this.HandleCommunityAdded()
-    },
-    connections() {
-      this.handleConnectionSubmitted()
-    },
-    parentState() {
-      if (this.parentState === States.ConnectionClosed) {
-        this.handleConnectionClosed()
-        this.$emit("connection-closed")
-      }
-    },
-  },
-  mounted() {
-    this.onboarding.service
-      .onTransition(state => (this.onboarding.current = state))
-      .start()
-    this.initializeOnboarding()
-  },
-  methods: {
-    handleConnectionClosed() {
-      if (this.onboarding.current.matches("Connections.FormClosed")) {
-        this.send(OnboardingEvents.Continue)
-      }
-    },
-    handleConnectionSubmitted() {
-      if (
-        this.onboarding.current.matches("Connections.Form") ||
-        this.onboarding.current.matches("Connections.AddAnotherTooltip")
-      ) {
-        this.send(OnboardingEvents.Added)
-      }
-    },
-    HandleCommunityAdded() {
-      if (
-        this.onboarding.current.matches("Communities.Form") ||
-        this.onboarding.current.matches("Communities.AddAnotherTooltip")
-      ) {
-        this.send(OnboardingEvents.Added)
-      }
-    },
-    handleContinue(communities) {
-      if (this.onboarding.current.matches("Communities.Welcome")) {
-        communities.forEach(community => this.$emit("add-community", community))
-      }
-      this.send(OnboardingEvents.Continue)
-    },
-    initializeOnboarding() {
-      let startingEvent = OnboardingEvents.Empty
-      // For now, always initialize the onboarding process at the start
-      if (Object.values(this.communities).length > 0) {
-        startingEvent = OnboardingEvents.Continue
-        if (Object.values(this.connections).length > 0) {
-          startingEvent = OnboardingEvents.Done
-        }
-      }
-      this.send(startingEvent)
-    },
-    send(event) {
-      this.onboarding.service.send(event)
-    },
-    isState(state) {
-      return this.onboarding.current.matches(state)
-    },
-    handleClick(event) {
-      this.send(event)
-      this.$emit("tooltip-removed")
-    },
-  },
-}
-</script>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/ConnectionsTab/index.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/ConnectionsTab/index.vue
index 44d3bab7b..0e21b3863 100644
--- a/templates/vue/src/components/tyde/activities/CircleOfSupport/ConnectionsTab/index.vue
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/ConnectionsTab/index.vue
@@ -110,6 +110,8 @@ export default {
         if (this.isOpen) {
           this.state = States.Home
           this.$emit("connection-closed")
+        } else {
+          this.$emit("connection-opened")
         }
         this.isOpen = !this.isOpen
       }
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CosModal.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/CosModal.vue
new file mode 100644
index 000000000..6b548b45d
--- /dev/null
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/CosModal.vue
@@ -0,0 +1,52 @@
+<template>
+  <div v-show="show" class="modal ob-font">
+    <div class="overlay" @click="$emit('change', false)"></div>
+    <div class="content center">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: "show",
+    event: "change",
+  },
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style scoped>
+.modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: flex-start;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: black;
+  opacity: 0.4;
+}
+.content {
+  position: relative;
+  padding: 2rem;
+  background: white;
+  border: var(--cos-border);
+  border-radius: 1rem;
+  max-width: 800px;
+}
+</style>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/index.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/index.vue
index 2e3e26428..76af5dbec 100644
--- a/templates/vue/src/components/tyde/activities/CircleOfSupport/index.vue
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/index.vue
@@ -6,6 +6,8 @@
         v-if="view === views.Community"
         :connections="cos.connections"
         :communities="cos.communities"
+        :activeView="view"
+        :has-connection-in-circles="hasConnectionInCircles"
         @add-connection="addConnection"
         @edit-connection="editConnection"
         @delete-connection="handleDeleteConnection"
@@ -16,6 +18,8 @@
         v-model="cos.circles"
         :connections="cos.connections"
         :communities="cos.communities"
+        :activeView="view"
+        :has-connection-in-circles="hasConnectionInCircles"
         @add-connection="addConnection"
         @edit-connection="editConnection"
         @delete-connection="handleDeleteConnection"
@@ -30,8 +34,13 @@
           <div class="community-view"></div>
         </button>
         <button
-          :class="['change-view', { active: view === views.Circle }]"
+          :class="[
+            'change-view',
+            { active: view === views.Circle },
+            { disabled: !circleViewEnabled },
+          ]"
           aria-label="Circle view"
+          :disabled="!circleViewEnabled"
           @click="view = views.Circle"
         >
           <div class="circle-view"></div>
@@ -42,6 +51,7 @@
 </template>
 
 <script>
+import { mapState, mapGetters } from "vuex"
 import client from "@/services/TapestryAPI"
 import Loading from "@/components/common/Loading"
 import CommunityView from "./CommunityView"
@@ -67,16 +77,26 @@ export default {
         communities: {},
         connections: {},
       },
+      hasConnectionInCircles: false,
     }
   },
   computed: {
+    ...mapState(["settings"]),
+    ...mapGetters(["getNode"]),
     views() {
       return CosView
     },
+    circleViewEnabled() {
+      const circleViewNode = this.getNode(this.settings.circleViewNode)
+      return circleViewNode ? circleViewNode && circleViewNode.completed : true
+    },
+  },
+  updated() {
+    this.countConnectionsInCircle(this.cos)
   },
   async mounted() {
     const { circles, communities, connections } = await client.cos.getActivity()
-
+    this.countConnectionsInCircle({ circles, communities, connections })
     circles.forEach(circle => this.cos.circles.push(circle))
     Object.entries(communities).forEach(([id, community]) =>
       this.$set(this.cos.communities, id, community)
@@ -84,7 +104,6 @@ export default {
     Object.entries(connections).forEach(([id, connection]) =>
       this.$set(this.cos.connections, id, connection)
     )
-
     this.isLoading = false
   },
   methods: {
@@ -131,6 +150,18 @@ export default {
       })
       this.cos.circles = newCircles
     },
+    countConnectionsInCircle(cos) {
+      let count = 0
+      let connections = Object.keys(cos.connections)
+      cos.circles.forEach(circle => {
+        connections.forEach(connection => {
+          if (circle.includes(connection)) {
+            count = count + 1
+          }
+        })
+      })
+      this.hasConnectionInCircles = count > 0
+    },
   },
 }
 </script>
@@ -155,6 +186,15 @@ export default {
   overflow: hidden;
 }
 
+.disabled {
+  opacity: 0.5;
+  &:hover {
+    cursor: not-allowed;
+    stroke: #999;
+    stroke-width: 6;
+  }
+}
+
 .contents {
   height: 100%;
 }
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/AddConfirmation.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/AddConfirmation.vue
similarity index 100%
rename from templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/AddConfirmation.vue
rename to templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/AddConfirmation.vue
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/AddConfirmationCircles.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/AddConfirmationCircles.vue
new file mode 100644
index 000000000..00901a118
--- /dev/null
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/AddConfirmationCircles.vue
@@ -0,0 +1,80 @@
+<template>
+  <cos-modal show>
+    <b-container class="modal-container">
+      <b-row align-h="center">
+        <h3 style="max-width:350px;">
+          Nicely done!
+        </h3>
+      </b-row>
+      <b-row align-h="center">
+        <b-row align-h="center" class="py-2">
+          <h4 class="ob-secondary px-4">
+            Would you like to continue adding more connections to your circle?
+          </h4>
+        </b-row>
+      </b-row>
+      <b-row>
+        <b-container>
+          <b-row class="controls py-2">
+            <b-col>
+              <b-button
+                pill
+                variant="secondary"
+                class="primary"
+                @click="$emit('another')"
+              >
+                Keep adding &#8594;
+              </b-button>
+            </b-col>
+            <b-col>
+              <b-button
+                pill
+                variant="secondary"
+                class="secondary"
+                @click="$emit('later')"
+              >
+                I'm done &#8594;
+              </b-button>
+            </b-col>
+          </b-row>
+        </b-container>
+      </b-row>
+    </b-container>
+  </cos-modal>
+</template>
+
+<script>
+import CosModal from "../CosModal"
+export default {
+  components: {
+    CosModal,
+  },
+  props: {
+    connections: {
+      require: true,
+    },
+  },
+  computed: {
+    visibleConnections() {
+      let connectionsArray = Object.values(this.connections)
+      return connectionsArray.slice(0, Math.min(connectionsArray.length, 5))
+    },
+  },
+  methods: {
+    threeConnections() {
+      return this.visibleConnections.slice(0, 3)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.modal-container {
+  width: 50vw;
+  min-width: 300px;
+  max-width: 650px;
+}
+.row {
+  padding: 10px 0;
+}
+</style>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/CircleSelection.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/CircleSelection.vue
new file mode 100644
index 000000000..b4260c3f8
--- /dev/null
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/CircleSelection.vue
@@ -0,0 +1,42 @@
+<template>
+  <cos-modal show @change="$emit('later')">
+    <b-container class="confirm">
+      <b-row align-h="center" class="py-2">
+        <h3>
+          To view connections in only one of the circles, click on this circle to
+          toggle between the circles and keep going to view all of them again
+        </h3>
+      </b-row>
+      <b-row>
+        <b-col>
+          <img src="@/assets/circle-selections.gif" />
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-container>
+          <b-row class="controls py-2">
+            <b-col>
+              <b-button
+                pill
+                variant="secondary"
+                class="secondary"
+                @click="$emit('continue')"
+              >
+                Continue &#8594;
+              </b-button>
+            </b-col>
+          </b-row>
+        </b-container>
+      </b-row>
+    </b-container>
+  </cos-modal>
+</template>
+
+<script>
+import CosModal from "../CosModal"
+export default {
+  components: {
+    CosModal,
+  },
+}
+</script>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/FinishViewCircles.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/FinishViewCircles.vue
new file mode 100644
index 000000000..320a208eb
--- /dev/null
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/FinishViewCircles.vue
@@ -0,0 +1,34 @@
+<template>
+  <cos-modal show>
+    <b-container class="modal-container">
+      <b-row align-h="center">
+        <h3 style="min-height:100px;">
+          🎉 Great job!🎉
+        </h3>
+        <h3>
+          Don't forget to keep your circle of support updated. You can always come
+          back here to add connections, communities, and update your circles.
+        </h3>
+      </b-row>
+      <b-col align-self="center">
+        <b-button
+          pill
+          variant="secondary"
+          class="secondary"
+          @click="$emit('ob-finish')"
+        >
+          Finish &#8594;
+        </b-button>
+      </b-col>
+    </b-container>
+  </cos-modal>
+</template>
+
+<script>
+import CosModal from "../CosModal"
+export default {
+  components: {
+    CosModal,
+  },
+}
+</script>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/LetsAddConnections.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/LetsAddConnections.vue
new file mode 100644
index 000000000..3d6477d81
--- /dev/null
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/LetsAddConnections.vue
@@ -0,0 +1,36 @@
+<template>
+  <cos-modal show @change="$emit('later')">
+    <b-container class="confirm">
+      <b-row align-h="center" class="py-2">
+        <h3>
+          Let's add some connections into your circle.
+        </h3>
+      </b-row>
+      <b-row>
+        <b-container>
+          <b-row class="controls py-2">
+            <b-col>
+              <b-button
+                pill
+                variant="secondary"
+                class="secondary"
+                @click="$emit('continue')"
+              >
+                Click Here to Start!
+              </b-button>
+            </b-col>
+          </b-row>
+        </b-container>
+      </b-row>
+    </b-container>
+  </cos-modal>
+</template>
+
+<script>
+import CosModal from "../CosModal"
+export default {
+  components: {
+    CosModal,
+  },
+}
+</script>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/MoveBetweenCircles.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/MoveBetweenCircles.vue
new file mode 100644
index 000000000..649c331f7
--- /dev/null
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/MoveBetweenCircles.vue
@@ -0,0 +1,38 @@
+<template>
+  <cos-modal show @change="$emit('later')">
+    <b-container class="confirm">
+      <b-row align-h="center" class="py-2">
+        <h3>
+          You can always move connections by dragging them between circles. You can
+          remove connections from your circle by dragging them outside of the
+          circles.
+        </h3>
+      </b-row>
+      <b-row>
+        <b-container>
+          <b-row class="controls py-2">
+            <b-col>
+              <b-button
+                pill
+                variant="secondary"
+                class="secondary"
+                @click="$emit('continue')"
+              >
+                Continue &#8594;
+              </b-button>
+            </b-col>
+          </b-row>
+        </b-container>
+      </b-row>
+    </b-container>
+  </cos-modal>
+</template>
+
+<script>
+import CosModal from "../CosModal"
+export default {
+  components: {
+    CosModal,
+  },
+}
+</script>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/MoveConnectionsCircles.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/MoveConnectionsCircles.vue
new file mode 100644
index 000000000..7a29cf58a
--- /dev/null
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/MoveConnectionsCircles.vue
@@ -0,0 +1,43 @@
+<template>
+  <cos-modal show @change="$emit('later')">
+    <b-container class="confirm">
+      <b-row align-h="center" class="py-2">
+        <h3>
+          Add connections to your circle by dragging and dropping them from the
+          connections tab into one of the circle rings.
+        </h3>
+      </b-row>
+      <b-row><img src="@/assets/add-connection-to-circle.gif" /></b-row>
+      <b-row align-h="center" class="py-2">
+        <h4 class="ob-secondary">
+          You can also add more connections at any time in the connections tab.
+        </h4>
+      </b-row>
+      <b-row>
+        <b-container>
+          <b-row class="controls py-2">
+            <b-col>
+              <b-button
+                pill
+                variant="secondary"
+                class="secondary"
+                @click="$emit('continue')"
+              >
+                Continue &#8594;
+              </b-button>
+            </b-col>
+          </b-row>
+        </b-container>
+      </b-row>
+    </b-container>
+  </cos-modal>
+</template>
+
+<script>
+import CosModal from "../CosModal"
+export default {
+  components: {
+    CosModal,
+  },
+}
+</script>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/MoveConnectionsToCircleFinish.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/MoveConnectionsToCircleFinish.vue
new file mode 100644
index 000000000..8ffcf02dc
--- /dev/null
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/MoveConnectionsToCircleFinish.vue
@@ -0,0 +1,36 @@
+<template>
+  <cos-modal show @change="$emit('later')">
+    <b-container class="confirm">
+      <b-row align-h="center" class="py-2">
+        <h3>
+          Great job! You have added your connections in your circle now.
+        </h3>
+      </b-row>
+      <b-row>
+        <b-container>
+          <b-row class="controls py-2">
+            <b-col>
+              <b-button
+                pill
+                variant="secondary"
+                class="secondary"
+                @click="$emit('continue')"
+              >
+                Continue &#8594;
+              </b-button>
+            </b-col>
+          </b-row>
+        </b-container>
+      </b-row>
+    </b-container>
+  </cos-modal>
+</template>
+
+<script>
+import CosModal from "../CosModal"
+export default {
+  components: {
+    CosModal,
+  },
+}
+</script>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/ObFinishView.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/ObFinishView.vue
similarity index 85%
rename from templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/ObFinishView.vue
rename to templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/ObFinishView.vue
index 475f46a57..94d819572 100644
--- a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/ObFinishView.vue
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/ObFinishView.vue
@@ -32,15 +32,25 @@
           </span>
         </b-col>
         <b-col v-else class="ob-connection-box"></b-col>
-        <b-col align-self="center">
+        <b-col>
           <b-button
+            v-if="circleViewEnabled"
             pill
             variant="secondary"
-            class="secondary"
-            @click="$emit('ob-finish')"
+            class="secondary mx-2"
+            @click="$emit('continue')"
           >
             Continue &#8594;
           </b-button>
+          <b-button
+            v-else
+            pill
+            variant="secondary"
+            class="secondary mx-2"
+            @click="$emit('done')"
+          >
+            Done
+          </b-button>
         </b-col>
         <b-col v-if="visibleConnections.length == 5" class="ob-connection-box">
           <p class="ob-connection">
@@ -66,6 +76,9 @@ export default {
     connections: {
       require: true,
     },
+    circleViewEnabled: {
+      require: true,
+    },
   },
   computed: {
     visibleConnections() {
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/Tooltip.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/Tooltip.vue
similarity index 67%
rename from templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/Tooltip.vue
rename to templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/Tooltip.vue
index 52861804e..96ac1e323 100644
--- a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/Tooltip.vue
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/Tooltip.vue
@@ -2,18 +2,24 @@
   <div
     ref="tooltip"
     class="tooltip-container"
-    :style="{ opacity: positioned ? 1 : 0 }"
+    :style="[{ opacity: positioned ? 1 : 0 }]"
   >
     <slot></slot>
   </div>
 </template>
 
 <script>
-// import Helpers from "@/utils/Helpers"
 export default {
+  props: {
+    activeView: {
+      type: Number,
+      required: true,
+    },
+  },
   data() {
     return {
       positioned: false,
+      onTopLeftCircleView: false,
     }
   },
   mounted() {
@@ -26,12 +32,28 @@ export default {
 <style scoped lang="scss">
 .right {
   right: 22px;
-  bottom: 95px;
 }
+
 .left {
   left: 22px;
+
+  &.top {
+    left: 10px;
+  }
+}
+
+.top {
+  top: 200px;
+
+  &.left {
+    top: 110px;
+  }
+}
+
+.bottom {
   bottom: 95px;
 }
+
 .tooltip-container {
   position: absolute;
   padding: 2rem;
@@ -40,6 +62,7 @@ export default {
   border-radius: 1rem;
   z-index: 100;
 }
+
 .tooltip-container::before {
   content: "";
   position: absolute;
@@ -47,10 +70,9 @@ export default {
   height: 0;
   border-left: 24px solid transparent;
   border-right: 24px solid transparent;
-  border-top: 24px solid #fff;
-  bottom: -23px;
   z-index: 5;
 }
+
 .tooltip-container::after {
   content: "";
   display: block;
@@ -59,9 +81,8 @@ export default {
   height: 0;
   border-left: 24px solid transparent;
   border-right: 24px solid transparent;
-  border-top: 24px solid #bbb;
-  bottom: -24px;
 }
+
 .right::before,
 .right::after {
   right: 25px;
@@ -70,4 +91,20 @@ export default {
 .left::after {
   left: 25px;
 }
+.top::before {
+  top: -22px;
+  border-bottom: 24px solid #fff;
+}
+.top::after {
+  top: -27px;
+  border-bottom: 24px solid #ccc;
+}
+.bottom::before {
+  bottom: -22px;
+  border-top: 24px solid #fff;
+}
+.bottom::after {
+  bottom: -27px;
+  border-top: 24px solid #ccc;
+}
 </style>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/WelcomeCommunities.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/WelcomeCommunities.vue
similarity index 100%
rename from templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/WelcomeCommunities.vue
rename to templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/WelcomeCommunities.vue
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/WelcomeConnections.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/WelcomeConnections.vue
similarity index 100%
rename from templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/WelcomeConnections.vue
rename to templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/WelcomeConnections.vue
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/index.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/index.vue
new file mode 100644
index 000000000..33dd1ec81
--- /dev/null
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/index.vue
@@ -0,0 +1,334 @@
+<template>
+  <div
+    style="height: 100%; width: 100%;"
+    @connection-closed="handleConnectionClosed"
+    @connection-opened="handleConnectionsOpened"
+    @connection-submitted="handleConnectionSubmitted"
+  >
+    <welcome-communities
+      v-if="isState('Communities.Welcome')"
+      class="welcome-communities"
+      @continue="handleContinue"
+    />
+    <welcome-connections
+      v-if="isState('Connections.Welcome')"
+      class="welcome-connections"
+      @continue="handleContinue"
+    />
+    <add-confirmation
+      v-if="isState('Communities.AddMoreConfirmation')"
+      @later="send(OnboardingEvents.AddLater)"
+      @another="send(OnboardingEvents.AddAnother)"
+    />
+    <ob-finish-view
+      v-if="isState('Connections.Finish')"
+      :connections="connections"
+      :circleViewEnabled="circleViewEnabled"
+      @continue="send(OnboardingEvents.Continue)"
+      @done="send(OnboardingEvents.Done)"
+    />
+    <lets-add-connections
+      v-if="isState('Circles.LetsAddConnections')"
+      @continue="send(OnboardingEvents.Continue)"
+    />
+    <move-connections-to-circle-finish
+      v-if="isState('Circles.MoveConnectionToCirclesFinish')"
+      @continue="send(OnboardingEvents.Continue)"
+    />
+    <move-between-circles
+      v-if="isState('Circles.MoveBetweenCircles')"
+      @continue="send(OnboardingEvents.Continue)"
+    />
+    <move-connections-circles
+      v-if="isState('Circles.MoveConnections')"
+      @continue="send(OnboardingEvents.Continue)"
+    />
+    <circle-selection
+      v-if="isState('Circles.ToggleRingsTooltip')"
+      @continue="send(OnboardingEvents.Continue)"
+    ></circle-selection>
+    <finish-view-circles
+      v-if="isState('Circles.Finish')"
+      :connections="connections"
+      @ob-finish="send(OnboardingEvents.Done)"
+    />
+    <tooltip
+      v-if="isState('Communities.AddLaterTooltip')"
+      class="right bottom"
+      :activeView="activeView"
+      @tooltip-positioned="$emit('tooltip-positioned')"
+    >
+      <h3>
+        Remember - you can click this button whenever you'd like to add another
+        community!
+      </h3>
+      <b-button
+        pill
+        variant="secondary"
+        @click="handleClick(OnboardingEvents.Continue)"
+      >
+        Got it &#8594;
+      </b-button>
+    </tooltip>
+    <tooltip
+      v-if="isState('Communities.AddAnotherTooltip')"
+      class="right bottom"
+      :activeView="activeView"
+      @tooltip-positioned="$emit('tooltip-positioned')"
+    >
+      <h3>
+        Click here to add another community!
+      </h3>
+      <b-button pill variant="secondary" @click="handleClick(OnboardingEvents.Add)">
+        Got it &#8594;
+      </b-button>
+    </tooltip>
+    <tooltip
+      v-if="isState('Connections.AddAnotherTooltip')"
+      class="left bottom"
+      :activeView="activeView"
+      @tooltip-positioned="$emit('tooltip-positioned')"
+    >
+      <h3 style="max-width:300px;">
+        Click here to add some of your connections!
+      </h3>
+      <b-button pill variant="secondary" @click="handleClick(OnboardingEvents.Add)">
+        Got it &#8594;
+      </b-button>
+    </tooltip>
+    <tooltip
+      v-if="isState('Circles.Welcome')"
+      class="top left"
+      :activeView="activeView"
+      :style="[{ 'margin-left': activeView === 0 ? '45px' : '0px' }]"
+      @tooltip-positioned="$emit('tooltip-positioned')"
+    >
+      <h3 style="width:300px;">
+        Click here to toggle to the circle view.
+      </h3>
+    </tooltip>
+    <tooltip
+      v-if="isState('Circles.AddAnotherTooltip')"
+      class="bottom left"
+      :activeView="activeView"
+      @tooltip-positioned="$emit('tooltip-positioned')"
+    >
+      <h3 style="width:300px;">
+        Try adding some connections into your circle.
+      </h3>
+      <b-button
+        pill
+        variant="secondary"
+        class="mt-3"
+        @click="handleAddingConnectionsToCircle"
+      >
+        Got it &#8594;
+      </b-button>
+    </tooltip>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex"
+import { interpret } from "xstate"
+import onboardingMachine, { OnboardingEvents } from "./onboardingMachine"
+import WelcomeCommunities from "./WelcomeCommunities"
+import AddConfirmation from "./AddConfirmation"
+import WelcomeConnections from "./WelcomeConnections"
+import ObFinishView from "./ObFinishView"
+import FinishViewCircles from "./FinishViewCircles"
+import Tooltip from "./Tooltip"
+import MoveConnectionsCircles from "./MoveConnectionsCircles.vue"
+import LetsAddConnections from "./LetsAddConnections.vue"
+import MoveConnectionsToCircleFinish from "./MoveConnectionsToCircleFinish.vue"
+import MoveBetweenCircles from "./MoveBetweenCircles.vue"
+import CircleSelection from "./CircleSelection.vue"
+const States = {
+  Home: 0,
+  AddCommunity: 1,
+  EditCommunity: 2,
+  EditConnection: 3,
+  ConnectionClosed: 4,
+  AddConnection: 5,
+  MoveConnection: 6,
+  ConnectionOpened: 7,
+}
+export default {
+  components: {
+    WelcomeCommunities,
+    AddConfirmation,
+    WelcomeConnections,
+    ObFinishView,
+    Tooltip,
+    MoveConnectionsCircles,
+    MoveConnectionsToCircleFinish,
+    MoveBetweenCircles,
+    LetsAddConnections,
+    FinishViewCircles,
+    CircleSelection,
+  },
+  props: {
+    connections: {
+      type: Object,
+      required: true,
+    },
+    communities: {
+      type: Object,
+      required: true,
+    },
+    circles: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      },
+    },
+    parentState: {
+      type: Number,
+      required: true,
+    },
+    activeView: {
+      type: Number,
+      required: true,
+    },
+    hasConnectionInCircles: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      onboarding: {
+        service: interpret(onboardingMachine),
+        current: onboardingMachine.initialState,
+      },
+      OnboardingEvents: OnboardingEvents,
+    }
+  },
+  computed: {
+    ...mapState(["settings"]),
+    ...mapGetters(["getNode"]),
+    circleViewEnabled() {
+      const circleViewNode = this.getNode(this.settings.circleViewNode)
+      return circleViewNode ? circleViewNode && circleViewNode.completed : true
+    },
+  },
+  watch: {
+    communities() {
+      this.handleCommunityAdded()
+    },
+    connections() {
+      this.handleConnectionSubmitted()
+    },
+    parentState() {
+      if (this.parentState === States.ConnectionClosed) {
+        this.handleConnectionClosed()
+        this.$emit("connection-closed")
+      }
+      if (this.parentState === States.ConnectionOpened) {
+        this.handleConnectionsOpened()
+      }
+      if (this.parentState === States.MoveConnection) {
+        this.handleConnectionMoved()
+      }
+    },
+  },
+  mounted() {
+    this.onboarding.service
+      .onTransition(state => (this.onboarding.current = state))
+      .start()
+    this.initializeOnboarding()
+
+    if (
+      this.activeView === 1 &&
+      this.onboarding.current.matches("Circles.Welcome")
+    ) {
+      this.send(OnboardingEvents.Continue)
+    }
+  },
+  methods: {
+    handleConnectionMoved() {
+      if (this.onboarding.current.matches("Circles.Form")) {
+        this.send(OnboardingEvents.Added)
+      }
+    },
+    handleConnectionsOpened() {
+      if (this.onboarding.current.matches("Circles.WaitToOpenConnectionsTab")) {
+        this.send(OnboardingEvents.Continue)
+      }
+    },
+    handleConnectionClosed() {
+      if (
+        this.onboarding.current.matches("Connections.FormClosed") ||
+        this.onboarding.current.matches("Circles.FormClosed")
+      ) {
+        this.send(OnboardingEvents.Continue)
+      }
+
+      if (
+        this.onboarding.current.matches("Circles.WaitForConnectionTabToClose") &&
+        this.circles.some(circle => circle.length > 0)
+      ) {
+        this.send(OnboardingEvents.Continue)
+      }
+    },
+    handleConnectionSubmitted() {
+      if (
+        this.onboarding.current.matches("Circles.Form") ||
+        this.onboarding.current.matches("Connections.Form") ||
+        this.onboarding.current.matches("Connections.AddAnotherTooltip") ||
+        this.onboarding.current.matches("Circles.AddAnotherTooltip")
+      ) {
+        this.send(OnboardingEvents.Added)
+      }
+    },
+    handleCommunityAdded() {
+      if (
+        this.onboarding.current.matches("Circles.Form") ||
+        this.onboarding.current.matches("Communities.Form") ||
+        this.onboarding.current.matches("Communities.AddAnotherTooltip") ||
+        this.onboarding.current.matches("Circles.AddAnotherTooltip")
+      ) {
+        this.send(OnboardingEvents.Added)
+      }
+    },
+    handleContinue(communities) {
+      if (this.onboarding.current.matches("Communities.Welcome")) {
+        communities.forEach(community => this.$emit("add-community", community))
+      }
+      this.send(OnboardingEvents.Continue)
+    },
+    initializeOnboarding() {
+      let startingEvent = OnboardingEvents.Empty
+      // For now, always initialize the onboarding process at the start
+      if (Object.values(this.communities).length <= 0) {
+        this.send(startingEvent)
+      } else if (
+        Object.values(this.connections).length <= 0 &&
+        this.activeView === 0
+      ) {
+        startingEvent = OnboardingEvents.Continue
+      } else if (!this.hasConnectionInCircles) {
+        startingEvent = OnboardingEvents.NoConnectionsInCircle
+      } else {
+        startingEvent = OnboardingEvents.Done
+      }
+      this.send(startingEvent)
+    },
+    send(event) {
+      this.onboarding.service.send(event)
+    },
+    isState(state) {
+      return this.onboarding.current.matches(state)
+    },
+    handleClick(event) {
+      this.send(event)
+      this.$emit("tooltip-removed")
+    },
+    handleAddingConnectionsToCircle() {
+      this.send(OnboardingEvents.Continue)
+      this.$emit("tooltip-removed")
+    },
+  },
+}
+</script>
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/onboarding.config.js b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/onboarding.config.js
similarity index 100%
rename from templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/onboarding.config.js
rename to templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/onboarding.config.js
diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/onboardingMachine.js b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/onboardingMachine.js
similarity index 59%
rename from templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/onboardingMachine.js
rename to templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/onboardingMachine.js
index 1f259ddca..9fe441720 100644
--- a/templates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/onboarding/onboardingMachine.js
+++ b/templates/vue/src/components/tyde/activities/CircleOfSupport/onboarding/onboardingMachine.js
@@ -2,9 +2,16 @@ import { createMachine } from "xstate"
 
 export const OnboardingStates = {
   Welcome: "Welcome",
-  AddMoreConfirmation: "AddMoreConfirmation",
   AddLaterTooltip: "AddLaterTooltip",
   AddAnotherTooltip: "AddAnotherTooltip",
+  ToggleRingsTooltip: "ToggleRingsTooltip",
+  MoveConnections: "MoveConnections",
+  LetsAddConnections: "LetsAddConnections",
+  WaitToOpenConnectionsTab: "WaitToOpenConnectionsTab",
+  WaitForConnectionTabToClose: "WaitForConnectionTabToClose",
+  MoveConnectionToCirclesFinish: "MoveConnectionToCirclesFinish",
+  MoveBetweenCircles: "MoveBetweenCircles",
+  AddMoreConfirmation: "AddMoreConfirmation",
   Form: "Form",
   FormClosed: "FormClosed",
   Finish: "Finish",
@@ -15,6 +22,7 @@ const Events = {
   Empty: "Empty",
   NoUserCommunities: "NoUserCommunities",
   NoConnections: "NoConnections",
+  NoConnectionsInCircle: "NoConnectionsInCircle",
   Done: "Done",
   Continue: "Continue",
   AddLater: "AddLater",
@@ -30,7 +38,7 @@ export const OnboardingEvents = Events
  * using xstate.
  */
 const onboardingMachine = createMachine({
-  id: "CommunityViewOnboarding",
+  id: "CoSOnboarding",
   initial: "Idle",
   states: {
     Idle: {
@@ -38,6 +46,7 @@ const onboardingMachine = createMachine({
         [Events.Empty]: "#Communities.Welcome",
         [Events.NoUserCommunities]: "#Communities.AddMoreConfirmation",
         [Events.NoConnections]: "#Connections.AddMoreConfirmation",
+        [Events.NoConnectionsInCircle]: "#Circles.Welcome",
         [Events.Continue]: "#Connections",
         [Events.Done]: OnboardingStates.Complete,
       },
@@ -88,7 +97,7 @@ const onboardingMachine = createMachine({
         AddMoreConfirmation: {
           on: {
             [Events.AddAnother]: OnboardingStates.AddAnotherTooltip,
-            [Events.AddLater]: "#Complete",
+            [Events.AddLater]: "#Circles",
           },
         },
         AddAnotherTooltip: {
@@ -108,6 +117,64 @@ const onboardingMachine = createMachine({
           },
         },
         Finish: {
+          on: {
+            [Events.Continue]: "#Circles",
+            [Events.Done]: "#Complete",
+          },
+        },
+      },
+    },
+    Circles: {
+      id: "Circles",
+      initial: OnboardingStates.Welcome,
+      states: {
+        Welcome: {
+          on: {
+            [Events.Continue]: OnboardingStates.LetsAddConnections,
+          },
+        },
+        LetsAddConnections: {
+          on: {
+            [Events.Continue]: OnboardingStates.AddAnotherTooltip,
+          },
+        },
+        AddAnotherTooltip: {
+          on: {
+            [Events.Continue]: OnboardingStates.WaitToOpenConnectionsTab,
+          },
+        },
+        WaitToOpenConnectionsTab: {
+          on: {
+            [Events.Continue]: OnboardingStates.MoveConnections,
+          },
+        },
+        MoveConnections: {
+          on: {
+            [Events.Continue]: OnboardingStates.WaitForConnectionTabToClose,
+          },
+        },
+        WaitForConnectionTabToClose: {
+          on: {
+            [Events.Continue]: OnboardingStates.MoveConnectionToCirclesFinish,
+          },
+        },
+        MoveConnectionToCirclesFinish: {
+          on: {
+            [Events.Continue]: OnboardingStates.MoveBetweenCircles,
+          },
+        },
+        MoveBetweenCircles: {
+          on: {
+            [Events.Continue]: OnboardingStates.ToggleRingsTooltip,
+          },
+        },
+        ToggleRingsTooltip: {
+          on: {
+            [Events.Continue]: OnboardingStates.Finish,
+          },
+        },
+        Finish: {
+          type: "final",
           on: {
             [Events.Done]: "#Complete",
           },
diff --git a/templates/vue/src/services/wp.js b/templates/vue/src/services/wp.js
index e5f881539..95d4907d2 100644
--- a/templates/vue/src/services/wp.js
+++ b/templates/vue/src/services/wp.js
@@ -27,5 +27,3 @@ export const isCurrentUser = id => parseInt(id) === wpData.currentUser.ID
 export const isLoggedIn = () => Boolean(wpData.currentUser.ID)
 
 export const canEditTapestry = () => wpData.wpCanEditTapestry === "1"
-
-export const dyadLinkedUser = () => wpData.dyadLinkedWpUser
diff --git a/templates/vue/src/store/actions.js b/templates/vue/src/store/actions.js
index b65ae78d3..d113f4768 100644
--- a/templates/vue/src/store/actions.js
+++ b/templates/vue/src/store/actions.js
@@ -116,23 +116,19 @@ export async function updateLockedStatus({ commit, getters, dispatch }) {
   }
 }
 
-export async function updateNodeProgress({ commit, getters, dispatch }, payload) {
+export async function updateNodeProgress({ commit, dispatch }, payload) {
   try {
     const { id, progress } = payload
 
-    const node = getters.getNode(id)
-
-    if (!Helpers.nodeAndUserAreDyad(node)) {
-      if (!wp.isLoggedIn()) {
-        const progressObj = JSON.parse(localStorage.getItem(LOCAL_PROGRESS_ID))
-        const nodeProgress = progressObj[id] || {}
-        nodeProgress.progress = progress
-        localStorage.setItem(LOCAL_PROGRESS_ID, JSON.stringify(progressObj))
-      } else {
-        await client.updateUserProgress(id, progress)
-      }
-      commit("updateNodeProgress", { id, progress })
+    if (!wp.isLoggedIn()) {
+      const progressObj = JSON.parse(localStorage.getItem(LOCAL_PROGRESS_ID))
+      const nodeProgress = progressObj[id] || {}
+      nodeProgress.progress = progress
+      localStorage.setItem(LOCAL_PROGRESS_ID, JSON.stringify(progressObj))
+    } else {
+      await client.updateUserProgress(id, progress)
     }
+    commit("updateNodeProgress", { id, progress })
   } catch (error) {
     dispatch("addApiError", error)
   }
@@ -156,32 +152,30 @@ export async function updateNodeCoordinates(
 
 export async function completeNode(context, nodeId) {
   const { commit, dispatch, getters } = context
-  const node = getters.getNode(nodeId)
-  if (!Helpers.nodeAndUserAreDyad(node)) {
-    try {
-      if (!wp.isLoggedIn()) {
-        const progressObj = JSON.parse(localStorage.getItem(LOCAL_PROGRESS_ID))
-        const nodeProgress = progressObj[nodeId] || {}
-        nodeProgress.completed = true
-        localStorage.setItem(LOCAL_PROGRESS_ID, JSON.stringify(progressObj))
-      } else {
-        await client.completeNode(nodeId)
-      }
-      commit("updateNode", {
+  try {
+    if (!wp.isLoggedIn()) {
+      const progressObj = JSON.parse(localStorage.getItem(LOCAL_PROGRESS_ID))
+      const nodeProgress = progressObj[nodeId] || {}
+      nodeProgress.completed = true
+      localStorage.setItem(LOCAL_PROGRESS_ID, JSON.stringify(progressObj))
+    } else {
+      await client.completeNode(nodeId)
+    }
+    commit("updateNode", {
+      id: nodeId,
+      newNode: { completed: true },
+    })
+
+    const node = getters.getNode(nodeId)
+    if (node.mediaType !== "video") {
+      await dispatch("updateNodeProgress", {
         id: nodeId,
-        newNode: { completed: true },
+        progress: 1,
       })
-
-      if (node.mediaType !== "video") {
-        await dispatch("updateNodeProgress", {
-          id: nodeId,
-          progress: 1,
-        })
-      }
-      return unlockNodes(context)
-    } catch (error) {
-      dispatch("addApiError", error)
     }
+    return unlockNodes(context)
+  } catch (error) {
+    dispatch("addApiError", error)
   }
 }
 
@@ -240,17 +234,14 @@ export async function getTapestryExport({ dispatch }) {
 }
 
 export async function completeQuestion(
-  { commit, getters, dispatch },
+  { commit, dispatch },
   { nodeId, questionId, answerType, answer }
 ) {
-  const node = getters.getNode(nodeId)
-  if (!Helpers.nodeAndUserAreDyad(node)) {
-    try {
-      await client.completeQuestion(nodeId, questionId, answerType, answer)
-      commit("completeQuestion", { nodeId, questionId, answerType, answer })
-    } catch (error) {
-      dispatch("addApiError", error)
-    }
+  try {
+    await client.completeQuestion(nodeId, questionId, answerType, answer)
+    commit("completeQuestion", { nodeId, questionId, answerType, answer })
+  } catch (error) {
+    dispatch("addApiError", error)
   }
 }
 
diff --git a/templates/vue/src/store/mutations.js b/templates/vue/src/store/mutations.js
index 78bc64904..70d6abe2e 100644
--- a/templates/vue/src/store/mutations.js
+++ b/templates/vue/src/store/mutations.js
@@ -1,6 +1,5 @@
 import Vue from "vue"
 import * as getters from "./getters"
-import Helpers from "@/utils/Helpers"
 import { parse } from "@/utils/dataset"
 
 export function init(state, { dataset, progress = {} }) {
@@ -62,11 +61,9 @@ export function updateNode(state, payload) {
 
 export function updateNodeProgress(state, payload) {
   const node = getters.getNode(state)(payload.id)
-  if (!Helpers.nodeAndUserAreDyad(node)) {
-    state.nodes[payload.id] = {
-      ...node,
-      progress: payload.progress,
-    }
+  state.nodes[payload.id] = {
+    ...node,
+    progress: payload.progress,
   }
 }
 
diff --git a/templates/vue/src/utils/Helpers.js b/templates/vue/src/utils/Helpers.js
index 5bd335716..f31819356 100644
--- a/templates/vue/src/utils/Helpers.js
+++ b/templates/vue/src/utils/Helpers.js
@@ -389,16 +389,10 @@ export default class Helpers {
       unlocked: true,
       accessible: true,
       reviewComments: [],
-      isDyad: false,
       popup: null,
     }
     return Helpers.deepMerge(baseNode, overrides)
   }
-
-  static nodeAndUserAreDyad(node) {
-    let roles = wp.getCurrentUser().roles
-    return !node.isDyad ? false : roles.includes("dyad")
-  }
   /**
    * Positions the tooltip to the given target.
    *