diff --git a/changelogs/fragments/8214.yml b/changelogs/fragments/8214.yml
new file mode 100644
index 000000000000..ce9d1ee6ca32
--- /dev/null
+++ b/changelogs/fragments/8214.yml
@@ -0,0 +1,2 @@
+feat:
+- Add last updated time and cache refresh button to Discover Advanced Dataset Selector ([#8214](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8214))
\ No newline at end of file
diff --git a/changelogs/fragments/8382.yml b/changelogs/fragments/8382.yml
new file mode 100644
index 000000000000..2b0dd5d85d09
--- /dev/null
+++ b/changelogs/fragments/8382.yml
@@ -0,0 +1,2 @@
+feat:
+- Refactor collaborators panel at workspace create ([#8382](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8382))
\ 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 c1c9d518a219..4387eb6c1769 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
@@ -8,7 +8,6 @@ import {
   EuiFlyout,
   EuiPanel,
   EuiHorizontalRule,
-  EuiSpacer,
   EuiHideFor,
   EuiFlyoutProps,
   EuiShowFor,
@@ -79,6 +78,7 @@ export function CollapsibleNavGroupEnabled({
   id,
   isNavOpen,
   storage = window.localStorage,
+  currentWorkspace$,
   closeNav,
   navigateToApp,
   navigateToUrl,
@@ -94,7 +94,6 @@ export function CollapsibleNavGroupEnabled({
   const appId = useObservable(observables.appId$, '');
   const navGroupsMap = useObservable(observables.navGroupsMap$, {});
   const currentNavGroup = useObservable(observables.currentNavGroup$, undefined);
-
   const visibleUseCases = useMemo(() => getVisibleUseCases(navGroupsMap), [navGroupsMap]);
 
   const currentNavGroupId = useMemo(() => {
@@ -115,9 +114,6 @@ export function CollapsibleNavGroupEnabled({
     ? !currentNavGroupId
     : currentNavGroupId === ALL_USE_CASE_ID;
 
-  const shouldShowCollapsedNavHeaderContent =
-    isNavOpen && !!collapsibleNavHeaderRender && !currentNavGroupId;
-
   const navLinksForRender: ChromeNavLink[] = useMemo(() => {
     const getSystemNavGroups = () => {
       const result: ChromeNavLink[] = [];
@@ -300,6 +296,7 @@ export function CollapsibleNavGroupEnabled({
             <CollapsibleNavTop
               homeLink={homeLink}
               navGroupsMap={navGroupsMap}
+              collapsibleNavHeaderRender={collapsibleNavHeaderRender}
               navLinks={navLinks}
               navigateToApp={navigateToApp}
               logos={logos}
@@ -308,7 +305,7 @@ export function CollapsibleNavGroupEnabled({
               shouldShrinkNavigation={!isNavOpen}
               onClickShrink={closeNav}
               visibleUseCases={visibleUseCases}
-              currentWorkspace$={observables.currentWorkspace$}
+              currentWorkspace$={currentWorkspace$}
             />
           </EuiPanel>
         )}
@@ -320,12 +317,6 @@ export function CollapsibleNavGroupEnabled({
             hasShadow={false}
             className="eui-yScroll flex-1-container"
           >
-            {shouldShowCollapsedNavHeaderContent && collapsibleNavHeaderRender ? (
-              <>
-                {collapsibleNavHeaderRender()}
-                <EuiSpacer />
-              </>
-            ) : null}
             <NavGroups
               navLinks={navLinksForRender}
               navigateToApp={navigateToApp}
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 3d1535992a3f..c40cbf33f66d 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
@@ -11,10 +11,10 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiText,
   EuiIcon,
   EuiPanel,
   EuiSpacer,
-  EuiText,
 } from '@elastic/eui';
 import { InternalApplicationStart } from 'src/core/public/application';
 import { createEuiListItem } from './nav_link';
@@ -25,6 +25,7 @@ import { fulfillRegistrationLinksToChromeNavLinks } from '../../utils';
 import './collapsible_nav_group_enabled_top.scss';
 
 export interface CollapsibleNavTopProps {
+  collapsibleNavHeaderRender?: () => JSX.Element | null;
   homeLink?: ChromeNavLink;
   navGroupsMap: Record<string, NavGroupItemInMap>;
   currentNavGroup?: NavGroupItemInMap;
@@ -39,6 +40,7 @@ export interface CollapsibleNavTopProps {
 }
 
 export const CollapsibleNavTop = ({
+  collapsibleNavHeaderRender,
   currentNavGroup,
   navigateToApp,
   logos,
@@ -52,7 +54,6 @@ export const CollapsibleNavTop = ({
   navLinks,
 }: CollapsibleNavTopProps) => {
   const currentWorkspace = useObservable(currentWorkspace$);
-
   const firstVisibleNavLinkInFirstVisibleUseCase = useMemo(
     () =>
       fulfillRegistrationLinksToChromeNavLinks(
@@ -148,12 +149,19 @@ export const CollapsibleNavTop = ({
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      {currentNavGroup?.title && (
-        <>
-          <EuiSpacer />
-          <EuiText>{currentNavGroup?.title}</EuiText>
-        </>
-      )}
+      {
+        // Nav groups with type are system(global) nav group and we should show title for those nav groups
+        (currentNavGroup?.type || collapsibleNavHeaderRender) && (
+          <>
+            <EuiSpacer />
+            {currentNavGroup?.type ? (
+              <EuiText>{currentNavGroup?.title}</EuiText>
+            ) : (
+              collapsibleNavHeaderRender?.()
+            )}
+          </>
+        )
+      }
     </EuiPanel>
   );
 };
diff --git a/src/plugins/data/common/storage/storage.ts b/src/plugins/data/common/storage/storage.ts
index 8ec5f6a13b8d..752e0b29c92e 100644
--- a/src/plugins/data/common/storage/storage.ts
+++ b/src/plugins/data/common/storage/storage.ts
@@ -61,6 +61,10 @@ export class DataStorage {
       if (ourKey != null) ours.push(ourKey);
     });
   }
+
+  clear(): void {
+    this.engine.clear();
+  }
 }
 
 export function createStorage(deps: { engine: IStorageEngine; prefix: string }) {
diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts
index f72fd0ea5b46..02b9eb0759fc 100644
--- a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts
+++ b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts
@@ -23,17 +23,26 @@ describe('DatasetService', () => {
     service = new DatasetService(uiSettings, sessionStorage);
   });
 
-  test('registerType and getType', () => {
-    const mockType = {
-      id: 'test-type',
-      title: 'Test Type',
-      meta: { icon: { type: 'test' } },
-      toDataset: jest.fn(),
-      fetch: jest.fn(),
-      fetchFields: jest.fn(),
-      supportedLanguages: jest.fn(),
-    };
+  const mockResult = {
+    id: 'test-structure',
+    title: 'Test Structure',
+    type: 'test-type',
+    children: [{ id: 'child1', title: 'Child 1', type: 'test-type' }],
+  };
+
+  const mockPath: DataStructure[] = [{ id: 'root', title: 'Root', type: 'root' }];
+
+  const mockType = {
+    id: 'test-type',
+    title: 'Test Type',
+    meta: { icon: { type: 'test' } },
+    toDataset: jest.fn(),
+    fetch: jest.fn().mockResolvedValue(mockResult),
+    fetchFields: jest.fn(),
+    supportedLanguages: jest.fn(),
+  };
 
+  test('registerType and getType', () => {
     service.registerType(mockType);
     expect(service.getType('test-type')).toBe(mockType);
   });
@@ -52,25 +61,9 @@ describe('DatasetService', () => {
   });
 
   test('fetchOptions caches and returns data structures', async () => {
-    const mockType = {
-      id: 'test-type',
-      title: 'Test Type',
-      meta: { icon: { type: 'test' } },
-      toDataset: jest.fn(),
-      fetch: jest.fn().mockResolvedValue({
-        id: 'test-structure',
-        title: 'Test Structure',
-        type: 'test-type',
-        children: [{ id: 'child1', title: 'Child 1', type: 'test-type' }],
-      }),
-      fetchFields: jest.fn(),
-      supportedLanguages: jest.fn(),
-    };
-
     service.registerType(mockType);
 
-    const path: DataStructure[] = [{ id: 'root', title: 'Root', type: 'root' }];
-    const result = await service.fetchOptions(mockDataPluginServices, path, 'test-type');
+    const result = await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
 
     expect(result).toEqual({
       id: 'test-structure',
@@ -79,8 +72,30 @@ describe('DatasetService', () => {
       children: [{ id: 'child1', title: 'Child 1', type: 'test-type' }],
     });
 
-    const cachedResult = await service.fetchOptions(mockDataPluginServices, path, 'test-type');
+    const cachedResult = await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
     expect(cachedResult).toEqual(result);
     expect(mockType.fetch).toHaveBeenCalledTimes(2);
   });
+
+  test('clear cache', async () => {
+    service.registerType(mockType);
+
+    await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
+    expect(sessionStorage.keys().length === 1);
+
+    service.clearCache();
+    expect(sessionStorage.keys().length === 0);
+  });
+
+  test('caching object correctly sets last cache time', async () => {
+    service.registerType(mockType);
+
+    const time = Date.now();
+
+    Date.now = jest.fn(() => time);
+
+    await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
+
+    expect(service.getLastCacheTime()).toEqual(time);
+  });
 });
diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts
index 2f9a0884442f..36faead38308 100644
--- a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts
+++ b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts
@@ -138,6 +138,7 @@ export class DatasetService {
   }
 
   private cacheDataStructure(dataType: string, dataStructure: DataStructure) {
+    this.setLastCacheTime(Date.now());
     const cachedDataStructure: CachedDataStructure = {
       id: dataStructure.id,
       title: dataStructure.title,
@@ -164,6 +165,18 @@ export class DatasetService {
     });
   }
 
+  public clearCache(): void {
+    this.sessionStorage.clear();
+  }
+
+  public getLastCacheTime(): number | undefined {
+    return Number(this.sessionStorage.get('lastCacheTime')) || undefined;
+  }
+
+  private setLastCacheTime(time: number): void {
+    this.sessionStorage.set('lastCacheTime', time);
+  }
+
   private async fetchDefaultDataset(): Promise<Dataset | undefined> {
     const defaultIndexPatternId = this.uiSettings.get('defaultIndex');
     if (!defaultIndexPatternId) {
diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx
index f393884bc599..dbcf7fe5acfc 100644
--- a/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx
@@ -7,6 +7,8 @@ import React, { useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiIcon,
   EuiLink,
   EuiModalBody,
@@ -19,6 +21,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import moment from 'moment';
 import { BaseDataset, DATA_STRUCTURE_META_TYPES, DataStructure } from '../../../common';
 import { QueryStringContract } from '../../query';
 import { IDataPluginServices } from '../../types';
@@ -38,6 +41,7 @@ export const DatasetExplorer = ({
   onNext: (dataset: BaseDataset) => void;
   onCancel: () => void;
 }) => {
+  const uiSettings = services.uiSettings;
   const [explorerDataset, setExplorerDataset] = useState<BaseDataset | undefined>(undefined);
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -68,31 +72,72 @@ export const DatasetExplorer = ({
   return (
     <>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
-          <h1>
-            <FormattedMessage
-              id="data.explorer.datasetSelector.advancedSelector.title.step1"
-              defaultMessage="Step 1: Select data"
-            />
-          </h1>
-          <EuiText>
-            <p>
-              <FormattedMessage
-                id="data.explorer.datasetSelector.advancedSelector.description"
-                defaultMessage="Select from those available to you. "
-              />
-              <EuiLink
-                href={`${services.http.basePath.get()}/app/management/opensearch-dashboards/dataSources`}
-                target="_blank"
-              >
+        <EuiFlexGroup alignItems="center" justifyContent="flexEnd" gutterSize="s">
+          <EuiFlexItem grow={true}>
+            <EuiModalHeaderTitle>
+              <h1>
                 <FormattedMessage
-                  id="data.explorer.datasetSelector.advancedSelector.dataSourceManagement.title"
-                  defaultMessage="Manage data sources"
+                  id="data.explorer.datasetSelector.advancedSelector.title.step1"
+                  defaultMessage="Step 1: Select data"
                 />
-              </EuiLink>
-            </p>
-          </EuiText>
-        </EuiModalHeaderTitle>
+              </h1>
+              <EuiText>
+                <p>
+                  <FormattedMessage
+                    id="data.explorer.datasetSelector.advancedSelector.description"
+                    defaultMessage="Select from those available to you. "
+                  />
+                  <EuiLink
+                    href={`${services.http.basePath.get()}/app/management/opensearch-dashboards/dataSources`}
+                    target="_blank"
+                  >
+                    <FormattedMessage
+                      id="data.explorer.datasetSelector.advancedSelector.dataSourceManagement.title"
+                      defaultMessage="Manage data sources"
+                    />
+                  </EuiLink>
+                </p>
+              </EuiText>
+            </EuiModalHeaderTitle>
+          </EuiFlexItem>
+          {queryString.getDatasetService().getLastCacheTime() && (
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize="xs">
+                <EuiFlexItem grow={false}>
+                  <EuiText size="s">
+                    <FormattedMessage
+                      id="data.explorer.datasetSelector.advancedSelector.lastUpdatedTime"
+                      defaultMessage={'Last updated at: {timestamp}. '}
+                      values={{
+                        timestamp: moment(queryString.getDatasetService().getLastCacheTime())
+                          .format(uiSettings.get('dateFormat'))
+                          .toString(),
+                      }}
+                    />
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    onClick={() => {
+                      queryString.getDatasetService().clearCache();
+                      onCancel();
+                    }}
+                    size="xs"
+                    iconSide="left"
+                    iconType="refresh"
+                    iconGap="s"
+                    flush="both"
+                  >
+                    <FormattedMessage
+                      id="data.explorer.datasetSelector.advancedSelector.refreshCacheButton"
+                      defaultMessage="Refresh Cache"
+                    />
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
       </EuiModalHeader>
       <EuiModalBody>
         <div
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
index 57edc3179203..4193db6ce26a 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
@@ -6,11 +6,11 @@
 import React, { useCallback, useRef } from 'react';
 import {
   EuiSpacer,
-  EuiTitle,
   EuiForm,
   EuiText,
   EuiFlexItem,
   EuiFlexGroup,
+  EuiDescribedFormGroup,
   EuiPanel,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
@@ -146,28 +146,44 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
             </>
           )}
           {permissionEnabled && (
-            <>
-              <EuiTitle
+            <EuiPanel>
+              <EuiText
                 {...generateRightSidebarScrollProps(RightSidebarScrollField.Collaborators)}
                 size="s"
               >
-                <h3>{usersAndPermissionsCreatePageTitle}</h3>
-              </EuiTitle>
+                <h2>{usersAndPermissionsCreatePageTitle}</h2>
+              </EuiText>
               <EuiText size="xs">
                 {i18n.translate('workspace.creator.form.usersAndPermissionsDescription', {
-                  defaultMessage:
-                    'You will be added as an owner to the workspace. Select additional users and user groups as workspace collaborators with different access levels.',
+                  defaultMessage: 'Manage access and permissions',
                 })}
               </EuiText>
               <EuiSpacer size="m" />
-              <WorkspacePermissionSettingPanel
-                errors={formErrors.permissionSettings?.fields}
-                onChange={setPermissionSettings}
-                permissionSettings={formData.permissionSettings}
-                disabledUserOrGroupInputIds={disabledUserOrGroupInputIdsRef.current}
-                data-test-subj={`workspaceForm-permissionSettingPanel`}
-              />
-            </>
+              <EuiDescribedFormGroup
+                title={
+                  <h4 {...generateRightSidebarScrollProps(RightSidebarScrollField.Name)}>
+                    {i18n.translate('workspace.creator.collaborators.panel.fields.name.title', {
+                      defaultMessage: 'Workspace access',
+                    })}
+                  </h4>
+                }
+                description={i18n.translate(
+                  'workspace.creator.collaborators.panel.fields.name.description',
+                  {
+                    defaultMessage:
+                      'You will be added as an owner to the workspace. Select additional users and user groups as workspace collaborators with different access levels.',
+                  }
+                )}
+              >
+                <WorkspacePermissionSettingPanel
+                  errors={formErrors.permissionSettings?.fields}
+                  onChange={setPermissionSettings}
+                  permissionSettings={formData.permissionSettings}
+                  disabledUserOrGroupInputIds={disabledUserOrGroupInputIdsRef.current}
+                  data-test-subj={`workspaceForm-permissionSettingPanel`}
+                />
+              </EuiDescribedFormGroup>
+            </EuiPanel>
           )}
         </EuiForm>
       </EuiFlexItem>
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx
index 1b94fa315633..d126ab1be034 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx
@@ -144,7 +144,7 @@ export const WorkspacePermissionSettingInput = ({
           placeholder={
             type === WorkspacePermissionItemType.User
               ? i18n.translate('workspaceForm.permissionSetting.selectUser', {
-                  defaultMessage: 'Enter user name or uer ID',
+                  defaultMessage: 'Enter user name or user ID',
                 })
               : i18n.translate('workspaceForm.permissionSetting.selectUserGroup', {
                   defaultMessage: 'Enter group name or group ID',
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx
index 17193574c474..6722b96aca25 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx
@@ -11,6 +11,7 @@ import {
   EuiCompressedFormRow,
   EuiSpacer,
   EuiFormLabel,
+  EuiButtonIcon,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { WorkspaceFormError, WorkspacePermissionSetting } from './types';
@@ -135,31 +136,43 @@ export const WorkspacePermissionSettingPanel = ({
 
   return (
     <>
-      <EuiFlexGroup alignItems="center" gutterSize="s">
-        <EuiFlexItem style={{ maxWidth: 150 }}>
-          <EuiFormLabel id={PERMISSION_TYPE_LABEL_ID}>
-            {i18n.translate('workspaceForm.permissionSetting.typeLabel', {
-              defaultMessage: 'Type',
-            })}
-          </EuiFormLabel>
-        </EuiFlexItem>
-        <EuiFlexItem style={{ maxWidth: 400 }}>
-          <EuiFormLabel id={PERMISSION_COLLABORATOR_LABEL_ID}>
-            {i18n.translate('workspaceForm.permissionSetting.collaboratorLabel', {
-              defaultMessage: 'Collaborator',
-            })}
-          </EuiFormLabel>
-        </EuiFlexItem>
-        <EuiFlexItem style={{ maxWidth: 150 }}>
-          <EuiFormLabel id={PERMISSION_ACCESS_LEVEL_LABEL_ID}>
-            {i18n.translate('workspaceForm.permissionSetting.accessLevelLabel', {
-              defaultMessage: 'Access level',
-            })}
-          </EuiFormLabel>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false} style={{ width: 40 }} />
-      </EuiFlexGroup>
-      <EuiSpacer size="xs" />
+      {permissionSettings.length > 0 && (
+        <>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem style={{ maxWidth: 150 }}>
+              <EuiFormLabel id={PERMISSION_TYPE_LABEL_ID}>
+                {i18n.translate('workspaceForm.permissionSetting.typeLabel', {
+                  defaultMessage: 'Type',
+                })}
+              </EuiFormLabel>
+            </EuiFlexItem>
+            <EuiFlexItem style={{ maxWidth: 400 }}>
+              <EuiFormLabel id={PERMISSION_COLLABORATOR_LABEL_ID}>
+                {i18n.translate('workspaceForm.permissionSetting.collaboratorLabel', {
+                  defaultMessage: 'Collaborator',
+                })}
+              </EuiFormLabel>
+            </EuiFlexItem>
+            <EuiFlexItem style={{ maxWidth: 150 }}>
+              <EuiFormLabel id={PERMISSION_ACCESS_LEVEL_LABEL_ID}>
+                {i18n.translate('workspaceForm.permissionSetting.accessLevelLabel', {
+                  defaultMessage: 'Access level',
+                })}
+              </EuiFormLabel>
+            </EuiFlexItem>
+            {/* Placeholder to vertically align form labels with their respective inputs */}
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                color="text"
+                iconType="trash"
+                size="xs"
+                style={{ visibility: 'hidden' }}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="xs" />
+        </>
+      )}
       {permissionSettings.map((item, index) => (
         <React.Fragment key={item.id}>
           <EuiCompressedFormRow
diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.scss b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.scss
new file mode 100644
index 000000000000..7fe456168b68
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.scss
@@ -0,0 +1,3 @@
+.workspaceMenuHeader {
+  padding: $ouiSizeL;
+}
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 a0afcf3eb8bb..71a7632d6f08 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
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-
+import moment from 'moment';
 import { WorkspaceMenu } from './workspace_menu';
 import { coreMock } from '../../../../../core/public/mocks';
 import { CoreStart, DEFAULT_NAV_GROUPS } from '../../../../../core/public';
@@ -64,16 +64,14 @@ describe('<WorkspaceMenu />', () => {
     const selectButton = screen.getByTestId('workspace-select-button');
     fireEvent.click(selectButton);
 
-    expect(screen.getByText(/all workspaces/i)).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-all-workspace-1')).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-all-workspace-2')).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-menu-item-workspace-1')).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-menu-item-workspace-2')).toBeInTheDocument();
   });
 
-  it('should display a list of recent workspaces in the dropdown', () => {
-    jest.spyOn(recentWorkspaceManager, 'getRecentWorkspaces').mockReturnValue([
-      { id: 'workspace-1', timestamp: 1234567890 },
-      { id: 'workspace-2', timestamp: 1234567899 },
-    ]);
+  it('should display viewed xx ago for recent workspaces', () => {
+    jest
+      .spyOn(recentWorkspaceManager, 'getRecentWorkspaces')
+      .mockReturnValue([{ id: 'workspace-1', timestamp: 1234567890 }]);
 
     coreStartMock.workspaces.workspaceList$.next([
       { id: 'workspace-1', name: 'workspace 1', features: [] },
@@ -85,9 +83,7 @@ describe('<WorkspaceMenu />', () => {
     const selectButton = screen.getByTestId('workspace-select-button');
     fireEvent.click(selectButton);
 
-    expect(screen.getByText(/recent workspaces/i)).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-recent-workspace-1')).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-recent-workspace-2')).toBeInTheDocument();
+    expect(screen.getByText(`viewed ${moment(1234567890).fromNow()}`)).toBeInTheDocument();
   });
 
   it('should be able to display empty state when the workspace list is empty', () => {
@@ -98,7 +94,7 @@ describe('<WorkspaceMenu />', () => {
     expect(screen.getByText(/no workspace available/i)).toBeInTheDocument();
   });
 
-  it('should be able to perform search and filter and the results will be shown in both all and recent section', () => {
+  it('should be able to perform search and filter and the results will be shown', () => {
     coreStartMock.workspaces.workspaceList$.next([
       { id: 'workspace-1', name: 'workspace 1', features: [] },
       { id: 'test-2', name: 'test 2', features: [] },
@@ -113,8 +109,8 @@ describe('<WorkspaceMenu />', () => {
 
     const searchInput = screen.getByRole('searchbox');
     fireEvent.change(searchInput, { target: { value: 'works' } });
-    expect(screen.getByTestId('workspace-menu-item-recent-workspace-1')).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-recent-workspace-1')).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-menu-item-workspace-1')).toBeInTheDocument();
+    expect(screen.queryByText('workspace-menu-item-workspace-1')).not.toBeInTheDocument();
   });
 
   it('should be able to display empty state when seach is not found', () => {
@@ -145,7 +141,7 @@ describe('<WorkspaceMenu />', () => {
 
     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.getByTestId('workspace-menu-current-workspace-use-case')).toBeInTheDocument();
     expect(screen.getByTestId('current-workspace-icon-wsObservability')).toBeInTheDocument();
     expect(screen.getByText('Observability')).toBeInTheDocument();
   });
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 64c8fb583802..a68aea576ae1 100644
--- a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
+++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
@@ -2,18 +2,17 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
 import { i18n } from '@osd/i18n';
 import React, { useState } from 'react';
 import { useObservable } from 'react-use';
 import {
   EuiText,
   EuiPanel,
-  EuiButton,
   EuiPopover,
   EuiButtonIcon,
   EuiFlexItem,
   EuiIcon,
+  EuiSpacer,
   EuiFlexGroup,
   EuiHorizontalRule,
   EuiButtonEmpty,
@@ -26,6 +25,7 @@ import { getFirstUseCaseOfFeatureConfigs } from '../../utils';
 import { WorkspaceUseCase } from '../../types';
 import { validateWorkspaceColor } from '../../../common/utils';
 import { WorkspacePickerContent } from '../workspace_picker_content/workspace_picker_content';
+import './workspace_menu.scss';
 
 const defaultHeaderName = i18n.translate('workspace.menu.defaultHeaderName', {
   defaultMessage: 'Workspaces',
@@ -93,106 +93,115 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
       button={currentWorkspaceButton}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
-      panelPaddingSize="s"
       anchorPosition="downCenter"
+      panelPaddingSize="s"
       repositionOnScroll={true}
     >
-      <EuiPanel hasBorder={false} color="transparent">
-        <EuiFlexGroup
-          justifyContent="spaceAround"
-          alignItems="center"
-          direction="column"
-          gutterSize="s"
-        >
-          {currentWorkspace ? (
-            <>
-              <EuiFlexItem grow={false}>
-                <EuiIcon
-                  size="xl"
-                  data-test-subj={`current-workspace-icon-${getUseCase(currentWorkspace)?.icon}`}
-                  type={getUseCase(currentWorkspace)?.icon || 'wsSelector'}
-                  color={getValidWorkspaceColor(currentWorkspace.color)}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
-                data-test-subj="workspace-menu-current-workspace-name"
-                style={{ maxWidth: '200px' }}
-              >
-                <EuiText textAlign="center">{currentWorkspaceName}</EuiText>
-                <EuiText
-                  size="xs"
-                  data-test-subj="workspace-menu-current-use-case"
-                  textAlign="center"
-                  color="subdued"
+      <EuiFlexGroup
+        direction="column"
+        alignItems="center"
+        gutterSize="none"
+        style={{ width: '310px' }}
+      >
+        <EuiFlexItem className="workspaceMenuHeader">
+          <EuiFlexGroup
+            justifyContent="spaceAround"
+            alignItems="center"
+            direction="column"
+            gutterSize="none"
+          >
+            {currentWorkspace ? (
+              <>
+                <EuiFlexItem grow={false}>
+                  <EuiIcon
+                    size="xl"
+                    data-test-subj={`current-workspace-icon-${getUseCase(currentWorkspace)?.icon}`}
+                    type={getUseCase(currentWorkspace)?.icon || 'wsSelector'}
+                    color={getValidWorkspaceColor(currentWorkspace.color)}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem data-test-subj="workspace-menu-current-workspace-name">
+                  <EuiText textAlign="center" size="s">
+                    <h3>{currentWorkspaceName}</h3>
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiText
+                    size="s"
+                    data-test-subj="workspace-menu-current-workspace-use-case"
+                    textAlign="center"
+                    color="subdued"
+                  >
+                    <small>{getUseCase(currentWorkspace)?.title ?? ''}</small>
+                  </EuiText>
+                </EuiFlexItem>
+              </>
+            ) : (
+              <>
+                <EuiFlexItem grow={false}>
+                  <EuiIcon size="xl" color="subdued" type="wsSelector" />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
+                  <EuiText textAlign="center">{currentWorkspaceName}</EuiText>
+                </EuiFlexItem>
+              </>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem className="eui-fullWidth">
+          <EuiPanel
+            paddingSize="none"
+            hasBorder={false}
+            hasShadow={false}
+            color="transparent"
+            style={{ height: '40vh' }}
+          >
+            <WorkspacePickerContent
+              coreStart={coreStart}
+              registeredUseCases$={registeredUseCases$}
+              onClickWorkspace={() => setPopover(false)}
+              isInTwoLines={false}
+            />
+          </EuiPanel>
+        </EuiFlexItem>
+        {isDashboardAdmin && (
+          <EuiFlexItem className="eui-fullWidth">
+            <EuiHorizontalRule size="full" margin="none" />
+            <EuiSpacer size="s" />
+            <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+              <EuiFlexItem grow={false} className="eui-textLeft">
+                <EuiButtonEmpty
+                  color="primary"
+                  size="s"
+                  data-test-subj="workspace-menu-manage-button"
+                  onClick={() => {
+                    closePopover();
+                    coreStart.application.navigateToApp(WORKSPACE_LIST_APP_ID);
+                  }}
                 >
-                  {getUseCase(currentWorkspace)?.title ?? ''}
-                </EuiText>
-              </EuiFlexItem>
-            </>
-          ) : (
-            <>
-              <EuiFlexItem grow={false}>
-                <EuiIcon size="xl" color="subdued" type="wsSelector" />
+                  <EuiText size="s">{manageWorkspacesButton}</EuiText>
+                </EuiButtonEmpty>
               </EuiFlexItem>
-              <EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
-                <EuiText textAlign="center">{currentWorkspaceName}</EuiText>
-              </EuiFlexItem>
-            </>
-          )}
-        </EuiFlexGroup>
-      </EuiPanel>
-
-      <EuiPanel
-        paddingSize="s"
-        hasBorder={false}
-        color="transparent"
-        style={{ height: '30vh' }}
-        className="eui-fullHeight"
-      >
-        <WorkspacePickerContent
-          coreStart={coreStart}
-          registeredUseCases$={registeredUseCases$}
-          onClickWorkspace={() => setPopover(false)}
-        />
-      </EuiPanel>
-
-      {isDashboardAdmin && (
-        <EuiPanel paddingSize="s" hasBorder={false} color="transparent">
-          <EuiHorizontalRule />
-          <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="s">
-            <EuiFlexItem>
-              <EuiButtonEmpty
-                color="primary"
-                size="xs"
-                data-test-subj="workspace-menu-manage-button"
-                onClick={() => {
-                  closePopover();
-                  coreStart.application.navigateToApp(WORKSPACE_LIST_APP_ID);
-                }}
-              >
-                <EuiText size="s">{manageWorkspacesButton}</EuiText>
-              </EuiButtonEmpty>
-            </EuiFlexItem>
 
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                color="primary"
-                iconType="plus"
-                size="s"
-                key={WORKSPACE_CREATE_APP_ID}
-                data-test-subj="workspace-menu-create-workspace-button"
-                onClick={() => {
-                  closePopover();
-                  coreStart.application.navigateToApp(WORKSPACE_CREATE_APP_ID);
-                }}
-              >
-                <EuiText size="s">{createWorkspaceButton}</EuiText>
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPanel>
-      )}
+              <EuiFlexItem grow={false} className="eui-textRight">
+                <EuiButtonEmpty
+                  color="primary"
+                  size="s"
+                  iconType="plus"
+                  key={WORKSPACE_CREATE_APP_ID}
+                  data-test-subj="workspace-menu-create-workspace-button"
+                  onClick={() => {
+                    closePopover();
+                    coreStart.application.navigateToApp(WORKSPACE_CREATE_APP_ID);
+                  }}
+                >
+                  <EuiText size="s">{createWorkspaceButton}</EuiText>
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
     </EuiPopover>
   );
 };
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 72fdd67b7367..389ffb04ea0d 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
@@ -5,8 +5,9 @@
 import { i18n } from '@osd/i18n';
 import React, { useMemo, useState } from 'react';
 import { useObservable } from 'react-use';
+import moment from 'moment';
 import {
-  EuiTitle,
+  EuiHorizontalRule,
   EuiIcon,
   EuiPanel,
   EuiSpacer,
@@ -15,6 +16,8 @@ import {
   EuiListGroup,
   EuiListGroupItem,
   EuiEmptyPrompt,
+  EuiFlexItem,
+  EuiFlexGroup,
 } from '@elastic/eui';
 
 import { BehaviorSubject } from 'rxjs';
@@ -24,65 +27,80 @@ import { WorkspaceUseCase } from '../../types';
 import { validateWorkspaceColor } from '../../../common/utils';
 import { getFirstUseCaseOfFeatureConfigs, getUseCaseUrl } from '../../utils';
 
-const allWorkspacesTitle = i18n.translate('workspace.menu.title.allWorkspaces', {
-  defaultMessage: 'All workspaces',
-});
+function sortBy<T>(getkey: (item: T) => number | undefined) {
+  return (a: T, b: T): number => {
+    const aValue = getkey(a);
+    const bValue = getkey(b);
+
+    if (aValue === undefined) return 1;
+    if (bValue === undefined) return -1;
+
+    return bValue - aValue;
+  };
+}
 
 const searchFieldPlaceholder = i18n.translate('workspace.menu.search.placeholder', {
   defaultMessage: 'Search workspace name',
 });
 
-const recentWorkspacesTitle = i18n.translate('workspace.menu.title.recentWorkspaces', {
-  defaultMessage: 'Recent workspaces',
-});
-
 const getValidWorkspaceColor = (color?: string) =>
   validateWorkspaceColor(color) ? color : undefined;
 
+interface UpdatedWorkspaceObject extends WorkspaceObject {
+  accessTimeStamp?: number;
+  accessTime?: string;
+}
 interface Props {
   coreStart: CoreStart;
   registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
   onClickWorkspace?: () => void;
+  isInTwoLines?: boolean;
 }
 
 export const WorkspacePickerContent = ({
   coreStart,
   registeredUseCases$,
   onClickWorkspace,
+  isInTwoLines,
 }: Props) => {
-  const workspaceList = useObservable(coreStart.workspaces.workspaceList$, []);
   const isDashboardAdmin = coreStart.application.capabilities?.dashboards?.isDashboardAdmin;
   const availableUseCases = useObservable(registeredUseCases$, []);
   const [search, setSearch] = useState('');
+  const workspaceList = useObservable(coreStart.workspaces.workspaceList$, []);
 
-  const recentWorkspaces = useMemo(() => {
-    return recentWorkspaceManager
-      .getRecentWorkspaces()
-      .map((workspace) => workspaceList.find((ws) => ws.id === workspace.id))
-      .filter((workspace): workspace is WorkspaceObject => workspace !== undefined);
+  const updatedRecentWorkspaceList: UpdatedWorkspaceObject[] = useMemo(() => {
+    const recentWorkspaces = recentWorkspaceManager.getRecentWorkspaces();
+    const updatedList = workspaceList.map((workspace) => {
+      const recentWorkspace = recentWorkspaces.find((recent) => recent.id === workspace.id);
+
+      if (recentWorkspace) {
+        return {
+          ...workspace,
+          accessTimeStamp: recentWorkspace.timestamp,
+          accessTime: `viewed ${moment(recentWorkspace.timestamp).fromNow()}`,
+        };
+      }
+      return workspace as UpdatedWorkspaceObject;
+    });
+
+    return updatedList.sort(sortBy((workspace) => workspace.accessTimeStamp));
   }, [workspaceList]);
 
-  const queryFromList = ({ list, query }: { list: WorkspaceObject[]; query: string }) => {
+  const queryFromList = ({ list, query }: { list: UpdatedWorkspaceObject[]; query: string }) => {
     if (!list || list.length === 0) {
       return [];
     }
-
     if (query && query.trim() !== '') {
       const normalizedQuery = query.toLowerCase();
       const result = list.filter((item) => item.name.toLowerCase().includes(normalizedQuery));
       return result;
     }
-
     return list;
   };
 
   const queriedWorkspace = useMemo(() => {
-    return queryFromList({ list: workspaceList, query: search });
-  }, [workspaceList, search]);
-
-  const queriedRecentWorkspace = useMemo(() => {
-    return queryFromList({ list: recentWorkspaces, query: search });
-  }, [recentWorkspaces, search]);
+    return queryFromList({ list: updatedRecentWorkspaceList, query: search });
+  }, [updatedRecentWorkspaceList, search]);
 
   const getUseCase = (workspace: WorkspaceObject) => {
     if (!workspace.features) {
@@ -125,42 +143,91 @@ export const WorkspacePickerContent = ({
     );
   };
 
-  const getWorkspaceListGroup = (filterWorkspaceList: WorkspaceObject[], itemType: string) => {
-    const listItems = filterWorkspaceList.map((workspace: WorkspaceObject) => {
+  const getWorkspaceLists = (filterWorkspaceList: UpdatedWorkspaceObject[]) => {
+    const listItems = filterWorkspaceList.map((workspace: UpdatedWorkspaceObject) => {
       const useCase = getUseCase(workspace);
       const useCaseURL = getUseCaseUrl(useCase, workspace, coreStart.application, coreStart.http);
 
       return (
-        <EuiListGroupItem
-          key={workspace.id}
-          className="eui-textTruncate"
-          size="s"
-          data-test-subj={`workspace-menu-item-${itemType}-${workspace.id}`}
-          icon={
-            <EuiIcon
-              size="s"
-              type={useCase?.icon || 'wsSelector'}
-              color={getValidWorkspaceColor(workspace.color)}
-            />
-          }
-          label={workspace.name}
-          onClick={() => {
-            onClickWorkspace?.();
-            window.location.assign(useCaseURL);
-          }}
-        />
+        <>
+          <EuiHorizontalRule size="full" margin="none" />
+          <EuiListGroupItem
+            // using inline style to make sure that the list item will be expanded，className="eui-fullWidth" is not working, need to set minWidth
+            style={{ width: '100%', minWidth: '0' }}
+            key={workspace.id}
+            size="s"
+            data-test-subj={`workspace-menu-item-${workspace.id}`}
+            icon={
+              <EuiIcon
+                size="l"
+                type={useCase?.icon || 'wsSelector'}
+                color={getValidWorkspaceColor(workspace.color)}
+              />
+            }
+            label={
+              !isInTwoLines ? (
+                <EuiFlexGroup direction="column" gutterSize="none" className="eui-fullWidth">
+                  <EuiFlexItem>
+                    <EuiText className="eui-textTruncate" size="s">
+                      {workspace.name}
+                    </EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiFlexGroup justifyContent="spaceBetween">
+                      <EuiFlexItem className="eui-textLeft" grow={false}>
+                        <EuiText size="s" color="subdued">
+                          <small>{useCase?.title}</small>
+                        </EuiText>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={1} style={{ position: 'absolute', right: '0px' }}>
+                        <EuiText size="s" color="subdued">
+                          <small> {workspace.accessTime}</small>
+                        </EuiText>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              ) : (
+                <EuiFlexGroup
+                  direction="column"
+                  gutterSize="none"
+                  className="eui-fullWidth"
+                  alignItems="flexStart"
+                >
+                  <EuiFlexItem>
+                    <EuiText className="eui-textTruncate" size="s">
+                      {workspace.name}
+                    </EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiText size="s" color="subdued">
+                      <small>{useCase?.title}</small>
+                    </EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiText size="s" color="subdued">
+                      <small> {workspace.accessTime}</small>
+                    </EuiText>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              )
+            }
+            onClick={() => {
+              onClickWorkspace?.();
+              window.location.assign(useCaseURL);
+            }}
+          />
+        </>
       );
     });
+    return listItems;
+  };
+
+  const getWorkspaceListGroup = (filterWorkspaceList: UpdatedWorkspaceObject[]) => {
+    const listItems = getWorkspaceLists(filterWorkspaceList);
     return (
       <>
-        <EuiTitle size="xxs">
-          <h4>{itemType === 'all' ? allWorkspacesTitle : recentWorkspacesTitle}</h4>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiListGroup showToolTips flush gutterSize="none" wrapText maxWidth={240}>
-          {listItems}
-        </EuiListGroup>
-        <EuiSpacer size="s" />
+        <EuiListGroup gutterSize="none">{listItems}</EuiListGroup>
       </>
     );
   };
@@ -174,18 +241,18 @@ export const WorkspacePickerContent = ({
         onChange={(e) => setSearch(e.target.value)}
         placeholder={searchFieldPlaceholder}
       />
-      <EuiSpacer />
+      <EuiSpacer size="s" />
+      <EuiHorizontalRule size="full" margin="none" />
 
       <EuiPanel
         paddingSize="none"
-        color="transparent"
         hasBorder={false}
-        className="eui-yScrollWithShadows"
+        hasShadow={false}
+        // adding this inline style to make sure that part of list won't be hidden
+        style={{ maxHeight: 'calc(100% - 50px)' }}
+        className="euiYScrollWithShadows eui-fullWidth"
       >
-        {queriedRecentWorkspace.length > 0 &&
-          getWorkspaceListGroup(queriedRecentWorkspace, 'recent')}
-
-        {queriedWorkspace.length > 0 && getWorkspaceListGroup(queriedWorkspace, 'all')}
+        {queriedWorkspace.length > 0 && getWorkspaceListGroup(queriedWorkspace)}
 
         {queriedWorkspace.length === 0 && getEmptyStatePrompt()}
       </EuiPanel>
diff --git a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.test.tsx b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.test.tsx
new file mode 100644
index 000000000000..5b8b05a6506a
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.test.tsx
@@ -0,0 +1,231 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import moment from 'moment';
+import { WorkspaceSelector } from './workspace_selector';
+import { coreMock } from '../../../../../core/public/mocks';
+import { CoreStart, DEFAULT_NAV_GROUPS, WorkspaceObject } from '../../../../../core/public';
+import { BehaviorSubject } from 'rxjs';
+import { IntlProvider } from 'react-intl';
+import { recentWorkspaceManager } from '../../recent_workspace_manager';
+jest.mock('@osd/i18n', () => ({
+  i18n: {
+    translate: (id: string, { defaultMessage }: { defaultMessage: string }) => defaultMessage,
+  },
+}));
+describe('<WorkspaceSelector />', () => {
+  let coreStartMock: CoreStart;
+  const navigateToApp = jest.fn();
+  const registeredUseCases$ = new BehaviorSubject([
+    { ...DEFAULT_NAV_GROUPS.observability, features: [{ id: 'discover', title: 'Discover' }] },
+  ]);
+
+  beforeEach(() => {
+    coreStartMock = coreMock.createStart();
+    coreStartMock.application.capabilities = {
+      navLinks: {},
+      management: {},
+      catalogue: {},
+      savedObjectsManagement: {},
+      workspaces: { permissionEnabled: true },
+      dashboards: { isDashboardAdmin: true },
+    };
+
+    coreStartMock.application = {
+      ...coreStartMock.application,
+      navigateToApp,
+    };
+
+    const mockCurrentWorkspace = [{ id: 'workspace-1', name: 'workspace 1' }];
+    coreStartMock.workspaces.currentWorkspace$ = new BehaviorSubject<WorkspaceObject | null>(
+      mockCurrentWorkspace
+    );
+
+    jest.spyOn(coreStartMock.application, 'getUrlForApp').mockImplementation((appId: string) => {
+      return `https://test.com/app/${appId}`;
+    });
+  });
+
+  const WorkspaceSelectorCreatorComponent = () => {
+    return (
+      <IntlProvider locale="en">
+        <WorkspaceSelector coreStart={coreStartMock} registeredUseCases$={registeredUseCases$} />
+      </IntlProvider>
+    );
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.restoreAllMocks();
+  });
+
+  it('should display the current workspace name', () => {
+    render(<WorkspaceSelectorCreatorComponent />);
+    expect(screen.getByTestId('workspace-selector-current-title')).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-selector-current-name')).toBeInTheDocument();
+  });
+  it('should display a list of workspaces in the dropdown', () => {
+    jest
+      .spyOn(recentWorkspaceManager, 'getRecentWorkspaces')
+      .mockReturnValue([{ id: 'workspace-1', timestamp: 1234567890 }]);
+
+    coreStartMock.workspaces.workspaceList$.next([
+      { id: 'workspace-1', name: 'workspace 1', features: [] },
+      { id: 'workspace-2', name: 'workspace 2', features: [] },
+    ]);
+
+    render(<WorkspaceSelectorCreatorComponent />);
+    const selectButton = screen.getByTestId('workspace-selector-button');
+    fireEvent.click(selectButton);
+
+    expect(screen.getByTestId('workspace-menu-item-workspace-1')).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-menu-item-workspace-2')).toBeInTheDocument();
+  });
+
+  it('should display viewed xx ago for recent workspaces', () => {
+    jest
+      .spyOn(recentWorkspaceManager, 'getRecentWorkspaces')
+      .mockReturnValue([{ id: 'workspace-1', timestamp: 1234567890 }]);
+
+    coreStartMock.workspaces.workspaceList$.next([
+      { id: 'workspace-1', name: 'workspace 1', features: [] },
+      { id: 'workspace-2', name: 'workspace 2', features: [] },
+    ]);
+
+    render(<WorkspaceSelectorCreatorComponent />);
+
+    const selectButton = screen.getByTestId('workspace-selector-button');
+    fireEvent.click(selectButton);
+
+    expect(screen.getByText(`viewed ${moment(1234567890).fromNow()}`)).toBeInTheDocument();
+  });
+
+  it('should be able to display empty state when the workspace list is empty', () => {
+    coreStartMock.workspaces.workspaceList$.next([]);
+    render(<WorkspaceSelectorCreatorComponent />);
+    const selectButton = screen.getByTestId('workspace-selector-button');
+    fireEvent.click(selectButton);
+    expect(screen.getByText(/no workspace available/i)).toBeInTheDocument();
+  });
+
+  it('should be able to perform search and filter and the results will be shown', () => {
+    coreStartMock.workspaces.workspaceList$.next([
+      { id: 'workspace-1', name: 'workspace 1', features: [] },
+      { id: 'test-2', name: 'test 2', features: [] },
+    ]);
+    jest
+      .spyOn(recentWorkspaceManager, 'getRecentWorkspaces')
+      .mockReturnValue([{ id: 'workspace-1', timestamp: 1234567890 }]);
+    render(<WorkspaceSelectorCreatorComponent />);
+
+    const selectButton = screen.getByTestId('workspace-selector-button');
+    fireEvent.click(selectButton);
+
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'works' } });
+    expect(screen.getByTestId('workspace-menu-item-workspace-1')).toBeInTheDocument();
+    expect(screen.queryByText('workspace-menu-item-workspace-1')).not.toBeInTheDocument();
+  });
+
+  it('should be able to display empty state when seach is not found', () => {
+    coreStartMock.workspaces.workspaceList$.next([
+      { id: 'workspace-1', name: 'workspace 1', features: [] },
+      { id: 'test-2', name: 'test 2', features: [] },
+    ]);
+    jest
+      .spyOn(recentWorkspaceManager, 'getRecentWorkspaces')
+      .mockReturnValue([{ id: 'workspace-1', timestamp: 1234567890 }]);
+    render(<WorkspaceSelectorCreatorComponent />);
+
+    const selectButton = screen.getByTestId('workspace-selector-button');
+    fireEvent.click(selectButton);
+
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'noitems' } });
+    expect(screen.getByText(/no workspace available/i)).toBeInTheDocument();
+  });
+
+  it('should navigate to the first feature of workspace use case', () => {
+    coreStartMock.workspaces.workspaceList$.next([
+      { id: 'workspace-1', name: 'workspace 1', features: ['use-case-observability'] },
+    ]);
+
+    const originalLocation = window.location;
+    Object.defineProperty(window, 'location', {
+      value: {
+        assign: jest.fn(),
+      },
+    });
+
+    render(<WorkspaceSelectorCreatorComponent />);
+    fireEvent.click(screen.getByTestId('workspace-selector-button'));
+    fireEvent.click(screen.getByText(/workspace 1/i));
+
+    expect(window.location.assign).toHaveBeenCalledWith(
+      'https://test.com/w/workspace-1/app/discover'
+    );
+
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+    });
+  });
+
+  it('should navigate to the workspace detail page when use case is all', () => {
+    coreStartMock.workspaces.workspaceList$.next([
+      { id: 'workspace-1', name: 'workspace 1', features: ['use-case-all'] },
+    ]);
+
+    const originalLocation = window.location;
+    Object.defineProperty(window, 'location', {
+      value: {
+        assign: jest.fn(),
+      },
+    });
+
+    render(<WorkspaceSelectorCreatorComponent />);
+    fireEvent.click(screen.getByTestId('workspace-selector-button'));
+    fireEvent.click(screen.getByText(/workspace 1/i));
+
+    expect(window.location.assign).toHaveBeenCalledWith(
+      'https://test.com/w/workspace-1/app/workspace_detail'
+    );
+
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+    });
+  });
+
+  it('should navigate to create workspace page', () => {
+    render(<WorkspaceSelectorCreatorComponent />);
+    fireEvent.click(screen.getByTestId('workspace-selector-button'));
+    fireEvent.click(screen.getByText(/create workspace/i));
+    expect(coreStartMock.application.navigateToApp).toHaveBeenCalledWith('workspace_create');
+  });
+
+  it('should navigate to workspace list page', () => {
+    render(<WorkspaceSelectorCreatorComponent />);
+
+    fireEvent.click(screen.getByTestId('workspace-selector-button'));
+    fireEvent.click(screen.getByText(/manage/i));
+    expect(coreStartMock.application.navigateToApp).toHaveBeenCalledWith('workspace_list');
+  });
+
+  it('should hide create workspace button for non dashboard admin', () => {
+    coreStartMock.application.capabilities = {
+      ...coreStartMock.application.capabilities,
+      dashboards: {
+        ...coreStartMock.application.capabilities.dashboards,
+        isDashboardAdmin: false,
+      },
+    };
+    render(<WorkspaceSelectorCreatorComponent />);
+
+    fireEvent.click(screen.getByTestId('workspace-selector-button'));
+    expect(screen.queryByText(/manage/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/create workspaces/i)).toBeNull();
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx
new file mode 100644
index 000000000000..ca6431da1e1d
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx
@@ -0,0 +1,206 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { useObservable } from 'react-use';
+import { i18n } from '@osd/i18n';
+import {
+  EuiButton,
+  EuiIcon,
+  EuiPopover,
+  EuiPanel,
+  EuiHorizontalRule,
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import { BehaviorSubject } from 'rxjs';
+import { WORKSPACE_CREATE_APP_ID, WORKSPACE_LIST_APP_ID } from '../../../common/constants';
+import { CoreStart, WorkspaceObject } from '../../../../../core/public';
+import { getFirstUseCaseOfFeatureConfigs } from '../../utils';
+import { WorkspaceUseCase } from '../../types';
+import { validateWorkspaceColor } from '../../../common/utils';
+import { WorkspacePickerContent } from '../workspace_picker_content/workspace_picker_content';
+
+const createWorkspaceButton = i18n.translate('workspace.menu.button.createWorkspace', {
+  defaultMessage: 'Create workspace',
+});
+
+const manageWorkspacesButton = i18n.translate('workspace.menu.button.manageWorkspaces', {
+  defaultMessage: 'Manage',
+});
+
+const getValidWorkspaceColor = (color?: string) =>
+  validateWorkspaceColor(color) ? color : undefined;
+
+interface Props {
+  coreStart: CoreStart;
+  registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
+}
+
+export const WorkspaceSelector = ({ coreStart, registeredUseCases$ }: Props) => {
+  const [isPopoverOpen, setPopover] = useState(false);
+  const currentWorkspace = useObservable(coreStart.workspaces.currentWorkspace$, null);
+  const availableUseCases = useObservable(registeredUseCases$, []);
+  const isDashboardAdmin = coreStart.application.capabilities?.dashboards?.isDashboardAdmin;
+
+  const getUseCase = (workspace: WorkspaceObject) => {
+    if (!workspace.features) {
+      return;
+    }
+    const useCaseId = getFirstUseCaseOfFeatureConfigs(workspace.features);
+    return availableUseCases.find((useCase) => useCase.id === useCaseId);
+  };
+
+  const onButtonClick = () => {
+    setPopover(!isPopoverOpen);
+  };
+
+  const closePopover = () => {
+    setPopover(false);
+  };
+  const button = currentWorkspace ? (
+    <EuiPanel
+      paddingSize="none"
+      color="transparent"
+      hasBorder={false}
+      hasShadow={false}
+      data-test-subj="workspace-selector-button"
+      onClick={onButtonClick}
+    >
+      <EuiText
+        size="xs"
+        // TODO: Use standard OuiComponent to achieve the label looks
+        style={{
+          position: 'relative',
+          bottom: '-10px',
+          zIndex: 1,
+          padding: '0 5px',
+        }}
+      >
+        <small>
+          {i18n.translate('workspace.left.nav.selector.label', {
+            defaultMessage: 'WORKSPACE',
+          })}
+        </small>
+      </EuiText>
+      <EuiPanel paddingSize="s" borderRadius="m">
+        <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+          <EuiFlexItem>
+            <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+              <EuiFlexItem grow={false}>
+                <EuiIcon
+                  size="l"
+                  type={getUseCase(currentWorkspace)?.icon || 'wsSelector'}
+                  color={getValidWorkspaceColor(currentWorkspace.color)}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiFlexGroup direction="column" gutterSize="none">
+                  <EuiFlexItem grow={false} style={{ maxWidth: '130px' }}>
+                    <EuiText size="s" data-test-subj="workspace-selector-current-name">
+                      <h4 className="eui-textTruncate">{currentWorkspace.name}</h4>
+                    </EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiText
+                      size="xs"
+                      color="subdued"
+                      data-test-subj="workspace-selector-current-title"
+                    >
+                      <small>
+                        {i18n.translate('workspace.left.nav.selector.title', {
+                          defaultMessage: getUseCase(currentWorkspace)?.title || '',
+                        })}
+                      </small>
+                    </EuiText>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
+            <EuiIcon type="arrowDown" size="m" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </EuiPanel>
+  ) : (
+    <EuiButton onClick={onButtonClick}>Select a Workspace</EuiButton>
+  );
+
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="s"
+      anchorPosition="downLeft"
+      repositionOnScroll={true}
+      display="block"
+      className="eui-fullWidth"
+    >
+      <EuiFlexGroup direction="column" alignItems="center" gutterSize="none">
+        <EuiFlexItem>
+          <EuiPanel
+            paddingSize="none"
+            hasBorder={false}
+            hasShadow={false}
+            color="transparent"
+            // set the width fixed to achieve text truncation
+            style={{ height: '40vh', width: '310px' }}
+          >
+            <WorkspacePickerContent
+              coreStart={coreStart}
+              registeredUseCases$={registeredUseCases$}
+              onClickWorkspace={() => setPopover(false)}
+              isInTwoLines={false}
+            />
+          </EuiPanel>
+        </EuiFlexItem>
+
+        {isDashboardAdmin && (
+          <EuiFlexItem className="eui-fullWidth">
+            <EuiHorizontalRule size="full" margin="none" />
+            <EuiSpacer size="s" />
+            <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+              <EuiFlexItem grow={false} className="eui-textLeft">
+                <EuiButtonEmpty
+                  color="primary"
+                  size="xs"
+                  data-test-subj="workspace-menu-manage-button"
+                  onClick={() => {
+                    closePopover();
+                    coreStart.application.navigateToApp(WORKSPACE_LIST_APP_ID);
+                  }}
+                >
+                  <EuiText size="s">{manageWorkspacesButton}</EuiText>
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false} className="eui-textRight">
+                <EuiButtonEmpty
+                  color="primary"
+                  size="xs"
+                  iconType="plus"
+                  key={WORKSPACE_CREATE_APP_ID}
+                  data-test-subj="workspace-menu-create-workspace-button"
+                  onClick={() => {
+                    closePopover();
+                    coreStart.application.navigateToApp(WORKSPACE_CREATE_APP_ID);
+                  }}
+                >
+                  <EuiText size="s">{createWorkspaceButton}</EuiText>
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </EuiPopover>
+  );
+};
diff --git a/src/plugins/workspace/public/plugin.test.ts b/src/plugins/workspace/public/plugin.test.ts
index 0bbf636f6397..2fba6a457322 100644
--- a/src/plugins/workspace/public/plugin.test.ts
+++ b/src/plugins/workspace/public/plugin.test.ts
@@ -221,7 +221,20 @@ describe('Workspace plugin', () => {
     );
   });
 
-  it('#setup should register registerCollapsibleNavHeader when new left nav is turned on', async () => {
+  it('#setup should register registerCollapsibleNavHeader when enter a workspace', async () => {
+    const windowSpy = jest.spyOn(window, 'window', 'get');
+    windowSpy.mockImplementation(
+      () =>
+        ({
+          location: {
+            href: 'http://localhost/w/workspaceId/app',
+          },
+        } as any)
+    );
+    workspaceClientMock.enterWorkspace.mockResolvedValueOnce({
+      success: true,
+      error: 'error',
+    });
     const setupMock = coreMock.createSetup();
     let collapsibleNavHeaderImplementation = () => null;
     setupMock.chrome.navGroup.getNavGroupEnabled.mockReturnValue(true);
@@ -234,6 +247,7 @@ describe('Workspace plugin', () => {
     const startMock = coreMock.createStart();
     await workspacePlugin.start(startMock, getMockDependencies());
     expect(collapsibleNavHeaderImplementation()).not.toEqual(null);
+    windowSpy.mockRestore();
   });
 
   it('#setup should register workspace essential use case when new home is disabled', async () => {
diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts
index 42a0d154cecb..ff6ce2c75898 100644
--- a/src/plugins/workspace/public/plugin.ts
+++ b/src/plugins/workspace/public/plugin.ts
@@ -60,6 +60,7 @@ import { UseCaseService } from './services/use_case_service';
 import { WorkspaceListCard } from './components/service_card';
 import { NavigationPublicPluginStart } from '../../../plugins/navigation/public';
 import { WorkspacePickerContent } from './components/workspace_picker_content/workspace_picker_content';
+import { WorkspaceSelector } from './components/workspace_selector/workspace_selector';
 import { HOME_CONTENT_AREAS } from '../../../plugins/content_management/public';
 import {
   registerEssentialOverviewContent,
@@ -122,7 +123,6 @@ export class WorkspacePlugin
    */
   private filterNavLinks = (core: CoreStart) => {
     const currentWorkspace$ = core.workspaces.currentWorkspace$;
-
     this.workspaceAndUseCasesCombineSubscription?.unsubscribe();
     this.workspaceAndUseCasesCombineSubscription = combineLatest([
       currentWorkspace$,
@@ -536,25 +536,15 @@ export class WorkspacePlugin
       },
     ]);
 
-    if (core.chrome.navGroup.getNavGroupEnabled()) {
-      /**
-       * Show workspace picker content when outside of workspace and not in any nav group
-       */
+    if (workspaceId) {
       core.chrome.registerCollapsibleNavHeader(() => {
         if (!this.coreStart) {
           return null;
         }
-        return React.createElement(EuiPanel, {
-          hasShadow: false,
-          hasBorder: false,
-          paddingSize: 's',
-          children: [
-            React.createElement(WorkspacePickerContent, {
-              key: 'workspacePickerContent',
-              coreStart: this.coreStart,
-              registeredUseCases$: this.registeredUseCases$,
-            }),
-          ],
+        return React.createElement(WorkspaceSelector, {
+          key: 'workspaceSelector',
+          coreStart: this.coreStart,
+          registeredUseCases$: this.registeredUseCases$,
         });
       });
     }