diff --git a/src/app.css b/src/app.css
index 4fdf6848..e29f031a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1111,22 +1111,27 @@ button.carousel-dot {
   backdrop-filter: blur(12px) invert(0.25);
 }
 button.carousel-dot {
-  font-weight: bold;
   backdrop-filter: none !important;
-  transition: all 0.2s;
 }
 button.carousel-dot[disabled] {
   pointer-events: none;
 }
-button.carousel-dot:not(.active) {
+button.carousel-dot .icon {
+  transition: all 0.2s;
+  transform: scale(0.5);
+}
+button.carousel-dot:not(.active) .icon {
   opacity: 0.5;
 }
-button.carousel-dot:not(.active):is(:hover, :focus) {
+button.carousel-dot:not(.active):is(:hover, :focus) .icon {
   opacity: 1;
 }
 button.carousel-dot:is(.active, [disabled].active) {
   opacity: 1;
-  transform: scale(2.2) translateY(-0.5px);
+}
+button.carousel-dot:is(.active, [disabled].active) .icon {
+  opacity: 1;
+  transform: scale(1);
 }
 @media (hover: hover) {
   .carousel-top-controls {
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index a1305620..567e7688 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -88,6 +88,7 @@ const ICONS = {
   layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
   announce: () => import('@iconify-icons/mingcute/announcement-line'),
   alert: () => import('@iconify-icons/mingcute/alert-line'),
+  round: () => import('@iconify-icons/mingcute/round-fill'),
 };
 
 function Icon({
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 023dcab9..8188b133 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -180,7 +180,7 @@ function MediaModal({
                   carouselRef.current.focus();
                 }}
               >
-                •
+                <Icon icon="round" size="s" />
               </button>
             ))}
           </span>