diff --git a/css/site.css b/css/site.css
index a954bc5a..0bd10ad3 100644
--- a/css/site.css
+++ b/css/site.css
@@ -119,21 +119,33 @@ body.custom-background { background-color: #ffffff; }
   right: 16px;
   bottom: 14px;
   display: flex;
-  gap: 8px;
+  gap: 2px;
 }
 
 .home-carousel-dots button {
-  width: 11px;
-  height: 11px;
+  position: relative;
+  width: 24px;
+  height: 24px;
   margin: 0;
   padding: 0;
+  background: transparent;
+}
+
+.home-carousel-dots button::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 9px;
+  height: 9px;
   border: 2px solid rgba(255, 255, 255, 0.95);
   border-radius: 50%;
   background: rgba(19, 18, 17, 0.45);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  content: "";
+  transform: translate(-50%, -50%);
 }
 
-.home-carousel-dots button.is-active {
+.home-carousel-dots button.is-active::before {
   background: #89c76b;
 }
 
diff --git a/js/home-carousel.js b/js/home-carousel.js
index 6659c55e..46519e41 100644
--- a/js/home-carousel.js
+++ b/js/home-carousel.js
@@ -40,7 +40,7 @@
     if (!reduceMotion && slides.length > 1 && !document.hidden) {
       timer = window.setInterval(function () {
         show(current + 1);
-      }, 5000);
+      }, 8000);
     }
   }
 
diff --git a/src/components/SiteLayout.astro b/src/components/SiteLayout.astro
index 0453fc84..df4c6266 100644
--- a/src/components/SiteLayout.astro
+++ b/src/components/SiteLayout.astro
@@ -54,7 +54,7 @@ const metaTitle = title
     <link rel="stylesheet" id="parabola-fonts-css" href="/assets/theme/parabola/fonts/fontfaces.css?ver=2.4.1-perf1" type="text/css" media="all" />
     <link rel="stylesheet" id="parabola-style-css" href="/assets/theme/parabola/style.css?ver=2.4.1" type="text/css" media="all" />
     <link rel="stylesheet" id="familyfedie-theme-css" href="/css/theme.css" type="text/css" media="all" />
-    <link rel="stylesheet" id="familyfedie-site-css" href="/css/site.css?ver=20260710-3" type="text/css" media="all" />
+    <link rel="stylesheet" id="familyfedie-site-css" href="/css/site.css?ver=20260710-4" type="text/css" media="all" />
     <link rel="stylesheet" id="parabola-mobile-css" href="/assets/theme/parabola/styles/style-mobile.css?ver=2.4.1" type="text/css" media="all" />
     {plausibleDomain && <script defer data-domain={plausibleDomain} src={plausibleScriptSrc}></script>}
     <script is:inline defer type="text/javascript" src="/js/jquery.min.js?ver=2.0.2" id="jquery-js"></script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6beb4b0e..c7e9dcf4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -25,5 +25,5 @@ const normalizedMainHtml = normalizeInternalHtmlLinks(mainHtml);
     fetchpriority="high"
   />
   <Fragment set:html={normalizedMainHtml} />
-  <script is:inline defer slot="scripts" src="/js/home-carousel.js?ver=20260710-1"></script>
+  <script is:inline defer slot="scripts" src="/js/home-carousel.js?ver=20260710-2"></script>
 </SiteLayout>