diff --git a/apps/admin-x-settings/src/components/Sidebar.tsx b/apps/admin-x-settings/src/components/Sidebar.tsx
index 62ee714dea..1fd7a2917f 100644
--- a/apps/admin-x-settings/src/components/Sidebar.tsx
+++ b/apps/admin-x-settings/src/components/Sidebar.tsx
@@ -46,7 +46,6 @@ const Sidebar: React.FC = () => {
                 {/* <SettingNavItem navid='theme' title="Theme" onClick={handleSectionClick} /> */}
                 <SettingNavItem navid='design' title="Branding and design" onClick={handleSectionClick} />
                 <SettingNavItem navid='navigation' title="Navigation" onClick={handleSectionClick} />
-                {hasRecommendations && <SettingNavItem navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
             </SettingNavSection>
 
             <SettingNavSection title="Membership">
@@ -55,6 +54,7 @@ const Sidebar: React.FC = () => {
                 <SettingNavItem navid='tiers' title="Tiers" onClick={handleSectionClick} />
                 {hasTipsAndDonations && <SettingNavItem navid='tips-or-donations' title="Tips or donations" onClick={handleSectionClick} />}
                 <SettingNavItem navid='analytics' title="Analytics" onClick={handleSectionClick} />
+                {hasRecommendations && <SettingNavItem navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
             </SettingNavSection>
 
             <SettingNavSection title="Email newsletters">
diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
index af7e9bc9ea..36ba720ba5 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
@@ -1,4 +1,3 @@
-import Avatar from '../../../../admin-x-ds/global/Avatar';
 import Button from '../../../../admin-x-ds/global/Button';
 import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal';
 import NiceModal from '@ebay/nice-modal-react';
@@ -42,10 +41,12 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
         <TableRow action={action} hideActions>
             <TableCell onClick={showDetails}>
                 <div className='group flex items-center gap-3 hover:cursor-pointer'>
-                    {recommendation.favicon && <Avatar image={recommendation.favicon} labelColor='white' />}
                     <div className={`flex grow flex-col`}>
-                        <span className='mb-0.5 font-medium'>{recommendation.title}</span>
-                        <span className='text-xs leading-snug text-grey-700'>{recommendation.reason || 'No reason'}</span>
+                        <div className="mb-1 flex items-center gap-2">
+                            {recommendation.favicon && <img alt={recommendation.title} className="h-5 w-5 rounded-sm" src={recommendation.favicon} />}
+                            <span className='line-clamp-1'>{recommendation.title}</span>
+                        </div>
+                        <span className='line-clamp-1 text-xs leading-snug text-grey-700'>{recommendation.reason || 'No reason added'}</span>
                     </div>
                 </div>
             </TableCell>
diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
index f91b2abc59..449237b2f2 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
@@ -1,4 +1,3 @@
-import Avatar from '../../../../admin-x-ds/global/Avatar';
 import Form from '../../../../admin-x-ds/global/form/Form';
 import Heading from '../../../../admin-x-ds/global/Heading';
 import React from 'react';
@@ -20,14 +19,15 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
     >
         <div>
             <Heading className='mb-2 block text-2xs font-semibold uppercase tracking-wider text-grey-700'>Preview</Heading>
-            <a className='flex items-center gap-3 rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
-                {(formState.favicon || formState.featured_image) && <Avatar image={formState.favicon ?? formState.featured_image!} labelColor='white' />}
-                <div className={`flex grow flex-col`}>
-                    <span className='word-wrap mb-0.5 font-medium'>{formState.title}</span>
-                    <span className='word-wrap text-xs leading-snug text-grey-700'>{formState.url}</span>
+            <a className='flex flex-col rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
+                <div className="mb-1 flex items-center gap-2">
+                    {(formState.favicon || formState.featured_image) && <img alt={formState.title} className="h-5 w-5 rounded-sm" src={formState.favicon ?? formState.featured_image!} />}
+                    <span className='line-clamp-1 font-medium'>{formState.title}</span>
                 </div>
+                <span className='line-clamp-1 text-xs leading-snug text-grey-700'>{formState.url}</span>
             </a>
         </div>
+
         <TextField
             error={Boolean(errors.title)}
             hint={errors.title}