diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index 9d3423276e..3d41cb6c2e 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -41,8 +41,7 @@
     "nComparisonsByYou_other": "{{count}} comparisons by you",
     "notYetComparedByYou": "Not yet compared by you",
     "contributionsArePublicMessage": "Your contributions about this item are currently public. Comparisons appear in the public data associated to your profile only if you tag both items as public.",
-    "contributionsArePrivateMessage": "Your contributions about this item are currently private. The details of your personal ratings are not published, but they may still be used to compute public aggregated scores.",
-    "personalScore": "Personal score: {{score}}"
+    "contributionsArePrivateMessage": "Your contributions about this item are currently private. The details of your personal ratings are not published, but they may still be used to compute public aggregated scores."
   },
   "entityCard": {
     "thisElementIsNotAvailable": "This element is not available anymore."
@@ -1074,9 +1073,7 @@
     "title": "My rate-later list"
   },
   "recommendationsPage": {
-    "chips": {
-      "by": "by"
-    },
+    "basedOnUserPublicContributions": "Based on public contributions by <2></2>",
     "title": {
       "results": "Results",
       "personalRecommendations": "Personal recommendations",
diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
index a5045d302e..469a12c778 100644
--- a/frontend/public/locales/fr/translation.json
+++ b/frontend/public/locales/fr/translation.json
@@ -44,8 +44,7 @@
     "nComparisonsByYou_other": "{{count}} comparaisons par vous",
     "notYetComparedByYou": "Vous ne l'avez pas encore comparée",
     "contributionsArePublicMessage": "Vos contributions impliquant cet élement sont actuellement publiques. Une comparaison n'est publiquement associée à votre profil que lorsque vous marquez explicitement ses deux élements comme publics.",
-    "contributionsArePrivateMessage": "Vos contributions impliquant cet élément sont actuellement privées. Les détails de vos jugements ne sont pas publiés, mais ils sont tout de même pris en compte pour calculer des scores agrégés publics.",
-    "personalScore": "Score personnel\u00a0: {{score}}"
+    "contributionsArePrivateMessage": "Vos contributions impliquant cet élément sont actuellement privées. Les détails de vos jugements ne sont pas publiés, mais ils sont tout de même pris en compte pour calculer des scores agrégés publics."
   },
   "entityCard": {
     "thisElementIsNotAvailable": "Cet élément n'est plus disponible."
@@ -1084,9 +1083,7 @@
     "title": "À comparer plus tard"
   },
   "recommendationsPage": {
-    "chips": {
-      "by": "d'après"
-    },
+    "basedOnUserPublicContributions": "Selon les contributions publiques de <2></2>",
     "title": {
       "results": "Résultats",
       "personalRecommendations": "Recommandations personnelles",
diff --git a/frontend/src/components/ContentHeader.tsx b/frontend/src/components/ContentHeader.tsx
index 469bea4dfc..fa2f0be4a5 100644
--- a/frontend/src/components/ContentHeader.tsx
+++ b/frontend/src/components/ContentHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Chip, Grid, Typography } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
 
 /**
  * Display a header.
@@ -12,13 +12,9 @@ import { Box, Chip, Grid, Typography } from '@mui/material';
 const ContentHeader = ({
   title,
   subtitle,
-  chipIcon,
-  chipLabel,
 }: {
   title: string;
   subtitle?: React.ReactNode;
-  chipIcon?: React.ReactElement;
-  chipLabel?: string;
 }) => {
   return (
     <Box
@@ -50,20 +46,6 @@ const ContentHeader = ({
             {title}
           </Typography>
         </Grid>
-        {/* The <ContentHeader> component could use a list of <Chip> instead
-            of only one. */}
-        {chipLabel && (
-          <>
-            <Grid item>
-              <Chip
-                icon={chipIcon}
-                color="secondary"
-                label={chipLabel}
-                variant="outlined"
-              />
-            </Grid>
-          </>
-        )}
       </Grid>
       {subtitle && (
         <Typography
diff --git a/frontend/src/features/videos/VideoCard.spec.tsx b/frontend/src/components/entity/EntityCard.spec.tsx
similarity index 97%
rename from frontend/src/features/videos/VideoCard.spec.tsx
rename to frontend/src/components/entity/EntityCard.spec.tsx
index 7354a07a5a..a39b916b75 100644
--- a/frontend/src/features/videos/VideoCard.spec.tsx
+++ b/frontend/src/components/entity/EntityCard.spec.tsx
@@ -4,14 +4,14 @@ import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@mui/material/styles';
 
 import { theme } from 'src/theme';
-import VideoCard from './VideoCard';
+import EntityCard from 'src/components/entity/EntityCard';
 import { Recommendation, TypeEnum } from 'src/services/openapi';
 
 const renderVideoCard = (video: Recommendation) =>
   render(
     <Router>
       <ThemeProvider theme={theme}>
-        <VideoCard video={video} />
+        <EntityCard result={video} displayImage={false} />
       </ThemeProvider>
     </Router>
   );
diff --git a/frontend/src/components/entity/EntityCard.tsx b/frontend/src/components/entity/EntityCard.tsx
index ceefbceee0..971929d646 100644
--- a/frontend/src/components/entity/EntityCard.tsx
+++ b/frontend/src/components/entity/EntityCard.tsx
@@ -54,6 +54,7 @@ export interface EntityCardProps {
   // Configuration specific to the entity type.
   entityTypeConfig?: { [k in TypeEnum]?: { [k: string]: JSONValue } };
   displayContextAlert?: boolean;
+  displayImage?: boolean;
 }
 
 const EntityCard = ({
@@ -65,6 +66,7 @@ const EntityCard = ({
   showRatingControl = false,
   onRatingChange,
   displayContextAlert = false,
+  displayImage = true,
 }: EntityCardProps) => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -150,25 +152,27 @@ const EntityCard = ({
       )}
       {contentDisplayed && (
         <>
-          <Grid2
-            sx={[
-              {
-                display: 'flex',
-                justifyContent: 'center',
-              },
-              compact ? {} : { maxWidth: { sm: '240px' } },
-            ]}
-            size={{
-              xs: 12,
-              sm: compact ? 12 : 'auto',
-            }}
-          >
-            <EntityImagery
-              entity={entity}
-              compact={compact}
-              config={entityTypeConfig}
-            />
-          </Grid2>
+          {displayImage && (
+            <Grid2
+              sx={[
+                {
+                  display: 'flex',
+                  justifyContent: 'center',
+                },
+                compact ? {} : { maxWidth: { sm: '240px' } },
+              ]}
+              size={{
+                xs: 12,
+                sm: compact ? 12 : 'auto',
+              }}
+            >
+              <EntityImagery
+                entity={entity}
+                compact={compact}
+                config={entityTypeConfig}
+              />
+            </Grid2>
+          )}
           <Grid2
             data-testid="video-card-info"
             container
@@ -192,7 +196,7 @@ const EntityCard = ({
             sx={{
               display: 'flex',
               alignItems: 'end',
-              justifyContent: 'space-between',
+              justifyContent: 'start',
               flexDirection: 'column',
               [theme.breakpoints.down('sm')]: {
                 flexDirection: 'row',
diff --git a/frontend/src/components/entity/EntityImagery.tsx b/frontend/src/components/entity/EntityImagery.tsx
index 7fc17627e3..368caeb19e 100644
--- a/frontend/src/components/entity/EntityImagery.tsx
+++ b/frontend/src/components/entity/EntityImagery.tsx
@@ -73,12 +73,24 @@ export const VideoPlayer = ({
     <ReactPlayer
       url={`https://youtube.com/watch?v=${videoId}`}
       playing
-      light
+      light={`https://i.ytimg.com/vi/${videoId}/sddefault.jpg`}
       width="100%"
       height="100%"
       wrapper={DurationWrapper}
       duration={duration}
       controls={controls}
+      config={{
+        playerVars: {
+          /*
+          Setting `playsinline=0` is intended to make the video start in fullscreen on iOS.
+          However, this doesn't always work as expected. When a user clicks the "light"
+          player thumbnail, the player attempts to autoplay the video. In some cases,
+          Safari might block this autoplay (if the player loads too slowly?), as the video
+          playback might not be recognized as a direct result of the user's click.
+          */
+          playsinline: 0,
+        },
+      }}
     />
   );
 };
diff --git a/frontend/src/features/entity_selector/AutoEntityButton.tsx b/frontend/src/features/entity_selector/AutoEntityButton.tsx
index ccb28f384f..be030c982e 100644
--- a/frontend/src/features/entity_selector/AutoEntityButton.tsx
+++ b/frontend/src/features/entity_selector/AutoEntityButton.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Tooltip, Button, useMediaQuery } from '@mui/material';
-import { Autorenew, SwipeUp } from '@mui/icons-material';
+import { Autorenew, SwipeVertical } from '@mui/icons-material';
 
 import { useCurrentPoll } from 'src/hooks/useCurrentPoll';
 import { theme } from 'src/theme';
@@ -50,7 +50,7 @@ const AutoEntityButton = ({
           startIcon={compactLabelLoc === 'left' ? compactLabel : undefined}
           endIcon={compactLabelLoc === 'right' ? compactLabel : undefined}
         >
-          <SwipeUp />
+          <SwipeVertical />
         </MobileButton>
       ) : (
         <Tooltip
diff --git a/frontend/src/features/ratings/RatingOrderByInput.tsx b/frontend/src/features/ratings/RatingOrderByInput.tsx
index 44e19f4f85..b983bd0c29 100644
--- a/frontend/src/features/ratings/RatingOrderByInput.tsx
+++ b/frontend/src/features/ratings/RatingOrderByInput.tsx
@@ -10,8 +10,10 @@ import {
   Select,
   SelectChangeEvent,
 } from '@mui/material';
-import CallMadeIcon from '@mui/icons-material/CallMade';
-import CallReceivedIcon from '@mui/icons-material/CallReceived';
+import {
+  NorthEast as Ascending,
+  SouthEast as Descending,
+} from '@mui/icons-material';
 
 import { TitledSection } from 'src/components';
 import { useCurrentPoll } from 'src/hooks';
@@ -37,42 +39,42 @@ function RatingOrderByInput(props: FilterProps) {
       {
         label: t('ratingOrderByInput.lastComparisonDate'),
         value: 'last_compared_at',
-        icon: CallMadeIcon,
+        icon: Ascending,
       },
       {
         label: t('ratingOrderByInput.lastComparisonDate'),
         value: '-last_compared_at',
-        icon: CallReceivedIcon,
+        icon: Descending,
       },
       {
         label: t('ratingOrderByInput.numberOfComparisons'),
         value: 'n_comparisons',
-        icon: CallMadeIcon,
+        icon: Ascending,
       },
       {
         label: t('ratingOrderByInput.numberOfComparisons'),
         value: '-n_comparisons',
-        icon: CallReceivedIcon,
+        icon: Descending,
       },
       {
         label: t('ratingOrderByInput.collectiveTournesolScore'),
         value: 'collective_score',
-        icon: CallMadeIcon,
+        icon: Ascending,
       },
       {
         label: t('ratingOrderByInput.collectiveTournesolScore'),
         value: '-collective_score',
-        icon: CallReceivedIcon,
+        icon: Descending,
       },
       {
         label: t('ratingOrderByInput.individualTournesolScore'),
         value: 'individual_score',
-        icon: CallMadeIcon,
+        icon: Ascending,
       },
       {
         label: t('ratingOrderByInput.individualTournesolScore'),
         value: '-individual_score',
-        icon: CallReceivedIcon,
+        icon: Descending,
       },
     ],
     [t]
@@ -121,7 +123,7 @@ function RatingOrderByInput(props: FilterProps) {
                   {getMetadataName(t, pollName, metadata)}
                 </ListItemText>
                 &nbsp;
-                <CallMadeIcon fontSize="small" />
+                <Ascending fontSize="small" />
               </Box>
             </MenuItem>,
             <MenuItem key={`-${metadata}`} value={`-${metadata}`}>
@@ -135,7 +137,7 @@ function RatingOrderByInput(props: FilterProps) {
                   {getMetadataName(t, pollName, metadata)}
                 </ListItemText>
                 &nbsp;
-                <CallReceivedIcon fontSize="small" />
+                <Descending fontSize="small" />
               </Box>
             </MenuItem>,
           ])}
diff --git a/frontend/src/features/videos/VideoCard.tsx b/frontend/src/features/videos/VideoCard.tsx
deleted file mode 100644
index 5bb3652ec6..0000000000
--- a/frontend/src/features/videos/VideoCard.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Grid,
-  Box,
-  Collapse,
-  IconButton,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
-
-import { ActionList } from 'src/utils/types';
-import { Recommendation } from 'src/services/openapi';
-import {
-  ExpandMore as ExpandMoreIcon,
-  ExpandLess as ExpandLessIcon,
-} from '@mui/icons-material';
-import EntityCardTitle from 'src/components/entity/EntityCardTitle';
-import EntityCardScores from 'src/components/entity/EntityCardScores';
-import { InternalLink } from 'src/components';
-import { entityCardMainSx } from 'src/components/entity/style';
-import { DurationWrapper } from 'src/components/entity/EntityImagery';
-import { VideoMetadata } from 'src/components/entity/EntityMetadata';
-import { useCurrentPoll } from 'src/hooks';
-import { UID_YT_NAMESPACE } from 'src/utils/constants';
-
-function VideoCard({
-  video,
-  actions = [],
-  settings = [],
-  compact = false,
-  personalScore,
-  showPlayer = true,
-}: {
-  video: Recommendation;
-  actions?: ActionList;
-  settings?: ActionList;
-  compact?: boolean;
-  personalScore?: number;
-  showPlayer?: boolean;
-}) {
-  const theme = useTheme();
-
-  const { t } = useTranslation();
-  const { baseUrl } = useCurrentPoll();
-
-  const entity = video.entity;
-  const videoId = entity.metadata.video_id;
-
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'), {
-    noSsr: true,
-  });
-  const [settingsVisible, setSettingsVisible] = useState(!isSmallScreen);
-
-  return (
-    <Grid container sx={entityCardMainSx}>
-      {showPlayer && (
-        <Grid
-          item
-          xs={12}
-          sm={compact ? 12 : 'auto'}
-          sx={[
-            {
-              display: 'flex',
-              justifyContent: 'center',
-            },
-            compact ? {} : { minWidth: '240px', maxWidth: { sm: '240px' } },
-          ]}
-        >
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              bgcolor: 'black',
-              width: '100%',
-              lineHeight: 0,
-              '& > img': {
-                flex: 1,
-              },
-            }}
-          >
-            <InternalLink
-              to={`${baseUrl}/entities/${UID_YT_NAMESPACE}${videoId}`}
-              sx={{ width: '100%' }}
-            >
-              <DurationWrapper duration={entity.metadata.duration || undefined}>
-                <img
-                  className="full-width entity-thumbnail"
-                  src={`https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`}
-                  alt={entity.metadata.name}
-                />
-              </DurationWrapper>
-            </InternalLink>
-          </Box>
-        </Grid>
-      )}
-      <Grid
-        item
-        xs={12}
-        sm={compact ? 12 : true}
-        sx={{
-          padding: 1,
-        }}
-        data-testid="video-card-info"
-        container
-        direction="column"
-      >
-        <EntityCardTitle
-          uid={entity.uid}
-          title={entity.metadata.name}
-          compact={compact}
-        />
-        <VideoMetadata
-          views={entity.metadata.views}
-          publicationDate={entity.metadata.publication_date}
-          uploader={entity.metadata.uploader}
-        />
-        {!compact && <EntityCardScores result={video} />}
-        {personalScore !== undefined &&
-          t('video.personalScore', { score: personalScore.toFixed(0) })}
-      </Grid>
-      <Grid
-        item
-        xs={12}
-        sm={compact ? 12 : 1}
-        sx={{
-          display: 'flex',
-          alignItems: 'end',
-          justifyContent: 'space-between',
-          flexDirection: 'column',
-          [theme.breakpoints.down('sm')]: {
-            flexDirection: 'row',
-          },
-        }}
-      >
-        {actions.map((Action, index) =>
-          typeof Action === 'function' ? (
-            <Action key={index} uid={entity.uid} />
-          ) : (
-            Action
-          )
-        )}
-        {isSmallScreen && settings.length > 0 && (
-          <>
-            <Box
-              sx={{
-                flexGrow: 1,
-              }}
-            />
-            <IconButton
-              size="small"
-              aria-label={t('video.labelShowSettings')}
-              onClick={() => setSettingsVisible(!settingsVisible)}
-            >
-              {settingsVisible ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-            </IconButton>
-          </>
-        )}
-      </Grid>
-      {settings.length > 0 && (
-        <Grid
-          item
-          xs={12}
-          sx={{
-            p: 0,
-          }}
-        >
-          <Collapse in={settingsVisible || !isSmallScreen}>
-            <Box
-              sx={{
-                paddingY: 1,
-                borderTop: '1px solid rgba(0, 0, 0, 0.12)',
-                display: 'flex',
-                gap: '16px',
-                color: 'text.secondary',
-              }}
-            >
-              {settings.map((Action, index) =>
-                typeof Action === 'function' ? (
-                  <Action key={index} uid={entity.uid} />
-                ) : (
-                  Action
-                )
-              )}
-            </Box>
-          </Collapse>
-        </Grid>
-      )}
-    </Grid>
-  );
-}
-
-export default VideoCard;
diff --git a/frontend/src/pages/recommendations/RecommendationPage.tsx b/frontend/src/pages/recommendations/RecommendationPage.tsx
index 75a7d68f7a..568d9df931 100644
--- a/frontend/src/pages/recommendations/RecommendationPage.tsx
+++ b/frontend/src/pages/recommendations/RecommendationPage.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useLocation, useHistory, useParams } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
-import { Box, Grid } from '@mui/material';
+import { Box, Chip, Grid } from '@mui/material';
 import { Person } from '@mui/icons-material';
 
 import { ContentBox, ContentHeader, LoaderWrapper } from 'src/components';
@@ -134,8 +134,15 @@ function RecommendationsPage() {
       {displayPersonalRecommendations ? (
         <ContentHeader
           title={getRecommendationPageName(t, pollName, true)}
-          chipIcon={<Person />}
-          chipLabel={t('recommendationsPage.chips.by') + ` ${username}`}
+          subtitle={
+            <Trans
+              t={t}
+              i18nKey="recommendationsPage.basedOnUserPublicContributions"
+            >
+              Based on public contributions by{' '}
+              <Chip icon={<Person />} label={username} />
+            </Trans>
+          }
         />
       ) : (
         <ContentHeader title={getRecommendationPageName(t, pollName)} />
diff --git a/frontend/src/pages/videos/VideoAnalysisPage.tsx b/frontend/src/pages/videos/VideoAnalysisPage.tsx
index 8bb4aba697..6b08a2229e 100644
--- a/frontend/src/pages/videos/VideoAnalysisPage.tsx
+++ b/frontend/src/pages/videos/VideoAnalysisPage.tsx
@@ -9,7 +9,7 @@ import CriteriaBarChart from 'src/components/CriteriaBarChart';
 import { VideoPlayer } from 'src/components/entity/EntityImagery';
 import CriteriaScoresDistribution from 'src/features/charts/CriteriaScoresDistribution';
 import EntityContextBox from 'src/features/entity_context/EntityContextBox';
-import VideoCard from 'src/features/videos/VideoCard';
+import EntityCard from 'src/components/entity/EntityCard';
 import { useLoginState, useScrollToLocation } from 'src/hooks';
 import { Recommendation } from 'src/services/openapi';
 import { PersonalCriteriaScoresContextProvider } from 'src/hooks/usePersonalCriteriaScores';
@@ -75,7 +75,7 @@ export const VideoAnalysis = ({ video }: { video: Recommendation }) => {
             <VideoAnalysisActionBar video={video} />
           </Grid2>
           <Grid2 size={12}>
-            <VideoCard video={video} actions={actions} showPlayer={false} />
+            <EntityCard result={video} actions={actions} displayImage={false} />
           </Grid2>
           {video.entity_contexts.length > 0 && (
             <Grid2 size={12}>
diff --git a/frontend/src/utils/action.tsx b/frontend/src/utils/action.tsx
index c7bbeba17a..7790a14362 100644
--- a/frontend/src/utils/action.tsx
+++ b/frontend/src/utils/action.tsx
@@ -24,7 +24,7 @@ export const CompareNowAction = ({ uid }: { uid: string }) => {
   return (
     <Tooltip title={`${t('actions.compareNow')}`} placement="left">
       <IconButton
-        sx={{ color: '#CDCABC' }}
+        color="secondary"
         size="medium"
         component={Link}
         to={`${baseUrl}/comparison?uidA=${uid}`}
@@ -56,12 +56,7 @@ export const AddToRateLaterList = ({ uid }: { uid: string }) => {
   };
   return (
     <Tooltip title={`${t('actions.rateLater')}`} placement="left">
-      <IconButton
-        size="medium"
-        color="secondary"
-        onClick={handleCreation}
-        sx={{ color: '#CDCABC' }}
-      >
+      <IconButton size="medium" color="secondary" onClick={handleCreation}>
         <AddIcon />
       </IconButton>
     </Tooltip>
@@ -77,13 +72,13 @@ export const RemoveFromRateLater = (asyncCallback?: () => void) => {
     return (
       <Tooltip title={`${t('actions.remove')}`} placement="left">
         <IconButton
+          color="secondary"
           size="medium"
           onClick={async () => {
             await UsersService.usersMeRateLaterDestroy({ pollName, uid });
             if (asyncCallback) await asyncCallback();
             showSuccessAlert(t('actions.videoDeletedFromRateLaterList'));
           }}
-          sx={{ color: '#CDCABC' }}
         >
           <DeleteIcon />
         </IconButton>
@@ -100,7 +95,7 @@ export const AnalysisPageLink = ({ uid }: { uid: string }) => {
   return (
     <Tooltip title={`${t('actions.analysis')}`} placement="left">
       <IconButton
-        sx={{ color: '#CDCABC' }}
+        color="secondary"
         size="medium"
         component={Link}
         to={`${baseUrl}/entities/${uid}`}