diff --git a/frontend/src/pages/CategoryList.tsx b/frontend/src/pages/CategoryList.tsx
index 47863cc..a053110 100644
--- a/frontend/src/pages/CategoryList.tsx
+++ b/frontend/src/pages/CategoryList.tsx
@@ -123,8 +123,9 @@ const CategoryList: React.FC = () => {
                                               display: 'flex', 
                                               alignItems: 'center', 
                                               justifyContent: 'center', 
-                                              bgcolor: 'action.hover',
-                                              p: 2,
+                                              bgcolor: 'background.default',
+                                              borderBottom: '1px solid',
+                                              borderColor: 'divider',
                                               overflow: 'hidden'
                                           }}
                                       >
@@ -132,10 +133,11 @@ const CategoryList: React.FC = () => {
                                               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))'
+                                                  width: '100%', 
+                                                  height: '100%', 
+                                                  objectFit: 'cover',
+                                                  transition: 'transform 0.5s ease',
+                                                  '&:hover': { transform: 'scale(1.1)' }
                                               }} 
                                           />
                                       </Box>
@@ -230,8 +232,9 @@ const CategoryList: React.FC = () => {
                                               display: 'flex', 
                                               alignItems: 'center', 
                                               justifyContent: 'center', 
-                                              bgcolor: 'action.hover',
-                                              p: 2,
+                                              bgcolor: 'background.default',
+                                              borderBottom: '1px solid',
+                                              borderColor: 'divider',
                                               overflow: 'hidden'
                                           }}
                                       >
@@ -239,10 +242,11 @@ const CategoryList: React.FC = () => {
                                               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))'
+                                                  width: '100%', 
+                                                  height: '100%', 
+                                                  objectFit: 'cover',
+                                                  transition: 'transform 0.5s ease',
+                                                  '&:hover': { transform: 'scale(1.1)' }
                                               }} 
                                           />
                                       </Box>
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 546c57a..559d549 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -132,8 +132,9 @@ const Dashboard: React.FC = () => {
                                 display: 'flex', 
                                 alignItems: 'center', 
                                 justifyContent: 'center', 
-                                bgcolor: 'action.hover',
-                                p: 0.5,
+                                bgcolor: 'background.default',
+                                border: '1px solid',
+                                borderColor: 'divider',
                                 borderRadius: 1,
                                 overflow: 'hidden'
                             }}
@@ -142,9 +143,9 @@ const Dashboard: React.FC = () => {
                                 component="img" 
                                 src={rating.flavor_image} 
                                 sx={{ 
-                                    maxWidth: '100%', 
-                                    maxHeight: '100%', 
-                                    objectFit: 'contain'
+                                    width: '100%', 
+                                    height: '100%', 
+                                    objectFit: 'cover'
                                 }} 
                             />
                           </Box>
@@ -206,8 +207,9 @@ const Dashboard: React.FC = () => {
                                 display: 'flex', 
                                 alignItems: 'center', 
                                 justifyContent: 'center', 
-                                bgcolor: 'action.hover',
-                                p: 0.5,
+                                bgcolor: 'background.default',
+                                border: '1px solid',
+                                borderColor: 'divider',
                                 borderRadius: 1,
                                 overflow: 'hidden'
                             }}
@@ -216,9 +218,9 @@ const Dashboard: React.FC = () => {
                                 component="img" 
                                 src={flavor.image_url} 
                                 sx={{ 
-                                    maxWidth: '100%', 
-                                    maxHeight: '100%', 
-                                    objectFit: 'contain'
+                                    width: '100%', 
+                                    height: '100%', 
+                                    objectFit: 'cover'
                                 }} 
                             />
                           </Box>
diff --git a/frontend/src/pages/PublicProfile.tsx b/frontend/src/pages/PublicProfile.tsx
index bcc44a0..b095e81 100644
--- a/frontend/src/pages/PublicProfile.tsx
+++ b/frontend/src/pages/PublicProfile.tsx
@@ -90,8 +90,9 @@ const PublicProfile: React.FC = () => {
                                         display: 'flex', 
                                         alignItems: 'center', 
                                         justifyContent: 'center', 
-                                        bgcolor: 'action.hover',
-                                        p: 1,
+                                        bgcolor: 'background.default',
+                                        border: '1px solid',
+                                        borderColor: 'divider',
                                         borderRadius: 1,
                                         overflow: 'hidden'
                                     }}
@@ -100,9 +101,9 @@ const PublicProfile: React.FC = () => {
                                         component="img" 
                                         src={rating.flavor_image} 
                                         sx={{ 
-                                            maxWidth: '100%', 
-                                            maxHeight: '100%', 
-                                            objectFit: 'contain'
+                                            width: '100%', 
+                                            height: '100%', 
+                                            objectFit: 'cover'
                                         }} 
                                     />
                                   </Box>
diff --git a/frontend/src/pages/categories/CategoryFlavors.tsx b/frontend/src/pages/categories/CategoryFlavors.tsx
index ce21ac2..3baea4f 100644
--- a/frontend/src/pages/categories/CategoryFlavors.tsx
+++ b/frontend/src/pages/categories/CategoryFlavors.tsx
@@ -93,8 +93,9 @@ const CategoryFlavors: React.FC = () => {
                             display: 'flex', 
                             alignItems: 'center', 
                             justifyContent: 'center', 
-                            bgcolor: 'action.hover',
-                            p: 3,
+                            bgcolor: 'background.default',
+                            borderBottom: '1px solid',
+                            borderColor: 'divider',
                             overflow: 'hidden'
                         }}
                     >
@@ -102,13 +103,12 @@ const CategoryFlavors: React.FC = () => {
                             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))'
+                                width: '100%', 
+                                height: '100%', 
+                                objectFit: 'cover',
+                                transition: 'transform 0.5s ease',
+                                '&:hover': { transform: 'scale(1.1)' }
                             }} 
-                            className="product-image"
                         />
                     </Box>
                 )}
diff --git a/frontend/src/pages/flavors/FlavorDetail.tsx b/frontend/src/pages/flavors/FlavorDetail.tsx
index 5fb2962..133997c 100644
--- a/frontend/src/pages/flavors/FlavorDetail.tsx
+++ b/frontend/src/pages/flavors/FlavorDetail.tsx
@@ -161,18 +161,20 @@ const FlavorDetail: React.FC = () => {
                     display: 'flex', 
                     alignItems: 'center', 
                     justifyContent: 'center', 
-                    bgcolor: 'action.hover', 
-                    p: { xs: 4, md: 6 } 
+                    bgcolor: 'background.default', 
+                    borderRight: { md: '1px solid' },
+                    borderBottom: { xs: '1px solid', md: 'none' },
+                    borderColor: 'divider',
+                    overflow: 'hidden'
                 }}
             >
                 <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))'
+                        width: '100%', 
+                        height: '100%', 
+                        objectFit: 'cover'
                     }} 
                 />
             </Box>