diff --git a/src/components/MainPageLayout.js b/src/components/MainPageLayout.js
index 65a5491..030161e 100644
--- a/src/components/MainPageLayout.js
+++ b/src/components/MainPageLayout.js
@@ -10,8 +10,48 @@ import ChevronRight from "@mui/icons-material/ChevronRight";
 import { Link } from "react-router-dom";
 import SharedCarousel from "./SharedCarousel.js";
 import { getCombinedAnimatedBorderStyles } from "../utils/animatedBorderStyles.js";
+import { STAR_POLYGON_POINTS } from "../utils/starPolygon.js";
 import { useTranslation } from 'react-i18next';
 
+const HOME_STAR_LAYERS = [
+  { className: "star-rotate-slow-cw", size: 168, staticDeg: 20, fill: "#B8860B" },
+  { className: "star-rotate-slow-ccw", size: 159, staticDeg: -25, fill: "#DAA520" },
+  { className: "star-rotate-medium-cw", size: 150, staticDeg: null, fill: "#FFD700" },
+];
+
+const FILIALE_STAR_LAYERS = [
+  { className: "star-rotate-slow-ccw", size: 168, staticDeg: 20, fill: "#5F9EA0" },
+  { className: "star-rotate-medium-cw", size: 159, staticDeg: -25, fill: "#7FCDCD" },
+  { className: "star-rotate-slow-cw", size: 150, staticDeg: null, fill: "#AFEEEE" },
+];
+
+const StarDecorationLayers = ({ layers }) => (
+  <>
+    {layers.map(({ className, size, staticDeg, fill }, i) => {
+      const half = size / 2;
+      return (
+        <div
+          key={i}
+          style={{
+            position: "absolute",
+            left: "50%",
+            top: "50%",
+            width: size,
+            height: size,
+            marginLeft: -half,
+            marginTop: -half,
+            ...(staticDeg != null ? { transform: `rotate(${staticDeg}deg)` } : {}),
+          }}
+        >
+          <svg viewBox="0 0 60 60" width="100%" height="100%" className={className} style={{ display: "block" }}>
+            <polygon points={STAR_POLYGON_POINTS} fill={fill} />
+          </svg>
+        </div>
+      );
+    })}
+  </>
+);
+
 const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity, translatedContent }) => (
   <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
     {index === 0 && pageType === "home" && (
@@ -29,19 +69,11 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
           display: { xs: 'none', sm: 'block' }
         }}
       >
-        <svg viewBox="0 0 60 60" width="168" height="168" className="star-rotate-slow-cw" style={{ position: 'absolute', top: '-9px', left: '-9px', transform: 'rotate(20deg)' }}>
-          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#B8860B" />
-        </svg>
-        <svg viewBox="0 0 60 60" width="159" height="159" className="star-rotate-slow-ccw" style={{ position: 'absolute', top: '-4.5px', left: '-4.5px', transform: 'rotate(-25deg)' }}>
-          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#DAA520" />
-        </svg>
-        <svg viewBox="0 0 60 60" width="150" height="150" className="star-rotate-medium-cw">
-          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#FFD700" />
-        </svg>
-        <div style={{ position: 'absolute', top: '45%', left: '43%', transform: 'translate(-50%, -50%) rotate(-10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px', transition: 'opacity 0.3s ease', opacity: starHovered ? 0 : 1 }}>
+        <StarDecorationLayers layers={HOME_STAR_LAYERS} />
+        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%) rotate(-10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px', transition: 'opacity 0.3s ease', opacity: starHovered ? 0 : 1 }}>
           {translatedContent.outdoorSeason}
         </div>
-        <div style={{ position: 'absolute', top: '45%', left: '43%', transform: 'translate(-50%, -50%) rotate(-10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px', opacity: starHovered ? 1 : 0, transition: 'opacity 0.3s ease' }}>
+        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%) rotate(-10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px', opacity: starHovered ? 1 : 0, transition: 'opacity 0.3s ease' }}>
           {translatedContent.selectSeedRate}
         </div>
       </Box>
@@ -61,16 +93,8 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
           display: { xs: 'none', sm: 'block' }
         }}
       >
-        <svg viewBox="0 0 60 60" width="168" height="168" className="star-rotate-slow-ccw" style={{ position: 'absolute', top: '-9px', left: '-9px', transform: 'rotate(20deg)' }}>
-          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#5F9EA0" />
-        </svg>
-        <svg viewBox="0 0 60 60" width="159" height="159" className="star-rotate-medium-cw" style={{ position: 'absolute', top: '-4.5px', left: '-4.5px', transform: 'rotate(-25deg)' }}>
-          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#7FCDCD" />
-        </svg>
-        <svg viewBox="0 0 60 60" width="150" height="150" className="star-rotate-slow-cw">
-          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#AFEEEE" />
-        </svg>
-        <div style={{ position: 'absolute', top: '42%', left: '45%', transform: 'translate(-50%, -50%) rotate(10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px' }}>
+        <StarDecorationLayers layers={FILIALE_STAR_LAYERS} />
+        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%) rotate(10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px' }}>
           {translatedContent.showUsPhoto}
         </div>
       </Box>
@@ -92,8 +116,16 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
           transition: "all 0.3s ease",
           "&:hover": { transform: "translateY(-5px)", boxShadow: 20 },
         }}
-        onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined}
-        onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined}
+        onMouseEnter={
+          (pageType === "home" && index === 0) || (pageType === "filiale" && index === 1)
+            ? () => setStarHovered(true)
+            : undefined
+        }
+        onMouseLeave={
+          (pageType === "home" && index === 0) || (pageType === "filiale" && index === 1)
+            ? () => setStarHovered(false)
+            : undefined
+        }
       >
         <Box sx={{ height: "100%", bgcolor: box.bgcolor, position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
           {opacity === 1 && (
@@ -134,6 +166,12 @@ const MainPageLayout = () => {
         from { transform: rotate(0deg); }
         to { transform: rotate(-360deg); }
       }
+      .star-rotate-slow-cw,
+      .star-rotate-slow-ccw,
+      .star-rotate-medium-cw {
+        transform-box: fill-box;
+        transform-origin: center;
+      }
       .star-rotate-slow-cw {
         animation: rotateClockwise 60s linear infinite;
       }
diff --git a/src/components/Product.js b/src/components/Product.js
index 745cfcd..48c3b2d 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -10,6 +10,7 @@ import AddToCartButton from './AddToCartButton.js';
 import { Link, useNavigate } from 'react-router-dom';
 import { withI18n } from '../i18n/withTranslation.js';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import { STAR_POLYGON_POINTS } from '../utils/starPolygon.js';
 
 // Helper function to find level 1 category ID from any category ID
 const findLevel1CategoryId = (categoryId) => {
@@ -302,7 +303,7 @@ class Product extends Component {
               }}
             >
               <polygon
-                points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
+                points={STAR_POLYGON_POINTS}
                 fill="#20403a"
                 stroke="none"
               />
@@ -321,7 +322,7 @@ class Product extends Component {
               }}
             >
               <polygon
-                points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
+                points={STAR_POLYGON_POINTS}
                 fill="#40736b"
                 stroke="none"
               />
@@ -334,7 +335,7 @@ class Product extends Component {
               height="50"
             >
               <polygon
-                points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
+                points={STAR_POLYGON_POINTS}
                 fill="#609688"
                 stroke="none"
               />
diff --git a/src/utils/starPolygon.js b/src/utils/starPolygon.js
new file mode 100644
index 0000000..4e8740e
--- /dev/null
+++ b/src/utils/starPolygon.js
@@ -0,0 +1,2 @@
+export const STAR_POLYGON_POINTS =
+  "30,2 36.286,21.348 56.63,21.348 40.172,33.305 46.458,52.652 30,40.695 13.542,52.652 19.828,33.305 3.37,21.348 23.714,21.348";