diff --git a/changelogs/fragments/8156.yml b/changelogs/fragments/8156.yml
new file mode 100644
index 000000000000..c7b035ce443b
--- /dev/null
+++ b/changelogs/fragments/8156.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix the UI of recent assets in the header ([#8156](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8156))
\ No newline at end of file
diff --git a/src/core/public/chrome/ui/header/recent_items.tsx b/src/core/public/chrome/ui/header/recent_items.tsx
index 298bf51d2bc6..76dc3bcb3410 100644
--- a/src/core/public/chrome/ui/header/recent_items.tsx
+++ b/src/core/public/chrome/ui/header/recent_items.tsx
@@ -135,18 +135,15 @@ export const RecentItems = ({
       ownFocus={false}
       panelPaddingSize="s"
       button={
-        <EuiButtonEmpty
-          data-test-subj="preferencesSettingButton"
-          flush="left"
+        <EuiButtonIcon
           color="primary"
+          size="xs"
           onClick={() => {
             setIsPreferencesPopoverOpen((IsPreferencesPopoverOpe) => !IsPreferencesPopoverOpe);
           }}
-        >
-          {i18n.translate('core.header.recent.preferences', {
-            defaultMessage: 'Preferences',
-          })}
-        </EuiButtonEmpty>
+          iconType="managementApp"
+          data-test-subj="preferencesSettingButton"
+        />
       }
       isOpen={isPreferencesPopoverOpen}
       anchorPosition="downLeft"
@@ -273,12 +270,13 @@ export const RecentItems = ({
       panelPaddingSize="m"
     >
       {renderBreadcrumbs}
-      <EuiSpacer size="s" />
+      <EuiSpacer size="m" />
       <EuiPanel
         hasShadow={false}
         hasBorder={false}
         paddingSize="none"
-        style={{ maxHeight: '35vh', overflow: 'auto' }}
+        style={{ maxHeight: '35vh' }}
+        className="euiYScrollWithShadows"
       >
         <EuiTitle size="xxs">
           <h4>
@@ -309,8 +307,9 @@ export const RecentItems = ({
                     <EuiIcon
                       style={{ marginRight: widthForRightMargin }}
                       type={item.meta.icon || 'apps'}
+                      color="text"
                     />
-                    {item.label}
+                    {item.label + ' '}
                     {item.workspaceName ? (
                       <EuiTextColor color="subdued">({item.workspaceName})</EuiTextColor>
                     ) : null}
@@ -328,7 +327,7 @@ export const RecentItems = ({
             })}
           </EuiText>
         )}
-        <EuiSpacer size="s" />
+        <EuiSpacer size="m" />
       </EuiPanel>
       {preferencePopover}
     </EuiPopover>