diff --git a/src/features/rnbw-membership/components/MembershipTierButton/MembershipTierButtonSurface.tsx b/src/features/rnbw-membership/components/MembershipTierButton/MembershipTierButtonSurface.tsx
index 734391b8204..7cc77ab53cf 100644
--- a/src/features/rnbw-membership/components/MembershipTierButton/MembershipTierButtonSurface.tsx
+++ b/src/features/rnbw-membership/components/MembershipTierButton/MembershipTierButtonSurface.tsx
@@ -7,6 +7,7 @@ import { GradientBorderView } from '@/components/gradient-border/GradientBorderV
 import { useColorMode } from '@/design-system';
 import { getValueForColorMode } from '@/design-system/color/palettes';
 import { InnerShadow } from '@/features/polymarket/components/InnerShadow';
+import { RainbowShimmerFill } from '@/features/rnbw-membership/components/RainbowShimmerFill';
 import { ShadowLayers } from '@/features/rnbw-membership/components/ShadowLayers';
 import { MEMBERSHIP_CARD_BACKGROUND_COLOR } from '@/features/rnbw-membership/membershipCardTheme';
 import { getTierPrimaryButtonTheme, getTierSecondaryButtonTheme } from '@/features/rnbw-membership/tierVisuals';
@@ -39,7 +40,7 @@ export const MembershipTierButtonSurface = memo(function MembershipTierButtonSur
   const borderRadius = height / 2;
   const shadowLayerBackgroundColor = getValueForColorMode(MEMBERSHIP_CARD_BACKGROUND_COLOR, colorMode);
 
-  const { borderGradient, surfaceGradient, surfaceHighlight, shadows } = useMemo(() => {
+  const { borderGradient, surfaceGradient, surfaceHighlight, shadows, overlay } = useMemo(() => {
     const surfaceTheme =
       variant === 'primary' ? getTierPrimaryButtonTheme(tier.level).surface : getTierSecondaryButtonTheme(tier.level).surface;
 
@@ -48,6 +49,7 @@ export const MembershipTierButtonSurface = memo(function MembershipTierButtonSur
       surfaceGradient: getValueForColorMode(surfaceTheme.fill, colorMode),
       surfaceHighlight: surfaceTheme.highlight ? getValueForColorMode(surfaceTheme.highlight, colorMode) : null,
       shadows: getValueForColorMode(surfaceTheme.shadows, colorMode),
+      overlay: surfaceTheme.overlay ? getValueForColorMode(surfaceTheme.overlay, colorMode) : null,
     };
   }, [tier.level, variant, colorMode]);
 
@@ -66,13 +68,24 @@ export const MembershipTierButtonSurface = memo(function MembershipTierButtonSur
         end={borderGradient.end ?? GRADIENT_END}
         style={resolvedContainerStyle}
       >
-        <LinearGradient
-          colors={surfaceGradient.colors}
-          locations={surfaceGradient.locations}
-          start={surfaceGradient.start ?? GRADIENT_START}
-          end={surfaceGradient.end ?? GRADIENT_END}
-          style={[StyleSheet.absoluteFill, { borderRadius }]}
-        />
+        {overlay ? (
+          <RainbowShimmerFill
+            fillColors={surfaceGradient.colors}
+            fillLocations={surfaceGradient.locations}
+            fillStart={surfaceGradient.start ?? GRADIENT_START}
+            fillEnd={surfaceGradient.end ?? GRADIENT_END}
+            borderRadius={borderRadius}
+            overlay={overlay}
+          />
+        ) : (
+          <LinearGradient
+            colors={surfaceGradient.colors}
+            locations={surfaceGradient.locations}
+            start={surfaceGradient.start ?? GRADIENT_START}
+            end={surfaceGradient.end ?? GRADIENT_END}
+            style={[StyleSheet.absoluteFill, { borderRadius }]}
+          />
+        )}
         {surfaceHighlight && (
           <LinearGradient
             colors={surfaceHighlight.colors}
diff --git a/src/features/rnbw-membership/components/RainbowShimmerFill.tsx b/src/features/rnbw-membership/components/RainbowShimmerFill.tsx
new file mode 100644
index 00000000000..67677c24150
--- /dev/null
+++ b/src/features/rnbw-membership/components/RainbowShimmerFill.tsx
@@ -0,0 +1,101 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import {
+  Blur,
+  Canvas,
+  Group,
+  Mask,
+  Paint,
+  RoundedRect,
+  Shadow,
+  LinearGradient as SkiaLinearGradient,
+  vec,
+} from '@shopify/react-native-skia';
+
+import type { GradientColors, GradientLocations, HardLightOverlay } from '@/features/rnbw-membership/tierVisuals';
+
+const DEFAULT_FILL_START = { x: 0, y: 0 };
+const DEFAULT_FILL_END = { x: 0, y: 1 };
+const MASK_SHADOW_COLOR = '#FFFFFF';
+
+type RainbowShimmerFillProps = {
+  fillColors: GradientColors;
+  fillLocations?: GradientLocations;
+  fillStart?: { x: number; y: number };
+  fillEnd?: { x: number; y: number };
+  borderRadius: number;
+  overlay: HardLightOverlay;
+};
+
+export const RainbowShimmerFill = memo(function RainbowShimmerFill({
+  fillColors,
+  fillLocations,
+  fillStart = DEFAULT_FILL_START,
+  fillEnd = DEFAULT_FILL_END,
+  borderRadius,
+  overlay,
+}: RainbowShimmerFillProps) {
+  const [measured, setMeasured] = useState<{ width: number; height: number } | null>(null);
+
+  const onLayout = useCallback((e: { nativeEvent: { layout: { width: number; height: number } } }) => {
+    const { width: w, height: h } = e.nativeEvent.layout;
+    setMeasured(prev => (prev && prev.width === w && prev.height === h ? prev : { width: w, height: h }));
+  }, []);
+
+  const width = measured?.width ?? 0;
+  const height = measured?.height ?? 0;
+  const canDisplay = width > 0 && height > 0;
+
+  // Skia wants mutable arrays
+  const skiaFillColors = useMemo(() => [...fillColors], [fillColors]);
+  const skiaFillLocations = useMemo(() => (fillLocations ? [...fillLocations] : undefined), [fillLocations]);
+  const skiaOverlayColors = useMemo(() => [...overlay.colors], [overlay.colors]);
+  const skiaOverlayLocations = useMemo(() => [...overlay.locations], [overlay.locations]);
+
+  return (
+    <View style={StyleSheet.absoluteFill} onLayout={onLayout} pointerEvents="none">
+      {canDisplay && (
+        <Canvas style={StyleSheet.absoluteFill}>
+          <RoundedRect x={0} y={0} width={width} height={height} r={borderRadius}>
+            <SkiaLinearGradient
+              start={vec(width * fillStart.x, height * fillStart.y)}
+              end={vec(width * fillEnd.x, height * fillEnd.y)}
+              colors={skiaFillColors}
+              positions={skiaFillLocations}
+            />
+          </RoundedRect>
+
+          <Group layer={<Paint blendMode="hardLight" />}>
+            <Mask
+              mask={
+                <Group>
+                  <RoundedRect x={0} y={0} width={width} height={height} r={borderRadius}>
+                    <Shadow
+                      dx={overlay.maskShadow.dx}
+                      dy={overlay.maskShadow.dy}
+                      blur={overlay.maskShadow.blur}
+                      color={MASK_SHADOW_COLOR}
+                      inner
+                      shadowOnly
+                    />
+                    <Blur blur={1.5} />
+                  </RoundedRect>
+                </Group>
+              }
+            >
+              <RoundedRect x={0} y={0} width={width} height={height} r={borderRadius}>
+                <SkiaLinearGradient
+                  start={vec(0, height / 2)}
+                  end={vec(width, height / 2)}
+                  colors={skiaOverlayColors}
+                  positions={skiaOverlayLocations}
+                />
+              </RoundedRect>
+            </Mask>
+          </Group>
+        </Canvas>
+      )}
+    </View>
+  );
+});
diff --git a/src/features/rnbw-membership/components/ShadowLayers.tsx b/src/features/rnbw-membership/components/ShadowLayers.tsx
index f301b1ced82..60ede92d8c5 100644
--- a/src/features/rnbw-membership/components/ShadowLayers.tsx
+++ b/src/features/rnbw-membership/components/ShadowLayers.tsx
@@ -13,6 +13,7 @@ type ShadowLayersProps = {
   borderRadius: number;
   backgroundColor: string;
   children: ReactNode;
+  outerGlowLayer?: ReactNode;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -30,9 +31,17 @@ function getShadowLayerStyle(shadowStyle: ShadowStyle): ViewStyle {
   return shadowStyle;
 }
 
-export const ShadowLayers = memo(function ShadowLayers({ shadows, borderRadius, backgroundColor, children, style }: ShadowLayersProps) {
+export const ShadowLayers = memo(function ShadowLayers({
+  shadows,
+  borderRadius,
+  backgroundColor,
+  children,
+  outerGlowLayer,
+  style,
+}: ShadowLayersProps) {
   return (
     <View style={[styles.container, style]}>
+      {outerGlowLayer}
       {shadows.map((shadowStyle, index) => (
         <View
           key={`${shadowStyle.shadowColor}-${index}`}
diff --git a/src/features/rnbw-membership/components/SkiaGradientShadow.tsx b/src/features/rnbw-membership/components/SkiaGradientShadow.tsx
new file mode 100644
index 00000000000..5def03ec77a
--- /dev/null
+++ b/src/features/rnbw-membership/components/SkiaGradientShadow.tsx
@@ -0,0 +1,77 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { PixelRatio, StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+
+import { Blur, Canvas, RoundedRect, LinearGradient as SkiaLinearGradient, vec } from '@shopify/react-native-skia';
+
+import type { GradientShadow } from '@/features/rnbw-membership/tierVisuals';
+
+const DEFAULT_START = { x: 0, y: 0.5 };
+const DEFAULT_END = { x: 1, y: 0.5 };
+
+type SkiaGradientShadowProps = {
+  borderRadius: number;
+  shadow: GradientShadow;
+};
+
+export const SkiaGradientShadow = memo(function SkiaGradientShadow({ borderRadius, shadow }: SkiaGradientShadowProps) {
+  const [layout, setLayout] = useState<{ width: number; height: number } | null>(null);
+
+  const dx = shadow.dx ?? 0;
+  const dy = shadow.dy ?? 0;
+  const start = shadow.start ?? DEFAULT_START;
+  const end = shadow.end ?? DEFAULT_END;
+  const padding = useMemo(
+    () => PixelRatio.roundToNearestPixel(shadow.blur * 2 + Math.max(Math.abs(dx), Math.abs(dy))),
+    [shadow.blur, dx, dy]
+  );
+
+  const skiaColors = useMemo(() => [...shadow.colors], [shadow.colors]);
+  const skiaLocations = useMemo(() => (shadow.locations ? [...shadow.locations] : undefined), [shadow.locations]);
+
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const nextLayout = {
+      width: PixelRatio.roundToNearestPixel(event.nativeEvent.layout.width),
+      height: PixelRatio.roundToNearestPixel(event.nativeEvent.layout.height),
+    };
+
+    setLayout(current => (current && current.width === nextLayout.width && current.height === nextLayout.height ? current : nextLayout));
+  }, []);
+
+  const width = layout?.width ?? 0;
+  const height = layout?.height ?? 0;
+  const canRender = width > 0 && height > 0;
+
+  return (
+    <View pointerEvents="none" style={StyleSheet.absoluteFill} onLayout={handleLayout}>
+      {canRender && (
+        <Canvas
+          style={[
+            styles.canvas,
+            {
+              top: -padding,
+              left: -padding,
+              width: width + padding * 2,
+              height: height + padding * 2,
+            },
+          ]}
+        >
+          <RoundedRect x={padding + dx} y={padding + dy} width={width} height={height} r={borderRadius} opacity={shadow.opacity}>
+            <SkiaLinearGradient
+              start={vec(padding + dx + width * start.x, padding + dy + height * start.y)}
+              end={vec(padding + dx + width * end.x, padding + dy + height * end.y)}
+              colors={skiaColors}
+              positions={skiaLocations}
+            />
+            <Blur blur={shadow.blur} />
+          </RoundedRect>
+        </Canvas>
+      )}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  canvas: {
+    position: 'absolute',
+  },
+});
diff --git a/src/features/rnbw-membership/components/TierBadge.tsx b/src/features/rnbw-membership/components/TierBadge.tsx
index 411e1b46118..b83b5a8a5a9 100644
--- a/src/features/rnbw-membership/components/TierBadge.tsx
+++ b/src/features/rnbw-membership/components/TierBadge.tsx
@@ -9,7 +9,9 @@ import { Text, useColorMode } from '@/design-system';
 import { getValueForColorMode, globalColors } from '@/design-system/color/palettes';
 import type { TextSize, TextWeight } from '@/design-system/components/Text/Text';
 import { InnerShadow } from '@/features/polymarket/components/InnerShadow';
+import { RainbowShimmerFill } from '@/features/rnbw-membership/components/RainbowShimmerFill';
 import { ShadowLayers } from '@/features/rnbw-membership/components/ShadowLayers';
+import { SkiaGradientShadow } from '@/features/rnbw-membership/components/SkiaGradientShadow';
 import { getTierBadgeTheme } from '@/features/rnbw-membership/tierVisuals';
 import type { Tier as TierType } from '@/features/rnbw-membership/types';
 import { opacity } from '@/framework/ui/utils/opacity';
@@ -36,7 +38,14 @@ export const TierBadge = memo(function TierBadge({
 }) {
   const { colorMode } = useColorMode();
   const borderRadius = height / 2;
-  const { fill: badgeGradient, text, shadows: badgeShadows, border: badgeBorderGradient } = getTierBadgeTheme(tier.level);
+  const {
+    fill: badgeGradient,
+    text,
+    shadows: badgeShadows,
+    border: badgeBorderGradient,
+    overlay,
+    backgroundShadow,
+  } = getTierBadgeTheme(tier.level);
   const {
     colors: badgeGradientColors,
     locations: badgeGradientLocations,
@@ -57,6 +66,8 @@ export const TierBadge = memo(function TierBadge({
   } = getValueForColorMode(badgeBorderGradient, colorMode);
   const shadowStyles = getValueForColorMode(badgeShadows, colorMode);
   const textShadowStyle = getValueForColorMode(text.shadow, colorMode);
+  const resolvedOverlay = overlay ? getValueForColorMode(overlay, colorMode) : null;
+  const resolvedBackgroundShadow = backgroundShadow ? getValueForColorMode(backgroundShadow, colorMode) : null;
   const [firstBadgeGradientColor] = badgeGradientColors;
   const shadowLayerBackgroundColor = typeof firstBadgeGradientColor === 'string' ? firstBadgeGradientColor : '#FFFFFF';
 
@@ -65,6 +76,9 @@ export const TierBadge = memo(function TierBadge({
       shadows={shadowStyles}
       borderRadius={borderRadius}
       backgroundColor={shadowLayerBackgroundColor}
+      outerGlowLayer={
+        resolvedBackgroundShadow ? <SkiaGradientShadow borderRadius={borderRadius} shadow={resolvedBackgroundShadow} /> : null
+      }
       style={styles.shadowStack}
     >
       <GradientBorderView
@@ -76,13 +90,24 @@ export const TierBadge = memo(function TierBadge({
         style={[styles.tierBadge, { height, borderRadius }]}
       >
         <InnerShadow color={opacity(globalColors.white100, 0.1)} blur={1} dx={0} dy={3} borderRadius={borderRadius} />
-        <LinearGradient
-          colors={badgeGradientColors}
-          locations={badgeGradientLocations}
-          start={badgeStart}
-          end={badgeEnd}
-          style={StyleSheet.absoluteFill}
-        />
+        {resolvedOverlay ? (
+          <RainbowShimmerFill
+            fillColors={badgeGradientColors}
+            fillLocations={badgeGradientLocations}
+            fillStart={badgeStart}
+            fillEnd={badgeEnd}
+            borderRadius={borderRadius}
+            overlay={resolvedOverlay}
+          />
+        ) : (
+          <LinearGradient
+            colors={badgeGradientColors}
+            locations={badgeGradientLocations}
+            start={badgeStart}
+            end={badgeEnd}
+            style={StyleSheet.absoluteFill}
+          />
+        )}
         <GradientText
           colors={badgeTextGradientColors}
           locations={badgeTextGradientLocations}
diff --git a/src/features/rnbw-membership/components/TierProgressBar.tsx b/src/features/rnbw-membership/components/TierProgressBar.tsx
index e3dddfb0441..ff43962e8fa 100644
--- a/src/features/rnbw-membership/components/TierProgressBar.tsx
+++ b/src/features/rnbw-membership/components/TierProgressBar.tsx
@@ -8,6 +8,7 @@ import { GradientBorderView } from '@/components/gradient-border/GradientBorderV
 import { useBackgroundColor, useColorMode } from '@/design-system';
 import { getValueForColorMode } from '@/design-system/color/palettes';
 import { InnerShadow } from '@/features/polymarket/components/InnerShadow';
+import { SkiaGradientShadow } from '@/features/rnbw-membership/components/SkiaGradientShadow';
 import { getTierProgressBarTheme } from '@/features/rnbw-membership/tierVisuals';
 import type { Tier } from '@/features/rnbw-membership/types';
 import { opacity } from '@/framework/ui/utils/opacity';
@@ -41,13 +42,14 @@ export const TierProgressBar = memo(function TierProgressBar({
   const backgroundColor = isDarkMode ? '#242529' : surfaceSecondary;
   const isMaxTier = tierIndex === tierCount - 1;
 
-  const { gradient, borderGradient, shadow, highlightGradient } = useMemo(() => {
+  const { gradient, borderGradient, shadow, highlightGradient, backgroundShadow } = useMemo(() => {
     const progressTheme = getTierProgressBarTheme(tier.level);
     return {
       gradient: getValueForColorMode(progressTheme.fill, colorMode),
       borderGradient: getValueForColorMode(progressTheme.border, colorMode),
       shadow: getValueForColorMode(progressTheme.shadow, colorMode),
       highlightGradient: getValueForColorMode(progressTheme.highlight, colorMode),
+      backgroundShadow: progressTheme.backgroundShadow ? getValueForColorMode(progressTheme.backgroundShadow, colorMode) : null,
     };
   }, [tier.level, colorMode]);
 
@@ -82,6 +84,13 @@ export const TierProgressBar = memo(function TierProgressBar({
     };
   }, [fillWidth]);
 
+  // Skia wants mutable arrays
+  const skiaHighlightColors = useMemo(() => [...highlightGradient.colors], [highlightGradient.colors]);
+  const skiaHighlightLocations = useMemo(
+    () => (highlightGradient.locations ? [...highlightGradient.locations] : undefined),
+    [highlightGradient.locations]
+  );
+
   return (
     <GradientBorderView
       borderGradientColors={isDarkMode ? [opacity('#9AA2A7', 0.016), opacity('#9AA2A7', 0.08)] : ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']}
@@ -92,68 +101,76 @@ export const TierProgressBar = memo(function TierProgressBar({
       style={{ height, width, overflow: 'visible' }}
     >
       <TierDots tierCount={tierCount} />
-      <GradientBorderView
-        borderGradientColors={borderGradient.colors}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 0, y: 1 }}
-        borderWidth={1}
-        borderTopRightRadius={rightRadius}
-        borderBottomRightRadius={rightRadius}
-        borderTopLeftRadius={leftRadius}
-        borderBottomLeftRadius={leftRadius}
+      <View
         style={{
-          height,
-          width: fillWidth,
           position: 'absolute',
           top: 0,
           left: 0,
+          width: fillWidth,
+          height,
           overflow: 'visible',
-          ...shadow,
         }}
       >
-        <LinearGradient
-          colors={gradient.colors}
-          start={gradient.start}
-          end={gradient.end}
-          style={[
-            StyleSheet.absoluteFill,
-            {
-              borderTopRightRadius: rightRadius,
-              borderBottomRightRadius: rightRadius,
-              borderTopLeftRadius: leftRadius,
-              borderBottomLeftRadius: leftRadius,
-              borderCurve: 'continuous',
-            },
-          ]}
-        />
-        <Canvas
+        {backgroundShadow ? <SkiaGradientShadow borderRadius={height / 2} shadow={backgroundShadow} /> : null}
+        <GradientBorderView
+          borderGradientColors={borderGradient.colors}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0, y: 1 }}
+          borderWidth={1}
+          borderTopRightRadius={rightRadius}
+          borderBottomRightRadius={rightRadius}
+          borderTopLeftRadius={leftRadius}
+          borderBottomLeftRadius={leftRadius}
           style={{
-            position: 'absolute',
-            top: progressHighlight.canvasTop,
-            left: progressHighlight.canvasLeft,
-            height: progressHighlight.canvasHeight,
-            width: progressHighlight.canvasWidth,
+            height,
+            width: fillWidth,
+            overflow: 'visible',
+            ...shadow,
           }}
         >
-          <RoundedRect
-            x={progressHighlight.rectX}
-            y={progressHighlight.rectY}
-            width={progressHighlight.rectWidth}
-            height={PROGRESS_HIGHLIGHT_HEIGHT}
-            r={PROGRESS_HIGHLIGHT_RADIUS}
-            opacity={0.5}
+          <LinearGradient
+            colors={gradient.colors}
+            start={gradient.start}
+            end={gradient.end}
+            style={[
+              StyleSheet.absoluteFill,
+              {
+                borderTopRightRadius: rightRadius,
+                borderBottomRightRadius: rightRadius,
+                borderTopLeftRadius: leftRadius,
+                borderBottomLeftRadius: leftRadius,
+                borderCurve: 'continuous',
+              },
+            ]}
+          />
+          <Canvas
+            style={{
+              position: 'absolute',
+              top: progressHighlight.canvasTop,
+              left: progressHighlight.canvasLeft,
+              height: progressHighlight.canvasHeight,
+              width: progressHighlight.canvasWidth,
+            }}
           >
-            <SkiaLinearGradient
-              start={vec(progressHighlight.rectX, progressHighlight.rectY)}
-              end={vec(progressHighlight.rectX + progressHighlight.rectWidth, progressHighlight.rectY)}
-              // Cast expo LinearGradientProps for Skia compatibility
-              positions={highlightGradient.locations as unknown as number[] | undefined}
-              colors={highlightGradient.colors as unknown as string[]}
-            />
-            <Blur blur={PROGRESS_HIGHLIGHT_BLUR} />
-          </RoundedRect>
-        </Canvas>
-      </GradientBorderView>
+            <RoundedRect
+              x={progressHighlight.rectX}
+              y={progressHighlight.rectY}
+              width={progressHighlight.rectWidth}
+              height={PROGRESS_HIGHLIGHT_HEIGHT}
+              r={PROGRESS_HIGHLIGHT_RADIUS}
+              opacity={0.5}
+            >
+              <SkiaLinearGradient
+                start={vec(progressHighlight.rectX, progressHighlight.rectY)}
+                end={vec(progressHighlight.rectX + progressHighlight.rectWidth, progressHighlight.rectY)}
+                positions={skiaHighlightLocations}
+                colors={skiaHighlightColors}
+              />
+              <Blur blur={PROGRESS_HIGHLIGHT_BLUR} />
+            </RoundedRect>
+          </Canvas>
+        </GradientBorderView>
+      </View>
       <InnerShadow
         width={width}
         height={height}
diff --git a/src/features/rnbw-membership/tierVisuals.ts b/src/features/rnbw-membership/tierVisuals.ts
index 3460ccb2062..f8f78e7117e 100644
--- a/src/features/rnbw-membership/tierVisuals.ts
+++ b/src/features/rnbw-membership/tierVisuals.ts
@@ -1,5 +1,3 @@
-import type { LinearGradientProps } from 'expo-linear-gradient';
-
 import { globalColors } from '@/design-system/color/palettes';
 import { RNBW_BUTTON_CONFIG } from '@/features/rnbw-membership/rnbwButtonTheme';
 import type { TierId } from '@/features/rnbw-membership/types';
@@ -9,10 +7,12 @@ import { opacity } from '@/framework/ui/utils/opacity';
 
 type Point = { x: number; y: number };
 type Themed<T> = { light: T; dark: T };
+export type GradientColors = readonly [string, string, ...string[]];
+export type GradientLocations = readonly [number, number, ...number[]];
 
 type Gradient = {
-  colors: LinearGradientProps['colors'];
-  locations?: LinearGradientProps['locations'];
+  colors: GradientColors;
+  locations?: GradientLocations;
   start?: Point;
   end?: Point;
 };
@@ -30,6 +30,27 @@ type TextShadow = {
   textShadowRadius: number;
 };
 
+export type HardLightOverlay = {
+  colors: GradientColors;
+  locations: GradientLocations;
+  maskShadow: {
+    blur: number;
+    dx: number;
+    dy: number;
+  };
+};
+
+export type GradientShadow = {
+  colors: GradientColors;
+  locations?: GradientLocations;
+  start?: Point;
+  end?: Point;
+  opacity: number;
+  blur: number;
+  dx?: number;
+  dy?: number;
+};
+
 type GradientTextTheme = {
   gradient: Themed<Gradient>;
   shadow: Themed<TextShadow>;
@@ -40,6 +61,8 @@ type BadgeTheme = {
   border: Themed<Gradient>;
   shadows: Themed<readonly Shadow[]>;
   text: GradientTextTheme;
+  overlay?: Themed<HardLightOverlay>;
+  backgroundShadow?: Themed<GradientShadow>;
 };
 
 type ButtonSurfaceTheme = {
@@ -47,6 +70,7 @@ type ButtonSurfaceTheme = {
   border: Themed<Gradient>;
   shadows: Themed<readonly Shadow[]>;
   highlight?: Themed<Gradient>;
+  overlay?: Themed<HardLightOverlay>;
 };
 
 type PrimaryButtonTheme = {
@@ -64,6 +88,7 @@ type ProgressBarTheme = {
   border: Themed<Gradient>;
   shadow: Themed<Shadow>;
   highlight: Themed<Gradient>;
+  backgroundShadow?: Themed<GradientShadow>;
 };
 
 type TierTheme = {
@@ -80,6 +105,7 @@ type PrimaryButtonConfig = {
   border?: Themed<Gradient>;
   shadows?: Themed<readonly Shadow[]>;
   highlight?: Themed<Gradient>;
+  overlay?: Themed<HardLightOverlay>;
   text?: {
     gradient?: Themed<Gradient>;
     shadow?: Themed<TextShadow>;
@@ -90,6 +116,7 @@ type SecondaryButtonConfig = {
   fill: Themed<Gradient>;
   border?: Themed<Gradient>;
   shadows?: Themed<readonly Shadow[]>;
+  overlay?: Themed<HardLightOverlay>;
   textColor: Themed<string>;
 };
 
@@ -119,12 +146,16 @@ const textShadow = (textShadowColor: string, textShadowOffset: TextShadow['textS
   textShadowRadius,
 });
 
+function isShadowArray(value: Shadow | readonly Shadow[]): value is readonly Shadow[] {
+  return Array.isArray(value);
+}
+
 function toShadowArray(value: Shadow | readonly Shadow[]): readonly Shadow[] {
-  if (Array.isArray(value)) {
-    return value as readonly Shadow[];
+  if (isShadowArray(value)) {
+    return value;
   }
 
-  return [value as Shadow];
+  return [value];
 }
 
 const themedShadows = (light: Shadow | readonly Shadow[], dark?: Shadow | readonly Shadow[]): Themed<readonly Shadow[]> =>
@@ -133,27 +164,34 @@ const themedShadows = (light: Shadow | readonly Shadow[], dark?: Shadow | readon
 const background = (lightColor: string, darkColor = lightColor): Themed<Gradient> =>
   themed(gradient([opacity(lightColor, 0.4), opacity(lightColor, 0)]), gradient([opacity(darkColor, 0.16), opacity(darkColor, 0)]));
 
-const badgePrimaryButton = (badge: BadgeTheme, config: PrimaryButtonConfig = {}): PrimaryButtonTheme => ({
-  surface: {
-    fill: config.fill ?? badge.fill,
-    border: config.border ?? badge.border,
-    shadows: config.shadows ?? badge.shadows,
-    ...(config.highlight ? { highlight: config.highlight } : {}),
-  },
-  text: {
-    gradient: config.text?.gradient ?? badge.text.gradient,
-    shadow: config.text?.shadow ?? badge.text.shadow,
-  },
-});
+const badgePrimaryButton = (badge: BadgeTheme, config: PrimaryButtonConfig = {}): PrimaryButtonTheme => {
+  const overlay = config.overlay ?? badge.overlay;
+  return {
+    surface: {
+      fill: config.fill ?? badge.fill,
+      border: config.border ?? badge.border,
+      shadows: config.shadows ?? badge.shadows,
+      ...(config.highlight ? { highlight: config.highlight } : {}),
+      ...(overlay ? { overlay } : {}),
+    },
+    text: {
+      gradient: config.text?.gradient ?? badge.text.gradient,
+      shadow: config.text?.shadow ?? badge.text.shadow,
+    },
+  };
+};
 
-const secondaryButton = (badge: BadgeTheme, config: SecondaryButtonConfig): SecondaryButtonTheme => ({
-  surface: {
-    fill: config.fill,
-    border: config.border ?? badge.border,
-    shadows: config.shadows ?? badge.shadows,
-  },
-  textColor: config.textColor,
-});
+const secondaryButton = (badge: BadgeTheme, config: SecondaryButtonConfig): SecondaryButtonTheme => {
+  return {
+    surface: {
+      fill: config.fill,
+      border: config.border ?? badge.border,
+      shadows: config.shadows ?? badge.shadows,
+      ...(config.overlay ? { overlay: config.overlay } : {}),
+    },
+    textColor: config.textColor,
+  };
+};
 
 // ============ Shared Tokens ================================================== //
 
@@ -161,6 +199,30 @@ const LIGHT_BADGE_BORDER_COLORS: Gradient['colors'] = [opacity(globalColors.grey
 const DEFAULT_BADGE_SHADOW = shadow('#000000', { width: 0, height: 4 }, 0.06, 6);
 const DEFAULT_PROGRESS_HIGHLIGHT = themed(solid('#FFFFFF'));
 const MONO_LABEL_GRADIENT = themed(solid('#000000'), solid('#FFFFFF'));
+const TRANSPARENT_BORDER_COLORS: Gradient['colors'] = ['rgba(0,0,0,0)', 'rgba(0,0,0,0)'];
+
+const BLACK_TIER_RAINBOW_OVERLAY_COLORS: HardLightOverlay['colors'] = ['#A78BFF', '#8AD7FF', '#70D59E', '#FADA5D', '#FF9C92', '#FBAFD0'];
+const BLACK_TIER_RAINBOW_OVERLAY_LOCATIONS: HardLightOverlay['locations'] = [0, 0.147, 0.362, 0.566, 0.785, 1];
+
+const BLACK_TIER_BADGE_RAINBOW_OVERLAY: Themed<HardLightOverlay> = themed({
+  colors: BLACK_TIER_RAINBOW_OVERLAY_COLORS,
+  locations: BLACK_TIER_RAINBOW_OVERLAY_LOCATIONS,
+  maskShadow: {
+    blur: 2,
+    dx: 0,
+    dy: 2,
+  },
+});
+
+const BLACK_TIER_PRIMARY_BUTTON_RAINBOW_OVERLAY: Themed<HardLightOverlay> = themed({
+  colors: BLACK_TIER_RAINBOW_OVERLAY_COLORS,
+  locations: BLACK_TIER_RAINBOW_OVERLAY_LOCATIONS,
+  maskShadow: {
+    blur: 2.5,
+    dx: 0,
+    dy: 4,
+  },
+});
 
 // ============ Badges ========================================================= //
 
@@ -215,12 +277,20 @@ const DIAMOND_BADGE: BadgeTheme = {
 
 const BLACK_BADGE: BadgeTheme = {
   fill: themed(gradient(['#444444', '#000000'])),
-  border: themed(gradient(LIGHT_BADGE_BORDER_COLORS)),
+  border: themed(gradient(TRANSPARENT_BORDER_COLORS)),
   shadows: themedShadows(DEFAULT_BADGE_SHADOW),
   text: {
     gradient: themed(solid('#FFFFFF')),
     shadow: themed(textShadow('rgba(0, 0, 0, 0)', { width: 0, height: 0 }, 0)),
   },
+  overlay: BLACK_TIER_BADGE_RAINBOW_OVERLAY,
+  backgroundShadow: themed({
+    colors: BLACK_TIER_RAINBOW_OVERLAY_COLORS,
+    locations: BLACK_TIER_RAINBOW_OVERLAY_LOCATIONS,
+    opacity: 0.5,
+    blur: 16,
+    dy: 0,
+  }),
 };
 
 // ============ Buttons ======================================================== //
@@ -333,7 +403,8 @@ const TIER_THEMES: Record<TierId, TierTheme> = {
     labelGradient: MONO_LABEL_GRADIENT,
     badge: BLACK_BADGE,
     primaryButton: badgePrimaryButton(BLACK_BADGE, {
-      fill: themed(solid('#1A1716')),
+      fill: themed(gradient(['#2A2A2A', '#141414']), gradient(['#272727', '#141414'])),
+      overlay: BLACK_TIER_PRIMARY_BUTTON_RAINBOW_OVERLAY,
     }),
     secondaryButton: secondaryButton(BLACK_BADGE, {
       fill: themed(
@@ -348,6 +419,13 @@ const TIER_THEMES: Record<TierId, TierTheme> = {
       fill: themed(gradient(['#444444', '#000000'])),
       border: themed(solid('rgba(0,0,0,0)')),
       shadow: themed(shadow('#000000', { width: 0, height: 4 }, 0.06, 6)),
+      backgroundShadow: themed({
+        colors: BLACK_TIER_RAINBOW_OVERLAY_COLORS,
+        locations: BLACK_TIER_RAINBOW_OVERLAY_LOCATIONS,
+        opacity: 0.24,
+        blur: 12,
+        dy: 0,
+      }),
       highlight: themed(
         gradient(['#7D53FF', '#3FBDFF', '#4BFF9D', '#FFD73A', '#FF5E4D', '#FF3C91'], {
           locations: [0, 0.15, 0.36, 0.57, 0.79, 1],
@@ -361,8 +439,12 @@ const TIER_THEMES: Record<TierId, TierTheme> = {
 
 const FALLBACK_TIER_THEME = TIER_THEMES.STAKING_TIER_LEVEL_BASIC;
 
+function isTierId(level: string): level is TierId {
+  return level in TIER_THEMES;
+}
+
 function resolveTierTheme(level: TierId | string): TierTheme {
-  return TIER_THEMES[level as TierId] ?? FALLBACK_TIER_THEME;
+  return isTierId(level) ? TIER_THEMES[level] : FALLBACK_TIER_THEME;
 }
 
 export function getTierBackgroundTheme(level: TierId | string): { gradient: Themed<Gradient> } {