diff --git a/changelogs/fragments/7823.yml b/changelogs/fragments/7823.yml
new file mode 100644
index 000000000000..983365a61c22
--- /dev/null
+++ b/changelogs/fragments/7823.yml
@@ -0,0 +1,2 @@
+feat:
+- Add workspace icon to left nav / workspace picker menu / home page. ([#7823](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7823))
\ No newline at end of file
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
index 21ff68f879e2..9b64995b1824 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
@@ -91,14 +91,6 @@ export function CollapsibleNavGroupEnabled({
   const appId = useObservable(observables.appId$, '');
   const navGroupsMap = useObservable(observables.navGroupsMap$, {});
   const currentNavGroup = useObservable(observables.currentNavGroup$, undefined);
-  const firstVisibleNavLinkOfAllUseCase = useMemo(
-    () =>
-      fulfillRegistrationLinksToChromeNavLinks(
-        navGroupsMap[ALL_USE_CASE_ID]?.navLinks || [],
-        navLinks
-      )[0],
-    [navGroupsMap, navLinks]
-  );
 
   const visibleUseCases = useMemo(() => getVisibleUseCases(navGroupsMap), [navGroupsMap]);
 
@@ -303,7 +295,8 @@ export function CollapsibleNavGroupEnabled({
           >
             <CollapsibleNavTop
               homeLink={homeLink}
-              firstVisibleNavLinkOfAllUseCase={firstVisibleNavLinkOfAllUseCase}
+              navGroupsMap={navGroupsMap}
+              navLinks={navLinks}
               navigateToApp={navigateToApp}
               logos={logos}
               setCurrentNavGroup={setCurrentNavGroup}
@@ -326,7 +319,7 @@ export function CollapsibleNavGroupEnabled({
             {shouldShowCollapsedNavHeaderContent && collapsibleNavHeaderRender ? (
               <>
                 {collapsibleNavHeaderRender()}
-                <EuiSpacer size="l" />
+                <EuiSpacer />
               </>
             ) : null}
             <NavGroups
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss
new file mode 100644
index 000000000000..25f4385775ec
--- /dev/null
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss
@@ -0,0 +1,3 @@
+.leftNavTopIcon {
+  color: $euiColorMediumShade;
+}
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.test.tsx
index d5dac8cc471b..0fd0ceaadb68 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.test.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.test.tsx
@@ -9,10 +9,10 @@ import { ChromeNavLink } from '../../nav_links';
 import { ChromeRegistrationNavLink } from '../../nav_group';
 import { httpServiceMock } from '../../../mocks';
 import { getLogos } from '../../../../common';
-import { CollapsibleNavTop } from './collapsible_nav_group_enabled_top';
+import { CollapsibleNavTop, CollapsibleNavTopProps } from './collapsible_nav_group_enabled_top';
 import { BehaviorSubject } from 'rxjs';
 import { WorkspaceObject } from 'src/core/public/workspace';
-import { ALL_USE_CASE_ID } from '../../../';
+import { ALL_USE_CASE_ID, DEFAULT_NAV_GROUPS } from '../../../';
 
 const mockBasePath = httpServiceMock.createSetupContract({ basePath: '/test' }).basePath;
 
@@ -33,44 +33,66 @@ describe('<CollapsibleNavTop />', () => {
       logos: getLogos({}, mockBasePath.serverBasePath),
       shouldShrinkNavigation: false,
       visibleUseCases: [],
+      navGroupsMap: {},
+      navLinks: [],
       currentWorkspace$: new BehaviorSubject<WorkspaceObject | null>(null),
       setCurrentNavGroup: jest.fn(),
     };
   };
 
   it('should render back icon when inside a workspace of all use case', async () => {
-    const props = {
+    const props: CollapsibleNavTopProps = {
       ...getMockedProps(),
       currentWorkspace$: new BehaviorSubject<WorkspaceObject | null>({ id: 'foo', name: 'foo' }),
       visibleUseCases: [
         {
-          id: ALL_USE_CASE_ID,
+          ...DEFAULT_NAV_GROUPS.all,
           title: 'navGroupFoo',
           description: 'navGroupFoo',
-          navLinks: [],
+          navLinks: [
+            {
+              id: 'firstVisibleNavLinkOfAllUseCase',
+            },
+          ],
         },
       ],
+      navGroupsMap: {
+        [DEFAULT_NAV_GROUPS.all.id]: {
+          ...DEFAULT_NAV_GROUPS.all,
+          title: 'navGroupFoo',
+          description: 'navGroupFoo',
+          navLinks: [
+            {
+              id: 'firstVisibleNavLinkOfAllUseCase',
+            },
+          ],
+        },
+      },
+      navLinks: [
+        getMockedNavLink({
+          id: 'firstVisibleNavLinkOfAllUseCase',
+        }),
+      ],
       currentNavGroup: {
         id: 'navGroupFoo',
         title: 'navGroupFoo',
         description: 'navGroupFoo',
         navLinks: [],
       },
-      firstVisibleNavLinkOfAllUseCase: getMockedNavLink({
-        id: 'firstVisibleNavLinkOfAllUseCase',
-      }),
     };
-    const { findByTestId, findByText, getByTestId } = render(<CollapsibleNavTop {...props} />);
-    await findByTestId('collapsibleNavBackButton');
-    await findByText('Back');
-    fireEvent.click(getByTestId('collapsibleNavBackButton'));
+    const { findByTestId, getByTestId } = render(<CollapsibleNavTop {...props} />);
+    await findByTestId(`collapsibleNavIcon-${DEFAULT_NAV_GROUPS.all.icon}`);
+    fireEvent.click(getByTestId(`collapsibleNavIcon-${DEFAULT_NAV_GROUPS.all.icon}`));
     expect(props.navigateToApp).toBeCalledWith('firstVisibleNavLinkOfAllUseCase');
     expect(props.setCurrentNavGroup).toBeCalledWith(ALL_USE_CASE_ID);
   });
 
   it('should render home icon when not in a workspace', async () => {
-    const { findByTestId } = render(<CollapsibleNavTop {...getMockedProps()} />);
+    const props = getMockedProps();
+    const { findByTestId, getByTestId } = render(<CollapsibleNavTop {...props} />);
     await findByTestId('collapsibleNavHome');
+    fireEvent.click(getByTestId('collapsibleNavHome'));
+    expect(props.navigateToApp).toBeCalledWith('home');
   });
 
   it('should render expand icon when collapsed', async () => {
@@ -79,4 +101,18 @@ describe('<CollapsibleNavTop />', () => {
     );
     await findByTestId('collapsibleNavShrinkButton');
   });
+
+  it('should render successfully without error when visibleUseCases is empty but inside a workspace', async () => {
+    expect(() =>
+      render(
+        <CollapsibleNavTop
+          {...getMockedProps()}
+          currentWorkspace$={
+            new BehaviorSubject<WorkspaceObject | null>({ id: 'foo', name: 'bar' })
+          }
+          shouldShrinkNavigation
+        />
+      )
+    ).not.toThrow();
+  });
 });
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
index 067fb2ffd2e1..39e985d870ef 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Logos, WorkspacesStart } from 'opensearch-dashboards/public';
 import {
@@ -12,19 +12,21 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiPanel,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
 import { InternalApplicationStart } from 'src/core/public/application';
-import { i18n } from '@osd/i18n';
 import { createEuiListItem } from './nav_link';
 import { ChromeNavGroupServiceStartContract, NavGroupItemInMap } from '../../nav_group';
 import { ChromeNavLink } from '../../nav_links';
 import { ALL_USE_CASE_ID } from '../../../../../core/utils';
+import { fulfillRegistrationLinksToChromeNavLinks } from '../../utils';
+import './collapsible_nav_group_enabled_top.scss';
 
 export interface CollapsibleNavTopProps {
   homeLink?: ChromeNavLink;
-  firstVisibleNavLinkOfAllUseCase?: ChromeNavLink;
+  navGroupsMap: Record<string, NavGroupItemInMap>;
   currentNavGroup?: NavGroupItemInMap;
   navigateToApp: InternalApplicationStart['navigateToApp'];
   logos: Logos;
@@ -33,6 +35,7 @@ export interface CollapsibleNavTopProps {
   visibleUseCases: NavGroupItemInMap[];
   currentWorkspace$: WorkspacesStart['currentWorkspace$'];
   setCurrentNavGroup: ChromeNavGroupServiceStartContract['setCurrentNavGroup'];
+  navLinks: ChromeNavLink[];
 }
 
 export const CollapsibleNavTop = ({
@@ -45,10 +48,20 @@ export const CollapsibleNavTop = ({
   currentWorkspace$,
   setCurrentNavGroup,
   homeLink,
-  firstVisibleNavLinkOfAllUseCase,
+  navGroupsMap,
+  navLinks,
 }: CollapsibleNavTopProps) => {
   const currentWorkspace = useObservable(currentWorkspace$);
 
+  const firstVisibleNavLinkInFirstVisibleUseCase = useMemo(
+    () =>
+      fulfillRegistrationLinksToChromeNavLinks(
+        navGroupsMap[visibleUseCases[0]?.id]?.navLinks || [],
+        navLinks
+      )[0],
+    [navGroupsMap, navLinks, visibleUseCases]
+  );
+
   /**
    * We can ensure that left nav is inside second level once all the following conditions are met:
    * 1. Inside a workspace
@@ -57,9 +70,15 @@ export const CollapsibleNavTop = ({
    */
   const isInsideSecondLevelOfAllWorkspace =
     !!currentWorkspace &&
-    visibleUseCases[0].id === ALL_USE_CASE_ID &&
+    visibleUseCases[0]?.id === ALL_USE_CASE_ID &&
     currentNavGroup?.id !== ALL_USE_CASE_ID;
 
+  const homeIcon = logos.Mark.url;
+  const icon =
+    !!currentWorkspace && visibleUseCases.length === 1
+      ? visibleUseCases[0].icon || homeIcon
+      : homeIcon;
+
   const shouldShowBackButton = !shouldShrinkNavigation && isInsideSecondLevelOfAllWorkspace;
   const shouldShowHomeLink = !shouldShrinkNavigation && !shouldShowBackButton;
 
@@ -74,39 +93,47 @@ export const CollapsibleNavTop = ({
       return {
         'data-test-subj': propsForHomeIcon['data-test-subj'],
         onClick: propsForHomeIcon.onClick,
-        href: propsForHomeIcon.href,
       };
     }
 
     return {};
   }, [homeLink, navigateToApp]);
 
+  const onIconClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      if (shouldShowBackButton || visibleUseCases.length === 1) {
+        if (firstVisibleNavLinkInFirstVisibleUseCase) {
+          navigateToApp(firstVisibleNavLinkInFirstVisibleUseCase.id);
+        }
+
+        setCurrentNavGroup(visibleUseCases[0].id);
+      } else if (shouldShowHomeLink) {
+        homeLinkProps.onClick?.(e);
+      }
+    },
+    [
+      homeLinkProps,
+      shouldShowBackButton,
+      firstVisibleNavLinkInFirstVisibleUseCase,
+      navigateToApp,
+      setCurrentNavGroup,
+      visibleUseCases,
+      shouldShowHomeLink,
+    ]
+  );
+
   return (
-    <div>
+    <EuiPanel hasBorder={false} hasShadow={false}>
       <EuiFlexGroup responsive={false} alignItems="center" justifyContent="spaceBetween">
-        {shouldShowHomeLink ? (
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty size="l" {...homeLinkProps}>
-              <EuiIcon type={logos.Mark.url} size="l" />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        ) : null}
-        {shouldShowBackButton ? (
+        {!shouldShrinkNavigation ? (
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              size="l"
-              onClick={() => {
-                if (firstVisibleNavLinkOfAllUseCase) {
-                  navigateToApp(firstVisibleNavLinkOfAllUseCase.id);
-                }
-                setCurrentNavGroup(ALL_USE_CASE_ID);
-              }}
-              data-test-subj="collapsibleNavBackButton"
-            >
-              <EuiIcon type="arrowLeft" />
-              {i18n.translate('core.ui.primaryNav.backButtonLabel', {
-                defaultMessage: 'Back',
-              })}
+            <EuiButtonEmpty flush="both" {...homeLinkProps} onClick={onIconClick}>
+              <EuiIcon
+                type={icon}
+                size="l"
+                className="leftNavTopIcon"
+                data-test-subj={`collapsibleNavIcon-${icon}`}
+              />
             </EuiButtonEmpty>
           </EuiFlexItem>
         ) : null}
@@ -114,7 +141,7 @@ export const CollapsibleNavTop = ({
           <EuiButtonIcon
             onClick={onClickShrink}
             iconType={shouldShrinkNavigation ? 'menu' : 'menuLeft'}
-            color="text"
+            color="subdued"
             display={shouldShrinkNavigation ? 'empty' : 'base'}
             aria-label="shrink-button"
             data-test-subj="collapsibleNavShrinkButton"
@@ -124,13 +151,9 @@ export const CollapsibleNavTop = ({
       {currentNavGroup?.title && (
         <>
           <EuiSpacer />
-          <EuiText>
-            <div className="nav-link-item" style={{ fontWeight: 'normal' }}>
-              {currentNavGroup?.title}
-            </div>
-          </EuiText>
+          <EuiText>{currentNavGroup?.title}</EuiText>
         </>
       )}
-    </div>
+    </EuiPanel>
   );
 };
diff --git a/src/plugins/content_management/public/mocks.ts b/src/plugins/content_management/public/mocks.ts
index 79581c8e03dd..3568d5503fea 100644
--- a/src/plugins/content_management/public/mocks.ts
+++ b/src/plugins/content_management/public/mocks.ts
@@ -5,7 +5,7 @@
 
 import { ContentManagementPluginSetup, ContentManagementPluginStart } from './types';
 
-const createStartContract = (): ContentManagementPluginStart => {
+const createStartContract = (): jest.Mocked<ContentManagementPluginStart> => {
   return {
     registerContentProvider: jest.fn(),
     renderPage: jest.fn(),
@@ -13,7 +13,7 @@ const createStartContract = (): ContentManagementPluginStart => {
   };
 };
 
-const createSetupContract = (): ContentManagementPluginSetup => {
+const createSetupContract = (): jest.Mocked<ContentManagementPluginSetup> => {
   return {
     registerPage: jest.fn(),
   };
diff --git a/src/plugins/workspace/public/components/home_get_start_card/setup_get_start_card.scss b/src/plugins/workspace/public/components/home_get_start_card/setup_get_start_card.scss
new file mode 100644
index 000000000000..29bfd1c4b480
--- /dev/null
+++ b/src/plugins/workspace/public/components/home_get_start_card/setup_get_start_card.scss
@@ -0,0 +1,3 @@
+.homeGettingStartedWorkspaceCardsIcon {
+  color: $euiColorMediumShade;
+}
diff --git a/src/plugins/workspace/public/components/home_get_start_card/setup_get_start_card.tsx b/src/plugins/workspace/public/components/home_get_start_card/setup_get_start_card.tsx
index 76cda13a39a7..917338f05cef 100644
--- a/src/plugins/workspace/public/components/home_get_start_card/setup_get_start_card.tsx
+++ b/src/plugins/workspace/public/components/home_get_start_card/setup_get_start_card.tsx
@@ -14,6 +14,7 @@ import {
 import { WorkspaceUseCase } from '../../types';
 import { getFirstUseCaseOfFeatureConfigs, getUseCaseUrl } from '../../utils';
 import { UseCaseCardTitle } from './use_case_card_title';
+import './setup_get_start_card.scss';
 
 const createContentCard = (useCase: WorkspaceUseCase, core: CoreStart) => {
   const { workspaces, application, http } = core;
@@ -66,7 +67,12 @@ export const registerGetStartedCardToNewHome = (
         order: (index + 1) * 1000,
         description: useCase.description,
         ...content,
-        getIcon: () => React.createElement(EuiIcon, { size: 'xl', type: 'logoOpenSearch' }),
+        getIcon: () =>
+          React.createElement(EuiIcon, {
+            size: 'xl',
+            type: useCase.icon || 'logoOpenSearch',
+            className: 'homeGettingStartedWorkspaceCardsIcon',
+          }),
         cardProps: {
           layout: 'horizontal',
         },
diff --git a/src/plugins/workspace/public/components/use_case_overview/setup_overview.scss b/src/plugins/workspace/public/components/use_case_overview/setup_overview.scss
new file mode 100644
index 000000000000..607b5eef6863
--- /dev/null
+++ b/src/plugins/workspace/public/components/use_case_overview/setup_overview.scss
@@ -0,0 +1,3 @@
+.analyticsGettingStartedWorkspaceCardsIcon {
+  color: $euiColorMediumShade;
+}
diff --git a/src/plugins/workspace/public/components/use_case_overview/setup_overview.tsx b/src/plugins/workspace/public/components/use_case_overview/setup_overview.tsx
index 4b801bf0880d..3d4436895b9c 100644
--- a/src/plugins/workspace/public/components/use_case_overview/setup_overview.tsx
+++ b/src/plugins/workspace/public/components/use_case_overview/setup_overview.tsx
@@ -19,6 +19,7 @@ import {
 import { getStartedCards } from './get_started_cards';
 import { DEFAULT_NAV_GROUPS } from '../../../../../core/public';
 import { Content } from '../../../../../plugins/content_management/public';
+import './setup_overview.scss';
 
 const recentlyViewSectionRender = (contents: Content[]) => {
   return (
@@ -133,7 +134,11 @@ export const registerAnalyticsAllOverviewContent = (
         id: card.id,
         kind: 'card',
         getIcon: () =>
-          React.createElement(EuiIcon, { size: 'xl', type: card.icon || 'wsSelector' }),
+          React.createElement(EuiIcon, {
+            size: 'xl',
+            type: card.icon || 'wsSelector',
+            className: 'analyticsGettingStartedWorkspaceCardsIcon',
+          }),
         order: card.order || index,
         description: card.description,
         title: card.title,
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx
index 4db2d9365ab9..9ce350af85e2 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx
@@ -38,6 +38,7 @@ describe('WorkspaceFormSummaryPanel', () => {
       title: 'Use Case 1',
       description: 'This is Use Case 1',
       features: [],
+      icon: 'wsAnalytics',
     },
     {
       id: 'useCase2',
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
index a16cad76ede7..e37bf5097021 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
@@ -15,7 +15,7 @@ import {
   EuiLink,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { WorkspaceFormDataState } from '../forms';
+import { WorkspaceFormDataState } from '../workspace_form';
 import { WorkspaceUseCase } from '../../types';
 import { RightSidebarScrollField, RIGHT_SIDEBAR_SCROLL_KEY } from './utils';
 
@@ -33,7 +33,7 @@ const SCROLL_FIELDS = {
     }
   ),
   [RightSidebarScrollField.Color]: i18n.translate('workspace.form.summary.panel.color.title', {
-    defaultMessage: 'Accent color',
+    defaultMessage: 'Workspace icon',
   }),
   [RightSidebarScrollField.DataSource]: i18n.translate(
     'workspace.form.summary.panel.dataSources.title',
@@ -164,9 +164,11 @@ export const WorkspaceFormSummaryPanel = ({
       <FieldSummaryItem field={RightSidebarScrollField.Color}>
         {formData.color && (
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <EuiIcon type="swatchInput" color={formData.color} />
-            </EuiFlexItem>
+            {useCase?.icon && (
+              <EuiFlexItem grow={false}>
+                <EuiIcon type={useCase.icon} color={formData.color} />
+              </EuiFlexItem>
+            )}
             <EuiFlexItem>
               <EuiText size="xs">{formData.color}</EuiText>
             </EuiFlexItem>
diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx
index 606052f5c92c..39acffd0c42d 100644
--- a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx
@@ -99,7 +99,7 @@ describe('<WorkspaceMenu />', () => {
     });
     render(<WorkspaceMenuCreatorComponent />);
 
-    fireEvent.click(screen.getByTestId('current-workspace-button'));
+    fireEvent.click(screen.getByTestId('workspace-select-button'));
     expect(screen.getByTestId('workspace-menu-current-workspace-name')).toBeInTheDocument();
     expect(screen.getByTestId('workspace-menu-current-use-case')).toBeInTheDocument();
     expect(screen.getByText('Observability')).toBeInTheDocument();
@@ -164,7 +164,7 @@ describe('<WorkspaceMenu />', () => {
     const navigateToWorkspaceDetail = jest.spyOn(workspaceUtils, 'navigateToWorkspaceDetail');
     render(<WorkspaceMenuCreatorComponent />);
 
-    fireEvent.click(screen.getByTestId('current-workspace-button'));
+    fireEvent.click(screen.getByTestId('workspace-select-button'));
     const button = screen.getByText(/Manage workspace/i);
     fireEvent.click(button);
     expect(navigateToWorkspaceDetail).toBeCalled();
diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
index d2ce42ed6097..d70b6c4419a0 100644
--- a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
+++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
@@ -9,14 +9,14 @@ import { useObservable } from 'react-use';
 import {
   EuiText,
   EuiPanel,
-  EuiAvatar,
   EuiPopover,
   EuiToolTip,
   EuiFlexItem,
   EuiFlexGroup,
-  EuiSmallButtonIcon,
   EuiSmallButtonEmpty,
   EuiSmallButton,
+  EuiButtonIcon,
+  EuiIcon,
 } from '@elastic/eui';
 import { BehaviorSubject } from 'rxjs';
 import { WORKSPACE_CREATE_APP_ID, WORKSPACE_LIST_APP_ID } from '../../../common/constants';
@@ -79,23 +79,9 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
     setPopover(false);
   };
 
-  const currentWorkspaceButton = currentWorkspace ? (
-    <EuiSmallButtonEmpty
-      onClick={openPopover}
-      data-test-subj="current-workspace-button"
-      flush="both"
-    >
-      <EuiAvatar
-        size="s"
-        type="space"
-        name={currentWorkspace.name}
-        color={getValidWorkspaceColor(currentWorkspace.color)}
-        initialsLength={2}
-      />
-    </EuiSmallButtonEmpty>
-  ) : (
-    <EuiSmallButtonIcon
-      iconType="spacesApp"
+  const currentWorkspaceButton = (
+    <EuiButtonIcon
+      iconType="wsSelector"
       onClick={openPopover}
       aria-label="workspace-select-button"
       data-test-subj="workspace-select-button"
@@ -122,12 +108,10 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
           {currentWorkspace ? (
             <>
               <EuiFlexItem grow={false}>
-                <EuiAvatar
-                  size="m"
-                  type="space"
-                  name={currentWorkspaceName}
-                  color={getValidWorkspaceColor(currentWorkspace?.color)}
-                  initialsLength={2}
+                <EuiIcon
+                  size="l"
+                  type={getUseCase(currentWorkspace)?.icon || 'wsSelector'}
+                  color={getValidWorkspaceColor(currentWorkspace.color)}
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
@@ -159,7 +143,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
           ) : (
             <>
               <EuiFlexItem grow={false}>
-                <EuiAvatar size="m" color="plain" name="spacesApp" iconType="spacesApp" />
+                <EuiIcon size="l" type="wsSelector" />
               </EuiFlexItem>
               <EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
                 {currentWorkspaceName}
@@ -179,7 +163,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
           )}
         </EuiFlexGroup>
       </EuiPanel>
-      <EuiPanel paddingSize="s" hasBorder={false} color="transparent">
+      <EuiPanel paddingSize="none" hasBorder={false} color="transparent">
         <WorkspacePickerContent
           coreStart={coreStart}
           registeredUseCases$={registeredUseCases$}
diff --git a/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx b/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
index 4dace89ea119..8aa9e8e97823 100644
--- a/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
+++ b/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
@@ -6,7 +6,7 @@
 import { i18n } from '@osd/i18n';
 import React, { useMemo } from 'react';
 import { useObservable } from 'react-use';
-import { EuiTitle, EuiAvatar, EuiListGroup, EuiListGroupItem } from '@elastic/eui';
+import { EuiTitle, EuiListGroup, EuiListGroupItem, EuiIcon } from '@elastic/eui';
 import { BehaviorSubject } from 'rxjs';
 import { MAX_WORKSPACE_PICKER_NUM } from '../../../common/constants';
 import { CoreStart, WorkspaceObject } from '../../../../../core/public';
@@ -71,12 +71,10 @@ export const WorkspacePickerContent = ({
           size="s"
           data-test-subj={`workspace-menu-item-${itemType}-${workspace.id}`}
           icon={
-            <EuiAvatar
+            <EuiIcon
               size="s"
-              type="space"
-              name={workspace.name}
+              type={useCase?.icon || 'wsSelector'}
               color={getValidWorkspaceColor(workspace.color)}
-              initialsLength={2}
             />
           }
           label={workspace.name}
diff --git a/src/plugins/workspace/public/plugin.test.ts b/src/plugins/workspace/public/plugin.test.ts
index cf0f67f89829..0bbf636f6397 100644
--- a/src/plugins/workspace/public/plugin.test.ts
+++ b/src/plugins/workspace/public/plugin.test.ts
@@ -19,16 +19,18 @@ import { savedObjectsManagementPluginMock } from '../../saved_objects_management
 import { managementPluginMock } from '../../management/public/mocks';
 import { UseCaseService } from './services/use_case_service';
 import { workspaceClientMock, WorkspaceClientMock } from './workspace_client.mock';
-import { WorkspacePlugin, WorkspacePluginStartDeps } from './plugin';
+import { WorkspacePlugin } from './plugin';
 import { contentManagementPluginMocks } from '../../content_management/public';
+import { navigationPluginMock } from '../../navigation/public/mocks';
 
 // Expect 6 app registrations: create, fatal error, detail, initial, navigation, and list apps.
 const registrationAppNumber = 6;
 
 describe('Workspace plugin', () => {
-  const mockDependencies: WorkspacePluginStartDeps = {
+  const getMockDependencies = () => ({
     contentManagement: contentManagementPluginMocks.createStartContract(),
-  };
+    navigation: navigationPluginMock.createStartContract(),
+  });
   const getSetupMock = () => coreMock.createSetup();
 
   beforeEach(() => {
@@ -54,7 +56,7 @@ describe('Workspace plugin', () => {
     const setupMock = getSetupMock();
     const coreStart = coreMock.createStart();
     await workspacePlugin.setup(setupMock, {});
-    workspacePlugin.start(coreStart, mockDependencies);
+    workspacePlugin.start(coreStart, getMockDependencies());
     coreStart.workspaces.currentWorkspaceId$.next('foo');
     expect(coreStart.savedObjects.client.setCurrentWorkspace).toHaveBeenCalledWith('foo');
     expect(setupMock.application.register).toBeCalledTimes(registrationAppNumber);
@@ -230,7 +232,7 @@ describe('Workspace plugin', () => {
     await workspacePlugin.setup(setupMock, {});
     expect(collapsibleNavHeaderImplementation()).toEqual(null);
     const startMock = coreMock.createStart();
-    await workspacePlugin.start(startMock, mockDependencies);
+    await workspacePlugin.start(startMock, getMockDependencies());
     expect(collapsibleNavHeaderImplementation()).not.toEqual(null);
   });
 
@@ -330,7 +332,7 @@ describe('Workspace plugin', () => {
     const breadcrumbs = new BehaviorSubject<ChromeBreadcrumb[]>([{ text: 'dashboards' }]);
     startMock.chrome.getBreadcrumbs$.mockReturnValue(breadcrumbs);
     const workspacePlugin = new WorkspacePlugin();
-    workspacePlugin.start(startMock, mockDependencies);
+    workspacePlugin.start(startMock, getMockDependencies());
     expect(startMock.chrome.setBreadcrumbs).toBeCalledWith(
       expect.arrayContaining([
         expect.objectContaining({
@@ -356,7 +358,7 @@ describe('Workspace plugin', () => {
     ]);
     startMock.chrome.getBreadcrumbs$.mockReturnValue(breadcrumbs);
     const workspacePlugin = new WorkspacePlugin();
-    workspacePlugin.start(startMock, mockDependencies);
+    workspacePlugin.start(startMock, getMockDependencies());
     expect(startMock.chrome.setBreadcrumbs).not.toHaveBeenCalled();
   });
 
@@ -364,6 +366,7 @@ describe('Workspace plugin', () => {
     const startMock = coreMock.createStart();
     startMock.chrome.navGroup.getNavGroupEnabled.mockReturnValue(true);
     const workspacePlugin = new WorkspacePlugin();
+    const mockDependencies = getMockDependencies();
     workspacePlugin.start(startMock, mockDependencies);
     expect(mockDependencies.contentManagement.registerContentProvider).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -385,9 +388,13 @@ describe('Workspace plugin', () => {
     jest.spyOn(navGroupUpdater$, 'next');
 
     expect(navGroupUpdater$.next).not.toHaveBeenCalled();
-    workspacePlugin.start(coreStart, mockDependencies);
+    workspacePlugin.start(coreStart, getMockDependencies());
+    coreStart.workspaces.currentWorkspace$.next({
+      id: 'foo',
+      name: 'foo',
+    });
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(navGroupUpdater$.next).toHaveBeenCalled();
     });
   });
@@ -396,7 +403,7 @@ describe('Workspace plugin', () => {
     const coreStart = coreMock.createStart();
     coreStart.chrome.navGroup.getNavGroupEnabled.mockReturnValue(true);
     const workspacePlugin = new WorkspacePlugin();
-    workspacePlugin.start(coreStart, mockDependencies);
+    workspacePlugin.start(coreStart, getMockDependencies());
 
     expect(coreStart.chrome.navControls.registerLeftBottom).toBeCalledTimes(1);
   });
@@ -427,7 +434,7 @@ describe('Workspace plugin', () => {
 
     const appUpdater$ = setupMock.application.registerAppUpdater.mock.calls[0][0];
 
-    workspacePlugin.start(coreStart, mockDependencies);
+    workspacePlugin.start(coreStart, getMockDependencies());
 
     const appUpdater = await appUpdater$.pipe(first()).toPromise();
 
@@ -448,7 +455,7 @@ describe('Workspace plugin', () => {
 
     const navGroupUpdater$ = setupMock.chrome.navGroup.registerNavGroupUpdater.mock.calls[0][0];
 
-    workspacePlugin.start(coreStart, mockDependencies);
+    workspacePlugin.start(coreStart, getMockDependencies());
 
     const navGroupUpdater = await navGroupUpdater$.pipe(first()).toPromise();
 
@@ -458,6 +465,49 @@ describe('Workspace plugin', () => {
     });
   });
 
+  it('#start should only register get started cards of use cases to new home page', async () => {
+    const workspacePlugin = new WorkspacePlugin();
+    const setupMock = getSetupMock();
+    const coreStart = coreMock.createStart();
+    await workspacePlugin.setup(setupMock, {});
+    const registeredUseCases$ = new BehaviorSubject([
+      {
+        id: 'foo',
+        title: 'Foo',
+        systematic: true,
+        description: '',
+        features: [],
+      },
+      {
+        id: 'bar',
+        title: 'Bar',
+        description: '',
+        features: [],
+      },
+    ]);
+    jest.spyOn(UseCaseService.prototype, 'start').mockImplementationOnce(() => ({
+      getRegisteredUseCases$: jest.fn(() => registeredUseCases$),
+    }));
+
+    coreStart.chrome.navGroup.getNavGroupEnabled.mockReturnValue(true);
+
+    const mockDependencies = getMockDependencies();
+
+    workspacePlugin.start(coreStart, mockDependencies);
+    await waitFor(() => {
+      expect(mockDependencies.contentManagement.registerContentProvider).toBeCalledWith(
+        expect.objectContaining({
+          id: `home_get_start_bar`,
+        })
+      );
+      expect(mockDependencies.contentManagement.registerContentProvider).not.toBeCalledWith(
+        expect.objectContaining({
+          id: `home_get_start_foo`,
+        })
+      );
+    });
+  });
+
   it('#stop should call unregisterNavGroupUpdater', async () => {
     const workspacePlugin = new WorkspacePlugin();
     const setupMock = getSetupMock();
@@ -477,7 +527,11 @@ describe('Workspace plugin', () => {
       {
         id: 'foo',
         title: 'Foo',
-        features: ['system-feature'],
+        features: [
+          {
+            id: 'system-feature',
+          },
+        ],
         systematic: true,
         description: '',
       },
@@ -500,7 +554,7 @@ describe('Workspace plugin', () => {
     const appUpdaterChangeMock = jest.fn();
     appUpdater$.subscribe(appUpdaterChangeMock);
 
-    workspacePlugin.start(coreStart, mockDependencies);
+    workspacePlugin.start(coreStart, getMockDependencies());
 
     // Wait for filterNav been executed
     await new Promise(setImmediate);
diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts
index 7ccf43a251ee..d4026560aae5 100644
--- a/src/plugins/workspace/public/plugin.ts
+++ b/src/plugins/workspace/public/plugin.ts
@@ -539,6 +539,7 @@ export class WorkspacePlugin
         return React.createElement(EuiPanel, {
           hasShadow: false,
           hasBorder: false,
+          paddingSize: 's',
           children: [
             React.createElement(WorkspacePickerContent, {
               key: 'workspacePickerContent',
diff --git a/src/plugins/workspace/public/types.ts b/src/plugins/workspace/public/types.ts
index bec84221e2f1..53f2be4dfb36 100644
--- a/src/plugins/workspace/public/types.ts
+++ b/src/plugins/workspace/public/types.ts
@@ -29,6 +29,7 @@ export interface WorkspaceUseCase {
   features: WorkspaceUseCaseFeature[];
   systematic?: boolean;
   order?: number;
+  icon?: string;
 }
 
 export interface DataSourceAttributesWithWorkspaces extends Omit<DataSourceAttributes, 'endpoint'> {
diff --git a/src/plugins/workspace/public/utils.test.ts b/src/plugins/workspace/public/utils.test.ts
index f58273822282..5f6b28ee59e1 100644
--- a/src/plugins/workspace/public/utils.test.ts
+++ b/src/plugins/workspace/public/utils.test.ts
@@ -466,6 +466,7 @@ describe('workspace utils: convertNavGroupToWorkspaceUseCase', () => {
         title: 'Foo',
         description: 'Foo description',
         navLinks: [{ id: 'bar', title: 'Bar' }],
+        icon: 'wsAnalytics',
       })
     ).toEqual({
       id: 'foo',
@@ -473,6 +474,7 @@ describe('workspace utils: convertNavGroupToWorkspaceUseCase', () => {
       description: 'Foo description',
       features: [{ id: 'bar', title: 'Bar' }],
       systematic: false,
+      icon: 'wsAnalytics',
     });
 
     expect(
diff --git a/src/plugins/workspace/public/utils.ts b/src/plugins/workspace/public/utils.ts
index 559e81c9408b..1ed0bab42cda 100644
--- a/src/plugins/workspace/public/utils.ts
+++ b/src/plugins/workspace/public/utils.ts
@@ -261,6 +261,7 @@ export const convertNavGroupToWorkspaceUseCase = ({
   navLinks,
   type,
   order,
+  icon,
 }: NavGroupItemInMap): WorkspaceUseCase => ({
   id,
   title,
@@ -268,6 +269,7 @@ export const convertNavGroupToWorkspaceUseCase = ({
   features: navLinks.map((item) => ({ id: item.id, title: item.title })),
   systematic: type === NavGroupType.SYSTEM || id === ALL_USE_CASE_ID,
   order,
+  icon,
 });
 
 const compareFeatures = (