diff --git a/Composer/cypress/integration/HomePage.spec.ts b/Composer/cypress/integration/HomePage.spec.ts
index debb821d1e..b93c15e1ab 100644
--- a/Composer/cypress/integration/HomePage.spec.ts
+++ b/Composer/cypress/integration/HomePage.spec.ts
@@ -15,6 +15,6 @@ context('Home Page ', () => {
     cy.findByText('Select a Bot').should('exist');
     cy.findByText('Cancel').should('exist');
     cy.findByText('Cancel').click();
-    cy.findByTestId('homePage-body-New').click();
+    cy.findByTestId('homePage-Toolbar-New').click();
   });
 });
diff --git a/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx b/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx
index cc739071a2..b5b697ea45 100644
--- a/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx
+++ b/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx
@@ -26,6 +26,7 @@ describe('<CreationFlow/>', () => {
       fetchTemplateProjects: jest.fn(),
       onboardingAddCoachMarkRef: jest.fn(),
       fetchRecentProjects: jest.fn(),
+      fetchFeed: jest.fn(),
       fetchTemplates: jest.fn(),
       fetchTemplatesV2: jest.fn(),
       setCreationFlowStatus: jest.fn(),
diff --git a/Composer/packages/client/__tests__/components/CreationFlowV2/index.test.tsx b/Composer/packages/client/__tests__/components/CreationFlowV2/index.test.tsx
index 11cd4f766c..383a852e31 100644
--- a/Composer/packages/client/__tests__/components/CreationFlowV2/index.test.tsx
+++ b/Composer/packages/client/__tests__/components/CreationFlowV2/index.test.tsx
@@ -26,6 +26,7 @@ describe('<CreationFlowV2/>', () => {
       fetchTemplateProjects: jest.fn(),
       onboardingAddCoachMarkRef: jest.fn(),
       fetchRecentProjects: jest.fn(),
+      fetchFeed: jest.fn(),
       fetchTemplates: jest.fn(),
       fetchTemplatesV2: jest.fn(),
       setCreationFlowStatus: jest.fn(),
diff --git a/Composer/packages/client/__tests__/components/home.test.tsx b/Composer/packages/client/__tests__/components/home.test.tsx
index cd498d931b..d329564435 100644
--- a/Composer/packages/client/__tests__/components/home.test.tsx
+++ b/Composer/packages/client/__tests__/components/home.test.tsx
@@ -4,10 +4,10 @@
 import * as React from 'react';
 import { fireEvent, render } from '@botframework-composer/test-utils';
 import { Toolbar } from '@bfc/ui-shared';
-import { BotTemplate } from '@bfc/shared';
 
 import { RecentBotList } from '../../src/pages/home/RecentBotList';
-import { ExampleList } from '../../src/pages/home/ExampleList';
+import { WhatsNewsList } from '../../src/pages/home/WhatsNewsList';
+import { CardWidget } from '../../src/pages/home/CardWidget';
 import { renderWithRecoil } from '../testUtils';
 
 describe('<Home/>', () => {
@@ -29,17 +29,22 @@ describe('<Home/>', () => {
     }
   });
 
-  it('should dispatch onClick event when clicked on an ExampleList', () => {
-    const templates = [
-      { description: 'echo bot', id: 'EchoBot', name: 'Echo Bot' },
-      { description: 'empty bot', id: 'EmptyBot', name: 'Empty Bot' },
-    ] as BotTemplate[];
-    const onClickTemplate = jest.fn((item) => item);
-    const { container, getByText } = render(<ExampleList examples={templates} onClick={onClickTemplate} />);
-    expect(container).toHaveTextContent('Echo Bot');
-    const link = getByText('Echo Bot');
-    fireEvent.click(link);
-    expect(onClickTemplate.mock.results[0].value).toBe('EchoBot');
+  it("should render what's news List", () => {
+    const newsList = [
+      {
+        title: 'Composer 1.4',
+        description: "Learn about new features in Composer's latest release.",
+        url: 'https://www.microsoft.com',
+      },
+      {
+        title: 'Conversational AI at Microsoft Ignite',
+        description:
+          'Updates from Microsoft Ignite. New Composer release, public preview of Orchestrator and updates to Azure Bot Service and Bot Framework SDK.',
+        url: 'https://www.microsoft.com',
+      },
+    ];
+    const { container } = render(<WhatsNewsList newsList={newsList} />);
+    expect(container).toHaveTextContent(newsList[0].description);
   });
 
   it('should call onClick handler when clicked', () => {
@@ -90,4 +95,24 @@ describe('<Home/>', () => {
     fireEvent.click(link);
     expect(setCreationFlowStatus.mock.results[0].value).toBe('NEW');
   });
+
+  it('should render resoure, article, video cards', () => {
+    const videoItem = {
+      image: 'https://via.placeholder.com/244x95/0078d4/ffffff?text=Bot+FrameWork+Composer',
+      title: 'Introduction to Composer',
+      description: 'A five minute intro to Composer',
+      url: 'https://www.youtube.com/watch?v=hiIiZnRcCv0',
+    };
+    const { container } = renderWithRecoil(
+      <CardWidget
+        ariaLabel="test"
+        cardType={'video'}
+        content={videoItem.description}
+        href={videoItem.url}
+        imageCover={videoItem.image}
+        title={videoItem.title}
+      />
+    );
+    expect(container).toHaveTextContent(videoItem.title);
+  });
 });
diff --git a/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx b/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx
index 8e0248d60d..2b4ccfbb03 100644
--- a/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx
+++ b/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx
@@ -33,6 +33,7 @@ const CreationFlow: React.FC<CreationFlowProps> = (props: CreationFlowProps) =>
   const {
     fetchTemplatesV2,
     fetchRecentProjects,
+    fetchFeed,
     fetchStorages,
     fetchFolderItemsByPath,
     setCreationFlowStatus,
@@ -73,6 +74,7 @@ const CreationFlow: React.FC<CreationFlowProps> = (props: CreationFlowProps) =>
       await fetchProjectById(cachedProjectId);
     }
     await fetchStorages();
+    fetchFeed();
     fetchRecentProjects();
     fetchTemplatesV2([firstPartyTemplateFeed]);
   };
diff --git a/Composer/packages/client/src/components/CreationFlow/v2/CreationFlow.tsx b/Composer/packages/client/src/components/CreationFlow/v2/CreationFlow.tsx
index 64b4ec01e0..f436eb81ce 100644
--- a/Composer/packages/client/src/components/CreationFlow/v2/CreationFlow.tsx
+++ b/Composer/packages/client/src/components/CreationFlow/v2/CreationFlow.tsx
@@ -40,6 +40,7 @@ const CreationFlowV2: React.FC<CreationFlowProps> = () => {
     updateFolder,
     saveTemplateId,
     fetchRecentProjects,
+    fetchFeed,
     openProject,
     saveProjectAs,
     fetchProjectById,
@@ -76,7 +77,7 @@ const CreationFlowV2: React.FC<CreationFlowProps> = () => {
     }
     await fetchStorages();
     await fetchTemplatesV2([firstPartyTemplateFeed]);
-
+    fetchFeed();
     fetchRecentProjects();
   };
 
diff --git a/Composer/packages/client/src/constants.ts b/Composer/packages/client/src/constants.ts
index eb12dd7744..b74946099e 100644
--- a/Composer/packages/client/src/constants.ts
+++ b/Composer/packages/client/src/constants.ts
@@ -14,6 +14,8 @@ import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 export const BASEPATH = process.env.PUBLIC_URL || '/';
 export const BASEURL = `${process.env.PUBLIC_URL || ''}/api`;
 
+export const FEEDVERSION = 1;
+
 //the count about the undo/redo
 export const UNDO_LIMIT = 10;
 
diff --git a/Composer/packages/client/src/images/composerDocumentIcon.svg b/Composer/packages/client/src/images/composerDocumentIcon.svg
new file mode 100644
index 0000000000..1368a2ce14
--- /dev/null
+++ b/Composer/packages/client/src/images/composerDocumentIcon.svg
@@ -0,0 +1,3 @@
+<svg width="45" height="43" viewBox="0 0 45 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45 3.93164V42.9316H0V3.93164H6V0.931641H15C16.375 0.931641 17.6953 1.14258 18.9609 1.56445C20.2422 1.98633 21.4219 2.61914 22.5 3.46289C23.5781 2.61914 24.75 1.98633 26.0156 1.56445C27.2969 1.14258 28.625 0.931641 30 0.931641H39V3.93164H45ZM30 3.93164C28.9062 3.93164 27.8438 4.11914 26.8125 4.49414C25.7812 4.85352 24.8438 5.38477 24 6.08789V35.4785C24.9219 34.9629 25.8906 34.5801 26.9062 34.3301C27.9219 34.0645 28.9531 33.9316 30 33.9316H36V3.93164H30ZM9 33.9316H15C16.0469 33.9316 17.0781 34.0645 18.0938 34.3301C19.1094 34.5801 20.0781 34.9629 21 35.4785V6.08789C20.1562 5.38477 19.2188 4.85352 18.1875 4.49414C17.1562 4.11914 16.0938 3.93164 15 3.93164H9V33.9316ZM3 39.9316H21.8906C21.3906 39.4473 20.8828 39.0254 20.3672 38.666C19.8516 38.291 19.3125 37.9785 18.75 37.7285C18.2031 37.4629 17.6172 37.2676 16.9922 37.1426C16.3828 37.002 15.7188 36.9316 15 36.9316H6V6.93164H3V39.9316ZM42 6.93164H39V36.9316H30C29.2812 36.9316 28.6094 37.002 27.9844 37.1426C27.375 37.2676 26.7891 37.4629 26.2266 37.7285C25.6797 37.9785 25.1484 38.291 24.6328 38.666C24.1172 39.0254 23.6094 39.4473 23.1094 39.9316H42V6.93164Z" fill="#212121"/>
+</svg>
diff --git a/Composer/packages/client/src/images/defaultArticleCardCover.svg b/Composer/packages/client/src/images/defaultArticleCardCover.svg
new file mode 100644
index 0000000000..8d22ad3263
--- /dev/null
+++ b/Composer/packages/client/src/images/defaultArticleCardCover.svg
@@ -0,0 +1,3 @@
+<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.1328 0L39 12.8672V48H0V0H26.1328ZM27 5.13281V12H33.8672L27 5.13281ZM3 45H36V15H24V3H3V45ZM9 24V21H30V24H9ZM9 30V27H30V30H9ZM9 36V33H30V36H9Z" fill="white"/>
+</svg>
diff --git a/Composer/packages/client/src/images/defaultVideoCardCover.svg b/Composer/packages/client/src/images/defaultVideoCardCover.svg
new file mode 100644
index 0000000000..157d740e81
--- /dev/null
+++ b/Composer/packages/client/src/images/defaultVideoCardCover.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 0C26.2031 0 28.3281 0.289062 30.375 0.867188C32.4219 1.42969 34.3281 2.23437 36.0938 3.28125C37.875 4.32813 39.4922 5.58594 40.9453 7.05469C42.4141 8.50781 43.6719 10.125 44.7188 11.9062C45.7656 13.6719 46.5703 15.5781 47.1328 17.625C47.7109 19.6719 48 21.7969 48 24C48 26.2031 47.7109 28.3281 47.1328 30.375C46.5703 32.4219 45.7656 34.3359 44.7188 36.1172C43.6719 37.8828 42.4141 39.5 40.9453 40.9688C39.4922 42.4219 37.875 43.6719 36.0938 44.7188C34.3281 45.7656 32.4219 46.5781 30.375 47.1562C28.3281 47.7188 26.2031 48 24 48C21.7969 48 19.6719 47.7188 17.625 47.1562C15.5781 46.5781 13.6641 45.7734 11.8828 44.7422C10.1016 43.6953 8.47656 42.4453 7.00781 40.9922C5.55469 39.5234 4.30469 37.8984 3.25781 36.1172C2.22656 34.3359 1.42188 32.4297 0.84375 30.3984C0.28125 28.3516 0 26.2188 0 24C0 21.7969 0.28125 19.6719 0.84375 17.625C1.42188 15.5781 2.23438 13.6719 3.28125 11.9062C4.32812 10.125 5.57812 8.50781 7.03125 7.05469C8.5 5.58594 10.1172 4.32813 11.8828 3.28125C13.6641 2.23437 15.5781 1.42969 17.625 0.867188C19.6719 0.289062 21.7969 0 24 0ZM24 45C25.9375 45 27.7969 44.75 29.5781 44.25C31.375 43.75 33.0469 43.0469 34.5938 42.1406C36.1562 41.2188 37.5703 40.125 38.8359 38.8594C40.1172 37.5781 41.2109 36.1641 42.1172 34.6172C43.0391 33.0547 43.75 31.3828 44.25 29.6016C44.75 27.8047 45 25.9375 45 24C45 22.0625 44.75 20.2031 44.25 18.4219C43.75 16.625 43.0391 14.9531 42.1172 13.4062C41.2109 11.8437 40.1172 10.4297 38.8359 9.16406C37.5703 7.88281 36.1562 6.78906 34.5938 5.88281C33.0469 4.96094 31.375 4.25 29.5781 3.75C27.7969 3.25 25.9375 3 24 3C22.0625 3 20.1953 3.25 18.3984 3.75C16.6172 4.25 14.9453 4.96094 13.3828 5.88281C11.8359 6.78906 10.4219 7.88281 9.14062 9.16406C7.875 10.4297 6.78125 11.8437 5.85938 13.4062C4.95312 14.9531 4.25 16.625 3.75 18.4219C3.25 20.2031 3 22.0625 3 24C3 25.9375 3.25 27.8047 3.75 29.6016C4.25 31.3828 4.95312 33.0547 5.85938 34.6172C6.76562 36.1641 7.85938 37.5781 9.14062 38.8594C10.4219 40.1406 11.8359 41.2344 13.3828 42.1406C14.9453 43.0469 16.6172 43.75 18.3984 44.25C20.1953 44.75 22.0625 45 24 45ZM18 12L36 23.9297L18 36V12ZM21 30.375L30.5859 23.9531L21 17.5781V30.375Z" fill="white"/>
+</svg>
diff --git a/Composer/packages/client/src/images/githubIcon.svg b/Composer/packages/client/src/images/githubIcon.svg
new file mode 100644
index 0000000000..6ad558a177
--- /dev/null
+++ b/Composer/packages/client/src/images/githubIcon.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 0.517578C26.2031 0.517578 28.3281 0.806641 30.375 1.38477C32.4219 1.94727 34.3281 2.75195 36.0938 3.79883C37.875 4.8457 39.4922 6.10352 40.9453 7.57227C42.4141 9.02539 43.6719 10.6426 44.7188 12.4238C45.7656 14.1895 46.5703 16.0957 47.1328 18.1426C47.7109 20.1895 48 22.3145 48 24.5176C48 27.0957 47.6016 29.5801 46.8047 31.9707C46.0234 34.3613 44.9141 36.5566 43.4766 38.5566C42.0391 40.5566 40.3125 42.3145 38.2969 43.8301C36.2812 45.3301 34.0469 46.4863 31.5938 47.2988C31.5469 47.3145 31.4766 47.3301 31.3828 47.3457C31.2891 47.3457 31.2188 47.3457 31.1719 47.3457C30.7969 47.3457 30.5 47.2363 30.2812 47.0176C30.0625 46.7988 29.9531 46.5098 29.9531 46.1504C29.9531 45.041 29.9531 43.9473 29.9531 42.8691C29.9688 41.7754 29.9766 40.6738 29.9766 39.5645C29.9766 38.7676 29.8594 37.9629 29.625 37.1504C29.3906 36.3379 28.9688 35.6582 28.3594 35.1113C30.1719 34.9082 31.7578 34.541 33.1172 34.0098C34.4922 33.4629 35.6328 32.7129 36.5391 31.7598C37.4609 30.8066 38.1484 29.6348 38.6016 28.2441C39.0703 26.8379 39.3047 25.1816 39.3047 23.2754C39.3047 22.0566 39.1016 20.9082 38.6953 19.8301C38.2891 18.7363 37.6719 17.7363 36.8438 16.8301C37.0156 16.3926 37.1406 15.9395 37.2188 15.4707C37.2969 15.002 37.3359 14.5332 37.3359 14.0645C37.3359 13.4551 37.2656 12.8535 37.125 12.2598C37 11.6504 36.8281 11.0566 36.6094 10.4785C36.5312 10.4473 36.4453 10.4316 36.3516 10.4316C36.2578 10.4316 36.1719 10.4316 36.0938 10.4316C35.5938 10.4316 35.0703 10.5176 34.5234 10.6895C33.9766 10.8457 33.4297 11.0488 32.8828 11.2988C32.3516 11.5332 31.8359 11.7988 31.3359 12.0957C30.8359 12.3926 30.3906 12.6738 30 12.9395C28.0469 12.3926 26.0469 12.1191 24 12.1191C21.9531 12.1191 19.9531 12.3926 18 12.9395C17.6094 12.6738 17.1641 12.3926 16.6641 12.0957C16.1641 11.7988 15.6406 11.5332 15.0938 11.2988C14.5625 11.0488 14.0156 10.8457 13.4531 10.6895C12.9062 10.5176 12.3906 10.4316 11.9062 10.4316C11.8281 10.4316 11.7422 10.4316 11.6484 10.4316C11.5547 10.4316 11.4688 10.4473 11.3906 10.4785C11.1719 11.0566 10.9922 11.6504 10.8516 12.2598C10.7266 12.8535 10.6641 13.4551 10.6641 14.0645C10.6641 14.5332 10.7031 15.002 10.7812 15.4707C10.8594 15.9395 10.9844 16.3926 11.1562 16.8301C10.3281 17.7363 9.71094 18.7363 9.30469 19.8301C8.89844 20.9082 8.69531 22.0566 8.69531 23.2754C8.69531 25.1816 8.92188 26.8301 9.375 28.2207C9.84375 29.6113 10.5312 30.791 11.4375 31.7598C12.3594 32.7129 13.5 33.4629 14.8594 34.0098C16.2188 34.5566 17.8047 34.9316 19.6172 35.1348C19.1641 35.541 18.8125 36.0332 18.5625 36.6113C18.3281 37.1738 18.1719 37.752 18.0938 38.3457C17.6719 38.5488 17.2266 38.7051 16.7578 38.8145C16.2891 38.9238 15.8203 38.9785 15.3516 38.9785C14.3516 38.9785 13.5234 38.7441 12.8672 38.2754C12.2109 37.8066 11.625 37.166 11.1094 36.3535C10.9219 36.0566 10.6953 35.7598 10.4297 35.4629C10.1641 35.166 9.875 34.9004 9.5625 34.666C9.25 34.4316 8.91406 34.2441 8.55469 34.1035C8.19531 33.9473 7.82031 33.8691 7.42969 33.8691C7.36719 33.8691 7.27344 33.877 7.14844 33.8926C7.02344 33.8926 6.89844 33.9082 6.77344 33.9395C6.66406 33.9707 6.5625 34.0176 6.46875 34.0801C6.375 34.1426 6.32812 34.2207 6.32812 34.3145C6.32812 34.502 6.4375 34.6895 6.65625 34.877C6.875 35.0488 7.05469 35.1816 7.19531 35.2754L7.26562 35.3223C7.60938 35.5879 7.90625 35.8457 8.15625 36.0957C8.42188 36.3301 8.65625 36.5879 8.85938 36.8691C9.0625 37.1348 9.24219 37.4316 9.39844 37.7598C9.57031 38.0723 9.75 38.4316 9.9375 38.8379C10.4688 40.0566 11.2109 40.9473 12.1641 41.5098C13.1328 42.0566 14.2812 42.3301 15.6094 42.3301C16.0156 42.3301 16.4219 42.3066 16.8281 42.2598C17.2344 42.1973 17.6406 42.127 18.0469 42.0488V46.127C18.0469 46.502 17.9297 46.7988 17.6953 47.0176C17.4766 47.2363 17.1797 47.3457 16.8047 47.3457C16.7578 47.3457 16.6875 47.3457 16.5938 47.3457C16.5156 47.3301 16.4531 47.3145 16.4062 47.2988C13.9531 46.502 11.7188 45.3535 9.70312 43.8535C7.6875 42.3379 5.96094 40.5801 4.52344 38.5801C3.08594 36.5645 1.96875 34.3613 1.17188 31.9707C0.390625 29.5801 0 27.0957 0 24.5176C0 22.3145 0.28125 20.1895 0.84375 18.1426C1.42188 16.0957 2.23438 14.1895 3.28125 12.4238C4.32812 10.6426 5.57812 9.02539 7.03125 7.57227C8.5 6.10352 10.1172 4.8457 11.8828 3.79883C13.6641 2.75195 15.5781 1.94727 17.625 1.38477C19.6719 0.806641 21.7969 0.517578 24 0.517578Z" fill="#212121"/>
+</svg>
diff --git a/Composer/packages/client/src/images/noRecentBotsCover.svg b/Composer/packages/client/src/images/noRecentBotsCover.svg
new file mode 100644
index 0000000000..76f52cf61f
--- /dev/null
+++ b/Composer/packages/client/src/images/noRecentBotsCover.svg
@@ -0,0 +1,30 @@
+<svg width="105" height="84" viewBox="0 0 105 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.5093 48.1075L86.3884 81.1441C86.3884 83.7222 84.5747 84.7415 82.3378 83.4225L27.3225 51.9448C26.1541 51.1771 25.1814 50.1509 24.4811 48.9469C23.7813 47.7356 23.3678 46.3825 23.272 44.9897L23.3929 11.9531L86.5093 48.1075Z" fill="white"/>
+<path d="M85.2397 83.6734L87.7185 82.2344C88.4439 81.8147 88.8671 80.9154 88.8671 79.6562L86.3884 81.0952C86.3884 82.4143 85.9048 83.2537 85.2397 83.6734Z" fill="#DCDCDC"/>
+<path d="M86.5096 48.1187L86.3887 81.1552L88.8674 79.7163L88.9883 46.6797L86.5096 48.1187Z" fill="#DCDCDC"/>
+<path d="M82.4574 33.5426C83.6258 34.3102 84.5985 35.3365 85.2988 36.5405C85.9987 37.7518 86.4121 39.1048 86.5079 40.4976V48.3521L23.3311 12.1977V4.34328C23.3311 1.7651 25.1447 0.745825 27.3816 2.00493L82.4574 33.5426Z" fill="#F0F0F0"/>
+<path d="M87.8379 35.0415C87.1198 33.8507 86.1505 32.828 84.9964 32.0436L29.9812 0.565919C28.8325 -0.0936132 27.8048 -0.153571 27.0793 0.266132L24.6006 1.70511C25.3261 1.28541 26.3538 1.34537 27.5025 2.0049L82.5177 33.4826C83.6861 34.2502 84.6588 35.2765 85.3592 36.4805C86.059 37.6918 86.4724 39.0448 86.5683 40.4377V48.2921L89.047 46.8531V38.9987C88.9225 37.6112 88.5109 36.2641 87.8379 35.0415Z" fill="#D2D2D2"/>
+<path d="M49.3281 35.4045C49.7042 35.6467 50.0154 35.9759 50.2349 36.3638C50.4564 36.7526 50.6 37.1801 50.6581 37.6229C50.6581 38.5223 50.0535 38.7621 49.3281 38.4023L33.3071 29.2288C32.9114 28.9657 32.5807 28.6172 32.3398 28.2096C32.1008 27.8105 31.9755 27.3546 31.9771 26.8905C31.9771 25.9911 32.5816 25.7513 33.3071 26.171L49.3281 35.4045ZM62.3262 40.2011L63.4144 42.1197L56.8246 45.8371L54.1041 41.1604L55.1923 40.5009L56.8246 43.3189L62.3262 40.2011Z" fill="#50E6FF"/>
+<path d="M49.267 53.631C49.6432 53.8733 49.9544 54.2025 50.1739 54.5903C50.3953 54.9791 50.539 55.4067 50.5971 55.8495C50.5971 56.7488 49.9925 56.9886 49.267 56.6289L33.2461 47.4554C32.8504 47.1922 32.5197 46.8438 32.2788 46.4361C32.0398 46.0371 31.9144 45.5812 31.916 45.1171C31.916 44.2177 32.5206 43.9779 33.2461 44.3976L49.267 53.631ZM62.2652 58.6675L63.3534 60.5861L56.7636 64.3035L54.0431 59.6268L55.1313 58.9672L56.7636 61.7852L62.2652 58.6675Z" fill="#32B0E7"/>
+<path d="M49.3281 44.4611C49.7042 44.7033 50.0154 45.0325 50.2349 45.4204C50.4386 45.8168 50.5813 46.2412 50.6581 46.6795C50.6581 47.5789 50.0535 47.8187 49.3281 47.459L33.3071 38.2855C32.9114 38.0223 32.5807 37.6739 32.3398 37.2662C32.1008 36.8671 31.9755 36.4113 31.9771 35.9471C31.9771 35.0478 32.5816 34.808 33.3071 35.2277L49.3281 44.4611ZM62.3262 49.1978L63.4144 51.1164L56.8246 54.8338L53.9832 50.1571L55.0714 49.4975L56.7642 52.3155L62.3262 49.1978Z" fill="#45CAF2"/>
+<path d="M32.7031 68.556C32.2539 64.6761 30.387 61.0938 27.4555 58.4863C24.5239 55.8788 20.7306 54.4267 16.7928 54.4046C12.855 54.3824 9.04539 55.7917 6.08416 58.3661C3.12293 60.9404 1.21523 64.5015 0.721679 68.3761C0.589134 68.9457 0.548324 69.5326 0.600766 70.1148C0.782135 72.3333 2.41446 74.4917 5.31637 76.2305C11.6643 79.828 21.821 79.828 28.1084 76.2305C31.0103 74.5517 32.5822 72.3333 32.7636 70.1748C32.8064 69.6347 32.7861 69.0915 32.7031 68.556Z" fill="url(#paint0_linear)"/>
+<path d="M16.6807 52.7308C18.5974 52.7391 20.4723 52.1751 22.0613 51.112C23.6501 50.0598 24.8887 48.564 25.6204 46.8138C26.3521 45.0635 26.5442 43.1374 26.1723 41.279C25.8058 39.4116 24.8786 37.6977 23.5122 36.3624C22.1422 35.0391 20.4242 34.1249 18.5548 33.7243C16.6876 33.3598 14.7535 33.5474 12.9929 34.2639C11.2307 35.0061 9.72009 36.2338 8.64003 37.8014C7.55999 39.3735 6.99042 41.2354 7.00771 43.1376C7.00291 44.3924 7.24951 45.6356 7.73318 46.795C8.23035 47.9593 8.94872 49.0178 9.84915 49.9128C10.7409 50.8187 11.811 51.533 12.9929 52.0113C14.162 52.491 15.4155 52.7356 16.6807 52.7308Z" fill="url(#paint1_linear)"/>
+<path d="M101.722 34.388L101.613 57.9213V65.8057L73.9604 50.0369L74.0693 18.6191L80.9008 22.5044L101.722 34.388Z" fill="url(#paint2_linear)"/>
+<path d="M74.0688 18.6188L80.9004 22.504L101.613 34.3876L104.073 33.0506L83.2522 21.0591L76.4206 17.1738L74.0688 18.6188Z" fill="#2195DC"/>
+<path d="M101.613 65.7977L103.959 64.3528L104.073 33.043L101.613 34.38V65.7977Z" fill="#0078D4"/>
+<path d="M87.0537 43.1941V51.4083L88.6256 52.2957V44.0815L95.7897 48.1886V46.5218L88.6256 42.3247V34.0866L87.0537 33.1992V41.4194L79.8896 37.3063V39.105L87.0537 43.1941Z" fill="white" stroke="white" stroke-width="1.85" stroke-miterlimit="10"/>
+<defs>
+<linearGradient id="paint0_linear" x1="16.672" y1="54.4175" x2="16.672" y2="78.9237" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4DC2EB"/>
+<stop offset="1" stop-color="#0078D4"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="16.6743" y1="33.5459" x2="16.6743" y2="52.7344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4DC2EB"/>
+<stop offset="1" stop-color="#0078D4"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="88.8266" y1="18.9429" x2="86.6324" y2="71.737" gradientUnits="userSpaceOnUse">
+<stop stop-color="#32B0E7"/>
+<stop offset="1" stop-color="#2195DC"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/Composer/packages/client/src/images/stackoverflowIcon.svg b/Composer/packages/client/src/images/stackoverflowIcon.svg
new file mode 100644
index 0000000000..0697475602
--- /dev/null
+++ b/Composer/packages/client/src/images/stackoverflowIcon.svg
@@ -0,0 +1,3 @@
+<svg width="53" height="49" viewBox="0 0 53 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3928 9.74895C17.5393 9.13076 18.7732 8.93188 19.9745 8.93182C21.3651 8.93174 22.9801 9.39276 24.2847 10.4716C25.6504 11.601 26.5787 13.3338 26.5787 15.595C26.5787 18.1934 24.7593 19.604 23.7337 20.3993C23.654 20.4611 23.579 20.5192 23.5101 20.5739C22.3884 21.4636 21.9558 21.939 21.9558 22.9268C21.9558 24.0311 21.0688 24.9263 19.9746 24.9263C18.8804 24.9263 17.9933 24.0311 17.9933 22.9268C17.9933 19.9035 19.8722 18.373 21.0618 17.4295C22.4178 16.354 22.6162 16.1145 22.6162 15.595C22.6162 14.5365 22.2237 13.9374 21.7732 13.5649C21.2617 13.1418 20.5653 12.9309 19.9747 12.9309C19.1947 12.931 18.6586 13.0613 18.2599 13.2763C17.8809 13.4806 17.48 13.8393 17.0934 14.5589C16.5719 15.5298 15.3693 15.8901 14.4074 15.3637C13.4455 14.8374 13.0884 13.6237 13.61 12.6529C14.3065 11.3563 15.2263 10.3778 16.3928 9.74895ZM19.975 32.9249C21.434 32.9249 22.6168 31.7312 22.6168 30.2586C22.6168 28.7861 21.434 27.5924 19.975 27.5924C18.516 27.5924 17.3332 28.7861 17.3332 30.2586C17.3332 31.7312 18.516 32.9249 19.975 32.9249ZM19.975 0.931641C9.03293 0.931641 0.162661 9.88396 0.162661 20.9272C0.162661 23.9475 0.827482 26.8161 2.01882 29.3876C1.34776 32.0483 0.598011 35.0153 0.10564 36.9628C-0.509922 39.3977 1.66264 41.6127 4.078 41.0268C6.05983 40.546 9.10569 39.8082 11.8199 39.1552C14.3092 40.2911 17.0714 40.9228 19.975 40.9228C30.917 40.9228 39.7873 31.9704 39.7873 20.9272C39.7873 9.88396 30.917 0.931641 19.975 0.931641ZM4.12512 20.9272C4.12512 12.0926 11.2213 4.93075 19.975 4.93075C28.7286 4.93075 35.8248 12.0926 35.8248 20.9272C35.8248 29.7618 28.7286 36.9236 19.975 36.9236C17.437 36.9236 15.0438 36.3231 12.9219 35.257L12.2789 34.9339L11.5801 35.1018C9.14258 35.6874 6.32643 36.3688 4.21585 36.8804C4.74087 34.8032 5.43608 32.0512 6.0388 29.6604L6.22421 28.9249L5.87943 28.2505C4.75879 26.0584 4.12512 23.5704 4.12512 20.9272ZM33.1832 48.9211C27.9808 48.9211 23.2467 46.8974 19.7117 43.5874C19.7994 43.5885 19.8872 43.589 19.9751 43.589C21.8717 43.589 23.7134 43.3517 25.4726 42.9048C27.7548 44.1898 30.3843 44.922 33.1832 44.922C35.7211 44.922 38.1144 44.3215 40.2363 43.2554L40.8793 42.9323L41.5781 43.1002C44.0125 43.6851 46.7692 44.2888 48.814 44.7252C48.3518 42.7243 47.7212 40.046 47.1194 37.6587L46.934 36.9233L47.2787 36.2488C48.3994 34.0568 49.0331 31.5688 49.0331 28.9256C49.0331 23.2876 46.1431 18.3309 41.7766 15.482C41.3054 13.5538 40.5895 11.7227 39.6642 10.0243C47.4235 12.7339 52.9955 20.173 52.9955 28.9256C52.9955 31.9466 52.3304 34.8158 51.1385 37.3878C51.8069 40.0751 52.4838 42.9863 52.913 44.8615C53.4531 47.2208 51.3943 49.3564 49.0367 48.859C47.1158 48.4538 44.0978 47.8038 41.3405 47.1525C38.8506 48.2891 36.0877 48.9211 33.1832 48.9211Z" fill="#212121"/>
+</svg>
diff --git a/Composer/packages/client/src/pages/home/CardWidget.tsx b/Composer/packages/client/src/pages/home/CardWidget.tsx
new file mode 100644
index 0000000000..75d2b31551
--- /dev/null
+++ b/Composer/packages/client/src/pages/home/CardWidget.tsx
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+
+import defaultArticleCardCover from '../../images/defaultArticleCardCover.svg';
+import defaultVideoCardCover from '../../images/defaultVideoCardCover.svg';
+
+import { ItemContainer, ItemContainerProps } from './ItemContainer';
+import * as home from './styles';
+
+interface CardWidgetProps extends ItemContainerProps {
+  cardType: 'resource' | 'video' | 'article';
+}
+
+export const CardWidget: React.FC<CardWidgetProps> = (props) => {
+  const styles =
+    props.cardType === 'resource' ? home.cardItem : props.imageCover ? home.mediaCardItem : home.meidiaCardNoCoverItem;
+  const imageCover = props.imageCover || (props.cardType === 'video' ? defaultVideoCardCover : defaultArticleCardCover);
+  return <ItemContainer {...props} imageCover={imageCover} styles={styles} />;
+};
diff --git a/Composer/packages/client/src/pages/home/ExampleList.tsx b/Composer/packages/client/src/pages/home/ExampleList.tsx
deleted file mode 100644
index 5409d82002..0000000000
--- a/Composer/packages/client/src/pages/home/ExampleList.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
-import { List } from 'office-ui-fabric-react/lib/List';
-import { BotTemplate } from '@bfc/shared';
-
-import * as exampleIcons from '../../images/samples';
-
-import {
-  exampleListContainer,
-  exampleListCell,
-  exampleListCellIcon,
-  exampleListCellContent,
-  exampleListCellName,
-  exampleListCellDescription,
-} from './styles';
-
-interface ExampleListProps {
-  examples: BotTemplate[];
-  onClick: (templateId: string) => void;
-}
-
-const resolveIcon = (exampleId: string): string => {
-  if (exampleIcons[exampleId]) {
-    return exampleIcons[exampleId];
-  }
-
-  return exampleIcons.DefaultIcon;
-};
-
-export const ExampleList: React.FC<ExampleListProps> = (props) => {
-  const { onClick, examples } = props;
-
-  function onRenderCell(item?: BotTemplate): React.ReactNode {
-    if (!item) {
-      return;
-    }
-
-    return (
-      <div
-        key={item.id}
-        data-is-focusable
-        aria-label={item.name + '; ' + item.description}
-        css={exampleListCell}
-        role="button"
-        tabIndex={0}
-        onClick={() => onClick(item.id)}
-        onKeyDown={(ev) => {
-          if (ev.key === 'Enter') {
-            onClick(item.id);
-          }
-        }}
-      >
-        <img css={exampleListCellIcon} role="presentation" src={resolveIcon(item.id)} />
-        <div css={exampleListCellContent}>
-          <div css={exampleListCellName}>{item.name}</div>
-          <div css={exampleListCellDescription}>{item.description}</div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div css={exampleListContainer} data-is-scrollable="true">
-      <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
-        <List items={examples} onRenderCell={onRenderCell} />
-      </ScrollablePane>
-    </div>
-  );
-};
diff --git a/Composer/packages/client/src/pages/home/Home.tsx b/Composer/packages/client/src/pages/home/Home.tsx
index af5422c006..14cae28032 100644
--- a/Composer/packages/client/src/pages/home/Home.tsx
+++ b/Composer/packages/client/src/pages/home/Home.tsx
@@ -3,55 +3,63 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useCallback } from 'react';
+import React from 'react';
 import formatMessage from 'format-message';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
+import { Pivot, PivotItem, PivotLinkSize } from 'office-ui-fabric-react/lib/Pivot';
 import { RouteComponentProps } from '@reach/router';
 import { navigate } from '@reach/router';
 import { useRecoilValue } from 'recoil';
-import { Toolbar, IToolbarItem, defaultToolbarButtonStyles } from '@bfc/ui-shared';
+import { Toolbar, IToolbarItem } from '@bfc/ui-shared';
 
 import { CreationFlowStatus } from '../../constants';
 import { dispatcherState, botDisplayNameState } from '../../recoilModel';
-import { recentProjectsState, templateIdState, currentProjectIdState } from '../../recoilModel/atoms/appState';
+import {
+  recentProjectsState,
+  feedState,
+  templateIdState,
+  currentProjectIdState,
+} from '../../recoilModel/atoms/appState';
 import TelemetryClient from '../../telemetry/TelemetryClient';
+import composerDocumentIcon from '../../images/composerDocumentIcon.svg';
+import stackoverflowIcon from '../../images/stackoverflowIcon.svg';
+import githubIcon from '../../images/githubIcon.svg';
+import noRecentBotsCover from '../../images/noRecentBotsCover.svg';
 
-import * as home from './styles';
-import { ItemContainer } from './ItemContainer';
 import { RecentBotList } from './RecentBotList';
+import { WhatsNewsList } from './WhatsNewsList';
+import { CardWidget } from './CardWidget';
+import * as home from './styles';
 
-const linksBottom = [
+const resources = [
   {
-    to: 'https://aka.ms/BF-Composer-Getting-Started',
-    text: formatMessage('Getting Started'),
-    css: home.linkInfo,
+    imageCover: composerDocumentIcon,
+    title: formatMessage('Composer documentation'),
+    description: formatMessage('Find tutorials, step-by-step guides. Discover what you can build with Composer.'),
+    moreText: formatMessage('Read documentation'),
+    url: 'https://docs.microsoft.com/en-us/composer/',
   },
   {
-    to: 'https://aka.ms/bf-composer-docs-create-first-bot',
-    text: formatMessage('Build your first bot'),
-    css: home.linkInfo,
+    imageCover: githubIcon,
+    title: formatMessage('Composer on GitHub'),
+    description: formatMessage('Check out the resources on GitHub.'),
+    moreText: formatMessage('Go to Composer repository'),
+    url: 'https://github.com/microsoft/BotFramework-Composer',
   },
-];
-
-const tutorials = [
   {
-    title: formatMessage('5 Minute Intro'),
-    content: formatMessage('Chris Whitten'),
-    subContent: formatMessage('Apr 9, 2020'),
-    href: 'https://aka.ms/bf-composer-tutorial-chris',
+    imageCover: githubIcon,
+    title: formatMessage('Bot Framework Emulator'),
+    description: formatMessage('Test and debug bots built using the Bot Framework SDK. Available on GitHub.'),
+    moreText: formatMessage('Download Emulator'),
+    url: 'https://github.com/microsoft/BotFramework-Emulator/releases',
   },
   {
-    title: formatMessage('Weather Bot'),
-    content: formatMessage('Ben Brown'),
-    subContent: formatMessage('Nov 12, 2019'),
-    href: 'https://aka.ms/bf-composer-tutorial-ben',
-  },
-  {
-    title: formatMessage('MSFT Ignite AI Show'),
-    content: formatMessage('Vishwac Sena'),
-    subContent: formatMessage('Jan 28, 2020'),
-    href: 'https://aka.ms/bf-composer-tutorial-vishwac',
+    imageCover: stackoverflowIcon,
+    title: formatMessage('Stack Overflow'),
+    description: formatMessage('Engage with other bot builders. Ask and answer questions.'),
+    moreText: formatMessage('Go to Stack Overflow'),
+    url: 'https://stackoverflow.com/questions/tagged/botframework',
   },
 ];
 
@@ -59,14 +67,9 @@ const Home: React.FC<RouteComponentProps> = () => {
   const projectId = useRecoilValue(currentProjectIdState);
   const botName = useRecoilValue(botDisplayNameState(projectId));
   const recentProjects = useRecoilValue(recentProjectsState);
+  const feed = useRecoilValue(feedState);
   const templateId = useRecoilValue(templateIdState);
-  const {
-    openProject,
-    setCreationFlowStatus,
-    onboardingAddCoachMarkRef,
-    saveTemplateId,
-    setCreationFlowType,
-  } = useRecoilValue(dispatcherState);
+  const { openProject, setCreationFlowStatus, setCreationFlowType } = useRecoilValue(dispatcherState);
 
   const onItemChosen = async (item) => {
     if (item?.path) {
@@ -76,17 +79,6 @@ const Home: React.FC<RouteComponentProps> = () => {
     }
   };
 
-  const onClickTemplate = async (id: string) => {
-    saveTemplateId(id);
-    setCreationFlowStatus(CreationFlowStatus.NEW_FROM_TEMPLATE);
-    TelemetryClient.track('CreateNewBotProject', { method: 'luisCallToAction' });
-    navigate(`projects/create/${id}`);
-  };
-
-  const addButton = <Icon iconName="Add" styles={home.button} />;
-
-  const addRef = useCallback((project) => onboardingAddCoachMarkRef({ project }), []);
-
   const onClickNewBot = () => {
     setCreationFlowType('Bot');
     setCreationFlowStatus(CreationFlowStatus.NEW);
@@ -99,13 +91,13 @@ const Home: React.FC<RouteComponentProps> = () => {
       text: formatMessage('New'),
       buttonProps: {
         iconProps: {
-          iconName: 'CirclePlus',
+          iconName: 'Add',
         },
         onClick: () => {
           onClickNewBot();
           TelemetryClient.track('ToolbarButtonClicked', { name: 'new' });
         },
-        styles: defaultToolbarButtonStyles,
+        styles: home.toolbarFirstButtonStyles,
       },
       align: 'left',
       dataTestid: 'homePage-Toolbar-New',
@@ -123,7 +115,7 @@ const Home: React.FC<RouteComponentProps> = () => {
           navigate(`projects/open`);
           TelemetryClient.track('ToolbarButtonClicked', { name: 'openBot' });
         },
-        styles: defaultToolbarButtonStyles,
+        styles: home.toolbarButtonStyles,
       },
       align: 'left',
       dataTestid: 'homePage-Toolbar-Open',
@@ -141,7 +133,7 @@ const Home: React.FC<RouteComponentProps> = () => {
           navigate(`projects/${projectId}/${templateId}/save`);
           TelemetryClient.track('ToolbarButtonClicked', { name: 'saveAs' });
         },
-        styles: defaultToolbarButtonStyles,
+        styles: home.toolbarButtonStyles,
       },
       align: 'left',
       disabled: botName ? false : true,
@@ -149,104 +141,92 @@ const Home: React.FC<RouteComponentProps> = () => {
   ];
   return (
     <div css={home.outline}>
-      <Toolbar toolbarItems={toolbarItems} />
+      <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
       <div css={home.page}>
         <div css={home.leftPage} role="main">
-          <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
-          <div aria-label={formatMessage('Composer introduction')} css={home.introduction} role="region">
-            {formatMessage(
-              'Bot Framework Composer is an open-source visual authoring canvas for developers and multi-disciplinary teams to build bots. Composer integrates LUIS and QnA Maker, and allows sophisticated composition of bot replies using language generation.'
-            )}
-          </div>
-          <div css={home.newBotContainer}>
-            <div data-testid={'homePage-body-New'}>
-              <ItemContainer
-                ariaLabel={formatMessage('Create new empty bot')}
-                content={formatMessage('New')}
-                styles={home.newBotItem}
-                title={addButton}
-                onClick={() => {
-                  onClickNewBot();
-                  TelemetryClient.track('CreateNewBotProject', { method: 'toolbar' });
-                }}
-              />
-            </div>
+          <div css={home.leftContainer}>
+            <h2 css={home.recentBotsTitle}>{formatMessage(`Recent Bots`)}</h2>
+            <Toolbar css={home.toolbar} toolbarItems={toolbarItems} />
             {recentProjects.length > 0 ? (
-              <ItemContainer
-                ariaLabel={recentProjects[0].name}
-                content={recentProjects[0].name}
-                forwardedRef={addRef}
-                styles={home.latestBotItem}
-                title={''}
-                onClick={async () => {
-                  await openProject(recentProjects[0].path, 'default', true, null, (projectId) => {
-                    TelemetryClient.track('BotProjectOpened', { method: 'callToAction', projectId });
-                  });
-                }}
-              />
-            ) : (
-              <ItemContainer
-                ariaLabel={'ToDo bot with LUIS'}
-                content={'ToDoBotWithLuis'}
-                forwardedRef={addRef}
-                styles={home.latestBotItem}
-                title={''}
-                onClick={() => {
-                  onClickTemplate('ToDoBotWithLuisSample');
-                }}
-              />
-            )}
-          </div>
-          {recentProjects.length > 0 && (
-            <div css={home.leftContainer}>
-              <h2 css={home.subtitle}>{formatMessage(`Recent Bots`)}</h2>
               <RecentBotList
                 recentProjects={recentProjects}
                 onItemChosen={async (item) => {
                   await onItemChosen(item);
                 }}
               />
-            </div>
-          )}
-          <div css={home.leftContainer}>
-            <h2 css={home.subtitle}>{formatMessage('Video tutorials:')}&nbsp;</h2>
-            <div css={home.newBotContainer}>
-              {tutorials.map((item, index) => (
-                <ItemContainer
+            ) : (
+              <div css={home.noRecentBotsContainer}>
+                <Image
+                  alt={formatMessage('No recent bots')}
+                  aria-label={formatMessage('No recent bots')}
+                  css={home.noRecentBotsCover}
+                  imageFit={ImageFit.centerCover}
+                  src={noRecentBotsCover}
+                />
+                <div css={home.noRecentBotsDescription}>
+                  {formatMessage.rich('You don’t have any bot yet. Start to <Link>create a new bot</Link>', {
+                    Link: ({ children }) => (
+                      <Link
+                        onClick={() => {
+                          onClickNewBot();
+                          TelemetryClient.track('ToolbarButtonClicked', { name: 'new' });
+                        }}
+                      >
+                        {children}
+                      </Link>
+                    ),
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+          <div css={[home.leftContainer, home.gap40]}>
+            <h2 css={home.subtitle}>{formatMessage('Resources')}&nbsp;</h2>
+            <div css={home.rowContainer}>
+              {resources.map((item, index) => (
+                <CardWidget
                   key={index}
                   ariaLabel={item.title}
-                  content={item.content}
-                  href={item.href}
+                  cardType={'resource'}
+                  content={item.description}
+                  href={item.url}
+                  imageCover={item.imageCover}
+                  moreLinkText={item.moreText}
                   rel="noopener nofollow"
-                  styles={home.tutorialTile}
-                  subContent={item.subContent}
                   target="_blank"
                   title={item.title}
                 />
               ))}
-              <div css={home.linkContainer}>
-                <div>
-                  {formatMessage(
-                    'Bot Framework provides the most comprehensive experience for building conversational applications.'
-                  )}
-                </div>
-                {linksBottom.map((link) => {
-                  return (
-                    <Link
-                      key={'homePageLeftLinks-' + link.text}
-                      href={link.to}
-                      rel="noopener noreferrer"
-                      style={{ width: '150px' }}
-                      tabIndex={0}
-                      target="_blank"
-                    >
-                      <div css={link.css}>{link.text}</div>
-                    </Link>
-                  );
-                })}
-              </div>
             </div>
           </div>
+          <div css={[home.leftContainer, home.gap40]}>
+            <div css={home.rowContainer}>
+              <Pivot aria-label="Videos and articles" linkSize={PivotLinkSize.large}>
+                {feed.tabs.map((tab, index) => (
+                  <PivotItem key={index} headerText={tab.title}>
+                    <div css={home.rowContainer}>
+                      {tab.cards.map((card, index) => (
+                        <CardWidget
+                          key={index}
+                          ariaLabel={card.title}
+                          cardType={tab.title === 'Videos' ? 'video' : 'article'}
+                          content={card.description}
+                          href={card.url}
+                          imageCover={card.image}
+                          rel="noopener nofollow"
+                          target="_blank"
+                          title={card.title}
+                        />
+                      ))}
+                    </div>
+                  </PivotItem>
+                ))}
+              </Pivot>
+            </div>
+          </div>
+        </div>
+        <div css={home.rightPage}>
+          <WhatsNewsList newsList={feed.whatsNewLinks} />
         </div>
       </div>
     </div>
diff --git a/Composer/packages/client/src/pages/home/ItemContainer.tsx b/Composer/packages/client/src/pages/home/ItemContainer.tsx
index 42fa95823b..5ed11247df 100644
--- a/Composer/packages/client/src/pages/home/ItemContainer.tsx
+++ b/Composer/packages/client/src/pages/home/ItemContainer.tsx
@@ -5,30 +5,28 @@
 import { jsx, SerializedStyles } from '@emotion/core';
 import React from 'react';
 import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import { Text } from 'office-ui-fabric-react/lib/Text';
+import { Image } from 'office-ui-fabric-react/lib/Image';
+import formatMessage from 'format-message';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 
-import {
-  itemContainerWrapper,
-  itemContainer,
-  itemContainerContent,
-  itemContainerTitle,
-  disabledItem,
-  childrenContainer,
-} from './styles';
+import { itemContainerWrapper } from './styles';
 
-interface ItemContainerProps extends Omit<IButtonProps, 'onChange' | 'styles' | 'title'> {
+export interface ItemContainerProps extends Omit<IButtonProps, 'onChange' | 'styles' | 'title'> {
   onClick?: () => void | Promise<void>;
+  imageCover: string;
   title: string | JSX.Element;
   subContent?: string;
   content: string;
   styles?: {
     container?: SerializedStyles;
     title?: SerializedStyles;
+    imageCover?: SerializedStyles;
     content?: SerializedStyles;
   };
   disabled?: boolean;
   forwardedRef?: (project: any) => void | Promise<void>;
   openExternal?: boolean;
+  moreLinkText?: string;
   ariaLabel: string;
 }
 
@@ -42,30 +40,23 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
   forwardedRef,
   openExternal,
   ariaLabel,
+  imageCover,
+  moreLinkText,
   ...rest
 }) => {
   const onRenderChildren = () => {
     return (
-      <div ref={forwardedRef} aria-label={ariaLabel} css={childrenContainer}>
-        <div css={[itemContainer, styles.title, disabled ? disabledItem.title : undefined]}>
-          <div css={itemContainerTitle}>
-            <Text block variant="large">
-              {title}
-            </Text>
-          </div>
-        </div>
-        <div css={[itemContainer, styles.content, disabled ? disabledItem.content : undefined]}>
-          <div css={itemContainerContent}>
-            <Text nowrap variant={subContent ? 'medium' : 'large'}>
-              {content}
-            </Text>
-            {subContent && (
-              <Text nowrap variant="medium">
-                {subContent}
-              </Text>
-            )}
-          </div>
-        </div>
+      <div ref={forwardedRef} aria-label={ariaLabel}>
+        <Image
+          alt={formatMessage('Composer Logo')}
+          aria-label={formatMessage('Composer Logo')}
+          css={styles.imageCover}
+          src={imageCover}
+        />
+
+        <div css={styles.title}>{title}</div>
+        <div css={styles.content}>{content}</div>
+        {moreLinkText && <Link> {moreLinkText} </Link>}
       </div>
     );
   };
@@ -81,6 +72,7 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
       }}
       {...rest}
       disabled={disabled}
+      styles={{ flexContainer: { display: 'block' } }}
       onRenderChildren={onRenderChildren}
     />
   );
diff --git a/Composer/packages/client/src/pages/home/RecentBotList.tsx b/Composer/packages/client/src/pages/home/RecentBotList.tsx
index 9b72acc901..7c5c7c4459 100644
--- a/Composer/packages/client/src/pages/home/RecentBotList.tsx
+++ b/Composer/packages/client/src/pages/home/RecentBotList.tsx
@@ -58,21 +58,21 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
     },
     {
       key: 'column2',
-      name: formatMessage('Date modified'),
-      fieldName: 'dateModifiedValue',
-      minWidth: 60,
-      maxWidth: 70,
+      name: formatMessage('Location'),
+      fieldName: 'path',
+      minWidth: 200,
+      maxWidth: 400,
       isResizable: true,
-      data: 'number',
+      data: 'string',
       onRender: (item) => {
         return (
           <div data-is-focusable css={tableCell}>
             <div
-              aria-label={formatMessage(`Last modified time is {time}`, { time: calculateTimeDiff(item.dateModified) })}
+              aria-label={formatMessage(`location is {location}`, { location: item.path })}
               css={content}
               tabIndex={-1}
             >
-              {calculateTimeDiff(item.dateModified)}
+              {item.path}
             </div>
           </div>
         );
@@ -81,21 +81,21 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
     },
     {
       key: 'column3',
-      name: formatMessage('Location'),
-      fieldName: 'path',
-      minWidth: 200,
-      maxWidth: 400,
+      name: formatMessage('Date modified'),
+      fieldName: 'dateModifiedValue',
+      minWidth: 60,
+      maxWidth: 70,
       isResizable: true,
-      data: 'string',
+      data: 'number',
       onRender: (item) => {
         return (
           <div data-is-focusable css={tableCell}>
             <div
-              aria-label={formatMessage(`location is {location}`, { location: item.path })}
+              aria-label={formatMessage(`Last modified time is {time}`, { time: calculateTimeDiff(item.dateModified) })}
               css={content}
               tabIndex={-1}
             >
-              {item.path}
+              {calculateTimeDiff(item.dateModified)}
             </div>
           </div>
         );
diff --git a/Composer/packages/client/src/pages/home/WhatsNewsList.tsx b/Composer/packages/client/src/pages/home/WhatsNewsList.tsx
new file mode 100644
index 0000000000..ad6e99f5a0
--- /dev/null
+++ b/Composer/packages/client/src/pages/home/WhatsNewsList.tsx
@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import formatMessage from 'format-message';
+import { Fragment } from 'react';
+
+import * as home from './styles';
+
+interface WhatsNewsListProps {
+  newsList: any[];
+}
+
+export function WhatsNewsList({ newsList }: WhatsNewsListProps): JSX.Element {
+  return (
+    <div aria-label={formatMessage("What's new list")} css={home.whatsNewsContainer} role="region">
+      <h3 css={home.subtitle}>{formatMessage("What's new")}</h3>
+      <div css={home.whatsNewsContainer}>
+        {newsList.map(({ title, description, url }, index) => {
+          return (
+            <Fragment key={index}>
+              <Link css={home.bluetitle} href={url}>
+                {title}
+              </Link>
+              <p css={home.newsDescription}>{description}</p>
+            </Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/Composer/packages/client/src/pages/home/styles.ts b/Composer/packages/client/src/pages/home/styles.ts
index e7c7842f4f..323abc1465 100644
--- a/Composer/packages/client/src/pages/home/styles.ts
+++ b/Composer/packages/client/src/pages/home/styles.ts
@@ -2,10 +2,13 @@
 // Licensed under the MIT License.
 
 import { css } from '@emotion/core';
-import { IIconStyles } from 'office-ui-fabric-react/lib/Icon';
 import { ITheme, getTheme } from 'office-ui-fabric-react/lib/Styling';
-import { Depths, MotionTimings, MotionDurations } from '@uifabric/fluent-theme';
+import { Depths, MotionTimings, MotionDurations, NeutralColors } from '@uifabric/fluent-theme';
 import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
+import { IButtonStyles } from 'office-ui-fabric-react/lib/Button';
+const theme: ITheme = getTheme();
+const { fonts } = theme;
+
 export const outline = css`
   display: flex;
   flex-direction: column;
@@ -21,7 +24,7 @@ export const page = css`
 
 export const leftPage = css`
   flex: 50%;
-  padding: 25px;
+  padding: 0 25px 25px 25px;
   display: flex;
   flex-direction: column;
 `;
@@ -29,12 +32,18 @@ export const leftPage = css`
 export const rightPage = css`
   flex: 1;
   padding: 25px;
+  margin-bottom: 55px;
   display: flex;
   flex-direction: column;
+  background: #f6f6f6;
+  @media (max-width: 1366px) {
+    background: none;
+  }
 `;
 
 export const title = css`
   display: block;
+  padding: 25px 25px 0px 25px;
   font-size: ${FontSizes.xxLarge};
   line-height: 36px;
   font-weight: ${FontWeights.semibold};
@@ -52,28 +61,31 @@ export const introduction = css`
   font-size: 18px;
 `;
 
-export const newBotContainer = css`
+export const rowContainer = css`
   display: flex;
-  margin: 20px 0;
+  margin: 12px 0;
 `;
 
 export const leftContainer = css`
-  margin-top: 10px;
   margin-bottom: 10px;
   flex: auto;
   display: flex;
   flex-direction: column;
 `;
 
+export const gap40 = css`
+  margin-top: 40px;
+`;
+
 export const itemContainerWrapper = (disabled?: boolean) => css`
   border-radius: 2px;
   border-width: 0;
   cursor: ${disabled ? 'auto' : 'pointer'};
   display: block;
-  min-width: 180px;
-  height: 130px;
-  width: 11vw;
-  margin-right: 30px;
+  min-width: 244px;
+  height: 185px;
+  width: 17vw;
+  margin-right: 12px;
   padding: 0;
 `;
 
@@ -82,33 +94,6 @@ export const itemContainer = css`
   height: 50%;
 `;
 
-export const itemContainerTitle = css`
-  height: 100%;
-  color: white;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  font-size: 20px;
-  font-weight: 600;
-  padding: 0.5rem 1rem;
-  box-sizing: border-box;
-  outline: none;
-`;
-
-export const itemContainerContent = css`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  font-size: 16px;
-  font-weight: 600;
-  text-align: left;
-  padding: 10px 0 0 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  outline: none;
-`;
-
 export const subtitle = css`
   font-size: 18px;
   line-height: 24px;
@@ -118,28 +103,59 @@ export const subtitle = css`
 `;
 
 export const bluetitle = css`
-  font-size: 18px;
-  line-height: 24px;
+  line-height: 20px;
+  font-size: ${fonts.medium.fontSize};
   display: flex;
-  font-weight: 600;
   color: #0078d4;
-  margin: 0;
+  margin: 16px 0 0 0;
 `;
 
-export const examplesDescription = css`
-  margin: 0;
+export const recentBotsTitle = css`
+  ${subtitle};
+  padding: 18px 0;
 `;
 
-export const linkContainer = css`
-  width: 50%;
-  margin-top: 10px;
-  font-weight: 600;
+export const toolbar = css`
+  border-bottom: none;
+  button: {
+    font-size: ${fonts.medium.fontSize};
+  }
 `;
 
-export const linkInfo = css`
-  color: #0078d4;
-  margin-top: 10px;
-  text-decoration: underline;
+export const toolbarButtonStyles: IButtonStyles = {
+  root: { fontSize: '14px', marginTop: '2px', marginLeft: '15px' },
+};
+
+export const toolbarFirstButtonStyles: IButtonStyles = {
+  root: { fontSize: '14px', marginTop: '2px', marginLeft: '0' },
+};
+
+export const noRecentBotsContainer = css`
+  height: 227px;
+  background: rgba(242, 242, 242, 0.7);
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const noRecentBotsCover = css`
+  width: 104px;
+  height: 84px;
+  margin-top: 48px;
+`;
+
+export const noRecentBotsDescription = css`
+  margin-top: 28px;
+`;
+
+export const newsDescription = css`
+  margin: 0;
+  font-size: ${fonts.medium.fontSize};
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
 `;
 
 export const botContainer = css`
@@ -151,33 +167,11 @@ export const botContainer = css`
   margin-top: 24px;
 `;
 
-export const button: IIconStyles = {
-  root: {
-    fontSize: '24px',
-    fontWeight: 600,
-    color: 'white',
-  },
-};
-
-export const disabledItem = {
-  title: css`
-    background-color: #f2f2f2;
-    color: #a19f9d;
-  `,
-  content: css`
-    border: 2px solid #f2f2f2;
-    width: auto;
-    font-size: smaller;
-    word-wrap: break-word;
-    color: #a19f9d;
-    background: white;
-  `,
-};
-
 const baseBotItem = {
   container: css`
-    padding: 0;
-    border-width: 1px;
+    padding: 8px;
+    text-align: left;
+    border: 1px #efedeb solid;
     box-shadow: ${Depths.depth4};
     transition: box-shadow ${MotionDurations.duration2} ${MotionTimings.standard};
     &:hover,
@@ -189,29 +183,56 @@ const baseBotItem = {
       box-shadow: ${Depths.depth0};
     }
   `,
-  content: css`
-    background-color: #f2f2f2;
-  `,
 };
 
-export const newBotItem = {
+export const cardItem = {
   ...baseBotItem,
   title: css`
-    background-color: #0078d4;
+    font-weight: ${FontWeights.semibold};
+    color: ${NeutralColors.gray160};
+    margin-bottom: 16px;
+  `,
+  imageCover: css`
+    width: 53px;
+    height: 48px;
+    margin: 2px 0 12px 0;
+  `,
+  content: css`
+    color: ${NeutralColors.gray140};
+    font-size: ${fonts.small.fontSize};
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    min-height: 34px;
+    -webkit-box-orient: vertical;
+    margin-bottom: 16px;
+  `,
+  moreLink: css`
+    color: #0078d4;
   `,
 };
 
-export const latestBotItem = {
-  ...baseBotItem,
+export const mediaCardItem = {
+  ...cardItem,
   title: css`
-    background-color: #56ccf2;
+    ${cardItem.title};
+    margin-bottom: 6px;
+  `,
+  imageCover: css`
+    width: 100%;
+    height: 95px;
+    margin: 4px 0 12px 0;
+    display: flex;
   `,
 };
 
-export const tutorialTile = {
-  ...baseBotItem,
-  title: css`
-    background-color: #004c87;
+export const meidiaCardNoCoverItem = {
+  ...mediaCardItem,
+  imageCover: css`
+    align-items: center;
+    justify-content: center;
+    ${mediaCardItem.imageCover};
+    background: ${NeutralColors.gray160};
   `,
 };
 
@@ -223,21 +244,25 @@ export const childrenContainer = css`
 `;
 
 export const detailListContainer = css`
+  border-top: 1px solid ${NeutralColors.gray30};
   position: relative;
   max-height: 40vh;
   padding-top: 10px;
   overflow: hidden;
   flex-grow: 1;
   min-height: 250px;
+  .ms-DetailsHeader {
+    padding-top: 0;
+  }
+  .ms-DetailsHeader-cellName {
+    font-weight: 400;
+  }
 `;
 
-export const exampleListContainer = css`
-  border: 1px solid #979797;
-  margin-top: 20px;
+export const whatsNewsContainer = css`
   position: relative;
-  min-width: 260px;
+  min-width: 200px;
   flex: 1;
-  min-height: 582px;
 `;
 
 export const loading = css`
@@ -245,44 +270,6 @@ export const loading = css`
   width: 600px;
 `;
 
-const theme: ITheme = getTheme();
-const { palette, fonts } = theme;
-export const exampleListCell = css`
-  min-height: 54px;
-  padding: 16px;
-  box-sizing: border-box;
-  display: flex;
-  &:focus {
-    outline: rgb(102, 102, 102) solid 1px;
-  }
-  &:hover {
-    background: ${palette.neutralLight};
-  }
-`;
-
-export const exampleListCellIcon = css`
-  height: 51px;
-  width: 51px;
-  flex-basis: 51px;
-`;
-
-export const exampleListCellContent = css`
-  margin-left: 16px;
-  overflow: hidden;
-  flex: 1;
-`;
-
-export const exampleListCellName = css`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-export const exampleListCellDescription = css`
-  font-size: ${fonts.small.fontSize};
-  color: ${palette.neutralTertiary};
-`;
-
 export const tableCell = css`
   outline: none;
   width: auto;
diff --git a/Composer/packages/client/src/recoilModel/atoms/appState.ts b/Composer/packages/client/src/recoilModel/atoms/appState.ts
index 84364406ff..38bbb36428 100644
--- a/Composer/packages/client/src/recoilModel/atoms/appState.ts
+++ b/Composer/packages/client/src/recoilModel/atoms/appState.ts
@@ -15,7 +15,7 @@ import {
 } from '../../recoilModel/types';
 import { getUserSettings } from '../utils';
 import onboardingStorage from '../../utils/onboardingStorage';
-import { CreationFlowStatus, AppUpdaterStatus, CreationFlowType } from '../../constants';
+import { CreationFlowStatus, AppUpdaterStatus, CreationFlowType, FEEDVERSION } from '../../constants';
 import { TreeLink } from '../../components/ProjectTree/types';
 import { Dispatcher } from '../dispatchers';
 import { DebugDrawerKeys } from '../../pages/design/DebugPanel/TabExtensions/types';
@@ -63,6 +63,16 @@ export const recentProjectsState = atom<any[]>({
   default: [],
 });
 
+export const feedState = atom<{ tabs: any[]; whatsNewLinks: any[]; version: number; fetched: boolean }>({
+  key: getFullyQualifiedKey('feed'),
+  default: {
+    version: FEEDVERSION,
+    fetched: false,
+    tabs: [],
+    whatsNewLinks: [],
+  },
+});
+
 export const templateProjectsState = atom<BotTemplate[]>({
   key: getFullyQualifiedKey('templateProjects'),
   default: [],
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/project.ts b/Composer/packages/client/src/recoilModel/dispatchers/project.ts
index 0127be9242..104368921c 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/project.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/project.ts
@@ -8,7 +8,7 @@ import { QnABotTemplateId, RootBotManagedProperties } from '@bfc/shared';
 import get from 'lodash/get';
 import { CallbackInterface, useRecoilCallback } from 'recoil';
 
-import { BotStatus } from '../../constants';
+import { BotStatus, FEEDVERSION } from '../../constants';
 import settingStorage from '../../utils/dialogSettingStorage';
 import { getFileNameFromPath } from '../../utils/fileUtil';
 import httpClient from '../../utils/httpUtil';
@@ -29,6 +29,7 @@ import {
   creationFlowTypeState,
   currentProjectIdState,
   dispatcherState,
+  feedState,
   fetchReadMePendingState,
   filePersistenceState,
   projectMetaDataState,
@@ -476,6 +477,24 @@ export const projectDispatcher = () => {
     }
   });
 
+  const fetchFeed = useRecoilCallback((callbackHelpers: CallbackInterface) => async () => {
+    const { set, snapshot } = callbackHelpers;
+    const { fetched } = await snapshot.getPromise(feedState);
+    if (fetched) return;
+
+    try {
+      const response = await httpClient.get(`/projects/feed`);
+      // feed version control
+      if (response.data.version === FEEDVERSION) {
+        set(feedState, { ...response.data, fetched: true });
+      } else {
+        logMessage(callbackHelpers, `Feed version expired`);
+      }
+    } catch (ex) {
+      logMessage(callbackHelpers, `Error in fetching feed projects: ${ex}`);
+    }
+  });
+
   const setBotStatus = useRecoilCallback<[string, BotStatus], void>(
     ({ set }: CallbackInterface) => (projectId: string, status: BotStatus) => {
       set(botStatusState(projectId), status);
@@ -616,6 +635,7 @@ export const projectDispatcher = () => {
     saveProjectAs,
     fetchProjectById,
     fetchRecentProjects,
+    fetchFeed,
     setBotStatus,
     saveTemplateId,
     updateBoilerplate,
diff --git a/Composer/packages/server/src/controllers/project.ts b/Composer/packages/server/src/controllers/project.ts
index 8fe0bf604c..75e6fbadb5 100644
--- a/Composer/packages/server/src/controllers/project.ts
+++ b/Composer/packages/server/src/controllers/project.ts
@@ -12,6 +12,7 @@ import { BotProjectService } from '../services/project';
 import AssetService from '../services/asset';
 import { LocationRef } from '../models/bot/interface';
 import { getSkillManifest } from '../models/bot/skillManager';
+import { getFeedUrl } from '../models/bot/feedManager';
 import StorageService from '../services/storage';
 import settings from '../settings';
 import { getLocationRef, getNewProjRef } from '../utility/project';
@@ -279,6 +280,16 @@ async function getRecentProjects(req: Request, res: Response) {
   return res.status(200).json(projects);
 }
 
+async function getFeed(req: Request, res: Response) {
+  try {
+    const content = await getFeedUrl();
+    res.status(200).json(content);
+  } catch (err) {
+    res.status(404).json({
+      message: err.message,
+    });
+  }
+}
 async function generateProjectId(req: Request, res: Response) {
   try {
     const location = req.query.location;
@@ -591,6 +602,7 @@ export const ProjectController = {
   createProjectV2,
   getAllProjects,
   getRecentProjects,
+  getFeed,
   updateBoilerplate,
   checkBoilerplateVersion,
   generateProjectId,
diff --git a/Composer/packages/server/src/models/bot/feedManager.ts b/Composer/packages/server/src/models/bot/feedManager.ts
new file mode 100644
index 0000000000..0719eeac12
--- /dev/null
+++ b/Composer/packages/server/src/models/bot/feedManager.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import axios from 'axios';
+
+// TODO: update feed url
+const feedUrl = 'https://aka.ms/bf-composer-home-feed-v1';
+
+export const getFeedUrl = async (): Promise<any> => {
+  const { data: content } = await axios({
+    method: 'get',
+    url: feedUrl,
+  });
+  return content && typeof content === 'string' ? JSON.parse(content) : content;
+};
diff --git a/Composer/packages/server/src/router/api.ts b/Composer/packages/server/src/router/api.ts
index 6b065b0386..dcbf05d18c 100644
--- a/Composer/packages/server/src/router/api.ts
+++ b/Composer/packages/server/src/router/api.ts
@@ -30,6 +30,7 @@ router.post('/projects', ProjectController.createProject);
 router.post('/v2/projects', ProjectController.createProjectV2);
 router.get('/projects', ProjectController.getAllProjects);
 router.get('/projects/recent', ProjectController.getRecentProjects);
+router.get('/projects/feed', ProjectController.getFeed);
 router.get('/projects/generateProjectId', ProjectController.generateProjectId);
 
 router.get('/projects/:projectId', ProjectController.getProjectById);