diff --git a/docs/src/app/Components/LargeIconGrid.tsx b/docs/src/app/Components/LargeIconGrid.tsx
index 7fbbd850..41121bec 100644
--- a/docs/src/app/Components/LargeIconGrid.tsx
+++ b/docs/src/app/Components/LargeIconGrid.tsx
@@ -11,7 +11,7 @@ export default function LargeIconGrid({ icon, sx }: { icon: IAmicon; sx?: SxProp
           p: 'calc(var(--Amicon-scale, 16px) * 2)',
           background: 'rgba(var(--joy-palette-background-channel) / .5)',
           borderRadius: 'xl',
-          boxShadow: 'lg',
+          boxShadow: 'var(--joy-shadowRing, 0 0 #000),0px 2px 8px -2px rgba(var(--joy-palette-primary-mainChannel, 21 21 21) / var(--joy-shadowOpacity, 0.08)),0px 12px 16px -4px rgba(var(--joy-palette-primary-mainChannel, 21 21 21) / var(--joy-shadowOpacity, 0.08))',
           backdropFilter: 'blur(20px)',
           border: '1px solid rgba(var(--joy-palette-background-channel) / .5)'
         },
diff --git a/docs/src/app/Home.tsx b/docs/src/app/Home.tsx
index 74506a8d..bc85f623 100644
--- a/docs/src/app/Home.tsx
+++ b/docs/src/app/Home.tsx
@@ -51,7 +51,7 @@ export default function Home() {
                   py: 2,
                   background: 'rgba(var(--joy-palette-background-channel) / .5)',
                   borderRadius: 'xl',
-                  boxShadow: 'lg',
+                  boxShadow: 'var(--joy-shadowRing, 0 0 #000),0px 2px 8px -2px rgba(var(--joy-palette-primary-mainChannel, 21 21 21) / var(--joy-shadowOpacity, 0.08)),0px 12px 16px -4px rgba(var(--joy-palette-primary-mainChannel, 21 21 21) / var(--joy-shadowOpacity, 0.08))',
                   backdropFilter: 'blur(20px)',
                   border: '1px solid rgba(var(--joy-palette-background-channel) / .5)'
                 }}