diff --git a/Composer/cypress/integration/LuisDeploy.spec.ts b/Composer/cypress/integration/LuisDeploy.spec.ts
index fac2abfa85..1c79844e86 100644
--- a/Composer/cypress/integration/LuisDeploy.spec.ts
+++ b/Composer/cypress/integration/LuisDeploy.spec.ts
@@ -16,7 +16,7 @@ context('Luis Deploy', () => {
     cy.url().should('contain', 'language-understanding/all');
     cy.route({
       method: 'POST',
-      url: 'api/projects/*/luFiles/publish',
+      url: 'api/projects/*/build',
       status: 200,
       response: 'fixture:luPublish/success',
     });
@@ -33,7 +33,7 @@ context('Luis Deploy', () => {
 
     cy.route({
       method: 'POST',
-      url: 'api/projects/*/luFiles/publish',
+      url: 'api/projects/*/build',
       status: 400,
       response: 'fixture:luPublish/error',
     });
diff --git a/Composer/cypress/integration/ToDoBot.spec.ts b/Composer/cypress/integration/ToDoBot.spec.ts
index 749e6dda3f..6683a52ea8 100644
--- a/Composer/cypress/integration/ToDoBot.spec.ts
+++ b/Composer/cypress/integration/ToDoBot.spec.ts
@@ -2,9 +2,11 @@
 // Licensed under the MIT License.
 
 context('ToDo Bot', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/home');
     cy.createBot('TodoSample');
+    cy.findByTestId('WelcomeModalCloseIcon').click();
+    cy.findByText('Yes').click();
   });
 
   it('can open the main dialog', () => {
@@ -19,7 +21,6 @@ context('ToDo Bot', () => {
   it('can open the AddToDo dialog', () => {
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('addtodo').click();
-      cy.findByText('addtodo').click();
     });
 
     cy.url().should('contain', 'addtodo');
@@ -28,7 +29,6 @@ context('ToDo Bot', () => {
   it('can open the ClearToDos dialog', () => {
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('cleartodos').click();
-      cy.findByText('cleartodos').click();
     });
 
     cy.url().should('contain', 'cleartodos');
@@ -37,7 +37,6 @@ context('ToDo Bot', () => {
   it('can open the DeleteToDo dialog', () => {
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('deletetodo').click();
-      cy.findByText('deletetodo').click();
     });
 
     cy.url().should('contain', 'deletetodo');
@@ -46,7 +45,6 @@ context('ToDo Bot', () => {
   it('can open the ShowToDos dialog', () => {
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('showtodos').click();
-      cy.findByText('showtodos').click();
     });
 
     cy.url().should('contain', 'showtodos');
diff --git a/Composer/packages/client/__tests__/components/TestController/publish-luis-modal.test.tsx b/Composer/packages/client/__tests__/components/TestController/publish-luis-modal.test.tsx
index dd01c4bcd5..fbd5cd945c 100644
--- a/Composer/packages/client/__tests__/components/TestController/publish-luis-modal.test.tsx
+++ b/Composer/packages/client/__tests__/components/TestController/publish-luis-modal.test.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
 
-import { PublishLuisDialog } from '../../../src/components/TestController/publishDialog';
+import { PublishDialog } from '../../../src/components/TestController/publishDialog';
 import { projectIdState, botNameState, settingsState, dispatcherState } from '../../../src/recoilModel';
 import { renderWithRecoil } from '../../testUtils';
 jest.useFakeTimers();
@@ -18,8 +18,10 @@ const luisConfig = {
   defaultLanguage: 'en-us',
   environment: 'composer',
 };
-describe('<PublishLuisDialog />', () => {
-  it('should render the <PublishLuisDialog />', () => {
+const config = { subscriptionKey: '12345', qnaRegion: 'westus', ...luisConfig };
+const qnaConfig = { subscriptionKey: '12345', endpointKey: '12345', qnaRegion: 'westus' };
+describe('<PublishDialog />', () => {
+  it('should render the <PublishDialog />', () => {
     const onDismiss = jest.fn(() => {});
     const onPublish = jest.fn(() => {});
     const setSettingsMock = jest.fn(() => {});
@@ -31,16 +33,11 @@ describe('<PublishLuisDialog />', () => {
       set(botNameState, 'sampleBot0');
       set(settingsState, {
         luis: luisConfig,
+        qna: qnaConfig,
       });
     };
     const { getByText } = renderWithRecoil(
-      <PublishLuisDialog
-        isOpen
-        botName={'sampleBot0'}
-        config={luisConfig}
-        onDismiss={onDismiss}
-        onPublish={onPublish}
-      />,
+      <PublishDialog isOpen botName={'sampleBot0'} config={config} onDismiss={onDismiss} onPublish={onPublish} />,
       recoilInitState
     );
 
@@ -50,14 +47,21 @@ describe('<PublishLuisDialog />', () => {
     fireEvent.click(publishButton);
     expect(onPublish).toBeCalled();
     expect(onPublish).toBeCalledWith({
-      name: 'sampleBot0',
-      authoringKey: '12345',
-      authoringEndpoint: 'testAuthoringEndpoint',
-      endpointKey: '12345',
-      endpoint: 'testEndpoint',
-      authoringRegion: 'westus',
-      defaultLanguage: 'en-us',
-      environment: 'composer',
+      luis: {
+        name: 'sampleBot0',
+        authoringKey: '12345',
+        authoringEndpoint: 'testAuthoringEndpoint',
+        endpointKey: '12345',
+        endpoint: 'testEndpoint',
+        authoringRegion: 'westus',
+        defaultLanguage: 'en-us',
+        environment: 'composer',
+      },
+      qna: {
+        subscriptionKey: '12345',
+        endpointKey: '',
+        qnaRegion: 'westus',
+      },
     });
   });
 });
diff --git a/Composer/packages/client/__tests__/components/skill.test.tsx b/Composer/packages/client/__tests__/components/skill.test.tsx
index d253391717..dec5633a25 100644
--- a/Composer/packages/client/__tests__/components/skill.test.tsx
+++ b/Composer/packages/client/__tests__/components/skill.test.tsx
@@ -51,6 +51,11 @@ const recoilInitState = ({ set }) => {
       defaultLanguage: 'en-us',
       environment: 'composer',
     },
+    qna: {
+      subscriptionKey: '12345',
+      qnaRegion: 'westus',
+      endpointKey: '',
+    },
   });
 };
 
diff --git a/Composer/packages/client/__tests__/components/triggerCreationModal.test.tsx b/Composer/packages/client/__tests__/components/triggerCreationModal.test.tsx
new file mode 100644
index 0000000000..aa6a82e8c1
--- /dev/null
+++ b/Composer/packages/client/__tests__/components/triggerCreationModal.test.tsx
@@ -0,0 +1,47 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import * as React from 'react';
+import { fireEvent, waitFor } from '@bfc/test-utils';
+
+import { TriggerCreationModal } from '../../src/components/ProjectTree/TriggerCreationModal';
+import { renderWithRecoil } from '../testUtils';
+
+describe('<TriggerCreationModal/>', () => {
+  const onSubmitMock = jest.fn();
+  const onDismissMock = jest.fn();
+
+  function renderComponent() {
+    return renderWithRecoil(
+      <TriggerCreationModal isOpen dialogId={'todobot'} onDismiss={onDismissMock} onSubmit={onSubmitMock} />
+    );
+  }
+
+  it('should render the component', () => {
+    const component = renderComponent();
+    expect(component.container).toBeDefined();
+  });
+
+  it('hould create a Luis Intent recognized', async () => {
+    const component = renderComponent();
+    const triggerType = component.getByTestId('triggerTypeDropDown');
+    fireEvent.click(triggerType);
+
+    const luisOption = component.getByTitle('Intent recognized');
+    fireEvent.click(luisOption);
+    const node = await waitFor(() => component.getByTestId('triggerFormSubmit'));
+    expect(node).toBeDisabled();
+  });
+
+  it('should create a QnA Intent recognized', async () => {
+    const component = renderComponent();
+    const triggerType = component.getByTestId('triggerTypeDropDown');
+    fireEvent.click(triggerType);
+
+    const qnaOption = component.getByTitle('QnA Intent recognized');
+    fireEvent.click(qnaOption);
+
+    const node = await waitFor(() => component.getByTestId('triggerFormSubmit'));
+    expect(node).toBeEnabled();
+  });
+});
diff --git a/Composer/packages/client/__tests__/pages/knowledge-base/QnAPage.test.tsx b/Composer/packages/client/__tests__/pages/knowledge-base/QnAPage.test.tsx
new file mode 100644
index 0000000000..019f174525
--- /dev/null
+++ b/Composer/packages/client/__tests__/pages/knowledge-base/QnAPage.test.tsx
@@ -0,0 +1,75 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from 'react';
+
+import TableView from '../../../src/pages/knowledge-base/table-view';
+import CodeEditor from '../../../src/pages/knowledge-base/code-editor';
+import { renderWithRecoil } from '../../testUtils';
+import {
+  projectIdState,
+  localeState,
+  dialogsState,
+  qnaFilesState,
+  settingsState,
+  schemasState,
+  dispatcherState,
+} from '../../../src/recoilModel';
+import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
+
+const initialContent = `
+# ?question
+\`\`\`
+answer
+\`\`\`
+`;
+
+const state = {
+  projectId: 'test',
+  dialogs: [{ id: '1' }, { id: '2' }],
+  locale: 'en-us',
+  qnaFiles: [
+    {
+      id: 'a.en-us',
+      content: initialContent,
+      qnaSections: [
+        {
+          Questions: [{ content: 'question', id: 1 }],
+          Answer: 'answer',
+          uuid: 1,
+        },
+      ],
+    },
+  ],
+  settings: {
+    defaultLanguage: 'en-us',
+    languages: ['en-us', 'fr-fr'],
+  },
+};
+
+const updateQnAFileMock = jest.fn();
+
+const initRecoilState = ({ set }) => {
+  set(projectIdState, state.projectId);
+  set(localeState, state.locale);
+  set(dialogsState, state.dialogs);
+  set(qnaFilesState, state.qnaFiles);
+  set(settingsState, state.settings);
+  set(schemasState, mockProjectResponse.schemas);
+  set(dispatcherState, {
+    updateQnAFile: updateQnAFileMock,
+  });
+};
+
+describe('QnA page all up view', () => {
+  it('should render QnA page table view', () => {
+    const { getByText, getByTestId } = renderWithRecoil(<TableView dialogId={'a'} />, initRecoilState);
+    getByTestId('table-view');
+    getByText('question (1)');
+    getByText('answer');
+  });
+
+  it('should render QnA page code editor', () => {
+    renderWithRecoil(<CodeEditor dialogId={'a'} />, initRecoilState);
+  });
+});
diff --git a/Composer/packages/client/__tests__/plugins.test.ts b/Composer/packages/client/__tests__/plugins.test.ts
index 9b9a328549..ea15956780 100644
--- a/Composer/packages/client/__tests__/plugins.test.ts
+++ b/Composer/packages/client/__tests__/plugins.test.ts
@@ -58,7 +58,7 @@ describe('mergePluginConfigs', () => {
     };
 
     // @ts-expect-error
-    expect(mergePluginConfigs(config1, config2).recognizers).toEqual(['recognizer 1', 'recognizer 2']);
+    expect(mergePluginConfigs(config1, config2).recognizers).toEqual(['recognizer 2', 'recognizer 1']);
   });
 
   it('replaces other arrays', () => {
diff --git a/Composer/packages/client/__tests__/shell/triggerApi.test.tsx b/Composer/packages/client/__tests__/shell/triggerApi.test.tsx
new file mode 100644
index 0000000000..d1739b945f
--- /dev/null
+++ b/Composer/packages/client/__tests__/shell/triggerApi.test.tsx
@@ -0,0 +1,97 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { renderHook } from '@bfc/test-utils/lib/hooks';
+import * as React from 'react';
+import { RecoilRoot } from 'recoil';
+
+import { useTriggerApi } from '../../src/shell/triggerApi';
+import {
+  projectIdState,
+  localeState,
+  luFilesState,
+  lgFilesState,
+  dialogsState,
+  schemasState,
+  dispatcherState,
+} from '../../src/recoilModel';
+import { Dispatcher } from '../../src/recoilModel/dispatchers';
+
+const state = {
+  dialogs: [
+    {
+      id: 'test',
+      content: {},
+    },
+  ],
+  luFiles: [
+    {
+      content: 'test',
+      id: 'test.en-us',
+      intents: [],
+    },
+  ],
+  lgFiles: [
+    {
+      content: 'test',
+      id: 'test.en-us',
+      templates: [],
+    },
+  ],
+  schemas: { sdk: { content: {} } },
+  focusPath: '',
+  locale: 'en-us',
+  projectId: 'test',
+};
+
+describe('use triggerApi hooks', () => {
+  let selectToMock, updateDialogMock, createLgTemplatesMock, createLuIntentMock, result;
+  beforeEach(() => {
+    selectToMock = jest.fn();
+    updateDialogMock = jest.fn();
+    createLgTemplatesMock = jest.fn();
+    createLuIntentMock = jest.fn();
+
+    const initRecoilState = ({ set }) => {
+      set(projectIdState, state.projectId);
+      set(localeState, 'en-us');
+      set(luFilesState, state.luFiles);
+      set(lgFilesState, state.lgFiles);
+      set(dialogsState, state.dialogs);
+      set(schemasState, state.schemas);
+      set(dispatcherState, (current: Dispatcher) => ({
+        ...current,
+        selectTo: selectToMock,
+        updateDialog: updateDialogMock,
+        createLgTemplates: createLgTemplatesMock,
+        createLuIntent: createLuIntentMock,
+      }));
+    };
+
+    const wrapper = (props: { children?: React.ReactNode }) => {
+      const { children } = props;
+      return <RecoilRoot initializeState={initRecoilState}>{children}</RecoilRoot>;
+    };
+    const rendered = renderHook(() => useTriggerApi(), {
+      wrapper,
+    });
+    result = rendered.result;
+  });
+
+  it('should create QnA trigger', async () => {
+    const dialogId = 'test';
+    const formData = {
+      $kind: 'Microsoft.OnQnAMatch',
+      errors: { $kind: '', intent: '', event: '', triggerPhrases: '', regEx: '', activity: '' },
+      event: '',
+      intent: '',
+      regEx: '',
+      triggerPhrases: '',
+    };
+    await result.current.createTrigger(dialogId, formData);
+    expect(createLgTemplatesMock).toBeCalledTimes(1);
+    expect(updateDialogMock).toBeCalledTimes(1);
+    expect(createLgTemplatesMock).toBeCalledTimes(1);
+    expect(updateDialogMock).toBeCalledTimes(1);
+  });
+});
diff --git a/Composer/packages/client/__tests__/utils/dialogUtil.test.js b/Composer/packages/client/__tests__/utils/dialogUtil.test.js
index b20abdb5ad..2520dc81aa 100644
--- a/Composer/packages/client/__tests__/utils/dialogUtil.test.js
+++ b/Composer/packages/client/__tests__/utils/dialogUtil.test.js
@@ -186,9 +186,11 @@ describe('getTriggerTypes', () => {
     const triggerTypes = getTriggerTypes();
     expect(triggerTypes).toEqual([
       { key: 'Microsoft.OnIntent', text: 'Intent recognized' },
+      { key: 'Microsoft.OnQnAMatch', text: 'QnA Intent recognized' },
       { key: 'Microsoft.OnUnknownIntent', text: 'Unknown intent' },
       { key: 'Microsoft.OnDialogEvent', text: 'Dialog events' },
       { key: 'Microsoft.OnActivity', text: 'Activities' },
+      { key: 'Microsoft.OnChooseIntent', text: 'Duplicated intents recognized' },
       { key: 'OnCustomEvent', text: 'Custom events' },
     ]);
   });
diff --git a/Composer/packages/client/__tests__/utils/luUtil.test.ts b/Composer/packages/client/__tests__/utils/luUtil.test.ts
index ebb38e4edc..58f27d7175 100644
--- a/Composer/packages/client/__tests__/utils/luUtil.test.ts
+++ b/Composer/packages/client/__tests__/utils/luUtil.test.ts
@@ -3,13 +3,13 @@
 
 import { LuFile, DialogInfo, Diagnostic, DiagnosticSeverity } from '@bfc/shared';
 
-import { getReferredFiles, checkLuisPublish, createCrossTrainConfig } from '../../src/utils/luUtil';
+import { getReferredLuFiles, createCrossTrainConfig, checkLuisBuild } from '../../src/utils/luUtil';
 
-describe('getReferredFiles', () => {
+describe('getReferredLuFiles', () => {
   it('returns referred luFiles from dialog', () => {
     const dialogs = [{ luFile: 'a' }];
-    const luFiles = [{ id: 'a.en-us' }, { id: 'b.en-us' }, { id: 'c.en-us' }];
-    const referred = getReferredFiles(luFiles as LuFile[], dialogs as DialogInfo[]);
+    const luFiles = [{ id: 'a.en-us', content: 'xxx' }, { id: 'b.en-us' }, { id: 'c.en-us' }];
+    const referred = getReferredLuFiles(luFiles as LuFile[], dialogs as DialogInfo[]);
     expect(referred.length).toEqual(1);
     expect(referred[0].id).toEqual('a.en-us');
   });
@@ -25,7 +25,6 @@ describe('getReferredFiles', () => {
           { intent: 'dia2_trigger', dialogs: ['dia2'] },
           { intent: 'dias_trigger', dialogs: ['dia5', 'dia6'] },
           { intent: 'no_dialog', dialogs: [] },
-          { intent: 'dialog_without_lu', dialogs: ['dialog_without_lu'] },
           { intent: '', dialogs: ['start_dialog_without_intent'] },
         ],
       },
@@ -73,54 +72,53 @@ describe('getReferredFiles', () => {
       },
     ];
     const luFiles = [
-      { id: 'main.en-us' },
-      { id: 'dia1.en-us' },
+      {
+        id: 'main.en-us',
+        intents: [
+          { Name: 'dia1_trigger' },
+          { Name: 'dia2_trigger' },
+          { Name: 'dias_trigger' },
+          { Name: 'no_dialog' },
+          { Name: 'dialog_without_lu' },
+        ],
+      },
+      { id: 'dia1.en-us', intents: [{ Name: 'dia3_trigger' }, { Name: 'dia4_trigger' }] },
       { id: 'dia2.en-us' },
       { id: 'dia3.en-us' },
       { id: 'dia5.en-us' },
       { id: 'dia6.en-us' },
-      { id: 'start_dialog_without_intent.en-us' },
     ];
     const config = createCrossTrainConfig(dialogs as DialogInfo[], luFiles as LuFile[]);
     expect(config.rootIds.length).toEqual(1);
     expect(config.rootIds[0]).toEqual('main.en-us.lu');
     expect(config.triggerRules['main.en-us.lu'].dia1_trigger).toEqual('dia1.en-us.lu');
     expect(config.triggerRules['main.en-us.lu'].no_dialog).toEqual('');
-    expect(config.triggerRules['main.en-us.lu']['']).toEqual('start_dialog_without_intent.en-us.lu');
     expect(config.triggerRules['main.en-us.lu'].dia1_trigger).toEqual('dia1.en-us.lu');
     expect(config.triggerRules['main.en-us.lu'].dias_trigger.length).toBe(2);
     expect(config.triggerRules['dia1.en-us.lu'].dia3_trigger).toEqual('dia3.en-us.lu');
     expect(config.triggerRules['dia1.en-us.lu']['dia4.en-us.lu']).toBeUndefined();
-    expect(config.triggerRules['main.en-us.lu'].dialog_without_lu).toEqual('');
   });
+});
 
-  it('check the lu files before publish', () => {
-    const dialogs = [{ luFile: 'a' }] as DialogInfo[];
-    const diagnostics: Diagnostic[] = [];
-    const luFiles = [
-      { id: 'a.en-us', diagnostics, content: 'test', intents: [{ Name: '1', Body: '1' }], empty: false },
-      { id: 'b.en-us', diagnostics },
-      { id: 'c.en-us', diagnostics },
-    ] as LuFile[];
-    const referred = checkLuisPublish(luFiles, dialogs);
-    expect(referred.length).toEqual(1);
-
-    expect(referred[0].id).toEqual('a.en-us');
-
-    luFiles[0].diagnostics = [{ message: 'wrong', severity: DiagnosticSeverity.Error }] as Diagnostic[];
-    expect(() => {
-      checkLuisPublish(luFiles, dialogs);
-    }).toThrowError(/wrong/);
+it('check the lu files before publish', () => {
+  const dialogs = [{ luFile: 'a' }] as DialogInfo[];
+  const diagnostics: Diagnostic[] = [];
+  const luFiles = [
+    { id: 'a.en-us', diagnostics, content: 'test', intents: [{ Name: '1', Body: '1' }], empty: false },
+    { id: 'b.en-us', diagnostics },
+    { id: 'c.en-us', diagnostics },
+  ] as LuFile[];
+  const referred = checkLuisBuild(luFiles, dialogs);
+  expect(referred.length).toEqual(1);
 
-    luFiles[0].diagnostics = [];
-    luFiles[0].intents = [];
-    luFiles[0].empty = true;
-    expect(() => {
-      checkLuisPublish(luFiles, dialogs);
-    }).toThrowError('You have the following empty LuFile(s): a.en-us');
+  expect(referred[0].id).toEqual('a.en-us');
 
-    luFiles[0].empty = false;
+  luFiles[0].diagnostics = [{ message: 'wrong', severity: DiagnosticSeverity.Error }] as Diagnostic[];
+  expect(() => {
+    checkLuisBuild(luFiles, dialogs);
+  }).toThrowError(/wrong/);
 
-    expect(checkLuisPublish(luFiles, dialogs)[0].id).toEqual('a.en-us');
-  });
+  luFiles[0].empty = false;
+  luFiles[0].diagnostics = [];
+  expect(checkLuisBuild(luFiles, dialogs)[0].id).toEqual('a.en-us');
 });
diff --git a/Composer/packages/client/package.json b/Composer/packages/client/package.json
index 9adb8020b6..b1fe205426 100644
--- a/Composer/packages/client/package.json
+++ b/Composer/packages/client/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
+    "build": "node --max_old_space_size=4096 scripts/build.js",
     "clean": "rimraf build",
     "test": "jest",
     "lint": "eslint --quiet --ext .js,.jsx,.ts,.tsx ./src ./__tests__",
@@ -29,6 +29,7 @@
     "@bfc/ui-plugin-dialog-schema-editor": "*",
     "@bfc/ui-plugin-lg": "*",
     "@bfc/ui-plugin-luis": "*",
+    "@bfc/ui-plugin-cross-trained": "*",
     "@bfc/ui-plugin-prompts": "*",
     "@bfc/ui-plugin-select-dialog": "*",
     "@bfc/ui-plugin-select-skill-dialog": "*",
diff --git a/Composer/packages/client/src/Onboarding/WelcomeModal/Expanded/ExpandedWelcomeModal.tsx b/Composer/packages/client/src/Onboarding/WelcomeModal/Expanded/ExpandedWelcomeModal.tsx
index a6f2ed07c9..5f57f70e1e 100644
--- a/Composer/packages/client/src/Onboarding/WelcomeModal/Expanded/ExpandedWelcomeModal.tsx
+++ b/Composer/packages/client/src/Onboarding/WelcomeModal/Expanded/ExpandedWelcomeModal.tsx
@@ -51,7 +51,12 @@ const WelcomeModal = () => {
               title={formatMessage('Collapse')}
               onClick={toggleMinimized}
             />
-            <IconButton iconProps={{ iconName: 'ChromeClose' }} title={formatMessage('Close')} onClick={exit} />
+            <IconButton
+              data-testid={'WelcomeModalCloseIcon'}
+              iconProps={{ iconName: 'ChromeClose' }}
+              title={formatMessage('Close')}
+              onClick={exit}
+            />
           </div>
         </div>
         <img alt="Welcome" src={welcomeImage} />
diff --git a/Composer/packages/client/src/components/CreationFlow/CreateOptions.tsx b/Composer/packages/client/src/components/CreationFlow/CreateOptions.tsx
index 05d17d943f..797c47a34e 100644
--- a/Composer/packages/client/src/components/CreationFlow/CreateOptions.tsx
+++ b/Composer/packages/client/src/components/CreationFlow/CreateOptions.tsx
@@ -23,7 +23,7 @@ import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { ProjectTemplate } from '@bfc/shared';
 import { NeutralColors } from '@uifabric/fluent-theme';
 
-import { DialogCreationCopy, EmptyBotTemplateId } from '../../constants';
+import { DialogCreationCopy, EmptyBotTemplateId, QnABotTemplateId } from '../../constants';
 import { DialogWrapper, DialogTypes } from '../DialogWrapper';
 
 // -------------------- Styles -------------------- //
@@ -98,6 +98,7 @@ const content = css`
 
 const optionKeys = {
   createFromScratch: 'createFromScratch',
+  createFromQnA: 'createFromQnA',
   createFromTemplate: 'createFromTemplate',
 };
 
@@ -146,6 +147,10 @@ export function CreateOptions(props) {
       routeToTemplate = currentTemplate;
     }
 
+    if (option === optionKeys.createFromQnA) {
+      routeToTemplate = QnABotTemplateId;
+    }
+
     if (props.location && props.location.search) {
       routeToTemplate += props.location.search;
     }
@@ -226,6 +231,13 @@ export function CreateOptions(props) {
       text: formatMessage('Create from scratch'),
       onRenderField: SelectOption,
     },
+    {
+      ariaLabel: formatMessage('Create from QnA') + (option === optionKeys.createFromQnA ? ' selected' : ''),
+      key: optionKeys.createFromQnA,
+      'data-testid': 'Create from QnA',
+      text: formatMessage('Create from knowledge base (QnA Maker)'),
+      onRenderField: SelectOption,
+    },
     {
       ariaLabel: formatMessage('Create from template') + (option === optionKeys.createFromTemplate ? ' selected' : ''),
       key: optionKeys.createFromTemplate,
diff --git a/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx b/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx
index ca298d2238..9189fdadff 100644
--- a/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx
+++ b/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx
@@ -4,7 +4,7 @@
 // TODO: Remove path module
 import Path from 'path';
 
-import React, { useEffect, useRef, Fragment } from 'react';
+import React, { useEffect, useRef, Fragment, useState } from 'react';
 import { RouteComponentProps, Router, navigate } from '@reach/router';
 import { useRecoilValue } from 'recoil';
 
@@ -16,8 +16,11 @@ import {
   templateProjectsState,
   storagesState,
   focusedStorageFolderState,
+  localeState,
 } from '../../recoilModel';
 import Home from '../../pages/home/Home';
+import ImportQnAFromUrlModal from '../../pages/knowledge-base/ImportQnAFromUrlModal';
+import { QnABotTemplateId } from '../../constants';
 import { useProjectIdCache } from '../../utils/hooks';
 
 import { CreateOptions } from './CreateOptions';
@@ -39,6 +42,7 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
     updateCurrentPathForStorage,
     updateFolder,
     saveTemplateId,
+    importQnAFromUrls,
     fetchProjectById,
     fetchRecentProjects,
   } = useRecoilValue(dispatcherState);
@@ -47,10 +51,12 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
   const templateProjects = useRecoilValue(templateProjectsState);
   const storages = useRecoilValue(storagesState);
   const focusedStorageFolder = useRecoilValue(focusedStorageFolderState);
+  const locale = useRecoilValue(localeState);
   const cachedProjectId = useProjectIdCache();
   const currentStorageIndex = useRef(0);
   const storage = storages[currentStorageIndex.current];
   const currentStorageId = storage ? storage.id : 'default';
+  const [formData, setFormData] = useState({ name: '' });
 
   useEffect(() => {
     if (storages && storages.length) {
@@ -97,13 +103,29 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
   };
 
   const handleCreateNew = async (formData, templateId: string) => {
-    createProject(templateId || '', formData.name, formData.description, formData.location, formData.schemaUrl);
+    await createProject(templateId || '', formData.name, formData.description, formData.location, formData.schemaUrl);
   };
 
   const handleSaveAs = (formData) => {
     saveProjectAs(projectId, formData.name, formData.description, formData.location);
   };
 
+  const handleCreateQnA = async (urls: string[]) => {
+    saveTemplateId(QnABotTemplateId);
+    handleDismiss();
+    await handleCreateNew(formData, QnABotTemplateId);
+    await importQnAFromUrls({ id: `${formData.name.toLocaleLowerCase()}.${locale}`, urls });
+  };
+
+  const handleSubmitOrImportQnA = async (formData, templateId: string) => {
+    if (templateId === 'QnASample') {
+      setFormData(formData);
+      navigate(`./QnASample/importQnA`);
+      return;
+    }
+    handleSubmit(formData, templateId);
+  };
+
   const handleSubmit = async (formData, templateId: string) => {
     handleDismiss();
     switch (creationFlowStatus) {
@@ -113,7 +135,7 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
 
       default:
         saveTemplateId(templateId);
-        handleCreateNew(formData, templateId);
+        await handleCreateNew(formData, templateId);
     }
   };
 
@@ -133,7 +155,7 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
           updateFolder={updateFolder}
           onCurrentPathUpdate={updateCurrentPath}
           onDismiss={handleDismiss}
-          onSubmit={handleSubmit}
+          onSubmit={handleSubmitOrImportQnA}
         />
         <CreateOptions path="create" templates={templateProjects} onDismiss={handleDismiss} onNext={handleCreateNext} />
         <DefineConversation
@@ -143,7 +165,7 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
           updateFolder={updateFolder}
           onCurrentPathUpdate={updateCurrentPath}
           onDismiss={handleDismiss}
-          onSubmit={handleSubmit}
+          onSubmit={handleSubmitOrImportQnA}
         />
         <OpenProject
           focusedStorageFolder={focusedStorageFolder}
@@ -152,6 +174,12 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
           onDismiss={handleDismiss}
           onOpen={openBot}
         />
+        <ImportQnAFromUrlModal
+          dialogId={formData.name.toLowerCase()}
+          path="create/QnASample/importQnA"
+          onDismiss={handleDismiss}
+          onSubmit={handleCreateQnA}
+        />
       </Router>
     </Fragment>
   );
diff --git a/Composer/packages/client/src/components/CreationFlow/DefineConversation.tsx b/Composer/packages/client/src/components/CreationFlow/DefineConversation.tsx
index 700a8fc9bc..751bae21d6 100644
--- a/Composer/packages/client/src/components/CreationFlow/DefineConversation.tsx
+++ b/Composer/packages/client/src/components/CreationFlow/DefineConversation.tsx
@@ -14,7 +14,7 @@ import { RouteComponentProps } from '@reach/router';
 import querystring from 'query-string';
 import { FontWeights } from '@uifabric/styling';
 
-import { DialogCreationCopy, nameRegex } from '../../constants';
+import { DialogCreationCopy, QnABotTemplateId, nameRegex } from '../../constants';
 import { DialogWrapper, DialogTypes } from '../DialogWrapper';
 import { FieldConfig, useForm } from '../../hooks/useForm';
 import { StorageFolder } from '../../recoilModel/types';
@@ -259,7 +259,7 @@ const DefineConversation: React.FC<DefineConversationProps> = (props) => {
             <PrimaryButton
               data-testid="SubmitNewBotBtn"
               disabled={hasErrors || !writable}
-              text={formatMessage('OK')}
+              text={templateId === QnABotTemplateId ? formatMessage('Next') : formatMessage('OK')}
               onClick={handleSubmit}
             />
           </DialogFooter>
diff --git a/Composer/packages/client/src/components/LoadingSpinner.tsx b/Composer/packages/client/src/components/LoadingSpinner.tsx
index f1c305a6c8..befd8a0a10 100644
--- a/Composer/packages/client/src/components/LoadingSpinner.tsx
+++ b/Composer/packages/client/src/components/LoadingSpinner.tsx
@@ -15,10 +15,15 @@ const container = css`
   justify-content: center;
 `;
 
-export const LoadingSpinner: React.FC = () => {
+interface LoadingSpinnerProps {
+  message?: string;
+}
+
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = (props) => {
+  const { message } = props;
   return (
     <div css={container}>
-      <Spinner label={formatMessage('Loading')} />
+      <Spinner label={message || formatMessage('Loading')} />
     </div>
   );
 };
diff --git a/Composer/packages/client/src/components/NavItem.tsx b/Composer/packages/client/src/components/NavItem.tsx
index d706b0c5f6..233fa13b40 100644
--- a/Composer/packages/client/src/components/NavItem.tsx
+++ b/Composer/packages/client/src/components/NavItem.tsx
@@ -15,6 +15,7 @@ import { useRecoilValue } from 'recoil';
 import { useLocation, useRouterCache } from '../utils/hooks';
 import { dispatcherState } from '../recoilModel';
 
+import { QnAIcon } from './QnAIcon';
 // -------------------- Styles -------------------- //
 
 const link = (active: boolean, disabled: boolean) => css`
@@ -98,9 +99,12 @@ export const NavItem: React.FC<INavItemProps> = (props) => {
   const active = pathname.startsWith(to);
 
   const addRef = useCallback((ref) => onboardingAddCoachMarkRef({ [`nav${labelName.replace(' ', '')}`]: ref }), []);
-
-  const iconElement = <Icon iconName={iconName} styles={icon(active, disabled)} />;
-
+  const iconElement =
+    iconName === 'QnAIcon' ? (
+      <QnAIcon active={active} disabled={disabled} />
+    ) : (
+      <Icon iconName={iconName} styles={icon(active, disabled)} />
+    );
   const activeArea = (
     <div
       aria-disabled={disabled}
@@ -110,7 +114,11 @@ export const NavItem: React.FC<INavItemProps> = (props) => {
       tabIndex={-1}
     >
       {showTooltip ? (
-        <TooltipHost content={labelName} directionalHint={DirectionalHint.rightCenter}>
+        <TooltipHost
+          content={labelName}
+          directionalHint={DirectionalHint.rightCenter}
+          styles={{ root: { height: 32 } }}
+        >
           {iconElement}
         </TooltipHost>
       ) : (
diff --git a/Composer/packages/client/src/components/Page.tsx b/Composer/packages/client/src/components/Page.tsx
index 9f2b49f93b..e631a2aef8 100644
--- a/Composer/packages/client/src/components/Page.tsx
+++ b/Composer/packages/client/src/components/Page.tsx
@@ -71,7 +71,7 @@ export const content = css`
   flex: 4;
   padding: 20px;
   position: relative;
-  overflow: scroll;
+  overflow: auto;
 
   label: PageContent;
 `;
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 7b013c761d..65399c06b3 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -24,6 +24,7 @@ import { ISearchBoxStyles } from 'office-ui-fabric-react/lib/SearchBox';
 
 import { dispatcherState, userSettingsState } from '../../recoilModel';
 import { createSelectedPath, getFriendlyName } from '../../utils/dialogUtil';
+import { containUnsupportedTriggers, triggerNotSupported } from '../../utils/dialogValidator';
 
 import { TreeItem } from './treeItem';
 
@@ -58,7 +59,7 @@ const root = css`
 
 // -------------------- ProjectTree -------------------- //
 
-function createGroupItem(dialog: DialogInfo, currentId: string, position: number) {
+function createGroupItem(dialog: DialogInfo, currentId: string, position: number, warningContent: string): IGroup {
   return {
     key: dialog.id,
     name: dialog.displayName,
@@ -67,14 +68,15 @@ function createGroupItem(dialog: DialogInfo, currentId: string, position: number
     count: dialog.triggers.length,
     hasMoreData: true,
     isCollapsed: dialog.id !== currentId,
-    data: dialog,
+    data: { ...dialog, warningContent },
   };
 }
 
-function createItem(trigger: ITrigger, index: number) {
+function createItem(trigger: ITrigger, index: number, warningContent: string) {
   return {
     ...trigger,
     index,
+    warningContent,
     displayName: trigger.displayName || getFriendlyName({ $kind: trigger.type }),
   };
 }
@@ -104,10 +106,12 @@ function createItemsAndGroups(
     })
     .reduce(
       (result: { items: any[]; groups: IGroup[] }, dialog) => {
-        result.groups.push(createGroupItem(dialog, dialogId, position));
+        const warningContent = containUnsupportedTriggers(dialog);
+        result.groups.push(createGroupItem(dialog, dialogId, position, warningContent));
         position += dialog.triggers.length;
         dialog.triggers.forEach((item, index) => {
-          result.items.push(createItem(item, index));
+          const warningContent = triggerNotSupported(dialog, item);
+          result.items.push(createItem(item, index, warningContent));
         });
         return result;
       },
diff --git a/Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx b/Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx
index 6c98e110aa..4f3611e8fb 100644
--- a/Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx
@@ -10,11 +10,12 @@ import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { luIndexer, combineMessage } from '@bfc/indexers';
 import { PlaceHolderSectionName } from '@bfc/indexers/lib/utils/luUtil';
-import { DialogInfo, SDKKinds, LuIntentSection } from '@bfc/shared';
+import { SDKKinds } from '@bfc/shared';
 import { LuEditor, inlineModePlaceholder } from '@bfc/code-editor';
 import { IComboBoxOption } from 'office-ui-fabric-react/lib/ComboBox';
 import { useRecoilValue } from 'recoil';
@@ -22,7 +23,6 @@ import { FontWeights } from '@uifabric/styling';
 import { FontSizes } from '@uifabric/fluent-theme';
 
 import {
-  generateNewDialog,
   getTriggerTypes,
   TriggerFormData,
   TriggerFormDataErrors,
@@ -32,13 +32,14 @@ import {
   activityTypeKey,
   getEventTypes,
   getActivityTypes,
-  regexRecognizerKey,
+  qnaMatcherKey,
+  onChooseIntentKey,
 } from '../../utils/dialogUtil';
-import { projectIdState, schemasState } from '../../recoilModel/atoms/botState';
+import { projectIdState } from '../../recoilModel/atoms/botState';
 import { userSettingsState } from '../../recoilModel';
 import { nameRegex } from '../../constants';
 import { validatedDialogsSelector } from '../../recoilModel/selectors/validatedDialogs';
-
+import { isRegExRecognizerType, isLUISnQnARecognizerType } from '../../utils/dialogValidator';
 // -------------------- Styles -------------------- //
 
 const styles = {
@@ -86,6 +87,18 @@ const intent = {
   },
 };
 
+const optionRow = {
+  display: 'flex',
+  height: 15,
+  fontSize: 15,
+};
+
+export const warningIcon = {
+  marginLeft: 5,
+  color: '#BE880A',
+  fontSize: 5,
+};
+
 // -------------------- Validation Helpers -------------------- //
 
 const initialFormDataErrors = {
@@ -160,12 +173,8 @@ const validateTriggerPhrases = (
   intent: string,
   triggerPhrases: string
 ): string | undefined => {
-  if (selectedType === intentTypeKey && !isRegEx) {
-    if (triggerPhrases) {
-      return getLuDiagnostics(intent, triggerPhrases);
-    } else {
-      return formatMessage('Please input trigger phrases');
-    }
+  if (selectedType === intentTypeKey && !isRegEx && triggerPhrases) {
+    return getLuDiagnostics(intent, triggerPhrases);
   }
   return undefined;
 };
@@ -189,18 +198,13 @@ const validateForm = (
   return errors;
 };
 
-export interface LuFilePayload {
-  id: string;
-  content: string;
-}
-
 // -------------------- TriggerCreationModal -------------------- //
 
 interface TriggerCreationModalProps {
   dialogId: string;
   isOpen: boolean;
   onDismiss: () => void;
-  onSubmit: (dialog: DialogInfo, intent?: LuIntentSection) => void;
+  onSubmit: (dialogId: string, formData: TriggerFormData) => void;
 }
 
 export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props) => {
@@ -208,38 +212,51 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props)
   const dialogs = useRecoilValue(validatedDialogsSelector);
 
   const projectId = useRecoilValue(projectIdState);
-  const schemas = useRecoilValue(schemasState);
   const userSettings = useRecoilValue(userSettingsState);
-
   const dialogFile = dialogs.find((dialog) => dialog.id === dialogId);
-  const isRegEx = (dialogFile?.content?.recognizer?.$kind ?? '') === regexRecognizerKey;
+  const isRegEx = isRegExRecognizerType(dialogFile);
+  const isLUISnQnA = isLUISnQnARecognizerType(dialogFile);
   const regexIntents = dialogFile?.content?.recognizer?.intents ?? [];
-  const isNone = !dialogFile?.content?.recognizer;
   const initialFormData: TriggerFormData = {
     errors: initialFormDataErrors,
-    $kind: isNone ? '' : intentTypeKey,
+    $kind: intentTypeKey,
     event: '',
     intent: '',
     triggerPhrases: '',
     regEx: '',
   };
   const [formData, setFormData] = useState(initialFormData);
-  const [selectedType, setSelectedType] = useState(isNone ? '' : intentTypeKey);
+  const [selectedType, setSelectedType] = useState(intentTypeKey);
   const showIntentName = selectedType === intentTypeKey;
   const showRegExDropDown = selectedType === intentTypeKey && isRegEx;
-  const showTriggerPhrase = selectedType === intentTypeKey && !isRegEx;
+  const showTriggerPhrase = selectedType === intentTypeKey && isLUISnQnA;
   const showEventDropDown = selectedType === eventTypeKey;
   const showActivityDropDown = selectedType === activityTypeKey;
   const showCustomEvent = selectedType === customEventKey;
-
   const eventTypes: IComboBoxOption[] = getEventTypes();
   const activityTypes: IDropdownOption[] = getActivityTypes();
-  let triggerTypeOptions: IDropdownOption[] = getTriggerTypes();
+  const triggerTypeOptions: IDropdownOption[] = getTriggerTypes();
 
-  if (isNone) {
-    triggerTypeOptions = triggerTypeOptions.filter((t) => t.key !== intentTypeKey);
+  if (isRegEx) {
+    const qnaMatcherOption = triggerTypeOptions.find((t) => t.key === qnaMatcherKey);
+    if (qnaMatcherOption) {
+      qnaMatcherOption.data = { icon: 'Warning' };
+    }
+    const onChooseIntentOption = triggerTypeOptions.find((t) => t.key === onChooseIntentKey);
+    if (onChooseIntentOption) {
+      onChooseIntentOption.data = { icon: 'Warning' };
+    }
   }
 
+  const onRenderOption = (option: IDropdownOption) => {
+    return (
+      <div css={optionRow}>
+        {option.text}
+        {option.data && option.data.icon && <Icon iconName={option.data.icon} style={warningIcon} />}
+      </div>
+    );
+  };
+
   const shouldDisable = (errors: TriggerFormDataErrors) => {
     for (const key in errors) {
       if (errors[key]) {
@@ -255,20 +272,11 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props)
     //If still have some errors here, it is a bug.
     const errors = validateForm(selectedType, formData, isRegEx, regexIntents);
     if (shouldDisable(errors)) {
-      setFormData({
-        ...formData,
-        errors,
-      });
+      setFormData({ ...formData, errors });
       return;
     }
-    const newDialog = generateNewDialog(dialogs, dialogId, formData, schemas.sdk?.content);
-    if (formData.$kind === intentTypeKey && !isRegEx) {
-      const newIntent = { Name: formData.intent, Body: formData.triggerPhrases };
-      onSubmit(newDialog, newIntent);
-    } else {
-      onSubmit(newDialog);
-    }
     onDismiss();
+    onSubmit(dialogId, formData);
   };
 
   const onSelectTriggerType = (e, option) => {
@@ -306,7 +314,7 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props)
   const onNameChange = (e, name) => {
     const errors: TriggerFormDataErrors = {};
     errors.intent = validateIntentName(selectedType, name);
-    if (showTriggerPhrase) {
+    if (showTriggerPhrase && formData.triggerPhrases) {
       errors.triggerPhrases = getLuDiagnostics(name, formData.triggerPhrases);
     }
     setFormData({ ...formData, intent: name, errors: { ...formData.errors, ...errors } });
@@ -318,9 +326,14 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props)
     setFormData({ ...formData, regEx: pattern, errors: { ...formData.errors, ...errors } });
   };
 
+  //Trigger phrase is optional
   const onTriggerPhrasesChange = (body: string) => {
     const errors: TriggerFormDataErrors = {};
-    errors.triggerPhrases = getLuDiagnostics(formData.intent, body);
+    if (body) {
+      errors.triggerPhrases = getLuDiagnostics(formData.intent, body);
+    } else {
+      errors.triggerPhrases = '';
+    }
     setFormData({ ...formData, triggerPhrases: body, errors: { ...formData.errors, ...errors } });
   };
   const errors = validateForm(selectedType, formData, isRegEx, regexIntents);
@@ -350,6 +363,8 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props)
             options={triggerTypeOptions}
             styles={dropdownStyles}
             onChange={onSelectTriggerType}
+            //@ts-ignore：
+            onRenderOption={onRenderOption}
           />
           {showEventDropDown && (
             <Dropdown
@@ -364,6 +379,7 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props)
           )}
           {showCustomEvent && (
             <TextField
+              required
               data-testid="CustomEventName"
               errorMessage={formData.errors.event}
               label={formatMessage('What is the name of the custom event?')}
@@ -389,7 +405,9 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props)
               label={
                 isRegEx
                   ? formatMessage('What is the name of this trigger (RegEx)')
-                  : formatMessage('What is the name of this trigger (LUIS)')
+                  : isLUISnQnA
+                  ? formatMessage('What is the name of this trigger (LUIS)')
+                  : formatMessage('What is the name of this trigger')
               }
               styles={intent}
               onChange={onNameChange}
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index 7459196f40..fc32818c8b 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -16,14 +16,14 @@ import { IContextualMenuStyles } from 'office-ui-fabric-react/lib/ContextualMenu
 import { ICalloutContentStyles } from 'office-ui-fabric-react/lib/Callout';
 
 // -------------------- Styles -------------------- //
-
+const indent = 16;
 const itemText = (depth: number) => css`
   outline: none;
   :focus {
     outline: rgb(102, 102, 102) solid 1px;
     z-index: 1;
   }
-  padding-left: ${depth * 16}px;
+  padding-left: ${depth * indent}px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -42,6 +42,11 @@ const content = css`
   label: ProjectTreeItem;
 `;
 
+const leftIndent = css`
+  height: 100%;
+  width: ${indent}px;
+`;
+
 const moreMenu: Partial<ICalloutContentStyles> = {
   root: {
     marginTop: '-7px',
@@ -117,6 +122,12 @@ export const overflowSet = css`
   justify-content: space-between;
 `;
 
+const warningIcon = {
+  marginRight: 5,
+  color: '#BE880A',
+  fontSize: 9,
+};
+
 // -------------------- TreeItem -------------------- //
 
 interface ITreeItemProps {
@@ -129,6 +140,9 @@ interface ITreeItemProps {
 }
 
 const onRenderItem = (item: IOverflowSetItemProps) => {
+  const warningContent = formatMessage(
+    'This trigger type is not supported by the RegEx recognizer and will not be fired.'
+  );
   return (
     <div
       data-is-focusable
@@ -139,6 +153,13 @@ const onRenderItem = (item: IOverflowSetItemProps) => {
       onFocus={item.onFocus}
     >
       <div css={content} tabIndex={-1}>
+        {item.warningContent ? (
+          <TooltipHost content={warningContent} directionalHint={DirectionalHint.bottomLeftEdge}>
+            <Icon iconName={'Warning'} style={warningIcon} />
+          </TooltipHost>
+        ) : (
+          <div css={leftIndent} />
+        )}
         {item.depth !== 0 && (
           <Icon
             iconName="Flow"
diff --git a/Composer/packages/client/src/components/QnAIcon.tsx b/Composer/packages/client/src/components/QnAIcon.tsx
new file mode 100644
index 0000000000..26db9f0250
--- /dev/null
+++ b/Composer/packages/client/src/components/QnAIcon.tsx
@@ -0,0 +1,42 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { FontSizes } from '@uifabric/fluent-theme';
+
+interface QnAIconProps {
+  active: boolean;
+  disabled: boolean;
+}
+
+export const QnAIcon: React.FC<QnAIconProps> = (props) => {
+  const { active, disabled } = props;
+
+  return (
+    <svg
+      fill={active ? '#000' : disabled ? '#999' : '#4f4f4f'}
+      height="15"
+      style={{
+        padding: '8px 12px',
+        marginLeft: active ? '1px' : '4px',
+        marginRight: '12px',
+        boxSizing: 'border-box',
+        fontSize: `${FontSizes.size16}`,
+        width: '40px',
+        height: '32px',
+      }}
+      viewBox="0 0 16 15"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M13.9666 8.48882L12.012 7.63259C11.9419 7.63797 11.8718 7.64079 11.8003 7.64079H11.7246C11.3367 5.711 9.67954 4.24441 7.6928 4.24441H5.30699C5.3162 2.5308 6.66229 1.13184 8.3072 1.13184H11.8006C13.4508 1.13184 14.8014 2.54014 14.8014 4.26139V4.51096C14.8014 5.60461 14.2562 6.57176 13.4355 7.13174L13.9666 8.48882ZM7.69308 11.8852H4.19968C4.12818 11.8852 4.05809 11.8824 3.98799 11.877L2.03337 12.7332L2.56483 11.3762C1.74377 10.8162 1.19863 9.84902 1.19863 8.75538V8.5058C1.19863 6.78455 2.54919 5.37626 4.1994 5.37626H4.27536H5.42624H7.6928C9.05565 5.37626 10.2113 6.33719 10.574 7.64079C10.6503 7.91611 10.6938 8.20587 10.6938 8.5058V8.75538C10.6938 8.76132 10.693 8.76669 10.693 8.77263C10.6841 10.4862 9.33771 11.8852 7.69308 11.8852ZM14.7665 7.46225C15.4931 6.68043 15.9185 5.63007 15.9185 4.51096V4.26139C15.9185 1.92216 14.0753 0 11.8006 0H8.3072C6.03784 0 4.19884 1.9131 4.1899 4.24498C1.91971 4.25036 0.0815464 6.16996 0.0815464 8.5058V8.75538C0.0815464 9.87449 0.506878 10.9248 1.23354 11.7067L0 14.8571L4.20052 13.0171H7.69308C9.96048 13.0171 11.7984 11.1062 11.8098 8.77716L16 10.6127L14.7665 7.46225Z"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default QnAIcon;
diff --git a/Composer/packages/client/src/components/TestController/TestController.tsx b/Composer/packages/client/src/components/TestController/TestController.tsx
index a0422f7011..6c7394cdfe 100644
--- a/Composer/packages/client/src/components/TestController/TestController.tsx
+++ b/Composer/packages/client/src/components/TestController/TestController.tsx
@@ -8,12 +8,13 @@ import { jsx, css } from '@emotion/core';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
-import { defaultPublishConfig } from '@bfc/shared';
+import { IConfig, IPublishConfig, defaultPublishConfig } from '@bfc/shared';
 
 import {
   botNameState,
   botStatusState,
   luFilesState,
+  qnaFilesState,
   settingsState,
   projectIdState,
   botLoadErrorState,
@@ -21,14 +22,15 @@ import {
   dispatcherState,
 } from '../../recoilModel';
 import settingsStorage from '../../utils/dialogSettingStorage';
-import { BotStatus, LuisConfig } from '../../constants';
+import { QnaConfig, BotStatus, LuisConfig } from '../../constants';
 import { isAbsHosted } from '../../utils/envUtil';
 import useNotifications from '../../pages/notifications/useNotifications';
 import { navigateTo, openInEmulator } from '../../utils/navigation';
+import { getReferredQnaFiles } from '../../utils/qnaUtil';
 import { validatedDialogsSelector } from '../../recoilModel/selectors/validatedDialogs';
 
-import { getReferredFiles } from './../../utils/luUtil';
-import { PublishLuisDialog } from './publishDialog';
+import { getReferredLuFiles } from './../../utils/luUtil';
+import { PublishDialog } from './publishDialog';
 import { ErrorCallout } from './errorCallout';
 import { EmulatorOpenButton } from './emulatorOpenButton';
 import { Loading } from './loading';
@@ -61,6 +63,7 @@ export const TestController: React.FC = () => {
   const botStatus = useRecoilValue(botStatusState);
   const dialogs = useRecoilValue(validatedDialogsSelector);
   const luFiles = useRecoilValue(luFilesState);
+  const qnaFiles = useRecoilValue(qnaFilesState);
   const settings = useRecoilValue(settingsState);
   const projectId = useRecoilValue(projectIdState);
   const botLoadErrorMsg = useRecoilValue(botLoadErrorState);
@@ -68,10 +71,11 @@ export const TestController: React.FC = () => {
   const {
     publishToTarget,
     onboardingAddCoachMarkRef,
-    publishLuis,
+    build,
     getPublishStatus,
     setBotStatus,
     setSettings,
+    setQnASettings,
   } = useRecoilValue(dispatcherState);
   const connected = botStatus === BotStatus.connected;
   const publishing = botStatus === BotStatus.publishing;
@@ -79,6 +83,7 @@ export const TestController: React.FC = () => {
   const addRef = useCallback((startBot) => onboardingAddCoachMarkRef({ startBot }), []);
   const errorLength = notifications.filter((n) => n.severity === 'Error').length;
   const showError = errorLength > 0;
+  const publishDialogConfig = { subscriptionKey: settings.qna.subscriptionKey, ...settings.luis } as IConfig;
   const warningLength = notifications.filter((n) => n.severity === 'Warning').length;
   const showWarning = !showError && warningLength > 0;
 
@@ -147,39 +152,69 @@ export const TestController: React.FC = () => {
     }
   }
 
-  async function handlePublishLuis(luisConfig) {
+  async function handlePublish(config: IPublishConfig) {
     setBotStatus(BotStatus.publishing);
     dismissDialog();
-    await setSettings(projectId, { ...settings, luis: luisConfig });
-    await publishLuis(luisConfig, projectId);
+    const { luis, qna } = config;
+    await setSettings(projectId, {
+      ...settings,
+      luis: luis,
+      qna: Object.assign({}, settings.qna, qna),
+    });
+    await build(luis, qna, projectId);
   }
 
   async function handleLoadBot() {
     setBotStatus(BotStatus.reloading);
+    if (settings.qna && settings.qna.subscriptionKey) {
+      await setQnASettings(projectId, settings.qna.subscriptionKey);
+    }
     const sensitiveSettings = settingsStorage.get(projectId);
     await publishToTarget(projectId, defaultPublishConfig, { comment: '' }, sensitiveSettings);
   }
 
-  function isLuisConfigComplete(config) {
+  function isConfigComplete(config) {
     let complete = true;
-    for (const key in LuisConfig) {
-      if (config?.[LuisConfig[key]] === '') {
+    if (getReferredLuFiles(luFiles, dialogs).length > 0) {
+      if (Object.values(LuisConfig).some((luisConfigKey) => config.luis[luisConfigKey] === '')) {
+        complete = false;
+      }
+    }
+    if (getReferredQnaFiles(qnaFiles, dialogs).length > 0) {
+      if (Object.values(QnaConfig).some((qnaConfigKey) => config.qna[qnaConfigKey] === '')) {
         complete = false;
-        break;
       }
     }
     return complete;
   }
 
+  // return true if dialogs have one with default recognizer.
+  function needsPublish(dialogs) {
+    let isDefaultRecognizer = false;
+    if (dialogs.some((dialog) => typeof dialog.content.recognizer === 'string')) {
+      isDefaultRecognizer = true;
+    }
+    return isDefaultRecognizer;
+  }
+
   async function handleStart() {
     dismissCallout();
-    const config = settings.luis;
-
-    if (!isAbsHosted() && getReferredFiles(luFiles, dialogs).length > 0) {
-      if (botStatus === BotStatus.failed || botStatus === BotStatus.pending || !isLuisConfigComplete(config)) {
+    const config = Object.assign(
+      {},
+      {
+        luis: settings.luis,
+        qna: {
+          subscriptionKey: settings.qna.subscriptionKey,
+          qnaRegion: settings.qna.qnaRegion,
+          endpointKey: '',
+        },
+      }
+    );
+    if (!isAbsHosted() && needsPublish(dialogs)) {
+      if (botStatus === BotStatus.failed || botStatus === BotStatus.pending || !isConfigComplete(config)) {
         openDialog();
       } else {
-        await handlePublishLuis(config);
+        await handlePublish(config);
       }
     } else {
       await handleLoadBot();
@@ -234,13 +269,13 @@ export const TestController: React.FC = () => {
         onDismiss={dismissCallout}
         onTry={handleStart}
       />
-      {settings.luis && (
-        <PublishLuisDialog
+      {settings.luis && modalOpen && (
+        <PublishDialog
           botName={botName}
-          config={settings.luis}
+          config={publishDialogConfig}
           isOpen={modalOpen}
           onDismiss={dismissDialog}
-          onPublish={handlePublishLuis}
+          onPublish={handlePublish}
         />
       )}
     </Fragment>
diff --git a/Composer/packages/client/src/components/TestController/publishDialog.tsx b/Composer/packages/client/src/components/TestController/publishDialog.tsx
index 7d44f10a86..c991d8dffa 100644
--- a/Composer/packages/client/src/components/TestController/publishDialog.tsx
+++ b/Composer/packages/client/src/components/TestController/publishDialog.tsx
@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import React, { useCallback } from 'react';
+import React, { useCallback, Fragment } from 'react';
 import { Dialog, DialogType } from 'office-ui-fabric-react/lib/Dialog';
 import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
 import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
@@ -14,10 +14,15 @@ import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import formatMessage from 'format-message';
-import { ILuisConfig } from '@bfc/shared';
+import { useRecoilValue } from 'recoil';
+import { IConfig, IPublishConfig } from '@bfc/shared';
+import { Dropdown, ResponsiveMode, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 
 import { Text, Tips, Links, nameRegex } from '../../constants';
 import { FieldConfig, useForm } from '../../hooks/useForm';
+import { dialogsState, luFilesState, qnaFilesState } from '../../recoilModel/atoms/botState';
+import { getReferredQnaFiles } from '../../utils/qnaUtil';
+import { getReferredLuFiles } from '../../utils/luUtil';
 
 // -------------------- Styles -------------------- //
 const textFieldLabel = css`
@@ -45,10 +50,11 @@ const dialogModal = {
     maxWidth: '450px !important',
   },
 };
-
-interface LuisFormData {
+interface FormData {
   name: string;
   authoringKey: string;
+  subscriptionKey: string;
+  qnaRegion: string;
   endpointKey: string;
   authoringRegion: string;
   defaultLanguage: string;
@@ -73,28 +79,57 @@ const onRenderLabel = (info) => (props) => (
   </Stack>
 );
 
-interface IPublishLuisDialogProps {
+const regionOptions: IDropdownOption[] = [
+  {
+    key: 'westus',
+    text: formatMessage('westus'),
+  },
+  {
+    key: 'westeurope',
+    text: formatMessage('westeurope'),
+  },
+  {
+    key: 'australia',
+    text: formatMessage('australia'),
+  },
+];
+
+interface IPublishDialogProps {
   botName: string;
   isOpen: boolean;
-  config: ILuisConfig;
+  config: IConfig;
   onDismiss: () => void;
-  onPublish: (data: LuisFormData) => void;
+  onPublish: (data: IPublishConfig) => void;
 }
 
-export const PublishLuisDialog: React.FC<IPublishLuisDialogProps> = (props) => {
+export const PublishDialog: React.FC<IPublishDialogProps> = (props) => {
   const { isOpen, onDismiss, onPublish, botName, config } = props;
+  const dialogs = useRecoilValue(dialogsState);
+  const luFiles = useRecoilValue(luFilesState);
+  const qnaFiles = useRecoilValue(qnaFilesState);
+  const qnaConfigShow = getReferredQnaFiles(qnaFiles, dialogs).length > 0;
+  const luConfigShow = getReferredLuFiles(luFiles, dialogs).length > 0;
 
-  const luisFormConfig: FieldConfig<LuisFormData> = {
+  const formConfig: FieldConfig<FormData> = {
     name: {
       required: true,
       validate: validate,
       defaultValue: config.name || botName,
     },
     authoringKey: {
-      required: true,
+      required: luConfigShow,
       validate: validate,
       defaultValue: config.authoringKey,
     },
+    subscriptionKey: {
+      required: qnaConfigShow,
+      validate: validate,
+      defaultValue: config.subscriptionKey,
+    },
+    qnaRegion: {
+      required: true,
+      defaultValue: config.qnaRegion || 'westus',
+    },
     endpointKey: {
       required: false,
       defaultValue: config.endpointKey,
@@ -122,7 +157,7 @@ export const PublishLuisDialog: React.FC<IPublishLuisDialogProps> = (props) => {
     },
   };
 
-  const { formData, formErrors, hasErrors, updateField } = useForm(luisFormConfig, { validateOnMount: true });
+  const { formData, formErrors, hasErrors, updateField } = useForm(formConfig, { validateOnMount: true });
 
   const handlePublish = useCallback(
     (e) => {
@@ -130,17 +165,52 @@ export const PublishLuisDialog: React.FC<IPublishLuisDialogProps> = (props) => {
       if (hasErrors) {
         return;
       }
-
-      onPublish(formData);
+      const newValue = Object.assign({}, formData);
+      const subscriptionKey = formData.subscriptionKey;
+      const qnaRegion = formData.qnaRegion;
+      delete newValue.subscriptionKey;
+      delete newValue.qnaRegion;
+      const publishConfig = {
+        luis: newValue,
+        qna: {
+          subscriptionKey,
+          qnaRegion,
+          endpointKey: '',
+        },
+      };
+      onPublish(publishConfig);
     },
     [hasErrors, formData]
   );
 
+  const luisTitleRender = () => {
+    return (
+      <Fragment>
+        <br />
+        {Text.LUISDEPLOY}
+        <Link href={Links.LUIS} target="_blank">
+          {formatMessage('Learn more.')}
+        </Link>
+      </Fragment>
+    );
+  };
+
+  const qnaTitleRender = () => {
+    return (
+      <Fragment>
+        <br />
+        {Text.QNADEPLOY}
+        <Link href={Links.QNA} target="_blank">
+          {formatMessage('Learn more.')}
+        </Link>
+      </Fragment>
+    );
+  };
   return (
     <Dialog
       dialogContentProps={{
         type: DialogType.normal,
-        title: formatMessage('Publish LUIS models'),
+        title: formatMessage('Publish models'),
         styles: dialog,
       }}
       hidden={!isOpen}
@@ -152,10 +222,9 @@ export const PublishLuisDialog: React.FC<IPublishLuisDialogProps> = (props) => {
       onDismiss={onDismiss}
     >
       <div css={dialogSubTitle}>
-        {Text.LUISDEPLOY}{' '}
-        <Link href={Links.LUIS} target="_blank">
-          {formatMessage('Learn more.')}
-        </Link>
+        {Text.DEPLOY}
+        {luConfigShow ? luisTitleRender() : ''}
+        {qnaConfigShow ? qnaTitleRender() : ''}
       </div>
       <form css={dialogContent} onSubmit={handlePublish}>
         <Stack gap={20}>
@@ -175,21 +244,49 @@ export const PublishLuisDialog: React.FC<IPublishLuisDialogProps> = (props) => {
             onChange={(_e, val) => updateField('environment', val)}
             onRenderLabel={onRenderLabel(Tips.ENVIRONMENT)}
           />
-          <TextField
-            data-testid="AuthoringKeyInput"
-            errorMessage={formErrors.authoringKey}
-            label={formatMessage('LUIS Authoring key:')}
-            value={formData.authoringKey}
-            onChange={(_e, val) => updateField('authoringKey', val)}
-            onRenderLabel={onRenderLabel(Tips.AUTHORING_KEY)}
-          />
-          <TextField
-            disabled
-            errorMessage={formErrors.authoringRegion}
-            label={formatMessage('Authoring Region')}
-            value={formData.authoringRegion}
-            onRenderLabel={onRenderLabel(Tips.AUTHORING_REGION)}
-          />
+          {luConfigShow && (
+            <Fragment>
+              <TextField
+                data-testid="AuthoringKeyInput"
+                errorMessage={formErrors.authoringKey}
+                label={formatMessage('LUIS Authoring key:')}
+                value={formData.authoringKey}
+                onChange={(_e, val) => updateField('authoringKey', val)}
+                onRenderLabel={onRenderLabel(Tips.AUTHORING_KEY)}
+              />
+              <Dropdown
+                data-testid="regionDropdown"
+                label={formatMessage('Luis Authoring Region')}
+                options={regionOptions}
+                responsiveMode={ResponsiveMode.large}
+                selectedKey={formData.authoringRegion}
+                onChange={(_e, option) => {
+                  if (option) {
+                    updateField('authoringRegion', option.key.toString());
+                  }
+                }}
+              />
+            </Fragment>
+          )}
+          {qnaConfigShow && (
+            <Fragment>
+              <TextField
+                data-testid="SubscriptionKeyInput"
+                errorMessage={formErrors.subscriptionKey}
+                label={formatMessage('QNA Subscription key:')}
+                value={formData.subscriptionKey}
+                onChange={(_e, val) => updateField('subscriptionKey', val)}
+                onRenderLabel={onRenderLabel(Tips.SUBSCRIPTION_KEY)}
+              />
+              <TextField
+                disabled
+                errorMessage={formErrors.qnaRegion}
+                label={formatMessage('QnA Region')}
+                value={formData.qnaRegion}
+                onRenderLabel={onRenderLabel(Tips.AUTHORING_REGION)}
+              />
+            </Fragment>
+          )}
           <TextField
             disabled
             errorMessage={formErrors.defaultLanguage}
diff --git a/Composer/packages/client/src/constants.ts b/Composer/packages/client/src/constants.ts
index e2792cc7fd..0b86f43e99 100644
--- a/Composer/packages/client/src/constants.ts
+++ b/Composer/packages/client/src/constants.ts
@@ -17,7 +17,9 @@ export const Tips = {
     `When multiple people are working with models you want to be able to work with models independently from each other tied to the source control.`
   ),
   AUTHORING_KEY: formatMessage('An authoring key is created automatically when you create a LUIS account.'),
+  SUBSCRIPTION_KEY: formatMessage('A subscription key is created when you create a QnA Maker resource.'),
   AUTHORING_REGION: formatMessage('Authoring region to use (e.g. westus, westeurope, australiaeast)'),
+  QNA_REGION: formatMessage('Authoring region to use (westus)  (QnA maker resource location)'),
   DEFAULT_LANGUAGE: formatMessage(
     `Configures default language model to use if there is no culture code in the file name (Default: en-us)`
   ),
@@ -25,11 +27,16 @@ export const Tips = {
 
 export const Links = {
   LUIS: 'https://docs.microsoft.com/en-us/azure/cognitive-services/luis/luis-concept-keys?tabs=V2',
+  QNA: 'https://docs.microsoft.com/en-us/azure/cognitive-services/qnamaker/concepts/azure-resources#keys-in-qna-maker',
 };
 
 export const Text = {
+  DEPLOY: formatMessage(`Your bot is using LUIS and QNA for natural language understanding.`),
   LUISDEPLOY: formatMessage(
-    `Your bot is using LUIS for natural language understanding. If you already have a LUIS account, provide the information below. If you do not have an account yet, create a (free) account first.`
+    `If you already have a LUIS account, provide the information below. If you do not have an account yet, create a (free) account first.`
+  ),
+  QNADEPLOY: formatMessage(
+    `If you already have a QNA account, provide the information below. If you do not have an account yet, create a (free) account first.`
   ),
   LUISDEPLOYSUCCESS: formatMessage('Congratulations! Your model is successfully published.'),
   LUISDEPLOYFAILURE: formatMessage('Sorry, something went wrong with publishing. Try again or exit out of this task.'),
@@ -46,6 +53,10 @@ export enum LuisConfig {
   LANGUAGE = 'defaultLanguage',
 }
 
+export enum QnaConfig {
+  SUBSCRIPTION_KEY = 'subscriptionKey',
+}
+
 export const FileTypes = {
   FOLDER: 'folder',
   FILE: 'file',
@@ -105,6 +116,12 @@ export const DialogCreationCopy = {
     title: formatMessage('Set destination folder'),
     subText: formatMessage('Choose a location for your new bot project.'),
   },
+  IMPORT_QNA: {
+    title: formatMessage('Create New Knowledge Base'),
+    subText: formatMessage(
+      'Extract question-and-answer pairs from an online FAQ, product manuals, or other files. Supported formats are .tsv, .pdf, .doc, .docx, .xlsx, containing questions and answers in sequence. Learn more about knowledge base sources. Skip this step to add questions and answers manually after creation. The number of sources and file size you can add depends on the QnA service SKU you choose. Learn more about QnA Maker SKUs.'
+    ),
+  },
 };
 
 export const DialogDeleting = {
@@ -181,4 +198,15 @@ export enum AppUpdaterStatus {
 
 export const EmptyBotTemplateId = 'EmptyBot';
 
+export const QnABotTemplateId = 'QnASample';
+
 export const nameRegex = /^[a-zA-Z0-9-_]+$/;
+
+export const triggerNotSupportedWarning = formatMessage(
+  'This trigger type is not supported by the RegEx recognizer. To ensure this trigger is fired, change the recognizer type.'
+);
+
+export const knowledgeBaseSourceUrl =
+  'https://docs.microsoft.com/en-us/azure/cognitive-services/qnamaker/concepts/content-types';
+
+export const QnAMakerLearningUrl = 'https://azure.microsoft.com/en-us/pricing/details/cognitive-services/qna-maker/';
diff --git a/Composer/packages/client/src/hooks/useResolver.ts b/Composer/packages/client/src/hooks/useResolver.ts
index 1b59c32b7d..0e50990d6f 100644
--- a/Composer/packages/client/src/hooks/useResolver.ts
+++ b/Composer/packages/client/src/hooks/useResolver.ts
@@ -4,12 +4,14 @@ import { useRef } from 'react';
 import { importResolverGenerator } from '@bfc/shared';
 import { useRecoilValue } from 'recoil';
 
-import { localeState, lgFilesState, luFilesState } from '../recoilModel';
+import { localeState, lgFilesState, luFilesState, qnaFilesState, dialogsState } from '../recoilModel';
 
 export const useResolvers = () => {
   const lgFiles = useRecoilValue(lgFilesState);
   const locale = useRecoilValue(localeState);
   const luFiles = useRecoilValue(luFilesState);
+  const qnaFiles = useRecoilValue(qnaFilesState);
+  const dialogs = useRecoilValue(dialogsState);
 
   const lgFilesRef = useRef(lgFiles);
   lgFilesRef.current = lgFiles;
@@ -20,6 +22,12 @@ export const useResolvers = () => {
   const luFilesRef = useRef(luFiles);
   luFilesRef.current = luFiles;
 
+  const qnaFilesRef = useRef(qnaFiles);
+  qnaFilesRef.current = qnaFiles;
+
+  const dialogsRef = useRef(dialogs);
+  dialogsRef.current = dialogs;
+
   const lgImportresolver = () => importResolverGenerator(lgFilesRef.current, '.lg');
 
   const lgFileResolver = (id: string) => {
@@ -32,9 +40,20 @@ export const useResolvers = () => {
     return luFilesRef.current.find(({ id }) => id === fileId);
   };
 
+  const dialogResolver = (dialogId: string) => {
+    return dialogsRef.current.find(({ id }) => id === dialogId);
+  };
+
+  const qnaFileResolver = (id: string) => {
+    const fileId = id.includes('.') ? id : `${id}.${localeRef.current}`;
+    return qnaFilesRef.current.find(({ id }) => id === fileId);
+  };
+
   return {
     lgImportresolver,
     luFileResolver,
     lgFileResolver,
+    qnaFileResolver,
+    dialogResolver,
   };
 };
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 0a048177a8..9ad66ecee2 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -8,15 +8,7 @@ import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcru
 import formatMessage from 'format-message';
 import { globalHistory, RouteComponentProps } from '@reach/router';
 import get from 'lodash/get';
-import {
-  DialogFactory,
-  SDKKinds,
-  DialogInfo,
-  PromptTab,
-  LuIntentSection,
-  getEditorAPI,
-  registerEditorAPI,
-} from '@bfc/shared';
+import { DialogFactory, SDKKinds, DialogInfo, PromptTab, getEditorAPI, registerEditorAPI } from '@bfc/shared';
 import { ActionButton } from 'office-ui-fabric-react/lib/Button';
 import { JsonEditor } from '@bfc/code-editor';
 import Extension, { useTriggerApi, PluginConfig } from '@bfc/extension';
@@ -25,7 +17,13 @@ import { useRecoilValue } from 'recoil';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { TestController } from '../../components/TestController/TestController';
 import { DialogDeleting } from '../../constants';
-import { createSelectedPath, deleteTrigger, getbreadcrumbLabel } from '../../utils/dialogUtil';
+import {
+  createSelectedPath,
+  deleteTrigger,
+  getbreadcrumbLabel,
+  qnaMatcherKey,
+  TriggerFormData,
+} from '../../utils/dialogUtil';
 import { Conversation } from '../../components/Conversation';
 import { dialogStyle } from '../../components/Modal/dialogStyle';
 import { OpenConfirmModal } from '../../components/Modal/ConfirmDialog';
@@ -49,13 +47,17 @@ import {
   skillsState,
   actionsSeedState,
   userSettingsState,
-  luFilesState,
   localeState,
+  qnaFilesState,
 } from '../../recoilModel';
+import { getBaseName } from '../../utils/fileUtil';
 import { validatedDialogsSelector } from '../../recoilModel/selectors/validatedDialogs';
 import plugins, { mergePluginConfigs } from '../../plugins';
 import { useElectronFeatures } from '../../hooks/useElectronFeatures';
+import ImportQnAFromUrlModal from '../knowledge-base/ImportQnAFromUrlModal';
+import { triggerNotSupported } from '../../utils/dialogValidator';
 
+import { WarningMessage } from './WarningMessage';
 import {
   breadcrumbClass,
   contentWrapper,
@@ -123,7 +125,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const skills = useRecoilValue(skillsState);
   const actionsSeed = useRecoilValue(actionsSeedState);
   const userSettings = useRecoilValue(userSettingsState);
-  const luFiles = useRecoilValue(luFilesState);
+  const qnaFiles = useRecoilValue(qnaFilesState);
   const locale = useRecoilValue(localeState);
   const undoVersion = useRecoilValue(undoVersionState);
   const {
@@ -138,25 +140,27 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     selectTo,
     selectAndFocus,
     addSkillDialogCancel,
-    createLuIntent,
+    createQnAFile,
     updateSkill,
     exportToZip,
     onboardingAddCoachMarkRef,
+    importQnAFromUrls,
   } = useRecoilValue(dispatcherState);
 
   const { location, dialogId } = props;
-  const luFile = luFiles.find(({ id }) => id === `${dialogId}.${locale}`);
   const params = new URLSearchParams(location?.search);
   const selected = params.get('selected') || '';
   const [triggerModalVisible, setTriggerModalVisibility] = useState(false);
   const [dialogJsonVisible, setDialogJsonVisibility] = useState(false);
+  const [importQnAModalVisibility, setImportQnAModalVisibility] = useState(false);
   const [currentDialog, setCurrentDialog] = useState<DialogInfo>(dialogs[0]);
   const [exportSkillModalVisible, setExportSkillModalVisible] = useState(false);
+  const [warningIsVisible, setWarningIsVisible] = useState(true);
   const shell = useShell('DesignPage');
   const shellForFlowEditor = useShell('FlowEditor');
   const shellForPropertyEditor = useShell('PropertyEditor');
   const triggerApi = useTriggerApi(shell.api);
-
+  const { createTrigger } = shell.api;
   useEffect(() => {
     const currentDialog = dialogs.find(({ id }) => id === dialogId);
     if (currentDialog) {
@@ -168,8 +172,29 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       navigateTo(`/bot/${projectId}/dialogs/${rootDialog.id}${search}`);
       return;
     }
+    setWarningIsVisible(true);
   }, [dialogId, dialogs, location]);
 
+  // migration: add id to dialog when dialog doesn't have id
+  useEffect(() => {
+    const currentDialog = dialogs.find(({ id }) => id === dialogId);
+
+    const dialogContent = currentDialog?.content ? Object.assign({}, currentDialog.content) : { emptyDialog: true };
+    if (!dialogContent.emptyDialog && !dialogContent.id) {
+      dialogContent.id = dialogId;
+      updateDialog({ id: dialogId, content: dialogContent });
+    }
+  }, [dialogId]);
+
+  // migration: add qna file for dialog
+  useEffect(() => {
+    dialogs.forEach(async (dialog) => {
+      if (!qnaFiles || qnaFiles.length === 0 || !qnaFiles.find((qnaFile) => getBaseName(qnaFile.id) === dialog.id)) {
+        await createQnAFile({ id: dialog.id, content: '' });
+      }
+    });
+  }, [dialogs]);
+
   useEffect(() => {
     const index = currentDialog.triggers.findIndex(({ type }) => type === SDKKinds.OnBeginDialog);
     if (index >= 0 && !designPageLocation.selected && designPageLocation.projectId === projectId) {
@@ -205,6 +230,10 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     return clearUndo;
   }, []);
 
+  const openImportQnAModal = () => {
+    setImportQnAModalVisibility(true);
+  };
+
   const onTriggerCreationDismiss = () => {
     setTriggerModalVisibility(false);
   };
@@ -213,19 +242,8 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     setTriggerModalVisibility(true);
   };
 
-  const onTriggerCreationSubmit = (dialog: DialogInfo, intent?: LuIntentSection) => {
-    const dialogPayload = {
-      id: dialog.id,
-      projectId,
-      content: dialog.content,
-    };
-    if (luFile && intent) {
-      createLuIntent({ id: luFile.id, intent, projectId });
-    }
-
-    const index = get(dialog, 'content.triggers', []).length - 1;
-    selectTo(`triggers[${index}]`);
-    updateDialog(dialogPayload);
+  const onTriggerCreationSubmit = async (dialogId: string, formData: TriggerFormData) => {
+    createTrigger(dialogId, formData);
   };
 
   function handleSelect(id, selected = '') {
@@ -286,6 +304,16 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
               openNewTriggerModal();
             },
           },
+          {
+            'data-testid': 'AddNewKnowledgebase',
+            key: 'addKnowledge',
+            text: formatMessage(` Add new knowledge base on {displayName}`, {
+              displayName: currentDialog?.displayName ?? '',
+            }),
+            onClick: () => {
+              openImportQnAModal();
+            },
+          },
         ],
       },
     },
@@ -466,6 +494,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     const seededContent = new DialogFactory(schemas.sdk?.content).create(SDKKinds.AdaptiveDialog, {
       $designer: { name: data.name, description: data.description },
       generator: `${data.name}.lg`,
+      recognizer: `${data.name}.lu.qna`,
     });
     if (seededContent.triggers?.[0]) {
       seededContent.triggers[0].actions = actionsSeed;
@@ -527,6 +556,27 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     onboardingAddCoachMarkRef({ addNew });
   }, []);
 
+  const cancelImportQnAModal = () => {
+    setImportQnAModalVisibility(false);
+  };
+
+  const handleCreateQnA = async (urls: string[]) => {
+    cancelImportQnAModal();
+    const formData = {
+      $kind: qnaMatcherKey,
+      errors: { $kind: '', intent: '', event: '', triggerPhrases: '', regEx: '', activity: '' },
+      event: '',
+      intent: '',
+      regEx: '',
+      triggerPhrases: '',
+    };
+    if (dialogId) {
+      const url = `/bot/${projectId}/knowledge-base/${dialogId}`;
+      createTrigger(dialogId, formData, url);
+      await importQnAFromUrls({ id: `${dialogId}.${locale}`, urls });
+    }
+  };
+
   const pluginConfig: PluginConfig = useMemo(() => {
     const sdkUISchema = schemas?.ui?.content ?? {};
     const userUISchema = schemas?.uiOverrides?.content ?? {};
@@ -537,6 +587,9 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     return <LoadingSpinner />;
   }
 
+  const selectedTrigger = currentDialog.triggers.find((t) => t.id === selected);
+  const withWarning = triggerNotSupported(currentDialog, selectedTrigger);
+
   return (
     <React.Fragment>
       <div css={pageRoot}>
@@ -572,6 +625,16 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
                       updateDialog({ id: currentDialog.id, content: data });
                     }}
                   />
+                ) : withWarning ? (
+                  warningIsVisible && (
+                    <WarningMessage
+                      okText={formatMessage('Change Recognizer')}
+                      onCancel={() => {
+                        setWarningIsVisible(false);
+                      }}
+                      onOk={() => navTo(`/bot/${projectId}/knowledge-base/all`)}
+                    />
+                  )
                 ) : (
                   <Extension plugins={pluginConfig} shell={shellForFlowEditor}>
                     <VisualEditor
@@ -622,6 +685,9 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
             onSubmit={onTriggerCreationSubmit}
           />
         )}
+        {importQnAModalVisibility && (
+          <ImportQnAFromUrlModal dialogId={dialogId} onDismiss={cancelImportQnAModal} onSubmit={handleCreateQnA} />
+        )}
         {displaySkillManifest && (
           <DisplayManifestModal manifestId={displaySkillManifest} onDismiss={dismissManifestModal} />
         )}
diff --git a/Composer/packages/client/src/pages/design/WarningMessage.tsx b/Composer/packages/client/src/pages/design/WarningMessage.tsx
new file mode 100644
index 0000000000..7dd7ad46e0
--- /dev/null
+++ b/Composer/packages/client/src/pages/design/WarningMessage.tsx
@@ -0,0 +1,65 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { SharedColors } from '@uifabric/fluent-theme';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Button } from 'office-ui-fabric-react/lib/Button';
+
+import { triggerNotSupportedWarning } from '../../constants';
+
+const warningIcon = {
+  marginLeft: 5,
+  color: '#8A8780',
+  fontSize: 20,
+  cursor: 'pointer',
+};
+
+const warningRoot = {
+  display: 'flex',
+  background: '#FFF4CE',
+  height: 50,
+  alignItems: 'center',
+};
+
+const warningFont = {
+  color: SharedColors.gray40,
+  fontSize: 9,
+  paddingLeft: 10,
+};
+
+const changeRecognizerButton = {
+  root: {
+    marginLeft: 200,
+    border: '1px solid',
+    borderRadius: 2,
+    fontSize: 14,
+  },
+};
+
+interface WarningMessageProps {
+  okText: string;
+  onOk: () => void;
+  onCancel: () => void;
+}
+
+export const WarningMessage: React.FC<WarningMessageProps> = (props) => {
+  const { okText, onOk, onCancel } = props;
+  return (
+    <div css={warningRoot}>
+      <Icon iconName={'Warning'} style={warningIcon} />
+      <div css={warningFont}>{triggerNotSupportedWarning}</div>
+      <Button
+        styles={changeRecognizerButton}
+        text={okText}
+        onClick={() => {
+          onOk();
+        }}
+      />
+      <Icon iconName={'Cancel'} style={warningIcon} onClick={onCancel} />
+    </div>
+  );
+};
+
+export default WarningMessage;
diff --git a/Composer/packages/client/src/pages/knowledge-base/ImportQnAFromUrlModal.tsx b/Composer/packages/client/src/pages/knowledge-base/ImportQnAFromUrlModal.tsx
new file mode 100644
index 0000000000..86c22c848c
--- /dev/null
+++ b/Composer/packages/client/src/pages/knowledge-base/ImportQnAFromUrlModal.tsx
@@ -0,0 +1,255 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import React, { useState } from 'react';
+import formatMessage from 'format-message';
+import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { PrimaryButton, DefaultButton, ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { FontWeights } from '@uifabric/styling';
+import { FontSizes, SharedColors, NeutralColors } from '@uifabric/fluent-theme';
+import { RouteComponentProps } from '@reach/router';
+
+import { QnAMakerLearningUrl, knowledgeBaseSourceUrl } from '../../constants';
+import { FieldConfig, useForm } from '../../hooks/useForm';
+
+const styles = {
+  dialog: {
+    title: {
+      fontWeight: FontWeights.bold,
+      fontSize: FontSizes.size20,
+      paddingTop: '14px',
+      paddingBottom: '11px',
+    },
+    subText: {
+      fontSize: FontSizes.size14,
+    },
+  },
+  modal: {
+    main: {
+      maxWidth: '800px !important',
+    },
+  },
+};
+
+const dialogWindow = css`
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  min-height: 200px;
+`;
+
+const textField = {
+  root: {
+    width: '400px',
+    paddingBottom: '20px',
+  },
+};
+
+const warning = {
+  color: SharedColors.red10,
+  fontSize: FontSizes.size10,
+};
+
+const actionButton = css`
+  font-size: 16px;
+  padding-left: 0px;
+  margin-left: -5px;
+`;
+
+const urlContainer = css`
+  display: flex;
+  width: 444px;
+`;
+
+const cancel = css`
+  margin-top: -3px;
+  margin-left: 10px;
+`;
+
+const subText = css`
+  color: ${NeutralColors.gray130};
+  font-size: 14px;
+  font-weight: 400;
+`;
+
+interface ImportQnAFromUrlModalProps
+  extends RouteComponentProps<{
+    location: string;
+  }> {
+  dialogId: string;
+  subscriptionKey?: string;
+  onDismiss: () => void;
+  onSubmit: (urls: string[]) => void;
+}
+
+const DialogTitle = () => {
+  return (
+    <div>
+      {formatMessage('Populate your KB.')}
+      <p>
+        <span css={subText}>
+          {formatMessage(
+            'Extract question-and-answer pairs from an online FAQ, product manuals, or other files. Supported formats are .tsv, .pdf, .doc, .docx, .xlsx, containing questions and answers in sequence. '
+          )}
+          <Link href={knowledgeBaseSourceUrl} target={'_blank'}>
+            {formatMessage('Learn more about knowledge base sources. ')}
+          </Link>
+          {formatMessage(
+            'Skip this step to add questions and answers manually after creation. The number of sources and file size you can add depends on the QnA service SKU you choose. '
+          )}
+          <Link href={QnAMakerLearningUrl} target={'_blank'}>
+            {formatMessage('Learn more about QnA Maker SKUs.')}
+          </Link>
+        </span>
+      </p>
+    </div>
+  );
+};
+
+interface FormField {
+  urls: string[];
+}
+
+const validateUrls = (urls: string[]) => {
+  const errors = Array(urls.length).fill('');
+
+  for (let i = 0; i < urls.length; i++) {
+    for (let j = 0; j < urls.length; j++) {
+      if (urls[i] && urls[j] && urls[i] === urls[j] && i !== j) {
+        errors[i] = errors[j] = formatMessage('This url is duplicated');
+      }
+    }
+  }
+
+  for (let i = 0; i < urls.length; i++) {
+    if (urls[i] && !urls[i].startsWith('http://') && !urls[i].startsWith('https://')) {
+      errors[i] = formatMessage('A valid url should start with http:// or https://');
+    }
+  }
+
+  return errors;
+};
+
+const formConfig: FieldConfig<FormField> = {
+  urls: {
+    required: true,
+    defaultValue: [''],
+  },
+};
+
+export const ImportQnAFromUrlModal: React.FC<ImportQnAFromUrlModalProps> = (props) => {
+  const { onDismiss, onSubmit, dialogId } = props;
+  const [urlErrors, setUrlErrors] = useState(['']);
+
+  const { formData, updateField, hasErrors } = useForm(formConfig);
+  const isQnAFileselected = !(dialogId === 'all');
+  const disabled = !isQnAFileselected || hasErrors || urlErrors.some((e) => !!e) || formData.urls.some((url) => !url);
+
+  const addNewUrl = () => {
+    const urls = [...formData.urls, ''];
+    updateField('urls', urls);
+    setUrlErrors(validateUrls(urls));
+  };
+
+  const updateUrl = (index: number, url = '') => {
+    const urls = [...formData.urls];
+    urls[index] = url;
+    updateField('urls', urls);
+    setUrlErrors(validateUrls(urls));
+  };
+
+  const removeUrl = (index: number) => {
+    const urls = [...formData.urls];
+    urls.splice(index, 1);
+    updateField('urls', urls);
+    setUrlErrors(validateUrls(urls));
+  };
+
+  return (
+    <Dialog
+      dialogContentProps={{
+        type: DialogType.normal,
+        title: <DialogTitle />,
+        styles: styles.dialog,
+      }}
+      hidden={false}
+      modalProps={{
+        isBlocking: false,
+        styles: styles.modal,
+      }}
+      onDismiss={onDismiss}
+    >
+      <div css={dialogWindow}>
+        <Stack>
+          {formData.urls.map((l, index) => {
+            return (
+              <div key={index} css={urlContainer}>
+                <TextField
+                  data-testid={`knowledgeLocationTextField-${index}`}
+                  errorMessage={urlErrors[index]}
+                  label={index === 0 ? formatMessage('URL') : ''}
+                  placeholder={'http://'}
+                  styles={textField}
+                  value={l}
+                  onChange={(e, url) => updateUrl(index, url)}
+                />
+                {index !== 0 && (
+                  <ActionButton
+                    css={cancel}
+                    data-testid={`deleteImportQnAUrl-${index}`}
+                    hidden={index === 0}
+                    iconProps={{ iconName: 'Cancel' }}
+                    onClick={(e) => removeUrl(index)}
+                  />
+                )}
+              </div>
+            );
+          })}
+          <ActionButton
+            css={actionButton}
+            data-testid={'addQnAImportUrl'}
+            iconProps={{ iconName: 'Add' }}
+            onClick={addNewUrl}
+          >
+            {formatMessage('Add URL')}
+          </ActionButton>
+          {!isQnAFileselected && (
+            <div css={warning}> {formatMessage('please select a specific qna file to import QnA')}</div>
+          )}
+        </Stack>
+      </div>
+      <DialogFooter>
+        <DefaultButton
+          data-testid={'createKnowledgeBaseFromScratch'}
+          styles={{ root: { marginRight: 155 } }}
+          text={formatMessage('Create knowledge base from scratch')}
+          onClick={() => {
+            if (hasErrors) {
+              return;
+            }
+            onSubmit([]);
+          }}
+        />
+        <DefaultButton text={formatMessage('Cancel')} onClick={onDismiss} />
+        <PrimaryButton
+          data-testid={'createKnowledgeBase'}
+          disabled={disabled}
+          text={formatMessage('Create knowledge base')}
+          onClick={() => {
+            if (hasErrors) {
+              return;
+            }
+            onSubmit(formData.urls);
+          }}
+        />
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+export default ImportQnAFromUrlModal;
diff --git a/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx b/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx
new file mode 100644
index 0000000000..586e8bf833
--- /dev/null
+++ b/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx
@@ -0,0 +1,166 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useRecoilValue } from 'recoil';
+import React, { Fragment, useMemo, useCallback, Suspense, useEffect, useState } from 'react';
+import formatMessage from 'format-message';
+import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
+import { RouteComponentProps, Router } from '@reach/router';
+
+import { LoadingSpinner } from '../../components/LoadingSpinner';
+import { actionButton } from '../language-understanding/styles';
+import { navigateTo } from '../../utils/navigation';
+import { TestController } from '../../components/TestController/TestController';
+import { INavTreeItem } from '../../components/NavTree';
+import { Page } from '../../components/Page';
+import { dialogsState, projectIdState, qnaAllUpViewStatusState } from '../../recoilModel/atoms/botState';
+import { dispatcherState } from '../../recoilModel';
+import { QnAAllUpViewStatus } from '../../recoilModel/types';
+
+import TableView from './table-view';
+import { ImportQnAFromUrlModal } from './ImportQnAFromUrlModal';
+
+const CodeEditor = React.lazy(() => import('./code-editor'));
+
+interface QnAPageProps extends RouteComponentProps<{}> {
+  dialogId?: string;
+}
+
+const QnAPage: React.FC<QnAPageProps> = (props) => {
+  const actions = useRecoilValue(dispatcherState);
+  const dialogs = useRecoilValue(dialogsState);
+  const projectId = useRecoilValue(projectIdState);
+  //To do: support other languages
+  const locale = 'en-us';
+  //const locale = useRecoilValue(localeState);
+  const qnaAllUpViewStatus = useRecoilValue(qnaAllUpViewStatusState);
+  const [importQnAFromUrlModalVisiability, setImportQnAFromUrlModalVisiability] = useState(false);
+
+  const path = props.location?.pathname ?? '';
+  const { dialogId = '' } = props;
+  const edit = /\/edit(\/)?$/.test(path);
+  const isRoot = dialogId === 'all';
+  const navLinks: INavTreeItem[] = useMemo(() => {
+    const newDialogLinks: INavTreeItem[] = dialogs.map((dialog) => {
+      return {
+        id: dialog.id,
+        name: dialog.displayName,
+        ariaLabel: formatMessage('qna file'),
+        url: `/bot/${projectId}/knowledge-base/${dialog.id}`,
+      };
+    });
+    const mainDialogIndex = newDialogLinks.findIndex((link) => link.id === 'Main');
+
+    if (mainDialogIndex > -1) {
+      const mainDialog = newDialogLinks.splice(mainDialogIndex, 1)[0];
+      newDialogLinks.splice(0, 0, mainDialog);
+    }
+    newDialogLinks.splice(0, 0, {
+      id: 'all',
+      name: 'All',
+      ariaLabel: formatMessage('all qna files'),
+      url: `/bot/${projectId}/knowledge-base/all`,
+    });
+    return newDialogLinks;
+  }, [dialogs]);
+
+  useEffect(() => {
+    const activeDialog = dialogs.find(({ id }) => id === dialogId);
+    if (!activeDialog && dialogs.length && dialogId !== 'all') {
+      navigateTo(`/bot/${projectId}/knowledge-base/${dialogId}`);
+    }
+  }, [dialogId, dialogs, projectId]);
+
+  const onToggleEditMode = useCallback(
+    (_e, checked) => {
+      let url = `/bot/${projectId}/knowledge-base/${dialogId}`;
+      if (checked) url += `/edit`;
+      navigateTo(url);
+    },
+    [dialogId, projectId]
+  );
+
+  const toolbarItems = [
+    {
+      type: 'dropdown',
+      text: formatMessage('Add'),
+      align: 'left',
+      dataTestid: 'AddFlyout',
+      buttonProps: {
+        iconProps: { iconName: 'Add' },
+      },
+      menuProps: {
+        items: [
+          {
+            'data-testid': 'FlyoutNewDialog',
+            key: 'importQnAFromUrls',
+            text: formatMessage('Import QnA From Url'),
+            onClick: () => {
+              setImportQnAFromUrlModalVisiability(true);
+            },
+          },
+        ],
+      },
+    },
+    {
+      type: 'element',
+      element: <TestController />,
+      align: 'right',
+    },
+  ];
+
+  const onRenderHeaderContent = () => {
+    if (!isRoot || edit) {
+      return (
+        <Toggle
+          checked={!!edit}
+          className={'toggleEditMode'}
+          css={actionButton}
+          defaultChecked={false}
+          offText={formatMessage('Edit mode')}
+          onChange={onToggleEditMode}
+          onText={formatMessage('Edit mode')}
+        />
+      );
+    }
+    return null;
+  };
+
+  const onDismiss = () => {
+    setImportQnAFromUrlModalVisiability(false);
+  };
+
+  const onSubmit = async (urls: string[]) => {
+    onDismiss();
+    await actions.importQnAFromUrls({ id: `${dialogId}.${locale}`, urls });
+  };
+
+  return (
+    <Page
+      data-testid="QnAPage"
+      mainRegionName={formatMessage('QnA editor')}
+      navLinks={navLinks}
+      navRegionName={formatMessage('Qna Navigation Pane')}
+      title={formatMessage('QnA')}
+      toolbarItems={toolbarItems}
+      onRenderHeaderContent={onRenderHeaderContent}
+    >
+      <Suspense fallback={<LoadingSpinner />}>
+        <Router component={Fragment} primary={false}>
+          <CodeEditor dialogId={dialogId} path="/edit" />
+          {qnaAllUpViewStatus !== QnAAllUpViewStatus.Loading && <TableView dialogId={dialogId} path="/" />}
+        </Router>
+        {qnaAllUpViewStatus === QnAAllUpViewStatus.Loading && (
+          <LoadingSpinner message={'Extracting QnA pairs. This could take a moment.'} />
+        )}
+        {importQnAFromUrlModalVisiability && (
+          <ImportQnAFromUrlModal dialogId={dialogId} onDismiss={onDismiss} onSubmit={onSubmit} />
+        )}
+      </Suspense>
+    </Page>
+  );
+};
+
+export default QnAPage;
diff --git a/Composer/packages/client/src/pages/knowledge-base/__tests__/importQnAFromUrlModal.test.tsx b/Composer/packages/client/src/pages/knowledge-base/__tests__/importQnAFromUrlModal.test.tsx
new file mode 100644
index 0000000000..769c52d8d3
--- /dev/null
+++ b/Composer/packages/client/src/pages/knowledge-base/__tests__/importQnAFromUrlModal.test.tsx
@@ -0,0 +1,69 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { fireEvent } from '@bfc/test-utils';
+
+import { renderWithRecoil } from './../../../../__tests__/testUtils/renderWithRecoil';
+import { ImportQnAFromUrlModal } from './../ImportQnAFromUrlModal';
+
+describe('<ImportQnAFromUrlModal />', () => {
+  const onDismiss = jest.fn(() => {});
+  const onSubmit = jest.fn(() => {});
+  let container;
+  beforeEach(() => {
+    container = renderWithRecoil(
+      <ImportQnAFromUrlModal dialogId="test" onDismiss={onDismiss} onSubmit={onSubmit} />,
+      () => {}
+    );
+  });
+
+  it('renders <ImportQnAFromUrlModal /> and create from scratch', () => {
+    const { getByText } = container;
+    expect(getByText('Populate your KB.')).not.toBeNull();
+    const createFromScratchButton = getByText('Create knowledge base from scratch');
+    expect(createFromScratchButton).not.toBeNull();
+    fireEvent.click(createFromScratchButton);
+    expect(onSubmit).toBeCalled();
+    expect(onSubmit).toBeCalledWith([]);
+  });
+
+  it('click cancel', () => {
+    const { getByText } = container;
+    const cancelButton = getByText('Cancel');
+    expect(cancelButton).not.toBeNull();
+    fireEvent.click(cancelButton);
+    expect(onDismiss).toBeCalled();
+  });
+
+  it('add new url and validate the value', () => {
+    const { findByText, getByTestId, getByText } = container;
+    const input0 = getByTestId('knowledgeLocationTextField-0');
+    fireEvent.change(input0, { target: { value: 'test' } });
+
+    expect(input0.value).toBe('test');
+    expect(findByText(/A valid url should start with/)).not.toBeNull();
+
+    const addButton = getByText(/Add URL/);
+    fireEvent.change(input0, { target: { value: 'http://test' } });
+    fireEvent.click(addButton);
+    expect(getByTestId('knowledgeLocationTextField-1')).not.toBeNull();
+
+    const input1 = getByTestId('knowledgeLocationTextField-1');
+    fireEvent.change(input1, { target: { value: 'http://test' } });
+    expect(findByText(/This url is duplicated/)).not.toBeNull();
+    fireEvent.change(input1, { target: { value: 'http://test1' } });
+
+    const createKnowledgeButton = getByText('Create knowledge base');
+    expect(createKnowledgeButton).not.toBeNull();
+    fireEvent.click(createKnowledgeButton);
+    expect(onSubmit).toBeCalled();
+    expect(onSubmit).toBeCalledWith(['http://test', 'http://test1']);
+
+    const deletebutton = getByTestId('deleteImportQnAUrl-1');
+    fireEvent.click(deletebutton);
+    fireEvent.click(createKnowledgeButton);
+    expect(onSubmit).toBeCalled();
+    expect(onSubmit).toBeCalledWith(['http://test']);
+  });
+});
diff --git a/Composer/packages/client/src/pages/knowledge-base/code-editor.tsx b/Composer/packages/client/src/pages/knowledge-base/code-editor.tsx
new file mode 100644
index 0000000000..685ab34573
--- /dev/null
+++ b/Composer/packages/client/src/pages/knowledge-base/code-editor.tsx
@@ -0,0 +1,89 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/* eslint-disable react/display-name */
+import React, { useState, useEffect, useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+import { EditorDidMount, defaultQnAPlaceholder } from '@bfc/code-editor';
+import isEmpty from 'lodash/isEmpty';
+import { RouteComponentProps } from '@reach/router';
+import querystring from 'query-string';
+import debounce from 'lodash/debounce';
+import get from 'lodash/get';
+import { CodeEditorSettings } from '@bfc/shared';
+import { QnAEditor } from '@bfc/code-editor';
+
+import { qnaFilesState, projectIdState } from '../../recoilModel/atoms/botState';
+import { dispatcherState } from '../../recoilModel';
+import { userSettingsState } from '../../recoilModel';
+interface CodeEditorProps extends RouteComponentProps<{}> {
+  dialogId: string;
+}
+
+const lspServerPath = '/lu-language-server';
+const CodeEditor: React.FC<CodeEditorProps> = (props) => {
+  const actions = useRecoilValue(dispatcherState);
+  const qnaFiles = useRecoilValue(qnaFilesState);
+  //To do: support other languages
+  const locale = 'en-us';
+  //const locale = useRecoilValue(localeState);
+  const projectId = useRecoilValue(projectIdState);
+  const userSettings = useRecoilValue(userSettingsState);
+  const { dialogId } = props;
+  const file = qnaFiles.find(({ id }) => id === `${dialogId}.${locale}`);
+  const hash = props.location?.hash ?? '';
+  const hashLine = querystring.parse(hash).L;
+  const line = Array.isArray(hashLine) ? +hashLine[0] : typeof hashLine === 'string' ? +hashLine : 0;
+  const [content, setContent] = useState(file?.content);
+  const currentDiagnostics = get(file, 'diagnostics', []);
+  const [qnaEditor, setQnAEditor] = useState<any>(null);
+  useEffect(() => {
+    if (qnaEditor) {
+      window.requestAnimationFrame(() => {
+        qnaEditor.revealLine(line);
+        qnaEditor.focus();
+        qnaEditor.setPosition({ lineNumber: line, column: 1 });
+      });
+    }
+  }, [line, qnaEditor]);
+
+  useEffect(() => {
+    // reset content with file.content initial state
+    if (!file || isEmpty(file) || content) return;
+    const value = file.content;
+    setContent(value);
+  }, [file, projectId]);
+
+  const editorDidMount: EditorDidMount = (_getValue, qnaEditor) => {
+    setQnAEditor(qnaEditor);
+  };
+
+  const handleSettingsChange = (settings: Partial<CodeEditorSettings>) => {
+    actions.updateUserSettings({ codeEditor: settings });
+  };
+
+  const onChangeContent = useMemo(
+    () =>
+      debounce((newContent: string) => {
+        actions.updateQnAFile({ id: `${dialogId}.${locale}`, content: newContent });
+      }, 500),
+    [projectId]
+  );
+
+  return (
+    <QnAEditor
+      diagnostics={currentDiagnostics}
+      editorDidMount={editorDidMount}
+      editorSettings={userSettings.codeEditor}
+      languageServer={{
+        path: lspServerPath,
+      }}
+      placeholder={defaultQnAPlaceholder}
+      value={content}
+      onChange={onChangeContent}
+      onChangeSettings={handleSettingsChange}
+    />
+  );
+};
+
+export default CodeEditor;
diff --git a/Composer/packages/client/src/pages/knowledge-base/styles.ts b/Composer/packages/client/src/pages/knowledge-base/styles.ts
new file mode 100644
index 0000000000..e85f004e35
--- /dev/null
+++ b/Composer/packages/client/src/pages/knowledge-base/styles.ts
@@ -0,0 +1,158 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { css } from '@emotion/core';
+import { FontWeights } from '@uifabric/styling';
+import { NeutralColors, SharedColors } from '@uifabric/fluent-theme';
+import { IIconStyles } from 'office-ui-fabric-react/lib/Icon';
+export const content = css`
+  min-height: 28px;
+  outline: none;
+`;
+
+export const contentAnswer = (showAll: boolean) => css`
+  text-overflow: ellipsis;
+  height: ${showAll ? 'auto' : '28px'};
+  outline: none;
+`;
+
+export const formCell = css`
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  :focus {
+    outline: rgb(102, 102, 102) solid 1px;
+  }
+  white-space: pre-wrap;
+  font-size: 14px;
+  line-height: 28px;
+`;
+
+export const inlineContainer = (isBold) => css`
+  font-weight: ${isBold ? FontWeights.semibold : 400};
+`;
+
+export const textFieldQuestion = {
+  root: {
+    height: 28,
+    marginLeft: -5,
+  },
+  field: {
+    paddingLeft: 4,
+    marginTop: -5,
+  },
+};
+
+export const textFieldAnswer = {
+  root: {
+    minHeight: 28,
+    marginLeft: -5,
+    marginTop: -1,
+  },
+  field: {
+    lineHeight: 28,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 4,
+  },
+};
+
+export const link = {
+  root: {
+    fontSize: 14,
+    lineHeight: 28,
+  },
+};
+
+export const addQnAPairLink = {
+  root: {
+    fontSize: 14,
+    lineHeight: 28,
+    marginLeft: 72,
+  },
+};
+
+export const actionButton = css`
+  font-size: 16px;
+  margin: 0;
+  margin-left: 15px;
+`;
+
+export const QnAIconStyle = {
+  root: {
+    padding: '8px',
+    boxSizing: 'border-box',
+    width: '40px',
+    height: '32px',
+  },
+} as IIconStyles;
+
+export const firstLine = css`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const divider = css`
+  height: 1px;
+  background: ${NeutralColors.gray30};
+`;
+
+export const rowDetails = {
+  root: {
+    minHeight: 76,
+    selectors: {
+      '&:hover': {
+        background: NeutralColors.gray30,
+      },
+      '&:hover .ms-Button--icon': {
+        visibility: 'visible',
+      },
+      '&.is-selected .ms-Button--icon': {
+        visibility: 'visible',
+      },
+      '&:hover .ms-Button': {
+        visibility: 'visible',
+      },
+      '&.is-selected .ms-Button': {
+        visibility: 'visible',
+      },
+    },
+  },
+};
+
+export const icon = {
+  root: {
+    color: NeutralColors.black,
+    visibility: 'hidden',
+  },
+};
+
+export const addButtonContainer = css`
+  z-index: 1;
+  background: ${NeutralColors.white};
+`;
+
+export const addAlternative = {
+  root: {
+    fontSize: 16,
+    paddingLeft: 0,
+    marginLeft: -5,
+    color: SharedColors.cyanBlue10,
+    visibility: 'hidden',
+  },
+};
+
+export const addQnAPair = {
+  root: {
+    fontSize: 16,
+    paddingLeft: 0,
+    marginLeft: 68,
+    color: SharedColors.cyanBlue10,
+  },
+};
+
+export const addIcon = {
+  root: {
+    fontSize: '16px',
+    color: SharedColors.cyanBlue10,
+  },
+};
diff --git a/Composer/packages/client/src/pages/knowledge-base/table-view.tsx b/Composer/packages/client/src/pages/knowledge-base/table-view.tsx
new file mode 100644
index 0000000000..1ec64c37be
--- /dev/null
+++ b/Composer/packages/client/src/pages/knowledge-base/table-view.tsx
@@ -0,0 +1,553 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useRecoilValue } from 'recoil';
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import {
+  DetailsList,
+  DetailsRow,
+  DetailsListLayoutMode,
+  SelectionMode,
+  CheckboxVisibility,
+} from 'office-ui-fabric-react/lib/DetailsList';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { IconButton, ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
+import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
+import formatMessage from 'format-message';
+import { RouteComponentProps } from '@reach/router';
+import get from 'lodash/get';
+
+import {
+  addQuestion,
+  updateQuestion,
+  updateAnswer as updateAnswerUtil,
+  generateQnAPair,
+  insertSection,
+  removeSection,
+} from '../../utils/qnaUtil';
+import { dialogsState, qnaFilesState, projectIdState } from '../../recoilModel/atoms/botState';
+import { dispatcherState } from '../../recoilModel';
+
+import {
+  formCell,
+  content,
+  textFieldQuestion,
+  textFieldAnswer,
+  contentAnswer,
+  addIcon,
+  divider,
+  rowDetails,
+  icon,
+  addButtonContainer,
+  addAlternative,
+  inlineContainer,
+  addQnAPair,
+} from './styles';
+
+interface TableViewProps extends RouteComponentProps<{}> {
+  dialogId: string;
+}
+
+enum EditMode {
+  None,
+  Creating,
+  Updating,
+}
+
+const TableView: React.FC<TableViewProps> = (props) => {
+  const actions = useRecoilValue(dispatcherState);
+  const dialogs = useRecoilValue(dialogsState);
+  const qnaFiles = useRecoilValue(qnaFilesState);
+  const projectId = useRecoilValue(projectIdState);
+  //To do: support other languages
+  const locale = 'en-us';
+  //const locale = useRecoilValue(localeState);
+  const { dialogId } = props;
+  const file = qnaFiles.find(({ id }) => id === `${dialogId}.${locale}`);
+  const fileRef = useRef(file);
+  fileRef.current = file;
+  const dialogIdRef = useRef(dialogId);
+  dialogIdRef.current = dialogId;
+  const localeRef = useRef(locale);
+  localeRef.current = locale;
+  const limitedNumber = useRef(1).current;
+  const generateQnASections = (file) => {
+    return get(file, 'qnaSections', []).map((qnaSection, index) => {
+      const qnaDialog = dialogs.find((dialog) => file.id === `${dialog.id}.${locale}`);
+      return {
+        fileId: file.fileId,
+        dialogId: qnaDialog?.id || '',
+        used: !!qnaDialog && qnaDialog,
+        indexId: index,
+        key: qnaSection.Body,
+        ...qnaSection,
+      };
+    });
+  };
+  const allQnASections = qnaFiles.reduce((result: any[], qnaFile) => {
+    const res = generateQnASections(qnaFile);
+    return result.concat(res);
+  }, []);
+
+  const singleFileQnASections = generateQnASections(fileRef.current);
+  const qnaSections = useMemo(() => {
+    if (dialogId === 'all') {
+      return allQnASections;
+    } else {
+      return singleFileQnASections;
+    }
+  }, [dialogIdRef.current, qnaFiles]);
+  const [showQnAPairDetails, setShowQnAPairDetails] = useState(Array(qnaSections.length).fill(false));
+  const [qnaSectionIndex, setQnASectionIndex] = useState(-1);
+  const [questionIndex, setQuestionIndex] = useState(-1); //used in QnASection.Questions array
+  const [question, setQuestion] = useState('');
+  const [editMode, setEditMode] = useState(EditMode.None);
+  const [isUpdatingAnswer, setIsUpdatingAnswer] = useState(false);
+  const [answer, setAnswer] = useState('');
+  const createOrUpdateQuestion = () => {
+    if (editMode === EditMode.Creating && question) {
+      const updatedQnAFileContent = addQuestion(question, qnaSections, qnaSectionIndex);
+      actions.updateQnAFile({ id: `${dialogIdRef.current}.${localeRef.current}`, content: updatedQnAFileContent });
+    }
+    if (editMode === EditMode.Updating && qnaSections[qnaSectionIndex].Questions[questionIndex].content !== question) {
+      const updatedQnAFileContent = updateQuestion(question, questionIndex, qnaSections, qnaSectionIndex);
+      actions.updateQnAFile({ id: `${dialogIdRef.current}.${localeRef.current}`, content: updatedQnAFileContent });
+    }
+    cancelQuestionEditOperation();
+  };
+
+  const updateAnswer = () => {
+    if (editMode === EditMode.Updating && qnaSections[qnaSectionIndex].Answer !== answer) {
+      const updatedQnAFileContent = updateAnswerUtil(answer, qnaSections, qnaSectionIndex);
+      actions.updateQnAFile({ id: `${dialogIdRef.current}.${localeRef.current}`, content: updatedQnAFileContent });
+    }
+    cancelAnswerEditOperation();
+  };
+
+  const cancelQuestionEditOperation = () => {
+    setEditMode(EditMode.None);
+    setQuestion('');
+    setQuestionIndex(-1);
+    setQnASectionIndex(-1);
+  };
+
+  const cancelAnswerEditOperation = () => {
+    setEditMode(EditMode.None);
+    setAnswer('');
+    setIsUpdatingAnswer(false);
+    setQnASectionIndex(-1);
+  };
+
+  useEffect(() => {
+    setShowQnAPairDetails(Array(qnaSections.length).fill(false));
+  }, [dialogId, projectId]);
+
+  const toggleShowAll = (index: number) => {
+    const newArray = showQnAPairDetails.map((element, i) => {
+      if (i === index) {
+        return !element;
+      } else {
+        return element;
+      }
+    });
+    setShowQnAPairDetails(newArray);
+  };
+
+  const expandDetails = (index: number) => {
+    const newArray = showQnAPairDetails.map((element, i) => {
+      if (i === index) {
+        return true;
+      } else {
+        return element;
+      }
+    });
+    setShowQnAPairDetails(newArray);
+  };
+
+  const handleQuestionKeydown = (e) => {
+    if (e.key === 'Enter') {
+      createOrUpdateQuestion();
+      setEditMode(EditMode.None);
+      e.preventDefault();
+    }
+    if (e.key === 'Escape') {
+      cancelQuestionEditOperation();
+      e.preventDefault();
+    }
+  };
+
+  const handleQuestionOnBlur = (e) => {
+    createOrUpdateQuestion();
+    e.preventDefault();
+  };
+
+  const handleAddingAlternatives = (e, index: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditMode(EditMode.Creating);
+    setQnASectionIndex(index);
+    setQuestionIndex(-1);
+    expandDetails(index);
+  };
+
+  const handleUpdateingAlternatives = (e, qnaSectionIndex: number, questionIndex: number, question: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditMode(EditMode.Updating);
+    setQuestion(question);
+    setQnASectionIndex(qnaSectionIndex);
+    setQuestionIndex(questionIndex);
+    expandDetails(qnaSectionIndex);
+  };
+
+  const handleQuestionOnChange = (newValue, index: number) => {
+    if (index !== qnaSectionIndex) return;
+    setQuestion(newValue);
+  };
+
+  const handleAnswerKeydown = (e) => {
+    if (e.key === 'Escape') {
+      setEditMode(EditMode.None);
+      setQnASectionIndex(-1);
+      setIsUpdatingAnswer(false);
+      e.preventDefault();
+    }
+  };
+
+  const handleAnswerOnBlur = (e) => {
+    updateAnswer();
+    setEditMode(EditMode.None);
+    setQnASectionIndex(-1);
+    setQuestionIndex(-1);
+    e.preventDefault();
+  };
+
+  const handleUpdateingAnswer = (e, qnaSectionIndex: number, answer: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditMode(EditMode.Updating);
+    setAnswer(answer);
+    setQnASectionIndex(qnaSectionIndex);
+    setIsUpdatingAnswer(true);
+    expandDetails(qnaSectionIndex);
+  };
+
+  const handleAnswerOnChange = (answer, index: number) => {
+    if (index !== qnaSectionIndex) return;
+    setAnswer(answer);
+  };
+
+  const deleteQnASection = (qnaSectionIndex: number) => {
+    actions.setMessage('item deleted');
+    if (fileRef && fileRef.current) {
+      const updatedQnAFileContent = removeSection(qnaSectionIndex, fileRef.current.content);
+      actions.updateQnAFile({
+        id: `${dialogIdRef.current}.${localeRef.current}`,
+        content: updatedQnAFileContent,
+      });
+    }
+    const newArray = [...showQnAPairDetails];
+    newArray.splice(qnaSectionIndex, 1);
+    setShowQnAPairDetails(newArray);
+  };
+
+  const isUpdatingIthQnASectionKthQuestion = (ithQnASection: number, kthQuestion: number, operationMode: EditMode) => {
+    return qnaSectionIndex === ithQnASection && questionIndex === kthQuestion && operationMode === EditMode.Updating;
+  };
+
+  const isCreatingNewQuestionOnIthQnASection = (ithQnASection: number, operationMode: EditMode) => {
+    return operationMode === EditMode.Creating && qnaSectionIndex === ithQnASection;
+  };
+
+  const isUpdateingIthQnASectionAnswer = (
+    ithQnASection: number,
+    isUpdatingAnswer: boolean,
+    operationMode: EditMode
+  ) => {
+    return qnaSectionIndex === ithQnASection && isUpdatingAnswer && operationMode === EditMode.Updating;
+  };
+
+  const getTableColums = () => {
+    const tableColums = [
+      {
+        key: 'ToggleShowAll',
+        name: '',
+        fieldName: 'Chevron',
+        minWidth: 40,
+        maxWidth: 40,
+        isResizable: true,
+        onRender: (item, qnaIndex) => {
+          return (
+            <IconButton
+              ariaLabel="ChevronDown"
+              iconProps={{ iconName: showQnAPairDetails[qnaIndex] ? 'ChevronDown' : 'ChevronRight' }}
+              styles={icon}
+              title="ChevronDown"
+              onClick={() => toggleShowAll(qnaIndex)}
+            />
+          );
+        },
+      },
+      {
+        key: 'Question',
+        name: formatMessage('Question'),
+        fieldName: 'question',
+        minWidth: 250,
+        maxWidth: 450,
+        isResizable: true,
+        data: 'string',
+        onRender: (item, qnaIndex) => {
+          const questions = get(item, 'Questions', []);
+          const showingQuestions = showQnAPairDetails[qnaIndex] ? questions : questions.slice(0, limitedNumber);
+          //This question content of this qna Section is '#?'
+          const isQuestionEmpty = showingQuestions.length === 1 && showingQuestions[0].content === '';
+          return (
+            <div data-is-focusable css={formCell}>
+              {showingQuestions.map((q, qIndex) => {
+                if (!isUpdatingIthQnASectionKthQuestion(qnaIndex, qIndex, editMode)) {
+                  return (
+                    <div
+                      key={q.id}
+                      css={content}
+                      role={'textbox'}
+                      tabIndex={0}
+                      onClick={(e) =>
+                        dialogId !== 'all' ? handleUpdateingAlternatives(e, qnaIndex, qIndex, q.content) : () => {}
+                      }
+                      onKeyDown={(e) => {
+                        e.preventDefault();
+                        if (e.key === 'Enter') {
+                          handleUpdateingAlternatives(e, qnaIndex, qIndex, q.content);
+                        }
+                      }}
+                    >
+                      {isQuestionEmpty && <div css={inlineContainer(true)}>{formatMessage('Enter a question')}</div>}
+                      {!isQuestionEmpty && (
+                        <div css={inlineContainer(qIndex === 0)}>
+                          {`${q.content} ${
+                            qIndex === 0 && !showQnAPairDetails[qnaIndex] ? `(${questions.length})` : ''
+                          }`}
+                        </div>
+                      )}
+                    </div>
+                  );
+                  //It is updating this qnaSection's qIndex-th Question
+                } else if (isUpdatingIthQnASectionKthQuestion(qnaIndex, qIndex, editMode)) {
+                  return (
+                    <TextField
+                      autoFocus
+                      styles={textFieldQuestion}
+                      value={question}
+                      onBlur={(e) => {
+                        handleQuestionOnBlur(e);
+                      }}
+                      onChange={(e, newValue) => {
+                        handleQuestionOnChange(newValue, qnaIndex);
+                      }}
+                      onKeyDown={(e) => handleQuestionKeydown(e)}
+                    />
+                  );
+                }
+              })}
+
+              {isCreatingNewQuestionOnIthQnASection(qnaIndex, editMode) && dialogId !== 'all' && (
+                <TextField
+                  autoFocus
+                  onBlur={(e) => {
+                    handleQuestionOnBlur(e);
+                  }}
+                  onChange={(e, newValue) => {
+                    e.preventDefault();
+                    handleQuestionOnChange(newValue, qnaIndex);
+                  }}
+                  onKeyDown={(e) => handleQuestionKeydown(e)}
+                />
+              )}
+              {!isCreatingNewQuestionOnIthQnASection(qnaIndex, editMode) && dialogId !== 'all' && (
+                <ActionButton
+                  iconProps={{ iconName: 'Add', styles: addIcon }}
+                  styles={addAlternative}
+                  onClick={(e) => handleAddingAlternatives(e, qnaIndex)}
+                >
+                  {formatMessage('add alternative phrasing')}
+                </ActionButton>
+              )}
+            </div>
+          );
+        },
+      },
+      {
+        key: 'Answer',
+        name: formatMessage('Answer'),
+        fieldName: 'answer',
+        minWidth: 250,
+        maxWidth: 450,
+        isResizable: true,
+        data: 'string',
+        onRender: (item, qnaIndex) => {
+          return (
+            <div data-is-focusable css={formCell}>
+              {!isUpdateingIthQnASectionAnswer(qnaIndex, isUpdatingAnswer, editMode) && (
+                <div
+                  aria-label={formatMessage(`Answer is {answer}`, { answer: item.Answer })}
+                  css={contentAnswer(showQnAPairDetails[qnaIndex])}
+                  role={'textbox'}
+                  tabIndex={0}
+                  onClick={(e) => (dialogId !== 'all' ? handleUpdateingAnswer(e, qnaIndex, item.Answer) : () => {})}
+                  onKeyDown={(e) => {
+                    e.preventDefault();
+                    if (e.key === 'Enter') {
+                      handleUpdateingAnswer(e, qnaIndex, item.Answer);
+                    }
+                  }}
+                >
+                  {item.Answer || formatMessage('Enter an answer')}
+                </div>
+              )}
+              {isUpdateingIthQnASectionAnswer(qnaIndex, isUpdatingAnswer, editMode) && (
+                <TextField
+                  autoFocus
+                  multiline
+                  autoAdjustHeight={showQnAPairDetails[qnaIndex]}
+                  resizable={false}
+                  styles={textFieldAnswer}
+                  value={answer}
+                  onBlur={(e) => {
+                    handleAnswerOnBlur(e);
+                  }}
+                  onChange={(e, newValue) => {
+                    handleAnswerOnChange(newValue, qnaIndex);
+                  }}
+                  onKeyDown={(e) => handleAnswerKeydown(e)}
+                />
+              )}
+            </div>
+          );
+        },
+      },
+    ];
+    if (dialogId !== 'all') {
+      const extraOperations = {
+        key: 'buttons',
+        name: '',
+        minWidth: 50,
+        maxWidth: 50,
+        isResizable: true,
+        fieldName: 'buttons',
+        data: 'string',
+        onRender: (item, qnaIndex) => {
+          return (
+            <IconButton
+              ariaLabel="Delete"
+              iconProps={{ iconName: 'Delete' }}
+              styles={icon}
+              title="Delete"
+              onClick={() => {
+                deleteQnASection(qnaIndex);
+              }}
+            />
+          );
+        },
+      };
+      tableColums.splice(3, 0, extraOperations);
+    }
+
+    // all view, show used in column
+    if (dialogIdRef.current === 'all') {
+      const beenUsedColumn = {
+        key: 'usedIn',
+        name: formatMessage('Used In'),
+        fieldName: 'usedIn',
+        minWidth: 100,
+        maxWidth: 100,
+        isResizable: true,
+        isCollapsable: true,
+        data: 'string',
+        onRender: (item) => {
+          return (
+            <div data-is-focusable css={formCell}>
+              <div aria-label={formatMessage(`id is {id}`, { id: item.dialogId })} css={content} tabIndex={-1}>
+                {item.dialogId}
+              </div>
+            </div>
+          );
+        },
+      };
+      tableColums.splice(3, 0, beenUsedColumn);
+    }
+    return tableColums;
+  };
+
+  const onRenderDetailsHeader = useCallback(
+    (props, defaultRender) => {
+      return (
+        <div data-testid="tableHeader">
+          <Sticky isScrollSynced stickyPosition={StickyPositionType.Header}>
+            {defaultRender({
+              ...props,
+              onRenderColumnHeaderTooltip: (tooltipHostProps) => <TooltipHost {...tooltipHostProps} />,
+            })}
+
+            {dialogIdRef.current !== 'all' && (
+              <div css={addButtonContainer}>
+                <ActionButton
+                  data-testid={'addQnAPairButton'}
+                  iconProps={{ iconName: 'Add' }}
+                  styles={addQnAPair}
+                  onClick={() => {
+                    onCreateNewTemplate();
+                    actions.setMessage('item added');
+                  }}
+                >
+                  {formatMessage('Add QnA Pair')}
+                </ActionButton>
+              </div>
+            )}
+            <div css={divider}> </div>
+          </Sticky>
+        </div>
+      );
+    },
+    [dialogIdRef, showQnAPairDetails]
+  );
+
+  const onRenderRow = (props) => {
+    if (props) {
+      return <DetailsRow {...props} styles={rowDetails} tabIndex={props.itemIndex} />;
+    }
+    return null;
+  };
+
+  const onCreateNewTemplate = () => {
+    const newQnAPair = generateQnAPair();
+    const content = get(fileRef.current, 'content', '');
+    const newContent = insertSection(0, content, newQnAPair);
+    actions.updateQnAFile({ id: `${dialogIdRef.current}.${localeRef.current}`, content: newContent });
+    const newArray = [false, ...showQnAPairDetails];
+    setShowQnAPairDetails(newArray);
+  };
+
+  const getKeyCallback = useCallback((item) => item.uuid, []);
+  return (
+    <div data-testid={'table-view'}>
+      <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
+        <DetailsList
+          checkboxVisibility={CheckboxVisibility.hidden}
+          columns={getTableColums()}
+          getKey={getKeyCallback}
+          items={qnaSections}
+          layoutMode={DetailsListLayoutMode.justified}
+          selectionMode={SelectionMode.single}
+          onRenderDetailsHeader={onRenderDetailsHeader}
+          onRenderRow={onRenderRow}
+        />
+      </ScrollablePane>
+    </div>
+  );
+};
+
+export default TableView;
diff --git a/Composer/packages/client/src/pages/notifications/Notifications.tsx b/Composer/packages/client/src/pages/notifications/Notifications.tsx
index d2997ffaaa..639adff70d 100644
--- a/Composer/packages/client/src/pages/notifications/Notifications.tsx
+++ b/Composer/packages/client/src/pages/notifications/Notifications.tsx
@@ -37,6 +37,11 @@ const Notifications: React.FC<RouteComponentProps> = () => {
       }
       navigateTo(uri);
     },
+    [NotificationType.QNA]: (item: INotification) => {
+      const { projectId, resourceId, diagnostic } = item;
+      const uri = `/bot/${projectId}/knowledge-base/${resourceId}/edit#L=${diagnostic.range?.start.line || 0}`;
+      navigateTo(uri);
+    },
     [NotificationType.DIALOG]: (item: INotification) => {
       //path is like main.trigers[0].actions[0]
       //uri = id?selected=triggers[0]&focused=triggers[0].actions[0]
diff --git a/Composer/packages/client/src/pages/notifications/types.ts b/Composer/packages/client/src/pages/notifications/types.ts
index 2c488d9ab8..088a4f0445 100644
--- a/Composer/packages/client/src/pages/notifications/types.ts
+++ b/Composer/packages/client/src/pages/notifications/types.ts
@@ -12,6 +12,7 @@ export enum NotificationType {
   DIALOG,
   LG,
   LU,
+  QNA,
   SKILL,
   SETTING,
   GENERAL,
@@ -142,3 +143,12 @@ export class LuNotification extends Notification {
       ?.referredLuIntents.find((lu) => lu.name === intentName)?.path;
   }
 }
+
+export class QnANotification extends Notification {
+  type = NotificationType.QNA;
+  constructor(projectId: string, id: string, location: string, diagnostic: Diagnostic) {
+    super(projectId, id, location, diagnostic);
+    this.dialogPath = '';
+    this.message = createSingleMessage(diagnostic);
+  }
+}
diff --git a/Composer/packages/client/src/pages/notifications/useNotifications.tsx b/Composer/packages/client/src/pages/notifications/useNotifications.tsx
index c49bafeae7..77d5383b26 100644
--- a/Composer/packages/client/src/pages/notifications/useNotifications.tsx
+++ b/Composer/packages/client/src/pages/notifications/useNotifications.tsx
@@ -3,10 +3,12 @@
 
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
+import get from 'lodash/get';
 import { BotIndexer } from '@bfc/indexers';
 
 import {
   luFilesState,
+  qnaFilesState,
   lgFilesState,
   projectIdState,
   BotDiagnosticsState,
@@ -22,13 +24,16 @@ import {
   SettingNotification,
   LuNotification,
   LgNotification,
+  QnANotification,
   ServerNotification,
   SkillNotification,
 } from './types';
-import { getReferredFiles } from './../../utils/luUtil';
+import { getReferredLuFiles } from './../../utils/luUtil';
+
 export default function useNotifications(filter?: string) {
   const dialogs = useRecoilValue(validatedDialogsSelector);
   const luFiles = useRecoilValue(luFilesState);
+  const qnaFiles = useRecoilValue(qnaFilesState);
   const projectId = useRecoilValue(projectIdState);
   const lgFiles = useRecoilValue(lgFilesState);
   const diagnostics = useRecoilValue(BotDiagnosticsState);
@@ -39,49 +44,56 @@ export default function useNotifications(filter?: string) {
     projectId,
     dialogs,
     luFiles,
+    qnaFiles,
     lgFiles,
     skillManifests,
     setting,
     dialogSchemas,
   };
   const memoized = useMemo(() => {
-    const notifactions: Notification[] = [];
+    const notifications: Notification[] = [];
     diagnostics.forEach((d) => {
-      notifactions.push(new ServerNotification(projectId, '', d.source, d));
+      notifications.push(new ServerNotification(projectId, '', d.source, d));
     });
     const skillDiagnostics = BotIndexer.checkSkillSetting(botAssets);
     skillDiagnostics.forEach((item) => {
       if (item.source.endsWith('.json')) {
-        notifactions.push(new SkillNotification(projectId, item.source, item.source, item));
+        notifications.push(new SkillNotification(projectId, item.source, item.source, item));
       } else {
-        notifactions.push(new DialogNotification(projectId, item.source, item.source, item));
+        notifications.push(new DialogNotification(projectId, item.source, item.source, item));
       }
     });
     const luisLocaleDiagnostics = BotIndexer.checkLUISLocales(botAssets);
 
     luisLocaleDiagnostics.forEach((item) => {
-      notifactions.push(new SettingNotification(projectId, item.source, item.source, item));
+      notifications.push(new SettingNotification(projectId, item.source, item.source, item));
     });
 
     dialogs.forEach((dialog) => {
       dialog.diagnostics.map((diagnostic) => {
         const location = `${dialog.id}.dialog`;
-        notifactions.push(new DialogNotification(projectId, dialog.id, location, diagnostic));
+        notifications.push(new DialogNotification(projectId, dialog.id, location, diagnostic));
       });
     });
-    getReferredFiles(luFiles, dialogs).forEach((lufile) => {
+    getReferredLuFiles(luFiles, dialogs).forEach((lufile) => {
       lufile.diagnostics.map((diagnostic) => {
         const location = `${lufile.id}.lu`;
-        notifactions.push(new LuNotification(projectId, lufile.id, location, diagnostic, lufile, dialogs));
+        notifications.push(new LuNotification(projectId, lufile.id, location, diagnostic, lufile, dialogs));
       });
     });
     lgFiles.forEach((lgFile) => {
       lgFile.diagnostics.map((diagnostic) => {
         const location = `${lgFile.id}.lg`;
-        notifactions.push(new LgNotification(projectId, lgFile.id, location, diagnostic, lgFile, dialogs));
+        notifications.push(new LgNotification(projectId, lgFile.id, location, diagnostic, lgFile, dialogs));
+      });
+    });
+    qnaFiles.forEach((qnaFile) => {
+      get(qnaFile, 'diagnostics', []).map((diagnostic) => {
+        const location = `${qnaFile.id}.qna`;
+        notifications.push(new QnANotification(projectId, qnaFile.id, location, diagnostic));
       });
     });
-    return notifactions;
+    return notifications;
   }, [botAssets, diagnostics]);
 
   const notifications: Notification[] = filter ? memoized.filter((x) => x.severity === filter) : memoized;
diff --git a/Composer/packages/client/src/pages/publish/Publish.tsx b/Composer/packages/client/src/pages/publish/Publish.tsx
index f0118526df..1bebfa04a3 100644
--- a/Composer/packages/client/src/pages/publish/Publish.tsx
+++ b/Composer/packages/client/src/pages/publish/Publish.tsx
@@ -49,6 +49,7 @@ const Publish: React.FC<PublishPageProps> = (props) => {
     getPublishHistory,
     setPublishTargets,
     publishToTarget,
+    setQnASettings,
     rollbackToVersion: rollbackToVersionDispatcher,
   } = useRecoilValue(dispatcherState);
 
@@ -318,6 +319,9 @@ const Publish: React.FC<PublishPageProps> = (props) => {
     () => async (comment) => {
       // publish to remote
       if (selectedTarget && settings.publishTargets) {
+        if (settings.qna && Object(settings.qna).subscriptionKey) {
+          await setQnASettings(projectId, Object(settings.qna).subscriptionKey);
+        }
         const sensitiveSettings = settingsStorage.get(projectId);
         await publishToTarget(projectId, selectedTarget, { comment: comment }, sensitiveSettings);
 
diff --git a/Composer/packages/client/src/plugins.ts b/Composer/packages/client/src/plugins.ts
index 26ea02352e..ef476549f0 100644
--- a/Composer/packages/client/src/plugins.ts
+++ b/Composer/packages/client/src/plugins.ts
@@ -13,12 +13,13 @@ import selectDialog from '@bfc/ui-plugin-select-dialog';
 import selectSkillDialog from '@bfc/ui-plugin-select-skill-dialog';
 import lg from '@bfc/ui-plugin-lg';
 import lu from '@bfc/ui-plugin-luis';
+import crossTrained from '@bfc/ui-plugin-cross-trained';
 
 const mergeArrays: MergeWithCustomizer = (objValue, srcValue, key) => {
   if (isArray(objValue)) {
     // merge recognizers into defaults
     if (key === 'recognizers') {
-      return objValue.concat(srcValue);
+      return srcValue.concat(objValue);
     }
 
     // otherwise override other arrays
@@ -36,4 +37,13 @@ export function mergePluginConfigs(...plugins: PluginConfig[]): Required<PluginC
   return mergeWith({}, defaultPlugin, ...plugins, mergeArrays);
 }
 
-export default mergePluginConfigs(composer, prompts, selectDialog, selectSkillDialog, lg, lu, schemaEditor);
+export default mergePluginConfigs(
+  composer,
+  prompts,
+  selectDialog,
+  selectSkillDialog,
+  lg,
+  lu,
+  crossTrained,
+  schemaEditor
+);
diff --git a/Composer/packages/client/src/recoilModel/DispatcherWrapper.tsx b/Composer/packages/client/src/recoilModel/DispatcherWrapper.tsx
index 7319b8ec2b..d99fb0ec5d 100644
--- a/Composer/packages/client/src/recoilModel/DispatcherWrapper.tsx
+++ b/Composer/packages/client/src/recoilModel/DispatcherWrapper.tsx
@@ -16,6 +16,7 @@ import {
   dialogSchemasState,
   projectIdState,
   luFilesState,
+  qnaFilesState,
   skillManifestsState,
   settingsState,
   lgFilesState,
@@ -27,6 +28,7 @@ const getBotAssets = async (snapshot: Snapshot): Promise<BotAssets> => {
     snapshot.getPromise(projectIdState),
     snapshot.getPromise(dialogsState),
     snapshot.getPromise(luFilesState),
+    snapshot.getPromise(qnaFilesState),
     snapshot.getPromise(lgFilesState),
     snapshot.getPromise(skillManifestsState),
     snapshot.getPromise(settingsState),
@@ -36,10 +38,11 @@ const getBotAssets = async (snapshot: Snapshot): Promise<BotAssets> => {
     projectId: result[0],
     dialogs: result[1],
     luFiles: result[2],
-    lgFiles: result[3],
-    skillManifests: result[4],
-    setting: result[5],
-    dialogSchemas: result[6],
+    qnaFiles: result[3],
+    lgFiles: result[4],
+    skillManifests: result[5],
+    setting: result[6],
+    dialogSchemas: result[7],
   };
 };
 
diff --git a/Composer/packages/client/src/recoilModel/atoms/botState.ts b/Composer/packages/client/src/recoilModel/atoms/botState.ts
index bc77242005..cd35d8c701 100644
--- a/Composer/packages/client/src/recoilModel/atoms/botState.ts
+++ b/Composer/packages/client/src/recoilModel/atoms/botState.ts
@@ -8,12 +8,13 @@ import {
   Diagnostic,
   LgFile,
   LuFile,
+  QnAFile,
   BotSchemas,
   Skill,
   DialogSetting,
 } from '@bfc/shared';
 
-import { BotLoadError, DesignPageLocation } from '../../recoilModel/types';
+import { BotLoadError, DesignPageLocation, QnAAllUpViewStatus } from '../../recoilModel/types';
 
 import { PublishType, BreadcrumbItem } from './../../recoilModel/types';
 import { BotStatus } from './../../constants';
@@ -82,6 +83,11 @@ export const luFilesState = atom<LuFile[]>({
   default: [],
 });
 
+export const qnaFilesState = atom<QnAFile[]>({
+  key: getFullyQualifiedKey('qnaFiles'),
+  default: [],
+});
+
 export const schemasState = atom<BotSchemas>({
   key: getFullyQualifiedKey('schemas'),
   default: {},
@@ -129,7 +135,7 @@ export const showAddSkillDialogModalState = atom<boolean>({
 
 export const settingsState = atom<DialogSetting>({
   key: getFullyQualifiedKey('settings'),
-  default: { defaultLanguage: 'en-us', languages: ['en-us'], luis: {} } as DialogSetting,
+  default: { defaultLanguage: 'en-us', languages: ['en-us'], luis: {}, qna: {} } as DialogSetting,
 });
 
 export const publishVersionsState = atom<any>({
@@ -204,6 +210,11 @@ export const onDelLanguageDialogCompleteState = atom<any>({
   default: { func: undefined },
 });
 
+export const qnaAllUpViewStatusState = atom<any>({
+  key: getFullyQualifiedKey('qnaAllUpViewStatusState'),
+  default: QnAAllUpViewStatus.Success,
+});
+
 export const isEjectRuntimeExistState = atom<boolean>({
   key: getFullyQualifiedKey('isEjectRuntimeExist'),
   default: false,
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/dialog.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/dialog.test.tsx
index 3f07a5deab..55afe574fa 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/dialog.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/dialog.test.tsx
@@ -16,6 +16,7 @@ import {
   onCreateDialogCompleteState,
   showCreateDialogModalState,
   dialogSchemasState,
+  qnaFilesState,
 } from '../../atoms';
 import { dispatcherState } from '../../../recoilModel/DispatcherWrapper';
 
@@ -79,6 +80,12 @@ jest.mock('../../parsers/lgWorker', () => {
   };
 });
 
+jest.mock('../../parsers/qnaWorker', () => {
+  return {
+    parse: (id, content) => ({ id, content }),
+  };
+});
+
 describe('dialog dispatcher', () => {
   let renderedComponent, dispatcher;
   beforeEach(() => {
@@ -91,7 +98,7 @@ describe('dialog dispatcher', () => {
       const actionsSeed = useRecoilValue(actionsSeedState);
       const onCreateDialogComplete = useRecoilValue(onCreateDialogCompleteState);
       const showCreateDialogModal = useRecoilValue(showCreateDialogModalState);
-
+      const qnaFiles = useRecoilValue(qnaFilesState);
       return {
         dialogs,
         dialogSchemas,
@@ -101,6 +108,7 @@ describe('dialog dispatcher', () => {
         actionsSeed,
         onCreateDialogComplete,
         showCreateDialogModal,
+        qnaFiles,
       };
     };
 
@@ -147,6 +155,7 @@ describe('dialog dispatcher', () => {
     });
     expect(renderedComponent.current.luFiles.find((dialog) => dialog.id === '100.en-us')).not.toBeNull();
     expect(renderedComponent.current.lgFiles.find((dialog) => dialog.id === '100.en-us')).not.toBeNull();
+    expect(renderedComponent.current.qnaFiles.find((dialog) => dialog.id === '100.en-us')).not.toBeNull();
     expect(renderedComponent.current.dialogs.find((dialog) => dialog.id === '100').content).toEqual('abcde');
   });
 
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/setting.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/setting.test.tsx
index 9c387a4090..f74adb9a0d 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/setting.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/setting.test.tsx
@@ -46,8 +46,9 @@ const settings = {
   publishTargets: [],
   qna: {
     knowledgebaseid: '',
-    endpointkey: '',
+    endpointKey: '',
     hostname: '',
+    qnaRegion: 'westus',
   },
   telemetry: {
     logPersonalInformation: false,
@@ -96,6 +97,7 @@ describe('setting dispatcher', () => {
         ...settings,
         MicrosoftAppPassword: 'test',
         luis: { ...settings.luis, authoringKey: 'test', endpointKey: 'test' },
+        qna: { ...settings.qna, subscriptionKey: 'test', endpointKey: 'test' },
       });
     });
 
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/builder.ts b/Composer/packages/client/src/recoilModel/dispatchers/builder.ts
new file mode 100644
index 0000000000..3a83dcd4b6
--- /dev/null
+++ b/Composer/packages/client/src/recoilModel/dispatchers/builder.ts
@@ -0,0 +1,72 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import { useRecoilCallback, CallbackInterface } from 'recoil';
+import { ILuisConfig, IQnAConfig } from '@bfc/shared';
+
+import * as luUtil from '../../utils/luUtil';
+import { Text, BotStatus } from '../../constants';
+import httpClient from '../../utils/httpUtil';
+import luFileStatusStorage from '../../utils/luFileStatusStorage';
+import qnaFileStatusStorage from '../../utils/qnaFileStatusStorage';
+import { luFilesState, qnaFilesState, dialogsState, botStatusState, botLoadErrorState } from '../atoms';
+
+const checkEmptyQuestionOrAnswerInQnAFile = (sections) => {
+  return sections.some((s) => !s.Answer || s.Questions.some((q) => !q.content));
+};
+
+export const builderDispatcher = () => {
+  const build = useRecoilCallback(
+    ({ set, snapshot }: CallbackInterface) => async (
+      luisConfig: ILuisConfig,
+      qnaConfig: IQnAConfig,
+      projectId: string
+    ) => {
+      const dialogs = await snapshot.getPromise(dialogsState);
+      const luFiles = await snapshot.getPromise(luFilesState);
+      const qnaFiles = await snapshot.getPromise(qnaFilesState);
+      const referredLuFiles = luUtil.checkLuisBuild(luFiles, dialogs);
+
+      const errorMsg = qnaFiles.reduce(
+        (result, file) => {
+          if (
+            file.qnaSections &&
+            file.qnaSections.length > 0 &&
+            checkEmptyQuestionOrAnswerInQnAFile(file.qnaSections)
+          ) {
+            result.message = result.message + `${file.id}.qna file contains empty answer or questions`;
+          }
+          return result;
+        },
+        { title: Text.LUISDEPLOYFAILURE, message: '' }
+      );
+      if (errorMsg.message) {
+        set(botLoadErrorState, errorMsg);
+        set(botStatusState, BotStatus.failed);
+        return;
+      }
+      try {
+        //TODO crosstrain should add locale
+        const crossTrainConfig = luUtil.createCrossTrainConfig(dialogs, referredLuFiles);
+        await httpClient.post(`/projects/${projectId}/build`, {
+          luisConfig,
+          qnaConfig,
+          projectId,
+          crossTrainConfig,
+          luFiles: referredLuFiles.map((file) => file.id),
+          qnaFiles: qnaFiles.map((file) => file.id),
+        });
+        luFileStatusStorage.publishAll(projectId);
+        qnaFileStatusStorage.publishAll(projectId);
+        set(botStatusState, BotStatus.published);
+      } catch (err) {
+        set(botStatusState, BotStatus.failed);
+        set(botLoadErrorState, { title: Text.LUISDEPLOYFAILURE, message: err.response?.data?.message || err.message });
+      }
+    }
+  );
+  return {
+    build,
+  };
+};
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/dialogs.ts b/Composer/packages/client/src/recoilModel/dispatchers/dialogs.ts
index 5cf61e49fa..9ffcb85273 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/dialogs.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/dialogs.ts
@@ -16,6 +16,7 @@ import {
 
 import { createLgFileState, removeLgFileState } from './lg';
 import { createLuFileState, removeLuFileState } from './lu';
+import { createQnAFileState, removeQnAFileState } from './qna';
 import { removeDialogSchema } from './dialogSchema';
 
 export const dialogsDispatcher = () => {
@@ -27,10 +28,15 @@ export const dialogsDispatcher = () => {
     //remove dialog should remove all locales lu and lg files and the dialog schema file
     await removeLgFileState(callbackHelpers, { id });
     await removeLuFileState(callbackHelpers, { id });
+    await removeQnAFileState(callbackHelpers, { id });
     await removeDialogSchema(callbackHelpers, id);
   });
 
   const updateDialog = useRecoilCallback(({ set }: CallbackInterface) => ({ id, content }) => {
+    // migration: add id for dialog
+    if (typeof content === 'object' && !content.id) {
+      content.id = id;
+    }
     set(dialogsState, (dialogs) => {
       return dialogs.map((dialog) => {
         if (dialog.id === id) {
@@ -64,8 +70,12 @@ export const dialogsDispatcher = () => {
     const luFiles = await snapshot.getPromise(luFilesState);
     const dialog = { isRoot: false, displayName: id, ...dialogIndexer.parse(id, fixedContent) };
     dialog.diagnostics = validateDialog(dialog, schemas.sdk.content, lgFiles, luFiles);
+    if (typeof dialog.content === 'object') {
+      dialog.content.id = id;
+    }
     await createLgFileState(callbackHelpers, { id, content: '' });
     await createLuFileState(callbackHelpers, { id, content: '' });
+    await createQnAFileState(callbackHelpers, { id, content: '' });
 
     set(dialogsState, (dialogs) => [...dialogs, dialog]);
     set(actionsSeedState, []);
@@ -76,6 +86,7 @@ export const dialogsDispatcher = () => {
     }
     set(onCreateDialogCompleteState, { func: undefined });
   });
+
   return {
     removeDialog,
     createDialog,
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/index.ts b/Composer/packages/client/src/recoilModel/dispatchers/index.ts
index ce2bcd180a..2b79a13807 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/index.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/index.ts
@@ -10,6 +10,8 @@ import { storageDispatcher } from './storage';
 import { exportDispatcher } from './export';
 import { lgDispatcher } from './lg';
 import { luDispatcher } from './lu';
+import { qnaDispatcher } from './qna';
+import { builderDispatcher } from './builder';
 import { navigationDispatcher } from './navigation';
 import { publisherDispatcher } from './publisher';
 import { settingsDispatcher } from './setting';
@@ -28,6 +30,8 @@ const createDispatchers = () => {
     ...exportDispatcher(),
     ...lgDispatcher(),
     ...luDispatcher(),
+    ...qnaDispatcher(),
+    ...builderDispatcher(),
     ...navigationDispatcher(),
     ...publisherDispatcher(),
     ...settingsDispatcher(),
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/lg.ts b/Composer/packages/client/src/recoilModel/dispatchers/lg.ts
index a791a57d23..cdf6dd3e19 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/lg.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/lg.ts
@@ -196,6 +196,17 @@ export const lgDispatcher = () => {
     }
   );
 
+  const createLgTemplates = useRecoilCallback(
+    ({ set }: CallbackInterface) => async ({ id, templates }: { id: string; templates: LgTemplate[] }) => {
+      set(lgFilesState, (lgFiles) => {
+        const lgFile = lgFiles.find((file) => file.id === id);
+        if (!lgFile) return lgFiles;
+        const updatedFile = lgUtil.addTemplates(lgFile, templates, lgFileResolver(lgFiles));
+        return updateLgFileState(lgFiles, updatedFile);
+      });
+    }
+  );
+
   const removeLgTemplate = useRecoilCallback(
     ({ set }: CallbackInterface) => ({ id, templateName }: { id: string; templateName: string }) => {
       set(lgFilesState, (lgFiles) => {
@@ -243,6 +254,7 @@ export const lgDispatcher = () => {
     removeLgFile,
     updateLgTemplate,
     createLgTemplate,
+    createLgTemplates,
     removeLgTemplate,
     removeLgTemplates,
     copyLgTemplate,
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/lu.ts b/Composer/packages/client/src/recoilModel/dispatchers/lu.ts
index 3184cd79e9..72d9f1f7b3 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/lu.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/lu.ts
@@ -9,20 +9,8 @@ import { luUtil } from '@bfc/indexers';
 
 import luWorker from '../parsers/luWorker';
 import { getBaseName, getExtension } from '../../utils/fileUtil';
-import { checkLuisPublish, createCrossTrainConfig } from '../../utils/luUtil';
 import luFileStatusStorage from '../../utils/luFileStatusStorage';
-import {
-  luFilesState,
-  botLoadErrorState,
-  projectIdState,
-  botStatusState,
-  dialogsState,
-  localeState,
-  settingsState,
-} from '../atoms/botState';
-
-import httpClient from './../../utils/httpUtil';
-import { Text, BotStatus } from './../../constants';
+import { luFilesState, projectIdState, localeState, settingsState } from '../atoms/botState';
 
 const intentIsNotEmpty = ({ Name, Body }) => {
   return !!Name && !!Body;
@@ -91,7 +79,7 @@ export const createLuFileState = async (
   const { languages } = await snapshot.getPromise(settingsState);
   const createdLuId = `${id}.${locale}`;
   const createdLuFile = (await luUtil.parse(id, content)) as LuFile;
-  if (luFiles.find((lg) => lg.id === createdLuId)) {
+  if (luFiles.find((lu) => lu.id === createdLuId)) {
     throw new Error('lu file already exist');
   }
   const changes: LuFile[] = [];
@@ -221,34 +209,10 @@ export const luDispatcher = () => {
     }
   );
 
-  const publishLuis = useRecoilCallback(
-    ({ set, snapshot }: CallbackInterface) => async (luisConfig, projectId: string) => {
-      const dialogs = await snapshot.getPromise(dialogsState);
-      try {
-        const luFiles = await snapshot.getPromise(luFilesState);
-        const referred = checkLuisPublish(luFiles, dialogs);
-        //TODO crosstrain should add locale
-        const crossTrainConfig = createCrossTrainConfig(dialogs, referred);
-        await httpClient.post(`/projects/${projectId}/luFiles/publish`, {
-          luisConfig,
-          projectId,
-          crossTrainConfig,
-          luFiles: referred.map((file) => file.id),
-        });
-        luFileStatusStorage.publishAll(projectId);
-        set(botStatusState, BotStatus.published);
-      } catch (err) {
-        set(botStatusState, BotStatus.failed);
-        set(botLoadErrorState, { title: Text.LUISDEPLOYFAILURE, message: err.response?.data?.message || err.message });
-      }
-    }
-  );
-
   return {
     updateLuFile,
     updateLuIntent,
     createLuIntent,
     removeLuIntent,
-    publishLuis,
   };
 };
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/project.ts b/Composer/packages/client/src/recoilModel/dispatchers/project.ts
index 28920d12a8..ebb3c574b6 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/project.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/project.ts
@@ -2,7 +2,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { useRecoilCallback, CallbackInterface } from 'recoil';
-import { dereferenceDefinitions, LuFile, DialogInfo, SensitiveProperties, DialogSetting } from '@bfc/shared';
+import { dereferenceDefinitions, LuFile, QnAFile, DialogInfo, SensitiveProperties, DialogSetting } from '@bfc/shared';
 import { indexer, validateDialog } from '@bfc/indexers';
 import objectGet from 'lodash/get';
 import objectSet from 'lodash/set';
@@ -11,16 +11,20 @@ import formatMessage from 'format-message';
 
 import lgWorker from '../parsers/lgWorker';
 import luWorker from '../parsers/luWorker';
+import qnaWorker from '../parsers/qnaWorker';
 import httpClient from '../../utils/httpUtil';
 import { BotStatus } from '../../constants';
-import { getReferredFiles } from '../../utils/luUtil';
+import { getReferredLuFiles } from '../../utils/luUtil';
 import luFileStatusStorage from '../../utils/luFileStatusStorage';
+import { getReferredQnaFiles } from '../../utils/qnaUtil';
+import qnaFileStatusStorage from '../../utils/qnaFileStatusStorage';
 import settingStorage from '../../utils/dialogSettingStorage';
 import filePersistence from '../persistence/FilePersistence';
 import { navigateTo } from '../../utils/navigation';
 import languageStorage from '../../utils/languageStorage';
 import { projectIdCache } from '../../utils/projectCache';
 import { designPageLocationState } from '../atoms/botState';
+import { QnABotTemplateId } from '../../constants';
 
 import {
   skillManifestsState,
@@ -28,6 +32,7 @@ import {
   settingsState,
   localeState,
   luFilesState,
+  qnaFilesState,
   skillsState,
   schemasState,
   lgFilesState,
@@ -55,7 +60,7 @@ const handleProjectFailure = (callbackHelpers: CallbackInterface, ex) => {
 };
 
 const checkProjectUpdates = async () => {
-  const workers = [filePersistence, lgWorker, luWorker];
+  const workers = [filePersistence, lgWorker, luWorker, qnaWorker];
 
   return Promise.all(workers.map((w) => w.flush()));
 };
@@ -106,13 +111,31 @@ const updateLuFilesStatus = (projectId: string, luFiles: LuFile[]) => {
 const initLuFilesStatus = (projectId: string, luFiles: LuFile[], dialogs: DialogInfo[]) => {
   luFileStatusStorage.checkFileStatus(
     projectId,
-    getReferredFiles(luFiles, dialogs).map((file) => file.id)
+    getReferredLuFiles(luFiles, dialogs).map((file) => file.id)
   );
   return updateLuFilesStatus(projectId, luFiles);
 };
 
+const updateQnaFilesStatus = (projectId: string, qnaFiles: QnAFile[]) => {
+  const status = qnaFileStatusStorage.get(projectId);
+  return qnaFiles.map((qnaFile) => {
+    if (typeof status[qnaFile.id] === 'boolean') {
+      return { ...qnaFile, published: status[qnaFile.id] };
+    } else {
+      return { ...qnaFile, published: false };
+    }
+  });
+};
+
+const initQnaFilesStatus = (projectId: string, qnaFiles: QnAFile[], dialogs: DialogInfo[]) => {
+  qnaFileStatusStorage.checkFileStatus(
+    projectId,
+    getReferredQnaFiles(qnaFiles, dialogs).map((file) => file.id)
+  );
+  return updateQnaFilesStatus(projectId, qnaFiles);
+};
 export const projectDispatcher = () => {
-  const initBotState = async (callbackHelpers: CallbackInterface, data: any, jumpToMain: boolean) => {
+  const initBotState = async (callbackHelpers: CallbackInterface, data: any, jump: boolean, templateId: string) => {
     const { snapshot, gotoSnapshot } = callbackHelpers;
     const curLocation = await snapshot.getPromise(locationState);
     const { files, botName, botEnvironment, location, schemas, settings, id: projectId, diagnostics, skills } = data;
@@ -131,7 +154,12 @@ export const projectDispatcher = () => {
     }
 
     try {
-      const { dialogs, dialogSchemas, luFiles, lgFiles, skillManifestFiles } = indexer.index(files, botName, locale);
+      const { dialogs, dialogSchemas, luFiles, lgFiles, qnaFiles, skillManifestFiles } = indexer.index(
+        files,
+        botName,
+        locale
+      );
+
       let mainDialog = '';
       const verifiedDialogs = dialogs.map((dialog) => {
         if (dialog.isRoot) {
@@ -145,6 +173,7 @@ export const projectDispatcher = () => {
       const newSnapshot = snapshot.map(({ set }) => {
         set(skillManifestsState, skillManifestFiles);
         set(luFilesState, initLuFilesStatus(botName, luFiles, dialogs));
+        set(qnaFilesState, initQnaFilesStatus(botName, qnaFiles, dialogs));
         set(lgFilesState, lgFiles);
         set(dialogsState, verifiedDialogs);
         set(dialogSchemasState, dialogSchemas);
@@ -165,9 +194,12 @@ export const projectDispatcher = () => {
         set(settingsState, mergedSettings);
       });
       gotoSnapshot(newSnapshot);
-      if (jumpToMain && projectId) {
-        const mainUrl = `/bot/${projectId}/dialogs/${mainDialog}`;
-        navigateTo(mainUrl);
+      if (jump && projectId) {
+        let url = `/bot/${projectId}/dialogs/${mainDialog}`;
+        if (templateId === QnABotTemplateId) {
+          url = `/bot/${projectId}/knowledge-base/${mainDialog}`;
+        }
+        navigateTo(url);
       }
     } catch (err) {
       callbackHelpers.set(botOpeningState, false);
@@ -201,7 +233,8 @@ export const projectDispatcher = () => {
       try {
         await setBotOpeningStatus(callbackHelpers);
         const response = await httpClient.put(`/projects/open`, { path, storageId });
-        await initBotState(callbackHelpers, response.data, true);
+        await initBotState(callbackHelpers, response.data, true, '');
+
         return response.data.id;
       } catch (ex) {
         removeRecentProject(callbackHelpers, path);
@@ -213,7 +246,7 @@ export const projectDispatcher = () => {
   const fetchProjectById = useRecoilCallback((callbackHelpers: CallbackInterface) => async (projectId: string) => {
     try {
       const response = await httpClient.get(`/projects/${projectId}`);
-      await initBotState(callbackHelpers, response.data, false);
+      await initBotState(callbackHelpers, response.data, false, '');
     } catch (ex) {
       handleProjectFailure(callbackHelpers, ex);
       navigateTo('/home');
@@ -242,7 +275,7 @@ export const projectDispatcher = () => {
         if (settingStorage.get(projectId)) {
           settingStorage.remove(projectId);
         }
-        await initBotState(callbackHelpers, response.data, true);
+        await initBotState(callbackHelpers, response.data, true, templateId);
         return projectId;
       } catch (ex) {
         handleProjectFailure(callbackHelpers, ex);
@@ -255,6 +288,7 @@ export const projectDispatcher = () => {
     try {
       await httpClient.delete(`/projects/${projectId}`);
       luFileStatusStorage.removeAllStatuses(projectId);
+      qnaFileStatusStorage.removeAllStatuses(projectId);
       settingStorage.remove(projectId);
       projectIdCache.clear();
       reset(projectIdState);
@@ -286,7 +320,7 @@ export const projectDispatcher = () => {
           description,
           location,
         });
-        await initBotState(callbackHelpers, response.data, true);
+        await initBotState(callbackHelpers, response.data, true, '');
         return response.data.id;
       } catch (ex) {
         handleProjectFailure(callbackHelpers, ex);
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/qna.ts b/Composer/packages/client/src/recoilModel/dispatchers/qna.ts
new file mode 100644
index 0000000000..62dc9bbfc5
--- /dev/null
+++ b/Composer/packages/client/src/recoilModel/dispatchers/qna.ts
@@ -0,0 +1,117 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable react-hooks/rules-of-hooks */
+import { QnAFile } from '@bfc/shared';
+import { useRecoilCallback, CallbackInterface } from 'recoil';
+
+import qnaWorker from '../parsers/qnaWorker';
+import { qnaFilesState, qnaAllUpViewStatusState, projectIdState, localeState, settingsState } from '../atoms/botState';
+import { QnAAllUpViewStatus } from '../types';
+import qnaFileStatusStorage from '../../utils/qnaFileStatusStorage';
+import { getBaseName } from '../../utils/fileUtil';
+
+import httpClient from './../../utils/httpUtil';
+import { setError } from './shared';
+
+export const updateQnAFileState = async (
+  callbackHelpers: CallbackInterface,
+  { id, content }: { id: string; content: string }
+) => {
+  const { set, snapshot } = callbackHelpers;
+  const qnaFiles = await snapshot.getPromise(qnaFilesState);
+  const updatedQnAFile = (await qnaWorker.parse(id, content)) as QnAFile;
+  const newQnAFiles = qnaFiles.map((file) => {
+    if (file.id === id) {
+      return updatedQnAFile;
+    }
+    return file;
+  });
+
+  set(qnaFilesState, newQnAFiles);
+};
+
+export const createQnAFileState = async (
+  callbackHelpers: CallbackInterface,
+  { id, content }: { id: string; content: string }
+) => {
+  const { set, snapshot } = callbackHelpers;
+  const qnaFiles = await snapshot.getPromise(qnaFilesState);
+  const projectId = await snapshot.getPromise(projectIdState);
+  const locale = await snapshot.getPromise(localeState);
+  const { languages } = await snapshot.getPromise(settingsState);
+  const createdQnaId = `${id}.${locale}`;
+  const createdQnaFile = (await qnaWorker.parse(id, content)) as QnAFile;
+  if (qnaFiles.find((qna) => qna.id === createdQnaId)) {
+    throw new Error('qna file already exist');
+  }
+  const changes: QnAFile[] = [];
+
+  // copy to other locales
+  languages.forEach((lang) => {
+    const fileId = `${id}.${lang}`;
+    qnaFileStatusStorage.updateFileStatus(projectId, fileId);
+    changes.push({
+      ...createdQnaFile,
+      id: fileId,
+    });
+  });
+
+  set(qnaFilesState, [...qnaFiles, ...changes]);
+};
+
+export const removeQnAFileState = async (callbackHelpers: CallbackInterface, { id }: { id: string }) => {
+  const { set, snapshot } = callbackHelpers;
+  let qnaFiles = await snapshot.getPromise(qnaFilesState);
+  const projectId = await snapshot.getPromise(projectIdState);
+
+  qnaFiles.forEach((file) => {
+    if (getBaseName(file.id) === getBaseName(id)) {
+      qnaFileStatusStorage.removeFileStatus(projectId, id);
+    }
+  });
+
+  qnaFiles = qnaFiles.filter((file) => getBaseName(file.id) !== id);
+  set(qnaFilesState, qnaFiles);
+};
+
+export const qnaDispatcher = () => {
+  const updateQnAFile = useRecoilCallback(
+    (callbackHelpers: CallbackInterface) => async ({ id, content }: { id: string; content: string }) => {
+      await updateQnAFileState(callbackHelpers, { id, content });
+    }
+  );
+
+  const createQnAFile = useRecoilCallback(
+    (callbackHelpers: CallbackInterface) => async ({ id, content }: { id: string; content: string }) => {
+      await createQnAFileState(callbackHelpers, { id, content });
+    }
+  );
+
+  const importQnAFromUrls = useRecoilCallback(
+    (callbackHelpers: CallbackInterface) => async ({ id, urls }: { id: string; urls: string[] }) => {
+      const { set, snapshot } = callbackHelpers;
+      const qnaFiles = await snapshot.getPromise(qnaFilesState);
+      const qnaFile = qnaFiles.find((f) => f.id === id);
+      set(qnaAllUpViewStatusState, QnAAllUpViewStatus.Loading);
+      try {
+        const response = await httpClient.get(`/utilities/qna/parse`, {
+          params: { urls: encodeURIComponent(urls.join(',')) },
+        });
+        const content = qnaFile ? qnaFile.content + '\n' + response.data : response.data;
+
+        await updateQnAFileState(callbackHelpers, { id, content });
+        set(qnaAllUpViewStatusState, QnAAllUpViewStatus.Success);
+      } catch (err) {
+        setError(callbackHelpers, err);
+      } finally {
+        set(qnaAllUpViewStatusState, QnAAllUpViewStatus.Success);
+      }
+    }
+  );
+
+  return {
+    createQnAFile,
+    updateQnAFile,
+    importQnAFromUrls,
+  };
+};
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/setting.ts b/Composer/packages/client/src/recoilModel/dispatchers/setting.ts
index 0dda82bdba..2ec099b01f 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/setting.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/setting.ts
@@ -10,6 +10,9 @@ import has from 'lodash/has';
 import settingStorage from '../../utils/dialogSettingStorage';
 import { settingsState } from '../atoms/botState';
 
+import httpClient from './../../utils/httpUtil';
+import { setError } from './shared';
+
 export const settingsDispatcher = () => {
   const setSettings = useRecoilCallback<[string, DialogSetting], Promise<void>>(
     ({ set }: CallbackInterface) => async (projectId: string, settings: DialogSetting) => {
@@ -64,11 +67,34 @@ export const settingsDispatcher = () => {
     setRuntimeField('', 'customRuntime', isOn);
   });
 
+  const setQnASettings = useRecoilCallback(
+    (callbackHelpers: CallbackInterface) => async (projectId: string, subscriptionKey: string) => {
+      const { set } = callbackHelpers;
+      try {
+        const response = await httpClient.post(`/projects/${projectId}/qnaSettings/set`, {
+          projectId,
+          subscriptionKey,
+        });
+        settingStorage.setField(projectId, 'qna.endpointKey', response.data);
+        set(settingsState, (currentValue) => ({
+          ...currentValue,
+          qna: {
+            ...currentValue.qna,
+            endpointKey: response.data,
+          },
+        }));
+      } catch (err) {
+        setError(callbackHelpers, err);
+      }
+    }
+  );
+
   return {
     setSettings,
     setRuntimeSettings,
     setPublishTargets,
     setRuntimeField,
     setCustomRuntime,
+    setQnASettings,
   };
 };
diff --git a/Composer/packages/client/src/recoilModel/parsers/qnaWorker.ts b/Composer/packages/client/src/recoilModel/parsers/qnaWorker.ts
new file mode 100644
index 0000000000..44bef644c0
--- /dev/null
+++ b/Composer/packages/client/src/recoilModel/parsers/qnaWorker.ts
@@ -0,0 +1,31 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import Worker from './workers/qnaParser.worker.ts';
+import { BaseWorker } from './baseWorker';
+import { QnAPayload, QnAActionType } from './types';
+
+// Wrapper class
+class QnAWorker extends BaseWorker<QnAActionType> {
+  parse(id: string, content: string) {
+    const payload = { id, content };
+    return this.sendMsg<QnAPayload>(QnAActionType.Parse, payload);
+  }
+
+  addSection(content: string, newContent: string) {
+    const payload = { content, newContent };
+    return this.sendMsg<QnAPayload>(QnAActionType.AddSection, payload);
+  }
+
+  updateSection(indexId: number, content: string, newContent: string) {
+    const payload = { indexId, content, newContent };
+    return this.sendMsg<QnAPayload>(QnAActionType.UpdateSection, payload);
+  }
+
+  removeSection(indexId: number, content: string) {
+    const payload = { content, indexId };
+    return this.sendMsg<QnAPayload>(QnAActionType.RemoveSection, payload);
+  }
+}
+
+export default new QnAWorker(new Worker());
diff --git a/Composer/packages/client/src/recoilModel/parsers/types.ts b/Composer/packages/client/src/recoilModel/parsers/types.ts
index a9bb927123..060bec5bcc 100644
--- a/Composer/packages/client/src/recoilModel/parsers/types.ts
+++ b/Composer/packages/client/src/recoilModel/parsers/types.ts
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { LuIntentSection, LgFile, FileInfo, LgTemplate } from '@bfc/shared';
+import { LuIntentSection, LgFile, QnASection, FileInfo, LgTemplate } from '@bfc/shared';
 
 export type LuPayload = {
   content: string;
@@ -59,6 +59,12 @@ export type IndexPayload = {
   locale: string;
 };
 
+export type QnAPayload = {
+  content: string;
+  id?: string;
+  section?: QnASection;
+};
+
 export enum LuActionType {
   Parse = 'parse',
   AddIntent = 'add-intent',
@@ -81,3 +87,10 @@ export enum LgActionType {
 export enum IndexerActionType {
   Index = 'index',
 }
+
+export enum QnAActionType {
+  Parse = 'parse',
+  AddSection = 'add-section',
+  UpdateSection = 'update-section',
+  RemoveSection = 'remove-section',
+}
diff --git a/Composer/packages/client/src/recoilModel/parsers/workers/qnaParser.worker.ts b/Composer/packages/client/src/recoilModel/parsers/workers/qnaParser.worker.ts
new file mode 100644
index 0000000000..1d265a3638
--- /dev/null
+++ b/Composer/packages/client/src/recoilModel/parsers/workers/qnaParser.worker.ts
@@ -0,0 +1,40 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { qnaIndexer } from '@bfc/indexers';
+import * as qnaUtil from '@bfc/indexers/lib/utils/qnaUtil';
+
+import { QnAActionType } from './../types';
+const ctx: Worker = self as any;
+
+const parse = (content: string, id: string) => {
+  return { id, content, ...qnaIndexer.parse(content, id) };
+};
+
+ctx.onmessage = function (msg) {
+  const { id: msgId, type, payload } = msg.data;
+  const { content, id, file, indexId } = payload;
+  let result: any = null;
+  try {
+    switch (type) {
+      case QnAActionType.Parse: {
+        result = parse(content, id);
+        break;
+      }
+      case QnAActionType.AddSection: {
+        result = qnaUtil.addSection(file.content, content);
+        break;
+      }
+      case QnAActionType.UpdateSection: {
+        result = qnaUtil.updateSection(indexId, file.content, content);
+        break;
+      }
+      case QnAActionType.RemoveSection: {
+        result = qnaUtil.removeSection(indexId, file.content);
+        break;
+      }
+    }
+    ctx.postMessage({ id: msgId, payload: result });
+  } catch (error) {
+    ctx.postMessage({ id: msgId, error });
+  }
+};
diff --git a/Composer/packages/client/src/recoilModel/persistence/FilePersistence.ts b/Composer/packages/client/src/recoilModel/persistence/FilePersistence.ts
index 077e717ae3..f9d871abc7 100644
--- a/Composer/packages/client/src/recoilModel/persistence/FilePersistence.ts
+++ b/Composer/packages/client/src/recoilModel/persistence/FilePersistence.ts
@@ -5,7 +5,7 @@ import differenceWith from 'lodash/differenceWith';
 import isEqual from 'lodash/isEqual';
 import { DialogInfo, DialogSchemaFile, DialogSetting, SkillManifest, BotAssets } from '@bfc/shared';
 
-import { LuFile, LgFile } from './../../../../lib/shared/src/types/indexers';
+import { LuFile, LgFile, QnAFile } from './../../../../lib/shared/src/types/indexers';
 import * as client from './http';
 import { IFileChange, ChangeType, FileExtensions } from './types';
 
@@ -187,6 +187,12 @@ class FilePersistence {
     return changes;
   }
 
+  private getQnAChanges(current: QnAFile[], previous: QnAFile[]) {
+    const changeItems = this.getDifferenceItems(current, previous);
+    const changes = this.getFileChanges(FileExtensions.QnA, changeItems);
+    return changes;
+  }
+
   private getLgChanges(current: LgFile[], previous: LgFile[]) {
     const changeItems = this.getDifferenceItems(current, previous);
     const changes = this.getFileChanges(FileExtensions.Lg, changeItems);
@@ -217,6 +223,7 @@ class FilePersistence {
     const dialogChanges = this.getDialogChanges(currentAssets.dialogs, previousAssets.dialogs);
     const dialogSchemaChanges = this.getDialogSchemaChanges(currentAssets.dialogSchemas, previousAssets.dialogSchemas);
     const luChanges = this.getLuChanges(currentAssets.luFiles, previousAssets.luFiles);
+    const qnaChanges = this.getQnAChanges(currentAssets.qnaFiles, previousAssets.qnaFiles);
     const lgChanges = this.getLgChanges(currentAssets.lgFiles, previousAssets.lgFiles);
     const skillManifestChanges = this.getSkillManifestsChanges(
       currentAssets.skillManifests,
@@ -227,6 +234,7 @@ class FilePersistence {
       ...dialogChanges,
       ...dialogSchemaChanges,
       ...luChanges,
+      ...qnaChanges,
       ...lgChanges,
       ...skillManifestChanges,
       ...settingChanges,
diff --git a/Composer/packages/client/src/recoilModel/persistence/types.ts b/Composer/packages/client/src/recoilModel/persistence/types.ts
index 935e1243a3..d1e344c4d0 100644
--- a/Composer/packages/client/src/recoilModel/persistence/types.ts
+++ b/Composer/packages/client/src/recoilModel/persistence/types.ts
@@ -13,6 +13,7 @@ export enum FileExtensions {
   Manifest = '.json',
   Lu = '.lu',
   Lg = '.lg',
+  QnA = '.qna',
   Setting = 'appsettings.json',
 }
 
diff --git a/Composer/packages/client/src/recoilModel/types.ts b/Composer/packages/client/src/recoilModel/types.ts
index c083fb8408..c9f8d189f8 100644
--- a/Composer/packages/client/src/recoilModel/types.ts
+++ b/Composer/packages/client/src/recoilModel/types.ts
@@ -106,3 +106,9 @@ export type BoilerplateVersion = {
   currentVersion?: string;
   updateRequired?: boolean;
 };
+
+export enum QnAAllUpViewStatus {
+  Loading,
+  Success,
+  Failed,
+}
diff --git a/Composer/packages/client/src/router.tsx b/Composer/packages/client/src/router.tsx
index 5618416f76..59973489d4 100644
--- a/Composer/packages/client/src/router.tsx
+++ b/Composer/packages/client/src/router.tsx
@@ -19,6 +19,7 @@ import { LoadingSpinner } from './components/LoadingSpinner';
 
 const DesignPage = React.lazy(() => import('./pages/design/DesignPage'));
 const LUPage = React.lazy(() => import('./pages/language-understanding/LUPage'));
+const QnAPage = React.lazy(() => import('./pages/knowledge-base/QnAPage'));
 const LGPage = React.lazy(() => import('./pages/language-generation/LGPage'));
 const SettingPage = React.lazy(() => import('./pages/setting/SettingsPage'));
 const Notifications = React.lazy(() => import('./pages/notifications/Notifications'));
@@ -42,12 +43,14 @@ const Routes = (props) => {
             from="/bot/:projectId/language-understanding"
             to="/bot/:projectId/language-understanding/all"
           />
+          <Redirect noThrow from="/bot/:projectId/knowledge-base" to="/bot/:projectId/knowledge-base/all" />
           <Redirect noThrow from="/bot/:projectId/publish" to="/bot/:projectId/publish/all" />
           <Redirect noThrow from="/" to={resolveToBasePath(BASEPATH, 'home')} />
           <ProjectRouter path="/bot/:projectId">
             <DesignPage path="dialogs/:dialogId/*" />
             <LUPage path="language-understanding/:dialogId/*" />
             <LGPage path="language-generation/:dialogId/*" />
+            <QnAPage path="knowledge-base/:dialogId/*" />
             <Notifications path="notifications" />
             <Publish path="publish/:targetName" />
             <Skills path="skills/*" />
diff --git a/Composer/packages/client/src/shell/qnaApi.ts b/Composer/packages/client/src/shell/qnaApi.ts
new file mode 100644
index 0000000000..c726a3febb
--- /dev/null
+++ b/Composer/packages/client/src/shell/qnaApi.ts
@@ -0,0 +1,46 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useEffect, useState } from 'react';
+import { QnAFile } from '@bfc/shared';
+import { useRecoilValue } from 'recoil';
+
+import { useResolvers } from '../hooks/useResolver';
+import { projectIdState } from '../recoilModel/atoms';
+
+import { dispatcherState } from './../recoilModel/DispatcherWrapper';
+
+function createQnaApi(state: { projectId }, dispatchers: any, qnaFileResolver: (id: string) => QnAFile | undefined) {
+  const updateQnaContentHandler = async (id, content) => {
+    const file = qnaFileResolver(id);
+    const projectId = state.projectId;
+    if (!file) throw new Error(`qna file ${id} not found`);
+
+    return await dispatchers.updateQnAFile({ id, projectId, content });
+  };
+  return {
+    updateQnaContent: updateQnaContentHandler,
+  };
+}
+
+export function useQnaApi() {
+  const projectId = useRecoilValue(projectIdState);
+  const dispatchers = useRecoilValue(dispatcherState);
+  const { qnaFileResolver } = useResolvers();
+  const [api, setApi] = useState(createQnaApi({ projectId }, dispatchers, qnaFileResolver));
+
+  useEffect(() => {
+    const newApi = createQnaApi({ projectId }, dispatchers, qnaFileResolver);
+    setApi(newApi);
+
+    return () => {
+      Object.keys(newApi).forEach((apiName) => {
+        if (typeof newApi[apiName].flush === 'function') {
+          newApi[apiName].flush();
+        }
+      });
+    };
+  }, [projectId]);
+
+  return api;
+}
diff --git a/Composer/packages/client/src/shell/triggerApi.ts b/Composer/packages/client/src/shell/triggerApi.ts
new file mode 100644
index 0000000000..237f6ee755
--- /dev/null
+++ b/Composer/packages/client/src/shell/triggerApi.ts
@@ -0,0 +1,140 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useEffect, useState } from 'react';
+import { LuFile, LgFile, DialogInfo, LgTemplateSamples } from '@bfc/shared';
+import { useRecoilValue } from 'recoil';
+import { LgTemplate } from '@bfc/shared';
+import get from 'lodash/get';
+
+import { useResolvers } from '../hooks/useResolver';
+import { projectIdState, schemasState, dialogsState, localeState, lgFilesState } from '../recoilModel/atoms';
+import { onChooseIntentKey, generateNewDialog, intentTypeKey, qnaMatcherKey } from '../utils/dialogUtil';
+import { navigateTo } from '../utils/navigation';
+
+import { dispatcherState } from './../recoilModel/DispatcherWrapper';
+
+function createTriggerApi(
+  state: { projectId; schemas; dialogs; locale; lgFiles },
+  dispatchers: any, //TODO
+  luFileResolver: (id: string) => LuFile | undefined,
+  lgFileResolver: (id: string) => LgFile | undefined,
+  dialogResolver: (id: string) => DialogInfo | undefined
+) {
+  const getDesignerIdFromDialogPath = (dialog, path) => {
+    const value = get(dialog, path, '');
+    const startIndex = value.lastIndexOf('_');
+    const endIndex = value.indexOf('()');
+    return value.substring(startIndex + 1, endIndex);
+  };
+
+  const createTriggerHandler = async (id, formData, url) => {
+    const luFile = luFileResolver(id);
+    const lgFile = lgFileResolver(id);
+    const dialog = dialogResolver(id);
+    const { createLuIntent, createLgTemplates, updateDialog, selectTo } = dispatchers;
+    const { projectId, schemas, dialogs, locale, lgFiles } = state;
+    if (!luFile) throw new Error(`lu file ${id} not found`);
+    if (!lgFile) throw new Error(`lg file ${id} not found`);
+    if (!dialog) throw new Error(`dialog ${id} not found`);
+    const newDialog = generateNewDialog(dialogs, dialog.id, formData, schemas.sdk?.content);
+    const index = get(newDialog, 'content.triggers', []).length - 1;
+    if (formData.$kind === intentTypeKey && formData.triggerPhrases) {
+      const intent = { Name: formData.intent, Body: formData.triggerPhrases };
+      luFile && createLuIntent({ id: luFile.id, intent, projectId });
+    } else if (formData.$kind === qnaMatcherKey) {
+      const designerId1 = getDesignerIdFromDialogPath(
+        newDialog,
+        `content.triggers[${index}].actions[0].actions[1].prompt`
+      );
+      const designerId2 = getDesignerIdFromDialogPath(
+        newDialog,
+        `content.triggers[${index}].actions[0].elseActions[0].activity`
+      );
+      const lgTemplates: LgTemplate[] = [
+        LgTemplateSamples.TextInputPromptForQnAMatcher(designerId1) as LgTemplate,
+        LgTemplateSamples.SendActivityForQnAMatcher(designerId2) as LgTemplate,
+      ];
+      await createLgTemplates({ id: lgFile.id, templates: lgTemplates });
+    } else if (formData.$kind === onChooseIntentKey) {
+      const designerId1 = getDesignerIdFromDialogPath(newDialog, `content.triggers[${index}].actions[4].prompt`);
+      const designerId2 = getDesignerIdFromDialogPath(
+        newDialog,
+        `content.triggers[${index}].actions[5].elseActions[0].activity`
+      );
+      const lgTemplates1: LgTemplate[] = [
+        LgTemplateSamples.TextInputPromptForOnChooseIntent(designerId1) as LgTemplate,
+        LgTemplateSamples.SendActivityForOnChooseIntent(designerId2) as LgTemplate,
+      ];
+
+      let lgTemplates2: LgTemplate[] = [
+        LgTemplateSamples.adaptiveCardJson as LgTemplate,
+        LgTemplateSamples.whichOneDidYouMean as LgTemplate,
+        LgTemplateSamples.pickOne as LgTemplate,
+        LgTemplateSamples.getAnswerReadBack as LgTemplate,
+        LgTemplateSamples.getIntentReadBack as LgTemplate,
+      ];
+      const commonlgFile = lgFiles.find(({ id }) => id === `common.${locale}`);
+
+      lgTemplates2 = lgTemplates2.filter(
+        (t) => commonlgFile?.templates.findIndex((clft) => clft.name === t.name) === -1
+      );
+
+      await createLgTemplates({ id: `common.${locale}`, templates: lgTemplates2 });
+      await createLgTemplates({ id: lgFile.id, templates: lgTemplates1 });
+    }
+    const dialogPayload = {
+      id: newDialog.id,
+      projectId,
+      content: newDialog.content,
+    };
+    await updateDialog(dialogPayload);
+    if (url) {
+      navigateTo(url);
+    } else {
+      selectTo(`triggers[${index}]`);
+    }
+  };
+  return {
+    createTrigger: createTriggerHandler,
+  };
+}
+
+export function useTriggerApi() {
+  const projectId = useRecoilValue(projectIdState);
+  const schemas = useRecoilValue(schemasState);
+  const dialogs = useRecoilValue(dialogsState);
+  const locale = useRecoilValue(localeState);
+  const lgFiles = useRecoilValue(lgFilesState);
+  const dispatchers = useRecoilValue(dispatcherState);
+  const { luFileResolver, lgFileResolver, dialogResolver } = useResolvers();
+  const [api, setApi] = useState(
+    createTriggerApi(
+      { projectId, schemas, dialogs, locale, lgFiles },
+      dispatchers,
+      luFileResolver,
+      lgFileResolver,
+      dialogResolver
+    )
+  );
+
+  useEffect(() => {
+    const newApi = createTriggerApi(
+      { projectId, schemas, dialogs, locale, lgFiles },
+      dispatchers,
+      luFileResolver,
+      lgFileResolver,
+      dialogResolver
+    );
+    setApi(newApi);
+    return () => {
+      Object.keys(newApi).forEach((apiName) => {
+        if (typeof newApi[apiName].flush === 'function') {
+          newApi[apiName].flush();
+        }
+      });
+    };
+  }, [projectId, schemas, dialogs, locale, lgFiles]);
+
+  return api;
+}
diff --git a/Composer/packages/client/src/shell/useShell.ts b/Composer/packages/client/src/shell/useShell.ts
index 35473df081..2a1ffbaaaf 100644
--- a/Composer/packages/client/src/shell/useShell.ts
+++ b/Composer/packages/client/src/shell/useShell.ts
@@ -20,6 +20,7 @@ import {
   projectIdState,
   localeState,
   luFilesState,
+  qnaFilesState,
   dispatcherState,
   breadcrumbState,
   designPageLocationState,
@@ -31,6 +32,8 @@ import { validatedDialogsSelector } from '../recoilModel/selectors/validatedDial
 
 import { useLgApi } from './lgApi';
 import { useLuApi } from './luApi';
+import { useQnaApi } from './qnaApi';
+import { useTriggerApi } from './triggerApi';
 
 const FORM_EDITOR = 'PropertyEditor';
 
@@ -42,6 +45,7 @@ export function useShell(source: EventSource): Shell {
   const dialogs = useRecoilValue(validatedDialogsSelector);
   const dialogSchemas = useRecoilValue(dialogSchemasState);
   const luFiles = useRecoilValue(luFilesState);
+  const qnaFiles = useRecoilValue(qnaFilesState);
   const projectId = useRecoilValue(projectIdState);
   const locale = useRecoilValue(localeState);
   const lgFiles = useRecoilValue(lgFilesState);
@@ -70,7 +74,8 @@ export function useShell(source: EventSource): Shell {
   } = useRecoilValue(dispatcherState);
   const lgApi = useLgApi();
   const luApi = useLuApi();
-
+  const qnaApi = useQnaApi();
+  const triggerApi = useTriggerApi();
   const { dialogId, selected, focused, promptTab } = designPageLocation;
 
   const dialogsMap = useMemo(() => {
@@ -166,6 +171,8 @@ export function useShell(source: EventSource): Shell {
     },
     ...lgApi,
     ...luApi,
+    ...qnaApi,
+    ...triggerApi,
     updateRegExIntent: updateRegExIntentHandler,
     renameRegExIntent: renameRegExIntentHandler,
     updateIntentTrigger: updateIntentTriggerHandler,
@@ -218,6 +225,7 @@ export function useShell(source: EventSource): Shell {
         schemas,
         lgFiles,
         luFiles,
+        qnaFiles,
         currentDialog,
         userSettings,
         designerId: editorData?.$designer?.id,
diff --git a/Composer/packages/client/src/utils/dialogUtil.ts b/Composer/packages/client/src/utils/dialogUtil.ts
index d8697263de..1ef458f90e 100644
--- a/Composer/packages/client/src/utils/dialogUtil.ts
+++ b/Composer/packages/client/src/utils/dialogUtil.ts
@@ -49,9 +49,13 @@ export function getDialog(dialogs: DialogInfo[], dialogId: string) {
 
 export const eventTypeKey: string = SDKKinds.OnDialogEvent;
 export const intentTypeKey: string = SDKKinds.OnIntent;
+export const qnaTypeKey: string = SDKKinds.OnQnAMatch;
 export const activityTypeKey: string = SDKKinds.OnActivity;
 export const regexRecognizerKey: string = SDKKinds.RegexRecognizer;
+export const crossTrainedRecognizerSetKey: string = SDKKinds.CrossTrainedRecognizerSet;
 export const customEventKey = 'OnCustomEvent';
+export const qnaMatcherKey: string = SDKKinds.OnQnAMatch;
+export const onChooseIntentKey: string = SDKKinds.OnChooseIntent;
 
 function insert(content, path: string, position: number | undefined, data: any) {
   const current = get(content, path, []);
@@ -75,7 +79,6 @@ function generateNewTrigger(data: TriggerFormData, factory: DialogFactory) {
     optionalAttributes.intent = data.intent;
     optionalAttributes.$designer.name = data.intent;
   }
-
   const newStep = factory.create(data.$kind as SDKKinds, optionalAttributes);
   return newStep;
 }
diff --git a/Composer/packages/client/src/utils/dialogValidator.ts b/Composer/packages/client/src/utils/dialogValidator.ts
new file mode 100644
index 0000000000..fe7e850374
--- /dev/null
+++ b/Composer/packages/client/src/utils/dialogValidator.ts
@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import get from 'lodash/get';
+import { DialogInfo, ITrigger } from '@bfc/shared';
+
+import { regexRecognizerKey, onChooseIntentKey, qnaMatcherKey } from '../utils/dialogUtil';
+import { triggerNotSupportedWarning } from '../constants';
+
+export const isRegExRecognizerType = (dialog: DialogInfo | undefined) => {
+  if (!dialog) return false;
+  return get(dialog, 'content.recognizer.$kind', '') === regexRecognizerKey;
+};
+
+export const isLUISnQnARecognizerType = (dialog: DialogInfo | undefined) => {
+  if (!dialog) return false;
+  const recognizer = get(dialog, 'content.recognizer', '');
+  return typeof recognizer === 'string' && recognizer.endsWith('.lu.qna');
+};
+
+export const containUnsupportedTriggers = (dialog: DialogInfo | undefined) => {
+  if (!dialog) return '';
+
+  if (
+    isRegExRecognizerType(dialog) &&
+    dialog.triggers.some((t) => t.type === qnaMatcherKey || t.type === onChooseIntentKey)
+  ) {
+    return triggerNotSupportedWarning;
+  }
+  return '';
+};
+
+export const triggerNotSupported = (dialog: DialogInfo | undefined, trigger: ITrigger | undefined) => {
+  if (!dialog || !trigger) return '';
+  if (isRegExRecognizerType(dialog) && (trigger.type === qnaMatcherKey || trigger.type === onChooseIntentKey)) {
+    return triggerNotSupportedWarning;
+  }
+  return '';
+};
diff --git a/Composer/packages/client/src/utils/luUtil.ts b/Composer/packages/client/src/utils/luUtil.ts
index 52b91a231b..fe5d61ba83 100644
--- a/Composer/packages/client/src/utils/luUtil.ts
+++ b/Composer/packages/client/src/utils/luUtil.ts
@@ -15,10 +15,11 @@ import { getBaseName, getExtension } from './fileUtil';
 
 export * from '@bfc/indexers/lib/utils/luUtil';
 
-export function getReferredFiles(luFiles: LuFile[], dialogs: DialogInfo[]) {
+export function getReferredLuFiles(luFiles: LuFile[], dialogs: DialogInfo[], checkContent = true) {
   return luFiles.filter((file) => {
     const idWithOutLocale = getBaseName(file.id);
-    return dialogs.some((dialog) => dialog.luFile === idWithOutLocale);
+    const contentNotEmpty = (checkContent && !!file.content) || !checkContent;
+    return dialogs.some((dialog) => dialog.luFile === idWithOutLocale && contentNotEmpty);
   });
 }
 
@@ -107,27 +108,32 @@ export function createCrossTrainConfig(dialogs: DialogInfo[], luFiles: LuFile[])
   let rootId = '';
   dialogs.forEach((dialog) => {
     if (dialog.isRoot) rootId = dialog.id;
+    const luFile = luFiles.find((luFile) => getBaseName(luFile.id) === dialog.luFile);
+    if (luFile) {
+      const fileId = dialog.id;
+      const { intentTriggers } = dialog;
+      // filter intenttrigger which be involved in lu file
+      //find the trigger's dialog that use a recognizer
+      intentTriggers
+        .filter((intentTrigger) => luFile.intents.find((intent) => intent.Name === intentTrigger.intent))
+        .forEach((item) => {
+          //find all dialogs in trigger that has a luis recognizer
+          const used = item.dialogs.filter((dialog) => !!countMap[dialog]);
+
+          const deduped = Array.from(new Set<string>(used));
+
+          const result = {};
+          if (deduped.length === 1) {
+            result[item.intent] = deduped[0];
+          } else if (deduped.length) {
+            result[item.intent] = deduped;
+          } else {
+            result[item.intent] = '';
+          }
 
-    const { intentTriggers } = dialog;
-    const fileId = dialog.id;
-    //find the trigger's dialog that use a recognizer
-    intentTriggers.forEach((item) => {
-      //find all dialogs in trigger that has a luis recognizer
-      const used = item.dialogs.filter((dialog) => !!countMap[dialog]);
-
-      const deduped = Array.from(new Set<string>(used));
-
-      const result = {};
-      if (deduped.length === 1) {
-        result[item.intent] = deduped[0];
-      } else if (deduped.length) {
-        result[item.intent] = deduped;
-      } else {
-        result[item.intent] = '';
-      }
-
-      triggerRules[fileId] = { ...triggerRules[fileId], ...result };
-    });
+          triggerRules[fileId] = { ...triggerRules[fileId], ...result };
+        });
+    }
   });
 
   const crossTrainConfig: ICrossTrainConfig = {
@@ -154,8 +160,8 @@ function generateErrorMessage(invalidLuFile: LuFile[]) {
   }, '');
 }
 
-export function checkLuisPublish(luFiles: LuFile[], dialogs: DialogInfo[]) {
-  const referred = getReferredFiles(luFiles, dialogs);
+export function checkLuisBuild(luFiles: LuFile[], dialogs: DialogInfo[]) {
+  const referred = getReferredLuFiles(luFiles, dialogs, false);
   const invalidLuFile = referred.filter(
     (file) => file.diagnostics.filter((n) => n.severity === DiagnosticSeverity.Error).length !== 0
   );
@@ -163,11 +169,6 @@ export function checkLuisPublish(luFiles: LuFile[], dialogs: DialogInfo[]) {
     const msg = generateErrorMessage(invalidLuFile);
     throw new Error(formatMessage(`The Following LuFile(s) are invalid: \n`) + msg);
   }
-  const emptyLuFiles = referred.filter((file) => file.empty);
-  if (emptyLuFiles.length !== 0) {
-    const msg = emptyLuFiles.map((file) => file.id).join(' ');
-    throw new Error(formatMessage(`You have the following empty LuFile(s): `) + msg);
-  }
   // supported LUIS locale.
   const supported = BotIndexer.filterLUISFilesToPublish(referred);
   return supported;
diff --git a/Composer/packages/client/src/utils/pageLinks.ts b/Composer/packages/client/src/utils/pageLinks.ts
index 742231b615..b71c27e821 100644
--- a/Composer/packages/client/src/utils/pageLinks.ts
+++ b/Composer/packages/client/src/utils/pageLinks.ts
@@ -33,6 +33,13 @@ export const topLinks = (projectId: string, openedDialogId: string) => {
       exact: false,
       disabled: !botLoaded,
     },
+    {
+      to: `/bot/${projectId}/knowledge-base`,
+      iconName: 'QnAIcon',
+      labelName: formatMessage('QnA'),
+      exact: true,
+      disabled: !botLoaded,
+    },
     {
       to: `/bot/${projectId}/notifications`,
       iconName: 'Warning',
diff --git a/Composer/packages/client/src/utils/qnaFileStatusStorage.ts b/Composer/packages/client/src/utils/qnaFileStatusStorage.ts
new file mode 100644
index 0000000000..708f94e895
--- /dev/null
+++ b/Composer/packages/client/src/utils/qnaFileStatusStorage.ts
@@ -0,0 +1,66 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import keys from 'lodash/keys';
+
+import storage, { ClientStorage } from './storage';
+
+const KEY = 'QnaFileStatus';
+
+interface IQnaFileStatus {
+  [fileId: string]: boolean;
+}
+
+// add qna publish status to local storage
+class QnaFileStatusStorage {
+  private storage: ClientStorage;
+  private _all: { [projectId: string]: IQnaFileStatus };
+
+  constructor() {
+    this.storage = storage;
+    this._all = this.storage.get(KEY, {});
+  }
+
+  public get(projectId: string) {
+    return this._all[projectId] || {};
+  }
+
+  public updateFileStatus(projectId: string, fileId: string, value = false) {
+    if (!projectId) return;
+    if (!this._all[projectId]) {
+      this._all[projectId] = {};
+    }
+    if (this._all[projectId][fileId] !== value) {
+      this._all[projectId][fileId] = value;
+      this.storage.set(KEY, this._all);
+    }
+  }
+
+  public removeFileStatus(projectId: string, fileId: string) {
+    if (!projectId) return;
+    if (typeof this._all[projectId][fileId] !== 'undefined') {
+      delete this._all[projectId][fileId];
+      this.storage.set(KEY, this._all);
+    }
+  }
+
+  public checkFileStatus(projectId: string, fileIds: string[]) {
+    fileIds.forEach((id) => this.updateFileStatus(projectId, id, false));
+  }
+
+  public publishAll(projectId: string) {
+    if (!projectId) return;
+    keys(this._all[projectId]).forEach((key) => {
+      this._all[projectId][key] = true;
+    });
+    this.storage.set(KEY, this._all);
+  }
+
+  public removeAllStatuses(projectId: string) {
+    if (this._all[projectId]) {
+      delete this._all[projectId];
+      this.storage.set(KEY, this._all);
+    }
+  }
+}
+
+export default new QnaFileStatusStorage();
diff --git a/Composer/packages/client/src/utils/qnaUtil.ts b/Composer/packages/client/src/utils/qnaUtil.ts
new file mode 100644
index 0000000000..32144f4e07
--- /dev/null
+++ b/Composer/packages/client/src/utils/qnaUtil.ts
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/**
+ * luUtil.ts is a single place use lu-parser handle lu file operation.
+ * it's designed have no state, input text file, output text file.
+ * for more usage detail, please check client/__tests__/utils/luUtil.test.ts
+ */
+import { QnAFile, DialogInfo } from '@bfc/shared';
+
+import { getBaseName, getExtension } from './fileUtil';
+export * from '@bfc/indexers/lib/utils/qnaUtil';
+
+export function getFileLocale(fileName: string) {
+  //file name = 'a.en-us.qna'
+  return getExtension(getBaseName(fileName));
+}
+export function getReferredQnaFiles(qnaFiles: QnAFile[], dialogs: DialogInfo[]) {
+  return qnaFiles.filter((file) => {
+    const idWithOutLocale = getBaseName(file.id);
+    return dialogs.some((dialog) => dialog.qnaFile === idWithOutLocale && !!file.content);
+  });
+}
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/IntentField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/IntentField.tsx
index 7002c779cf..fa700b0d72 100644
--- a/Composer/packages/extensions/adaptive-form/src/components/fields/IntentField.tsx
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/IntentField.tsx
@@ -2,8 +2,9 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { FieldProps, useShellApi, useRecognizerConfig } from '@bfc/extension';
+import { FieldProps, useShellApi, useRecognizerConfig, FieldWidget } from '@bfc/extension';
 import formatMessage from 'format-message';
+import { SDKKinds } from '@bfc/shared';
 
 import { FieldLabel } from '../FieldLabel';
 
@@ -17,7 +18,12 @@ const IntentField: React.FC<FieldProps> = (props) => {
   };
 
   const recognizer = recognizers.find((r) => r.isSelected(currentDialog?.content?.recognizer));
-  const Editor = recognizer?.editor;
+  let Editor: FieldWidget | undefined;
+  if (recognizer && recognizer.id === SDKKinds.CrossTrainedRecognizerSet) {
+    Editor = recognizers.find((r) => r.id === SDKKinds.LuisRecognizer)?.editor;
+  } else {
+    Editor = recognizer?.editor;
+  }
   const label = formatMessage('Trigger phrases (intent: #{intentName})', { intentName: value });
 
   return (
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/QnAActionsField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/QnAActionsField.tsx
new file mode 100644
index 0000000000..d519a7dfe3
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/QnAActionsField.tsx
@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { FieldProps, useShellApi } from '@bfc/extension';
+import formatMessage from 'format-message';
+
+import { Link } from '../Link';
+
+export const QnAActionsField: React.FC<FieldProps<string>> = function StringField() {
+  const { currentDialog, projectId } = useShellApi();
+  const qnaUrl = `/bot/${projectId}/knowledge-base/${currentDialog.id}`;
+  const content = formatMessage('Go to QnA all-up view page.');
+  return <Link href={qnaUrl}>{content}</Link>;
+};
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/RecognizerField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/RecognizerField.tsx
index 2d370e8366..feca7d2199 100644
--- a/Composer/packages/extensions/adaptive-form/src/components/fields/RecognizerField.tsx
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/RecognizerField.tsx
@@ -2,30 +2,64 @@
 // Licensed under the MIT License.
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { FieldProps, useShellApi, useRecognizerConfig } from '@bfc/extension';
-import { MicrosoftIRecognizer } from '@bfc/shared';
+import { MicrosoftIRecognizer, SDKKinds } from '@bfc/shared';
 import { Dropdown, ResponsiveMode, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import formatMessage from 'format-message';
+import { JsonEditor } from '@bfc/code-editor';
 
 import { FieldLabel } from '../FieldLabel';
 
 const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = (props) => {
-  const { value, id, label, description, uiOptions, required } = props;
+  const { value, id, label, description, uiOptions, required, onChange } = props;
   const { shellApi, ...shellData } = useShellApi();
   const recognizers = useRecognizerConfig();
+  const { qnaFiles, luFiles, currentDialog, locale } = shellData;
+  const [isCustomType, setIsCustomType] = useState(false);
+
+  useEffect(() => {
+    // this logic is for handling old bot with `recognizer = undefined'
+    if (value === undefined) {
+      const qnaFile = qnaFiles.find((f) => f.id === `${currentDialog.id}.${locale}`);
+      const luFile = luFiles.find((f) => f.id === `${currentDialog.id}.${locale}`);
+      if (qnaFile && luFile) {
+        onChange(`${currentDialog.id}.lu.qna`);
+      }
+    }
+
+    // transform lu recognizer to crosstrained for old bot
+    if (value === `${currentDialog.id}.lu`) {
+      onChange(`${currentDialog.id}.lu.qna`);
+    }
+  }, [value]);
 
   const options = useMemo(() => {
-    return recognizers.map((r) => ({
-      key: r.id,
-      text: typeof r.displayName === 'function' ? r.displayName(value) : r.displayName,
-    }));
+    // filter luisRecognizer for dropdown options
+    return recognizers
+      .filter((r) => r.id !== SDKKinds.LuisRecognizer)
+      .map((r) => ({
+        key: r.id,
+        text: typeof r.displayName === 'function' ? r.displayName(value) : r.displayName,
+      }));
   }, [recognizers]);
 
   const selectedType = useMemo(() => {
-    const selected = recognizers.filter((r) => r.isSelected(value)).map((r) => r.id);
+    if (isCustomType) {
+      return SDKKinds.CustomRecognizer;
+    }
+    const selected =
+      value === undefined
+        ? recognizers.length > 0
+          ? [recognizers[0].id]
+          : []
+        : recognizers.filter((r) => r.isSelected(value)).map((r) => r.id);
 
-    if (selected.length !== 1) {
+    const involvedCustomItem = selected.find((item) => item !== SDKKinds.CustomRecognizer);
+    if (involvedCustomItem) {
+      return involvedCustomItem;
+    }
+    if (selected.length < 1) {
       /* istanbul ignore next */
       if (process.env.NODE_ENV === 'development') {
         console.error(
@@ -37,11 +71,20 @@ const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = (props) => {
       return;
     }
 
+    // transform luis recognizer to crosss trained recognizer for old bot.
+    if (selected[0] === SDKKinds.LuisRecognizer) {
+      selected[0] = SDKKinds.CrossTrainedRecognizerSet;
+    }
     return selected[0];
-  }, [value]);
+  }, [value, isCustomType]);
 
   const handleChangeRecognizerType = (_, option?: IDropdownOption): void => {
     if (option) {
+      if (option.key === SDKKinds.CustomRecognizer) {
+        setIsCustomType(true);
+        return;
+      }
+
       const handler = recognizers.find((r) => r.id === option.key)?.handleRecognizerChange;
 
       if (handler) {
@@ -50,6 +93,10 @@ const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = (props) => {
     }
   };
 
+  const handleCustomChange = (value: string): void => {
+    setIsCustomType(true);
+    onChange(value);
+  };
   return (
     <React.Fragment>
       <FieldLabel description={description} helpLink={uiOptions?.helpLink} id={id} label={label} required={required} />
@@ -65,6 +112,15 @@ const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = (props) => {
       ) : (
         formatMessage('Unable to determine recognizer type from data: {value}', { value })
       )}
+      {selectedType === SDKKinds.CustomRecognizer && (
+        <JsonEditor
+          key={'customRecognizer'}
+          height={200}
+          id={'customRecog'}
+          value={value as object}
+          onChange={handleCustomChange}
+        />
+      )}
     </React.Fragment>
   );
 };
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/__tests__/RecognizerField.test.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/__tests__/RecognizerField.test.tsx
index ede359b995..5ed6a61ed3 100644
--- a/Composer/packages/extensions/adaptive-form/src/components/fields/__tests__/RecognizerField.test.tsx
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/__tests__/RecognizerField.test.tsx
@@ -24,6 +24,9 @@ describe('<RecognizerField />', () => {
   beforeEach(() => {
     (useShellApi as jest.Mock).mockReturnValue({
       shellApi: 'shell api',
+      qnaFiles: [],
+      luFiles: [],
+      currentDialog: { id: 'testId' },
       other: 'data',
     });
   });
@@ -34,22 +37,7 @@ describe('<RecognizerField />', () => {
     expect(container).toHaveTextContent(/Unable to determine recognizer type from data:/);
   });
 
-  it('renders error message when multiple recognizers matched', () => {
-    (useRecognizerConfig as jest.Mock).mockReturnValue([
-      {
-        id: 'one',
-        isSelected: () => true,
-      },
-      {
-        id: 'two',
-        isSelected: () => true,
-      },
-    ]);
-    const { container } = renderSubject();
-    expect(container).toHaveTextContent(/Unable to determine recognizer type from data:/);
-  });
-
-  it('renders a dropdown when only one recognizer matches', () => {
+  it('renders a dropdown when recognizer matches', () => {
     const handleChange = jest.fn();
     (useRecognizerConfig as jest.Mock).mockReturnValue([
       {
@@ -65,7 +53,7 @@ describe('<RecognizerField />', () => {
         handleRecognizerChange: jest.fn(),
       },
     ]);
-    const { getByTestId } = renderSubject();
+    const { getByTestId } = renderSubject({ value: 'one' });
     const dropdown = getByTestId('recognizerTypeDropdown');
     expect(dropdown).toHaveTextContent('Two Recognizer');
     fireEvent.click(dropdown);
diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/index.ts b/Composer/packages/extensions/adaptive-form/src/components/fields/index.ts
index c8ed065f40..64713348f8 100644
--- a/Composer/packages/extensions/adaptive-form/src/components/fields/index.ts
+++ b/Composer/packages/extensions/adaptive-form/src/components/fields/index.ts
@@ -13,6 +13,7 @@ export * from './OneOfField';
 export * from './OpenObjectField';
 export * from './RecognizerField';
 export * from './RegexIntentField';
+export * from './QnAActionsField';
 export * from './SelectField';
 export * from './StringField';
 export * from './UnsupportedField';
diff --git a/Composer/packages/extensions/adaptive-form/src/defaultRecognizers.ts b/Composer/packages/extensions/adaptive-form/src/defaultRecognizers.ts
new file mode 100644
index 0000000000..d9c5fc1607
--- /dev/null
+++ b/Composer/packages/extensions/adaptive-form/src/defaultRecognizers.ts
@@ -0,0 +1,66 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { RecognizerSchema } from '@bfc/extension';
+import { SDKKinds } from '@bfc/shared';
+import formatMessage from 'format-message';
+
+import { RegexIntentField } from './components/fields/RegexIntentField';
+
+const DefaultRecognizers: RecognizerSchema[] = [
+  {
+    id: SDKKinds.RegexRecognizer,
+    displayName: () => formatMessage('Regular Expression'),
+    editor: RegexIntentField,
+    isSelected: (data) => {
+      return typeof data === 'object' && data.$kind === SDKKinds.RegexRecognizer;
+    },
+    handleRecognizerChange: (props) => {
+      props.onChange({ $kind: SDKKinds.RegexRecognizer, intents: [] });
+    },
+    renameIntent: async (intentName, newIntentName, shellData, shellApi) => {
+      const { currentDialog } = shellData;
+      await shellApi.renameRegExIntent(currentDialog.id, intentName, newIntentName);
+    },
+  },
+  {
+    id: SDKKinds.CustomRecognizer,
+    displayName: () => formatMessage('Custom recognizer'),
+    isSelected: (data) => typeof data === 'object',
+    handleRecognizerChange: (props) =>
+      props.onChange({
+        $kind: 'Microsoft.MultiLanguageRecognizer',
+        recognizers: {
+          'en-us': {
+            $kind: 'Microsoft.RegexRecognizer',
+            intents: [
+              {
+                intent: 'greeting',
+                pattern: 'hello',
+              },
+              {
+                intent: 'test',
+                pattern: 'test',
+              },
+            ],
+          },
+          'zh-cn': {
+            $kind: 'Microsoft.RegexRecognizer',
+            intents: [
+              {
+                intent: 'greeting',
+                pattern: '你好',
+              },
+              {
+                intent: 'test',
+                pattern: '测试',
+              },
+            ],
+          },
+        },
+      }),
+    renameIntent: () => {},
+  },
+];
+
+export default DefaultRecognizers;
diff --git a/Composer/packages/extensions/extension/src/utils/mergePluginConfigs.ts b/Composer/packages/extensions/extension/src/utils/mergePluginConfigs.ts
index 3c85a06e53..3b08f6dfca 100644
--- a/Composer/packages/extensions/extension/src/utils/mergePluginConfigs.ts
+++ b/Composer/packages/extensions/extension/src/utils/mergePluginConfigs.ts
@@ -12,7 +12,7 @@ const mergeArrays: MergeWithCustomizer = (objValue, srcValue, key) => {
   if (isArray(objValue)) {
     // merge recognizers into defaults
     if (key === 'recognizers') {
-      return objValue.concat(srcValue);
+      return srcValue.concat(objValue);
     }
 
     // otherwise override other arrays
diff --git a/Composer/packages/lib/code-editor/src/LuEditor.tsx b/Composer/packages/lib/code-editor/src/LuEditor.tsx
index e62d003c3b..51950bcee0 100644
--- a/Composer/packages/lib/code-editor/src/LuEditor.tsx
+++ b/Composer/packages/lib/code-editor/src/LuEditor.tsx
@@ -16,6 +16,7 @@ import { LUOption } from './utils';
 
 export interface LULSPEditorProps extends BaseEditorProps {
   luOption?: LUOption;
+  helpURL?: string;
   languageServer?:
     | {
         host?: string;
@@ -70,7 +71,14 @@ const LuEditor: React.FC<LULSPEditorProps> = (props) => {
     ...props.options,
   };
 
-  const { luOption, languageServer, onInit: onInitProp, placeholder = defaultPlaceholder, ...restProps } = props;
+  const {
+    luOption,
+    languageServer,
+    onInit: onInitProp,
+    placeholder = defaultPlaceholder,
+    helpURL = LU_HELP,
+    ...restProps
+  } = props;
   const luServer = languageServer || defaultLUServer;
 
   let editorId = '';
diff --git a/Composer/packages/lib/code-editor/src/QnAEditor.tsx b/Composer/packages/lib/code-editor/src/QnAEditor.tsx
new file mode 100644
index 0000000000..df38f5f039
--- /dev/null
+++ b/Composer/packages/lib/code-editor/src/QnAEditor.tsx
@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+
+import { QNA_HELP } from './constants';
+import { LuEditor, LULSPEditorProps } from './LuEditor';
+
+export type QnALSPEditorProps = LULSPEditorProps;
+
+const QnAEditor: React.FC<QnALSPEditorProps> = (props) => {
+  return <LuEditor {...props} helpURL={QNA_HELP} />;
+};
+
+export { QnAEditor };
diff --git a/Composer/packages/lib/code-editor/src/constants.ts b/Composer/packages/lib/code-editor/src/constants.ts
index 691e3e4bda..f00b784e71 100644
--- a/Composer/packages/lib/code-editor/src/constants.ts
+++ b/Composer/packages/lib/code-editor/src/constants.ts
@@ -18,3 +18,10 @@ export const defaultPlaceholder = formatMessage(
 );
 
 export const LG_HELP = 'https://aka.ms/lg-file-format';
+
+export const QNA_HELP = 'https://aka.ms/qna-file-format';
+export const defaultQnAPlaceholder = formatMessage(
+  `> To learn more about the QnA file format, read the documentation at
+> {QNA_HELP}`,
+  { QNA_HELP }
+);
diff --git a/Composer/packages/lib/code-editor/src/index.ts b/Composer/packages/lib/code-editor/src/index.ts
index effdf10018..cdcd54325a 100644
--- a/Composer/packages/lib/code-editor/src/index.ts
+++ b/Composer/packages/lib/code-editor/src/index.ts
@@ -11,4 +11,5 @@ export * from './BaseEditor';
 export * from './JsonEditor';
 export * from './LgEditor';
 export * from './LuEditor';
+export * from './QnAEditor';
 export * from './constants';
diff --git a/Composer/packages/lib/indexers/package.json b/Composer/packages/lib/indexers/package.json
index c96b7bbebf..345ea47f1b 100644
--- a/Composer/packages/lib/indexers/package.json
+++ b/Composer/packages/lib/indexers/package.json
@@ -28,9 +28,9 @@
   },
   "dependencies": {
     "@bfc/shared": "*",
-    "@microsoft/bf-lu": "^4.10.0-dev.20200728.930f45e",
+    "@microsoft/bf-lu": "^4.10.0-dev.20200808.5a7c973",
     "adaptive-expressions": "4.10.0-preview-147186",
     "botbuilder-lg": "^4.10.0-preview-150886",
     "lodash": "^4.17.19"
   }
-}
+}
\ No newline at end of file
diff --git a/Composer/packages/lib/indexers/src/dialogIndexer.ts b/Composer/packages/lib/indexers/src/dialogIndexer.ts
index 4e89ff4e8f..3f7e96095c 100644
--- a/Composer/packages/lib/indexers/src/dialogIndexer.ts
+++ b/Composer/packages/lib/indexers/src/dialogIndexer.ts
@@ -177,6 +177,7 @@ function extractReferredSkills(dialog): string[] {
 
 function parse(id: string, content: any) {
   const luFile = typeof content.recognizer === 'string' ? content.recognizer : '';
+  const qnaFile = typeof content.recognizer === 'string' ? content.recognizer : '';
   const lgFile = typeof content.generator === 'string' ? content.generator : '';
   const diagnostics: Diagnostic[] = [];
   return {
@@ -187,6 +188,7 @@ function parse(id: string, content: any) {
     lgTemplates: extractLgTemplates(id, content),
     referredLuIntents: extractLuIntents(content, id),
     luFile: getBaseName(luFile, '.lu'),
+    qnaFile: getBaseName(qnaFile, '.lu.qna') || getBaseName(qnaFile, '.lu'),
     lgFile: getBaseName(lgFile, '.lg'),
     triggers: extractTriggers(content),
     intentTriggers: extractIntentTriggers(content),
diff --git a/Composer/packages/lib/indexers/src/index.ts b/Composer/packages/lib/indexers/src/index.ts
index 2602749044..f2b9345a06 100644
--- a/Composer/packages/lib/indexers/src/index.ts
+++ b/Composer/packages/lib/indexers/src/index.ts
@@ -6,6 +6,7 @@ import { dialogIndexer } from './dialogIndexer';
 import { dialogSchemaIndexer } from './dialogSchemaIndexer';
 import { lgIndexer } from './lgIndexer';
 import { luIndexer } from './luIndexer';
+import { qnaIndexer } from './qnaIndexer';
 import { skillManifestIndexer } from './skillManifestIndexer';
 import { FileExtensions } from './utils/fileExtensions';
 import { getExtension, getBaseName } from './utils/help';
@@ -23,6 +24,7 @@ class Indexer {
       {
         [FileExtensions.lg]: [],
         [FileExtensions.Lu]: [],
+        [FileExtensions.QnA]: [],
         [FileExtensions.Dialog]: [],
         [FileExtensions.DialogSchema]: [],
         [FileExtensions.Manifest]: [],
@@ -48,6 +50,7 @@ class Indexer {
       dialogSchemas: dialogSchemaIndexer.index(result[FileExtensions.DialogSchema]),
       lgFiles: lgIndexer.index(result[FileExtensions.lg], this.getLgImportResolver(result[FileExtensions.lg], locale)),
       luFiles: luIndexer.index(result[FileExtensions.Lu]),
+      qnaFiles: qnaIndexer.index(result[FileExtensions.QnA]),
       skillManifestFiles: skillManifestIndexer.index(result[FileExtensions.Manifest]),
     };
   }
@@ -60,5 +63,6 @@ export * from './dialogIndexer';
 export * from './dialogSchemaIndexer';
 export * from './lgIndexer';
 export * from './luIndexer';
+export * from './qnaIndexer';
 export * from './utils';
 export * from './validations';
diff --git a/Composer/packages/lib/indexers/src/qnaIndexer.ts b/Composer/packages/lib/indexers/src/qnaIndexer.ts
new file mode 100644
index 0000000000..00073bcbe2
--- /dev/null
+++ b/Composer/packages/lib/indexers/src/qnaIndexer.ts
@@ -0,0 +1,100 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import LUParser from '@microsoft/bf-lu/lib/parser/lufile/luParser';
+import { FileInfo, QnAFile } from '@bfc/shared';
+import get from 'lodash/get';
+import { Diagnostic, Position, Range, DiagnosticSeverity } from '@bfc/shared';
+import { nanoid } from 'nanoid';
+
+import { getBaseName } from './utils/help';
+import { FileExtensions } from './utils/fileExtensions';
+
+function convertQnADiagnostic(d: any, source: string): Diagnostic {
+  const severityMap = {
+    ERROR: DiagnosticSeverity.Error,
+    WARN: DiagnosticSeverity.Warning,
+    INFORMATION: DiagnosticSeverity.Information,
+    HINT: DiagnosticSeverity.Hint,
+  };
+  const result = new Diagnostic(d.Message, source, severityMap[d.Severity]);
+
+  const start: Position = d.Range ? new Position(d.Range.Start.Line, d.Range.Start.Character) : new Position(0, 0);
+  const end: Position = d.Range ? new Position(d.Range.End.Line, d.Range.End.Character) : new Position(0, 0);
+  result.range = new Range(start, end);
+
+  return result;
+}
+
+function parse(content: string, id = '') {
+  const { Sections, Errors } = LUParser.parse(content);
+  const qnaSections: any[] = [];
+  Sections.forEach((section) => {
+    const {
+      Answer,
+      Body,
+      FilterPairs,
+      Id,
+      QAPairId,
+      Questions,
+      SectionType,
+      StartLine,
+      StopLine,
+      prompts,
+      promptsText,
+      source,
+    } = section;
+    const range = {
+      startLineNumber: get(section, 'ParseTree.start.line', 0),
+      endLineNumber: get(section, 'ParseTree.stop.line', 0),
+    };
+    const QuestionsWithId = Questions.map((Q) => {
+      return {
+        content: Q,
+        id: nanoid(6),
+      };
+    });
+
+    qnaSections.push({
+      Answer,
+      Body,
+      FilterPairs,
+      Id,
+      QAPairId,
+      Questions: QuestionsWithId,
+      SectionType,
+      StartLine,
+      StopLine,
+      prompts,
+      promptsText,
+      source,
+      range,
+      uuid: nanoid(6),
+    });
+  });
+  const diagnostics = Errors.map((e) => convertQnADiagnostic(e, id));
+  return {
+    empty: !Sections.length,
+    qnaSections,
+    fileId: id,
+    diagnostics,
+  };
+}
+
+function index(files: FileInfo[]): QnAFile[] {
+  if (files.length === 0) return [];
+  const qnaFiles: QnAFile[] = [];
+  for (const file of files) {
+    const { name, content } = file;
+    if (name.endsWith(FileExtensions.QnA)) {
+      const id = getBaseName(name, FileExtensions.QnA);
+      const data = parse(content, id);
+      qnaFiles.push({ id, content, ...data });
+    }
+  }
+  return qnaFiles;
+}
+
+export const qnaIndexer = {
+  index,
+  parse,
+};
diff --git a/Composer/packages/lib/indexers/src/utils/dialogCheckUtil.ts b/Composer/packages/lib/indexers/src/utils/dialogCheckUtil.ts
index 2e1c3ea213..865de8f0ac 100644
--- a/Composer/packages/lib/indexers/src/utils/dialogCheckUtil.ts
+++ b/Composer/packages/lib/indexers/src/utils/dialogCheckUtil.ts
@@ -13,7 +13,7 @@ export function autofixReferInDialog(dialogId: string, content: string): string
 
     // fix lu referrence
     if (typeof dialogJson.recognizer === 'string') {
-      dialogJson.recognizer = `${dialogId}.lu`;
+      dialogJson.recognizer = `${dialogId}.lu.qna`;
     }
     return JSON.stringify(dialogJson, null, 2);
   } catch (_error) {
diff --git a/Composer/packages/lib/indexers/src/utils/fileExtensions.ts b/Composer/packages/lib/indexers/src/utils/fileExtensions.ts
index 7033bdf536..bb77af52c8 100644
--- a/Composer/packages/lib/indexers/src/utils/fileExtensions.ts
+++ b/Composer/packages/lib/indexers/src/utils/fileExtensions.ts
@@ -5,6 +5,7 @@ export enum FileExtensions {
   Dialog = '.dialog',
   DialogSchema = '.schema',
   Lu = '.lu',
+  QnA = '.qna',
   lg = '.lg',
   Manifest = '.json',
 }
diff --git a/Composer/packages/lib/indexers/src/utils/qnaUtil.ts b/Composer/packages/lib/indexers/src/utils/qnaUtil.ts
new file mode 100644
index 0000000000..13f1d73471
--- /dev/null
+++ b/Composer/packages/lib/indexers/src/utils/qnaUtil.ts
@@ -0,0 +1,173 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/**
+ * qnaUtil.ts is a single place handle lu file operation.
+ * it's designed have no state, input text file, output text file.
+ */
+
+//import isEmpty from 'lodash/isEmpty';
+import { QnASection } from '@bfc/shared';
+import { sectionHandler } from '@microsoft/bf-lu/lib/parser/composerindex';
+import cloneDeep from 'lodash/cloneDeep';
+
+import { qnaIndexer } from '../qnaIndexer';
+
+const { luParser, sectionOperator } = sectionHandler;
+
+export function checkIsSingleSection(content: string) {
+  const { Sections } = luParser.parse(content);
+  return Sections.length === 1;
+}
+
+export function generateQnAPair() {
+  let result = '';
+  result += '\n# ?\n```\n\n```';
+  return result;
+}
+
+export function addSection(content: string, newContent: string) {
+  const resource = luParser.parse(content);
+  const res = new sectionOperator(resource).addSection(newContent);
+  return res.Content;
+}
+
+export function updateSection(indexId: number, content: string, newContent: string) {
+  if (indexId < 0) return content;
+  const resource = luParser.parse(content);
+  const { Sections } = resource;
+  const sectionId = Sections[indexId].Id;
+  const res = new sectionOperator(resource).updateSection(sectionId, newContent);
+  return res.Content;
+}
+
+export function removeSection(indexId: number, content: string) {
+  if (indexId < 0) return content;
+  const resource = luParser.parse(content);
+  const res = new sectionOperator(resource).deleteSection(indexId);
+  return res.Content;
+}
+
+export function insertSection(indexId: number, content: string, newContent: string) {
+  if (indexId < 0) return content;
+  const resource = luParser.parse(content);
+  return new sectionOperator(resource).insertSection(indexId, newContent).Content;
+}
+
+export function getParsedDiagnostics(newContent: string) {
+  const { diagnostics } = qnaIndexer.parse(newContent);
+  return diagnostics;
+}
+
+export function addQuestion(newContent: string, qnaSections: QnASection[], qnaSectionIndex: number) {
+  const qnaFileContent = qnaSections.reduce((result, qnaSection, index) => {
+    if (index !== qnaSectionIndex) {
+      result = result + (index === 0 ? qnaSection.Body : '\n' + qnaSection.Body);
+    } else {
+      const newQnASection = addQuestionInQnASection(qnaSection, newContent);
+      result += rebuildQnaSection(newQnASection, index === 0);
+    }
+    return result;
+  }, '');
+  return qnaFileContent;
+}
+
+export function updateQuestion(
+  newContent: string,
+  questionIndex: number,
+  qnaSections: QnASection[],
+  qnaSectionIndex: number
+) {
+  const qnaFileContent = qnaSections.reduce((result, qnaSection, index) => {
+    if (index !== qnaSectionIndex) {
+      result = result + (index === 0 ? qnaSection.Body : '\n' + qnaSection.Body);
+    } else {
+      const newQnASection = updateQuestionInQnASection(qnaSection, newContent, questionIndex);
+      result += rebuildQnaSection(newQnASection, index === 0);
+    }
+    return result;
+  }, '');
+  return qnaFileContent;
+}
+
+export function updateAnswer(newContent: string, qnaSections: QnASection[], qnaSectionIndex: number) {
+  const qnaFileContent = qnaSections.reduce((result, qnaSection, index) => {
+    if (index !== qnaSectionIndex) {
+      result = result + (index === 0 ? qnaSection.Body : '\n' + qnaSection.Body);
+    } else {
+      const newQnASection = updateAnswerInQnASection(qnaSection, newContent);
+      result += rebuildQnaSection(newQnASection, index === 0);
+    }
+    return result;
+  }, '');
+  return qnaFileContent;
+}
+
+function updateAnswerInQnASection(qnaSection: QnASection, answer: string) {
+  const newQnASection: QnASection = cloneDeep(qnaSection);
+  newQnASection.Answer = answer;
+  return newQnASection;
+}
+
+function updateQuestionInQnASection(qnaSection: QnASection, question: string, questionIndex: number) {
+  const newQnASection: QnASection = cloneDeep(qnaSection);
+  if (question) {
+    newQnASection.Questions[questionIndex].content = question;
+  } else {
+    newQnASection.Questions.splice(questionIndex, 1);
+  }
+  return newQnASection;
+}
+
+//will replace an empty question or add a new question
+function addQuestionInQnASection(qnaSection: QnASection, question: string) {
+  const newQnASection: QnASection = cloneDeep(qnaSection);
+  const emptyQuestionIndex = newQnASection.Questions.findIndex((q) => q.content === '');
+  if (emptyQuestionIndex > -1) {
+    newQnASection.Questions[emptyQuestionIndex].content = question;
+    return newQnASection;
+  }
+  newQnASection.Questions.push({ content: question, id: '' });
+  return newQnASection;
+}
+
+function rebuildQnaSection(qnaSection, isfirstQnA: boolean) {
+  const { source, QAPairId, Questions, FilterPairs, Answer, promptsText } = qnaSection;
+  let result = '';
+  if (source && source !== 'custom editorial') {
+    result += !result && isfirstQnA ? '' : '\n';
+    result += `> !# @qna.pair.source = ${source}`;
+  }
+  if (QAPairId) {
+    result += !result && isfirstQnA ? '' : '\n';
+    result += `<a id = "${QAPairId}"></a>`;
+  }
+  result += !result && isfirstQnA ? '' : '\n';
+  result += `# ?`;
+  if (Questions && Questions.length !== 0) {
+    result += `${Questions[0].content}`;
+    Questions.slice(1).forEach((question) => {
+      result += `\n- ${question.content}`;
+    });
+  }
+  if (FilterPairs && FilterPairs.length !== 0) {
+    result += `\n**Filters:**`;
+    FilterPairs.forEach((filterPair) => {
+      result += `\n-${filterPair.key}=${filterPair.value}`;
+    });
+  }
+  result += '\n```';
+  if (Answer) {
+    result += `\n${Answer}`;
+  } else {
+    result += `\n`;
+  }
+  result += '\n```';
+  if (promptsText) {
+    result += '\n**Prompts:**';
+    promptsText.forEach((prompt) => {
+      result += `\n-${prompt}`;
+    });
+  }
+  return result;
+}
diff --git a/Composer/packages/lib/shared/src/constant.ts b/Composer/packages/lib/shared/src/constant.ts
index 409e837eb7..ac883acaa4 100644
--- a/Composer/packages/lib/shared/src/constant.ts
+++ b/Composer/packages/lib/shared/src/constant.ts
@@ -1,7 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-export const SensitiveProperties = ['MicrosoftAppPassword', 'luis.authoringKey', 'luis.endpointKey'];
+export const SensitiveProperties = [
+  'MicrosoftAppPassword',
+  'luis.authoringKey',
+  'luis.endpointKey',
+  'qna.subscriptionKey',
+  'qna.endpointKey',
+];
 export const FieldNames = {
   Events: 'triggers',
   Actions: 'actions',
@@ -37,3 +43,133 @@ export const LUISLocales = [
   'te-in',
   'tr-tr',
 ];
+
+const adaptiveCardJsonBody =
+  '-```\
+\n{\
+\n      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",\
+\n      "version": "1.0",\
+\n      "type": "AdaptiveCard",\
+\n      "speak": "",\
+\n      "body": [\
+\n          {\
+\n              "type": "TextBlock",\
+\n              "text": "${whichOneDidYouMean()}",\
+\n              "weight": "Bolder"\
+\n          },\
+\n          {\
+\n              "type": "TextBlock",\
+\n              "text": "${pickOne()}",\
+\n              "separator": "true"\
+\n          },\
+\n          {\
+\n              "type": "Input.ChoiceSet",\
+\n              "placeholder": "Placeholder text",\
+\n              "id": "userChosenIntent",\
+\n              "choices": [\
+\n                           {\
+\n                               "title": "${getIntentReadBack()}",\
+\n                               "value": "luisResult"\
+\n                           },\
+\n                           {\
+\n                               "title": "${getAnswerReadBack()}",\
+\n                               "value": "qnaResult"\
+\n                           },\
+\n                           {\
+\n                               "title": "None of the above",\
+\n                               "value": "none"\
+\n                           }\
+\n             ],\
+\n             "style": "expanded",\
+\n             "value": "luis"\
+\n         },\
+\n         {\
+\n             "type": "ActionSet",\
+\n             "actions": [\
+\n                {\
+\n                     "type": "Action.Submit",\
+\n                     "title": "Submit",\
+\n                     "data": {\
+\n                   "intent": "chooseIntentCardResponse"\
+\n                }\
+\n         }\
+\n       ]\
+\n     }\
+\n    ]\
+\n}\
+```';
+
+const whichOneDidYouMeanBody = `\
+- I'm not sure which one you mean.
+- Hmmm, I find that to be ambiguous.
+`;
+
+const pickOne = `\
+- Can you pick one ?
+- Can you help clarify by choosing one ?
+`;
+
+const getIntentReadBack = `\
+- SWITCH : \${toLower(dialog.luisResult.intent)}
+- CASE : \${'GetUserProfile'}
+  - Start filling in your profile(GetUserProfile intent)
+- DEFAULT :
+  - \${dialog.luisResult.intent}
+`;
+
+const getAnswerReadBack = `- See an answer from the Knowledge Base
+`;
+
+export const LgTemplateSamples = {
+  ['adaptiveCardJson']: {
+    name: 'AdaptiveCardJson',
+    body: adaptiveCardJsonBody,
+  },
+  ['whichOneDidYouMean']: {
+    name: `whichOneDidYouMean`,
+    body: whichOneDidYouMeanBody,
+  },
+  ['pickOne']: {
+    name: 'pickOne',
+    body: pickOne,
+  },
+  ['getAnswerReadBack']: {
+    name: 'getAnswerReadBack',
+    body: getAnswerReadBack,
+  },
+  ['getIntentReadBack']: {
+    name: 'getIntentReadBack',
+    body: getIntentReadBack,
+  },
+  TextInputPromptForOnChooseIntent: (designerId) => {
+    return {
+      name: `TextInput_Prompt_${designerId}`,
+      body: `[Activity
+    Attachments = \${json(AdaptiveCardJson())}
+]
+`,
+    };
+  },
+  SendActivityForOnChooseIntent: (designerId) => {
+    return {
+      name: `SendActivity_${designerId}`,
+      body: '- Sure, no worries.\n',
+    };
+  },
+  TextInputPromptForQnAMatcher: (designerId) => {
+    return {
+      name: `TextInput_Prompt_${designerId}`,
+      body: `[Activity
+    Text = \${expandText(@answer)}
+    SuggestedActions = \${foreach(turn.recognized.answers[0].context.prompts, x, x.displayText)}
+]
+`,
+    };
+  },
+  SendActivityForQnAMatcher: (designerId) => {
+    return {
+      name: `SendActivity_${designerId}`,
+      body: '- ${expandText(@answer)}\n',
+    };
+  },
+};
diff --git a/Composer/packages/lib/shared/src/dialogFactory.ts b/Composer/packages/lib/shared/src/dialogFactory.ts
index 0b898ad75a..dcdd5a4d90 100644
--- a/Composer/packages/lib/shared/src/dialogFactory.ts
+++ b/Composer/packages/lib/shared/src/dialogFactory.ts
@@ -73,6 +73,243 @@ const initialDialogShape = () => ({
   [SDKKinds.SendActivity]: {
     activity: '',
   },
+  [SDKKinds.OnQnAMatch]: {
+    $kind: SDKKinds.OnQnAMatch,
+    $designer: {
+      id: generateDesignerId(),
+    },
+    actions: [
+      {
+        $kind: SDKKinds.IfCondition,
+        $designer: {
+          id: generateDesignerId(),
+        },
+        condition: 'count(turn.recognized.answers[0].context.prompts) > 0',
+        actions: [
+          {
+            $kind: SDKKinds.SetProperty,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            property: 'dialog.qnaContext',
+            value: '=turn.recognized.answers[0].context.prompts',
+          },
+          {
+            $kind: SDKKinds.TextInput,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            maxTurnCount: 3,
+            alwaysPrompt: true,
+            allowInterruptions: false,
+            prompt: `\${TextInput_Prompt_${generateDesignerId()}()}`,
+            property: 'turn.qnaMultiTurnResponse',
+          },
+          {
+            $kind: SDKKinds.SetProperty,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            property: 'turn.qnaMatchFromContext',
+            value: '=where(dialog.qnaContext, item, item.displayText == turn.qnaMultiTurnResponse)',
+          },
+          {
+            $kind: SDKKinds.DeleteProperty,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            property: 'dialog.qnaContext',
+          },
+          {
+            $kind: SDKKinds.IfCondition,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            condition: 'turn.qnaMatchFromContext && count(turn.qnaMatchFromContext) > 0',
+            actions: [
+              {
+                $kind: SDKKinds.SetProperty,
+                $designer: {
+                  id: generateDesignerId(),
+                },
+                property: 'turn.qnaIdFromPrompt',
+                value: '=turn.qnaMatchFromContext[0].qnaId',
+              },
+            ],
+          },
+          {
+            $kind: SDKKinds.EmitEvent,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            eventName: 'activityReceived',
+            eventValue: '=turn.activity',
+          },
+        ],
+        elseActions: [
+          {
+            $kind: SDKKinds.SendActivity,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            activity: `\${SendActivity_${generateDesignerId()}()}`,
+          },
+        ],
+      },
+    ],
+  },
+  [SDKKinds.OnChooseIntent]: {
+    $kind: SDKKinds.OnChooseIntent,
+    $designer: {
+      id: generateDesignerId(),
+    },
+    actions: [
+      {
+        $kind: SDKKinds.SetProperties,
+        $designer: {
+          id: generateDesignerId(),
+        },
+        assignments: [
+          {
+            value: '=turn.recognized.candidates[0]',
+            property: 'dialog.luisResult',
+          },
+          {
+            property: 'dialog.qnaResult',
+            value: '=turn.recognized.candidates[1]',
+          },
+        ],
+      },
+      {
+        $kind: SDKKinds.IfCondition,
+        $designer: {
+          id: generateDesignerId(),
+        },
+        condition: 'dialog.luisResult.score >= 0.9 && dialog.qnaResult.score <= 0.5',
+        actions: [
+          {
+            $kind: SDKKinds.EmitEvent,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            eventName: 'recognizedIntent',
+            eventValue: '=dialog.luisResult.result',
+          },
+          {
+            $kind: SDKKinds.BreakLoop,
+            $designer: {
+              id: generateDesignerId(),
+            },
+          },
+        ],
+      },
+      {
+        $kind: SDKKinds.IfCondition,
+        $designer: {
+          id: generateDesignerId(),
+        },
+        condition: 'dialog.luisResult.score <= 0.5 && dialog.qnaResult.score >= 0.9',
+        actions: [
+          {
+            $kind: SDKKinds.EmitEvent,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            eventName: 'recognizedIntent',
+            eventValue: '=dialog.qnaResult.result',
+          },
+          {
+            $kind: SDKKinds.BreakLoop,
+            $designer: {
+              id: generateDesignerId(),
+            },
+          },
+        ],
+      },
+      {
+        $kind: SDKKinds.IfCondition,
+        $designer: {
+          id: generateDesignerId(),
+        },
+        condition: 'dialog.qnaResult.score <= 0.05',
+        actions: [
+          {
+            $kind: SDKKinds.EmitEvent,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            eventName: 'recognizedIntent',
+            eventValue: '=dialog.luisResult.result',
+          },
+          {
+            $kind: SDKKinds.BreakLoop,
+            $designer: {
+              id: generateDesignerId(),
+            },
+          },
+        ],
+        top: 3,
+        cardNoMatchResponse: 'Thanks for the feedback.',
+        cardNoMatchText: 'None of the above.',
+      },
+      {
+        $kind: SDKKinds.TextInput,
+        $designer: {
+          id: generateDesignerId(),
+        },
+        maxTurnCount: 3,
+        alwaysPrompt: true,
+        allowInterruptions: false,
+        prompt: `\${TextInput_Prompt_${generateDesignerId()}()}`,
+        property: 'turn.intentChoice',
+        value: '=@userChosenIntent',
+        top: 3,
+        cardNoMatchResponse: 'Thanks for the feedback.',
+        cardNoMatchText: 'None of the above.',
+        activeLearningCardTitle: 'Did you mean:',
+        threshold: 0.3,
+        noAnswer: 'Sorry, I did not find an answer.',
+        hostname: '=settings.qna.hostname',
+        endpointKey: '=settings.qna.endpointkey',
+        knowledgeBaseId: '=settings.qna.knowledgebaseid',
+      },
+      {
+        $kind: SDKKinds.IfCondition,
+        $designer: {
+          id: generateDesignerId(),
+        },
+        condition: "turn.intentChoice != 'none'",
+        actions: [
+          {
+            $kind: SDKKinds.EmitEvent,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            eventName: 'recognizedIntent',
+            eventValue: '=dialog[turn.intentChoice].result',
+          },
+        ],
+        elseActions: [
+          {
+            $kind: SDKKinds.SendActivity,
+            $designer: {
+              id: generateDesignerId(),
+            },
+            activity: `\${SendActivity_${generateDesignerId()}()}`,
+          },
+        ],
+        top: 3,
+        cardNoMatchResponse: 'Thanks for the feedback.',
+        cardNoMatchText: 'None of the above.',
+        activeLearningCardTitle: 'Did you mean:',
+        threshold: 0.3,
+        noAnswer: 'Sorry, I did not find an answer.',
+        hostname: '=settings.qna.hostname',
+        endpointKey: '=settings.qna.endpointkey',
+        knowledgeBaseId: '=settings.qna.knowledgebaseid',
+      },
+    ],
+  },
   [SDKKinds.AttachmentInput]: initialInputDialog,
   [SDKKinds.ChoiceInput]: initialInputDialog,
   [SDKKinds.ConfirmInput]: initialInputDialog,
@@ -171,7 +408,6 @@ class DialogFactory {
 
     const { $designer, ...propertyOverrides } = overrides;
     const defaultProperties = initialDialogShape()[$kind] || {};
-
     return merge(
       { $kind, $designer: merge({ id: generateDesignerId() }, $designer) },
       this.seedDefaults($kind),
diff --git a/Composer/packages/lib/shared/src/labelMap.ts b/Composer/packages/lib/shared/src/labelMap.ts
index 7f0c2cd868..1561941dbd 100644
--- a/Composer/packages/lib/shared/src/labelMap.ts
+++ b/Composer/packages/lib/shared/src/labelMap.ts
@@ -136,6 +136,9 @@ export const ConceptLabels: { [key in ConceptLabelKey]?: LabelOverride } = {
     title: formatMessage('Dialog cancelled'),
     subtitle: formatMessage('Cancel dialog event'),
   },
+  [SDKKinds.OnChooseIntent]: {
+    title: formatMessage('Duplicated intents recognized'),
+  },
   [SDKKinds.OnCondition]: {
     title: formatMessage('Handle a Condition'),
   },
@@ -212,6 +215,9 @@ export const ConceptLabels: { [key in ConceptLabelKey]?: LabelOverride } = {
     title: formatMessage('Unknown intent'),
     subtitle: formatMessage('Unknown intent recognized'),
   },
+  [SDKKinds.OnQnAMatch]: {
+    title: formatMessage('QnA Intent recognized'),
+  },
   [SDKKinds.QnAMakerDialog]: {
     title: formatMessage('Connect to QnA Knowledgebase'),
   },
diff --git a/Composer/packages/lib/shared/src/types/indexers.ts b/Composer/packages/lib/shared/src/types/indexers.ts
index b59da610c2..a584c96694 100644
--- a/Composer/packages/lib/shared/src/types/indexers.ts
+++ b/Composer/packages/lib/shared/src/types/indexers.ts
@@ -12,6 +12,7 @@ export enum FileExtensions {
   Manifest = '.json',
   Lu = '.lu',
   Lg = '.lg',
+  Qna = '.qna',
   Setting = 'appsettings.json',
 }
 
@@ -49,6 +50,7 @@ export interface DialogInfo {
   lgFile: string;
   lgTemplates: LgTemplateJsonPath[];
   luFile: string;
+  qnaFile: string;
   referredLuIntents: ReferredLuIntents[];
   referredDialogs: string[];
   triggers: ITrigger[];
@@ -102,6 +104,19 @@ export interface LuFile {
   empty: boolean;
   [key: string]: any;
 }
+
+export interface QnASection {
+  Questions: { content: string; id: string }[];
+  Answer: string;
+  Body: string;
+}
+
+export interface QnAFile {
+  id: string;
+  content: string;
+  qnaSections: QnASection[];
+  [key: string]: any;
+}
 export interface CodeRange {
   startLineNumber: number;
   endLineNumber: number;
@@ -165,6 +180,7 @@ export type BotAssets = {
   dialogs: DialogInfo[];
   luFiles: LuFile[];
   lgFiles: LgFile[];
+  qnaFiles: QnAFile[];
   skillManifests: SkillManifest[];
   setting: DialogSetting;
   dialogSchemas: DialogSchemaFile[];
diff --git a/Composer/packages/lib/shared/src/types/schema.ts b/Composer/packages/lib/shared/src/types/schema.ts
index 807f4d35ed..394d6adebc 100644
--- a/Composer/packages/lib/shared/src/types/schema.ts
+++ b/Composer/packages/lib/shared/src/types/schema.ts
@@ -27,6 +27,7 @@ export enum SDKKinds {
   ContinueLoop = 'Microsoft.ContinueLoop',
   CrossTrainedRecognizerSet = 'Microsoft.CrossTrainedRecognizerSet',
   CurrencyEntityRecognizer = 'Microsoft.CurrencyEntityRecognizer',
+  CustomRecognizer = 'Microsoft.CustomRecognizer',
   DateTimeEntityRecognizer = 'Microsoft.DateTimeEntityRecognizer',
   DateTimeInput = 'Microsoft.DateTimeInput',
   DebugBreak = 'Microsoft.DebugBreak',
diff --git a/Composer/packages/lib/shared/src/types/sdk.ts b/Composer/packages/lib/shared/src/types/sdk.ts
index 9708746155..d31028a3b6 100644
--- a/Composer/packages/lib/shared/src/types/sdk.ts
+++ b/Composer/packages/lib/shared/src/types/sdk.ts
@@ -189,7 +189,12 @@ export interface RegexRecognizer extends BaseSchema {
   intents: IntentPattern[];
 }
 
-export type MicrosoftIRecognizer = LuisRecognizer | RegexRecognizer | string;
+export interface CrossTrainedRecognizer extends BaseSchema {
+  /** Pattern->Intents mappings */
+  recognizers: string[];
+}
+
+export type MicrosoftIRecognizer = LuisRecognizer | RegexRecognizer | CrossTrainedRecognizer | string;
 
 /**
  * Rules
diff --git a/Composer/packages/lib/shared/src/types/server.ts b/Composer/packages/lib/shared/src/types/server.ts
index 07fbfd4087..770a6311de 100644
--- a/Composer/packages/lib/shared/src/types/server.ts
+++ b/Composer/packages/lib/shared/src/types/server.ts
@@ -22,7 +22,7 @@ export interface IBotProject {
   dataDir: string;
   id: string | undefined;
   name: string;
-  luPublisher: any;
+  builder: any;
   defaultSDKSchema: {
     [key: string]: string;
   };
diff --git a/Composer/packages/lib/shared/src/types/settings.ts b/Composer/packages/lib/shared/src/types/settings.ts
index 51e787233b..845f70c418 100644
--- a/Composer/packages/lib/shared/src/types/settings.ts
+++ b/Composer/packages/lib/shared/src/types/settings.ts
@@ -23,6 +23,7 @@ export interface DialogSetting {
   MicrosoftAppId?: string;
   MicrosoftAppPassword?: string;
   luis: ILuisConfig;
+  qna: IQnAConfig;
   publishTargets?: PublishTarget[];
   runtime: {
     customRuntime: boolean;
@@ -51,6 +52,23 @@ export interface ILuisConfig {
   environment: string | 'composer';
 }
 
+export interface IQnAConfig {
+  subscriptionKey: string;
+  endpointKey: string;
+  qnaRegion: string;
+  [key: string]: string;
+}
+
+export interface IConfig extends ILuisConfig {
+  subscriptionKey: string;
+  qnaRegion: string | 'westus';
+}
+
+export interface IPublishConfig {
+  luis: ILuisConfig;
+  qna: IQnAConfig;
+}
+
 export interface PublishTarget {
   name: string;
   type: string;
diff --git a/Composer/packages/lib/shared/src/types/shell.ts b/Composer/packages/lib/shared/src/types/shell.ts
index 5c3081f171..ff162da5dc 100644
--- a/Composer/packages/lib/shared/src/types/shell.ts
+++ b/Composer/packages/lib/shared/src/types/shell.ts
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { DialogInfo, LuFile, LgFile, LuIntentSection, LgTemplate, DialogSchemaFile } from './indexers';
+import { DialogInfo, LuFile, LgFile, QnAFile, LuIntentSection, LgTemplate, DialogSchemaFile } from './indexers';
 import { UserSettings } from './settings';
 import { OBISchema } from './schema';
 
@@ -55,6 +55,7 @@ export interface ShellData {
   hosted: boolean;
   lgFiles: LgFile[];
   luFiles: LuFile[];
+  qnaFiles: QnAFile[];
   userSettings: UserSettings;
   skills: any[];
   // TODO: remove
@@ -81,6 +82,7 @@ export interface ShellApi {
   updateLuIntent: (id: string, intentName: string, intent: LuIntentSection) => void;
   renameLuIntent: (id: string, intentName: string, newIntentName: string) => void;
   removeLuIntent: (id: string, intentName: string) => void;
+  updateQnaContent: (id: string, content: string) => void;
   updateRegExIntent: (id: string, intentName: string, pattern: string) => void;
   renameRegExIntent: (id: string, intentName: string, newIntentName: string) => void;
   updateIntentTrigger: (id: string, intentName: string, newIntentName: string) => void;
@@ -95,6 +97,12 @@ export interface ShellApi {
   announce: (message: string) => void;
   displayManifestModal: (manifestId: string) => void;
   updateDialogSchema: (_: DialogSchemaFile) => Promise<void>;
+  createTrigger: (id: string, formData, url?: string) => void;
+}
+
+export interface Shell {
+  api: ShellApi;
+  data: ShellData;
 }
 
 export interface Shell {
diff --git a/Composer/packages/lib/shared/src/viewUtils.ts b/Composer/packages/lib/shared/src/viewUtils.ts
index 8a2585f684..d4ceeda732 100644
--- a/Composer/packages/lib/shared/src/viewUtils.ts
+++ b/Composer/packages/lib/shared/src/viewUtils.ts
@@ -104,7 +104,14 @@ export const dialogGroups: DialogGroupsMap = {
   },
   [DialogGroup.EVENTS]: {
     label: formatMessage('Events'),
-    types: [SDKKinds.OnIntent, SDKKinds.OnUnknownIntent, SDKKinds.OnDialogEvent, SDKKinds.OnActivity],
+    types: [
+      SDKKinds.OnIntent,
+      SDKKinds.OnQnAMatch,
+      SDKKinds.OnUnknownIntent,
+      SDKKinds.OnDialogEvent,
+      SDKKinds.OnActivity,
+      SDKKinds.OnChooseIntent,
+    ],
   },
   [DialogGroup.DIALOG_EVENT_TYPES]: {
     label: formatMessage('OnDialogEvents Types'),
diff --git a/Composer/packages/server/__tests__/controllers/project.test.ts b/Composer/packages/server/__tests__/controllers/project.test.ts
index e98a9ab32f..033013430e 100644
--- a/Composer/packages/server/__tests__/controllers/project.test.ts
+++ b/Composer/packages/server/__tests__/controllers/project.test.ts
@@ -341,7 +341,7 @@ describe('skill operation', () => {
     } as Request;
     await ProjectController.getSkill(mockReq, mockRes);
     expect(mockRes.status).toHaveBeenCalledWith(200);
-  }, 5000);
+  }, 10000);
 
   it('should update skill', async () => {
     const mockReq = {
@@ -379,7 +379,7 @@ describe('publish luis files', () => {
     projectId = await BotProjectService.openProject(location1);
   });
 
-  it('should publish all luis files', async () => {
+  it('should publish all luis & qna files', async () => {
     const mockReq = {
       params: { projectId },
       query: {},
@@ -395,7 +395,7 @@ describe('publish luis files', () => {
         luFiles: [],
       },
     } as Request;
-    await ProjectController.publishLuis(mockReq, mockRes);
+    await ProjectController.build(mockReq, mockRes);
     expect(mockRes.status).toHaveBeenCalledWith(200);
   });
 });
diff --git a/Composer/packages/server/__tests__/mocks/asset/projects/SampleBot/dialogs/a/knowledge-base/en-us/a.en-us.qna b/Composer/packages/server/__tests__/mocks/asset/projects/SampleBot/dialogs/a/knowledge-base/en-us/a.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/packages/server/__tests__/mocks/asset/projects/SampleBot/dialogs/b/knowledge-base/en-us/b.en-us.qna b/Composer/packages/server/__tests__/mocks/asset/projects/SampleBot/dialogs/b/knowledge-base/en-us/b.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/packages/server/__tests__/mocks/asset/projects/SampleBot/knowledge-base/en-us/bot1.en-us.qna b/Composer/packages/server/__tests__/mocks/asset/projects/SampleBot/knowledge-base/en-us/bot1.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/packages/server/__tests__/models/bot/botProject.test.ts b/Composer/packages/server/__tests__/models/bot/botProject.test.ts
index 162cdf5d50..a40b54cf41 100644
--- a/Composer/packages/server/__tests__/models/bot/botProject.test.ts
+++ b/Composer/packages/server/__tests__/models/bot/botProject.test.ts
@@ -233,6 +233,62 @@ describe('lu operations', () => {
   });
 });
 
+describe('qna operations', () => {
+  it('should get qna endpoint key', async () => {
+    await proj.init();
+    const subscriptionKey = '21640b8e2110449abfdfccf2f6bbee02';
+    const endpointKey = await proj.updateQnaEndpointKey(subscriptionKey);
+    expect(endpointKey).toBe('d423d198-b0cc-46b3-a48c-e32d7a7e5b8a');
+  });
+});
+describe('buildFiles', () => {
+  const path = Path.resolve(__dirname, `${botDir}/generated`);
+  afterEach(() => {
+    try {
+      rimraf.sync(path);
+    } catch (err) {
+      // ignore
+    }
+  });
+  it('should build lu & qna file successfully', async () => {
+    proj.init();
+    const luisConfig = {
+      authoringEndpoint: '',
+      authoringKey: '412f0bfc19824ceca7a6076d05478850',
+      authoringRegion: 'westus',
+      defaultLanguage: 'en-us',
+      endpoint: '',
+      endpointKey: '',
+      environment: 'composer',
+      name: 'alan-qna',
+    };
+    const qnaConfig = {
+      endpointKey: '',
+      qnaRegion: 'westus',
+      subscriptionKey: '21640b8e2110449abfdfccf2f6bbee02',
+    };
+    const luFileIds = ['a.en-us', 'b.en-us', 'bot1.en-us'];
+    const qnaFileIds = ['a.en-us', 'b.en-us', 'bot1.en-us'];
+    const crossTrainConfig = {
+      botName: 'bot1',
+      rootIds: [],
+      triggerRules: {},
+      intentName: '_Interruption',
+      verbose: true,
+    };
+    await proj.buildFiles({ luisConfig, qnaConfig, luFileIds, qnaFileIds, crossTrainConfig });
+
+    try {
+      if (fs.existsSync(path)) {
+        const files = fs.readdirSync(path);
+        expect(files).toContain('a.lu.qna.dialog');
+      }
+    } catch (err) {
+      // ignore
+    }
+  }, 30000);
+});
+
 describe('dialog operations', () => {
   it('should create dialog', async () => {
     const dialogsFilesCount = proj.dialogFiles.length;
diff --git a/Composer/packages/server/__tests__/models/bot/botStructure.test.ts b/Composer/packages/server/__tests__/models/bot/botStructure.test.ts
index 83474592b9..7e56c70ad7 100644
--- a/Composer/packages/server/__tests__/models/bot/botStructure.test.ts
+++ b/Composer/packages/server/__tests__/models/bot/botStructure.test.ts
@@ -55,6 +55,12 @@ describe('Bot structure file path', () => {
     expect(targetPath).toEqual('dialogs/greeting/greeting.dialog');
   });
 
+  // entry dialog's qna
+  it('should get entry dialog-qna file path', async () => {
+    const targetPath = defaultFilePath(botName, defaultLocale, 'mybot.en-us.qna');
+    expect(targetPath).toEqual('knowledge-base/en-us/mybot.en-us.qna');
+  });
+
   // child dialog's lg
   it('should get child dialog-lg file path', async () => {
     const targetPath = defaultFilePath(botName, defaultLocale, 'greeting.en-us.lg');
@@ -66,6 +72,12 @@ describe('Bot structure file path', () => {
     const targetPath = defaultFilePath(botName, defaultLocale, 'greeting.en-us.lu');
     expect(targetPath).toEqual('dialogs/greeting/language-understanding/en-us/greeting.en-us.lu');
   });
+
+  // child dialog's qna
+  it('should get child dialog-qna file path', async () => {
+    const targetPath = defaultFilePath(botName, defaultLocale, 'greeting.en-us.qna');
+    expect(targetPath).toEqual('dialogs/greeting/knowledge-base/en-us/greeting.en-us.qna');
+  });
 });
 
 describe('Parse file name', () => {
diff --git a/Composer/packages/server/package.json b/Composer/packages/server/package.json
index 465e1d0950..4f32ee1be4 100644
--- a/Composer/packages/server/package.json
+++ b/Composer/packages/server/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/public/static/js/*.js'",
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && node scripts/build.js",
     "clean": "rimraf build",
     "prep:dist:electron": "yarn build --outDir ../electron-server/dist && node scripts/copyAssets.js",
     "start": "node build/init.js",
@@ -22,7 +22,7 @@
   },
   "author": "",
   "nodemonConfig": {
-    "exec": "cross-env TS_NODE_FILES=true node -r ts-node/register src/init.ts",
+    "exec": "cross-env TS_NODE_FILES=true node --inspect=9228 -r ts-node/register src/init.ts",
     "watch": [
       "src"
     ],
@@ -62,7 +62,7 @@
     "@bfc/plugin-loader": "*",
     "@bfc/shared": "*",
     "@microsoft/bf-dispatcher": "^4.10.0-preview.141651",
-    "@microsoft/bf-lu": "^4.10.0-dev.20200728.930f45e",
+    "@microsoft/bf-lu": "^4.10.0-dev.20200808.5a7c973",
     "archiver": "^3.0.0",
     "axios": "^0.19.2",
     "azure-storage": "^2.10.3",
@@ -91,8 +91,9 @@
     "portfinder": "1.0.25",
     "rimraf": "^3.0.2",
     "ts-md5": "^1.2.7",
+    "uuid": "^8.3.0",
     "vscode-languageserver": "^5.3.0-next",
     "vscode-ws-jsonrpc": "^0.1.1",
     "ws": "^5.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/Composer/packages/server/scripts/build.js b/Composer/packages/server/scripts/build.js
new file mode 100644
index 0000000000..8de5cb0aaf
--- /dev/null
+++ b/Composer/packages/server/scripts/build.js
@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft. All rights reserved.
+// Licensed under the MIT license.
+const fs = require('fs');
+const path = require('path');
+
+function getBuildEnvironment() {
+  return {
+    QNA_SUBSCRIPTION_KEY: process.env.QNA_SUBSCRIPTION_KEY,
+  };
+}
+
+async function writeToDist(fileName) {
+  const envPath = path.join(__dirname, `../build/${fileName}`);
+  const output = getBuildEnvironment();
+  fs.writeFileSync(envPath, JSON.stringify(output));
+}
+
+writeToDist('env.json');
diff --git a/Composer/packages/server/src/constants.ts b/Composer/packages/server/src/constants.ts
index cc425b635e..9bddac8227 100644
--- a/Composer/packages/server/src/constants.ts
+++ b/Composer/packages/server/src/constants.ts
@@ -3,6 +3,12 @@
 
 export const BASEURL = (process.env.PUBLIC_URL || '').replace(/\/$/, '');
 
+export const QNA_SUBSCRIPTION_KEY = process.env.QNA_SUBSCRIPTION_KEY ?? '';
+
+export const COGNITIVE_SERVICES_ENDPOINTS = 'https://westus.api.cognitive.microsoft.com/qnamaker/v4.0';
+
+export const DOC_EXTENSIONS = ['.pdf', '.tsv', '.doc', '.docx', '.xlsx'];
+
 export enum ClaimNames {
   upn = 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/upn',
   name = 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name',
diff --git a/Composer/packages/server/src/controllers/project.ts b/Composer/packages/server/src/controllers/project.ts
index 52cf573ad0..945b9e2fbb 100644
--- a/Composer/packages/server/src/controllers/project.ts
+++ b/Composer/packages/server/src/controllers/project.ts
@@ -307,19 +307,43 @@ async function exportProject(req: Request, res: Response) {
   });
 }
 
-async function publishLuis(req: Request, res: Response) {
+async function setQnASettings(req: Request, res: Response) {
   const projectId = req.params.projectId;
   const user = await PluginLoader.getUserFromRequest(req);
 
   const currentProject = await BotProjectService.getProjectById(projectId, user);
   if (currentProject !== undefined) {
     try {
-      const luFiles = await currentProject.publishLuis(
-        req.body.luisConfig,
-        req.body.luFiles,
-        req.body.crossTrainConfig
-      );
-      res.status(200).json({ luFiles });
+      const qnaEndpointKey = await currentProject.updateQnaEndpointKey(req.body.subscriptionKey);
+      res.status(200).json(qnaEndpointKey);
+    } catch (error) {
+      res.status(400).json({
+        message: error instanceof Error ? error.message : error,
+      });
+    }
+  } else {
+    res.status(404).json({
+      message: 'No such bot project opened',
+    });
+  }
+}
+
+async function build(req: Request, res: Response) {
+  const projectId = req.params.projectId;
+  const user = await PluginLoader.getUserFromRequest(req);
+
+  const currentProject = await BotProjectService.getProjectById(projectId, user);
+  if (currentProject !== undefined) {
+    try {
+      const { luisConfig, qnaConfig, luFiles, qnaFiles, crossTrainConfig } = req.body;
+      const files = await currentProject.buildFiles({
+        luisConfig,
+        qnaConfig,
+        luFileIds: luFiles,
+        qnaFileIds: qnaFiles,
+        crossTrainConfig,
+      });
+      res.status(200).json(files);
     } catch (error) {
       res.status(400).json({
         message: error instanceof Error ? error.message : error,
@@ -400,7 +424,8 @@ export const ProjectController = {
   removeFile,
   updateSkill,
   getSkill,
-  publishLuis,
+  build,
+  setQnASettings,
   exportProject,
   saveProjectAs,
   createProject,
diff --git a/Composer/packages/server/src/controllers/utilities.ts b/Composer/packages/server/src/controllers/utilities.ts
new file mode 100644
index 0000000000..5c59e1bac8
--- /dev/null
+++ b/Composer/packages/server/src/controllers/utilities.ts
@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { Request, Response } from 'express';
+
+import { parseQnAContent } from '../models/utilities/parser';
+
+async function getQnaContent(req: Request, res: Response) {
+  try {
+    const urls = decodeURIComponent(req.query.urls).split(',');
+    res.status(200).json(await parseQnAContent(urls));
+  } catch (e) {
+    res.status(400).json({
+      message: e.message || e.text,
+    });
+  }
+}
+
+export const UtilitiesController = {
+  getQnaContent,
+};
diff --git a/Composer/packages/server/src/models/bot/botProject.ts b/Composer/packages/server/src/models/bot/botProject.ts
index 6ca23b4808..d12dd11fab 100644
--- a/Composer/packages/server/src/models/bot/botProject.ts
+++ b/Composer/packages/server/src/models/bot/botProject.ts
@@ -6,7 +6,7 @@ import fs from 'fs';
 
 import axios from 'axios';
 import { autofixReferInDialog } from '@bfc/indexers';
-import { getNewDesigner, FileInfo, Skill, Diagnostic, IBotProject, DialogSetting, ILuisConfig } from '@bfc/shared';
+import { getNewDesigner, FileInfo, Skill, Diagnostic, IBotProject, DialogSetting } from '@bfc/shared';
 import { UserIdentity, pluginLoader } from '@bfc/plugin-loader';
 
 import { Path } from '../../utility/path';
@@ -17,10 +17,9 @@ import { DefaultSettingManager } from '../settings/defaultSettingManager';
 import log from '../../logger';
 import { BotProjectService } from '../../services/project';
 
-import { ICrossTrainConfig } from './luPublisher';
+import { Builder } from './builder';
 import { IFileStorage } from './../storage/interface';
-import { LocationRef } from './interface';
-import { LuPublisher } from './luPublisher';
+import { LocationRef, IBuildConfig } from './interface';
 import { extractSkillManifestUrl } from './skillManager';
 import { defaultFilePath, serializeFiles, parseFileName } from './botStructure';
 
@@ -42,7 +41,7 @@ export class BotProject implements IBotProject {
   public dir: string;
   public dataDir: string;
   public fileStorage: IFileStorage;
-  public luPublisher: LuPublisher;
+  public builder: Builder;
   public defaultSDKSchema: {
     [key: string]: string;
   };
@@ -67,7 +66,7 @@ export class BotProject implements IBotProject {
 
     this.settingManager = new DefaultSettingManager(this.dir);
     this.fileStorage = StorageService.getStorageClient(this.ref.storageId, user);
-    this.luPublisher = new LuPublisher(this.dir, this.fileStorage, defaultLanguage);
+    this.builder = new Builder(this.dir, this.fileStorage, defaultLanguage);
   }
 
   public get dialogFiles() {
@@ -313,6 +312,7 @@ export class BotProject implements IBotProject {
       newDesigner = getNewDesigner(name, description);
     }
     content.$designer = newDesigner;
+    content.id = name;
     const updatedContent = autofixReferInDialog(botName, JSON.stringify(content, null, 2));
     await this._updateFile(relativePath, updatedContent);
     await serializeFiles(this.fileStorage, this.dataDir, botName);
@@ -392,18 +392,34 @@ export class BotProject implements IBotProject {
     return createdFiles;
   };
 
-  public publishLuis = async (luisConfig: ILuisConfig, fileIds: string[] = [], crossTrainConfig: ICrossTrainConfig) => {
-    if (fileIds.length && this.settings) {
+  public buildFiles = async ({
+    luisConfig,
+    qnaConfig,
+    luFileIds = [],
+    qnaFileIds = [],
+    crossTrainConfig,
+  }: IBuildConfig) => {
+    if ((luFileIds.length || qnaFileIds.length) && this.settings) {
       const luFiles: FileInfo[] = [];
-      fileIds.forEach((id) => {
+      luFileIds.forEach((id) => {
         const f = this.files.get(`${id}.lu`);
         if (f) {
           luFiles.push(f);
         }
       });
-
-      this.luPublisher.setPublishConfig(luisConfig, crossTrainConfig, this.settings.downsampling);
-      await this.luPublisher.publish(luFiles);
+      const qnaFiles: FileInfo[] = [];
+      qnaFileIds.forEach((id) => {
+        const f = this.files.get(`${id}.qna`);
+        if (f) {
+          qnaFiles.push(f);
+        }
+      });
+      this.builder.setBuildConfig(
+        { ...luisConfig, subscriptionKey: qnaConfig.subscriptionKey, qnaRegion: qnaConfig.qnaRegion },
+        crossTrainConfig,
+        this.settings.downsampling
+      );
+      await this.builder.build(luFiles, qnaFiles);
     }
   };
 
@@ -447,6 +463,16 @@ export class BotProject implements IBotProject {
     return true;
   }
 
+  // update qna endpointKey in settings
+  public updateQnaEndpointKey = async (subscriptionKey: string) => {
+    const qnaEndpointKey = await this.builder.getQnaEndpointKey(subscriptionKey, {
+      ...this.settings?.luis,
+      qnaRegion: this.settings?.qna.qnaRegion || this.settings?.luis.authoringRegion,
+      subscriptionKey,
+    });
+    return qnaEndpointKey;
+  };
+
   private async removeLocalRuntimeData(projectId) {
     const method = 'localpublish';
     if (pluginLoader.extensions.publish[method]?.methods?.stopBot) {
@@ -567,7 +593,7 @@ export class BotProject implements IBotProject {
     }
 
     const fileList = new Map<string, FileInfo>();
-    const patterns = ['**/*.dialog', '**/*.dialog.schema', '**/*.lg', '**/*.lu', 'manifests/*.json'];
+    const patterns = ['**/*.dialog', '**/*.dialog.schema', '**/*.lg', '**/*.lu', '**/*.qna', 'manifests/*.json'];
     for (const pattern of patterns) {
       // load only from the data dir, otherwise may get "build" versions from
       // deployment process
diff --git a/Composer/packages/server/src/models/bot/botStructure.ts b/Composer/packages/server/src/models/bot/botStructure.ts
index 2f460ec3b6..319c93ac87 100644
--- a/Composer/packages/server/src/models/bot/botStructure.ts
+++ b/Composer/packages/server/src/models/bot/botStructure.ts
@@ -10,6 +10,7 @@ const BotStructureTemplate = {
   entry: '${BOTNAME}.dialog',
   lg: 'language-generation/${LOCALE}/${BOTNAME}.${LOCALE}.lg',
   lu: 'language-understanding/${LOCALE}/${BOTNAME}.${LOCALE}.lu',
+  qna: 'knowledge-base/en-us/${BOTNAME}.en-us.qna',
   dialogSchema: '${BOTNAME}.dialog.schema',
   schema: '${FILENAME}',
   settings: 'settings/${FILENAME}',
@@ -20,6 +21,7 @@ const BotStructureTemplate = {
     entry: 'dialogs/${DIALOGNAME}/${DIALOGNAME}.dialog',
     lg: 'dialogs/${DIALOGNAME}/language-generation/${LOCALE}/${DIALOGNAME}.${LOCALE}.lg',
     lu: 'dialogs/${DIALOGNAME}/language-understanding/${LOCALE}/${DIALOGNAME}.${LOCALE}.lu',
+    qna: 'dialogs/${DIALOGNAME}/knowledge-base/en-us/${DIALOGNAME}.en-us.qna',
     dialogSchema: 'dialogs/${DIALOGNAME}/${DIALOGNAME}.dialog.schema',
   },
   skillManifests: 'manifests/${MANIFESTFILENAME}',
@@ -76,6 +78,9 @@ export const defaultFilePath = (botName: string, defaultLocale: string, filename
   if (fileType === FileExtensions.Lu) {
     TemplatePath = isRootFile ? BotStructureTemplate.lu : BotStructureTemplate.dialogs.lu;
   }
+  if (fileType === FileExtensions.Qna) {
+    TemplatePath = isRootFile ? BotStructureTemplate.qna : BotStructureTemplate.dialogs.qna;
+  }
   if (fileType === FileExtensions.DialogSchema) {
     TemplatePath = isRootFile ? BotStructureTemplate.dialogSchema : BotStructureTemplate.dialogs.dialogSchema;
   }
@@ -92,6 +97,7 @@ export const serializeFiles = async (fileStorage, rootPath, botName) => {
     templateInterpolate(BotStructureTemplate.entry, { BOTNAME: '*' }),
     templateInterpolate(BotStructureTemplate.lg, { LOCALE: '*', BOTNAME: '*' }),
     templateInterpolate(BotStructureTemplate.lu, { LOCALE: '*', BOTNAME: '*' }),
+    templateInterpolate(BotStructureTemplate.qna, { LOCALE: '*', BOTNAME: '*' }),
     templateInterpolate(BotStructureTemplate.dialogSchema, { BOTNAME: '*' }),
   ];
   for (const pattern of entryPatterns) {
diff --git a/Composer/packages/server/src/models/bot/luPublisher.ts b/Composer/packages/server/src/models/bot/builder.ts
similarity index 53%
rename from Composer/packages/server/src/models/bot/luPublisher.ts
rename to Composer/packages/server/src/models/bot/builder.ts
index 7f94137c06..66b976e598 100644
--- a/Composer/packages/server/src/models/bot/luPublisher.ts
+++ b/Composer/packages/server/src/models/bot/builder.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { FileInfo, ILuisConfig } from '@bfc/shared';
+import { FileInfo, IConfig } from '@bfc/shared';
 
 import { Path } from '../../utility/path';
 import { IFileStorage } from '../storage/interface';
@@ -15,6 +15,8 @@ const crossTrainer = require('@microsoft/bf-lu/lib/parser/cross-train/crossTrain
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const luBuild = require('@microsoft/bf-lu/lib/parser/lubuild/builder.js');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
+const qnaBuild = require('@microsoft/bf-lu/lib/parser/qnabuild/builder.js');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const LuisBuilder = require('@microsoft/bf-lu/lib/parser/luis/luisBuilder');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const luisToLuContent = require('@microsoft/bf-lu/lib/parser/luis/luConverter');
@@ -27,6 +29,7 @@ export interface ICrossTrainConfig {
   triggerRules: { [key: string]: any };
   intentName: string;
   verbose: boolean;
+  botName: string;
 }
 
 export interface IDownSamplingConfig {
@@ -34,13 +37,13 @@ export interface IDownSamplingConfig {
   maxUtteranceAllowed: number;
 }
 
-export class LuPublisher {
+export class Builder {
   public botDir: string;
   public dialogsDir: string;
   public generatedFolderPath: string;
   public interruptionFolderPath: string;
   public storage: IFileStorage;
-  public config: ILuisConfig | null = null;
+  public config: IConfig | null = null;
   public downSamplingConfig: IDownSamplingConfig = { maxImbalanceRatio: 0, maxUtteranceAllowed: 0 };
   private _locale: string;
 
@@ -49,9 +52,13 @@ export class LuPublisher {
     triggerRules: {},
     intentName: '_Interruption',
     verbose: true,
+    botName: '',
   };
 
-  private builder = new luBuild.Builder((message) => {
+  private luBuilder = new luBuild.Builder((message) => {
+    log(message);
+  });
+  private qnaBuilder = new qnaBuild.Builder((message) => {
     log(message);
   });
 
@@ -64,28 +71,36 @@ export class LuPublisher {
     this._locale = locale;
   }
 
-  public publish = async (files: FileInfo[]) => {
+  public build = async (luFiles: FileInfo[], qnaFiles: FileInfo[]) => {
     try {
       await this.createGeneratedDir();
 
       //do cross train before publish
-      await this.crossTrain(files);
+      await this.crossTrain(luFiles, qnaFiles);
+      const { interruptionLuFiles, interruptionQnaFiles } = await this.getInterruptionFiles();
+      await this.runLuBuild(interruptionLuFiles);
+      await this.runQnaBuild(interruptionQnaFiles);
 
-      await this.runBuild(files);
       //remove the cross train result
       await this.cleanCrossTrain();
     } catch (error) {
-      throw new Error(error.message ?? error.text ?? 'Error publishing to LUIS.');
+      throw new Error(error.message ?? error.text ?? 'Error publishing to LUIS or QNA.');
+    }
+  };
+
+  public getQnaEndpointKey = async (subscriptionKey: string, config: IConfig | Record<string, any>) => {
+    try {
+      const subscriptionKeyEndpoint = `https://${config?.qnaRegion}.api.cognitive.microsoft.com/qnamaker/v4.0`;
+      const endpointKey = await this.qnaBuilder.getEndpointKeys(subscriptionKey, subscriptionKeyEndpoint);
+      return endpointKey.primaryEndpointKey;
+    } catch (error) {
+      throw new Error(error.message ?? error.text ?? 'Error publishing to get QNA EndpointKey.');
     }
   };
 
-  public setPublishConfig(
-    luisConfig: ILuisConfig,
-    crossTrainConfig: ICrossTrainConfig,
-    downSamplingConfig: IDownSamplingConfig
-  ) {
-    this.config = luisConfig;
-    this.crossTrainConfig = crossTrainConfig;
+  public setBuildConfig(config: IConfig, crossTrainConfig: ICrossTrainConfig, downSamplingConfig: IDownSamplingConfig) {
+    this.config = config;
+    this.crossTrainConfig = { ...crossTrainConfig, botName: this.config.name };
     this.downSamplingConfig = downSamplingConfig;
   }
 
@@ -103,19 +118,43 @@ export class LuPublisher {
     await this.storage.mkDir(this.generatedFolderPath);
   }
 
-  private needCrossTrain() {
-    return this.crossTrainConfig.rootIds.length > 0;
-  }
-
-  private async crossTrain(files: FileInfo[]) {
-    if (!this.needCrossTrain()) return;
-    const luContents = files.map((file) => {
+  private async crossTrain(luFiles: FileInfo[], qnaFiles: FileInfo[]) {
+    const luContents = luFiles.map((file) => {
       return { content: file.content, id: file.name };
     });
 
-    const result = await crossTrainer.crossTrain(luContents, [], this.crossTrainConfig);
+    const qnaContents = qnaFiles.map((file) => {
+      return { content: file.content, id: file.name };
+    });
+    const result = await crossTrainer.crossTrain(luContents, qnaContents, this.crossTrainConfig);
 
     await this.writeFiles(result.luResult);
+    await this.writeFiles(result.qnaResult);
+  }
+
+  private async getInterruptionFiles() {
+    const files = await this.storage.readDir(this.interruptionFolderPath);
+    const interruptionLuFiles: FileInfo[] = [];
+    const interruptionQnaFiles: FileInfo[] = [];
+
+    for (const file of files) {
+      const content = await this.storage.readFile(Path.join(this.interruptionFolderPath, file));
+      const path = Path.join(this.interruptionFolderPath, file);
+      const stats = await this.storage.stat(path);
+      const fileInfo: FileInfo = {
+        name: file,
+        content,
+        path: Path.join(this.interruptionFolderPath, file),
+        relativePath: Path.relative(this.interruptionFolderPath, path),
+        lastModified: stats.lastModified,
+      };
+      if (file.endsWith('qna')) {
+        interruptionQnaFiles.push(fileInfo);
+      } else if (file.endsWith('lu')) {
+        interruptionLuFiles.push(fileInfo);
+      }
+    }
+    return { interruptionLuFiles, interruptionQnaFiles };
   }
 
   private doDownSampling(luObject: any) {
@@ -156,17 +195,22 @@ export class LuPublisher {
     }
   }
 
-  private async runBuild(files: FileInfo[]) {
-    const config = await this._getConfig(files);
-    if (config.models.length === 0) {
-      throw new Error('No LUIS files exist');
-    }
+  private async runLuBuild(files: FileInfo[]) {
+    const config = await this._getConfig(files, 'lu');
+    // if (config.models.length === 0) {
+    //   throw new Error('No LUIS files exist');
+    // }
 
-    const loadResult = await this._loadLuContents(config.models);
+    const loadResult = await this.luBuilder.loadContents(
+      config.models,
+      config.fallbackLocal,
+      config.suffix,
+      config.region
+    );
     loadResult.luContents = await this.downsizeUtterances(loadResult.luContents);
     const authoringEndpoint = config.authoringEndpoint ?? `https://${config.region}.api.cognitive.microsoft.com`;
 
-    const buildResult = await this.builder.build(
+    const buildResult = await this.luBuilder.build(
       loadResult.luContents,
       loadResult.recognizers,
       config.authoringKey,
@@ -177,9 +221,47 @@ export class LuPublisher {
       true,
       false,
       loadResult.multiRecognizers,
-      loadResult.settings
+      loadResult.settings,
+      loadResult.crosstrainedRecognizers,
+      'crosstrained'
     );
-    await this.builder.writeDialogAssets(buildResult, true, this.generatedFolderPath);
+    await this.luBuilder.writeDialogAssets(buildResult, true, this.generatedFolderPath);
+  }
+
+  private async runQnaBuild(files: FileInfo[]) {
+    const config = await this._getConfig(files, 'qna');
+    // if (config.models.length === 0) {
+    //   throw new Error('No QnA files exist');
+    // }
+
+    const loadResult = await this.qnaBuilder.loadContents(
+      config.models,
+      config.botName,
+      config.suffix,
+      config.qnaRegion,
+      config.fallbackLocal
+    );
+    if (loadResult.qnaContents) {
+      const subscriptionKeyEndpoint =
+        config.endpoint ?? `https://${config.qnaRegion}.api.cognitive.microsoft.com/qnamaker/v4.0`;
+
+      const buildResult = await this.qnaBuilder.build(
+        loadResult.qnaContents,
+        loadResult.recognizers,
+        config.subscriptionKey,
+        subscriptionKeyEndpoint,
+        config.botName,
+        config.suffix,
+        config.fallbackLocal,
+        loadResult.multiRecognizers,
+        loadResult.settings,
+        loadResult.crosstrainedRecognizers,
+        'crosstrained'
+      );
+      await this.qnaBuilder.writeDialogAssets(buildResult, true, this.generatedFolderPath);
+    } else {
+      await this.qnaBuilder.writeDialogAssets(loadResult.crosstrainedRecognizer.save(), true, this.generatedFolderPath);
+    }
   }
 
   //delete files in generated folder
@@ -198,14 +280,16 @@ export class LuPublisher {
     }
   }
 
-  private _getConfig = async (files: FileInfo[]) => {
+  private _getConfig = async (files: FileInfo[], fileSuffix) => {
     if (!this.config) {
       throw new Error('Please complete your LUIS settings');
     }
 
-    const luConfig = {
+    const config = {
       authoringKey: this.config.authoringKey || '',
+      subscriptionKey: this.config.subscriptionKey || '',
       region: this.config.authoringRegion || '',
+      qnaRegion: this.config.qnaRegion || this.config.authoringRegion || '',
       botName: this.config.name || '',
       suffix: this.config.environment || '',
       fallbackLocal: this.config.defaultLanguage || 'en-us',
@@ -214,35 +298,23 @@ export class LuPublisher {
       models: [] as string[],
     };
 
-    //add all lu file after cross train
+    //add all file after cross train
     let paths: string[] = [];
-    if (this.needCrossTrain()) {
-      paths = await this.storage.glob('**/*.lu', this.interruptionFolderPath);
-      luConfig.models = paths.map((filePath) => Path.join(this.interruptionFolderPath, filePath));
-    }
+    paths = await this.storage.glob('**/*.' + fileSuffix, this.interruptionFolderPath);
+    config.models = paths.map((filePath) => Path.join(this.interruptionFolderPath, filePath));
 
     const pathSet = new Set(paths);
 
-    //add the lu file that are not in interruption folder.
+    //add the file that are not in interruption folder.
     files.forEach((file) => {
       if (!pathSet.has(file.name)) {
-        luConfig.models.push(Path.resolve(this.botDir, file.relativePath));
+        config.models.push(Path.resolve(this.botDir, file.relativePath));
       }
     });
-    return luConfig;
-  };
-
-  private _loadLuContents = async (paths: string[]) => {
-    return await this.builder.loadContents(
-      paths,
-      this._locale,
-      this.config?.environment || '',
-      this.config?.authoringRegion || ''
-    );
+    return config;
   };
 
   private async cleanCrossTrain() {
-    if (!this.needCrossTrain()) return;
     await this.deleteDir(this.interruptionFolderPath);
   }
 }
diff --git a/Composer/packages/server/src/models/bot/interface.ts b/Composer/packages/server/src/models/bot/interface.ts
index be6ebf8081..e8d28fb959 100644
--- a/Composer/packages/server/src/models/bot/interface.ts
+++ b/Composer/packages/server/src/models/bot/interface.ts
@@ -1,11 +1,23 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { ILuisConfig, IQnAConfig } from '@bfc/shared';
+
+import { ICrossTrainConfig } from './builder';
+
 export interface LocationRef {
   storageId: string;
   path: string;
 }
 
+export interface IBuildConfig {
+  luisConfig: ILuisConfig;
+  qnaConfig: IQnAConfig;
+  luFileIds: string[];
+  qnaFileIds: string[];
+  crossTrainConfig: ICrossTrainConfig;
+}
+
 export interface ILuisSettings {
   luis: {
     [key: string]: string;
diff --git a/Composer/packages/server/src/models/settings/defaultSettingManager.ts b/Composer/packages/server/src/models/settings/defaultSettingManager.ts
index 2adeccf442..be3b616588 100644
--- a/Composer/packages/server/src/models/settings/defaultSettingManager.ts
+++ b/Composer/packages/server/src/models/settings/defaultSettingManager.ts
@@ -50,9 +50,11 @@ export class DefaultSettingManager extends FileSettingManager {
       },
       publishTargets: [],
       qna: {
+        subscriptionKey: '',
         knowledgebaseid: '',
-        endpointkey: '',
+        endpointKey: '',
         hostname: '',
+        qnaRegion: 'westus',
       },
       telemetry: {
         logPersonalInformation: false,
diff --git a/Composer/packages/server/src/models/storage/localDiskStorage.ts b/Composer/packages/server/src/models/storage/localDiskStorage.ts
index 675bb7b77a..bd49659a05 100644
--- a/Composer/packages/server/src/models/storage/localDiskStorage.ts
+++ b/Composer/packages/server/src/models/storage/localDiskStorage.ts
@@ -104,6 +104,7 @@ export class LocalDiskStorage implements IFileStorage {
       path.format({ dir: `${source}/language-generation/` }),
       path.format({ dir: `${source}/settings/` }),
       path.format({ dir: `${source}/generated/` }),
+      path.format({ dir: `${source}/knowledge-base/` }),
     ].forEach((directory) => {
       archive.directory(directory, directory.split(source)[1]);
     });
diff --git a/Composer/packages/server/src/models/utilities/parser.ts b/Composer/packages/server/src/models/utilities/parser.ts
new file mode 100644
index 0000000000..47a9e1ca4d
--- /dev/null
+++ b/Composer/packages/server/src/models/utilities/parser.ts
@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import fs from 'fs';
+
+import { v4 as uuid } from 'uuid';
+
+import { Path } from '../../utility/path';
+
+import log from './../../logger';
+import { DOC_EXTENSIONS, QNA_SUBSCRIPTION_KEY, COGNITIVE_SERVICES_ENDPOINTS } from './../../constants';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const qnaBuild = require('@microsoft/bf-lu/lib/parser/qnabuild/builder.js');
+
+const debug = log.extend('helper-parser');
+
+const BuildEnvPath = Path.join(__dirname, '../../env.json');
+
+function getBuildEnvironment() {
+  if (fs.existsSync(BuildEnvPath)) {
+    return JSON.parse(fs.readFileSync(BuildEnvPath, 'utf-8'));
+  }
+
+  return {};
+}
+
+async function importQnAFromUrl(builder: any, url: string, subscriptionKey: string) {
+  url = url.trim();
+  let onlineQnAContent = '';
+  if (DOC_EXTENSIONS.some((e) => url.endsWith(e))) {
+    const index = url.lastIndexOf('.');
+    const extension = url.substring(index);
+    onlineQnAContent = await builder.importFileReference(
+      `onlineFile${extension}`,
+      url,
+      subscriptionKey,
+      COGNITIVE_SERVICES_ENDPOINTS,
+      uuid()
+    );
+  } else {
+    onlineQnAContent = await builder.importUrlReference(url, subscriptionKey, COGNITIVE_SERVICES_ENDPOINTS, uuid());
+  }
+  return onlineQnAContent;
+}
+
+//https://azure.microsoft.com/en-us/pricing/details/cognitive-services/qna-maker/
+//limited to 3 transactions per second
+export async function parseQnAContent(urls: string[]) {
+  const builder = new qnaBuild.Builder((message: string) => debug(message));
+
+  let qnaContent = '';
+
+  const subscriptionKey = QNA_SUBSCRIPTION_KEY || getBuildEnvironment()?.QNA_SUBSCRIPTION_KEY;
+
+  if (!subscriptionKey) {
+    throw new Error('Missing subscription key for QnAMaker');
+  }
+
+  const limitedNumInBatch = 3;
+  let i = 0;
+
+  while (i < urls.length) {
+    const batchUrls = urls.slice(i, i + limitedNumInBatch);
+    const contents = await Promise.all(
+      batchUrls.map(async (url) => {
+        return await importQnAFromUrl(builder, url, subscriptionKey);
+      })
+    );
+    contents.forEach((content) => {
+      qnaContent += content;
+    });
+    i = i + limitedNumInBatch;
+  }
+  return qnaContent;
+}
diff --git a/Composer/packages/server/src/router/api.ts b/Composer/packages/server/src/router/api.ts
index 7a75f0faf0..01bd8c190c 100644
--- a/Composer/packages/server/src/router/api.ts
+++ b/Composer/packages/server/src/router/api.ts
@@ -9,6 +9,8 @@ import { PublishController } from '../controllers/publisher';
 import { AssetController } from '../controllers/asset';
 import { EjectController } from '../controllers/eject';
 
+import { UtilitiesController } from './../controllers/utilities';
+
 const router: Router = express.Router({});
 
 router.post('/projects', ProjectController.createProject);
@@ -23,7 +25,8 @@ router.delete('/projects/:projectId/files/:name', ProjectController.removeFile);
 router.post('/projects/:projectId/files', ProjectController.createFile);
 router.post('/projects/:projectId/skills', ProjectController.updateSkill);
 router.post('/projects/:projectId/skill/check', ProjectController.getSkill);
-router.post('/projects/:projectId/luFiles/publish', ProjectController.publishLuis);
+router.post('/projects/:projectId/build', ProjectController.build);
+router.post('/projects/:projectId/qnaSettings/set', ProjectController.setQnASettings);
 router.post('/projects/:projectId/project/saveAs', ProjectController.saveProjectAs);
 router.get('/projects/:projectId/export', ProjectController.exportProject);
 
@@ -56,6 +59,9 @@ router.post('/runtime/eject/:projectId/:template', EjectController.eject);
 //assets
 router.get('/assets/projectTemplates', AssetController.getProjTemplates);
 
+//help api
+router.get('/utilities/qna/parse', UtilitiesController.getQnaContent);
+
 const ErrorHandler = (handler: RequestHandler) => (req: Request, res: Response, next: NextFunction) => {
   Promise.resolve(handler(req, res, next)).catch(next);
 };
diff --git a/Composer/packages/test-utils/src/mergeConfig.ts b/Composer/packages/test-utils/src/mergeConfig.ts
index 5cb63db626..c2d9d6c3d7 100644
--- a/Composer/packages/test-utils/src/mergeConfig.ts
+++ b/Composer/packages/test-utils/src/mergeConfig.ts
@@ -12,7 +12,7 @@ function mergeConfig<T extends object>(base: T, overrides?: T) {
 
   return mergeWith(base, overrides, (objValue, srcValue) => {
     if (isArray(objValue)) {
-      return objValue.concat(srcValue);
+      return srcValue.concat(objValue);
     }
   });
 }
diff --git a/Composer/packages/tools/language-servers/language-understanding/package.json b/Composer/packages/tools/language-servers/language-understanding/package.json
index 93493aa6a4..6bb898d29c 100644
--- a/Composer/packages/tools/language-servers/language-understanding/package.json
+++ b/Composer/packages/tools/language-servers/language-understanding/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@microsoft/bf-cli-command": "^4.10.0-preview.141651",
-    "@microsoft/bf-lu": "^4.10.0-dev.20200728.930f45e",
+    "@microsoft/bf-lu": "^4.10.0-dev.20200808.5a7c973",
     "express": "^4.15.2",
     "monaco-languageclient": "^0.10.0",
     "normalize-url": "^2.0.1",
diff --git a/Composer/packages/ui-plugins/composer/src/index.ts b/Composer/packages/ui-plugins/composer/src/index.ts
index 45789e589f..f1d24104b8 100644
--- a/Composer/packages/ui-plugins/composer/src/index.ts
+++ b/Composer/packages/ui-plugins/composer/src/index.ts
@@ -2,21 +2,14 @@
 // Licensed under the MIT License.
 
 import { PluginConfig, FormUISchema, RecognizerSchema, UISchema, MenuUISchema } from '@bfc/extension';
-import { IntentField, RecognizerField, RegexIntentField } from '@bfc/adaptive-form';
 import { SDKKinds } from '@bfc/shared';
 import formatMessage from 'format-message';
 import mapValues from 'lodash/mapValues';
+import { IntentField, RecognizerField, RegexIntentField, QnAActionsField } from '@bfc/adaptive-form';
 
 import { DefaultMenuSchema } from './defaultMenuSchema';
 
 const DefaultRecognizers: RecognizerSchema[] = [
-  {
-    id: 'none',
-    displayName: () => formatMessage('None'),
-    isSelected: (data) => data === undefined,
-    handleRecognizerChange: (props) => props.onChange(undefined),
-    renameIntent: () => {},
-  },
   {
     id: SDKKinds.RegexRecognizer,
     displayName: () => formatMessage('Regular Expression'),
@@ -32,6 +25,44 @@ const DefaultRecognizers: RecognizerSchema[] = [
       shellApi.renameRegExIntent(currentDialog.id, intentName, newIntentName);
     },
   },
+  {
+    id: SDKKinds.CustomRecognizer,
+    displayName: () => formatMessage('Custom recognizer'),
+    isSelected: (data) => typeof data === 'object',
+    handleRecognizerChange: (props) =>
+      props.onChange({
+        $kind: 'Microsoft.MultiLanguageRecognizer',
+        recognizers: {
+          'en-us': {
+            $kind: 'Microsoft.RegexRecognizer',
+            intents: [
+              {
+                intent: 'greeting',
+                pattern: 'hello',
+              },
+              {
+                intent: 'test',
+                pattern: 'test',
+              },
+            ],
+          },
+          'zh-cn': {
+            $kind: 'Microsoft.RegexRecognizer',
+            intents: [
+              {
+                intent: 'greeting',
+                pattern: '你好',
+              },
+              {
+                intent: 'test',
+                pattern: '测试',
+              },
+            ],
+          },
+        },
+      }),
+    renameIntent: () => {},
+  },
 ];
 
 const DefaultFormSchema: FormUISchema = {
@@ -172,6 +203,17 @@ const DefaultFormSchema: FormUISchema = {
       },
     },
   },
+  [SDKKinds.OnQnAMatch]: {
+    label: () => formatMessage('QnA Intent recognized'),
+    subtitle: () => formatMessage('QnA Intent recognized'),
+    order: ['actions', 'condition', '*'],
+    hidden: ['entities'],
+    properties: {
+      actions: {
+        field: QnAActionsField,
+      },
+    },
+  },
 };
 
 const synthesizeUISchema = (formSchema: FormUISchema, menuSchema: MenuUISchema): UISchema => {
diff --git a/Composer/packages/ui-plugins/cross-trained/.eslintrc.js b/Composer/packages/ui-plugins/cross-trained/.eslintrc.js
new file mode 100644
index 0000000000..ccecb8e9c0
--- /dev/null
+++ b/Composer/packages/ui-plugins/cross-trained/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../../.eslintrc.react.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/Composer/packages/ui-plugins/cross-trained/.gitignore b/Composer/packages/ui-plugins/cross-trained/.gitignore
new file mode 100644
index 0000000000..a65b41774a
--- /dev/null
+++ b/Composer/packages/ui-plugins/cross-trained/.gitignore
@@ -0,0 +1 @@
+lib
diff --git a/Composer/packages/ui-plugins/cross-trained/jest.config.js b/Composer/packages/ui-plugins/cross-trained/jest.config.js
new file mode 100644
index 0000000000..7d70674e34
--- /dev/null
+++ b/Composer/packages/ui-plugins/cross-trained/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: 'ui-plugin/luis',
+  preset: 'ts-jest/presets/js-with-ts',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};
diff --git a/Composer/packages/ui-plugins/cross-trained/package.json b/Composer/packages/ui-plugins/cross-trained/package.json
new file mode 100644
index 0000000000..cf1c7eb5dd
--- /dev/null
+++ b/Composer/packages/ui-plugins/cross-trained/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@bfc/ui-plugin-cross-trained",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Botframework Composer plugin that adds crossTrained recognizer set.",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src",
+    "prepare": "yarn build"
+  },
+  "keywords": [
+    "botframework",
+    "composer"
+  ],
+  "author": "jun.long@microsoft.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "dependencies": {
+    "@bfc/shared": "*",
+    "@bfc/indexers": "*",
+    "@emotion/core": "^10.0.27"
+  }
+}
diff --git a/Composer/packages/ui-plugins/cross-trained/src/index.ts b/Composer/packages/ui-plugins/cross-trained/src/index.ts
new file mode 100644
index 0000000000..0173b28a73
--- /dev/null
+++ b/Composer/packages/ui-plugins/cross-trained/src/index.ts
@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { PluginConfig } from '@bfc/extension';
+import { SDKKinds } from '@bfc/shared';
+
+const config: PluginConfig = {
+  recognizers: [
+    {
+      id: SDKKinds.CrossTrainedRecognizerSet,
+      displayName: 'Default recognizer',
+      isSelected: (data) => {
+        return typeof data === 'string';
+      },
+      handleRecognizerChange: (props, shellData, _) => {
+        const { qnaFiles, luFiles, currentDialog, locale } = shellData;
+        const qnaFile = qnaFiles.find((f) => f.id === `${currentDialog.id}.${locale}`);
+        const luFile = luFiles.find((f) => f.id === `${currentDialog.id}.${locale}`);
+
+        if (qnaFile && luFile) {
+          // strip locale out of id so it doesn't get serialized
+          // into the .dialog file
+          props.onChange(`${currentDialog.id}.lu.qna`);
+        } else {
+          alert(`NO LU OR QNA FILE WITH NAME ${currentDialog.id}`);
+        }
+      },
+      renameIntent: () => {},
+    },
+  ],
+};
+
+export default config;
diff --git a/Composer/packages/ui-plugins/cross-trained/tsconfig.build.json b/Composer/packages/ui-plugins/cross-trained/tsconfig.build.json
new file mode 100644
index 0000000000..f7780e4d5e
--- /dev/null
+++ b/Composer/packages/ui-plugins/cross-trained/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}
diff --git a/Composer/packages/ui-plugins/cross-trained/tsconfig.json b/Composer/packages/ui-plugins/cross-trained/tsconfig.json
new file mode 100644
index 0000000000..3188b0d622
--- /dev/null
+++ b/Composer/packages/ui-plugins/cross-trained/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib/",
+  },
+  "include": ["src"]
+}
diff --git a/Composer/packages/ui-plugins/prompts/src/PromptField/UserInput.tsx b/Composer/packages/ui-plugins/prompts/src/PromptField/UserInput.tsx
index 9968208b40..a8f619231c 100644
--- a/Composer/packages/ui-plugins/prompts/src/PromptField/UserInput.tsx
+++ b/Composer/packages/ui-plugins/prompts/src/PromptField/UserInput.tsx
@@ -39,7 +39,12 @@ const UserInput: React.FC<PromptFieldProps<MicrosoftInputDialog>> = (props) => {
   const intentName = new LuMetaData(new LuType($kind).toString(), designerId).toString();
 
   const recognizer = recognizers.find((r) => r.isSelected(currentDialog?.content?.recognizer));
-  const Editor = recognizer?.id === SDKKinds.LuisRecognizer && recognizer?.editor;
+  let Editor;
+  if (recognizer && recognizer.id === SDKKinds.CrossTrainedRecognizerSet) {
+    Editor = recognizers.find((r) => r.id === SDKKinds.LuisRecognizer)?.editor;
+  } else {
+    Editor = recognizer?.editor;
+  }
   const intentLabel = formatMessage('Expected responses (intent: #{intentName})', { intentName });
 
   return (
diff --git a/Composer/plugins/azurePublish/src/deploy.ts b/Composer/plugins/azurePublish/src/deploy.ts
index 4609409754..aa94f8a621 100644
--- a/Composer/plugins/azurePublish/src/deploy.ts
+++ b/Composer/plugins/azurePublish/src/deploy.ts
@@ -8,7 +8,7 @@ import * as rp from 'request-promise';
 
 import { BotProjectDeployConfig } from './botProjectDeployConfig';
 import { BotProjectDeployLoggerType } from './botProjectLoggerType';
-import { LuisPublish } from './luis';
+import { LuisAndQnaPublish } from './luisAndQnA';
 import archiver = require('archiver');
 
 export class BotProjectDeploy {
@@ -55,35 +55,32 @@ export class BotProjectDeploy {
 
       // STEP 2: UPDATE LUIS
       // Do the LUIS build if LUIS settings are present
-      if (settings.luis) {
-        const luisAuthoringKey = settings.luis.authoringKey;
-        const luisAuthoringRegion = settings.luis.authoringRegion || settings.luis.region;
-
-        if (luisAuthoringKey && luisAuthoringRegion) {
-          if (!language) {
-            language = 'en-us';
-          }
-          const luis = new LuisPublish({ logger: this.logger });
-
-          // this function returns an object that contains the luis APP ids mapping
-          // each dialog to its matching app.
-          const luisAppIDs = await luis.publishLuis(
-            this.projPath,
-            name,
-            environment,
-            this.accessToken,
-            language,
-            settings.luis,
-            luisResource
-          );
-
-          // amend luis settings with newly generated values
-          settings.luis = {
-            ...settings.luis,
-            ...luisAppIDs,
-          };
-        }
+      if (!language) {
+        language = 'en-us';
       }
+      const publisher = new LuisAndQnaPublish({ logger: this.logger, projPath: this.projPath });
+
+      // this function returns an object that contains the luis APP ids mapping
+      // each dialog to its matching app.
+      const { luisAppIds, qnaConfig } = await publisher.publishLuisAndQna(
+        name,
+        environment,
+        this.accessToken,
+        language,
+        settings.luis,
+        settings.qna,
+        luisResource
+      );
+
+      // amend luis settings with newly generated values
+      settings.luis = {
+        ...settings.luis,
+        ...luisAppIds,
+      };
+      settings.qna = {
+        ...settings.qna,
+        ...qnaConfig,
+      };
 
       // STEP 3: BUILD
       // run any platform specific build steps.
diff --git a/Composer/plugins/azurePublish/src/luis.ts b/Composer/plugins/azurePublish/src/luis.ts
deleted file mode 100644
index 4c85aa3573..0000000000
--- a/Composer/plugins/azurePublish/src/luis.ts
+++ /dev/null
@@ -1,227 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import * as path from 'path';
-import { promisify } from 'util';
-
-import * as fs from 'fs-extra';
-import * as rp from 'request-promise';
-import { ILuisConfig } from '@bfc/shared';
-
-import { BotProjectDeployLoggerType } from './botProjectLoggerType';
-
-const luBuild = require('@microsoft/bf-lu/lib/parser/lubuild/builder.js');
-const readdir: any = promisify(fs.readdir);
-
-export interface LuisPublishConfig {
-  // Logger
-  logger: (string) => any;
-  [key: string]: any;
-}
-
-export class LuisPublish {
-  private logger: (string) => any;
-
-  constructor(config: LuisPublishConfig) {
-    this.logger = config.logger;
-  }
-
-  /*******************************************************************************************************************************/
-  /* This section has to do with publishing LU files to LUIS
-  /*******************************************************************************************************************************/
-
-  /**
-   * return an array of all the files in a given directory
-   * @param dir
-   */
-  private async getFiles(dir: string): Promise<string[]> {
-    const dirents = await readdir(dir, { withFileTypes: true });
-    const files = await Promise.all(
-      dirents.map((dirent) => {
-        const res = path.resolve(dir, dirent.name);
-        return dirent.isDirectory() ? this.getFiles(res) : res;
-      })
-    );
-    return Array.prototype.concat(...files);
-  }
-
-  private notEmptyLuisModel(file: string) {
-    return fs.readFileSync(file).length > 0;
-  }
-
-  /**
-   * Helper function to get the appropriate account out of a list of accounts
-   * @param accounts
-   * @param filter
-   */
-  private getAccount(accounts: any, filter: string) {
-    for (const account of accounts) {
-      if (account.AccountName === filter) {
-        return account;
-      }
-    }
-  }
-
-  // Run through the lubuild process
-  // This happens in the build folder, NOT in the original source folder
-  public async publishLuis(
-    workingFolder: string,
-    name: string,
-    environment: string,
-    accessToken: string,
-    language: string,
-    luisSettings: ILuisConfig,
-    luisResource?: string
-  ) {
-    const { authoringKey: luisAuthoringKey, authoringRegion: luisAuthoringRegion } = luisSettings;
-    let { endpoint: luisEndpoint, authoringEndpoint: luisAuthoringEndpoint } = luisSettings;
-
-    if (luisAuthoringKey && luisAuthoringRegion) {
-      // Get a list of all the .lu files that are not empty
-      const botFiles = await this.getFiles(workingFolder);
-      const modelFiles = botFiles.filter((name) => {
-        return name.endsWith('.lu') && this.notEmptyLuisModel(name);
-      });
-
-      // Identify the generated folder
-      const generatedFolder = path.join(workingFolder, 'ComposerDialogs/generated');
-
-      // Identify the deployment settings file
-      // const deploymentSettingsPath = path.join(workingFolder, 'appsettings.deployment.json');
-
-      // Ensure the generated folder exists
-      if (!(await fs.pathExists(generatedFolder))) {
-        await fs.mkdir(generatedFolder);
-      }
-
-      // Instantiate the LuBuild object from the LU parsing library
-      // This object is responsible for parsing the LU files and sending them to LUIS
-      const builder = new luBuild.Builder((msg) =>
-        this.logger({
-          status: BotProjectDeployLoggerType.DEPLOY_INFO,
-          message: msg,
-        })
-      );
-
-      // Pass in the list of the non-empty LU files we got above...
-      const loadResult = await builder.loadContents(
-        modelFiles,
-        language || 'en-us',
-        environment || '',
-        luisAuthoringRegion || ''
-      );
-
-      // set the default endpoint
-      if (!luisEndpoint) {
-        luisEndpoint = `https://${luisAuthoringRegion}.api.cognitive.microsoft.com`;
-      }
-
-      // if not specified, set the authoring endpoint
-      if (!luisAuthoringEndpoint) {
-        luisAuthoringEndpoint = luisEndpoint;
-      }
-
-      // Perform the Lubuild process
-      // This will create new luis apps for each of the luis models represented in the LU files
-      const buildResult = await builder.build(
-        loadResult.luContents,
-        loadResult.recognizers,
-        luisAuthoringKey,
-        luisAuthoringEndpoint,
-        name,
-        environment,
-        language,
-        true,
-        false,
-        loadResult.multiRecognizers,
-        loadResult.settings
-      );
-
-      // Write the generated files to the generated folder
-      await builder.writeDialogAssets(buildResult, true, generatedFolder);
-
-      this.logger({
-        status: BotProjectDeployLoggerType.DEPLOY_INFO,
-        message: `lubuild succeed`,
-      });
-
-      // Find any files that contain the name 'luis.settings' in them
-      // These are generated by the LuBuild process and placed in the generated folder
-      // These contain dialog-to-luis app id mapping
-      const luisConfigFiles = (await this.getFiles(workingFolder)).filter((filename) =>
-        filename.includes('luis.settings')
-      );
-      const luisAppIds: any = {};
-
-      // Read in all the luis app id mappings
-      for (const luisConfigFile of luisConfigFiles) {
-        const luisSettings = await fs.readJson(luisConfigFile);
-        Object.assign(luisAppIds, luisSettings.luis);
-      }
-
-      // In order for the bot to use the LUIS models, we need to assign a LUIS key to the endpoint of each app
-      // First step is to get a list of all the accounts available based on the given luisAuthoringKey.
-      let accountList;
-      try {
-        // Make a call to the azureaccounts api
-        // DOCS HERE: https://westus.dev.cognitive.microsoft.com/docs/services/5890b47c39e2bb17b84a55ff/operations/5be313cec181ae720aa2b26c
-        // This returns a list of azure account information objects with AzureSubscriptionID, ResourceGroup, AccountName for each.
-        const getAccountUri = `${luisEndpoint}/luis/api/v2.0/azureaccounts`;
-        const options = {
-          headers: { Authorization: `Bearer ${accessToken}`, 'Ocp-Apim-Subscription-Key': luisAuthoringKey },
-        } as rp.RequestPromiseOptions;
-        const response = await rp.get(getAccountUri, options);
-
-        // this should include an array of account info objects
-        accountList = JSON.parse(response);
-      } catch (err) {
-        // handle the token invalid
-        const error = JSON.parse(err.error);
-        if (error?.error?.message && error?.error?.message.indexOf('access token expiry') > 0) {
-          throw new Error(
-            `Type: ${error?.error?.code}, Message: ${error?.error?.message}, run az account get-access-token, then replace the accessToken in your configuration`
-          );
-        } else {
-          throw err;
-        }
-      }
-      // Extract the accoutn object that matches the expected resource name.
-      // This is the name that would appear in the azure portal associated with the luis endpoint key.
-      const account = this.getAccount(accountList, luisResource ? luisResource : `${name}-${environment}-luis`);
-
-      // Assign the appropriate account to each of the applicable LUIS apps for this bot.
-      // DOCS HERE: https://westus.dev.cognitive.microsoft.com/docs/services/5890b47c39e2bb17b84a55ff/operations/5be32228e8473de116325515
-      for (const dialogKey in luisAppIds) {
-        const luisAppId = luisAppIds[dialogKey];
-        this.logger({
-          status: BotProjectDeployLoggerType.DEPLOY_INFO,
-          message: `Assigning to luis app id: ${luisAppId}`,
-        });
-
-        const luisAssignEndpoint = `${luisEndpoint}/luis/api/v2.0/apps/${luisAppId}/azureaccounts`;
-        const options = {
-          body: account,
-          json: true,
-          headers: { Authorization: `Bearer ${accessToken}`, 'Ocp-Apim-Subscription-Key': luisAuthoringKey },
-        } as rp.RequestPromiseOptions;
-        const response = await rp.post(luisAssignEndpoint, options);
-
-        // TODO: Add some error handling on this API call. As it is, errors will just throw by default and be caught by the catch all try/catch in the deploy method
-
-        this.logger({
-          status: BotProjectDeployLoggerType.DEPLOY_INFO,
-          message: response,
-        });
-      }
-
-      // The process has now completed.
-      this.logger({
-        status: BotProjectDeployLoggerType.DEPLOY_INFO,
-        message: 'Luis Publish Success! ...',
-      });
-
-      // return the new settings that need to be added to the main settings file.
-      return luisAppIds;
-    }
-  }
-}
diff --git a/Composer/plugins/azurePublish/src/luisAndQnA.ts b/Composer/plugins/azurePublish/src/luisAndQnA.ts
new file mode 100644
index 0000000000..6b070531d3
--- /dev/null
+++ b/Composer/plugins/azurePublish/src/luisAndQnA.ts
@@ -0,0 +1,424 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import * as path from 'path';
+import { promisify } from 'util';
+
+import * as fs from 'fs-extra';
+import * as rp from 'request-promise';
+import { ILuisConfig, FileInfo, IQnAConfig } from '@bfc/shared';
+
+import { ICrossTrainConfig, createCrossTrainConfig } from './utils/crossTrainUtil';
+import { BotProjectDeployLoggerType } from './botProjectLoggerType';
+
+const crossTrainer = require('@microsoft/bf-lu/lib/parser/cross-train/crossTrainer.js');
+const luBuild = require('@microsoft/bf-lu/lib/parser/lubuild/builder.js');
+const qnaBuild = require('@microsoft/bf-lu/lib/parser/qnabuild/builder.js');
+const readdir: any = promisify(fs.readdir);
+
+export interface PublishConfig {
+  // Logger
+  logger: (string) => any;
+  projPath: string;
+  [key: string]: any;
+}
+
+const INTERUPTION = 'interuption';
+
+export class LuisAndQnaPublish {
+  private logger: (string) => any;
+  private remoteBotPath: string;
+  private generatedFolder: string;
+  private interruptionFolderPath: string;
+  private crossTrainConfig: ICrossTrainConfig;
+
+  constructor(config: PublishConfig) {
+    this.logger = config.logger;
+    // path to the ready to deploy generated folder
+    this.remoteBotPath = path.join(config.projPath, 'ComposerDialogs');
+    this.generatedFolder = path.join(this.remoteBotPath, 'generated');
+    this.interruptionFolderPath = path.join(this.generatedFolder, INTERUPTION);
+
+    // Cross Train config
+    this.crossTrainConfig = {
+      rootIds: [],
+      triggerRules: {},
+      intentName: '_Interruption',
+      verbose: true,
+      botName: '',
+    };
+  }
+
+  /*******************************************************************************************************************************/
+  /* This section has to do with publishing LU files to LUIS
+  /*******************************************************************************************************************************/
+
+  /**
+   * return an array of all the files in a given directory
+   * @param dir
+   */
+  private async getFiles(dir: string): Promise<string[]> {
+    const dirents = await readdir(dir, { withFileTypes: true });
+    const files = await Promise.all(
+      dirents.map((dirent) => {
+        const res = path.resolve(dir, dirent.name);
+        return dirent.isDirectory() ? this.getFiles(res) : res;
+      })
+    );
+    return Array.prototype.concat(...files);
+  }
+
+  /**
+   * Helper function to get the appropriate account out of a list of accounts
+   * @param accounts
+   * @param filter
+   */
+  private getAccount(accounts: any, filter: string) {
+    for (const account of accounts) {
+      if (account.AccountName === filter) {
+        return account;
+      }
+    }
+  }
+
+  private notEmptyModel(file: string) {
+    return fs.readFileSync(file).length > 0;
+  }
+
+  private async createGeneratedDir() {
+    if (!(await fs.pathExists(this.generatedFolder))) {
+      await fs.mkdir(this.generatedFolder);
+    }
+  }
+
+  private async setCrossTrainConfig(botName: string, dialogFiles: string[], luFiles: string[]) {
+    const dialogs: { [key: string]: any }[] = [];
+    for (const dialog of dialogFiles) {
+      dialogs.push({
+        id: dialog.substring(dialog.lastIndexOf('\\') + 1, dialog.length),
+        isRoot: dialog.indexOf(path.join(this.remoteBotPath, 'dialogs')) === -1,
+        content: fs.readJSONSync(dialog),
+      });
+    }
+    const luFileInfos: FileInfo[] = luFiles.map((luFile) => {
+      const fileStats = fs.statSync(luFile);
+      return {
+        name: luFile.substring(luFile.lastIndexOf('\\') + 1),
+        content: fs.readFileSync(luFile, 'utf-8'),
+        lastModified: fileStats.mtime.toString(),
+        path: luFile,
+        relativePath: luFile.substring(luFile.lastIndexOf(this.remoteBotPath) + 1),
+      };
+    });
+    this.crossTrainConfig = createCrossTrainConfig(dialogs, luFileInfos);
+  }
+  private async writeCrossTrainFiles(crossTrainResult) {
+    if (!(await fs.pathExists(this.interruptionFolderPath))) {
+      await fs.mkdir(this.interruptionFolderPath);
+    }
+    crossTrainResult.forEach(async (value, key) => {
+      const fileName = path.basename(key);
+      const newFileId = path.join(this.interruptionFolderPath, fileName);
+      await fs.writeFile(newFileId, value.Content);
+    });
+  }
+
+  private async crossTrain(luFiles: string[], qnaFiles: string[]) {
+    const luContents: { [key: string]: any }[] = [];
+    const qnaContents: { [key: string]: any }[] = [];
+    for (const luFile of luFiles) {
+      luContents.push({
+        content: fs.readFileSync(luFile, { encoding: 'utf-8' }),
+        id: luFile.substring(luFile.lastIndexOf('\\') + 1),
+      });
+    }
+    for (const qnaFile of qnaFiles) {
+      qnaContents.push({
+        content: fs.readFileSync(qnaFile, { encoding: 'utf-8' }),
+        id: qnaFile.substring(qnaFile.lastIndexOf('\\') + 1),
+      });
+    }
+    const result = await crossTrainer.crossTrain(luContents, qnaContents, this.crossTrainConfig);
+
+    await this.writeCrossTrainFiles(result.luResult);
+    await this.writeCrossTrainFiles(result.qnaResult);
+  }
+
+  private async cleanCrossTrain() {
+    fs.rmdirSync(this.interruptionFolderPath, { recursive: true });
+  }
+  private async getInterruptionFiles() {
+    const files = await this.getFiles(this.interruptionFolderPath);
+    const interruptionLuFiles: string[] = [];
+    const interruptionQnaFiles: string[] = [];
+    files.forEach((file) => {
+      if (file.endsWith('qna')) {
+        interruptionQnaFiles.push(file);
+      } else if (file.endsWith('lu')) {
+        interruptionLuFiles.push(file);
+      }
+    });
+    return { interruptionLuFiles, interruptionQnaFiles };
+  }
+
+  // Run through the lubuild process
+  // This happens in the build folder, NOT in the original source folder
+  private async publishLuis(
+    name: string,
+    environment: string,
+    accessToken: string,
+    language: string,
+    luisSettings: ILuisConfig,
+    interruptionLuFiles: string[],
+    luisResource?: string
+  ) {
+    const { authoringKey: luisAuthoringKey, authoringRegion: luisAuthoringRegion } = luisSettings;
+    let { endpoint: luisEndpoint, authoringEndpoint: luisAuthoringEndpoint } = luisSettings;
+
+    // Instantiate the LuBuild object from the LU parsing library
+    // This object is responsible for parsing the LU files and sending them to LUIS
+    const builder = new luBuild.Builder((msg) =>
+      this.logger({
+        status: BotProjectDeployLoggerType.DEPLOY_INFO,
+        message: msg,
+      })
+    );
+
+    // Pass in the list of the non-empty LU files we got above...
+    const loadResult = await builder.loadContents(
+      interruptionLuFiles,
+      language || 'en-us',
+      environment || '',
+      luisAuthoringRegion || ''
+    );
+
+    // set the default endpoint
+    if (!luisEndpoint) {
+      luisEndpoint = `https://${luisAuthoringRegion}.api.cognitive.microsoft.com`;
+    }
+
+    // if not specified, set the authoring endpoint
+    if (!luisAuthoringEndpoint) {
+      luisAuthoringEndpoint = luisEndpoint;
+    }
+
+    // Perform the Lubuild process
+    // This will create new luis apps for each of the luis models represented in the LU files
+    const buildResult = await builder.build(
+      loadResult.luContents,
+      loadResult.recognizers,
+      luisAuthoringKey,
+      luisAuthoringEndpoint,
+      name,
+      environment,
+      language,
+      true,
+      false,
+      loadResult.multiRecognizers,
+      loadResult.settings,
+      loadResult.crosstrainedRecognizers,
+      'crosstrained'
+    );
+
+    // Write the generated files to the generated folder
+    await builder.writeDialogAssets(buildResult, true, this.generatedFolder);
+
+    this.logger({
+      status: BotProjectDeployLoggerType.DEPLOY_INFO,
+      message: `lubuild succeed`,
+    });
+
+    // Find any files that contain the name 'luis.settings' in them
+    // These are generated by the LuBuild process and placed in the generated folder
+    // These contain dialog-to-luis app id mapping
+    const luisConfigFiles = (await this.getFiles(this.remoteBotPath)).filter((filename) =>
+      filename.includes('luis.settings')
+    );
+    const luisAppIds: any = {};
+
+    // Read in all the luis app id mappings
+    for (const luisConfigFile of luisConfigFiles) {
+      const luisSettings = await fs.readJson(luisConfigFile);
+      Object.assign(luisAppIds, luisSettings.luis);
+    }
+
+    // In order for the bot to use the LUIS models, we need to assign a LUIS key to the endpoint of each app
+    // First step is to get a list of all the accounts available based on the given luisAuthoringKey.
+    let accountList;
+    try {
+      // Make a call to the azureaccounts api
+      // DOCS HERE: https://westus.dev.cognitive.microsoft.com/docs/services/5890b47c39e2bb17b84a55ff/operations/5be313cec181ae720aa2b26c
+      // This returns a list of azure account information objects with AzureSubscriptionID, ResourceGroup, AccountName for each.
+      const getAccountUri = `${luisEndpoint}/luis/api/v2.0/azureaccounts`;
+      const options = {
+        headers: { Authorization: `Bearer ${accessToken}`, 'Ocp-Apim-Subscription-Key': luisAuthoringKey },
+      } as rp.RequestPromiseOptions;
+      const response = await rp.get(getAccountUri, options);
+
+      // this should include an array of account info objects
+      accountList = JSON.parse(response);
+    } catch (err) {
+      // handle the token invalid
+      const error = JSON.parse(err.error);
+      if (error?.error?.message && error?.error?.message.indexOf('access token expiry') > 0) {
+        throw new Error(
+          `Type: ${error?.error?.code}, Message: ${error?.error?.message}, run az account get-access-token, then replace the accessToken in your configuration`
+        );
+      } else {
+        throw err;
+      }
+    }
+    // Extract the accoutn object that matches the expected resource name.
+    // This is the name that would appear in the azure portal associated with the luis endpoint key.
+    const account = this.getAccount(accountList, luisResource ? luisResource : `${name}-${environment}-luis`);
+
+    // Assign the appropriate account to each of the applicable LUIS apps for this bot.
+    // DOCS HERE: https://westus.dev.cognitive.microsoft.com/docs/services/5890b47c39e2bb17b84a55ff/operations/5be32228e8473de116325515
+    for (const dialogKey in luisAppIds) {
+      const luisAppId = luisAppIds[dialogKey];
+      this.logger({
+        status: BotProjectDeployLoggerType.DEPLOY_INFO,
+        message: `Assigning to luis app id: ${luisAppId}`,
+      });
+
+      const luisAssignEndpoint = `${luisEndpoint}/luis/api/v2.0/apps/${luisAppId}/azureaccounts`;
+      const options = {
+        body: account,
+        json: true,
+        headers: { Authorization: `Bearer ${accessToken}`, 'Ocp-Apim-Subscription-Key': luisAuthoringKey },
+      } as rp.RequestPromiseOptions;
+      const response = await rp.post(luisAssignEndpoint, options);
+
+      // TODO: Add some error handling on this API call. As it is, errors will just throw by default and be caught by the catch all try/catch in the deploy method
+
+      this.logger({
+        status: BotProjectDeployLoggerType.DEPLOY_INFO,
+        message: response,
+      });
+    }
+
+    // The process has now completed.
+    this.logger({
+      status: BotProjectDeployLoggerType.DEPLOY_INFO,
+      message: 'Luis Publish Success! ...',
+    });
+
+    // return the new settings that need to be added to the main settings file.
+    return luisAppIds;
+  }
+  private async publishQna(
+    name: string,
+    environment: string,
+    language: string,
+    qnaSettings: IQnAConfig,
+    interruptionQnaFiles: string[]
+  ) {
+    // eslint-disable-next-line prefer-const
+    let { subscriptionKey } = qnaSettings;
+    const authoringRegion = 'westus';
+    // publishing luis
+    const builder = new qnaBuild.Builder((msg) =>
+      this.logger({
+        status: BotProjectDeployLoggerType.DEPLOY_INFO,
+        message: msg,
+      })
+    );
+
+    const loadResult = await builder.loadContents(
+      interruptionQnaFiles,
+      name,
+      environment || '',
+      authoringRegion || '',
+      language || ''
+    );
+
+    const endpoint = `https://${authoringRegion}.api.cognitive.microsoft.com/qnamaker/v4.0`;
+
+    const buildResult = await builder.build(
+      loadResult.qnaContents,
+      loadResult.recognizers,
+      subscriptionKey,
+      endpoint,
+      name,
+      environment,
+      language,
+      loadResult.multiRecognizers,
+      loadResult.settings,
+      loadResult.crosstrainedRecognizers,
+      'crosstrained'
+    );
+    await builder.writeDialogAssets(buildResult, true, this.generatedFolder);
+
+    this.logger({
+      status: BotProjectDeployLoggerType.DEPLOY_INFO,
+      message: `qnabuild succeed`,
+    });
+
+    // Find any files that contain the name 'qnamaker.settings' in them
+    // These are generated by the LuBuild process and placed in the generated folder
+    // These contain dialog-to-luis app id mapping
+    const qnaConfigFile = (await this.getFiles(this.remoteBotPath)).find((filename) =>
+      filename.includes('qnamaker.settings')
+    );
+    const qna: any = {};
+
+    // Read the qna settings
+    if (qnaConfigFile) {
+      const qnaConfig = await fs.readJson(qnaConfigFile);
+      const endpointKey = await builder.getEndpointKeys(subscriptionKey, endpoint);
+      Object.assign(qna, qnaConfig.qna, { endpointKey: endpointKey.primaryEndpointKey });
+    }
+    return qna;
+  }
+
+  // Run through the build process
+  // This happens in the build folder, NOT in the original source folder
+  public async publishLuisAndQna(
+    name: string,
+    environment: string,
+    accessToken: string,
+    language: string,
+    luisSettings: ILuisConfig,
+    qnaSettings: IQnAConfig,
+    luisResource?: string
+  ) {
+    const { authoringKey, authoringRegion } = luisSettings;
+    const { subscriptionKey } = qnaSettings;
+    if ((authoringKey && authoringRegion) || subscriptionKey) {
+      const botFiles = await this.getFiles(this.remoteBotPath);
+      const luFiles = botFiles.filter((name) => {
+        return name.endsWith('.lu') && this.notEmptyModel(name);
+      });
+      const qnaFiles = botFiles.filter((name) => {
+        return name.endsWith('.qna') && this.notEmptyModel(name);
+      });
+
+      if (luFiles.length > 0 && !(authoringKey && authoringRegion)) {
+        throw 'Should have luis authoringKey and authoringRegion when lu file not empty';
+      }
+      if (qnaFiles.length > 0 && !subscriptionKey) {
+        throw 'Should have qna subscriptionKey when qna file not empty';
+      }
+      const dialogFiles = botFiles.filter((name) => {
+        return name.endsWith('.dialog') && this.notEmptyModel(name);
+      });
+
+      await this.setCrossTrainConfig(name, dialogFiles, luFiles);
+      await this.createGeneratedDir();
+      await this.crossTrain(luFiles, qnaFiles);
+      const { interruptionLuFiles, interruptionQnaFiles } = await this.getInterruptionFiles();
+      const luisAppIds = await this.publishLuis(
+        name,
+        environment,
+        accessToken,
+        language,
+        luisSettings,
+        interruptionLuFiles,
+        luisResource
+      );
+      const qnaConfig = await this.publishQna(name, environment, language, qnaSettings, interruptionQnaFiles);
+      await this.cleanCrossTrain();
+      return { luisAppIds, qnaConfig };
+    }
+  }
+}
diff --git a/Composer/plugins/azurePublish/src/provision.ts b/Composer/plugins/azurePublish/src/provision.ts
index 72ce6a9a24..a45151403f 100644
--- a/Composer/plugins/azurePublish/src/provision.ts
+++ b/Composer/plugins/azurePublish/src/provision.ts
@@ -419,6 +419,7 @@ export class BotProjectProvision {
     });
 
     // Handle errors
+    // eslint-disable-next-line no-underscore-dangle
     if (deployment._response.status != 200) {
       this.logger({
         status: BotProjectDeployLoggerType.PROVISION_ERROR,
@@ -486,6 +487,7 @@ export class BotProjectProvision {
           botCreated.properties.developerAppInsightsApplicationId = appinsightsId;
           const botUpdateResult = await botServiceClient.bots.update(resourceGroupName, name, botCreated);
 
+          // eslint-disable-next-line no-underscore-dangle
           if (botUpdateResult._response.status != 200) {
             this.logger({
               status: BotProjectDeployLoggerType.PROVISION_ERROR,
diff --git a/Composer/plugins/azurePublish/src/utils/crossTrainUtil.ts b/Composer/plugins/azurePublish/src/utils/crossTrainUtil.ts
new file mode 100644
index 0000000000..471c457a79
--- /dev/null
+++ b/Composer/plugins/azurePublish/src/utils/crossTrainUtil.ts
@@ -0,0 +1,215 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/**
+ * luUtil.ts is a single place use lu-parser handle lu file operation.
+ * it's designed have no state, input text file, output text file.
+ * for more usage detail, please check client/__tests__/utils/luUtil.test.ts
+ */
+import keys from 'lodash/keys';
+import { LuFile, DialogInfo, IIntentTrigger, FieldNames, SDKKinds, FileInfo } from '@bfc/shared';
+import { luIndexer } from '@bfc/indexers';
+
+import { getBaseName, getExtension } from './fileUtil';
+import { VisitorFunc, JsonWalk } from './jsonWalk';
+
+export function getReferredLuFiles(luFiles: LuFile[], dialogs: DialogInfo[], checkContent = true) {
+  return luFiles.filter((file) => {
+    const idWithOutLocale = getBaseName(file.id);
+    return dialogs.some(
+      (dialog) => dialog.luFile === idWithOutLocale && ((checkContent && !!file.content) || !checkContent)
+    );
+  });
+}
+
+function ExtractAllBeginDialogs(value: any): string[] {
+  const dialogs: string[] = [];
+
+  const visitor: VisitorFunc = (path: string, value: any): boolean => {
+    if (value?.$kind === SDKKinds.BeginDialog && value?.dialog) {
+      dialogs.push(value.dialog);
+      return true;
+    }
+    return false;
+  };
+
+  JsonWalk('$', value, visitor);
+
+  return dialogs;
+}
+
+// find out all properties from given dialog
+function ExtractIntentTriggers(value: any): IIntentTrigger[] {
+  const intentTriggers: IIntentTrigger[] = [];
+  const triggers = value?.[FieldNames.Events];
+
+  if (triggers && triggers.length) {
+    for (const trigger of triggers) {
+      const dialogs = ExtractAllBeginDialogs(trigger);
+
+      if (trigger.$kind === SDKKinds.OnIntent && trigger.intent) {
+        intentTriggers.push({ intent: trigger.intent, dialogs });
+      } else if (trigger.$kind !== SDKKinds.OnIntent && dialogs.length) {
+        const emptyIntent = intentTriggers.find((e) => e.intent === '');
+        if (emptyIntent) {
+          //remove the duplication dialogs
+          const all = new Set<string>([...emptyIntent.dialogs, ...dialogs]);
+          emptyIntent.dialogs = Array.from(all);
+        } else {
+          intentTriggers.push({ intent: '', dialogs });
+        }
+      }
+    }
+  }
+
+  return intentTriggers;
+}
+
+function createConfigId(fileId) {
+  return `${fileId}.lu`;
+}
+
+function getLuFilesByDialogId(dialogId: string, luFiles: LuFile[]) {
+  return luFiles.filter((lu) => getBaseName(lu.id) === dialogId).map((lu) => createConfigId(lu.id));
+}
+
+function getFileLocale(fileName: string) {
+  //file name = 'a.en-us.lu'
+  return getExtension(getBaseName(fileName));
+}
+
+//replace the dialogId with luFile's name
+function addLocaleToConfig(config: ICrossTrainConfig, luFiles: LuFile[]) {
+  const { rootIds, triggerRules } = config;
+  config.rootIds = rootIds.reduce((result: string[], id: string) => {
+    return [...result, ...getLuFilesByDialogId(id, luFiles)];
+  }, []);
+  config.triggerRules = keys(triggerRules).reduce((result, key) => {
+    const fileNames = getLuFilesByDialogId(key, luFiles);
+    return {
+      ...result,
+      ...fileNames.reduce((result, name) => {
+        const locale = getFileLocale(name);
+        const triggers = triggerRules[key];
+        keys(triggers).forEach((trigger) => {
+          if (!result[name]) result[name] = {};
+          const ids = triggers[trigger];
+          if (Array.isArray(ids)) {
+            result[name][trigger] = ids.map((id) => (id ? `${id}.${locale}.lu` : id));
+          } else {
+            result[name][trigger] = ids ? `${ids}.${locale}.lu` : ids;
+          }
+        });
+        return result;
+      }, {}),
+    };
+  }, {});
+  return config;
+}
+
+function parse(dialog) {
+  const { id, content, isRoot } = dialog;
+  const luFile = typeof content.recognizer === 'string' ? getBaseName(id) : '';
+  const qnaFile = typeof content.recognizer === 'string' ? getBaseName(id) : '';
+
+  return {
+    id: getBaseName(id),
+    isRoot: isRoot,
+    content,
+    luFile: luFile,
+    qnaFile: qnaFile,
+    intentTriggers: ExtractIntentTriggers(content),
+  };
+}
+export interface ICrossTrainConfig {
+  rootIds: string[];
+  triggerRules: { [key: string]: any };
+  intentName: string;
+  verbose: boolean;
+  botName: string;
+}
+
+//generate the cross-train config without locale
+/* the config is like
+  {
+      rootIds: [
+        'main.en-us.lu',
+        'main.fr-fr.lu'
+      ],
+      triggerRules: {
+        'main.en-us.lu': {
+          'dia1_trigger': 'dia1.en-us.lu',
+          'dia2_trigger': 'dia2.en-us.lu'
+        },
+        'dia2.en-us.lu': {
+          'dia3_trigger': 'dia3.en-us.lu',
+          'dia4_trigger': 'dia4.en-us.lu'
+        },
+        'main.fr-fr.lu': {
+          'dia1_trigger': 'dia1.fr-fr.lu'
+        }
+      },
+      intentName: '_Interruption',
+      verbose: true
+    }
+  */
+export function createCrossTrainConfig(dialogs: any[], luFilesInfo: FileInfo[]): ICrossTrainConfig {
+  const triggerRules = {};
+  const countMap = {};
+  const wrapDialogs: { [key: string]: any }[] = [];
+  for (const dialog of dialogs) {
+    wrapDialogs.push(parse(dialog));
+  }
+
+  const luFiles = luIndexer.index(luFilesInfo);
+
+  //map all referred lu files
+  luFiles.forEach((file) => {
+    countMap[getBaseName(file.id)] = 1;
+  });
+
+  let rootId = '';
+  let botName = '';
+  wrapDialogs.forEach((dialog) => {
+    if (dialog.isRoot) {
+      rootId = dialog.id;
+      botName = dialog.content.$designer.name;
+    }
+
+    if (luFiles.find((luFile) => getBaseName(luFile.id) === dialog.luFile)) {
+      const { intentTriggers } = dialog;
+      const fileId = dialog.id;
+      //find the trigger's dialog that use a recognizer
+      intentTriggers.forEach((item) => {
+        //find all dialogs in trigger that has a luis recognizer
+        const used = item.dialogs.filter((dialog) => !!countMap[dialog]);
+
+        const deduped = Array.from(new Set<string>(used));
+
+        const result = {};
+        if (deduped.length === 1) {
+          result[item.intent] = deduped[0];
+        } else if (deduped.length) {
+          result[item.intent] = deduped;
+        } else {
+          result[item.intent] = '';
+        }
+
+        triggerRules[fileId] = { ...triggerRules[fileId], ...result };
+      });
+    }
+  });
+
+  const crossTrainConfig: ICrossTrainConfig = {
+    botName: botName,
+    rootIds: [],
+    triggerRules: {},
+    intentName: '_Interruption',
+    verbose: true,
+  };
+  crossTrainConfig.rootIds = keys(countMap).filter(
+    (key) => (countMap[key] === 0 || key === rootId) && triggerRules[key]
+  );
+  crossTrainConfig.triggerRules = triggerRules;
+  return addLocaleToConfig(crossTrainConfig, luFiles);
+}
diff --git a/Composer/plugins/azurePublish/src/utils/fileUtil.ts b/Composer/plugins/azurePublish/src/utils/fileUtil.ts
new file mode 100644
index 0000000000..0e5ab3af4a
--- /dev/null
+++ b/Composer/plugins/azurePublish/src/utils/fileUtil.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+export function getExtension(filename?: string): string | any {
+  if (typeof filename !== 'string') return filename;
+  return filename.substring(filename.lastIndexOf('.') + 1, filename.length) || filename;
+}
+
+export function getBaseName(filename: string, sep?: string): string | any {
+  if (sep) return filename.substr(0, filename.lastIndexOf(sep));
+  return filename.substring(0, filename.lastIndexOf('.')) || filename;
+}
diff --git a/Composer/plugins/azurePublish/src/utils/jsonWalk.ts b/Composer/plugins/azurePublish/src/utils/jsonWalk.ts
new file mode 100644
index 0000000000..6f4efcd4e1
--- /dev/null
+++ b/Composer/plugins/azurePublish/src/utils/jsonWalk.ts
@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/**
+ * visitor function used by JsonWalk
+ * @param path jsonPath string
+ * @param value current node value
+ * @return boolean, true to stop walk deep
+ */
+export interface VisitorFunc {
+  (path: string, value: any): boolean;
+}
+
+/**
+ *
+ * @param path jsonPath string
+ * @param value current node value
+ * @param visitor
+ */
+
+export const JsonWalk = (path: string, value: any, visitor: VisitorFunc) => {
+  const stop = visitor(path, value);
+  if (stop === true) return;
+
+  // extract array
+  if (Array.isArray(value)) {
+    value.forEach((child, index) => {
+      JsonWalk(`${path}[${index}]`, child, visitor);
+    });
+
+    // extract object
+  } else if (typeof value === 'object' && value) {
+    Object.keys(value).forEach((key) => {
+      JsonWalk(`${path}.${key}`, value[key], visitor);
+    });
+  }
+};
diff --git a/Composer/plugins/azurePublish/yarn.lock b/Composer/plugins/azurePublish/yarn.lock
index c258b0d25d..b24c71d221 100644
--- a/Composer/plugins/azurePublish/yarn.lock
+++ b/Composer/plugins/azurePublish/yarn.lock
@@ -196,9 +196,9 @@
     tslib "^1.10.0"
 
 "@microsoft/bf-lu@^4.10.0-dev.20200728.930f45e":
-  version "4.10.0-dev.20200728.930f45e"
-  resolved "https://botbuilder.myget.org/F/botframework-cli/npm/@microsoft/bf-lu/-/@microsoft/bf-lu-4.10.0-dev.20200728.930f45e.tgz#d8a5867d1e3028124b9e0171877b1f063b2bd08e"
-  integrity sha1-2KWGfR4wKBJLngFxh3sfBjsr0I4=
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/bf-lu/-/bf-lu-4.10.1.tgz#ac4cbbde522d6b7f163e781e9976c8af0ef0833a"
+  integrity sha512-ATtM5WcStRlu68MyDB0Q49iUumDpZdPbtOcc9qOdmNCyNfaJ0a1iUSGtugWvx24MRn2Uk+Cgb8YPUxZrdaUxwg==
   dependencies:
     "@azure/cognitiveservices-luis-authoring" "4.0.0-preview.1"
     "@azure/ms-rest-azure-js" "2.0.1"
diff --git a/Composer/plugins/localPublish/src/index.ts b/Composer/plugins/localPublish/src/index.ts
index dd7b98abcd..a92dc41952 100644
--- a/Composer/plugins/localPublish/src/index.ts
+++ b/Composer/plugins/localPublish/src/index.ts
@@ -353,6 +353,12 @@ class LocalPublisher {
       configList.push('--luis:endpointKey');
       configList.push(config.luis.endpointKey || config.luis.authoringKey);
     }
+    if (config.qna.endpointKey) {
+      configList.push('--qna:endpointKey');
+      configList.push(config.qna.endpointKey);
+    }
+    // console.log(config.qna);
+    // console.log(configList);
     return configList;
   };
 
diff --git a/Composer/plugins/samples/assets/projects/ActionsSample/knowledge-base/en-us/actionssample.en-us.qna b/Composer/plugins/samples/assets/projects/ActionsSample/knowledge-base/en-us/actionssample.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/ActionsSample/language-generation/en-us/common.en-us.lg b/Composer/plugins/samples/assets/projects/ActionsSample/language-generation/en-us/common.en-us.lg
index 3e8d9f5b6f..22e7763360 100644
--- a/Composer/plugins/samples/assets/projects/ActionsSample/language-generation/en-us/common.en-us.lg
+++ b/Composer/plugins/samples/assets/projects/ActionsSample/language-generation/en-us/common.en-us.lg
@@ -15,4 +15,4 @@
 13 - QnAMaker```
 
 # SendActivity_839941
--Hello ${user.name}, nice to meet you!
\ No newline at end of file
+-Hello ${user.name}, nice to meet you!
diff --git a/Composer/plugins/samples/assets/projects/AskingQuestionsSample/knowledge-base/en-us/askingquestionssample.en-us.qna b/Composer/plugins/samples/assets/projects/AskingQuestionsSample/knowledge-base/en-us/askingquestionssample.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/AskingQuestionsSample/language-generation/en-us/common.en-us.lg b/Composer/plugins/samples/assets/projects/AskingQuestionsSample/language-generation/en-us/common.en-us.lg
index ee6d2966a8..62e49c1e87 100644
--- a/Composer/plugins/samples/assets/projects/AskingQuestionsSample/language-generation/en-us/common.en-us.lg
+++ b/Composer/plugins/samples/assets/projects/AskingQuestionsSample/language-generation/en-us/common.en-us.lg
@@ -16,4 +16,4 @@ I can show you examples on how to use actions, You can enter number 01-07
 ]
 
 # Welcome
--Welcome to input samples.
\ No newline at end of file
+-Welcome to input samples.
diff --git a/Composer/plugins/samples/assets/projects/ControllingConversationFlowSample/knowledge-base/en-us/controllingconversationflowsample.en-us.qna b/Composer/plugins/samples/assets/projects/ControllingConversationFlowSample/knowledge-base/en-us/controllingconversationflowsample.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/ControllingConversationFlowSample/language-generation/en-us/common.en-us.lg b/Composer/plugins/samples/assets/projects/ControllingConversationFlowSample/language-generation/en-us/common.en-us.lg
index 21687a6f94..9154db493e 100644
--- a/Composer/plugins/samples/assets/projects/ControllingConversationFlowSample/language-generation/en-us/common.en-us.lg
+++ b/Composer/plugins/samples/assets/projects/ControllingConversationFlowSample/language-generation/en-us/common.en-us.lg
@@ -6,4 +6,4 @@
 
 # helpText
 -```Welcome to the Controlling Conversation sample. Choose from the list below to try.
-You can also type "Cancel" to cancel any dialog or "Endturn" to explicitly accept an input.```
\ No newline at end of file
+You can also type "Cancel" to cancel any dialog or "Endturn" to explicitly accept an input.```
diff --git a/Composer/plugins/samples/assets/projects/EchoBot/knowledge-base/en-us/echobot.en-us.qna b/Composer/plugins/samples/assets/projects/EchoBot/knowledge-base/en-us/echobot.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/EchoBot/language-generation/en-us/common.en-us.lg b/Composer/plugins/samples/assets/projects/EchoBot/language-generation/en-us/common.en-us.lg
index f2a885213f..e6d48bfb3b 100644
--- a/Composer/plugins/samples/assets/projects/EchoBot/language-generation/en-us/common.en-us.lg
+++ b/Composer/plugins/samples/assets/projects/EchoBot/language-generation/en-us/common.en-us.lg
@@ -1,2 +1,2 @@
 # WelcomeUser
-- Welcome to the EchoBot sample.
\ No newline at end of file
+- Welcome to the EchoBot sample
diff --git a/Composer/plugins/samples/assets/projects/EmptyBot/knowledge-base/en-us/emptybot.en-us.qna b/Composer/plugins/samples/assets/projects/EmptyBot/knowledge-base/en-us/emptybot.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/EmptyBot/language-generation/en-us/common.en-us.lg b/Composer/plugins/samples/assets/projects/EmptyBot/language-generation/en-us/common.en-us.lg
index 65cae9d65f..f091a4a584 100644
--- a/Composer/plugins/samples/assets/projects/EmptyBot/language-generation/en-us/common.en-us.lg
+++ b/Composer/plugins/samples/assets/projects/EmptyBot/language-generation/en-us/common.en-us.lg
@@ -1,2 +1,2 @@
 # WelcomeUser
-- Welcome to the EmptyBot sample
\ No newline at end of file
+- Welcome to the EmptyBot sample
diff --git a/Composer/plugins/samples/assets/projects/InterruptionSample/knowledge-base/en-us/interruptionsample.en-us.qna b/Composer/plugins/samples/assets/projects/InterruptionSample/knowledge-base/en-us/interruptionsample.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/InterruptionSample/language-generation/en-us/common.en-us.lg b/Composer/plugins/samples/assets/projects/InterruptionSample/language-generation/en-us/common.en-us.lg
index bfd92b0b03..fca0fb1a52 100644
--- a/Composer/plugins/samples/assets/projects/InterruptionSample/language-generation/en-us/common.en-us.lg
+++ b/Composer/plugins/samples/assets/projects/InterruptionSample/language-generation/en-us/common.en-us.lg
@@ -8,4 +8,4 @@
 - IF : ${exists(user.profile.age)}
     - Age : ${user.profile.age}
 - ELSE:
-    - Age : unknown
\ No newline at end of file
+    - Age : unknown
diff --git a/Composer/plugins/samples/assets/projects/QnAMakerLUISSample/knowledge-base/en-us/qnamakerluissample.en-us.qna b/Composer/plugins/samples/assets/projects/QnAMakerLUISSample/knowledge-base/en-us/qnamakerluissample.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/QnASample/knowledge-base/en-us/qnasample.en-us.qna b/Composer/plugins/samples/assets/projects/QnASample/knowledge-base/en-us/qnasample.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/QnASample/language-generation/en-us/common.en-us.lg b/Composer/plugins/samples/assets/projects/QnASample/language-generation/en-us/common.en-us.lg
new file mode 100644
index 0000000000..f091a4a584
--- /dev/null
+++ b/Composer/plugins/samples/assets/projects/QnASample/language-generation/en-us/common.en-us.lg
@@ -0,0 +1,2 @@
+# WelcomeUser
+- Welcome to the EmptyBot sample
diff --git a/Composer/plugins/samples/assets/projects/QnASample/language-generation/en-us/qnasample.en-us.lg b/Composer/plugins/samples/assets/projects/QnASample/language-generation/en-us/qnasample.en-us.lg
new file mode 100644
index 0000000000..b0e0533582
--- /dev/null
+++ b/Composer/plugins/samples/assets/projects/QnASample/language-generation/en-us/qnasample.en-us.lg
@@ -0,0 +1,10 @@
+[import](common.lg)
+
+
+# TextInput_Prompt_4Z7RSY()
+[Activity
+    Text = ${expandText(@answer)}
+    SuggestedActions = ${foreach(turn.recognized.answers[0].context.prompts, x, x.displayText)}
+]
+# SendActivity_AmRjR8()
+- ${expandText(@answer)}
\ No newline at end of file
diff --git a/Composer/plugins/samples/assets/projects/QnASample/language-understanding/en-us/qnasample.en-us.lu b/Composer/plugins/samples/assets/projects/QnASample/language-understanding/en-us/qnasample.en-us.lu
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/QnASample/qnasample.dialog b/Composer/plugins/samples/assets/projects/QnASample/qnasample.dialog
new file mode 100644
index 0000000000..ae97c4e653
--- /dev/null
+++ b/Composer/plugins/samples/assets/projects/QnASample/qnasample.dialog
@@ -0,0 +1,102 @@
+{
+  "$kind": "Microsoft.AdaptiveDialog",
+  "$designer": {
+    "$designer": {
+      "name": "QnASample",
+      "description": "",
+      "id": "U700F8"
+    }
+  },
+  "autoEndDialog": false,
+  "defaultResultProperty": "dialog.result",
+  "triggers": [
+    {
+      "$kind": "Microsoft.OnQnAMatch",
+      "$designer": {
+        "id": "62LeW3"
+      },
+      "actions": [
+        {
+          "$kind": "Microsoft.IfCondition",
+          "$designer": {
+            "id": "FLikRl"
+          },
+          "condition": "count(turn.recognized.answers[0].context.prompts) > 0",
+          "actions": [
+            {
+              "$kind": "Microsoft.SetProperty",
+              "$designer": {
+                "id": "e1ZIz1"
+              },
+              "property": "dialog.qnaContext",
+              "value": "=turn.recognized.answers[0].context.prompts"
+            },
+            {
+              "$kind": "Microsoft.TextInput",
+              "$designer": {
+                "id": "F4dNap"
+              },
+              "maxTurnCount": 3,
+              "alwaysPrompt": true,
+              "allowInterruptions": false,
+              "prompt": "${TextInput_Prompt_4Z7RSY()}",
+              "property": "turn.qnaMultiTurnResponse"
+            },
+            {
+              "$kind": "Microsoft.SetProperty",
+              "$designer": {
+                "id": "UwUPtn"
+              },
+              "property": "turn.qnaMatchFromContext",
+              "value": "=where(dialog.qnaContext, item, item.displayText == turn.qnaMultiTurnResponse)"
+            },
+            {
+              "$kind": "Microsoft.DeleteProperty",
+              "$designer": {
+                "id": "3jjAZ9"
+              },
+              "property": "dialog.qnaContext"
+            },
+            {
+              "$kind": "Microsoft.IfCondition",
+              "$designer": {
+                "id": "o2rSWQ"
+              },
+              "condition": "turn.qnaMatchFromContext && count(turn.qnaMatchFromContext) > 0",
+              "actions": [
+                {
+                  "$kind": "Microsoft.SetProperty",
+                  "$designer": {
+                    "id": "beSlVJ"
+                  },
+                  "property": "turn.qnaIdFromPrompt",
+                  "value": "=turn.qnaMatchFromContext[0].qnaId"
+                }
+              ]
+            },
+            {
+              "$kind": "Microsoft.EmitEvent",
+              "$designer": {
+                "id": "RnUMES"
+              },
+              "eventName": "activityReceived",
+              "eventValue": "=turn.activity"
+            }
+          ],
+          "elseActions": [
+            {
+              "$kind": "Microsoft.SendActivity",
+              "$designer": {
+                "id": "PB405i"
+              },
+              "activity": "${SendActivity_AmRjR8()}"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "$schema": "https://raw.githubusercontent.com/microsoft/BotFramework-Composer/stable/Composer/packages/server/schemas/sdk.schema",
+  "generator": "qnasample.lg",
+  "recognizer": "qnasample.lu.qna"
+}
diff --git a/Composer/plugins/samples/assets/projects/QnASample/settings/appsettings.json b/Composer/plugins/samples/assets/projects/QnASample/settings/appsettings.json
new file mode 100644
index 0000000000..356542b7d1
--- /dev/null
+++ b/Composer/plugins/samples/assets/projects/QnASample/settings/appsettings.json
@@ -0,0 +1,57 @@
+{
+  "feature": {
+    "UseShowTypingMiddleware": false,
+    "UseInspectionMiddleware": false,
+    "RemoveRecipientMention": false
+  },
+  "MicrosoftAppPassword": "",
+  "MicrosoftAppId": "",
+  "cosmosDb": {
+    "authKey": "",
+    "collectionId": "botstate-collection",
+    "cosmosDBEndpoint": "",
+    "databaseId": "botstate-db"
+  },
+  "applicationInsights": {
+    "InstrumentationKey": ""
+  },
+  "blobStorage": {
+    "connectionString": "",
+    "container": "transcripts"
+  },
+  "luis": {
+    "name": "",
+    "authoringKey": "",
+    "authoringEndpoint": "",
+    "endpointKey": "",
+    "endpoint": "",
+    "authoringRegion": "westus",
+    "defaultLanguage": "en-us",
+    "environment": "composer"
+  },
+  "publishTargets": [],
+  "qna": {
+    "subscriptionKey": "",
+    "knowledgebaseid": "",
+    "endpointKey": "",
+    "hostname": "",
+    "region": "westus"
+  },
+  "telemetry": {
+    "logPersonalInformation": false,
+    "logActivities": true
+  },
+  "runtime": {
+    "customRuntime": false,
+    "path": "",
+    "command": ""
+  },
+  "downsampling": {
+    "maxImbalanceRatio": 10,
+    "maxUtteranceAllowed": 15000
+  },
+  "defaultLanguage": "en-us",
+  "languages": [
+    "en-us"
+  ]
+}
\ No newline at end of file
diff --git a/Composer/plugins/samples/assets/projects/RespondingWithCardsSample/knowledge-base/en-us/respondingwithcardssample.en-us.qna b/Composer/plugins/samples/assets/projects/RespondingWithCardsSample/knowledge-base/en-us/respondingwithcardssample.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/RespondingWithTextSample/knowledge-base/en-us/respondingwithtextsample.en-us.qna b/Composer/plugins/samples/assets/projects/RespondingWithTextSample/knowledge-base/en-us/respondingwithtextsample.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/ToDoBotWithLuisSample/knowledge-base/en-us/todobotwithluissample.en-us.qna b/Composer/plugins/samples/assets/projects/ToDoBotWithLuisSample/knowledge-base/en-us/todobotwithluissample.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/TodoSample/knowledge-base/en-us/todosample.en-us.qna b/Composer/plugins/samples/assets/projects/TodoSample/knowledge-base/en-us/todosample.en-us.qna
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Composer/plugins/samples/assets/projects/TodoSample/language-generation/en-us/common.en-us.lg b/Composer/plugins/samples/assets/projects/TodoSample/language-generation/en-us/common.en-us.lg
index a4e6b0982d..b31a589d29 100644
--- a/Composer/plugins/samples/assets/projects/TodoSample/language-generation/en-us/common.en-us.lg
+++ b/Composer/plugins/samples/assets/projects/TodoSample/language-generation/en-us/common.en-us.lg
@@ -36,4 +36,4 @@ ${join(foreach(user.todos, x, showSingleTodo(x)), '\n')}
 # WelcomeUser
 -I can add a todo, show todos, remove a todo, and clear all todos
 -I can help you yes I can
--Help, we don't need no stinkin' help!
\ No newline at end of file
+-Help, we don't need no stinkin' help!
diff --git a/Composer/plugins/samples/assets/shared/scripts/DeploymentTemplates/template-with-preexisting-rg.json b/Composer/plugins/samples/assets/shared/scripts/DeploymentTemplates/template-with-preexisting-rg.json
index 81c8531adc..d385e94444 100644
--- a/Composer/plugins/samples/assets/shared/scripts/DeploymentTemplates/template-with-preexisting-rg.json
+++ b/Composer/plugins/samples/assets/shared/scripts/DeploymentTemplates/template-with-preexisting-rg.json
@@ -34,6 +34,10 @@
       "type": "bool",
       "defaultValue": true
     },
+    "shouldCreateQnAResource": {
+      "type": "bool",
+      "defaultValue": true
+    },
     "cosmosDbName": {
       "type": "string",
       "defaultValue": "[resourceGroup().name]"
@@ -130,6 +134,38 @@
     "luisServiceLocation": {
       "type": "string",
       "defaultValue": "[resourceGroup().location]"
+    },
+    "qnaMakerServiceName": {
+      "type": "string",
+      "defaultValue": "[concat(parameters('name'), '-qna')]"
+    },
+    "qnaMakerServiceSku": {
+      "type": "string",
+      "defaultValue": "S0"
+    },
+    "qnaMakerServiceLocation": {
+      "type": "string",
+      "defaultValue": "westus"
+    },
+    "qnaMakerSearchName": {
+      "type": "string",
+      "defaultValue": "[concat(parameters('name'), '-search')]"
+    },
+    "qnaMakerSearchSku": {
+      "type": "string",
+      "defaultValue": "standard"
+    },
+    "qnaMakerSearchLocation": {
+      "type": "string",
+      "defaultValue": "[resourceGroup().location]"
+    },
+    "qnaMakerWebAppName": {
+      "type": "string",
+      "defaultValue": "[concat(parameters('name'), '-qnahost')]"
+    },
+    "qnaMakerWebAppLocation": {
+      "type": "string",
+      "defaultValue": "[resourceGroup().location]"
     }
   },
   "variables": {
@@ -142,7 +178,9 @@
     "siteHost": "[concat(variables('webAppName'), '.azurewebsites.net')]",
     "botEndpoint": "[concat('https://', variables('siteHost'), '/api/messages')]",
     "storageAccountName": "[toLower(take(replace(replace(parameters('storageAccountName'), '-', ''), '_', ''), 24))]",
-    "LuisAuthoringAccountName": "[concat(parameters('luisServiceName'), '-Authoring')]"
+    "LuisAuthoringAccountName": "[concat(parameters('luisServiceName'), '-Authoring')]",
+    "qnaMakerSearchName": "[toLower(replace(parameters('qnaMakerSearchName'), '_', ''))]",
+    "qnaMakerWebAppName": "[replace(parameters('qnaMakerWebAppName'), '_', '')]"
   },
   "resources": [
     {
@@ -350,6 +388,92 @@
         "name": "[parameters('luisServiceRunTimeSku')]"
       },
       "condition": "[parameters('shouldCreateLuisResource')]"
+    },
+     {
+      "comments": "Cognitive service key for all QnA Maker knowledgebases.",
+      "type": "Microsoft.CognitiveServices/accounts",
+      "kind": "QnAMaker",
+      "apiVersion": "2017-04-18",
+      "name": "[parameters('qnaMakerServiceName')]",
+      "location": "[parameters('qnaMakerServiceLocation')]",
+      "sku": {
+        "name": "[parameters('qnaMakerServiceSku')]"
+      },
+      "properties": {
+        "apiProperties": {
+          "qnaRuntimeEndpoint": "[concat('https://',reference(resourceId('Microsoft.Web/sites', variables('qnaMakerWebAppName'))).hostNames[0])]"
+        }
+      },
+      "dependsOn": [
+        "[resourceId('Microsoft.Web/Sites', variables('qnaMakerWebAppName'))]",
+        "[resourceId('Microsoft.Search/searchServices/', variables('qnaMakerSearchName'))]",
+        "[resourceId('microsoft.insights/components/', parameters('appInsightsName'))]"
+      ],
+      "condition": "[parameters('shouldCreateQnAResource')]"
+    },
+    {
+      "comments": "Search service for QnA Maker service.",
+      "type": "Microsoft.Search/searchServices",
+      "apiVersion": "2015-08-19",
+      "name": "[variables('qnaMakerSearchName')]",
+      "location": "[parameters('qnaMakerSearchLocation')]",
+      "sku": {
+        "name": "[parameters('qnaMakerSearchSku')]"
+      },
+      "properties": {
+        "replicaCount": 1,
+        "partitionCount": 1,
+        "hostingMode": "default"
+      },
+      "condition": "[parameters('shouldCreateQnAResource')]"
+    },
+    {
+      "comments": "Web app for QnA Maker service.",
+      "type": "Microsoft.Web/sites",
+      "apiVersion": "2016-08-01",
+      "name": "[variables('qnaMakerWebAppName')]",
+      "location": "[parameters('qnaMakerWebAppLocation')]",
+      "properties": {
+        "enabled": true,
+        "name": "[variables('qnaMakerWebAppName')]",
+        "hostingEnvironment": "",
+        "serverFarmId": "[concat('/subscriptions/', Subscription().SubscriptionId,'/resourcegroups/', resourceGroup().name, '/providers/Microsoft.Web/serverfarms/', variables('servicePlanName'))]",
+        "siteConfig": {
+          "cors": {
+            "allowedOrigins": [
+              "*"
+            ]
+          }
+        }
+      },
+      "dependsOn": [
+        "[resourceId('Microsoft.Web/serverfarms/', variables('servicePlanName'))]"
+      ],
+      "condition": "[parameters('shouldCreateQnAResource')]",
+      "resources": [
+        {
+          "apiVersion": "2016-08-01",
+          "name": "appsettings",
+          "type": "config",
+          "dependsOn": [
+            "[resourceId('Microsoft.Web/Sites', variables('qnaMakerWebAppName'))]",
+            "[resourceId('Microsoft.Insights/components', parameters('appInsightsName'))]",
+            "[resourceId('Microsoft.Search/searchServices/', variables('qnaMakerSearchName'))]"
+          ],
+          "properties": {
+            "AzureSearchName": "[variables('qnaMakerSearchName')]",
+            "AzureSearchAdminKey": "[listAdminKeys(resourceId('Microsoft.Search/searchServices/', variables('qnaMakerSearchName')), '2015-08-19').primaryKey]",
+            "UserAppInsightsKey": "[reference(resourceId('Microsoft.Insights/components/', parameters('appInsightsName')), '2015-05-01').InstrumentationKey]",
+            "UserAppInsightsName": "[parameters('appInsightsName')]",
+            "UserAppInsightsAppId": "[reference(resourceId('Microsoft.Insights/components/', parameters('appInsightsName')), '2015-05-01').AppId]",
+            "PrimaryEndpointKey": "[concat(variables('qnaMakerWebAppName'), '-PrimaryEndpointKey')]",
+            "SecondaryEndpointKey": "[concat(variables('qnaMakerWebAppName'), '-SecondaryEndpointKey')]",
+            "DefaultAnswer": "No good match found in KB.",
+            "QNAMAKER_EXTENSION_VERSION": "latest"
+          },
+          "condition": "[parameters('shouldCreateQnAResource')]"
+        }
+      ]
     }
   ],
   "outputs": {
@@ -385,6 +509,13 @@
         "endpoint": "[if(parameters('shouldCreateLuisResource'), reference(resourceId('Microsoft.CognitiveServices/accounts', parameters('luisServiceName'))).endpoint, '')]",
         "authoringEndpoint": "[if(parameters('shouldCreateAuthoringResource'), reference(resourceId('Microsoft.CognitiveServices/accounts', variables('LuisAuthoringAccountName'))).endpoint, '')]"
       }
+    },
+     "qna": {
+      "type": "object",
+      "value": {
+        "endpoint": "[if(parameters('shouldCreateQnAResource'), concat('https://', reference(resourceId('Microsoft.Web/sites', variables('qnaMakerWebAppName'))).hostNames[0]), '')]",
+        "subscriptionKey": "[if(parameters('shouldCreateQnAResource'), listKeys(resourceId('Microsoft.CognitiveServices/accounts', parameters('qnaMakerServiceName')),'2017-04-18').key1, '')]"
+      }
     }
   }
 }
diff --git a/Composer/plugins/samples/assets/shared/scripts/provisionComposer.js b/Composer/plugins/samples/assets/shared/scripts/provisionComposer.js
index 9252080181..9e85606907 100644
--- a/Composer/plugins/samples/assets/shared/scripts/provisionComposer.js
+++ b/Composer/plugins/samples/assets/shared/scripts/provisionComposer.js
@@ -5,7 +5,7 @@ const fs = require('fs-extra');
 const msRestNodeAuth = require('@azure/ms-rest-nodeauth');
 const argv = require('minimist')(process.argv.slice(2));
 const path = require('path');
-const rp = require('request-promise')
+const rp = require('request-promise');
 const { promisify } = require('util');
 const { GraphRbacManagementClient } = require('@azure/graph');
 const { ApplicationInsightsManagementClient } = require('@azure/arm-appinsights');
@@ -14,7 +14,7 @@ const { ResourceManagementClient } = require('@azure/arm-resources');
 const readFile = promisify(fs.readFile);
 const ora = require('ora');
 
-const logger = msg => {
+const logger = (msg) => {
   if (msg.status === BotProjectDeployLoggerType.PROVISION_ERROR) {
     console.log(chalk.red(msg.message));
   } else if (msg.status === BotProjectDeployLoggerType.PROVISION_ERROR_DETAILS) {
@@ -38,6 +38,7 @@ const usage = () => {
     ['createCosmosDb', 'Create a CosmosDB? Default true'],
     ['createStorage', 'Create a storage account? Default true'],
     ['createAppInsights', 'Create an AppInsights resource? Default true'],
+    ['createQnAResource', 'Create a QnA resource? Default true'],
     [
       'customArmTemplate',
       'Path to runtime ARM template. By default it will use an Azure WebApp template. Pass `DeploymentTemplates/function-template-with-preexisting-rg.json` for Azure Functions or your own template for a custom deployment.',
@@ -52,14 +53,14 @@ const usage = () => {
     ``,
     chalk.bold(`Basic Usage:`),
     chalk.greenBright(`node provisionComposer --subscriptionId=`) +
-    chalk.yellow('<Azure Subscription Id>') +
-    chalk.greenBright(' --name=') +
-    chalk.yellow('<Name for your environment>') +
-    chalk.greenBright(' --appPassword=') +
-    chalk.yellow('<16 character password>'),
+      chalk.yellow('<Azure Subscription Id>') +
+      chalk.greenBright(' --name=') +
+      chalk.yellow('<Name for your environment>') +
+      chalk.greenBright(' --appPassword=') +
+      chalk.yellow('<16 character password>'),
     ``,
     chalk.bold(`All options:`),
-    ...options.map(option => {
+    ...options.map((option) => {
       return chalk.greenBright('--' + option[0]) + '\t' + chalk.yellow(option[1]);
     }),
   ];
@@ -92,6 +93,7 @@ const createLuisAuthoringResource = argv.createLuisAuthoringResource == 'false'
 const createCosmosDb = argv.createCosmosDb == 'false' ? false : true;
 const createStorage = argv.createStorage == 'false' ? false : true;
 const createAppInsights = argv.createAppInsights == 'false' ? false : true;
+const createQnAResource = argv.createQnAResource == 'false' ? false : true;
 var tenantId = argv.tenantId ? argv.tenantId : '';
 
 const templatePath =
@@ -158,13 +160,13 @@ const createResourceGroup = async (client, location, resourceGroupName) => {
  * Format parameters
  * @param {} scope
  */
-const pack = scope => {
+const pack = (scope) => {
   return {
     value: scope,
   };
 };
 
-const unpackObject = output => {
+const unpackObject = (output) => {
   const unpacked = {};
   for (const key in output) {
     const objValue = output[key];
@@ -177,7 +179,7 @@ const unpackObject = output => {
 
 /**
  * For more information about this api, please refer to this doc: https://docs.microsoft.com/en-us/rest/api/resources/Tenants/List
- * @param {*} accessToken 
+ * @param {*} accessToken
  */
 const getTenantId = async (accessToken) => {
   if (!accessToken) {
@@ -186,9 +188,7 @@ const getTenantId = async (accessToken) => {
     );
   }
   if (!subId) {
-    throw new Error(
-      `Error: Missing subscription Id. Please provide a valid Azure subscription id.`
-    );
+    throw new Error(`Error: Missing subscription Id. Please provide a valid Azure subscription id.`);
   }
   try {
     const tenantUrl = `https://management.azure.com/subscriptions/${subId}?api-version=2020-01-01`;
@@ -197,16 +197,14 @@ const getTenantId = async (accessToken) => {
     };
     const response = await rp.get(tenantUrl, options);
     const jsonRes = JSON.parse(response);
-    if (
-      jsonRes.tenantId === undefined
-    ) {
+    if (jsonRes.tenantId === undefined) {
       throw new Error(`No tenants found in the account.`);
     }
     return jsonRes.tenantId;
   } catch (err) {
     throw new Error(`Get Tenant Id Failed, details: ${getErrorMesssage(err)}`);
   }
-}
+};
 
 const getDeploymentTemplateParam = (
   appId,
@@ -215,6 +213,7 @@ const getDeploymentTemplateParam = (
   name,
   shouldCreateAuthoringResource,
   shouldCreateLuisResource,
+  shouldCreateQnAResource,
   useAppInsights,
   useCosmosDb,
   useStorage
@@ -226,6 +225,7 @@ const getDeploymentTemplateParam = (
     botId: pack(name),
     shouldCreateAuthoringResource: pack(shouldCreateAuthoringResource),
     shouldCreateLuisResource: pack(shouldCreateLuisResource),
+    shouldCreateQnAResource: pack(shouldCreateQnAResource),
     useAppInsights: pack(useAppInsights),
     useCosmosDb: pack(useCosmosDb),
     useStorage: pack(useStorage),
@@ -301,7 +301,7 @@ const updateDeploymentJsonFile = async (client, resourceGroupName, deployName, a
   }
 };
 
-const provisionFailed = msg => {
+const provisionFailed = (msg) => {
   logger({
     status: BotProjectDeployLoggerType.PROVISION_ERROR,
     message: chalk.bold('** Provision failed **'),
@@ -318,19 +318,16 @@ const getErrorMesssage = (err) => {
           errMsg += detail.message;
         }
         return errMsg;
-      }
-      else {
+      } else {
         return err.body.error.message;
       }
-    }
-    else {
+    } else {
       return JSON.stringify(err.body, null, 2);
     }
-  }
-  else {
+  } else {
     return JSON.stringify(err, null, 2);
   }
-}
+};
 
 /**
  * Provision a set of Azure resources for use with a bot
@@ -345,6 +342,7 @@ const create = async (
   appPassword,
   createLuisResource = true,
   createLuisAuthoringResource = true,
+  createQnAResource = true,
   createCosmosDb = true,
   createStorage = true,
   createAppInsights = true
@@ -353,7 +351,7 @@ const create = async (
   if (!tenantId) {
     const token = await creds.getToken();
     const accessToken = token.accessToken;
-    // the returned access token will almost surely have a tenantId. 
+    // the returned access token will almost surely have a tenantId.
     // use this as the default if one isn't specified.
     if (token.tenantId) {
       tenantId = token.tenantId;
@@ -412,7 +410,7 @@ const create = async (
   } catch (err) {
     logger({
       status: BotProjectDeployLoggerType.PROVISION_ERROR,
-      message: getErrorMesssage(err)
+      message: getErrorMesssage(err),
     });
     return provisionFailed();
   }
@@ -424,6 +422,7 @@ const create = async (
     location,
     name,
     createLuisAuthoringResource,
+    createQnAResource,
     createLuisResource,
     createAppInsights,
     createCosmosDb,
@@ -482,7 +481,7 @@ const create = async (
     spinner.fail();
     logger({
       status: BotProjectDeployLoggerType.PROVISION_ERROR,
-      message: getErrorMesssage(err)
+      message: getErrorMesssage(err),
     });
     return provisionFailed();
   }
@@ -570,15 +569,15 @@ const create = async (
     const operations = await client.deploymentOperations.list(resourceGroupName, timeStamp);
     if (operations) {
       const failedOperations = operations.filter(
-        value => value && value.properties && value.properties.statusMessage.error !== null
+        (value) => value && value.properties && value.properties.statusMessage.error !== null
       );
       if (failedOperations) {
-        failedOperations.forEach(operation => {
+        failedOperations.forEach((operation) => {
           switch (
-          operation &&
-          operation.properties &&
-          operation.properties.statusMessage.error.code &&
-          operation.properties.targetResource
+            operation &&
+            operation.properties &&
+            operation.properties.statusMessage.error.code &&
+            operation.properties.targetResource
           ) {
             case 'MissingRegistrationForLocation':
               logger({
@@ -616,7 +615,7 @@ const create = async (
 console.log(chalk.bold('Login to Azure:'));
 msRestNodeAuth
   .interactiveLogin({ domain: tenantId })
-  .then(async creds => {
+  .then(async (creds) => {
     const createResult = await create(
       creds,
       subId,
@@ -627,6 +626,7 @@ msRestNodeAuth
       appPassword,
       createLuisResource,
       createLuisAuthoringResource,
+      createQnAResource,
       createCosmosDb,
       createStorage,
       createAppInsights
@@ -656,6 +656,6 @@ msRestNodeAuth
       console.log('');
     }
   })
-  .catch(err => {
+  .catch((err) => {
     console.error(err);
   });
diff --git a/Composer/plugins/samples/src/index.ts b/Composer/plugins/samples/src/index.ts
index b9044c82f2..98b3dcddb3 100644
--- a/Composer/plugins/samples/src/index.ts
+++ b/Composer/plugins/samples/src/index.ts
@@ -59,6 +59,10 @@ const samplesRegitry = {
   QnAMakerLUISSample: {
     name: 'QnA Maker and LUIS',
     description: 'A sample bot that demonstrates use of both QnA Maker & LUIS',
+  },
+  QnASample: {
+    name: 'QnA Sample',
+    description: 'A sample bot that import online QnA resource',
   }
 }
 
diff --git a/Composer/yarn.lock b/Composer/yarn.lock
index cd7b360b67..8cb65208b8 100644
--- a/Composer/yarn.lock
+++ b/Composer/yarn.lock
@@ -2953,10 +2953,10 @@
     semver "^5.5.1"
     tslib "^1.10.0"
 
-"@microsoft/bf-lu@^4.10.0-dev.20200728.930f45e":
-  version "4.10.0-dev.20200728.930f45e"
-  resolved "https://botbuilder.myget.org/F/botframework-cli/npm/@microsoft/bf-lu/-/@microsoft/bf-lu-4.10.0-dev.20200728.930f45e.tgz#d8a5867d1e3028124b9e0171877b1f063b2bd08e"
-  integrity sha1-2KWGfR4wKBJLngFxh3sfBjsr0I4=
+"@microsoft/bf-lu@^4.10.0-dev.20200808.5a7c973":
+  version "4.10.0-dev.20200808.5a7c973"
+  resolved "https://registry.yarnpkg.com/@microsoft/bf-lu/-/bf-lu-4.10.0-dev.20200808.5a7c973.tgz#5ef0741e48bc1ac6dc82afd3128777bde737d658"
+  integrity sha512-rrXGtaQcGuR8qCkDmLXxJrdPaYMnOq34hViz9ZkYh+wSIWaOgDjSbZ3/NwFcgmLAXFceajN9BQRYxhkosrJZMQ==
   dependencies:
     "@azure/cognitiveservices-luis-authoring" "4.0.0-preview.1"
     "@azure/ms-rest-azure-js" "2.0.1"
diff --git a/runtime/dotnet/azurefunctions/Microsoft.BotFramework.Composer.Functions.csproj b/runtime/dotnet/azurefunctions/Microsoft.BotFramework.Composer.Functions.csproj
index cea4e7d423..dc9f7a1a5c 100644
--- a/runtime/dotnet/azurefunctions/Microsoft.BotFramework.Composer.Functions.csproj
+++ b/runtime/dotnet/azurefunctions/Microsoft.BotFramework.Composer.Functions.csproj
@@ -14,18 +14,18 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="3.1.2" />
     <PackageReference Include="Microsoft.Azure.Functions.Extensions" Version="1.0.0" />
-    <PackageReference Include="Microsoft.Bot.Builder" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.AI.Luis" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.AI.QnA" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.ApplicationInsights" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Azure" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Adaptive" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Debugging" Version="4.10.0-preview" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Declarative" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Integration.ApplicationInsights.Core" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Integration.AspNet.Core" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Connector" Version="4.10.0" />
+    <PackageReference Include="Microsoft.Bot.Builder" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.AI.Luis" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.AI.QnA" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.ApplicationInsights" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Azure" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Adaptive" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Debugging" Version="4.10.1-preview" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Declarative" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Integration.ApplicationInsights.Core" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Integration.AspNet.Core" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Connector" Version="4.10.1" />
     <PackageReference Include="Microsoft.Extensions.Configuration.UserSecrets" Version="3.1.3" />
     <PackageReference Include="Microsoft.Extensions.Http" Version="3.1.3" />
     <PackageReference Include="Microsoft.NET.Sdk.Functions" Version="3.0.3" />
diff --git a/runtime/dotnet/azurefunctions/Startup.cs b/runtime/dotnet/azurefunctions/Startup.cs
index fcbbe538c8..896b21f0cf 100644
--- a/runtime/dotnet/azurefunctions/Startup.cs
+++ b/runtime/dotnet/azurefunctions/Startup.cs
@@ -51,7 +51,7 @@ private IConfigurationRoot BuildConfiguration(string rootDirectory)
             var configFile = Path.GetFullPath(Path.Combine(rootDirectory, @"ComposerDialogs/settings/appsettings.json"));
             config.AddJsonFile(configFile, optional: true, reloadOnChange: true);
 
-            config.UseComposerLuisSettings();
+            config.UseComposerSettings();
 
             if (!Debugger.IsAttached)
             {
diff --git a/runtime/dotnet/azurewebapp/Microsoft.BotFramework.Composer.WebApp.csproj b/runtime/dotnet/azurewebapp/Microsoft.BotFramework.Composer.WebApp.csproj
index 6a80f0491a..81c7efd23f 100644
--- a/runtime/dotnet/azurewebapp/Microsoft.BotFramework.Composer.WebApp.csproj
+++ b/runtime/dotnet/azurewebapp/Microsoft.BotFramework.Composer.WebApp.csproj
@@ -16,18 +16,18 @@
   </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="3.1.2" />
-    <PackageReference Include="Microsoft.Bot.Builder" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.AI.Luis" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.AI.QnA" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.ApplicationInsights" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Azure" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Declarative" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Adaptive" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Debugging" Version="4.10.0-preview" />
-    <PackageReference Include="Microsoft.Bot.Builder.Integration.ApplicationInsights.Core" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Integration.AspNet.Core" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Connector" Version="4.10.0" />
+    <PackageReference Include="Microsoft.Bot.Builder" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.AI.Luis" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.AI.QnA" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.ApplicationInsights" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Azure" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Declarative" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Adaptive" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Debugging" Version="4.10.1-preview" />
+    <PackageReference Include="Microsoft.Bot.Builder.Integration.ApplicationInsights.Core" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Integration.AspNet.Core" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Connector" Version="4.10.1" />
     <PackageReference Include="MSTest.TestFramework" Version="1.4.0" />
     <PackageReference Include="StyleCop.Analyzers" Version="1.2.0-beta.66">
       <PrivateAssets>all</PrivateAssets>
diff --git a/runtime/dotnet/azurewebapp/Program.cs b/runtime/dotnet/azurewebapp/Program.cs
index de3da52710..f601df0e60 100644
--- a/runtime/dotnet/azurewebapp/Program.cs
+++ b/runtime/dotnet/azurewebapp/Program.cs
@@ -33,8 +33,8 @@ public static IHostBuilder CreateHostBuilder(string[] args) =>
 
                 builder.AddJsonFile(configFile, optional: true, reloadOnChange: true);
 
-                // Use Composer luis settings extensions
-                builder.UseComposerLuisSettings();
+                // Use Composer luis and qna settings extensions
+                builder.UseComposerSettings();
 
                 builder.AddEnvironmentVariables()
                        .AddCommandLine(args);
diff --git a/runtime/dotnet/azurewebapp/Startup.cs b/runtime/dotnet/azurewebapp/Startup.cs
index eb84678673..9fd484f5c3 100644
--- a/runtime/dotnet/azurewebapp/Startup.cs
+++ b/runtime/dotnet/azurewebapp/Startup.cs
@@ -16,6 +16,7 @@
 using Microsoft.Bot.Builder.BotFramework;
 using Microsoft.Bot.Builder.Dialogs;
 using Microsoft.Bot.Builder.Dialogs.Adaptive;
+using Microsoft.Bot.Builder.Dialogs.Adaptive.Conditions;
 using Microsoft.Bot.Builder.Dialogs.Declarative;
 using Microsoft.Bot.Builder.Dialogs.Declarative.Resources;
 using Microsoft.Bot.Builder.Integration.ApplicationInsights.Core;
@@ -175,6 +176,8 @@ public void ConfigureServices(IServiceCollection services)
 
             services.AddSingleton(resourceExplorer);
 
+            resourceExplorer.RegisterType<OnQnAMatch>("Microsoft.OnQnAMatch");
+
             services.AddSingleton<IBotFrameworkHttpAdapter, BotFrameworkHttpAdapter>((s) => GetBotAdapter(storage, settings, userState, conversationState, s, s.GetService<TelemetryInitializerMiddleware>()));
 
             var removeRecipientMention = settings?.Feature?.RemoveRecipientMention ?? false;
diff --git a/runtime/dotnet/core/ComposerLuisExtensions.cs b/runtime/dotnet/core/ComposerSettingsExtensions.cs
similarity index 61%
rename from runtime/dotnet/core/ComposerLuisExtensions.cs
rename to runtime/dotnet/core/ComposerSettingsExtensions.cs
index 1fc3943123..d23684f15b 100644
--- a/runtime/dotnet/core/ComposerLuisExtensions.cs
+++ b/runtime/dotnet/core/ComposerSettingsExtensions.cs
@@ -8,23 +8,24 @@
 
 namespace Microsoft.BotFramework.Composer.Core
 {
-    public static class ComposerLuisExtensions
+    public static class ComposerSettingsExtensions
     {
         /// <summary>
-        /// Setup configuration to utilize the settings file generated by bf luis:build. This is a luis settings extensions adapter aligning with Composer customized settings.
+        /// Setup configuration to utilize the settings file generated by bf luis:build and qna:build. This is a luis and qnamaker settings extensions adapter aligning with Composer customized settings.
         /// </summary>
         /// <remarks>
         /// This will pick up LUIS_AUTHORING_REGION or --region settings as the setting to target.
         /// This will pick up --environment as the environment to target.  If environment is Development it will use the name of the logged in user.
-        /// This will pick up --root as the root folder to run in.  
+        /// This will pick up --root as the root folder to run in.
         /// </remarks>
         /// <param name="builder">Configuration builder to modify.</param>
         /// <returns>Modified configuration builder.</returns>
-        public static IConfigurationBuilder UseComposerLuisSettings(this IConfigurationBuilder builder)
+        public static IConfigurationBuilder UseComposerSettings(this IConfigurationBuilder builder)
         {
             var configuration = builder.Build();
             var botRoot = configuration.GetValue<string>("bot") ?? ".";
             var luisRegion = configuration.GetValue<string>("LUIS_AUTHORING_REGION") ?? configuration.GetValue<string>("luis:authoringRegion") ?? configuration.GetValue<string>("luis:region") ?? "westus";
+            var qnaRegion = configuration.GetValue<string>("qna:qnaRegion") ?? "westus";
             var environment = configuration.GetValue<string>("luis:environment") ?? Environment.UserName;
             var settings = new Dictionary<string, string>();
             settings["luis:endpoint"] = configuration.GetValue<string>("luis:endpoint") ?? $"https://{luisRegion}.api.cognitive.microsoft.com";
@@ -35,11 +36,18 @@ public static IConfigurationBuilder UseComposerLuisSettings(this IConfigurationB
                 environment = Environment.UserName;
             }
 
-            var settingsPath = Path.GetFullPath(Path.Combine(botRoot, "generated", $"luis.settings.{environment.ToLower()}.{luisRegion}.json"));
-            var settingsFile = new FileInfo(settingsPath);
-            if (settingsFile.Exists)
+            var luisSettingsPath = Path.GetFullPath(Path.Combine(botRoot, "generated", $"luis.settings.{environment.ToLower()}.{luisRegion}.json"));
+            var luisSettingsFile = new FileInfo(luisSettingsPath);
+            if (luisSettingsFile.Exists)
             {
-                builder.AddJsonFile(settingsFile.FullName, optional: false, reloadOnChange: true);
+                builder.AddJsonFile(luisSettingsFile.FullName, optional: false, reloadOnChange: true);
+            }
+
+            var qnaSettingsPath = Path.GetFullPath(Path.Combine(botRoot, "generated", $"qnamaker.settings.{environment.ToLower()}.{qnaRegion}.json"));
+            var qnaSettingsFile = new FileInfo(qnaSettingsPath);
+            if (qnaSettingsFile.Exists)
+            {
+                builder.AddJsonFile(qnaSettingsFile.FullName, optional: false, reloadOnChange: true);
             }
 
             return builder;
diff --git a/runtime/dotnet/core/Microsoft.BotFramework.Composer.Core.csproj b/runtime/dotnet/core/Microsoft.BotFramework.Composer.Core.csproj
index c328acd3f8..053b9772cc 100644
--- a/runtime/dotnet/core/Microsoft.BotFramework.Composer.Core.csproj
+++ b/runtime/dotnet/core/Microsoft.BotFramework.Composer.Core.csproj
@@ -13,18 +13,18 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.Bot.Builder" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.AI.Luis" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.AI.QnA" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.ApplicationInsights" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Azure" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Adaptive" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Debugging" Version="4.10.0-preview" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Declarative" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Integration.ApplicationInsights.Core" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Integration.AspNet.Core" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs" Version="4.10.0" />
-    <PackageReference Include="Microsoft.Bot.Connector" Version="4.10.0" />
+    <PackageReference Include="Microsoft.Bot.Builder" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.AI.Luis" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.AI.QnA" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.ApplicationInsights" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Azure" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Adaptive" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Debugging" Version="4.10.1-preview" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Declarative" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Integration.ApplicationInsights.Core" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Integration.AspNet.Core" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs" Version="4.10.1" />
+    <PackageReference Include="Microsoft.Bot.Connector" Version="4.10.1" />
   </ItemGroup>
 
 </Project>
diff --git a/runtime/dotnet/customaction/Microsoft.BotFramework.Composer.CustomAction.csproj b/runtime/dotnet/customaction/Microsoft.BotFramework.Composer.CustomAction.csproj
index 082c97aa29..4a2e474b3c 100644
--- a/runtime/dotnet/customaction/Microsoft.BotFramework.Composer.CustomAction.csproj
+++ b/runtime/dotnet/customaction/Microsoft.BotFramework.Composer.CustomAction.csproj
@@ -11,7 +11,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Adaptive" Version="4.10.0" />
+    <PackageReference Include="Microsoft.Bot.Builder.Dialogs.Adaptive" Version="4.10.1" />
   </ItemGroup>
 
 </Project>