diff --git a/src/components/metadata/HeroSection.tsx b/src/components/metadata/HeroSection.tsx
index 26e36944..ab3f34ab 100644
--- a/src/components/metadata/HeroSection.tsx
+++ b/src/components/metadata/HeroSection.tsx
@@ -1541,16 +1541,19 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     minHeight: 44,
     position: 'relative',
+    maxWidth: 800,
+    alignSelf: 'center',
   },
   tabletProgressGlassBackground: {
-     width: '60%',
-     maxWidth: 500,
+     width: width * 0.7,
+     maxWidth: 700,
      backgroundColor: 'rgba(255,255,255,0.08)',
      borderRadius: 16,
      padding: 12,
      borderWidth: 1,
      borderColor: 'rgba(255,255,255,0.1)',
      overflow: 'hidden',
+     alignSelf: 'center',
    },
    tabletWatchProgressMainText: {
      fontSize: 14,