diff --git a/Composer/packages/client/__tests__/components/design.test.tsx b/Composer/packages/client/__tests__/components/design.test.tsx
index aa4ad6edf5..f439076d51 100644
--- a/Composer/packages/client/__tests__/components/design.test.tsx
+++ b/Composer/packages/client/__tests__/components/design.test.tsx
@@ -9,7 +9,14 @@ import { SAMPLE_DIALOG } from '../mocks/sampleDialog';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { TriggerCreationModal } from '../../src/components/ProjectTree/TriggerCreationModal';
 import { CreateDialogModal } from '../../src/pages/design/createDialogModal';
-import { dialogsSelectorFamily, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
+import {
+  dialogsSelectorFamily,
+  currentProjectIdState,
+  botProjectIdsState,
+  schemasState,
+  projectMetaDataState,
+  botProjectFileState,
+} from '../../src/recoilModel';
 
 jest.mock('@bfc/code-editor', () => {
   return {
@@ -24,6 +31,8 @@ const initRecoilState = ({ set }) => {
   set(botProjectIdsState, [projectId]);
   set(dialogsSelectorFamily(projectId), dialogs);
   set(schemasState(projectId), { sdk: { content: {} } });
+  set(projectMetaDataState(projectId), { isRootBot: true });
+  set(botProjectFileState(projectId), { foo: 'bar' });
 };
 
 describe('<ProjectTree/>', () => {
diff --git a/Composer/packages/client/__tests__/components/expandableNode.test.tsx b/Composer/packages/client/__tests__/components/expandableNode.test.tsx
new file mode 100644
index 0000000000..4818afff10
--- /dev/null
+++ b/Composer/packages/client/__tests__/components/expandableNode.test.tsx
@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { render, fireEvent } from '@botframework-composer/test-utils';
+
+import { ExpandableNode } from '../../src/components/ProjectTree/ExpandableNode';
+
+function isShown(details: HTMLElement) {
+  if (details == null) return false;
+  return details.attributes.getNamedItem('open') != null;
+}
+
+describe('<ExpandableNode />', () => {
+  let component;
+  beforeEach(() => {
+    component = render(<ExpandableNode summary={'Summary'}>{'details'}</ExpandableNode>);
+  });
+
+  it('closes and opens on click', async () => {
+    const triangle = await component.findByTestId('summaryTag');
+    let details = await component.findAllByText('details');
+    expect(isShown(details[0])).toEqual(true);
+
+    fireEvent.click(triangle);
+    details = await component.findAllByText('details');
+    expect(isShown(details[0])).toEqual(false);
+
+    fireEvent.click(triangle);
+    details = await component.findAllByText('details');
+    expect(isShown(details[0])).toEqual(true);
+  });
+});
diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index c287e5e39a..1185e61d9c 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.tsx
@@ -6,10 +6,18 @@ import { fireEvent } from '@botframework-composer/test-utils';
 
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { renderWithRecoil } from '../testUtils';
-import { SAMPLE_DIALOG } from '../mocks/sampleDialog';
-import { dialogsSelectorFamily, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
+import { SAMPLE_DIALOG, SAMPLE_DIALOG_2 } from '../mocks/sampleDialog';
+import {
+  dialogsSelectorFamily,
+  currentProjectIdState,
+  botProjectIdsState,
+  projectMetaDataState,
+  schemasState,
+  botProjectFileState,
+} from '../../src/recoilModel';
 
 const projectId = '12345.6789';
+const projectId2 = '56789.1234';
 const dialogs = [SAMPLE_DIALOG];
 
 const initRecoilState = ({ set }) => {
@@ -17,6 +25,19 @@ const initRecoilState = ({ set }) => {
   set(botProjectIdsState, [projectId]);
   set(dialogsSelectorFamily(projectId), dialogs);
   set(schemasState(projectId), { sdk: { content: {} } });
+  set(projectMetaDataState(projectId), { isRootBot: true });
+  set(botProjectFileState(projectId), { foo: 'bar' });
+};
+
+const initRecoilStateMulti = ({ set }) => {
+  set(currentProjectIdState, projectId);
+  set(botProjectIdsState, [projectId, projectId2]);
+  set(dialogsSelectorFamily(projectId), dialogs);
+  set(dialogsSelectorFamily(projectId2), [SAMPLE_DIALOG, SAMPLE_DIALOG_2]);
+  set(schemasState(projectId), { sdk: { content: {} } });
+  set(schemasState(projectId2), { sdk: { content: {} } });
+  set(projectMetaDataState(projectId), { isRootBot: true });
+  set(botProjectFileState(projectId), { foo: 'bar' });
 };
 
 describe('<ProjectTree/>', () => {
@@ -29,6 +50,16 @@ describe('<ProjectTree/>', () => {
     await findByText('EchoBot-1');
   });
 
+  it('should render the projecttree with multiple bots', async () => {
+    const { findAllByText, findByText } = renderWithRecoil(
+      <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={() => {}} />,
+      initRecoilStateMulti
+    );
+
+    await findAllByText('EchoBot-1');
+    await findByText('EchoBot-1b');
+  });
+
   it('should handle project tree item click', async () => {
     const mockFileSelect = jest.fn(() => null);
     const component = renderWithRecoil(
diff --git a/Composer/packages/client/__tests__/mocks/sampleDialog.ts b/Composer/packages/client/__tests__/mocks/sampleDialog.ts
index a63b624a70..bd3cb1f1e6 100644
--- a/Composer/packages/client/__tests__/mocks/sampleDialog.ts
+++ b/Composer/packages/client/__tests__/mocks/sampleDialog.ts
@@ -91,3 +91,57 @@ export const SAMPLE_DIALOG = {
   ],
   skills: [],
 };
+
+export const SAMPLE_DIALOG_2 = {
+  isRoot: false,
+  displayName: 'EchoBot-1b',
+  id: 'echobot-1b',
+  content: {
+    $kind: 'Microsoft.AdaptiveDialog',
+    $designer: { id: '433224', description: '', name: 'EchoBot-1' },
+    autoEndDialog: true,
+    defaultResultProperty: 'dialog.result',
+    triggers: [
+      {
+        $kind: 'Microsoft.OnUnknownIntent',
+        $designer: { id: '821845' },
+        actions: [
+          { $kind: 'Microsoft.SendActivity', $designer: { id: '003038' }, activity: '${SendActivity_003038()}' },
+        ],
+      },
+      { $kind: 'Microsoft.OnError', $designer: { id: 'XVSGCI' } },
+      {
+        $kind: 'Microsoft.OnIntent',
+        $designer: { id: 'QIgTMy', name: 'more errors' },
+        intent: 'test',
+        actions: [{ $kind: 'Microsoft.SetProperty', $designer: { id: 'VyWC7G' }, value: '=[' }],
+      },
+    ],
+    generator: 'echobot-1b.lg',
+    $schema:
+      'https://raw.githubusercontent.com/microsoft/BotFramework-Composer/stable/Composer/packages/server/schemas/sdk.schema',
+    id: 'EchoBot-1',
+    recognizer: 'echobot-1b.lu.qna',
+  },
+  diagnostics: [],
+  referredDialogs: [],
+  lgTemplates: [
+    { name: 'SendActivity_003038', path: 'echobot-1.triggers[0].actions[0]' },
+    { name: 'SendActivity_Welcome', path: 'echobot-1.triggers[1].actions[0].actions[0].actions[0]' },
+  ],
+  referredLuIntents: [{ name: 'test', path: 'echobot-1.triggers[3]#Microsoft.OnIntent' }],
+  luFile: 'echobot-1',
+  qnaFile: 'echobot-1',
+  lgFile: 'echobot-1',
+  triggers: [
+    { id: 'triggers[0]', displayName: '', type: 'Microsoft.OnUnknownIntent', isIntent: false },
+    { id: 'triggers[1]', displayName: '', type: 'Microsoft.OnConversationUpdateActivity', isIntent: false },
+    { id: 'triggers[2]', displayName: '', type: 'Microsoft.OnError', isIntent: false },
+    { id: 'triggers[3]', displayName: 'more errors', type: 'Microsoft.OnIntent', isIntent: true },
+  ],
+  intentTriggers: [
+    { intent: 'test', dialogs: [] },
+    { intent: 'test', dialogs: [] },
+  ],
+  skills: [],
+};
diff --git a/Composer/packages/client/__tests__/utils/navigation.test.ts b/Composer/packages/client/__tests__/utils/navigation.test.ts
index c28892c8aa..100e4c12d3 100644
--- a/Composer/packages/client/__tests__/utils/navigation.test.ts
+++ b/Composer/packages/client/__tests__/utils/navigation.test.ts
@@ -73,10 +73,11 @@ describe('composer url util', () => {
     expect(result1).toEqual('?selected=triggers[0]&focused=triggers[0].actions[0]');
   });
 
-  it('check url', () => {
+  it('checks a URL without a skill', () => {
     const result1 = checkUrl(
       `/bot/${projectId}/dialogs/a?selected=triggers[0]&focused=triggers[0].actions[0]#botAsks`,
       projectId,
+      null,
       {
         dialogId: 'a',
         selected: 'triggers[0]',
@@ -85,7 +86,29 @@ describe('composer url util', () => {
       }
     );
     expect(result1).toEqual(true);
-    const result2 = checkUrl(`test`, projectId, {
+    const result2 = checkUrl(`test`, projectId, skillId, {
+      dialogId: 'a',
+      selected: 'triggers[0]',
+      focused: 'triggers[0].actions[0]',
+      promptTab: PromptTab.BOT_ASKS,
+    });
+    expect(result2).toEqual(false);
+  });
+
+  it('checks a URL with a skill', () => {
+    const result1 = checkUrl(
+      `/bot/${projectId}/skill/${skillId}/dialogs/a?selected=triggers[0]&focused=triggers[0].actions[0]#botAsks`,
+      projectId,
+      skillId,
+      {
+        dialogId: 'a',
+        selected: 'triggers[0]',
+        focused: 'triggers[0].actions[0]',
+        promptTab: PromptTab.BOT_ASKS,
+      }
+    );
+    expect(result1).toEqual(true);
+    const result2 = checkUrl(`test`, projectId, skillId, {
       dialogId: 'a',
       selected: 'triggers[0]',
       focused: 'triggers[0].actions[0]',
diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
index cf9d64f5df..bd3baefe10 100644
--- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
@@ -23,6 +23,18 @@ const nodeStyle = (depth: number) => css`
   margin-left: ${depth * 16}px;
 `;
 
+const TRIANGLE_SCALE = 0.6;
+
+const detailsStyle = css`
+  &:not([open]) > summary::-webkit-details-marker {
+    transform: scaleX(${TRIANGLE_SCALE});
+  }
+
+  &[open] > summary::-webkit-details-marker {
+    transform: scaleY(${TRIANGLE_SCALE});
+  }
+`;
+
 export const ExpandableNode = ({ children, summary, detailsRef, depth = 0 }: Props) => {
   const [isExpanded, setExpanded] = useState(true);
 
@@ -39,9 +51,16 @@ export const ExpandableNode = ({ children, summary, detailsRef, depth = 0 }: Pro
 
   return (
     <div css={nodeStyle(depth)} data-testid="dialog">
-      <details ref={detailsRef} open={isExpanded}>
+      <details ref={detailsRef} css={detailsStyle} open={isExpanded}>
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */}
-        <summary css={summaryStyle} role="button" tabIndex={0} onClick={handleClick} onKeyUp={handleKey}>
+        <summary
+          css={summaryStyle}
+          data-testid={'summaryTag'}
+          role="button"
+          tabIndex={0}
+          onClick={handleClick}
+          onKeyUp={handleKey}
+        >
           {summary}
         </summary>
         {children}
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 75da960468..5de75b7a78 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { jsx, css } from '@emotion/core';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
@@ -12,18 +12,19 @@ import { DialogInfo, ITrigger, Diagnostic, DiagnosticSeverity } from '@bfc/share
 import debounce from 'lodash/debounce';
 import { useRecoilValue } from 'recoil';
 import { ISearchBoxStyles } from 'office-ui-fabric-react/lib/SearchBox';
-import isEqual from 'lodash/isEqual';
 import { extractSchemaProperties, groupTriggersByPropertyReference, NoGroupingTriggerGroupName } from '@bfc/indexers';
+import isEqual from 'lodash/isEqual';
 
 import {
   dispatcherState,
-  currentProjectIdState,
+  rootBotProjectIdSelector,
   botProjectSpaceSelector,
   jsonSchemaFilesByProjectIdSelector,
 } from '../../recoilModel';
 import { getFriendlyName } from '../../utils/dialogUtil';
 import { triggerNotSupported } from '../../utils/dialogValidator';
 import { useFeatureFlag } from '../../utils/hooks';
+import { LoadingSpinner } from '../LoadingSpinner';
 
 import { TreeItem } from './treeItem';
 import { ExpandableNode } from './ExpandableNode';
@@ -42,7 +43,6 @@ const root = css`
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  overflow-y: auto;
   overflow-x: hidden;
   .ms-List-cell {
     min-height: 36px;
@@ -61,9 +61,6 @@ const icons = {
 };
 
 const tree = css`
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
   height: 100%;
   label: tree;
 `;
@@ -95,8 +92,8 @@ export type TreeLink = {
   warningContent?: string;
   errorContent?: string;
   projectId: string;
-  skillId: string | null;
-  dialogName?: string;
+  skillId?: string;
+  dialogId?: string;
   trigger?: number;
 };
 
@@ -131,13 +128,14 @@ type BotInProject = {
 };
 
 type Props = {
-  onSelect?: (link: TreeLink) => void;
+  onSelect: (link: TreeLink) => void;
   onSelectAllLink?: () => void;
   showTriggers?: boolean;
   showDialogs?: boolean;
   navLinks?: TreeLink[];
   onDeleteTrigger: (id: string, index: number) => void;
   onDeleteDialog: (id: string) => void;
+  defaultSelected?: Partial<TreeLink>;
 };
 
 export const ProjectTree: React.FC<Props> = ({
@@ -147,23 +145,34 @@ export const ProjectTree: React.FC<Props> = ({
   onDeleteDialog,
   onDeleteTrigger,
   onSelect,
+  defaultSelected,
 }) => {
-  const { onboardingAddCoachMarkRef, selectTo, navTo, navigateToFormDialogSchema } = useRecoilValue(dispatcherState);
+  const { onboardingAddCoachMarkRef, navigateToFormDialogSchema } = useRecoilValue(dispatcherState);
 
   const [filter, setFilter] = useState('');
   const formDialogComposerFeatureEnabled = useFeatureFlag('FORM_DIALOG');
-  const [selectedLink, setSelectedLink] = useState<TreeLink | undefined>();
+  const [selectedLink, setSelectedLink] = useState<Partial<TreeLink> | undefined>(defaultSelected);
   const delayedSetFilter = debounce((newValue) => setFilter(newValue), 1000);
   const addMainDialogRef = useCallback((mainDialog) => onboardingAddCoachMarkRef({ mainDialog }), []);
   const projectCollection = useRecoilValue<BotInProject[]>(botProjectSpaceSelector).map((bot) => ({
     ...bot,
     hasWarnings: false,
   }));
-  const currentProjectId = useRecoilValue(currentProjectIdState);
+
+  useEffect(() => {
+    setSelectedLink(defaultSelected);
+  }, [defaultSelected]);
+
+  const rootProjectId = useRecoilValue(rootBotProjectIdSelector);
   const botProjectSpace = useRecoilValue(botProjectSpaceSelector);
 
   const jsonSchemaFilesByProjectId = useRecoilValue(jsonSchemaFilesByProjectIdSelector);
 
+  if (rootProjectId == null) {
+    // this should only happen before a project is loaded in, so it won't last very long
+    return <LoadingSpinner />;
+  }
+
   const notificationMap: { [projectId: string]: { [dialogId: string]: Diagnostic[] } } = {};
 
   for (const bot of projectCollection) {
@@ -178,8 +187,8 @@ export const ProjectTree: React.FC<Props> = ({
     }
   }
 
-  const dialogHasWarnings = (dialog: DialogInfo) => {
-    notificationMap[currentProjectId][dialog.id]?.some((diag) => diag.severity === DiagnosticSeverity.Warning);
+  const dialogHasWarnings = (projectId: string) => (dialog: DialogInfo) => {
+    notificationMap[projectId][dialog.id]?.some((diag) => diag.severity === DiagnosticSeverity.Warning);
   };
 
   const dialogIsFormDialog = (dialog: DialogInfo) => {
@@ -194,15 +203,24 @@ export const ProjectTree: React.FC<Props> = ({
   };
 
   const botHasWarnings = (bot: BotInProject) => {
-    return bot.dialogs.some(dialogHasWarnings);
+    return bot.dialogs.some(dialogHasWarnings(bot.projectId));
   };
 
-  const dialogHasErrors = (dialog: DialogInfo) => {
-    notificationMap[currentProjectId][dialog.id]?.some((diag) => diag.severity === DiagnosticSeverity.Error);
+  const dialogHasErrors = (projectId: string) => (dialog: DialogInfo) => {
+    notificationMap[projectId][dialog.id]?.some((diag) => diag.severity === DiagnosticSeverity.Error);
   };
 
   const botHasErrors = (bot: BotInProject) => {
-    return bot.dialogs.some(dialogHasErrors);
+    return bot.dialogs.some(dialogHasErrors(bot.projectId));
+  };
+
+  const doesLinkMatch = (linkInTree?: Partial<TreeLink>, selectedLink?: Partial<TreeLink>) => {
+    if (linkInTree == null || selectedLink == null) return false;
+    return (
+      linkInTree.skillId === selectedLink.skillId &&
+      linkInTree.dialogId === selectedLink.dialogId &&
+      linkInTree.trigger === selectedLink.trigger
+    );
   };
 
   const handleOnSelect = (link: TreeLink) => {
@@ -210,20 +228,13 @@ export const ProjectTree: React.FC<Props> = ({
     if (isEqual(link, selectedLink)) return;
 
     setSelectedLink(link);
-    onSelect?.(link); // if we've defined a custom onSelect, use it
-    if (link.dialogName != null) {
-      if (link.trigger != null) {
-        selectTo(link.projectId, link.skillId, link.dialogName, `triggers[${link.trigger}]`);
-      } else {
-        navTo(link.projectId, link.skillId, link.dialogName);
-      }
-    }
+    onSelect(link);
   };
 
   const renderBotHeader = (bot: BotInProject) => {
     const link: TreeLink = {
       displayName: bot.name,
-      projectId: currentProjectId,
+      projectId: rootProjectId,
       skillId: bot.projectId,
       isRoot: true,
       warningContent: botHasWarnings(bot) ? formatMessage('This bot has warnings') : undefined,
@@ -244,30 +255,31 @@ export const ProjectTree: React.FC<Props> = ({
           showProps
           forceIndent={bot.isRemote ? SUMMARY_ARROW_SPACE : 0}
           icon={bot.isRemote ? icons.EXTERNAL_SKILL : icons.BOT}
-          isSubItemActive={isEqual(link, selectedLink)}
+          isActive={doesLinkMatch(link, selectedLink)}
           link={link}
           menu={[{ label: formatMessage('Create/edit skill manifest'), onClick: () => {} }]}
+          onSelect={handleOnSelect}
         />
       </span>
     );
   };
 
   const renderDialogHeader = (skillId: string, dialog: DialogInfo) => {
-    const warningContent = notificationMap[currentProjectId][dialog.id]
+    const warningContent = notificationMap[skillId][dialog.id]
       ?.filter((diag) => diag.severity === DiagnosticSeverity.Warning)
       .map((diag) => diag.message)
       .join(',');
-    const errorContent = notificationMap[currentProjectId][dialog.id]
+    const errorContent = notificationMap[skillId][dialog.id]
       ?.filter((diag) => diag.severity === DiagnosticSeverity.Error)
       .map((diag) => diag.message)
       .join(',');
 
     const link: TreeLink = {
-      dialogName: dialog.id,
+      dialogId: dialog.id,
       displayName: dialog.displayName,
       isRoot: dialog.isRoot,
-      projectId: currentProjectId,
-      skillId,
+      projectId: rootProjectId,
+      skillId: skillId,
       errorContent,
       warningContent,
     };
@@ -290,14 +302,14 @@ export const ProjectTree: React.FC<Props> = ({
           showProps
           forceIndent={showTriggers ? 0 : SUMMARY_ARROW_SPACE}
           icon={isFormDialog ? icons.FORM_DIALOG : icons.DIALOG}
-          isSubItemActive={isEqual(link, selectedLink)}
+          isActive={doesLinkMatch(link, selectedLink)}
           link={link}
           menu={[
             {
               label: formatMessage('Remove this dialog'),
               icon: 'Delete',
               onClick: (link) => {
-                onDeleteDialog(link.dialogName ?? '');
+                onDeleteDialog(link.dialogId ?? '');
               },
             },
             ...(showEditSchema
@@ -319,14 +331,14 @@ export const ProjectTree: React.FC<Props> = ({
 
   const renderTrigger = (item: any, dialog: DialogInfo, projectId: string): React.ReactNode => {
     const link: TreeLink = {
+      projectId: rootProjectId,
+      skillId: projectId,
+      dialogId: dialog.id,
+      trigger: item.index,
       displayName: item.displayName,
       warningContent: item.warningContent,
       errorContent: item.errorContent,
-      trigger: item.index,
-      dialogName: dialog.id,
       isRoot: false,
-      projectId,
-      skillId: null,
     };
 
     return (
@@ -335,14 +347,14 @@ export const ProjectTree: React.FC<Props> = ({
         dialogName={dialog.displayName}
         forceIndent={48}
         icon={icons.TRIGGER}
-        isActive={isEqual(link, selectedLink)}
+        isActive={doesLinkMatch(link, selectedLink)}
         link={link}
         menu={[
           {
             label: formatMessage('Remove this trigger'),
             icon: 'Delete',
             onClick: (link) => {
-              onDeleteTrigger(link.dialogName ?? '', link.trigger ?? 0);
+              onDeleteTrigger(link.dialogId ?? '', link.trigger ?? 0);
             },
           },
         ]}
@@ -380,11 +392,10 @@ export const ProjectTree: React.FC<Props> = ({
 
   const renderTriggerGroupHeader = (displayName: string, dialog: DialogInfo, projectId: string) => {
     const link: TreeLink = {
-      dialogName: dialog.id,
+      dialogId: dialog.id,
       displayName,
       isRoot: false,
       projectId: projectId,
-      skillId: null,
     };
     return (
       <span
@@ -527,7 +538,7 @@ export const ProjectTree: React.FC<Props> = ({
           {onAllSelected != null ? (
             <TreeItem
               forceIndent={SUMMARY_ARROW_SPACE}
-              link={{ displayName: formatMessage('All'), skillId: null, projectId: currentProjectId, isRoot: true }}
+              link={{ displayName: formatMessage('All'), projectId: rootProjectId, isRoot: true }}
               onSelect={onAllSelected}
             />
           ) : null}
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index a4ba777ae9..400b22932e 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -240,7 +240,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
   isActive = false,
   icon,
   dialogName,
-  forceIndent: shiftOut,
+  forceIndent,
   onSelect,
   menu = [],
 }) => {
@@ -248,12 +248,12 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
 
   const overflowMenu = menu.map(renderTreeMenuItem(link));
 
-  const linkString = `${link.projectId}_DialogTreeItem${link.dialogName}_${link.trigger ?? ''}`;
+  const linkString = `${link.projectId}_DialogTreeItem${link.dialogId}_${link.trigger ?? ''}`;
 
   return (
     <div
       aria-label={a11yLabel}
-      css={navItem(!!isActive, shiftOut ?? 0)}
+      css={navItem(!!isActive, forceIndent ?? 0)}
       data-testid={a11yLabel}
       role="gridcell"
       tabIndex={0}
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index efb9d3160c..e838c9a3d2 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -28,7 +28,7 @@ import {
 import { Conversation } from '../../components/Conversation';
 import { dialogStyle } from '../../components/Modal/dialogStyle';
 import { OpenConfirmModal } from '../../components/Modal/ConfirmDialog';
-import { ProjectTree } from '../../components/ProjectTree/ProjectTree';
+import { ProjectTree, TreeLink } from '../../components/ProjectTree/ProjectTree';
 import { Toolbar, IToolbarItem } from '../../components/Toolbar';
 import { clearBreadcrumb, getFocusPath } from '../../utils/navigation';
 import { navigateTo } from '../../utils/navigation';
@@ -109,21 +109,23 @@ const getTabFromFragment = () => {
   }
 };
 
-const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: string }>> = (props) => {
-  const { location, dialogId, projectId = '' } = props;
+const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: string; skillId?: string }>> = (
+  props
+) => {
+  const { location, dialogId, projectId = '', skillId = null } = props;
   const userSettings = useRecoilValue(userSettingsState);
 
-  const qnaFiles = useRecoilValue(qnaFilesState(projectId));
-  const schemas = useRecoilValue(schemasState(projectId));
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
-  const displaySkillManifest = useRecoilValue(displaySkillManifestState(projectId));
-  const breadcrumb = useRecoilValue(breadcrumbState(projectId));
-  const focusPath = useRecoilValue(focusPathState(projectId));
-  const showCreateDialogModal = useRecoilValue(showCreateDialogModalState(projectId));
-  const showAddSkillDialogModal = useRecoilValue(showAddSkillDialogModalState(projectId));
-  const locale = useRecoilValue(localeState(projectId));
-  const undoFunction = useRecoilValue(undoFunctionState(projectId));
-  const undoVersion = useRecoilValue(undoVersionState(projectId));
+  const qnaFiles = useRecoilValue(qnaFilesState(skillId ?? projectId));
+  const schemas = useRecoilValue(schemasState(skillId ?? projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(skillId ?? projectId));
+  const displaySkillManifest = useRecoilValue(displaySkillManifestState(skillId ?? projectId));
+  const breadcrumb = useRecoilValue(breadcrumbState(skillId ?? projectId));
+  const focusPath = useRecoilValue(focusPathState(skillId ?? projectId));
+  const showCreateDialogModal = useRecoilValue(showCreateDialogModalState(skillId ?? projectId));
+  const showAddSkillDialogModal = useRecoilValue(showAddSkillDialogModalState(skillId ?? projectId));
+  const locale = useRecoilValue(localeState(skillId ?? projectId));
+  const undoFunction = useRecoilValue(undoFunctionState(skillId ?? projectId));
+  const undoVersion = useRecoilValue(undoVersionState(skillId ?? projectId));
   const rootProjectId = useRecoilValue(rootBotProjectIdSelector) ?? projectId;
 
   const { undo, redo, canRedo, canUndo, commitChanges, clearUndo } = undoFunction;
@@ -159,10 +161,10 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const [currentDialog, setCurrentDialog] = useState<DialogInfo>(dialogs[0]);
   const [exportSkillModalVisible, setExportSkillModalVisible] = useState(false);
   const [warningIsVisible, setWarningIsVisible] = useState(true);
-  const shell = useShell('DesignPage', projectId);
-  const shellForFlowEditor = useShell('FlowEditor', projectId);
-  const shellForPropertyEditor = useShell('PropertyEditor', projectId);
-  const triggerApi = useTriggerApi(projectId);
+  const shell = useShell('DesignPage', skillId ?? rootProjectId);
+  const shellForFlowEditor = useShell('FlowEditor', skillId ?? rootProjectId);
+  const shellForPropertyEditor = useShell('PropertyEditor', skillId ?? rootProjectId);
+  const triggerApi = useTriggerApi(skillId ?? rootProjectId);
   const { createTrigger, createQnATrigger } = shell.api;
 
   useEffect(() => {
@@ -194,9 +196,8 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     if (location && props.dialogId && props.projectId) {
       const { dialogId, projectId } = props;
 
-      // TODO: swap to the commented-out block once we're working on skills for real (issue #4429)
-      // let { skillId } = props;
-      // if (skillId == null) skillId = projectId;
+      let { skillId } = props;
+      if (skillId == null) skillId = projectId;
 
       const params = new URLSearchParams(location.search);
       const dialogMap = dialogs.reduce((acc, { content, id }) => ({ ...acc, [id]: content }), {});
@@ -206,21 +207,22 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
 
       //make sure focusPath always valid
       const data = getDialogData(dialogMap, dialogId, getFocusPath(selected, focused));
+
       if (typeof data === 'undefined') {
-        const { id } = dialogs.find(({ id }) => id === dialogId) || dialogs.find(({ isRoot }) => isRoot) || {};
+        const { id: foundId } = dialogs.find(({ id }) => id === dialogId) || dialogs.find(({ isRoot }) => isRoot) || {};
         /**
          * It's improper to fallback to `dialogId` directly:
-         *   - If 'action' not exists at `focused` path, fallback to trigger path;
-         *   - If 'trigger' not exists at `selected` path, fallback to dialog Id;
-         *   - If 'dialog' not exists at `dialogId` path, fallback to main dialog.
+         *   - If 'action' does not exist at `focused` path, fallback to trigger path;
+         *   - If 'trigger' does not exist at `selected` path, fallback to dialog Id;
+         *   - If 'dialog' does not exist at `dialogId` path, fallback to main dialog.
          */
-        if (id) {
-          navTo(rootProjectId, null, id);
+        if (foundId != null) {
+          navTo(skillId ?? projectId, foundId);
         }
         return;
       }
 
-      setDesignPageLocation(projectId, {
+      setDesignPageLocation(skillId ?? projectId, {
         dialogId,
         selected,
         focused,
@@ -255,18 +257,23 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     createTrigger(dialogId, formData);
   };
 
-  function handleSelect(projectId, id, selected = '') {
+  function handleSelect(link: TreeLink) {
     updateZoomRate({ currentRate: 1 });
-    if (selected) {
-      selectTo(projectId, null, null, selected);
+    if (link.trigger != null) {
+      selectTo(link.skillId ?? null, link.dialogId ?? null, `triggers[${link.trigger}]`);
+    } else if (link.dialogId != null) {
+      navTo(link.skillId ?? link.projectId, link.dialogId, [
+        { skillId: link.skillId, dialogId: link.dialogId, selected: '', focused: '' },
+      ]);
     } else {
-      navTo(projectId, null, id, []);
+      // with no dialog or ID, we must be looking at a bot link
+      navTo(link.skillId ?? link.projectId, null, []);
     }
   }
 
-  const onCreateDialogComplete = (newDialog) => {
-    if (newDialog) {
-      navTo(projectId, null, newDialog, []);
+  const onCreateDialogComplete = (dialogId) => {
+    if (dialogId) {
+      navTo(projectId, dialogId, [{ dialogId, selected: '', focused: '' }]);
     }
   };
 
@@ -281,7 +288,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     return { actionSelected, showDisableBtn, showEnableBtn };
   }, [visualEditorSelection]);
 
-  const { onFocusFlowEditor, onBlurFlowEditor } = useElectronFeatures(actionSelected, canUndo(), canRedo());
+  const { onFocusFlowEditor, onBlurFlowEditor } = useElectronFeatures(actionSelected, canUndo?.(), canRedo?.());
 
   const EditorAPI = getEditorAPI();
   const toolbarItems: IToolbarItem[] = [
@@ -342,13 +349,13 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           {
             key: 'edit.undo',
             text: formatMessage('Undo'),
-            disabled: !canUndo(),
+            disabled: !canUndo?.(),
             onClick: undo,
           },
           {
             key: 'edit.redo',
             text: formatMessage('Redo'),
-            disabled: !canRedo(),
+            disabled: !canRedo?.(),
             onClick: redo,
           },
           {
@@ -451,7 +458,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   function handleBreadcrumbItemClick(_event, item) {
     if (item) {
       const { dialogId, selected, focused, index } = item;
-      selectAndFocus(projectId, null, dialogId, selected, focused, clearBreadcrumb(breadcrumb, index));
+      selectAndFocus(projectId, skillId, dialogId, selected, focused, clearBreadcrumb(breadcrumb, index));
     }
   }
 
@@ -533,7 +540,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     const content = deleteTrigger(dialogs, dialogId, index, (trigger) => triggerApi.deleteTrigger(dialogId, trigger));
 
     if (content) {
-      updateDialog({ id: dialogId, content, projectId });
+      updateDialog({ id: dialogId, content, projectId: skillId ?? projectId });
       const match = /\[(\d+)\]/g.exec(selected);
       const current = match && match[1];
       if (!current) return;
@@ -541,14 +548,14 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       if (index === currentIdx) {
         if (currentIdx - 1 >= 0) {
           //if the deleted node is selected and the selected one is not the first one, navTo the previous trigger;
-          selectTo(projectId, null, dialogId, createSelectedPath(currentIdx - 1));
+          selectTo(skillId ?? projectId, dialogId, createSelectedPath(currentIdx - 1));
         } else {
           //if the deleted node is selected and the selected one is the first one, navTo the first trigger;
-          navTo(projectId, null, dialogId, []);
+          navTo(skillId ?? projectId, dialogId, []);
         }
       } else if (index < currentIdx) {
         //if the deleted node is at the front, navTo the current one;
-        selectTo(projectId, null, dialogId, createSelectedPath(currentIdx - 1));
+        selectTo(skillId ?? projectId, dialogId, createSelectedPath(currentIdx - 1));
       }
     }
   }
@@ -581,14 +588,27 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const selectedTrigger = currentDialog?.triggers.find((t) => t.id === selected);
   const withWarning = triggerNotSupported(currentDialog, selectedTrigger);
 
+  const parseTriggerId = (triggerId: string | undefined): number | undefined => {
+    if (triggerId == null) return undefined;
+    const indexString = triggerId.match(/\d+/)?.[0];
+    if (indexString == null) return undefined;
+    return parseInt(indexString);
+  };
+
   return (
     <React.Fragment>
       <div css={pageRoot}>
         <LeftRightSplit initialLeftGridWidth="20%" minLeftPixels={200} minRightPixels={800}>
           <ProjectTree
+            defaultSelected={{
+              projectId,
+              skillId: skillId ?? undefined,
+              dialogId,
+              trigger: parseTriggerId(selectedTrigger?.id),
+            }}
             onDeleteDialog={handleDeleteDialog}
             onDeleteTrigger={handleDeleteTrigger}
-            onSelect={(...props) => handleSelect(projectId, ...props)}
+            onSelect={handleSelect}
           />
           <div css={contentWrapper} role="main">
             <div css={{ position: 'relative' }} data-testid="DesignPage-ToolBar">
@@ -612,7 +632,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
                         schema={schemas.sdk.content}
                         value={currentDialog.content || undefined}
                         onChange={(data) => {
-                          updateDialog({ id: currentDialog.id, content: data, projectId });
+                          updateDialog({ id: currentDialog.id, content: data, projectId: skillId ?? projectId });
                         }}
                       />
                     ) : withWarning ? (
diff --git a/Composer/packages/client/src/pages/skills/skill-list.tsx b/Composer/packages/client/src/pages/skills/skill-list.tsx
index 43424dd313..63435f0e8d 100644
--- a/Composer/packages/client/src/pages/skills/skill-list.tsx
+++ b/Composer/packages/client/src/pages/skills/skill-list.tsx
@@ -131,7 +131,7 @@ const SkillList: React.FC<SkillListProps> = ({ projectId }) => {
     }
   };
 
-  const handleEditSkill = (projectId, skillId) => (skillData) => {
+  const handleEditSkill = (projectId: string, skillId: string) => (skillData) => {
     updateSkill(projectId, skillId, skillData);
   };
 
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/botProjectFile.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/botProjectFile.test.tsx
index 8d24ddeb21..f6e49a076a 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/botProjectFile.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/botProjectFile.test.tsx
@@ -127,7 +127,9 @@ describe('Bot Project File dispatcher', () => {
       dispatcher.addLocalSkillToBotProjectFile(testSkillId);
     });
 
-    expect(renderedComponent.current.botProjectFile.content.skills.todoSkill.workspace).toBe('../Todo-Skill');
+    expect(renderedComponent.current.botProjectFile.content.skills.todoSkill.workspace).toMatch(
+      /\.\.(\/|\\)Todo-Skill/
+    );
     expect(renderedComponent.current.botProjectFile.content.skills.todoSkill.remote).toBeFalsy();
   });
 
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
index f931e55c2f..9661ff113f 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
@@ -21,7 +21,7 @@ import {
 } from '../../../utils/navigation';
 import { createSelectedPath, getSelected } from '../../../utils/dialogUtil';
 import { BreadcrumbItem } from '../../../recoilModel/types';
-import { currentProjectIdState } from '../../atoms';
+import { currentProjectIdState, botProjectIdsState, botProjectFileState, projectMetaDataState } from '../../atoms';
 
 jest.mock('../../../utils/navigation');
 jest.mock('../../../utils/dialogUtil');
@@ -35,6 +35,7 @@ const mockConvertPathToUrl = convertPathToUrl as jest.Mock<string>;
 const mockCreateSelectedPath = createSelectedPath as jest.Mock<string>;
 
 const projectId = '12345.678';
+const skillId = '98765.4321';
 
 function expectNavTo(location: string, state: {} | null = null) {
   expect(mockNavigateTo).toHaveBeenLastCalledWith(location, state == null ? expect.anything() : state);
@@ -80,11 +81,31 @@ describe('navigation dispatcher', () => {
             focused: 'b',
           },
         },
+        {
+          recoilState: designPageLocationState(skillId),
+          initialValue: {
+            dialogId: 'dialogInSkillId',
+            selected: 'a',
+            focused: 'b',
+          },
+        },
         { recoilState: currentProjectIdState, initialValue: projectId },
         {
           recoilState: dialogsSelectorFamily(projectId),
           initialValue: [{ id: 'newDialogId', triggers: [{ type: SDKKinds.OnBeginDialog }] }],
         },
+        {
+          recoilState: botProjectIdsState,
+          initialValue: [projectId],
+        },
+        {
+          recoilState: botProjectFileState(projectId),
+          initialValue: { foo: 'bar' },
+        },
+        {
+          recoilState: projectMetaDataState(projectId),
+          initialValue: { isRootBot: true },
+        },
       ],
       dispatcher: {
         recoilState: dispatcherState,
@@ -176,27 +197,16 @@ describe('navigation dispatcher', () => {
     it('navigates to a destination', async () => {
       mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/dialogs/dialogId`);
       await act(async () => {
-        await dispatcher.navTo(projectId, null, 'dialogId', []);
+        await dispatcher.navTo(projectId, 'dialogId', []);
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId`);
-      expect(mockConvertPathToUrl).toBeCalledWith(projectId, null, 'dialogId', undefined);
-    });
-
-    it('redirects to the begin dialog trigger', async () => {
-      mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/dialogs/newDialogId?selection=triggers[0]`);
-      mockCreateSelectedPath.mockReturnValue('triggers[0]');
-      await act(async () => {
-        await dispatcher.navTo(projectId, null, 'newDialogId', []);
-      });
-      expectNavTo(`/bot/${projectId}/dialogs/newDialogId?selection=triggers[0]`);
-      expect(mockConvertPathToUrl).toBeCalledWith(projectId, null, 'newDialogId', 'triggers[0]');
-      expect(mockCreateSelectedPath).toBeCalledWith(0);
+      expect(mockConvertPathToUrl).toBeCalledWith(projectId, projectId, 'dialogId');
     });
 
     it("doesn't navigate to a destination where we already are", async () => {
       mockCheckUrl.mockReturnValue(true);
       await act(async () => {
-        await dispatcher.navTo(projectId, null, 'dialogId', []);
+        await dispatcher.navTo(projectId, 'dialogId', []);
       });
       expect(mockNavigateTo).not.toBeCalled();
     });
@@ -205,7 +215,7 @@ describe('navigation dispatcher', () => {
   describe('selectTo', () => {
     it("doesn't go anywhere without a selection", async () => {
       await act(async () => {
-        await dispatcher.selectTo(projectId, null, null, '');
+        await dispatcher.selectTo(null, null, '');
       });
       expect(mockNavigateTo).not.toBeCalled();
     });
@@ -213,16 +223,25 @@ describe('navigation dispatcher', () => {
     it('navigates to a default URL with selected path', async () => {
       mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/dialogs/dialogId?selected=selection`);
       await act(async () => {
-        await dispatcher.selectTo(projectId, null, null, 'selection');
+        await dispatcher.selectTo(null, null, 'selection');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?selected=selection`);
       expect(mockConvertPathToUrl).toBeCalledWith(projectId, null, 'dialogId', 'selection');
     });
 
+    it('navigates to a default URL with skillId and selected path', async () => {
+      mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/skill/${skillId}/dialogs/dialogId?selected=selection`);
+      await act(async () => {
+        await dispatcher.selectTo(skillId, 'dialogId', 'selection');
+      });
+      expectNavTo(`/bot/${projectId}/skill/${skillId}/dialogs/dialogId?selected=selection`);
+      expect(mockConvertPathToUrl).toBeCalledWith(projectId, skillId, 'dialogId', 'selection');
+    });
+
     it("doesn't go anywhere if we're already there", async () => {
       mockCheckUrl.mockReturnValue(true);
       await act(async () => {
-        await dispatcher.selectTo(projectId, null, null, 'selection');
+        await dispatcher.selectTo(null, null, 'selection');
       });
       expect(mockNavigateTo).not.toBeCalled();
     });
@@ -231,7 +250,7 @@ describe('navigation dispatcher', () => {
   describe('focusTo', () => {
     it('goes to the same page with no arguments', async () => {
       await act(async () => {
-        await dispatcher.focusTo(projectId, '', '');
+        await dispatcher.focusTo(projectId, null, '', '');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?selected=a`);
     });
@@ -239,28 +258,48 @@ describe('navigation dispatcher', () => {
     it('goes to a focused page', async () => {
       mockGetSelected.mockReturnValueOnce('select');
       await act(async () => {
-        await dispatcher.focusTo(projectId, 'focus', '');
+        await dispatcher.focusTo(projectId, null, 'focus', '');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?selected=select&focused=focus`);
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Focused);
     });
 
+    it('goes to a focused page with skill', async () => {
+      mockGetSelected.mockReturnValueOnce('select');
+      await act(async () => {
+        await dispatcher.focusTo(projectId, skillId, 'focus', '');
+      });
+      expectNavTo(`/bot/${projectId}/skill/${skillId}/dialogs/dialogInSkillId?selected=select&focused=focus`);
+      expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
+      expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Focused);
+    });
+
     it('goes to a focused page with fragment', async () => {
       mockGetSelected.mockReturnValueOnce('select');
       await act(async () => {
-        await dispatcher.focusTo(projectId, 'focus', 'fragment');
+        await dispatcher.focusTo(projectId, null, 'focus', 'fragment');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?selected=select&focused=focus#fragment`);
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Focused);
     });
 
+    it('goes to a focused page with skill and fragment', async () => {
+      mockGetSelected.mockReturnValueOnce('select');
+      await act(async () => {
+        await dispatcher.focusTo(projectId, skillId, 'focus', 'fragment');
+      });
+      expectNavTo(`/bot/${projectId}/skill/${skillId}/dialogs/dialogInSkillId?selected=select&focused=focus#fragment`);
+      expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
+      expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Focused);
+    });
+
     it('stays on the same page but updates breadcrumbs with a checked URL', async () => {
       mockCheckUrl.mockReturnValue(true);
       mockGetSelected.mockReturnValueOnce('select');
       await act(async () => {
-        await dispatcher.focusTo(projectId, 'focus', 'fragment');
+        await dispatcher.focusTo(projectId, null, 'focus', 'fragment');
       });
       expect(mockNavigateTo).not.toBeCalled();
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
@@ -269,7 +308,7 @@ describe('navigation dispatcher', () => {
   });
 
   describe('selectAndFocus', () => {
-    it('sets selection and focus with a valud search', async () => {
+    it('sets selection and focus with a valid search', async () => {
       mockGetUrlSearch.mockReturnValue('?foo=bar&baz=quux');
       await act(async () => {
         await dispatcher.selectAndFocus(projectId, null, 'dialogId', 'select', 'focus');
@@ -277,6 +316,14 @@ describe('navigation dispatcher', () => {
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?foo=bar&baz=quux`);
     });
 
+    it('sets selection and focus with a valid search and skillId', async () => {
+      mockGetUrlSearch.mockReturnValue('?foo=bar&baz=quux');
+      await act(async () => {
+        await dispatcher.selectAndFocus(projectId, skillId, 'dialogId', 'select', 'focus');
+      });
+      expectNavTo(`/bot/${projectId}/skill/${skillId}/dialogs/dialogId?foo=bar&baz=quux`);
+    });
+
     it("doesn't go anywhere if we're already there", async () => {
       mockCheckUrl.mockReturnValue(true);
       await act(async () => {
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index 23126d1946..e18df80e4d 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -4,14 +4,13 @@
 
 //TODO: refactor the router to use one-way data flow
 import { useRecoilCallback, CallbackInterface } from 'recoil';
-import { PromptTab, SDKKinds } from '@bfc/shared';
-import cloneDeep from 'lodash/cloneDeep';
+import { PromptTab } from '@bfc/shared';
 
 import { currentProjectIdState } from '../atoms';
 import { encodeArrayPathToDesignerPath } from '../../utils/convertUtils/designerPathEncoder';
-import { dialogsSelectorFamily } from '../selectors';
+import { dialogsSelectorFamily, rootBotProjectIdSelector } from '../selectors';
 
-import { createSelectedPath, getSelected } from './../../utils/dialogUtil';
+import { getSelected } from './../../utils/dialogUtil';
 import { BreadcrumbItem } from './../../recoilModel/types';
 import { breadcrumbState, designPageLocationState, focusPathState } from './../atoms/botState';
 import {
@@ -50,44 +49,37 @@ export const navigationDispatcher = () => {
 
   const navTo = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
-      projectId: string,
       skillId: string | null,
-      dialogId: string,
+      dialogId: string | null,
       breadcrumb: BreadcrumbItem[] = []
     ) => {
-      const dialogs = await snapshot.getPromise(dialogsSelectorFamily(projectId));
-      const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
-      const updatedBreadcrumb = cloneDeep(breadcrumb);
-      set(currentProjectIdState, projectId);
-
-      let path;
-      if (dialogId !== designPageLocation.dialogId) {
-        const currentDialog = dialogs.find(({ id }) => id === dialogId);
-        const beginDialogIndex = currentDialog?.triggers.findIndex(({ type }) => type === SDKKinds.OnBeginDialog);
+      const rootBotProjectId = await snapshot.getPromise(rootBotProjectIdSelector);
+      if (rootBotProjectId == null) return;
 
-        if (typeof beginDialogIndex !== 'undefined' && beginDialogIndex >= 0) {
-          path = createSelectedPath(beginDialogIndex);
-          path = encodeArrayPathToDesignerPath(currentDialog?.content, path);
-          updatedBreadcrumb.push({ dialogId, selected: '', focused: '' });
-        }
-      }
+      const projectId = skillId ?? rootBotProjectId;
 
-      const currentUri = convertPathToUrl(projectId, skillId, dialogId, path);
+      const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
+      set(currentProjectIdState, projectId);
 
-      if (checkUrl(currentUri, projectId, designPageLocation)) return;
+      const currentUri = convertPathToUrl(rootBotProjectId, projectId, dialogId);
+      if (checkUrl(currentUri, rootBotProjectId, projectId, designPageLocation)) return;
 
-      navigateTo(currentUri, { state: { breadcrumb: updatedBreadcrumb } });
+      navigateTo(currentUri, { state: { breadcrumb } });
     }
   );
 
   const selectTo = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
-      projectId: string,
       skillId: string | null,
       destinationDialogId: string | null,
       selectPath: string
     ) => {
       if (!selectPath) return;
+      const rootBotProjectId = await snapshot.getPromise(rootBotProjectIdSelector);
+      if (rootBotProjectId == null) return;
+
+      const projectId = skillId ?? rootBotProjectId;
+
       set(currentProjectIdState, projectId);
       const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
       const breadcrumb = await snapshot.getPromise(breadcrumbState(projectId));
@@ -98,25 +90,33 @@ export const navigationDispatcher = () => {
       const dialogs = await snapshot.getPromise(dialogsSelectorFamily(projectId));
       const currentDialog = dialogs.find(({ id }) => id === dialogId);
       const encodedSelectPath = encodeArrayPathToDesignerPath(currentDialog?.content, selectPath);
-      const currentUri = convertPathToUrl(projectId, skillId, dialogId, encodedSelectPath);
+      const currentUri = convertPathToUrl(rootBotProjectId, skillId, dialogId, encodedSelectPath);
 
-      if (checkUrl(currentUri, projectId, designPageLocation)) return;
+      if (checkUrl(currentUri, rootBotProjectId, skillId, designPageLocation)) return;
       navigateTo(currentUri, { state: { breadcrumb: updateBreadcrumb(breadcrumb, BreadcrumbUpdateType.Selected) } });
     }
   );
 
   const focusTo = useRecoilCallback(
-    ({ snapshot, set }: CallbackInterface) => async (projectId: string, focusPath: string, fragment: string) => {
-      set(currentProjectIdState, projectId);
-      const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
-      const breadcrumb = await snapshot.getPromise(breadcrumbState(projectId));
+    ({ snapshot, set }: CallbackInterface) => async (
+      projectId: string,
+      skillId: string | null,
+      focusPath: string,
+      fragment: string
+    ) => {
+      set(currentProjectIdState, skillId ?? projectId);
+      const designPageLocation = await snapshot.getPromise(designPageLocationState(skillId ?? projectId));
+      const breadcrumb = await snapshot.getPromise(breadcrumbState(skillId ?? projectId));
       let updatedBreadcrumb = [...breadcrumb];
       const { dialogId, selected } = designPageLocation;
 
-      let currentUri = `/bot/${projectId}/dialogs/${dialogId}`;
+      let currentUri =
+        skillId == null
+          ? `/bot/${projectId}/dialogs/${dialogId}`
+          : `/bot/${projectId}/skill/${skillId}/dialogs/${dialogId}`;
 
       if (focusPath) {
-        const dialogs = await snapshot.getPromise(dialogsSelectorFamily(projectId));
+        const dialogs = await snapshot.getPromise(dialogsSelectorFamily(skillId ?? projectId));
         const currentDialog = dialogs.find(({ id }) => id === dialogId);
         const encodedFocusPath = encodeArrayPathToDesignerPath(currentDialog?.content, focusPath);
 
@@ -135,7 +135,7 @@ export const navigationDispatcher = () => {
       if (fragment && typeof fragment === 'string') {
         currentUri += `#${fragment}`;
       }
-      if (checkUrl(currentUri, projectId, designPageLocation)) return;
+      if (checkUrl(currentUri, projectId, skillId, designPageLocation)) return;
       navigateTo(currentUri, { state: { breadcrumb: updatedBreadcrumb } });
     }
   );
@@ -158,12 +158,15 @@ export const navigationDispatcher = () => {
       const search = getUrlSearch(encodedSelectPath, encodedFocusPath);
       const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
       if (search) {
-        const currentUri = `/bot/${projectId}/dialogs/${dialogId}${search}`;
+        const currentUri =
+          skillId == null
+            ? `/bot/${projectId}/dialogs/${dialogId}${search}`
+            : `/bot/${projectId}/skill/${skillId}/dialogs/${dialogId}${search}`;
 
-        if (checkUrl(currentUri, projectId, designPageLocation)) return;
+        if (checkUrl(currentUri, projectId, skillId, designPageLocation)) return;
         navigateTo(currentUri, { state: { breadcrumb } });
       } else {
-        navTo(projectId, skillId, dialogId, breadcrumb);
+        navTo(skillId ?? projectId, dialogId, breadcrumb);
       }
     }
   );
diff --git a/Composer/packages/client/src/recoilModel/types.ts b/Composer/packages/client/src/recoilModel/types.ts
index 8f59646139..453eca41b0 100644
--- a/Composer/packages/client/src/recoilModel/types.ts
+++ b/Composer/packages/client/src/recoilModel/types.ts
@@ -77,6 +77,7 @@ export interface AppUpdateState {
 }
 
 export interface BreadcrumbItem {
+  skillId?: string;
   dialogId: string;
   selected: string;
   focused: string;
diff --git a/Composer/packages/client/src/router.tsx b/Composer/packages/client/src/router.tsx
index 037bc9eff8..fda81b41a4 100644
--- a/Composer/packages/client/src/router.tsx
+++ b/Composer/packages/client/src/router.tsx
@@ -70,6 +70,13 @@ const Routes = (props) => {
               />
             ))}
           </ProjectRouter>
+          <ProjectRouter path="/bot/:projectId/skill/:skillId">
+            <DesignPage path="dialogs/:dialogId/*" />
+            <LUPage path="language-understanding/:dialogId/*" />
+            <LGPage path="language-generation/:dialogId/*" />
+            <QnAPage path="knowledge-base/:dialogId/*" />
+            <DesignPage path="*" />
+          </ProjectRouter>
           <SettingPage path="settings/*" />
           <BotCreationFlowRouter path="projects/*" />
           <BotCreationFlowRouter path="home" />
@@ -97,7 +104,7 @@ const projectStyle = css`
   label: ProjectRouter;
 `;
 
-const ProjectRouter: React.FC<RouteComponentProps<{ projectId: string }>> = (props) => {
+const ProjectRouter: React.FC<RouteComponentProps<{ projectId: string; skillId: string }>> = (props) => {
   const { projectId = '' } = props;
   const schemas = useRecoilValue(schemasState(projectId));
   const { fetchProjectById } = useRecoilValue(dispatcherState);
@@ -119,7 +126,11 @@ const ProjectRouter: React.FC<RouteComponentProps<{ projectId: string }>> = (pro
   }, [schemas, projectId]);
 
   if (props.projectId && botProjects.includes(props.projectId)) {
-    return <div css={projectStyle}>{props.children}</div>;
+    if (props.skillId && !botProjects.includes(props.skillId)) {
+      return <LoadingSpinner />;
+    } else {
+      return <div css={projectStyle}>{props.children}</div>;
+    }
   }
   return <LoadingSpinner />;
 };
diff --git a/Composer/packages/client/src/shell/triggerApi.ts b/Composer/packages/client/src/shell/triggerApi.ts
index 44c51ce5d2..c1d6ceb6c5 100644
--- a/Composer/packages/client/src/shell/triggerApi.ts
+++ b/Composer/packages/client/src/shell/triggerApi.ts
@@ -112,7 +112,7 @@ function createTriggerApi(
     };
     await updateDialog(dialogPayload);
     if (autoSelected) {
-      selectTo(projectId, null, null, `triggers[${index}]`);
+      selectTo(projectId, newDialog.id, `triggers[${index}]`);
     }
   };
 
diff --git a/Composer/packages/client/src/shell/useShell.ts b/Composer/packages/client/src/shell/useShell.ts
index 13c6d19a00..3e44f3ee05 100644
--- a/Composer/packages/client/src/shell/useShell.ts
+++ b/Composer/packages/client/src/shell/useShell.ts
@@ -27,6 +27,7 @@ import {
   lgFilesState,
   luFilesState,
   rateInfoState,
+  rootBotProjectIdSelector,
 } from '../recoilModel';
 import { undoFunctionState } from '../recoilModel/undo/history';
 
@@ -78,6 +79,7 @@ export function useShell(source: EventSource, projectId: string): Shell {
   const botName = useRecoilValue(botDisplayNameState(projectId));
   const settings = useRecoilValue(settingsState(projectId));
   const flowZoomRate = useRecoilValue(rateInfoState);
+  const rootBotProjectId = useRecoilValue(rootBotProjectIdSelector);
 
   const userSettings = useRecoilValue(userSettingsState);
   const clipboardActions = useRecoilValue(clipboardActionsState);
@@ -135,11 +137,13 @@ export function useShell(source: EventSource, projectId: string): Shell {
   }
 
   function navigationTo(path) {
-    navTo(projectId, null, path, breadcrumb);
+    if (rootBotProjectId == null) return;
+    navTo(projectId, path, breadcrumb);
   }
 
   function focusEvent(subPath) {
-    selectTo(projectId, null, null, subPath);
+    if (rootBotProjectId == null) return;
+    selectTo(projectId, dialogId, subPath);
   }
 
   function focusSteps(subPaths: string[] = [], fragment?: string) {
@@ -154,7 +158,7 @@ export function useShell(source: EventSource, projectId: string): Shell {
       }
     }
 
-    focusTo(projectId, dataPath, fragment ?? '');
+    focusTo(rootBotProjectId ?? projectId, projectId, dataPath, fragment ?? '');
   }
 
   function updateFlowZoomRate(currentRate) {
diff --git a/Composer/packages/client/src/utils/navigation.ts b/Composer/packages/client/src/utils/navigation.ts
index 773e5b0c6b..dcc7b19fe4 100644
--- a/Composer/packages/client/src/utils/navigation.ts
+++ b/Composer/packages/client/src/utils/navigation.ts
@@ -69,9 +69,13 @@ export function getUrlSearch(selected: string, focused: string): string {
 export function checkUrl(
   currentUri: string,
   projectId: string,
+  skillId: string | null,
   { dialogId, selected, focused, promptTab }: DesignPageLocation
 ) {
-  let lastUri = `/bot/${projectId}/dialogs/${dialogId}${getUrlSearch(selected, focused)}`;
+  let lastUri =
+    skillId == null
+      ? `/bot/${projectId}/dialogs/${dialogId}${getUrlSearch(selected, focused)}`
+      : `/bot/${projectId}/skill/${skillId}/dialogs/${dialogId}${getUrlSearch(selected, focused)}`;
   if (promptTab) {
     lastUri += `#${promptTab}`;
   }
@@ -83,14 +87,23 @@ export interface NavigationState {
   qnaKbUrls?: string[];
 }
 
-export function convertPathToUrl(projectId: string, skillId: string | null, dialogId: string, path?: string): string {
+export function convertPathToUrl(
+  projectId: string,
+  skillId: string | null,
+  dialogId: string | null,
+  path?: string
+): string {
   //path is like main.triggers[0].actions[0]
   //uri = id?selected=triggers[0]&focused=triggers[0].actions[0]
 
-  let uri =
-    skillId == null
-      ? `/bot/${projectId}/dialogs/${dialogId}`
-      : `/bot/${projectId}/skill/${skillId}/dialogs/${dialogId}`;
+  let uri = `/bot/${projectId}`;
+  if (skillId != null) {
+    uri += `/skill/${skillId}`;
+  }
+  if (dialogId != null) {
+    uri += `/dialogs/${dialogId}`;
+  }
+
   if (!path) return uri;
 
   const items = path.split('#');
diff --git a/Composer/packages/server/src/__mocks__/samplebots/bot1/recognizers/cross-train.config.json b/Composer/packages/server/src/__mocks__/samplebots/bot1/recognizers/cross-train.config.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/Composer/packages/server/src/__mocks__/samplebots/bot1/recognizers/cross-train.config.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file