diff --git a/Composer/packages/client/__tests__/pages/publish/Publish.test.tsx b/Composer/packages/client/__tests__/pages/publish/Publish.test.tsx
index c834cca426..d4c0e943d8 100644
--- a/Composer/packages/client/__tests__/pages/publish/Publish.test.tsx
+++ b/Composer/packages/client/__tests__/pages/publish/Publish.test.tsx
@@ -106,16 +106,13 @@ describe('publish page', () => {
   it('should render status list in publish page', () => {
     const { getByText } = renderWithRecoil(
       <BotStatusList
-        botPublishHistoryList={[]}
-        botPublishTypesList={[]}
-        changePublishTarget={jest.fn()}
-        items={[]}
-        projectId={rootState.projectId}
-        publishDisabled={false}
-        updateItems={jest.fn()}
-        updatePublishHistory={jest.fn()}
-        updateSelectedBots={jest.fn()}
-        onLogClick={jest.fn()}
+        botPublishHistoryList={{}}
+        botStatusList={[]}
+        checkedIds={[]}
+        disableCheckbox={false}
+        onChangePublishTarget={jest.fn()}
+        onCheck={jest.fn()}
+        onManagePublishProfile={jest.fn()}
         onRollbackClick={jest.fn()}
       />,
       initRecoilState
diff --git a/Composer/packages/client/src/pages/publish/BotStatusList.tsx b/Composer/packages/client/src/pages/publish/BotStatusList.tsx
index a86c8d32b3..48823b1ac8 100644
--- a/Composer/packages/client/src/pages/publish/BotStatusList.tsx
+++ b/Composer/packages/client/src/pages/publish/BotStatusList.tsx
@@ -7,82 +7,55 @@ import moment from 'moment';
 import formatMessage from 'format-message';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import React, { useState, Fragment } from 'react';
+import React, { useState, Fragment, useMemo } from 'react';
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
-import { PublishTarget, PublishResult } from '@bfc/shared';
-import { CheckboxVisibility, DetailsList, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
+import { PublishResult } from '@bfc/shared';
+import { CheckboxVisibility, DetailsList } from 'office-ui-fabric-react/lib/DetailsList';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { SharedColors } from '@uifabric/fluent-theme';
 import { FontSizes } from '@uifabric/styling';
+import get from 'lodash/get';
 
-import { navigateTo } from '../../utils/navigation';
-import { PublishType } from '../../recoilModel/types';
+import { ApiStatus } from '../../utils/publishStatusPollingUpdater';
 
 import { PublishStatusList } from './PublishStatusList';
 import { detailList, listRoot, tableView } from './styles';
+import { BotPublishHistory, BotStatus } from './type';
 
-export type IBotStatus = {
-  id: string;
-  name: string;
-  publishTargets?: PublishTarget[];
-  publishTarget?: string;
-  time?: string;
-  status?: number;
-  message?: string;
-  comment?: string;
-};
-export type IBotStatusListProps = {
-  projectId: string;
-  items: IBotStatus[];
-  botPublishHistoryList: { projectId: string; publishHistory: { [key: string]: PublishResult[] } }[];
-  botPublishTypesList: { projectId: string; publishTypes: PublishType[] }[];
-  publishDisabled: boolean;
-  updateItems: (items: IBotStatus[]) => void;
-  updatePublishHistory: (items: PublishResult[], item: IBotStatus) => void;
-  updateSelectedBots: (items: IBotStatus[]) => void;
-  changePublishTarget: (PublishTarget: string, item: IBotStatus) => void;
-  onLogClick: (item: PublishResult) => void;
-  onRollbackClick: (selectedVersion: PublishResult, item: IBotStatus) => void;
-};
+export type BotStatusListProps = {
+  botStatusList: BotStatus[];
+  botPublishHistoryList: BotPublishHistory;
 
-export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
-  const {
-    projectId,
-    items,
-    botPublishHistoryList,
-    botPublishTypesList,
-    publishDisabled,
-    updateItems,
-    updatePublishHistory,
-    changePublishTarget,
-    updateSelectedBots,
-    onLogClick,
-    onRollbackClick,
-  } = props;
-  const [selectedBots, setSelectedBots] = useState<IBotStatus[]>([]);
-  const [showHistoryBots, setShowHistoryBots] = useState<string[]>([]);
+  /** When set to true, disable the checkbox. */
+  disableCheckbox: boolean;
+  onManagePublishProfile: (skillId: string) => void;
+  checkedIds: string[];
+  onCheck: (skillIds: string[]) => void;
+  onChangePublishTarget: (PublishTarget: string, item: BotStatus) => void;
+  onRollbackClick: (selectedVersion: PublishResult, item: BotStatus) => void;
+};
 
+export const BotStatusList: React.FC<BotStatusListProps> = ({
+  botStatusList,
+  botPublishHistoryList,
+  disableCheckbox,
+  checkedIds,
+  onCheck,
+  onManagePublishProfile,
+  onChangePublishTarget,
+  onRollbackClick,
+}) => {
+  const [expandedBotIds, setExpandedBotIds] = useState<Record<string, boolean>>({});
   const [currentSort, setSort] = useState({ key: 'Bot', descending: true });
-  const sortByName = (ev: React.MouseEvent<HTMLElement>, column: IColumn): void => {
-    if (column.isSorted) {
-      column.isSortedDescending = !column.isSortedDescending;
-      const newItems: IBotStatus[] = items.reverse();
-      updateItems(newItems);
-    }
-  };
-  const changeSelected = (item: IBotStatus, isChecked?: boolean) => {
-    let newSelectedBots: IBotStatus[];
-    if (isChecked) {
-      newSelectedBots = [...selectedBots, item];
-    } else {
-      newSelectedBots = selectedBots.filter((bot) => bot.id !== item.id);
-    }
-    setSelectedBots(newSelectedBots);
-    updateSelectedBots(newSelectedBots);
-  };
 
-  const publishTargetOptions = (item: IBotStatus): IDropdownOption[] => {
+  const displayedItems: BotStatus[] = useMemo(() => {
+    if (currentSort.key !== 'Bot') return botStatusList;
+    if (currentSort.descending) return botStatusList;
+    return botStatusList.slice().reverse();
+  }, [botStatusList, currentSort]);
+
+  const getPublishTargetOptions = (item: BotStatus): IDropdownOption[] => {
     const options: IDropdownOption[] = [];
     item.publishTargets &&
       item.publishTargets.forEach((target, index) => {
@@ -98,7 +71,36 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
     });
     return options;
   };
-  const onRenderOption = (option?: IDropdownOption): JSX.Element | null => {
+
+  const onChangeCheckbox = (skillId: string, isChecked?: boolean) => {
+    if (isChecked) {
+      if (checkedIds.some((id) => id === skillId)) return;
+      onCheck([...checkedIds, skillId]);
+    } else {
+      onCheck(checkedIds.filter((id) => id !== skillId));
+    }
+  };
+
+  const handleChangePublishTarget = (item: BotStatus, option?: IDropdownOption): void => {
+    if (option) {
+      if (option.key === 'manageProfiles') {
+        onManagePublishProfile(item.id);
+      } else {
+        onChangePublishTarget(option.text, item);
+      }
+    }
+  };
+
+  const onChangeShowHistoryBots = (item: BotStatus) => {
+    const clickedBotId = item.id;
+    if (expandedBotIds[clickedBotId]) {
+      setExpandedBotIds({ ...expandedBotIds, [clickedBotId]: false });
+    } else {
+      setExpandedBotIds({ ...expandedBotIds, [clickedBotId]: true });
+    }
+  };
+
+  const renderDropdownOption = (option?: IDropdownOption): JSX.Element | null => {
     if (!option) return null;
     const style = {
       ...option.data?.style,
@@ -109,12 +111,13 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
     };
     return <div style={style}>{option.text}</div>;
   };
-  const onRenderStatus = (item: IBotStatus): JSX.Element | null => {
+
+  const renderPublishStatus = (item: BotStatus): JSX.Element | null => {
     if (!item.status) {
       return null;
-    } else if (item.status === 200) {
+    } else if (item.status === ApiStatus.Success) {
       return <Icon iconName="Accept" style={{ color: SharedColors.green10, fontWeight: 600 }} />;
-    } else if (item.status === 202) {
+    } else if (item.status === ApiStatus.Publishing) {
       return (
         <div style={{ display: 'flex' }}>
           <Spinner size={SpinnerSize.small} />
@@ -124,28 +127,7 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
       return <Icon iconName="Cancel" style={{ color: SharedColors.red10, fontWeight: 600 }} />;
     }
   };
-  const handleChangePublishTarget = (item: IBotStatus, option?: IDropdownOption): void => {
-    if (option) {
-      if (option.key === 'manageProfiles') {
-        const url =
-          item.id === projectId
-            ? `/bot/${projectId}/botProjectsSettings/#addNewPublishProfile`
-            : `bot/${projectId}/skill/${item.id}/botProjectsSettings/#addNewPublishProfile`;
-        navigateTo(url);
-        return;
-      }
-      changePublishTarget(option.text, item);
-    }
-  };
-  const changeShowHistoryBots = (item: IBotStatus) => {
-    let newShowHistoryBots: string[];
-    if (showHistoryBots.includes(item.id)) {
-      newShowHistoryBots = showHistoryBots.filter((id) => id !== item.id);
-    } else {
-      newShowHistoryBots = [...showHistoryBots, item.id];
-    }
-    setShowHistoryBots(newShowHistoryBots);
-  };
+
   const columns = [
     {
       key: 'Bot',
@@ -155,12 +137,11 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
       minWidth: 100,
       maxWidth: 200,
       isRowHeader: true,
-      onColumnClick: sortByName,
       data: 'string',
-      onRender: (item: IBotStatus) => {
+      onRender: (item: BotStatus) => {
         return (
           <Checkbox
-            disabled={publishDisabled}
+            disabled={disableCheckbox}
             label={item.name}
             styles={{
               label: { width: '100%' },
@@ -171,7 +152,7 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
                 whiteSpace: 'nowrap',
               },
             }}
-            onChange={(_, isChecked) => changeSelected(item, isChecked)}
+            onChange={(_, isChecked) => onChangeCheckbox(item.id, isChecked)}
           />
         );
       },
@@ -186,18 +167,18 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
       maxWidth: 200,
       isRowHeader: true,
       data: 'string',
-      onRender: (item: IBotStatus) => {
+      onRender: (item: BotStatus) => {
         return (
           <Dropdown
             defaultSelectedKey={item.publishTarget}
-            options={publishTargetOptions(item)}
+            options={getPublishTargetOptions(item)}
             placeholder={formatMessage('Select a publish target')}
             styles={{
               root: { width: '100%' },
               dropdownItems: { selectors: { '.ms-Button-flexContainer': { width: '100%' } } },
             }}
             onChange={(_, option?: IDropdownOption) => handleChangePublishTarget(item, option)}
-            onRenderOption={onRenderOption}
+            onRenderOption={renderDropdownOption}
           />
         );
       },
@@ -212,7 +193,7 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
       maxWidth: 134,
       isRowHeader: true,
       data: 'string',
-      onRender: (item: IBotStatus) => {
+      onRender: (item: BotStatus) => {
         return <span>{item.time ? moment(item.time).format('MM-DD-YYYY') : null}</span>;
       },
       isPadded: true,
@@ -226,8 +207,8 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
       maxWidth: 134,
       isRowHeader: true,
       data: 'string',
-      onRender: (item: IBotStatus) => {
-        return onRenderStatus(item);
+      onRender: (item: BotStatus) => {
+        return renderPublishStatus(item);
       },
       isPadded: true,
     },
@@ -242,7 +223,7 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
       isCollapsible: true,
       isMultiline: true,
       data: 'string',
-      onRender: (item: IBotStatus) => {
+      onRender: (item: BotStatus) => {
         return <span>{item.message}</span>;
       },
       isPadded: true,
@@ -258,7 +239,7 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
       isCollapsible: true,
       isMultiline: true,
       data: 'string',
-      onRender: (item: IBotStatus) => {
+      onRender: (item: BotStatus) => {
         return <span>{item.comment}</span>;
       },
       isPadded: true,
@@ -274,38 +255,29 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
       isCollapsible: true,
       isMultiline: true,
       data: 'string',
-      onRender: (item: IBotStatus) => {
+      onRender: (item: BotStatus) => {
         return (
           <IconButton
-            iconProps={{ iconName: showHistoryBots.includes(item.id) ? 'ChevronDown' : 'ChevronRight' }}
+            iconProps={{ iconName: expandedBotIds[item.id] ? 'ChevronDown' : 'ChevronRight' }}
             styles={{ root: { float: 'right' } }}
-            onClick={() => changeShowHistoryBots(item)}
+            onClick={() => onChangeShowHistoryBots(item)}
           />
         );
       },
       isPadded: true,
     },
   ];
-  const onRenderRow = (props, defaultRender) => {
-    const { item }: { item: IBotStatus } = props;
-    const publishStatusList: PublishResult[] = item.publishTarget
-      ? botPublishHistoryList.find((list) => list.projectId === item.id)?.publishHistory[item.publishTarget] || []
-      : [];
-    const target = item.publishTargets?.find((target) => target.name === item.publishTarget);
-    const publishType = botPublishTypesList
-      .find((type) => type.projectId === item.id)
-      ?.publishTypes?.filter((t) => t.name === target?.type)[0];
-    const isRollbackSupported = !!target && !!publishType?.features?.rollback;
+
+  const renderTableRow = (props, defaultRender) => {
+    const { item }: { item: BotStatus } = props;
+    const publishStatusList: PublishResult[] = get(botPublishHistoryList, [item.id, item.publishTarget || ''], []);
     const handleRollbackClick = (selectedVersion) => {
       onRollbackClick(selectedVersion, item);
     };
-    const hanldeUpdatePublishHistory = (publishHistories) => {
-      updatePublishHistory(publishHistories, item);
-    };
     return (
       <Fragment>
         {defaultRender(props)}
-        <div css={{ display: showHistoryBots.includes(item.id) ? 'block' : 'none', margin: '20px 0 38px 12px' }}>
+        <div css={{ display: expandedBotIds[item.id] ? 'block' : 'none', margin: '20px 0 38px 12px' }}>
           <div css={{ fontSize: '14px', lineHeight: '20px', color: '#323130', fontWeight: 'bold' }}>
             Publish history
           </div>
@@ -313,10 +285,8 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
             <div style={{ fontSize: FontSizes.small, margin: '20px 0 0 50px' }}>No publish history</div>
           ) : (
             <PublishStatusList
-              isRollbackSupported={isRollbackSupported}
+              isRollbackSupported={false}
               items={publishStatusList}
-              updateItems={hanldeUpdatePublishHistory}
-              onLogClick={onLogClick}
               onRollbackClick={handleRollbackClick}
             />
           )}
@@ -324,6 +294,7 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
       </Fragment>
     );
   };
+
   return (
     <div css={listRoot} data-testid={'bot-status-list'}>
       <div css={tableView}>
@@ -336,7 +307,7 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
             isSortedDescending: currentSort.descending,
           }))}
           css={detailList}
-          items={items}
+          items={displayedItems}
           styles={{ root: { selectors: { '.ms-DetailsRow-fields': { display: 'flex', alignItems: 'center' } } } }}
           onColumnHeaderClick={(_, clickedCol) => {
             if (!clickedCol) return;
@@ -347,7 +318,7 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
               clickedCol.isSorted = false;
             }
           }}
-          onRenderRow={onRenderRow}
+          onRenderRow={renderTableRow}
         />
       </div>
     </div>
diff --git a/Composer/packages/client/src/pages/publish/LogDialog.tsx b/Composer/packages/client/src/pages/publish/LogDialog.tsx
new file mode 100644
index 0000000000..c02487ea9d
--- /dev/null
+++ b/Composer/packages/client/src/pages/publish/LogDialog.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import formatMessage from 'format-message';
+import { Dialog } from 'office-ui-fabric-react/lib/Dialog';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+
+export type LogDialogProps = {
+  value: string;
+  onDismiss: () => void;
+};
+
+export const LogDialog: React.FC<LogDialogProps> = ({ value = '', onDismiss }) => {
+  const logDialogProps = {
+    title: 'Publish Log',
+  };
+  return (
+    <Dialog
+      dialogContentProps={logDialogProps}
+      hidden={false}
+      minWidth={700}
+      modalProps={{ isBlocking: true }}
+      onDismiss={onDismiss}
+    >
+      <TextField
+        multiline
+        readOnly
+        placeholder={formatMessage('Log output')}
+        style={{ minHeight: 300 }}
+        value={value}
+      />
+    </Dialog>
+  );
+};
diff --git a/Composer/packages/client/src/pages/publish/Notifications.tsx b/Composer/packages/client/src/pages/publish/Notifications.tsx
index b3afc2236a..8802db9da7 100644
--- a/Composer/packages/client/src/pages/publish/Notifications.tsx
+++ b/Composer/packages/client/src/pages/publish/Notifications.tsx
@@ -8,7 +8,7 @@ import { Icon } from 'office-ui-fabric-react/lib/Icon';
 
 import { CardProps } from '../../components/Notifications/NotificationCard';
 
-import { IBotStatus } from './BotStatusList';
+import { BotStatus } from './type';
 
 const cardContent = css`
   display: flex;
@@ -35,7 +35,7 @@ const cardDescription = css`
   word-break: break-word;
 `;
 
-export const getPublishedNotificationCardProps = (item: IBotStatus): CardProps => {
+export const getPublishedNotificationCardProps = (item: BotStatus): CardProps => {
   const statusIconStyle = css({
     margin: '12px 0 0 -1px',
     width: '12px',
@@ -68,7 +68,7 @@ export const getPublishedNotificationCardProps = (item: IBotStatus): CardProps =
     ),
   };
 };
-export const getPendingNotificationCardProps = (items: IBotStatus[]): CardProps => {
+export const getPendingNotificationCardProps = (items: BotStatus[]): CardProps => {
   return {
     title: '',
     description: formatMessage(`Publishing {count} bots`, { count: items.length }),
diff --git a/Composer/packages/client/src/pages/publish/Publish.tsx b/Composer/packages/client/src/pages/publish/Publish.tsx
index 130f7b3b8a..be991cd3bb 100644
--- a/Composer/packages/client/src/pages/publish/Publish.tsx
+++ b/Composer/packages/client/src/pages/publish/Publish.tsx
@@ -3,89 +3,46 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { useState, useEffect, useMemo, Fragment } from 'react';
+import { useState, useEffect, useMemo, Fragment, useRef } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import formatMessage from 'format-message';
-import { Dialog } from 'office-ui-fabric-react/lib/Dialog';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { useRecoilValue } from 'recoil';
-import { ActionButton } from 'office-ui-fabric-react/lib/Button';
-import { DialogSetting, PublishTarget, PublishResult } from '@bfc/shared';
-import isEqual from 'lodash/isEqual';
+import { PublishResult } from '@bfc/shared';
 
 import { dispatcherState, localBotPublishHistorySelector, localBotsDataSelector } from '../../recoilModel';
-import { Toolbar, IToolbarItem } from '../../components/Toolbar';
 import { AuthDialog } from '../../components/Auth/AuthDialog';
 import { createNotification } from '../../recoilModel/dispatchers/notification';
-import { Notification, PublishType } from '../../recoilModel/types';
+import { Notification } from '../../recoilModel/types';
 import { getSensitiveProperties } from '../../recoilModel/dispatchers/utils/project';
 import { armScopes } from '../../constants';
 import { getTokenFromCache, isShowAuthDialog, isGetTokenFromUser } from '../../utils/auth';
 import { AuthClient } from '../../utils/authClient';
 import TelemetryClient from '../../telemetry/TelemetryClient';
+import { ApiStatus, PublishStatusPollingUpdater, pollingUpdaterList } from '../../utils/publishStatusPollingUpdater';
+import { navigateTo } from '../../utils/navigation';
 
 import { PublishDialog } from './PublishDialog';
 import { ContentHeaderStyle, HeaderText, ContentStyle, contentEditor } from './styles';
-import { BotStatusList, IBotStatus } from './BotStatusList';
+import { BotStatusList } from './BotStatusList';
 import { getPendingNotificationCardProps, getPublishedNotificationCardProps } from './Notifications';
 import { PullDialog } from './pullDialog';
+import { PublishToolbar } from './PublishToolbar';
+import { Bot, BotStatus } from './type';
+import {
+  initUpdaterStatus,
+  generateBotPropertyData,
+  generateBotStatusList,
+  deleteNotificationInterval,
+} from './publishPageUtils';
 
-const publishStatusInterval = 10000;
-const deleteNotificationInterval = 5000;
-const intervals: { [key: string]: number } = {};
-
-const generateComputedData = (botProjectData, publishHistoryList, currentBotPublishTargetList) => {
-  const botSettingList: { projectId: string; setting: DialogSetting }[] = [];
-  const statusList: IBotStatus[] = [];
-  const botPublishTypesList: { projectId: string; publishTypes: PublishType[] }[] = [];
-  const publishTargetsList: { projectId: string; publishTargets: PublishTarget[] }[] = [];
-  botProjectData.forEach((bot) => {
-    const botProjectId = bot.projectId;
-    botSettingList.push({
-      projectId: botProjectId,
-      setting: bot.setting,
-    });
-    botPublishTypesList.push({
-      projectId: botProjectId,
-      publishTypes: bot.publishTypes,
-    });
-    const publishTargets = bot.setting ? bot.setting.publishTargets || [] : [];
-    publishTargetsList.push({
-      projectId: botProjectId,
-      publishTargets,
-    });
-    const botStatus: IBotStatus = {
-      id: botProjectId,
-      name: bot.name,
-      publishTargets: [],
-    };
-    const publishHistory = publishHistoryList.find((item) => item.projectId === bot.projectId)?.publishHistory;
-    if (publishTargets.length > 0) {
-      const currentPublishTarget = currentBotPublishTargetList?.find(
-        (targetMap) => targetMap.projectId === botStatus.id
-      );
-      botStatus.publishTarget = (currentPublishTarget?.publishTarget ?? publishTargets[0].name) as string;
-      botStatus.publishTargets = publishTargets;
-      if (publishHistory[botStatus.publishTarget]?.length > 0) {
-        const history = publishHistory[botStatus.publishTarget][0];
-        botStatus.time = history.time;
-        botStatus.comment = history.comment;
-        botStatus.message = history.message;
-        botStatus.status = history.status;
-      }
-    }
-    statusList.push(botStatus);
-  });
-  return { botSettingList, statusList, botPublishTypesList };
-};
 const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: string }>> = (props) => {
   const { projectId = '' } = props;
+
   const botProjectData = useRecoilValue(localBotsDataSelector);
   const publishHistoryList = useRecoilValue(localBotPublishHistorySelector);
   const {
     getPublishHistory,
-    getPublishStatus,
-    getPublishTargetTypes,
+    getPublishStatusV2,
     setPublishTargets,
     publishToTarget,
     setQnASettings,
@@ -94,36 +51,39 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
     deleteNotification,
   } = useRecoilValue(dispatcherState);
 
-  const [selectedBots, setSelectedBots] = useState<IBotStatus[]>([]);
-  const [publishDisabled, setPublishDisabled] = useState(false);
-
-  const [showNotifications, setShowNotifications] = useState<Record<string, boolean>>({});
-  const [currentBotPublishTargetList, setCurrentBotPublishTargetList] = useState<
-    { projectId: string; publishTarget: string }[]
-  >([]);
-  // fill Settings, status, publishType, publish target for bot from botProjectMeta, publishHistory
-  const { botSettingList, statusList, botPublishTypesList } = useMemo(() => {
-    return generateComputedData(botProjectData, publishHistoryList, currentBotPublishTargetList);
-  }, [botProjectData, publishHistoryList]);
-
-  const [botStatusList, setBotStatusList] = useState<IBotStatus[]>(statusList);
-  const [botPublishHistoryList, setBotPublishHistoryList] = useState<
-    { projectId: string; publishHistory: { [key: string]: PublishResult[] } }[]
-  >(publishHistoryList);
-  const [showLog, setShowLog] = useState(false);
-  const [publishDialogHidden, setPublishDialogHidden] = useState(true);
-  const [pullDialogHidden, setPullDialogHidden] = useState(true);
+  const pendingNotificationRef = useRef<Notification>();
+  const showNotificationsRef = useRef<Record<string, boolean>>({});
 
+  const [currentBotList, setCurrentBotList] = useState<Bot[]>([]);
+  const [publishDialogVisible, setPublishDialogVisiblity] = useState(false);
+  const [pullDialogVisible, setPullDialogVisiblity] = useState(false);
   const [showAuthDialog, setShowAuthDialog] = useState(false);
+  const [updaterStatus, setUpdaterStatus] = useState<{ [skillId: string]: boolean }>(
+    initUpdaterStatus(publishHistoryList)
+  );
+  const [checkedSkillIds, setCheckedSkillIds] = useState<string[]>([]);
 
-  // items to show in the list
-  const [selectedVersion, setSelectedVersion] = useState<PublishResult | null>(null);
+  const { botPropertyData, botList } = useMemo(() => {
+    return generateBotPropertyData(botProjectData);
+  }, [botProjectData]);
 
-  const isPullSupported = useMemo(() => {
-    return !!selectedBots.find((bot) => {
-      const publishTypes = botPublishTypesList.find((types) => types.projectId === bot.id)?.publishTypes;
+  const botStatusList = useMemo(() => {
+    return generateBotStatusList(currentBotList, botPropertyData, publishHistoryList);
+  }, [currentBotList, botPropertyData, publishHistoryList]);
+
+  const isPublishPending = useMemo(() => {
+    return Object.values(updaterStatus).some(Boolean);
+  }, [updaterStatus]);
+
+  const selectedBots = useMemo(() => {
+    return currentBotList.filter((bot) => checkedSkillIds.some((id) => bot.id === id));
+  }, [checkedSkillIds]);
+
+  const canPull = useMemo(() => {
+    return selectedBots.some((bot) => {
+      const { publishTypes, publishTargets } = botPropertyData[bot.id];
       const type = publishTypes?.find(
-        (t) => t.name === bot.publishTargets?.find((target) => target.name === bot.publishTarget)?.type
+        (t) => t.name === publishTargets?.find((target) => target.name === bot.publishTarget)?.type
       );
       if (type?.features?.pull) {
         return true;
@@ -132,185 +92,55 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
     });
   }, [selectedBots]);
 
-  const toolbarItems: IToolbarItem[] = [
-    {
-      type: 'element',
-      align: 'left',
-      element: (
-        <ActionButton
-          data-testid="publishPage-Toolbar-Publish"
-          disabled={publishDisabled || selectedBots.length === 0}
-          styles={{ root: { fontSize: '16px' } }}
-          onClick={() => {
-            if (isShowAuthDialog(false)) {
-              setShowAuthDialog(true);
-            } else {
-              setPublishDialogHidden(false);
-            }
-          }}
-        >
-          <svg
-            css={{ margin: '0 4px' }}
-            fill="none"
-            height="15"
-            viewBox="0 0 16 15"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M16 4.28906V15H5V0H11.7109L16 4.28906ZM12 4H14.2891L12 1.71094V4ZM15 14V5H11V1H6V14H15ZM0 5H4V6H0V5ZM1 7H4V8H1V7ZM2 9H4V10H2V9Z"
-              fill={selectedBots.length > 0 && !publishDisabled ? '#0078D4' : 'rgb(161, 159, 157)'}
-            />
-          </svg>
-          <span css={{ margin: '0 4px' }}>{formatMessage('Publish selected bots')}</span>
-        </ActionButton>
-      ),
-    },
-    {
-      type: 'action',
-      text: formatMessage('Pull from selected profile'),
-      buttonProps: {
-        iconProps: {
-          iconName: 'CloudDownload',
-        },
-        onClick: () => {
-          setPullDialogHidden(false);
-          TelemetryClient.track('ToolbarButtonClicked', { name: 'pullFromProfile' });
-        },
-      },
-      align: 'left',
-      dataTestid: 'publishPage-Toolbar-Pull',
-      disabled: !isPullSupported,
-    },
-  ];
-
-  const getUpdatedStatus = (target, botProjectId): void => {
-    // TODO: this should use a backoff mechanism to not overload the server with requests
-    // OR BETTER YET, use a websocket events system to receive updates... (SOON!)
-    if (intervals[`${botProjectId}-${target.name}`]) return;
-    getPublishStatus(botProjectId, target);
-    intervals[`${botProjectId}-${target.name}`] = window.setInterval(async () => {
-      getPublishStatus(botProjectId, target);
-    }, publishStatusInterval);
-  };
+  const canPublish =
+    checkedSkillIds.length > 0 && !isPublishPending && selectedBots.some((bot) => Boolean(bot.publishTarget));
 
-  const cleanupInterval = (target, botProjectId): void => {
-    if (intervals[`${botProjectId}-${target.name}`]) {
-      clearInterval(intervals[`${botProjectId}-${target.name}`]);
-      delete intervals[`${botProjectId}-${target.name}`];
-    }
+  // stop polling updater & delete pending notification
+  const stopUpdater = async (updater) => {
+    updater.stop();
+
+    // Remove pending notification
+    const pendingNotification = pendingNotificationRef.current;
+    pendingNotification && (await deleteNotification(pendingNotification.id));
+    pendingNotificationRef.current = undefined;
   };
 
-  const [pendingNotification, setPendingNotification] = useState<Notification>();
-  const [previousBotPublishHistoryList, setPreviousBotPublishHistoryList] = useState(botPublishHistoryList);
-  // check history to see if a 202 is found
   useEffect(() => {
-    // set publishDisabled
-    setPublishDisabled(
-      selectedBots.some((bot) => {
-        if (!(bot.publishTarget && bot.publishTargets)) {
-          return false;
-        }
-        const selectedTarget = bot.publishTargets.find((target) => target.name === bot.publishTarget);
-        const botProjectId = bot.id;
-        if (!selectedTarget) return false;
-        const botPublishHistory = botPublishHistoryList.find(
-          (publishHistory) => publishHistory.projectId === botProjectId
-        )?.publishHistory[bot.publishTarget];
-        if (!botPublishHistory || botPublishHistory.length === 0) {
-          return;
-        }
-        const latestPublishItem = botPublishHistory[0];
-        if (latestPublishItem.status === 202) {
-          return true;
-        }
-      })
-    );
+    if (currentBotList.length < botList.length) {
+      // init bot status list for the botProjectData is empty array when first mounted
+      setCurrentBotList(botList);
 
-    botStatusList.forEach((bot) => {
-      if (!(bot.publishTarget && bot.publishTargets)) {
-        return;
-      }
-      const selectedTarget = bot.publishTargets.find((target) => target.name === bot.publishTarget);
-      const botProjectId = bot.id;
-      if (!selectedTarget) return;
-      const botPublishHistory = botPublishHistoryList.find(
-        (publishHistory) => publishHistory.projectId === botProjectId
-      )?.publishHistory[bot.publishTarget];
-      const previousBotPublishHistory = previousBotPublishHistoryList.find(
-        (publishHistory) => publishHistory.projectId === botProjectId
-      )?.publishHistory[bot.publishTarget];
-      if (!botPublishHistory || botPublishHistory.length === 0) {
-        return;
-      }
-      const latestPublishItem = botPublishHistory[0];
-      // stop polling if status is 200 or 500
-      if (latestPublishItem.status === 202) {
-        getUpdatedStatus(selectedTarget, bot.id);
-      } else if (latestPublishItem.status === 200 || latestPublishItem.status === 500) {
-        cleanupInterval(selectedTarget, bot.id);
-        // show result notifications
-        if (!isEqual(previousBotPublishHistory, botPublishHistory)) {
-          bot.status = latestPublishItem.status;
-          if (showNotifications[bot.id]) {
-            pendingNotification && deleteNotification(pendingNotification.id);
-            const resultNotification = createNotification(getPublishedNotificationCardProps(bot));
-            addNotification(resultNotification);
-            setShowNotifications({ ...showNotifications, [botProjectId]: false });
-            setTimeout(() => {
-              deleteNotification(resultNotification.id);
-            }, deleteNotificationInterval);
-          }
-        }
-      }
-    });
-  }, [botPublishHistoryList]);
-
-  useEffect(() => {
-    if (projectId) {
-      getPublishTargetTypes(projectId);
-      // init selected status
-      setSelectedVersion(null);
+      // Start updaters
+      botList
+        .filter(
+          (bot) => !!bot.publishTarget && !pollingUpdaterList.some((u) => u.isSameUpdater(bot.id, bot.publishTarget))
+        )
+        .forEach((bot) => {
+          if (pollingUpdaterList.some((updater) => updater.isSameUpdater(bot.id, bot.publishTarget))) return;
+          const updater = new PublishStatusPollingUpdater(bot.id, bot.publishTarget);
+          pollingUpdaterList.push(updater);
+          updater.start(onReceiveUpdaterPayload);
+        });
     }
-  }, [projectId]);
-
-  useEffect(() => {
-    // init bot status list for the botProjectData is empty array when first mounted
-    setBotPublishHistoryList(publishHistoryList);
-    setBotStatusList(statusList);
-    setSelectedBots(
-      selectedBots.map((selectedBot) => {
-        const bot = statusList.find((botStatus) => botStatus.id === selectedBot.id);
-        if (bot) {
-          selectedBot = { ...bot, comment: '', message: '', status: undefined, time: '' };
-        }
-        return selectedBot;
-      })
-    );
-  }, [publishHistoryList]);
-  useEffect(() => {
-    statusList.forEach((botStatus) => {
-      if (!botStatus.publishTargets || !botStatus.publishTarget) {
-        return;
-      }
-      const target = botStatus.publishTargets.find((t) => t.name === botStatus.publishTarget);
-      getPublishHistory(botStatus.id, target).then(() => {
-        getPublishStatus(botStatus.id, target);
-      });
-    });
-  }, [botProjectData.length]);
+  }, [botList]);
 
   useEffect(() => {
+    // Clear intervals when unmount
     return () => {
-      if (intervals) {
-        Object.values(intervals).forEach((value) => {
-          window.clearInterval(value);
+      if (pollingUpdaterList) {
+        pollingUpdaterList.forEach((updater) => {
+          stopUpdater(updater);
         });
+        while (pollingUpdaterList.length) {
+          pollingUpdaterList.pop();
+        }
       }
     };
   }, []);
-  const rollbackToVersion = (version: PublishResult, item: IBotStatus) => {
-    const setting = botSettingList.find((botSetting) => botSetting.projectId === item.id)?.setting;
+
+  // roll back
+  const rollbackToVersion = (version: PublishResult, item: BotStatus) => {
+    const setting = botPropertyData[item.id].setting;
     const selectedTarget = item.publishTargets?.find((target) => target.name === item.publishTarget);
     if (setting) {
       const sensitiveSettings = getSensitiveProperties(setting);
@@ -318,78 +148,106 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
     }
   };
 
-  const onRollbackToVersion = (selectedVersion: PublishResult, item: IBotStatus) => {
+  const onRollbackToVersion = (selectedVersion: PublishResult, item: BotStatus) => {
     item.publishTarget && item.publishTargets && rollbackToVersion(selectedVersion, item);
   };
-  const onShowLog = (selectedVersion) => {
-    setSelectedVersion(selectedVersion);
-    setShowLog(true);
-  };
-  const updateBotStatusList = (statusList: IBotStatus[]) => {
-    setBotStatusList(statusList);
+
+  const updatePublishStatus = async (data) => {
+    const { botProjectId, targetName, apiResponse } = data;
+    const publishTargets = botPropertyData[botProjectId].publishTargets;
+    if (!publishTargets) return;
+
+    const selectedTarget = publishTargets.find((target) => target.name === targetName);
+    // set recoil value
+    await getPublishStatusV2(botProjectId, selectedTarget, apiResponse);
   };
-  const updatePublishHistory = (publishHistories: PublishResult[], botStatus: IBotStatus) => {
-    const newPublishHistory = botPublishHistoryList.map((botPublishHistory) => {
-      if (botPublishHistory.projectId === botStatus.id && botStatus.publishTarget) {
-        botPublishHistory.publishHistory = {
-          ...botPublishHistory.publishHistory,
-          [botStatus.publishTarget]: publishHistories,
-        };
+
+  const changeNotificationStatus = async (data) => {
+    const { botProjectId, targetName, apiResponse } = data;
+    const updater = pollingUpdaterList.find((i) => i.isSameUpdater(botProjectId, targetName));
+    const updatedBot = botList.find((bot) => bot.id === botProjectId);
+    if (!updatedBot || !updater) return;
+    const responseData = apiResponse.data;
+
+    if (responseData.status !== ApiStatus.Publishing) {
+      stopUpdater(updater);
+
+      // Show result notifications
+      const displayedNotifications = showNotificationsRef.current;
+      if (displayedNotifications[botProjectId]) {
+        const resultNotification = createNotification(getPublishedNotificationCardProps(updatedBot));
+        addNotification(resultNotification);
+        setTimeout(() => {
+          deleteNotification(resultNotification.id);
+          showNotificationsRef.current = { ...displayedNotifications, [botProjectId]: false };
+        }, deleteNotificationInterval);
       }
-      return botPublishHistory;
-    });
-    setBotPublishHistoryList(newPublishHistory);
+    }
   };
-  const updateSelectedBots = (selectedBots) => {
-    const bots: IBotStatus[] = [];
-    selectedBots.forEach((bot) => {
-      bots.push({
-        id: bot.id,
-        name: bot.name,
-        publishTarget: bot.publishTarget,
-        publishTargets: bot.publishTargets,
-      });
+
+  const updateUpdaterStatus = (payload) => {
+    const { botProjectId, targetName, apiResponse } = payload;
+    const pending = apiResponse.data.status === ApiStatus.Publishing;
+    setUpdaterStatus({
+      ...updaterStatus,
+      [`${botProjectId}/${targetName}`]: pending,
     });
-    setSelectedBots(bots);
   };
-  const publish = async (items: IBotStatus[]) => {
+
+  // updater onData function
+  const onReceiveUpdaterPayload = (payload) => {
+    updateUpdaterStatus(payload);
+    updatePublishStatus(payload);
+    changeNotificationStatus(payload);
+  };
+
+  const updateCheckedSkills = (checkedIds: string[]) => {
+    setCheckedSkillIds(checkedIds);
+  };
+
+  const manageSkillPublishProfile = (skillId: string) => {
+    const url =
+      skillId === projectId
+        ? `/bot/${projectId}/botProjectsSettings/#addNewPublishProfile`
+        : `bot/${projectId}/skill/${skillId}/botProjectsSettings/#addNewPublishProfile`;
+    navigateTo(url);
+  };
+
+  const publish = async (items: BotStatus[]) => {
     // get token
     let token = '';
     if (isGetTokenFromUser()) {
       token = getTokenFromCache('accessToken');
-      console.log(token);
     } else {
       token = await AuthClient.getAccessToken(armScopes);
     }
 
-    setPublishDisabled(true);
-    setPreviousBotPublishHistoryList(botPublishHistoryList);
+    setPublishDialogVisiblity(false);
     // notifications
-    setShowNotifications(
-      items.reduce((accumulator, item) => {
-        accumulator[item.id] = true;
-        return accumulator;
-      }, {})
-    );
+    showNotificationsRef.current = items.reduce((accumulator, item) => {
+      accumulator[item.id] = true;
+      return accumulator;
+    }, {});
     const notification = createNotification(getPendingNotificationCardProps(items));
-    setPendingNotification(notification);
+    pendingNotificationRef.current = notification;
     addNotification(notification);
 
     // publish to remote
     for (const bot of items) {
-      if (bot.publishTarget && bot.publishTargets) {
-        const selectedTarget = bot.publishTargets.find((target) => target.name === bot.publishTarget);
+      const setting = botPropertyData[bot.id].setting;
+      const publishTargets = botPropertyData[bot.id].publishTargets;
+      if (!(bot.publishTarget && publishTargets && setting)) {
+        return;
+      }
+      if (bot.publishTarget && publishTargets) {
+        const selectedTarget = publishTargets.find((target) => target.name === bot.publishTarget);
         const botProjectId = bot.id;
-        const setting = botSettingList.find((botsetting) => botsetting.projectId === bot.id)?.setting;
-        if (!setting?.publishTargets) {
-          return;
-        }
         setting.qna.subscriptionKey && (await setQnASettings(botProjectId, setting.qna.subscriptionKey));
         const sensitiveSettings = getSensitiveProperties(setting);
         await publishToTarget(botProjectId, selectedTarget, { comment: bot.comment }, sensitiveSettings, token);
 
         // update the target with a lastPublished date
-        const updatedPublishTargets = setting.publishTargets.map((profile) => {
+        const updatedPublishTargets = publishTargets.map((profile) => {
           if (profile.name === selectedTarget?.name) {
             return {
               ...profile,
@@ -401,40 +259,35 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
         });
 
         await setPublishTargets(updatedPublishTargets, botProjectId);
-        selectedTarget && getUpdatedStatus(selectedTarget, botProjectId);
+        const updater = pollingUpdaterList.find((u) => u.isSameUpdater(botProjectId, bot.publishTarget || ''));
+        updater?.restart(onReceiveUpdaterPayload);
       }
-
-      setBotStatusList(
-        botStatusList.map((bot) => {
-          const item = items.find((i) => i.id === bot.id);
-          if (item) {
-            item.status = 202;
-            return item;
-          }
-          return bot;
-        })
-      );
     }
   };
+
   const changePublishTarget = (publishTarget, currentBotStatus) => {
     const target = currentBotStatus.publishTargets.find((t) => t.name === publishTarget);
-    if (currentBotPublishTargetList.some((targetMap) => targetMap.projectId === currentBotStatus.id)) {
-      setCurrentBotPublishTargetList(
-        currentBotPublishTargetList.map((targetMap) => {
-          if (targetMap.projectId === currentBotStatus.id) {
+    if (currentBotList.some((targetMap) => targetMap.id === currentBotStatus.id)) {
+      setCurrentBotList(
+        currentBotList.map((targetMap) => {
+          if (targetMap.id === currentBotStatus.id) {
             targetMap.publishTarget = publishTarget;
           }
           return targetMap;
         })
       );
     } else {
-      setCurrentBotPublishTargetList([
-        ...currentBotPublishTargetList,
-        { projectId: currentBotStatus.id, publishTarget },
-      ]);
+      setCurrentBotList([...currentBotList, { id: currentBotStatus.id, name: currentBotStatus.name, publishTarget }]);
     }
 
     getPublishHistory(currentBotStatus.id, target);
+
+    // Add new updater
+    if (!pollingUpdaterList.some((u) => u.isSameUpdater(currentBotStatus.id, publishTarget))) {
+      const newUpdater = new PublishStatusPollingUpdater(currentBotStatus.id, publishTarget);
+      newUpdater.start(onReceiveUpdaterPayload);
+      pollingUpdaterList.push(newUpdater);
+    }
   };
 
   return (
@@ -442,46 +295,62 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
       {showAuthDialog && (
         <AuthDialog
           needGraph={false}
-          next={() => setPublishDialogHidden(false)}
+          next={() => setPublishDialogVisiblity(true)}
           onDismiss={() => {
             setShowAuthDialog(false);
           }}
         />
       )}
-      {!publishDialogHidden && (
-        <PublishDialog items={selectedBots} onDismiss={() => setPublishDialogHidden(true)} onSubmit={publish} />
+      {publishDialogVisible && (
+        <PublishDialog
+          items={selectedBots.filter((bot) => !!bot.publishTarget)}
+          onDismiss={() => setPublishDialogVisiblity(false)}
+          onSubmit={publish}
+        />
       )}
-      {!pullDialogHidden &&
+      {pullDialogVisible &&
         selectedBots.map((bot, index) => {
-          const selectedTarget = bot.publishTargets?.find((target) => target.name === bot.publishTarget);
+          const publishTargets = botPropertyData[bot.id].publishTargets;
+          const selectedTarget = publishTargets?.find((target) => target.name === bot.publishTarget);
           const botProjectId = bot.id;
           return (
             <PullDialog
               key={index}
               projectId={botProjectId}
               selectedTarget={selectedTarget}
-              onDismiss={() => setPullDialogHidden(true)}
+              onDismiss={() => setPullDialogVisiblity(false)}
             />
           );
         })}
-      {showLog && <LogDialog version={selectedVersion} onDismiss={() => setShowLog(false)} />}
-      <Toolbar toolbarItems={toolbarItems} />
+      <PublishToolbar
+        canPublish={canPublish}
+        canPull={canPull}
+        onPublish={() => {
+          if (isShowAuthDialog(false)) {
+            setShowAuthDialog(true);
+          } else {
+            setPublishDialogVisiblity(true);
+          }
+          TelemetryClient.track('ToolbarButtonClicked', { name: 'publishSelectedBots' });
+        }}
+        onPull={() => {
+          setPullDialogVisiblity(true);
+          TelemetryClient.track('ToolbarButtonClicked', { name: 'pullFromProfile' });
+        }}
+      />
       <div css={ContentHeaderStyle}>
         <h1 css={HeaderText}>{formatMessage('Publish your bots')}</h1>
       </div>
       <div css={ContentStyle} data-testid="Publish" role="main">
         <div aria-label={formatMessage('List view')} css={contentEditor} role="region">
           <BotStatusList
-            botPublishHistoryList={botPublishHistoryList}
-            botPublishTypesList={botPublishTypesList}
-            changePublishTarget={changePublishTarget}
-            items={botStatusList}
-            projectId={projectId}
-            publishDisabled={publishDisabled}
-            updateItems={updateBotStatusList}
-            updatePublishHistory={updatePublishHistory}
-            updateSelectedBots={updateSelectedBots}
-            onLogClick={onShowLog}
+            botPublishHistoryList={publishHistoryList}
+            botStatusList={botStatusList}
+            checkedIds={checkedSkillIds}
+            disableCheckbox={isPublishPending}
+            onChangePublishTarget={changePublishTarget}
+            onCheck={updateCheckedSkills}
+            onManagePublishProfile={manageSkillPublishProfile}
             onRollbackClick={onRollbackToVersion}
           />
         </div>
@@ -491,19 +360,3 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
 };
 
 export default Publish;
-const LogDialog = (props) => {
-  const logDialogProps = {
-    title: 'Publish Log',
-  };
-  return (
-    <Dialog
-      dialogContentProps={logDialogProps}
-      hidden={false}
-      minWidth={700}
-      modalProps={{ isBlocking: true }}
-      onDismiss={props.onDismiss}
-    >
-      <TextField multiline placeholder="Log Output" style={{ minHeight: 300 }} value={props?.version?.log ?? ''} />
-    </Dialog>
-  );
-};
diff --git a/Composer/packages/client/src/pages/publish/PublishDialog.tsx b/Composer/packages/client/src/pages/publish/PublishDialog.tsx
index 74b9205e31..37963b6f65 100644
--- a/Composer/packages/client/src/pages/publish/PublishDialog.tsx
+++ b/Composer/packages/client/src/pages/publish/PublishDialog.tsx
@@ -10,11 +10,11 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import formatMessage from 'format-message';
 import { CheckboxVisibility, DetailsList } from 'office-ui-fabric-react/lib/DetailsList';
 
-import { IBotStatus } from './BotStatusList';
+import { BotStatus } from './type';
 
 export const PublishDialog = (props) => {
   const { items } = props;
-  const [showItems, setShowItems] = useState<IBotStatus[]>(items);
+  const [showItems, setShowItems] = useState<BotStatus[]>(items);
   const columns = [
     {
       key: 'name',
@@ -25,7 +25,7 @@ export const PublishDialog = (props) => {
       maxWidth: 90,
       isMultiline: true,
       data: 'string',
-      onRender: (item: IBotStatus) => {
+      onRender: (item: BotStatus) => {
         return <span>{item.name}</span>;
       },
       isPadded: true,
@@ -39,7 +39,7 @@ export const PublishDialog = (props) => {
       maxWidth: 200,
       isMultiline: true,
       data: 'string',
-      onRender: (item: IBotStatus) => {
+      onRender: (item: BotStatus) => {
         return <span>{item.publishTarget}</span>;
       },
       isPadded: true,
@@ -52,7 +52,7 @@ export const PublishDialog = (props) => {
       minWidth: 70,
       maxWidth: 90,
       data: 'string',
-      onRender: (item: IBotStatus) => {
+      onRender: (item: BotStatus) => {
         // message for each publish bot
         return (
           <TextField
diff --git a/Composer/packages/client/src/pages/publish/PublishStatusList.tsx b/Composer/packages/client/src/pages/publish/PublishStatusList.tsx
index 6de9ad8011..9d1178f4f9 100644
--- a/Composer/packages/client/src/pages/publish/PublishStatusList.tsx
+++ b/Composer/packages/client/src/pages/publish/PublishStatusList.tsx
@@ -3,28 +3,29 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { DetailsList, IColumn, CheckboxVisibility } from 'office-ui-fabric-react/lib/DetailsList';
+import { DetailsList, CheckboxVisibility } from 'office-ui-fabric-react/lib/DetailsList';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 import moment from 'moment';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import formatMessage from 'format-message';
 import { PublishResult } from '@botframework-composer/types';
 import { ActionButton } from 'office-ui-fabric-react/lib/Button';
 import { SharedColors } from '@uifabric/fluent-theme';
 
+import { ApiStatus } from '../../utils/publishStatusPollingUpdater';
+
 import { listRoot, tableView, detailList } from './styles';
+import { LogDialog } from './LogDialog';
 
-export interface IStatusListProps {
+export type StatusListProps = {
   items: PublishResult[];
-  updateItems: (items: PublishResult[]) => void;
   isRollbackSupported: boolean;
-  onLogClick: (item: PublishResult) => void;
   onRollbackClick: (item: PublishResult) => void;
-}
+};
 
 function onRenderDetailsHeader(props, defaultRender) {
   return (
@@ -37,16 +38,15 @@ function onRenderDetailsHeader(props, defaultRender) {
   );
 }
 
-export const PublishStatusList: React.FC<IStatusListProps> = (props) => {
-  const { items, isRollbackSupported, onLogClick, onRollbackClick } = props;
+export const PublishStatusList: React.FC<StatusListProps> = (props) => {
+  const { items, isRollbackSupported, onRollbackClick } = props;
+  const [displayedLog, setDisplayedLog] = useState<string | null>(null);
   const [currentSort, setSort] = useState({ key: 'PublishDate', descending: true });
-  const sortByDate = (ev: React.MouseEvent<HTMLElement>, column: IColumn): void => {
-    if (column.isSorted && items) {
-      column.isSortedDescending = !column.isSortedDescending;
-      const newItems: PublishResult[] = items.slice().reverse();
-      props.updateItems(newItems);
-    }
-  };
+  const displayedItems = useMemo(() => {
+    if (currentSort.descending) return items;
+    return items.slice().reverse();
+  }, [items, currentSort]);
+
   const columns = [
     {
       key: 'PublishTime',
@@ -70,7 +70,6 @@ export const PublishStatusList: React.FC<IStatusListProps> = (props) => {
       minWidth: 70,
       maxWidth: 90,
       isRowHeader: true,
-      onColumnClick: sortByDate,
       data: 'string',
       onRender: (item: PublishResult) => {
         return <span>{moment(item.time).format('MM-DD-YYYY')}</span>;
@@ -86,9 +85,9 @@ export const PublishStatusList: React.FC<IStatusListProps> = (props) => {
       maxWidth: 40,
       data: 'string',
       onRender: (item: PublishResult) => {
-        if (item.status === 200) {
+        if (item.status === ApiStatus.Success) {
           return <Icon iconName="Accept" style={{ color: SharedColors.green10, fontWeight: 600 }} />;
-        } else if (item.status === 202) {
+        } else if (item.status === ApiStatus.Publishing) {
           return (
             <div style={{ display: 'flex' }}>
               <Spinner size={SpinnerSize.small} />
@@ -160,7 +159,7 @@ export const PublishStatusList: React.FC<IStatusListProps> = (props) => {
             allowDisabledFocus
             styles={{ root: { color: '#0078D4' } }}
             onClick={() => {
-              onLogClick(item);
+              setDisplayedLog(item.log || '');
             }}
           >
             {formatMessage('View log')}
@@ -185,7 +184,7 @@ export const PublishStatusList: React.FC<IStatusListProps> = (props) => {
           <ActionButton
             allowDisabledFocus
             disabled={!(isRollbackSupported && item.status === 200)}
-            styles={{ root: { color: '#0078D4' } }}
+            styles={{ root: { color: SharedColors.cyanBlue10 } }}
             onClick={() => {
               onRollbackClick(item);
             }}
@@ -210,7 +209,7 @@ export const PublishStatusList: React.FC<IStatusListProps> = (props) => {
             isSortedDescending: currentSort.descending,
           }))}
           css={detailList}
-          items={items}
+          items={displayedItems}
           styles={{ root: { selectors: { '.ms-DetailsRow-fields': { display: 'flex', alignItems: 'center' } } } }}
           onColumnHeaderClick={(_, clickedCol) => {
             if (!clickedCol) return;
@@ -224,6 +223,7 @@ export const PublishStatusList: React.FC<IStatusListProps> = (props) => {
           onRenderDetailsHeader={onRenderDetailsHeader}
         />
       </div>
+      {displayedLog !== null ? <LogDialog value={displayedLog} onDismiss={() => setDisplayedLog(null)} /> : null}
     </div>
   );
 };
diff --git a/Composer/packages/client/src/pages/publish/PublishToolbar.tsx b/Composer/packages/client/src/pages/publish/PublishToolbar.tsx
new file mode 100644
index 0000000000..15bad1c79f
--- /dev/null
+++ b/Composer/packages/client/src/pages/publish/PublishToolbar.tsx
@@ -0,0 +1,65 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import formatMessage from 'format-message';
+import { ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { SharedColors } from '@uifabric/fluent-theme/lib/fluent/FluentColors';
+import { FontSizes } from '@uifabric/fluent-theme';
+
+import { Toolbar, IToolbarItem } from '../../components/Toolbar';
+
+export type PublishToolbarProps = {
+  canPublish: boolean;
+  canPull: boolean;
+  onPublish: () => void;
+  onPull: () => void;
+};
+
+export const PublishToolbar: React.FC<PublishToolbarProps> = ({ canPublish, canPull, onPublish, onPull }) => {
+  const toolbarItems: IToolbarItem[] = [
+    {
+      type: 'element',
+      align: 'left',
+      element: (
+        <ActionButton
+          data-testid="publishPage-Toolbar-Publish"
+          disabled={!canPublish}
+          styles={{ root: { fontSize: FontSizes.size16 } }}
+          onClick={onPublish}
+        >
+          <svg
+            css={{ margin: '0 4px' }}
+            fill="none"
+            height="15"
+            viewBox="0 0 16 15"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16 4.28906V15H5V0H11.7109L16 4.28906ZM12 4H14.2891L12 1.71094V4ZM15 14V5H11V1H6V14H15ZM0 5H4V6H0V5ZM1 7H4V8H1V7ZM2 9H4V10H2V9Z"
+              fill={canPublish ? SharedColors.cyanBlue10 : 'rgb(161, 159, 157)'}
+            />
+          </svg>
+          <span css={{ margin: '0 4px' }}>{formatMessage('Publish selected bots')}</span>
+        </ActionButton>
+      ),
+    },
+    {
+      type: 'action',
+      text: formatMessage('Pull from selected profile'),
+      buttonProps: {
+        iconProps: {
+          iconName: 'CloudDownload',
+        },
+        onClick: onPull,
+      },
+      align: 'left',
+      dataTestid: 'publishPage-Toolbar-Pull',
+      disabled: !canPull,
+    },
+  ];
+  return <Toolbar toolbarItems={toolbarItems} />;
+};
diff --git a/Composer/packages/client/src/pages/publish/publishPageUtils.tsx b/Composer/packages/client/src/pages/publish/publishPageUtils.tsx
new file mode 100644
index 0000000000..60b31969e3
--- /dev/null
+++ b/Composer/packages/client/src/pages/publish/publishPageUtils.tsx
@@ -0,0 +1,69 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { ApiStatus } from '../../utils/publishStatusPollingUpdater';
+
+import { Bot, BotStatus, BotPublishHistory, BotProjectType, BotPropertyType } from './type';
+
+export const deleteNotificationInterval = 5000;
+
+export const generateBotPropertyData = (botProjectData: BotProjectType[]) => {
+  // fill Settings, status, publishType, publish target for bot from botProjectMeta
+  const botPropertyData: BotPropertyType = {};
+  const botList: Bot[] = [];
+  botProjectData.forEach((bot) => {
+    const botProjectId = bot.projectId;
+    const publishTargets = bot.setting?.publishTargets || [];
+    botPropertyData[botProjectId] = {
+      setting: bot.setting,
+      publishTargets,
+      publishTypes: bot.publishTypes,
+    };
+    const tmpBot = { id: bot.projectId, name: bot.name, publishTarget: '' };
+    if (publishTargets.length > 0) {
+      tmpBot.publishTarget = publishTargets[0].name;
+    }
+    botList.push(tmpBot);
+  });
+  return { botPropertyData, botList };
+};
+
+export const generateBotStatusList = (
+  botList: Bot[],
+  botPropertyData: BotPropertyType,
+  botPublishHistoryList: BotPublishHistory
+): BotStatus[] => {
+  const bots = botList.map((bot) => {
+    const botStatus: BotStatus = Object.assign({}, bot);
+    const publishTargets = botPropertyData[bot.id].publishTargets;
+    const publishHistory = botPublishHistoryList[bot.id];
+    if (publishTargets.length > 0 && botStatus.publishTarget && publishHistory) {
+      botStatus.publishTargets = publishTargets;
+      if (publishHistory[botStatus.publishTarget] && publishHistory[botStatus.publishTarget].length > 0) {
+        const history = publishHistory[botStatus.publishTarget][0];
+        botStatus.time = history.time;
+        botStatus.comment = history.comment;
+        botStatus.message = history.message;
+        botStatus.status = history.status;
+      }
+    }
+    return botStatus;
+  });
+  return bots;
+};
+
+// Recover the loading status when switching back to publish page.
+export const initUpdaterStatus = (history: BotPublishHistory) => {
+  const status = {};
+  Object.keys(history).forEach((skillId) => {
+    const targetHistory = history[skillId];
+    Object.keys(targetHistory).forEach((targetName) => {
+      const historyData = targetHistory[targetName];
+      if (Array.isArray(historyData) && historyData[0] && historyData[0].status === ApiStatus.Publishing) {
+        status[`${skillId}/${targetName}`] = true;
+      }
+    });
+  });
+
+  return status;
+};
diff --git a/Composer/packages/client/src/pages/publish/type.ts b/Composer/packages/client/src/pages/publish/type.ts
new file mode 100644
index 0000000000..6df9e962eb
--- /dev/null
+++ b/Composer/packages/client/src/pages/publish/type.ts
@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { DialogSetting, PublishResult, PublishTarget } from '@bfc/shared';
+
+import { PublishType } from '../../recoilModel/types';
+
+export type BotStatus = {
+  /** Skill id. */
+  id: string;
+  /** Skill name. */
+  name: string;
+  publishTargets?: PublishTarget[];
+  publishTarget?: string;
+  time?: string;
+  status?: number;
+  message?: string;
+  comment?: string;
+};
+
+export type Bot = {
+  id: string;
+  name: string;
+  publishTarget: string;
+};
+
+type BotProperty = {
+  setting: DialogSetting;
+  publishTargets: PublishTarget[];
+  publishTypes: PublishType[];
+};
+
+export type BotProjectType = {
+  projectId: string;
+  setting: DialogSetting;
+  publishTypes: PublishType[];
+  [key: string]: any;
+};
+
+export type BotPropertyType = {
+  [key: string]: BotProperty;
+};
+
+export type BotPublishHistory = Record<string, Record<string, PublishResult[]>>;
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/publisher.ts b/Composer/packages/client/src/recoilModel/dispatchers/publisher.ts
index 0c42a03261..029f7be2cb 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/publisher.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/publisher.ts
@@ -220,6 +220,13 @@ export const publisherDispatcher = () => {
     }
   );
 
+  // get bot status from target publisher
+  const getPublishStatusV2 = useRecoilCallback(
+    (callbackHelpers: CallbackInterface) => async (projectId: string, target: any, response: any) => {
+      updatePublishStatus(callbackHelpers, projectId, target, response?.data);
+    }
+  );
+
   // get bot status from target publisher
   const getPublishStatus = useRecoilCallback(
     (callbackHelpers: CallbackInterface) => async (projectId: string, target: any, jobId?: string) => {
@@ -231,7 +238,6 @@ export const publisherDispatcher = () => {
       }
     }
   );
-
   const getPublishHistory = useRecoilCallback(
     (callbackHelpers: CallbackInterface) => async (projectId: string, target: any) => {
       const { set, snapshot } = callbackHelpers;
@@ -306,6 +312,7 @@ export const publisherDispatcher = () => {
     stopPublishBot,
     rollbackToVersion,
     getPublishStatus,
+    getPublishStatusV2,
     getPublishHistory,
     setEjectRuntimeExist,
     openBotInEmulator,
diff --git a/Composer/packages/client/src/recoilModel/selectors/project.ts b/Composer/packages/client/src/recoilModel/selectors/project.ts
index eb8bedc66c..4a37825426 100644
--- a/Composer/packages/client/src/recoilModel/selectors/project.ts
+++ b/Composer/packages/client/src/recoilModel/selectors/project.ts
@@ -67,12 +67,10 @@ export const localBotPublishHistorySelector = selector({
   key: 'localBotPublishHistorySelector',
   get: ({ get }) => {
     const botProjectIds = get(localBotsWithoutErrorsSelector);
-    const result = botProjectIds.map((projectId: string) => {
+    const result = {};
+    botProjectIds.map((projectId: string) => {
       const publishHistory = get(publishHistoryState(projectId));
-      return {
-        projectId,
-        publishHistory,
-      };
+      result[projectId] = publishHistory;
     });
     return result;
   },
diff --git a/Composer/packages/client/src/utils/publishStatusPollingUpdater.ts b/Composer/packages/client/src/utils/publishStatusPollingUpdater.ts
new file mode 100644
index 0000000000..8b90e40932
--- /dev/null
+++ b/Composer/packages/client/src/utils/publishStatusPollingUpdater.ts
@@ -0,0 +1,91 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import httpClient from './httpUtil';
+
+enum PollingStateEnum {
+  Stopped,
+  Running,
+}
+
+export enum ApiStatus {
+  Publishing = 202,
+  Success = 200,
+  Failed = 500,
+  Unknown = 404,
+  HeaderTooLarge = 431,
+  BadRequest = 400,
+}
+
+interface OnDataPayload {
+  botProjectId: string;
+  targetName: string;
+  apiResponse: any;
+}
+type OnDataHandler = (payload: OnDataPayload) => void;
+
+export class PublishStatusPollingUpdater {
+  private status: PollingStateEnum = PollingStateEnum.Stopped;
+  private timerId = 0;
+  private publishTargetName: string;
+  private botProjectId: string;
+  private pollingInterval;
+
+  constructor(botProjectId: string, publishTargetId: string, pollingInterval = 10000) {
+    this.botProjectId = botProjectId;
+    this.publishTargetName = publishTargetId;
+    this.pollingInterval = pollingInterval;
+  }
+
+  private async fetchPublishStatusData(botProjectId: string, publishTargetName: string, onData: OnDataHandler) {
+    // TODO: DONT set HTTP Status code with 500 404 directly!
+    const response = await httpClient
+      .get(`/publish/${this.botProjectId}/status/${this.publishTargetName}`)
+      .catch((reason) => reason.response);
+
+    onData({
+      botProjectId,
+      targetName: publishTargetName,
+      apiResponse: response,
+    });
+  }
+
+  async start(onData: OnDataHandler) {
+    if (!this.botProjectId || !this.publishTargetName) {
+      console.error(new Error('botProjectId & publishTargetName should not be empty.'));
+      return;
+    }
+    if (typeof onData !== 'function') {
+      console.error(new Error('onData should be a function.'));
+      return;
+    }
+    if (this.status === PollingStateEnum.Running) return;
+
+    this.status = PollingStateEnum.Running;
+
+    this.fetchPublishStatusData(this.botProjectId, this.publishTargetName, onData);
+    this.timerId = window.setInterval(
+      async () => this.fetchPublishStatusData(this.botProjectId, this.publishTargetName, onData),
+      this.pollingInterval
+    );
+  }
+
+  stop() {
+    if (this.timerId) {
+      window.clearInterval(this.timerId);
+    }
+    this.timerId = 0;
+    this.status = PollingStateEnum.Stopped;
+  }
+
+  restart(onData: OnDataHandler) {
+    this.stop();
+    this.start(onData);
+  }
+
+  isSameUpdater(botProjectId: string, targetName: string) {
+    return this.botProjectId === botProjectId && this.publishTargetName === targetName;
+  }
+}
+
+export const pollingUpdaterList: PublishStatusPollingUpdater[] = [];