diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts
index 03d9f1f..74ce1f8 100644
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@@ -94,7 +94,27 @@ const resources = {
         "buyNow": "Buy Now",
         "reviews": "reviews",
         "rank": "Rank",
-        "loading": "Loading..."
+        "loading": "Loading...",
+        "replies": "Replies",
+        "reply": "Reply",
+        "edit": "Edit",
+        "delete": "Delete",
+        "save": "Save",
+        "cancel": "Cancel"
+      },
+      "community": {
+        "title": "Community Activity",
+        "subtitle": "Stay updated with your circle's latest ratings and discussions.",
+        "quietFeed": "Your feed is a bit empty...",
+        "followMore": "Follow more people to see their flavor ratings here!",
+        "topRated": "Circle's Top Rated",
+        "notifications": "Recent Notifications",
+        "notifReply": "replied",
+        "notifMention": "mentioned you",
+        "noNotifications": "No notifications.",
+        "searchFriends": "Search friends...",
+        "writeReply": "Add a reply...",
+        "rated": "rated"
       },
       "about": {
         "title": "About This Project",
@@ -204,7 +224,27 @@ const resources = {
         "buyNow": "Jetzt kaufen",
         "reviews": "Bewertungen",
         "rank": "Rang",
-        "loading": "Wird geladen..."
+        "loading": "Wird geladen...",
+        "replies": "Antworten",
+        "reply": "Antworten",
+        "edit": "Bearbeiten",
+        "delete": "Löschen",
+        "save": "Speichern",
+        "cancel": "Abbrechen"
+      },
+      "community": {
+        "title": "Community-Aktivität",
+        "subtitle": "Bleib auf dem Laufenden mit den neuesten Bewertungen und Diskussionen deines Kreises.",
+        "quietFeed": "Dein Feed ist noch etwas leer...",
+        "followMore": "Folge mehr Personen, um deren Bewertungen hier zu sehen!",
+        "topRated": "Top-Bewertungen deines Kreises",
+        "notifications": "Neueste Benachrichtigungen",
+        "notifReply": "hat geantwortet",
+        "notifMention": "hat dich erwähnt",
+        "noNotifications": "Keine Benachrichtigungen.",
+        "searchFriends": "Freunde suchen...",
+        "writeReply": "Eine Antwort hinzufügen...",
+        "rated": "bewertete"
       },
       "about": {
         "title": "Über dieses Projekt",
diff --git a/frontend/src/pages/CommunityFeed.tsx b/frontend/src/pages/CommunityFeed.tsx
index 2a001ee..7f5f5e6 100644
--- a/frontend/src/pages/CommunityFeed.tsx
+++ b/frontend/src/pages/CommunityFeed.tsx
@@ -32,6 +32,7 @@ import api from '../api';
 import { useTitle } from '../hooks/useTitle';
 import RichText from '../components/RichText';
 import { formatDate } from '../utils/date';
+import { useTranslation } from 'react-i18next';
 
 interface Reply {
     id: number;
@@ -76,7 +77,8 @@ interface Notification {
 }
 
 const CommunityFeed: React.FC = () => {
-  useTitle('Community Feed');
+  const { t } = useTranslation();
+  useTitle(t('community.title'));
   const navigate = useNavigate();
   const [ratings, setRatings] = useState<FeedRating[]>([]);
   const [following, setFollowing] = useState<FollowedUser[]>([]);
@@ -175,9 +177,9 @@ const CommunityFeed: React.FC = () => {
   return (
     <Container maxWidth="lg" sx={{ py: 4 }}>
       <Box sx={{ mb: 6 }}>
-          <Typography variant="h3" sx={{ fontWeight: '800', mb: 1 }}>Community Activity</Typography>
+          <Typography variant="h3" sx={{ fontWeight: '800', mb: 1 }}>{t('community.title')}</Typography>
           <Typography variant="h6" color="text.secondary">
-              Stay updated with your circle's latest ratings and discussions.
+              {t('community.subtitle')}
           </Typography>
       </Box>
 
@@ -194,12 +196,12 @@ const CommunityFeed: React.FC = () => {
                     border: '1px dashed', 
                     borderColor: 'divider' 
                 }}>
-                    <Typography variant="h6" gutterBottom color="text.secondary">Your feed is a bit empty...</Typography>
+                    <Typography variant="h6" gutterBottom color="text.secondary">{t('community.quietFeed')}</Typography>
                     <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-                        Follow more people to see their flavor ratings here!
+                        {t('community.followMore')}
                     </Typography>
                     <Button variant="contained" component={Link} to="/" sx={{ borderRadius: 2 }}>
-                        Explore Flavors
+                        {t('home.exploreFlavors')}
                     </Button>
                 </Box>
             ) : (
@@ -254,14 +256,14 @@ const CommunityFeed: React.FC = () => {
                                 <Box sx={{ display: 'flex', gap: 3 }}>
                                     <Box sx={{ flex: 1 }}>
                                         <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                                            Rated <MuiLink component={Link} to={`/flavor/${rating.flavor}`} sx={{ color: 'primary.main', fontWeight: 'bold', textDecoration: 'none' }}>{rating.flavor_name}</MuiLink>
+                                            {t('community.rated')} <MuiLink component={Link} to={`/flavor/${rating.flavor}`} sx={{ color: 'primary.main', fontWeight: 'bold', textDecoration: 'none' }}>{rating.flavor_name}</MuiLink>
                                         </Typography>
                                         {rating.comment ? (
                                             <Typography variant="body1" sx={{ lineHeight: 1.6, fontStyle: 'italic', color: 'text.primary' }}>
                                                 <RichText text={rating.comment} />
                                             </Typography>
                                         ) : (
-                                            <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>No review text.</Typography>
+                                            <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>{t('dashboard.noRatings')}</Typography>
                                         )}
                                     </Box>
                                     <Link to={`/flavor/${rating.flavor}`} style={{ flexShrink: 0 }}>
@@ -280,7 +282,7 @@ const CommunityFeed: React.FC = () => {
                                     onClick={() => handleReplyToggle(rating.id)}
                                     sx={{ textTransform: 'none', color: 'text.secondary' }}
                                 >
-                                    {rating.replies.length > 0 ? `${rating.replies.length} Replies` : 'Reply'}
+                                    {rating.replies.length > 0 ? `${rating.replies.length} ${t('common.replies')}` : t('common.reply')}
                                 </Button>
 
                                 <Collapse in={expandedReplies[rating.id]}>
@@ -296,7 +298,7 @@ const CommunityFeed: React.FC = () => {
                                         ))}
                                         <Box sx={{ mt: 2, display: 'flex', gap: 1 }}>
                                             <TextField 
-                                                fullWidth size="small" placeholder="Add a reply..." 
+                                                fullWidth size="small" placeholder={t('community.writeReply')} 
                                                 value={replyInputs[rating.id] || ''} 
                                                 onChange={(e) => setReplyInputs(prev => ({ ...prev, [rating.id]: e.target.value }))}
                                                 onKeyDown={(e) => e.key === 'Enter' && handleReplySubmit(rating.id)}
@@ -327,11 +329,11 @@ const CommunityFeed: React.FC = () => {
                   <Card elevation={0} sx={{ borderRadius: 4, border: '1px solid', borderColor: 'divider' }}>
                       <Box sx={{ p: 2, borderBottom: '1px solid', borderColor: 'divider', bgcolor: alpha('#000', 0.02), display: 'flex', alignItems: 'center', gap: 1 }}>
                           <NotificationsIcon color="primary" fontSize="small" />
-                          <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>Recent Notifications</Typography>
+                          <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>{t('community.notifications')}</Typography>
                       </Box>
                       <List disablePadding>
                           {notifications.length === 0 ? (
-                              <Box sx={{ p: 3, textAlign: 'center' }}><Typography variant="body2" color="text.secondary">No notifications.</Typography></Box>
+                              <Box sx={{ p: 3, textAlign: 'center' }}><Typography variant="body2" color="text.secondary">{t('community.noNotifications')}</Typography></Box>
                           ) : (
                               notifications.map(n => (
                                   <ListItemButton key={n.id} onClick={() => n.flavor_id && navigate(`/flavor/${n.flavor_id}`)} sx={{ py: 1.5 }}>
@@ -341,7 +343,7 @@ const CommunityFeed: React.FC = () => {
                                       <ListItemText 
                                         primary={
                                             <Typography variant="body2" sx={{ fontSize: '0.8rem' }}>
-                                                <strong>{n.actor_username}</strong> {n.notification_type === 'reply' ? 'replied' : 'mentioned you'}
+                                                <strong>{n.actor_username}</strong> {n.notification_type === 'reply' ? t('community.notifReply') : t('community.notifMention')}
                                             </Typography>
                                         }
                                         secondary={formatTimestamp(n.created_at)}
@@ -357,11 +359,11 @@ const CommunityFeed: React.FC = () => {
                   <Card elevation={0} sx={{ borderRadius: 4, border: '1px solid', borderColor: 'divider' }}>
                       <Box sx={{ p: 2, borderBottom: '1px solid', borderColor: 'divider', bgcolor: alpha('#000', 0.02), display: 'flex', alignItems: 'center', gap: 1 }}>
                           <PeopleIcon color="primary" fontSize="small" />
-                          <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>Following</Typography>
+                          <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>{t('nav.following')}</Typography>
                       </Box>
                       <Box sx={{ p: 1.5 }}>
                            <TextField
-                                fullWidth size="small" placeholder="Search friends..."
+                                fullWidth size="small" placeholder={t('community.searchFriends')}
                                 value={followingSearch}
                                 onChange={(e) => setFollowingSearch(e.target.value)}
                                 InputProps={{ startAdornment: <SearchIcon fontSize="small" sx={{ mr: 1, color: 'text.secondary' }} /> }}
@@ -381,7 +383,7 @@ const CommunityFeed: React.FC = () => {
                   <Card elevation={0} sx={{ borderRadius: 4, border: '1px solid', borderColor: 'divider' }}>
                       <Box sx={{ p: 2, borderBottom: '1px solid', borderColor: 'divider', bgcolor: alpha('#000', 0.02), display: 'flex', alignItems: 'center', gap: 1 }}>
                           <WhatshotIcon color="error" fontSize="small" />
-                          <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>Circle's Top Rated</Typography>
+                          <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>{t('community.topRated')}</Typography>
                       </Box>
                       <List disablePadding>
                           {topFollowed.map((flavor, idx) => (
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
index 66b19a8..6e320c0 100644
--- a/frontend/src/pages/MainPage.tsx
+++ b/frontend/src/pages/MainPage.tsx
@@ -251,56 +251,63 @@ const MainPage: React.FC = () => {
                         <Button variant="contained" component={Link} to="/" size="small" sx={{ borderRadius: 2 }}>{t('home.exploreFlavors')}</Button>
                     </Paper>
                 ) : (
-                    <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }, gap: 3 }}>
+                    <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }, gap: 2 }}>
                         {feedRatings.map(rating => (
                             <Card 
                                 key={rating.id} 
+                                component={Link}
+                                to={`/flavor/${rating.flavor}`}
                                 sx={{ 
                                     borderRadius: 3, 
-                                    transition: 'all 0.3s ease', 
-                                    '&:hover': { transform: 'translateY(-4px)', boxShadow: '0 12px 24px rgba(0,0,0,0.15)' },
+                                    textDecoration: 'none',
+                                    transition: 'all 0.2s ease', 
+                                    '&:hover': { transform: 'translateY(-2px)', borderColor: 'primary.main', boxShadow: '0 8px 16px rgba(0,0,0,0.1)' },
                                     bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
                                     backdropFilter: 'blur(10px)',
                                     border: '1px solid',
-                                    borderColor: (theme) => alpha(theme.palette.text.primary, 0.05)
+                                    borderColor: 'divider',
+                                    color: 'inherit',
+                                    display: 'flex',
+                                    flexDirection: 'column'
                                 }}
                             >
-                                <CardContent sx={{ p: { xs: 1.5, sm: 2 } }}>
-                                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
-                                        <Link to={`/profile/${rating.user}`} style={{ textDecoration: 'none', color: 'inherit', display: 'flex', alignItems: 'center' }}>
-                                            <Avatar src={rating.user_avatar || undefined} sx={{ width: 24, height: 24, mr: 1 }}>
+                                <CardContent sx={{ p: 2, flex: 1, '&:last-child': { pb: 2 } }}>
+                                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1.5 }}>
+                                        <Box sx={{ display: 'flex', alignItems: 'center', minWidth: 0, flex: 1 }}>
+                                            <Avatar src={rating.user_avatar || undefined} sx={{ width: 22, height: 22, mr: 1 }}>
                                                 {!rating.user_avatar && rating.user.charAt(0).toUpperCase()}
                                             </Avatar>
-                                            <Typography variant="subtitle2" sx={{ fontWeight: 'bold', fontSize: '0.8rem' }}>{rating.user}</Typography>
-                                        </Link>
-                                        <Typography variant="caption" color="text.secondary" sx={{ ml: 0.5 }}>rated</Typography>
-                                        <Box sx={{ flexGrow: 1 }} />
-                                        <Typography variant="caption" color="text.secondary">
-                                            {formatDate(rating.created_at)}
+                                            <Typography variant="subtitle2" sx={{ fontWeight: 'bold', fontSize: '0.8rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                                {rating.user}
+                                            </Typography>
+                                        </Box>
+                                        <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.65rem', ml: 1, whiteSpace: 'nowrap' }}>
+                                            {t('home.rated')} {formatDate(rating.created_at)}
                                         </Typography>
                                     </Box>
-                                    <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
+                                    
+                                    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
                                         <Box 
                                             component="img" 
                                             src={rating.flavor_image || undefined} 
-                                            sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover', border: '1px solid', borderColor: 'divider' }} 
+                                            sx={{ width: 44, height: 44, borderRadius: 1.5, objectFit: 'contain', bgcolor: 'action.hover', p: 0.5, border: '1px solid', borderColor: 'divider' }} 
                                         />
                                         <Box sx={{ minWidth: 0, flex: 1 }}>
-                                            <Link to={`/flavor/${rating.flavor}`} style={{ textDecoration: 'none', color: 'inherit' }}>
-                                                <Typography variant="body2" sx={{ fontWeight: 'bold', display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden', fontSize: '0.85rem', mb: 0.5 }}>
-                                                    {rating.flavor_name}
+                                            <Typography variant="body2" sx={{ fontWeight: 'bold', lineHeight: 1.2, mb: 0.5, fontSize: '0.85rem', display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+                                                {rating.flavor_name}
+                                            </Typography>
+                                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                                                <Typography variant="caption" sx={{ 
+                                                    fontWeight: '900', 
+                                                    color: 'primary.main', 
+                                                    bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1),
+                                                    px: 1,
+                                                    py: 0.2,
+                                                    borderRadius: 1,
+                                                    fontSize: '0.75rem'
+                                                }}>
+                                                    {rating.score} / 10
                                                 </Typography>
-                                            </Link>
-                                            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                                                {/* Compact rating for anything below Large desktop to prevent cutoffs */}
-                                                <Box sx={{ display: { xs: 'flex', lg: 'none' }, alignItems: 'center', gap: 0.5 }}>
-                                                    <StarIcon sx={{ fontSize: '1rem', color: 'primary.main' }} />
-                                                    <Typography variant="caption" sx={{ fontWeight: 'bold' }}>{rating.score}/10</Typography>
-                                                </Box>
-                                                <Box sx={{ display: { xs: 'none', lg: 'flex' }, alignItems: 'center' }}>
-                                                    <MuiRating value={rating.score} readOnly size="small" max={10} />
-                                                    <Typography variant="caption" sx={{ ml: 1, fontWeight: 'bold' }}>{rating.score}/10</Typography>
-                                                </Box>
                                             </Box>
                                         </Box>
                                     </Box>
diff --git a/frontend/src/pages/flavors/FlavorDetail.tsx b/frontend/src/pages/flavors/FlavorDetail.tsx
index 93cb0dd..de7f9c2 100644
--- a/frontend/src/pages/flavors/FlavorDetail.tsx
+++ b/frontend/src/pages/flavors/FlavorDetail.tsx
@@ -388,8 +388,8 @@ const FlavorDetail: React.FC = () => {
                                         onChange={(e) => setEditComment(e.target.value)}
                                     />
                                     <Box sx={{ display: 'flex', gap: 1 }}>
-                                        <Button variant="contained" onClick={() => handleUpdateRating(rating.id)}>Save</Button>
-                                        <Button onClick={() => setEditMode(null)}>Cancel</Button>
+                                        <Button variant="contained" onClick={() => handleUpdateRating(rating.id)}>{t('common.save')}</Button>
+                                        <Button onClick={() => setEditMode(null)}>{t('common.cancel')}</Button>
                                     </Box>
                                 </Box>
                             ) : (
@@ -437,8 +437,8 @@ const FlavorDetail: React.FC = () => {
                                         <Box /> 
                                         {currentUser === rating.user && (
                                             <Box>
-                                                <Button size="small" onClick={() => startEdit(rating)} sx={{ minWidth: 0, mr: 1 }}>Edit</Button>
-                                                <Button size="small" color="error" onClick={() => handleDeleteRating(rating.id)} sx={{ minWidth: 0 }}>Delete</Button>
+                                                <Button size="small" onClick={() => startEdit(rating)} sx={{ minWidth: 0, mr: 1 }}>{t('common.edit')}</Button>
+                                                <Button size="small" color="error" onClick={() => handleDeleteRating(rating.id)} sx={{ minWidth: 0 }}>{t('common.delete')}</Button>
                                             </Box>
                                         )}
                                     </Box>
@@ -471,8 +471,8 @@ const FlavorDetail: React.FC = () => {
                                                     </Typography>
                                                     {currentUser === reply.user && editingReplyId !== reply.id && (
                                                         <Box sx={{ display: 'flex' }}>
-                                                            <Button size="small" sx={{ minWidth: 0, p: 0.5, fontSize: '0.7rem' }} onClick={() => { setEditingReplyId(reply.id); setEditReplyText(reply.text); }}>Edit</Button>
-                                                            <Button size="small" color="error" sx={{ minWidth: 0, p: 0.5, fontSize: '0.7rem' }} onClick={() => handleDeleteReply(reply.id)}>Delete</Button>
+                                                            <Button size="small" sx={{ minWidth: 0, p: 0.5, fontSize: '0.7rem' }} onClick={() => { setEditingReplyId(reply.id); setEditReplyText(reply.text); }}>{t('common.edit')}</Button>
+                                                            <Button size="small" color="error" sx={{ minWidth: 0, p: 0.5, fontSize: '0.7rem' }} onClick={() => handleDeleteReply(reply.id)}>{t('common.delete')}</Button>
                                                         </Box>
                                                     )}
                                                 </Box>
@@ -487,8 +487,8 @@ const FlavorDetail: React.FC = () => {
                                                         onChange={(e) => setEditReplyText(e.target.value)}
                                                     />
                                                     <Box sx={{ display: 'flex', gap: 1 }}>
-                                                        <Button variant="contained" size="small" onClick={() => handleUpdateReply(reply.id)}>Save</Button>
-                                                        <Button size="small" onClick={() => setEditingReplyId(null)}>Cancel</Button>
+                                                        <Button variant="contained" size="small" onClick={() => handleUpdateReply(reply.id)}>{t('common.save')}</Button>
+                                                        <Button size="small" onClick={() => setEditingReplyId(null)}>{t('common.cancel')}</Button>
                                                     </Box>
                                                 </Box>
                                             ) : (
@@ -505,13 +505,13 @@ const FlavorDetail: React.FC = () => {
                                 <Box sx={{ mt: 2, display: 'flex', gap: 1 }}>
                                     <TextField 
                                         size="small" 
-                                        placeholder="Write a reply..." 
+                                        placeholder={t('community.writeReply')} 
                                         fullWidth 
                                         value={replyInputs[rating.id] || ''} 
                                         onChange={(e) => setReplyInputs({ ...replyInputs, [rating.id]: e.target.value })} 
                                         sx={{ '& .MuiOutlinedInput-root': { bgcolor: 'background.paper' } }}
                                     />
-                                    <Button variant="contained" size="small" disabled={!replyInputs[rating.id]} onClick={() => handleReplySubmit(rating.id)}>Reply</Button>
+                                    <Button variant="contained" size="small" disabled={!replyInputs[rating.id]} onClick={() => handleReplySubmit(rating.id)}>{t('common.reply')}</Button>
                                 </Box>
                             )}
                         </CardContent>