diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index e326fd4..55d63c1 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -570,18 +570,36 @@ export default function VideoPage() {
                 {/* Left dot */}
                 <button
                   onClick={() => navigateToVideo('prev')}
-                  className="w-2 h-2 rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  className="rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  style={{
+                    width: '8px',
+                    height: '8px',
+                    minWidth: '8px',
+                    minHeight: '8px'
+                  }}
                   aria-label="Previous video"
                 />
                 {/* Center dot - always active */}
                 <button
-                  className="w-2 h-2 rounded-full bg-gradient-to-r from-purple-500 to-blue-500"
+                  className="rounded-full bg-gradient-to-r from-purple-500 to-blue-500"
+                  style={{
+                    width: '8px',
+                    height: '8px',
+                    minWidth: '8px',
+                    minHeight: '8px'
+                  }}
                   aria-label="Current video"
                 />
                 {/* Right dot */}
                 <button
                   onClick={() => navigateToVideo('next')}
-                  className="w-2 h-2 rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  className="rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  style={{
+                    width: '8px',
+                    height: '8px',
+                    minWidth: '8px',
+                    minHeight: '8px'
+                  }}
                   aria-label="Next video"
                 />
               </div>