diff --git a/Composer/packages/client/src/components/Header.tsx b/Composer/packages/client/src/components/Header.tsx
index 956ed686d8..d495a1a53f 100644
--- a/Composer/packages/client/src/components/Header.tsx
+++ b/Composer/packages/client/src/components/Header.tsx
@@ -90,6 +90,7 @@ const headerTextContainer = css`
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  min-width: 600px;
   width: 50%;
 `;
 
diff --git a/Composer/packages/client/src/pages/home/CardWidget.tsx b/Composer/packages/client/src/pages/home/CardWidget.tsx
index 75d2b31551..27ce698db4 100644
--- a/Composer/packages/client/src/pages/home/CardWidget.tsx
+++ b/Composer/packages/client/src/pages/home/CardWidget.tsx
@@ -2,22 +2,110 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
+import { jsx, SerializedStyles } from '@emotion/core';
+import React, { useState } from 'react';
+import { Image, ImageFit, ImageLoadState } from 'office-ui-fabric-react/lib/Image';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 
 import defaultArticleCardCover from '../../images/defaultArticleCardCover.svg';
 import defaultVideoCardCover from '../../images/defaultVideoCardCover.svg';
 
-import { ItemContainer, ItemContainerProps } from './ItemContainer';
+import { itemContainerWrapper } from './styles';
 import * as home from './styles';
 
-interface CardWidgetProps extends ItemContainerProps {
+export interface CardWidgetProps {
+  onClick?: () => void | Promise<void>;
   cardType: 'resource' | 'video' | 'article';
+  imageCover: string;
+  href?: string;
+  target?: string;
+  title: string | JSX.Element;
+  subContent?: string;
+  content: string;
+  styles?: {
+    container?: SerializedStyles;
+    title?: SerializedStyles;
+    imageCover?: SerializedStyles;
+    content?: SerializedStyles;
+    moreLink?: SerializedStyles;
+  };
+  disabled?: boolean;
+  forwardedRef?: (project: any) => void | Promise<void>;
+  openExternal?: boolean;
+  moreLinkText?: string;
+  ariaLabel: string;
 }
 
-export const CardWidget: React.FC<CardWidgetProps> = (props) => {
+export const CardWidget: React.FC<CardWidgetProps> = ({
+  onClick = undefined,
+  href,
+  target = '_blank',
+  title,
+  content,
+  subContent,
+  disabled,
+  forwardedRef,
+  openExternal,
+  ariaLabel,
+  imageCover,
+  cardType,
+  moreLinkText,
+  ...rest
+}) => {
+  const defaultImageCover = cardType === 'video' ? defaultVideoCardCover : defaultArticleCardCover;
+  const [appliedImageCover, setAppliedImageCover] = useState<string>(imageCover ?? defaultImageCover);
+  const [useImageBackground, setUseImageBackground] = useState(false);
   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} />;
+    rest.styles || cardType === 'resource'
+      ? home.cardItem
+      : imageCover
+      ? home.mediaCardItem
+      : home.meidiaCardNoCoverItem;
+
+  const onImageLoading = (state: ImageLoadState) => {
+    if (state === ImageLoadState.error) {
+      setAppliedImageCover(defaultImageCover);
+    }
+  };
+
+  // detect image cover dimention to decide apply background or not.
+  // By design standard image width is 244 height is 95, if feed image aspectRatio too far away will be treated as a small image.
+  const onImageLoaded = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const aspectRatio = rect.width / rect.height;
+    if (aspectRatio < 1.5) {
+      setUseImageBackground(true);
+    }
+  };
+
+  return (
+    <a
+      css={[itemContainerWrapper(disabled), styles.container]}
+      href={href}
+      target={target}
+      onClick={async (e) => {
+        if (onClick != null) {
+          e.preventDefault();
+          await onClick();
+        }
+      }}
+      {...rest}
+    >
+      <div ref={forwardedRef} aria-label={ariaLabel}>
+        <div css={styles.imageCover}>
+          {useImageBackground && <div className={'image-cover-background'} />}
+          <Image
+            className={'image-cover-img'}
+            imageFit={ImageFit.centerContain}
+            src={appliedImageCover}
+            onLoad={onImageLoaded}
+            onLoadingStateChange={onImageLoading}
+          />
+        </div>
+        <div css={styles.title}>{title}</div>
+        <div css={styles.content}>{content}</div>
+        {moreLinkText && <Link css={styles.moreLink}> {moreLinkText} </Link>}
+      </div>
+    </a>
+  );
 };
diff --git a/Composer/packages/client/src/pages/home/Home.tsx b/Composer/packages/client/src/pages/home/Home.tsx
index 14cae28032..2bb61af5cd 100644
--- a/Composer/packages/client/src/pages/home/Home.tsx
+++ b/Composer/packages/client/src/pages/home/Home.tsx
@@ -8,6 +8,7 @@ import formatMessage from 'format-message';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { Pivot, PivotItem, PivotLinkSize } from 'office-ui-fabric-react/lib/Pivot';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { RouteComponentProps } from '@reach/router';
 import { navigate } from '@reach/router';
 import { useRecoilValue } from 'recoil';
@@ -141,8 +142,8 @@ const Home: React.FC<RouteComponentProps> = () => {
   ];
   return (
     <div css={home.outline}>
-      <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
       <div css={home.page}>
+        <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
         <div css={home.leftPage} role="main">
           <div css={home.leftContainer}>
             <h2 css={home.recentBotsTitle}>{formatMessage(`Recent Bots`)}</h2>
@@ -192,7 +193,6 @@ const Home: React.FC<RouteComponentProps> = () => {
                   href={item.url}
                   imageCover={item.imageCover}
                   moreLinkText={item.moreText}
-                  rel="noopener nofollow"
                   target="_blank"
                   title={item.title}
                 />
@@ -204,7 +204,12 @@ const Home: React.FC<RouteComponentProps> = () => {
               <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.viewAllLinkText && (
+                      <Link css={home.tabRowViewMore} href={tab.viewAllLinkUrl} target={'_blank'}>
+                        {tab.viewAllLinkText} <Icon iconName={'OpenInNewWindow'}></Icon>{' '}
+                      </Link>
+                    )}
+                    <div css={home.tabRowContainer}>
                       {tab.cards.map((card, index) => (
                         <CardWidget
                           key={index}
@@ -213,7 +218,6 @@ const Home: React.FC<RouteComponentProps> = () => {
                           content={card.description}
                           href={card.url}
                           imageCover={card.image}
-                          rel="noopener nofollow"
                           target="_blank"
                           title={card.title}
                         />
diff --git a/Composer/packages/client/src/pages/home/ItemContainer.tsx b/Composer/packages/client/src/pages/home/ItemContainer.tsx
deleted file mode 100644
index 5ed11247df..0000000000
--- a/Composer/packages/client/src/pages/home/ItemContainer.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx, SerializedStyles } from '@emotion/core';
-import React from 'react';
-import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
-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 } from './styles';
-
-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;
-}
-
-export const ItemContainer: React.FC<ItemContainerProps> = ({
-  onClick = undefined,
-  title,
-  content,
-  subContent,
-  styles = {},
-  disabled,
-  forwardedRef,
-  openExternal,
-  ariaLabel,
-  imageCover,
-  moreLinkText,
-  ...rest
-}) => {
-  const onRenderChildren = () => {
-    return (
-      <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>
-    );
-  };
-
-  return (
-    <DefaultButton
-      css={[itemContainerWrapper(disabled), styles.container]}
-      onClick={async (e) => {
-        if (onClick != null) {
-          e.preventDefault();
-          await onClick();
-        }
-      }}
-      {...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 7c5c7c4459..646f2df975 100644
--- a/Composer/packages/client/src/pages/home/RecentBotList.tsx
+++ b/Composer/packages/client/src/pages/home/RecentBotList.tsx
@@ -16,10 +16,11 @@ import {
   CheckboxVisibility,
 } from 'office-ui-fabric-react/lib/DetailsList';
 import formatMessage from 'format-message';
+import { useMemo } from 'react';
 
 import { calculateTimeDiff } from '../../utils/fileUtil';
 
-import { detailListContainer, tableCell, content } from './styles';
+import * as home from './styles';
 
 interface RecentBotListProps {
   onItemChosen: (file: IObjectWithKey) => void;
@@ -44,7 +45,7 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
       data: 'string',
       onRender: (item) => {
         return (
-          <div data-is-focusable css={tableCell}>
+          <div data-is-focusable css={home.tableCell}>
             <Link
               aria-label={formatMessage(`Bot name is {botName}`, { botName: item.name })}
               onClick={() => onItemChosen(item)}
@@ -66,10 +67,10 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
       data: 'string',
       onRender: (item) => {
         return (
-          <div data-is-focusable css={tableCell}>
+          <div data-is-focusable css={home.tableCell}>
             <div
               aria-label={formatMessage(`location is {location}`, { location: item.path })}
-              css={content}
+              css={home.content}
               tabIndex={-1}
             >
               {item.path}
@@ -89,10 +90,10 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
       data: 'number',
       onRender: (item) => {
         return (
-          <div data-is-focusable css={tableCell}>
+          <div data-is-focusable css={home.tableCell}>
             <div
               aria-label={formatMessage(`Last modified time is {time}`, { time: calculateTimeDiff(item.dateModified) })}
-              css={content}
+              css={home.content}
               tabIndex={-1}
             >
               {calculateTimeDiff(item.dateModified)}
@@ -115,22 +116,32 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
     );
   }
 
+  const botList = useMemo(() => {
+    return (
+      <DetailsList
+        isHeaderVisible
+        checkboxVisibility={CheckboxVisibility.hidden}
+        columns={tableColums}
+        compact={false}
+        getKey={(item) => `${item.path}/${item.name}`}
+        items={recentProjects}
+        layoutMode={DetailsListLayoutMode.justified}
+        selectionMode={SelectionMode.single}
+        onItemInvoked={onItemChosen}
+        onRenderDetailsHeader={onRenderDetailsHeader}
+      />
+    );
+  }, []);
+
   return (
-    <div css={detailListContainer} data-is-scrollable="true">
-      <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
-        <DetailsList
-          isHeaderVisible
-          checkboxVisibility={CheckboxVisibility.hidden}
-          columns={tableColums}
-          compact={false}
-          getKey={(item) => `${item.path}/${item.name}`}
-          items={recentProjects}
-          layoutMode={DetailsListLayoutMode.justified}
-          selectionMode={SelectionMode.single}
-          onItemInvoked={onItemChosen}
-          onRenderDetailsHeader={onRenderDetailsHeader}
-        />
-      </ScrollablePane>
+    <div css={home.detailListContainer} data-is-scrollable="true">
+      {recentProjects.length > 5 ? (
+        <div css={home.detailListScrollWrapper}>
+          <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>{botList}</ScrollablePane>{' '}
+        </div>
+      ) : (
+        botList
+      )}
     </div>
   );
 }
diff --git a/Composer/packages/client/src/pages/home/WhatsNewsList.tsx b/Composer/packages/client/src/pages/home/WhatsNewsList.tsx
index ad6e99f5a0..23c0dff0af 100644
--- a/Composer/packages/client/src/pages/home/WhatsNewsList.tsx
+++ b/Composer/packages/client/src/pages/home/WhatsNewsList.tsx
@@ -17,11 +17,11 @@ 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}>
+      <div css={home.whatsNewsList}>
         {newsList.map(({ title, description, url }, index) => {
           return (
             <Fragment key={index}>
-              <Link css={home.bluetitle} href={url}>
+              <Link css={home.bluetitle} href={url} target={'_blank'}>
                 {title}
               </Link>
               <p css={home.newsDescription}>{description}</p>
diff --git a/Composer/packages/client/src/pages/home/styles.ts b/Composer/packages/client/src/pages/home/styles.ts
index 323abc1465..8cb0a76fdb 100644
--- a/Composer/packages/client/src/pages/home/styles.ts
+++ b/Composer/packages/client/src/pages/home/styles.ts
@@ -31,14 +31,9 @@ export const leftPage = css`
 
 export const rightPage = css`
   flex: 1;
-  padding: 25px;
-  margin-bottom: 55px;
+  padding-right: 25px;
   display: flex;
   flex-direction: column;
-  background: #f6f6f6;
-  @media (max-width: 1366px) {
-    background: none;
-  }
 `;
 
 export const title = css`
@@ -68,23 +63,39 @@ export const rowContainer = css`
 
 export const leftContainer = css`
   margin-bottom: 10px;
-  flex: auto;
-  display: flex;
-  flex-direction: column;
 `;
 
 export const gap40 = css`
   margin-top: 40px;
 `;
 
+export const tabRowContainer = css`
+  flex-wrap: wrap;
+  display: flex;
+  clear: both;
+`;
+
+export const tabRowViewMore = css`
+  float: right;
+  position: relative;
+  top: -24px;
+  font-size: ${fonts.medium.fontSize};
+  margin-bottom: -40px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  i {
+    margin: 0 0 0 5px;
+  }
+`;
+
 export const itemContainerWrapper = (disabled?: boolean) => css`
   border-radius: 2px;
   border-width: 0;
   cursor: ${disabled ? 'auto' : 'pointer'};
   display: block;
-  min-width: 244px;
-  height: 185px;
-  width: 17vw;
+  height: auto;
+  text-decoration-line: none;
   margin-right: 12px;
   padding: 0;
 `;
@@ -105,7 +116,7 @@ export const subtitle = css`
 export const bluetitle = css`
   line-height: 20px;
   font-size: ${fonts.medium.fontSize};
-  display: flex;
+  display: inline-block;
   color: #0078d4;
   margin: 16px 0 0 0;
 `;
@@ -158,18 +169,16 @@ export const newsDescription = css`
   -webkit-box-orient: vertical;
 `;
 
-export const botContainer = css`
-  display: flex;
-  flex-wrap: wrap;
-  line-height: 32px;
-  margin-left: 33px;
-  margin-right: 33px;
-  margin-top: 24px;
-`;
-
-const baseBotItem = {
+export const cardItem = {
   container: css`
-    padding: 8px;
+    margin: 12px 0 12px 12px;
+    padding: 12px;
+    min-width: 244px;
+    max-width: 450px;
+    width: 17vw;
+    @media (max-width: 1416px) {
+      width: 20vw;
+    }
     text-align: left;
     border: 1px #efedeb solid;
     box-shadow: ${Depths.depth4};
@@ -183,19 +192,27 @@ const baseBotItem = {
       box-shadow: ${Depths.depth0};
     }
   `,
-};
-
-export const cardItem = {
-  ...baseBotItem,
   title: css`
     font-weight: ${FontWeights.semibold};
     color: ${NeutralColors.gray160};
-    margin-bottom: 16px;
+    margin-bottom: 8px;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   `,
   imageCover: css`
     width: 53px;
     height: 48px;
-    margin: 2px 0 12px 0;
+    max-height: 175px;
+    margin-bottom: 12px;
+    position: relative;
+    .image-cover-img {
+      display: flex;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
   `,
   content: css`
     color: ${NeutralColors.gray140};
@@ -205,34 +222,51 @@ export const cardItem = {
     overflow: hidden;
     min-height: 34px;
     -webkit-box-orient: vertical;
-    margin-bottom: 16px;
   `,
   moreLink: css`
+    margin-top: 12px;
     color: #0078d4;
   `,
 };
 
 export const mediaCardItem = {
   ...cardItem,
-  title: css`
-    ${cardItem.title};
-    margin-bottom: 6px;
-  `,
   imageCover: css`
+    ${cardItem.imageCover}
     width: 100%;
-    height: 95px;
-    margin: 4px 0 12px 0;
+    min-height: 95px;
+    height: calc(17vw * 95 / 244);
+    @media (max-width: 1416px) {
+      height: calc(20vw * 95 / 244);
+    }
+    margin-bottom: 12px;
+    overflow: hidden;
     display: flex;
+    .image-cover-background {
+      background: #323130;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
   `,
 };
 
 export const meidiaCardNoCoverItem = {
   ...mediaCardItem,
   imageCover: css`
+    ${mediaCardItem.imageCover};
+
+    position: relative;
     align-items: center;
     justify-content: center;
-    ${mediaCardItem.imageCover};
     background: ${NeutralColors.gray160};
+    .image-cover-background {
+      display: none;
+    }
+    .image-cover-img {
+      width: 53px;
+      height: 48px;
+    }
   `,
 };
 
@@ -245,12 +279,7 @@ 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;
   }
@@ -259,9 +288,28 @@ export const detailListContainer = css`
   }
 `;
 
+export const detailListScrollWrapper = css`
+  position: relative;
+  max-height: 40vh;
+  overflow: hidden;
+  min-height: 250px;
+`;
+
 export const whatsNewsContainer = css`
   position: relative;
-  min-width: 200px;
+  flex: 1;
+  padding: 20px 25px 25px 25px;
+  border-radius: 5px;
+  margin: 20px 0 55px 0;
+  background: #f6f6f6;
+  @media (max-width: 1416px) {
+    background: none;
+    min-width: 200px;
+    margin: 15px 0 0 0;
+  }
+`;
+
+export const whatsNewsList = css`
   flex: 1;
 `;