diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index b3578c5..4545d50 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -255,14 +255,13 @@ const Dashboard: React.FC = () => {
       {/* TAB 0: MY REVIEWS */}
       {activeTab === 0 && (
           <Box>
-              {/* Filter Controls for Reviews */}
               <Stack direction={{ xs: 'column', md: 'row' }} spacing={2} sx={{ mb: 4 }}>
                   <Box sx={{ flexGrow: 1 }}>
                       <TextField 
                         fullWidth placeholder={t('dashboard.searchRated')} 
                         value={ratedSearch} onChange={e => setRatedSearch(e.target.value)}
                         slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon /></InputAdornment> } }}
-                        sx={{ bgcolor: 'background.paper', borderRadius: 2 }}
+                        sx={{ bgcolor: 'background.paper', borderRadius: 1, '& .MuiOutlinedInput-root': { borderRadius: 1 } }}
                       />
                   </Box>
                   <Stack direction="row" spacing={1} sx={{ overflowX: 'auto', pb: 1, '&::-webkit-scrollbar': { display: 'none' } }}>
@@ -272,22 +271,22 @@ const Dashboard: React.FC = () => {
                             onClick={() => setRatedCategory(cat)}
                             color={ratedCategory === cat ? 'primary' : 'default'}
                             variant={ratedCategory === cat ? 'filled' : 'outlined'}
-                            sx={{ fontWeight: 'bold', height: 40, px: 1 }}
+                            sx={{ fontWeight: 'bold', height: 40, px: 1, borderRadius: 1 }}
                           />
                       ))}
                   </Stack>
-                  <Stack direction="row" spacing={1} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+                  <Stack direction="row" spacing={1} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider' }}>
                       <Button 
                         size="small" variant={ratedSort === 'date' ? 'contained' : 'text'} 
                         onClick={() => setRatedSort('date')}
-                        sx={{ textTransform: 'none', fontWeight: 'bold' }}
+                        sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8 }}
                       >
                           {t('dashboard.date')}
                       </Button>
                       <Button 
                         size="small" variant={ratedSort === 'rating' ? 'contained' : 'text'} 
                         onClick={() => setRatedSort('rating')}
-                        sx={{ textTransform: 'none', fontWeight: 'bold' }}
+                        sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8 }}
                       >
                           {t('dashboard.rating')}
                       </Button>
@@ -336,9 +335,9 @@ const Dashboard: React.FC = () => {
                                       <>
                                           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
                                               <Box sx={{ display: 'flex', gap: 2 }}>
-                                                  <Avatar src={rating.flavor_image || undefined} variant="rounded" sx={{ width: 60, height: 60, bgcolor: 'action.hover', border: '1px solid', borderColor: 'divider', p: 0.5 }}>
-                                                      F
-                                                  </Avatar>
+                                                  <Box sx={{ width: 64, height: 64, bgcolor: 'background.default', border: '1px solid', borderColor: 'divider', borderRadius: 1.5, overflow: 'hidden', flexShrink: 0 }}>
+                                                      <Box component="img" src={rating.flavor_image || undefined} sx={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                                  </Box>
                                                   <Box>
                                                       <Typography variant="h6" sx={{ fontWeight: 'bold', lineHeight: 1.2 }}>
                                                           <Link to={`/flavor/${rating.flavor}`} style={{ color: 'inherit', textDecoration: 'none' }}>{rating.flavor_name}</Link>
@@ -424,7 +423,7 @@ const Dashboard: React.FC = () => {
                         fullWidth placeholder={t('dashboard.searchMissing')} 
                         value={exploreSearch} onChange={e => setExploreSearch(e.target.value)}
                         slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon /></InputAdornment> } }}
-                        sx={{ bgcolor: 'background.paper', borderRadius: 2 }}
+                        sx={{ bgcolor: 'background.paper', borderRadius: 1, '& .MuiOutlinedInput-root': { borderRadius: 1 } }}
                       />
                   </Box>
                   <Stack direction="row" spacing={1} sx={{ overflowX: 'auto', pb: 1, '&::-webkit-scrollbar': { display: 'none' } }}>
@@ -434,22 +433,22 @@ const Dashboard: React.FC = () => {
                             onClick={() => setExploreCategory(cat)}
                             color={exploreCategory === cat ? 'primary' : 'default'}
                             variant={exploreCategory === cat ? 'filled' : 'outlined'}
-                            sx={{ fontWeight: 'bold', height: 40, px: 1 }}
+                            sx={{ fontWeight: 'bold', height: 40, px: 1, borderRadius: 1 }}
                           />
                       ))}
                   </Stack>
-                  <Stack direction="row" spacing={1} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+                  <Stack direction="row" spacing={1} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider' }}>
                       <Button 
                         size="small" variant={exploreSort === 'community' ? 'contained' : 'text'} 
                         onClick={() => setExploreSort('community')}
-                        sx={{ textTransform: 'none', fontWeight: 'bold' }}
+                        sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8 }}
                       >
                           {t('dashboard.communityRating')}
                       </Button>
                       <Button 
                         size="small" variant={exploreSort === 'circle' ? 'contained' : 'text'} 
                         onClick={() => setExploreSort('circle')}
-                        sx={{ textTransform: 'none', fontWeight: 'bold' }}
+                        sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8 }}
                       >
                           {t('dashboard.circleRating')}
                       </Button>
@@ -463,21 +462,42 @@ const Dashboard: React.FC = () => {
               ) : (
                   <Grid container spacing={2}>
                       {filteredMissing.map(flavor => (
-                          <Grid key={flavor.id} size={{ xs: 12, sm: 6, md: 4 }}>
+                          <Grid key={flavor.id} size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
                               <Card elevation={0} sx={{ 
-                                  height: '100%', borderRadius: 3, border: '1px solid', borderColor: 'divider',
-                                  transition: 'all 0.2s ease', '&:hover': { transform: 'translateY(-4px)', borderColor: 'primary.main', boxShadow: 4 }
+                                  height: '100%', borderRadius: 1.5, border: '1px solid', borderColor: 'divider',
+                                  transition: 'all 0.2s ease', '&:hover': { transform: 'translateY(-4px)', borderColor: 'primary.main', boxShadow: 4 },
+                                  overflow: 'hidden'
                               }}>
                                   <Link to={`/flavor/${flavor.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
-                                      <Box sx={{ position: 'relative', aspectRatio: '16/10', bgcolor: 'action.hover', display: 'flex', alignItems: 'center', justifyContent: 'center', p: 2 }}>
-                                          <Box component="img" src={flavor.image_url || undefined} sx={{ height: '100%', maxWidth: '100%', objectFit: 'contain', filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.1))' }} />
-                                          <Box sx={{ position: 'absolute', top: 10, left: 10 }}>
+                                      <Box sx={{ 
+                                          position: 'relative', 
+                                          aspectRatio: '1/1', 
+                                          bgcolor: 'background.default', 
+                                          display: 'flex', 
+                                          alignItems: 'center', 
+                                          justifyContent: 'center',
+                                          borderBottom: '1px solid',
+                                          borderColor: 'divider',
+                                          overflow: 'hidden'
+                                      }}>
+                                          <Box 
+                                            component="img" 
+                                            src={flavor.image_url || undefined} 
+                                            sx={{ 
+                                                width: '100%', 
+                                                height: '100%', 
+                                                objectFit: 'cover',
+                                                transition: 'transform 0.5s ease',
+                                                '&:hover': { transform: 'scale(1.1)' }
+                                            }} 
+                                          />
+                                          <Box sx={{ position: 'absolute', top: 10, left: 10, zIndex: 2 }}>
                                               <RatingBadge score={flavor.average_rating || 0} size="small" />
                                           </Box>
                                           {flavor.followed_average_rating && (
-                                              <Box sx={{ position: 'absolute', top: 10, right: 10 }}>
+                                              <Box sx={{ position: 'absolute', top: 10, right: 10, zIndex: 2 }}>
                                                   <Tooltip title={t('dashboard.circleAvg')}>
-                                                      <Box sx={{ bgcolor: alpha(theme.palette.secondary.main, 0.9), color: 'white', px: 1, py: 0.2, borderRadius: 1, display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                                                      <Box sx={{ bgcolor: alpha(theme.palette.secondary.main, 0.9), color: 'white', px: 1, py: 0.2, borderRadius: 1, display: 'flex', alignItems: 'center', gap: 0.5, boxShadow: 2 }}>
                                                           <VerifiedIcon sx={{ fontSize: '0.8rem' }} />
                                                           <Typography variant="caption" sx={{ fontWeight: '900' }}>{flavor.followed_average_rating.toFixed(1)}</Typography>
                                                       </Box>
diff --git a/frontend/src/pages/PublicProfile.tsx b/frontend/src/pages/PublicProfile.tsx
index 086390c..6f33ea9 100644
--- a/frontend/src/pages/PublicProfile.tsx
+++ b/frontend/src/pages/PublicProfile.tsx
@@ -272,22 +272,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                       )}
                   </Box>
                   
-                  <Box sx={{ flex: 1, textAlign: { xs: 'center', sm: 'left' } }}>
-                      <Box sx={{ mb: 0.5 }}>
-                          <Typography 
-                            variant="overline" 
-                            sx={{ 
-                                fontWeight: '900', 
-                                color: 'primary.main', 
-                                letterSpacing: 3, 
-                                opacity: 0.9,
-                                fontSize: '0.7rem',
-                                textTransform: 'uppercase'
-                            }}
-                          >
-                              Taste Profile
-                          </Typography>
-                      </Box>
+                  <Box sx={{ flex: 1, textAlign: { xs: 'center', sm: 'left' }, mt: { xs: 2, sm: 6 } }}>
                       <Typography 
                         variant="h2" 
                         sx={{ 
@@ -298,13 +283,13 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                             color: 'text.primary',
                             position: 'relative',
                             display: 'inline-block',
-                            mb: 1
+                            mb: 2.5
                         }}
                       >
                           {data.username}
                       </Typography>
                       
-                      <Box sx={{ mt: 1 }}>
+                      <Box>
                           <Paper 
                             elevation={0}
                             sx={{ 
@@ -312,7 +297,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                                 bgcolor: (theme) => alpha(theme.palette.text.primary, 0.04),
                                 border: '1px solid',
                                 borderColor: 'divider',
-                                borderRadius: 3,
+                                borderRadius: 1,
                                 overflow: 'hidden',
                                 backdropFilter: 'blur(8px)'
                             }}
@@ -323,7 +308,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                                   { label: 'Following', val: data.following_count }
                               ].map((stat, i) => (
                                   <React.Fragment key={stat.label}>
-                                      <Box sx={{ py: 1.2, width: { xs: 85, sm: 115 }, textAlign: 'center' }}>
+                                      <Box sx={{ py: 1.2, width: { xs: 90, sm: 120 }, textAlign: 'center' }}>
                                           <Typography variant="h6" sx={{ fontWeight: '900', lineHeight: 1, color: 'text.primary' }}>{stat.val}</Typography>
                                           <Typography variant="caption" sx={{ fontWeight: '900', textTransform: 'uppercase', opacity: 0.5, fontSize: '0.6rem', letterSpacing: 1 }}>{stat.label}</Typography>
                                       </Box>
@@ -360,13 +345,13 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
           </CardContent>
       </Card>
 
-      <Box sx={{ mb: 4, position: 'sticky', top: 80, zIndex: 10, bgcolor: alpha(theme.palette.background.default, 0.9), backdropFilter: 'blur(12px)', py: 1, borderRadius: 3, border: '1px solid', borderColor: alpha(theme.palette.divider, 0.1) }}>
+      <Box sx={{ mb: 4, position: 'sticky', top: 80, zIndex: 10, bgcolor: alpha(theme.palette.background.default, 0.9), backdropFilter: 'blur(12px)', py: 1, borderRadius: 1, border: '1px solid', borderColor: alpha(theme.palette.divider, 0.1) }}>
           <Tabs 
             value={activeTab} 
             onChange={(_, v) => setActiveTab(v)} 
             variant="fullWidth"
             sx={{ 
-                '& .MuiTab-root': { fontWeight: '900', textTransform: 'none', fontSize: '1rem', borderRadius: 2 },
+                '& .MuiTab-root': { fontWeight: '900', textTransform: 'none', fontSize: '1rem', borderRadius: 1 },
                 '& .Mui-selected': { color: 'primary.main' }
             }}
           >
@@ -411,7 +396,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                                       <Paper sx={{ 
                                           width: 64, height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center', 
                                           bgcolor: tier.color, color: 'black', fontWeight: '900', fontSize: '2rem',
-                                          borderRadius: 2, boxShadow: `0 12px 32px ${alpha(tier.color, 0.5)}`
+                                          borderRadius: 0.5, boxShadow: `0 0 20px ${alpha(tier.color, 0.6)}`
                                       }}>
                                           {tier.key}
                                       </Paper>
@@ -424,16 +409,37 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
 
                                   <Grid container spacing={3}>
                                       {items.map((rating: Rating) => (
-                                          <Grid key={rating.id} size={{ xs: 6, sm: 4, md: 3, lg: 2 }}>
+                                          <Grid key={rating.id} size={{ xs: 6, sm: 4, md: 3, lg: 2.4 }}>
                                               <Card sx={{ 
-                                                  height: '100%', borderRadius: 3, border: '1px solid', borderColor: 'divider',
+                                                  height: '100%', borderRadius: 1, border: '1px solid', borderColor: 'divider',
                                                   bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
                                                   transition: 'all 0.3s ease', 
+                                                  overflow: 'hidden',
                                                   '&:hover': { transform: 'translateY(-8px)', borderColor: 'primary.main', boxShadow: '0 12px 32px rgba(0,0,0,0.1)' }
                                               }}>
                                                   <Link to={`/flavor/${rating.flavor}`} style={{ textDecoration: 'none', color: 'inherit' }}>
-                                                      <Box sx={{ position: 'relative', aspectRatio: '1/1', bgcolor: alpha(theme.palette.text.primary, 0.03), display: 'flex', alignItems: 'center', justifyContent: 'center', p: 2 }}>
-                                                          <Box component="img" src={rating.flavor_image || undefined} sx={{ height: '90%', width: '90%', objectFit: 'contain', filter: 'drop-shadow(0 12px 24px rgba(0,0,0,0.1))' }} />
+                                                      <Box sx={{ 
+                                                          position: 'relative', 
+                                                          aspectRatio: '1/1', 
+                                                          bgcolor: 'background.default', 
+                                                          display: 'flex', 
+                                                          alignItems: 'center', 
+                                                          justifyContent: 'center',
+                                                          borderBottom: '1px solid',
+                                                          borderColor: 'divider',
+                                                          overflow: 'hidden'
+                                                      }}>
+                                                          <Box 
+                                                            component="img" 
+                                                            src={rating.flavor_image || undefined} 
+                                                            sx={{ 
+                                                                height: '100%', 
+                                                                width: '100%', 
+                                                                objectFit: 'cover',
+                                                                transition: 'transform 0.5s ease',
+                                                                '&:hover': { transform: 'scale(1.1)' }
+                                                            }} 
+                                                          />
                                                           <Box sx={{ position: 'absolute', top: 10, right: 10, zIndex: 2 }}>
                                                               <RatingBadge score={rating.score} size="small" />
                                                           </Box>
@@ -449,7 +455,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                                                           <Button 
                                                             size="small" fullWidth variant="outlined" color="secondary"
                                                             onClick={(e) => { e.preventDefault(); e.stopPropagation(); navigate(`/admin-panel/rating/${rating.id}`); }}
-                                                            sx={{ borderRadius: 1.5, textTransform: 'none', fontSize: '0.6rem', py: 0, fontWeight: 'bold' }}
+                                                            sx={{ borderRadius: 1, textTransform: 'none', fontSize: '0.6rem', py: 0, fontWeight: 'bold' }}
                                                           >
                                                               Manage
                                                           </Button>