diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 2af15c9..782a2f4 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -277,7 +277,7 @@ function MobileMosaic({ latest, popular, focalPoints }: { latest: Article[]; pop
               <button
                 key={i}
                 onClick={() => setPage(i)}
-                className={`h-2 rounded-full transition-all duration-300 ${i === page ? "bg-primary w-5" : "bg-muted-foreground/30 w-2"}`}
+                className={`h-2.5 rounded-full transition-all duration-300 ${i === page ? "bg-primary w-8" : "bg-foreground/35 w-2.5"}`}
                 data-testid={`button-mosaic-dot-${i}`}
                 aria-label={`Seite ${i + 1}`}
               />
@@ -615,9 +615,15 @@ function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { a
         </div>
       </div>
       {totalPages > 1 && (
-        <div className="flex justify-center gap-2 mt-3" data-testid="carousel-dots">
+        <div className="flex justify-center items-center gap-2.5 mt-4" data-testid="carousel-dots">
           {Array.from({ length: totalPages }).map((_, i) => (
-            <button key={i} onClick={() => setPage(i)} className={`w-2 h-2 rounded-full transition-all duration-300 ${i === page ? "bg-primary w-5" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"}`} data-testid={`button-carousel-dot-${i}`} />
+            <button
+              key={i}
+              onClick={() => setPage(i)}
+              aria-label={`Seite ${i + 1}`}
+              className={`h-2.5 rounded-full transition-all duration-300 ${i === page ? "bg-primary w-8" : "bg-foreground/35 hover:bg-foreground/60 w-2.5"}`}
+              data-testid={`button-carousel-dot-${i}`}
+            />
           ))}
         </div>
       )}