diff --git a/frontend/src/pages/CategoryList.tsx b/frontend/src/pages/CategoryList.tsx
index 429f2d7..47863cc 100644
--- a/frontend/src/pages/CategoryList.tsx
+++ b/frontend/src/pages/CategoryList.tsx
@@ -116,7 +116,29 @@ const CategoryList: React.FC = () => {
                                       </Box>
                                   )}
                                   {flavor.image_url && (
-                                      <Box component="img" src={flavor.image_url} sx={{ width: '100%', height: 200, objectFit: 'contain', p: 2, bgcolor: 'rgba(255,255,255,0.05)' }} />
+                                      <Box 
+                                          sx={{ 
+                                              width: '100%', 
+                                              aspectRatio: '1/1', 
+                                              display: 'flex', 
+                                              alignItems: 'center', 
+                                              justifyContent: 'center', 
+                                              bgcolor: 'action.hover',
+                                              p: 2,
+                                              overflow: 'hidden'
+                                          }}
+                                      >
+                                          <Box 
+                                              component="img" 
+                                              src={flavor.image_url} 
+                                              sx={{ 
+                                                  maxWidth: '100%', 
+                                                  maxHeight: '100%', 
+                                                  objectFit: 'contain',
+                                                  filter: 'drop-shadow(0px 4px 8px rgba(0,0,0,0.1))'
+                                              }} 
+                                          />
+                                      </Box>
                                   )}
                                   <CardContent sx={{ flexGrow: 1 }}>
                                       <Typography variant="h6" sx={{ fontSize: '1rem' }}>{flavor.name}</Typography>
@@ -201,7 +223,29 @@ const CategoryList: React.FC = () => {
                           <Card sx={{ height: '100%', transition: 'transform 0.2s', '&:hover': { transform: 'translateY(-8px)' } }}>
                               <Box component={Link} to={`/flavor/${flavor.id}`} sx={{ textDecoration: 'none', color: 'inherit' }}>
                                   {flavor.image_url && (
-                                      <Box component="img" src={flavor.image_url} sx={{ width: '100%', height: 180, objectFit: 'contain', p: 2, bgcolor: 'rgba(255,255,255,0.03)' }} />
+                                      <Box 
+                                          sx={{ 
+                                              width: '100%', 
+                                              aspectRatio: '1/1', 
+                                              display: 'flex', 
+                                              alignItems: 'center', 
+                                              justifyContent: 'center', 
+                                              bgcolor: 'action.hover',
+                                              p: 2,
+                                              overflow: 'hidden'
+                                          }}
+                                      >
+                                          <Box 
+                                              component="img" 
+                                              src={flavor.image_url} 
+                                              sx={{ 
+                                                  maxWidth: '100%', 
+                                                  maxHeight: '100%', 
+                                                  objectFit: 'contain',
+                                                  filter: 'drop-shadow(0px 4px 8px rgba(0,0,0,0.1))'
+                                              }} 
+                                          />
+                                      </Box>
                                   )}
                                   <CardContent>
                                       <Typography variant="h6" noWrap>{flavor.name}</Typography>
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index f7c792d..546c57a 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -121,9 +121,33 @@ const Dashboard: React.FC = () => {
                 <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
                   {items.map((rating: any) => (
                     <Card key={rating.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 30%', lg: '1 1 23%' }, minWidth: 280, transition: 'transform 0.2s', '&:hover': { transform: 'scale(1.02)' } }}>
-                      <CardContent sx={{ display: 'flex', gap: 2 }}>
+                      <CardContent sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
                         {rating.flavor_image && (
-                          <Box component="img" src={rating.flavor_image} sx={{ width: 60, height: 60, objectFit: 'contain' }} />
+                          <Box 
+                            sx={{ 
+                                width: 60, 
+                                height: 60, 
+                                minWidth: 60,
+                                aspectRatio: '1/1', 
+                                display: 'flex', 
+                                alignItems: 'center', 
+                                justifyContent: 'center', 
+                                bgcolor: 'action.hover',
+                                p: 0.5,
+                                borderRadius: 1,
+                                overflow: 'hidden'
+                            }}
+                          >
+                            <Box 
+                                component="img" 
+                                src={rating.flavor_image} 
+                                sx={{ 
+                                    maxWidth: '100%', 
+                                    maxHeight: '100%', 
+                                    objectFit: 'contain'
+                                }} 
+                            />
+                          </Box>
                         )}
                         <Box sx={{ flex: 1 }}>
                           <Link to={`/flavor/${rating.flavor}`} style={{ textDecoration: 'none', color: 'inherit' }}>
@@ -171,9 +195,33 @@ const Dashboard: React.FC = () => {
                 <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
                   {flavors.map((flavor: any) => (
                     <Card key={flavor.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 30%', lg: '1 1 23%' }, minWidth: 280, transition: 'transform 0.2s', '&:hover': { transform: 'scale(1.02)' } }}>
-                      <CardContent sx={{ display: 'flex', gap: 2 }}>
+                      <CardContent sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
                         {flavor.image_url && (
-                          <Box component="img" src={flavor.image_url} sx={{ width: 60, height: 60, objectFit: 'contain' }} />
+                          <Box 
+                            sx={{ 
+                                width: 60, 
+                                height: 60, 
+                                minWidth: 60,
+                                aspectRatio: '1/1', 
+                                display: 'flex', 
+                                alignItems: 'center', 
+                                justifyContent: 'center', 
+                                bgcolor: 'action.hover',
+                                p: 0.5,
+                                borderRadius: 1,
+                                overflow: 'hidden'
+                            }}
+                          >
+                            <Box 
+                                component="img" 
+                                src={flavor.image_url} 
+                                sx={{ 
+                                    maxWidth: '100%', 
+                                    maxHeight: '100%', 
+                                    objectFit: 'contain'
+                                }} 
+                            />
+                          </Box>
                         )}
                         <Box sx={{ flex: 1 }}>
                           <Link to={`/flavor/${flavor.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
diff --git a/frontend/src/pages/PublicProfile.tsx b/frontend/src/pages/PublicProfile.tsx
index 4d86d36..bcc44a0 100644
--- a/frontend/src/pages/PublicProfile.tsx
+++ b/frontend/src/pages/PublicProfile.tsx
@@ -81,7 +81,31 @@ const PublicProfile: React.FC = () => {
                       <Card key={rating.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 30%', lg: '1 1 23%', xl: '1 1 18%' }, minWidth: 280 }}>
                           <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                               {rating.flavor_image && (
-                                  <Box component="img" src={rating.flavor_image} sx={{ width: 80, height: 80, objectFit: 'contain' }} />
+                                  <Box 
+                                    sx={{ 
+                                        width: 80, 
+                                        height: 80, 
+                                        minWidth: 80,
+                                        aspectRatio: '1/1', 
+                                        display: 'flex', 
+                                        alignItems: 'center', 
+                                        justifyContent: 'center', 
+                                        bgcolor: 'action.hover',
+                                        p: 1,
+                                        borderRadius: 1,
+                                        overflow: 'hidden'
+                                    }}
+                                  >
+                                    <Box 
+                                        component="img" 
+                                        src={rating.flavor_image} 
+                                        sx={{ 
+                                            maxWidth: '100%', 
+                                            maxHeight: '100%', 
+                                            objectFit: 'contain'
+                                        }} 
+                                    />
+                                  </Box>
                               )}
                               <Box>
                                   <Typography variant="h6">{rating.flavor_name}</Typography>
diff --git a/frontend/src/pages/categories/CategoryFlavors.tsx b/frontend/src/pages/categories/CategoryFlavors.tsx
index fb1b8cf..ce21ac2 100644
--- a/frontend/src/pages/categories/CategoryFlavors.tsx
+++ b/frontend/src/pages/categories/CategoryFlavors.tsx
@@ -86,7 +86,31 @@ const CategoryFlavors: React.FC = () => {
                     </Box>
                 )}
                 {flavor.image_url && (
-                    <Box component="img" src={flavor.image_url} sx={{ width: '100%', height: 200, objectFit: 'contain', p: 2, bgcolor: 'rgba(255,255,255,0.05)' }} />
+                    <Box 
+                        sx={{ 
+                            width: '100%', 
+                            aspectRatio: '1/1', 
+                            display: 'flex', 
+                            alignItems: 'center', 
+                            justifyContent: 'center', 
+                            bgcolor: 'action.hover',
+                            p: 3,
+                            overflow: 'hidden'
+                        }}
+                    >
+                        <Box 
+                            component="img" 
+                            src={flavor.image_url} 
+                            sx={{ 
+                                maxWidth: '100%', 
+                                maxHeight: '100%', 
+                                objectFit: 'contain',
+                                transition: 'transform 0.3s ease-in-out',
+                                filter: 'drop-shadow(0px 4px 8px rgba(0,0,0,0.1))'
+                            }} 
+                            className="product-image"
+                        />
+                    </Box>
                 )}
                 <CardContent sx={{ flexGrow: 1 }}>
                     <Typography variant="h6" sx={{ fontSize: '1.1rem', mb: 1 }}>{flavor.name}</Typography>
diff --git a/frontend/src/pages/flavors/FlavorDetail.tsx b/frontend/src/pages/flavors/FlavorDetail.tsx
index 65ac7ba..5fb2962 100644
--- a/frontend/src/pages/flavors/FlavorDetail.tsx
+++ b/frontend/src/pages/flavors/FlavorDetail.tsx
@@ -152,10 +152,29 @@ const FlavorDetail: React.FC = () => {
         &larr; Back to {flavor.category_name}
       </Button>
 
-      <Card sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, mb: 4 }}>
+      <Card sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, mb: 4, overflow: 'hidden' }}>
         {flavor.image_url && (
-            <Box sx={{ width: { xs: '100%', md: 400 }, height: 400, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'rgba(255,255,255,0.05)', p: 4 }}>
-                <Box component="img" src={flavor.image_url} sx={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
+            <Box 
+                sx={{ 
+                    width: { xs: '100%', md: 400 }, 
+                    aspectRatio: '1/1', 
+                    display: 'flex', 
+                    alignItems: 'center', 
+                    justifyContent: 'center', 
+                    bgcolor: 'action.hover', 
+                    p: { xs: 4, md: 6 } 
+                }}
+            >
+                <Box 
+                    component="img" 
+                    src={flavor.image_url} 
+                    sx={{ 
+                        maxWidth: '100%', 
+                        maxHeight: '100%', 
+                        objectFit: 'contain',
+                        filter: 'drop-shadow(0px 12px 24px rgba(0,0,0,0.15))'
+                    }} 
+                />
             </Box>
         )}
         <CardContent sx={{ flex: 1, p: 4 }}>