diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx
index 2a70d68208..041d387fbe 100644
--- a/packages/docs-gesture-handler/docs/components/buttons.mdx
+++ b/packages/docs-gesture-handler/docs/components/buttons.mdx
@@ -7,6 +7,8 @@ sidebar_label: Buttons
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery';
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 <GifGallery>
   <img src={useBaseUrl('gifs/samplebutton.gif')} width="280" />
 </GifGallery>
@@ -37,7 +39,9 @@ exclusive?: boolean;
 
 Defines if more than one button could be pressed simultaneously. By default set to `true`.
 
-### rippleColor (**Android only**)
+<HeaderWithBadges platforms={['android']}>
+### rippleColor
+</HeaderWithBadges>
 
 ```ts
 rippleColor?: number | ColorValue | null;
@@ -45,7 +49,10 @@ rippleColor?: number | ColorValue | null;
 
 Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
 
-### rippleRadius (**Android only**)
+<HeaderWithBadges platforms={['android']}>
+### rippleRadius
+</HeaderWithBadges>
+
 
 ```ts
 rippleRadius?: number | null;
@@ -53,7 +60,9 @@ rippleRadius?: number | null;
 
 Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
 
-### borderless (**Android only**)
+<HeaderWithBadges platforms={['android']}>
+### borderless
+</HeaderWithBadges>
 
 ```ts
 borderless?: boolean;
@@ -61,7 +70,9 @@ borderless?: boolean;
 
 If set to `false`, [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation will render only within view bounds.
 
-### foreground (**Android only**)
+<HeaderWithBadges platforms={['android']}>
+### foreground
+</HeaderWithBadges>
 
 ```ts
 foreground?: boolean;
@@ -69,7 +80,9 @@ foreground?: boolean;
 
 Defines whether the [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation should be drawn on the foreground of the view.
 
-### touchSoundDisabled (**Android only**)
+<HeaderWithBadges platforms={['android']}>
+### touchSoundDisabled
+</HeaderWithBadges>
 
 ```ts
 touchSoundDisabled?: boolean;
@@ -127,7 +140,9 @@ underlayColor?: string;
 
 Background color that will be dimmed when button is in active state.
 
-### activeOpacity (**iOS only**)
+<HeaderWithBadges platforms={['iOS']}>
+### activeOpacity
+</HeaderWithBadges>
 
 ```ts
 activeOpacity?: number;
@@ -139,7 +154,9 @@ Opacity applied to the underlay when button is in active state.
 
 This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](#basebutton), it accepts the following:
 
-### activeOpacity (**iOS only**)
+<HeaderWithBadges platforms={['iOS']}>
+### activeOpacity
+</HeaderWithBadges>
 
 ```ts
 activeOpacity?: number;
diff --git a/packages/docs-gesture-handler/docs/components/pressable.mdx b/packages/docs-gesture-handler/docs/components/pressable.mdx
index b280113b24..5c89da1876 100644
--- a/packages/docs-gesture-handler/docs/components/pressable.mdx
+++ b/packages/docs-gesture-handler/docs/components/pressable.mdx
@@ -7,6 +7,8 @@ sidebar_label: Pressable
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery';
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 :::info
 This component is a drop-in replacement for the `Pressable` component.
 :::
@@ -87,7 +89,9 @@ cancelable?: null | boolean;
 
 Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.
 
-### onHoverIn (Web only)
+<HeaderWithBadges platforms={['android', 'web']}>
+### onHoverIn
+</HeaderWithBadges>
 
 ```ts
 onHoverIn?: null | ((event: PressableEvent) => void);
@@ -95,7 +99,9 @@ onHoverIn?: null | ((event: PressableEvent) => void);
 
 Called when pointer is hovering over the element.
 
-### onHoverOut (Web only)
+<HeaderWithBadges platforms={['android', 'web']}>
+### onHoverOut
+</HeaderWithBadges>
 
 ```ts
 onHoverOut?: null | ((event: PressableEvent) => void);
@@ -103,7 +109,9 @@ onHoverOut?: null | ((event: PressableEvent) => void);
 
 Called when pointer stops hovering over the element.
 
-### delayHoverIn (Web only)
+<HeaderWithBadges platforms={['web']}>
+### delayHoverIn
+</HeaderWithBadges>
 
 ```ts
 delayHoverIn?: number | null;
@@ -111,7 +119,9 @@ delayHoverIn?: number | null;
 
 Duration to wait after hover in before calling `onHoverIn`.
 
-### delayHoverOut (Web only)
+<HeaderWithBadges platforms={['web']}>
+### delayHoverOut
+</HeaderWithBadges>
 
 ```ts
 delayHoverOut?: number | null;
@@ -135,7 +145,9 @@ disabled?: null | boolean;
 
 Whether the `Pressable` behavior is disabled.
 
-### hitSlop (Android & iOS only)
+<HeaderWithBadges platforms={['android', 'iOS']}>
+### hitSlop
+</HeaderWithBadges>
 
 ```ts
 hitSlop?: null | Insets | number;
@@ -145,7 +157,9 @@ Additional distance outside of the view in which a press is detected and [`onPre
 
 The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
-### pressRetentionOffset (Android & iOS only)
+<HeaderWithBadges platforms={['android', 'iOS']}>
+### pressRetentionOffset
+</HeaderWithBadges>
 
 ```ts
 pressRetentionOffset?: null | Insets | number;
@@ -156,7 +170,9 @@ press before [`onPressOut`](#onpressout) is triggered.
 
 The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
-### android_disableSound (Android only)
+<HeaderWithBadges platforms={['android']}>
+### android_disableSound
+</HeaderWithBadges>
 
 ```ts
 android_disableSound?: null | boolean;
@@ -164,7 +180,9 @@ android_disableSound?: null | boolean;
 
 If `true`, doesn't play system sound on touch.
 
-### android_ripple (Android only)
+<HeaderWithBadges platforms={['android']}>
+### android_ripple
+</HeaderWithBadges>
 
 ```ts
 android_ripple?: null | PressableAndroidRippleConfig;
diff --git a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx
index d9e8fefc45..89d8c8cff0 100644
--- a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx
+++ b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx
@@ -6,6 +6,8 @@ sidebar_label: Reanimated Drawer Layout
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 :::info
 This component acts as a cross-platform replacement for React Native's [`DrawerLayoutAndroid`](http://reactnative.dev/docs/drawerlayoutandroid.html) component, written using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). For detailed information on standard parameters, please refer to the [React Native documentation](http://reactnative.dev/docs/drawerlayoutandroid.html).
 :::
@@ -132,7 +134,9 @@ export enum DrawerState {
 
 A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise.
 
-### enableTrackpadTwoFingerGesture (iOS only)
+<HeaderWithBadges platforms={['iOS']}>
+### enableTrackpadTwoFingerGesture
+</HeaderWithBadges>
 
 ```ts
 enableTrackpadTwoFingerGesture?: boolean;
@@ -149,7 +153,9 @@ children?: ReactNode | ((openValue?: SharedValue<number>) => ReactNode);
 
 Either a component rendered in the content view or a function. If `children` is a function, it receives an `openValue` parameter -  [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) that indicates the progress of the drawer's opening or closing animation. This value equals `0` when the drawer is closed and `1` when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a [`ReactNode`](https://reactnative.dev/docs/react-node).
 
-### mouseButton (Web & Android only)
+<HeaderWithBadges platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"
@@ -170,8 +176,9 @@ enum MouseButton {
 
 Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
 
-
-### enableContextMenu (Web only)
+<HeaderWithBadges platforms={['web']}>
+### enableContextMenu
+</HeaderWithBadges>
 
 ```ts
 enableContextMenu: boolean;
diff --git a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
index 71e44e83f5..c864df16b2 100644
--- a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
+++ b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
@@ -7,6 +7,8 @@ sidebar_label: Reanimated Swipeable
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery'
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 :::info
 This component is a drop-in replacement for the `Swipeable` component, rewritten using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
 :::
@@ -240,7 +242,9 @@ blocksExternalGesture?: AnyGesture | AnyGesture[];
 
 Gestures that `Swipeable` will prevent from activating (see [gesture composition section](/docs/fundamentals/gesture-composition#simultaneouswith)).
 
-### enableTrackpadTwoFingerGesture (iOS only)
+<HeaderWithBadges platforms={['iOS']}>
+### enableTrackpadTwoFingerGesture
+</HeaderWithBadges>
 
 ```ts
 enableTrackpadTwoFingerGesture?: boolean;
@@ -248,7 +252,9 @@ enableTrackpadTwoFingerGesture?: boolean;
 
 Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture.
 
-### mouseButton (Web & Android only)
+<HeaderWithBadges platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"
@@ -269,7 +275,9 @@ enum MouseButton {
 
 Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
 
-### enableContextMenu (Web only)
+<HeaderWithBadges platforms={['web']}>
+### enableContextMenu
+</HeaderWithBadges>
 
 ```ts
 enableContextMenu: boolean;
diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx
index cf88c68a7b..448855177d 100644
--- a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx
+++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx
@@ -6,7 +6,7 @@ sidebar_position: 4
 ---
 
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
-
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
 ## Gesture Detector
 
@@ -190,7 +190,9 @@ gesture: SingleGesture | ComposedGesture;
 
 A gesture object containing the configuration and callbacks. Can be any of the base gestures or any [`ComposedGesture`](/docs/fundamentals/gesture-composition).
 
-### userSelect (Web only)
+<HeaderWithBadges platforms={['web']}>
+### userSelect
+</HeaderWithBadges>
 
 ```ts
 userSelect: 'none' | 'auto' | 'text';
@@ -198,7 +200,9 @@ userSelect: 'none' | 'auto' | 'text';
 
 This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`.
 
-### touchAction (Web only)
+<HeaderWithBadges platforms={['web']}>
+### touchAction
+</HeaderWithBadges>
 
 ```ts
 touchAction: TouchAction;
@@ -206,7 +210,9 @@ touchAction: TouchAction;
 
 This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`.
 
-### enableContextMenu (Web only)
+<HeaderWithBadges platforms={['web']}>
+### enableContextMenu
+</HeaderWithBadges>
 
 ```ts
 enableContextMenu: boolean;
diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx
index 65b43f0bfc..5b8fcd62f0 100644
--- a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx
@@ -1,5 +1,7 @@
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 ### enabled
 
 ```ts
@@ -67,7 +69,9 @@ testID: string;
 
 Sets a `testID` property for gesture object, allowing for querying for it in tests.
 
-### cancelsTouchesInView (**iOS only**)
+<HeaderWithBadges platforms={['iOS']}>
+### cancelsTouchesInView
+</HeaderWithBadges>
 
 ```ts
 cancelsTouchesInView: boolean | SharedValue<boolean>;
diff --git a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx
index bbf1ca4d85..056fe93efd 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx
@@ -12,6 +12,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
 import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
     <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
@@ -140,7 +142,9 @@ numberOfPointers: number | SharedValue<number>;
 
 Determine exact number of points required to handle the fling gesture.
 
-### mouseButton (Web & Android only)
+<HeaderWithBadges platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"
diff --git a/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx
index d685c5be3d..37208c7c52 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx
@@ -12,6 +12,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import HoverGestureBasic from '@site/static/examples/HoverGestureBasic';
 import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic';
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
     <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
@@ -91,7 +93,9 @@ const styles = StyleSheet.create({
 
 <SharedValueInfo />
 
-### effect (iOS only)
+<HeaderWithBadges platforms={['iOS']}>
+### effect
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"
diff --git a/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx
index 14f2f31660..853bcf2692 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx
@@ -12,6 +12,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic';
 import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic';
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
     <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
@@ -73,7 +75,9 @@ maxDistance: number | SharedValue<number>;
 
 Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a long press gesture. If the finger travels further than the defined distance and the gesture hasn't yet activated, it will fail to recognize the gesture. The default value is 10.
 
-### mouseButton (Web & Android only)
+<HeaderWithBadges platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"
diff --git a/packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx
index c1e044fc81..3562935da2 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx
@@ -11,6 +11,8 @@ import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx';
 import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx';
 import SharedValueInfo from './\_shared/shared-value-info.md';
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 A gesture that allows other touch handling components to work within RNGH's gesture system. This streamlines interactions between gestures and the native component, allowing it to form [relations](/docs/fundamentals/gesture-composition) with other gestures.
 
 When used, the native component should be the direct child of a [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector).
@@ -96,7 +98,10 @@ export default function App() {
 
 <SharedValueInfo />
 
-### shouldActivateOnStart (**Android only**)
+<HeaderWithBadges platforms={['android']}>
+### shouldActivateOnStart
+</HeaderWithBadges>
+
 
 ```ts
 shouldActivateOnStart: boolean | SharedValue<boolean>;
diff --git a/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx
index 6a0523eba0..26b4d5304b 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx
@@ -21,6 +21,8 @@ import SharedValueInfo from './\_shared/shared-value-info.md';
 
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
     <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
@@ -209,7 +211,9 @@ When the finger moves outside this range (in points) along X axis and gesture ha
 If range is set as an array, first value must be lower or equal to 0, a the second one higher or equal to 0.
 If only one number `p` is given a range of `(-inf, p)` will be used if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
 
-### averageTouches (Android only)
+<HeaderWithBadges platforms={['android']}>
+### averageTouches
+</HeaderWithBadges>
 
 ```ts
 averageTouches: boolean | SharedValue<boolean>;
@@ -217,7 +221,9 @@ averageTouches: boolean | SharedValue<boolean>;
 
 Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen). This modifier allows that behavior to be changed to the one that is default on iOS - the averaged position of all active pointers will be used to calculate the translation values.
 
-### enableTrackpadTwoFingerGesture (iOS only)
+<HeaderWithBadges platforms={['iOS', 'web']}>
+### enableTrackpadTwoFingerGesture
+</HeaderWithBadges>
 
 ```ts
 enableTrackpadTwoFingerGesture: boolean | SharedValue<boolean>;
@@ -225,7 +231,9 @@ enableTrackpadTwoFingerGesture: boolean | SharedValue<boolean>;
 
 Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with enableTrackpadTwoFingerGesture swiping with two fingers will also trigger the gesture.
 
-### mouseButton (Web & Android only)
+<HeaderWithBadges platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"
diff --git a/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx
index 5b266e84cf..ce1a7d30b2 100644
--- a/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx
+++ b/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx
@@ -12,6 +12,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import TapGestureBasic from '@site/static/examples/TapGestureBasic';
 import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBasic';
 
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
     <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
@@ -153,7 +155,9 @@ maxDistance: number | SharedValue<number>;
 
 Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture. If the finger travels further than the defined distance and the gesture hasn't yet activated, it will fail to recognize the gesture.
 
-### mouseButton (Web & Android only)
+<HeaderWithBadges platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"
diff --git a/packages/docs-gesture-handler/docusaurus.config.js b/packages/docs-gesture-handler/docusaurus.config.js
index e99e54b4a8..d5380a1fc3 100644
--- a/packages/docs-gesture-handler/docusaurus.config.js
+++ b/packages/docs-gesture-handler/docusaurus.config.js
@@ -1,6 +1,7 @@
 /*
 In swizzled components look for "SWM -" string to see our modifications
 */
+const platformsCirclePlugin = require('./plugins/platforms-circles.js');
 
 const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
 const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
@@ -49,6 +50,10 @@ const config = {
               label: '3.x',
             },
           },
+          beforeDefaultRemarkPlugins: [
+            platformsCirclePlugin.processHeaderMarkers,
+          ],
+          remarkPlugins: [platformsCirclePlugin.removeHeaderJSX],
         },
         theme: {
           customCss: require.resolve('./src/css/index.css'),
diff --git a/packages/docs-gesture-handler/package.json b/packages/docs-gesture-handler/package.json
index 74b3cb0c83..acf40e90cd 100644
--- a/packages/docs-gesture-handler/package.json
+++ b/packages/docs-gesture-handler/package.json
@@ -51,6 +51,7 @@
     "react-native-worklets": "^0.1.0",
     "source-map": "^0.7.4",
     "source-map-loader": "^4.0.1",
+    "unist-util-visit": "^5.1.0",
     "usehooks-ts": "^2.9.1",
     "vis-network": "^10.0.2"
   },
diff --git a/packages/docs-gesture-handler/plugins/platforms-circles.js b/packages/docs-gesture-handler/plugins/platforms-circles.js
new file mode 100644
index 0000000000..b6e3afc1c6
--- /dev/null
+++ b/packages/docs-gesture-handler/plugins/platforms-circles.js
@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
+// plugins/remark-add-platform-metadata.js
+import { visit } from 'unist-util-visit';
+
+const platformClasses = {
+  '[A]': 'platform-indicator-android',
+  '[I]': 'platform-indicator-ios',
+  '[W]': 'platform-indicator-web',
+};
+
+const processHeaderMarkers = () => {
+  return (ast) => {
+    visit(ast, 'heading', (node) => {
+      let textContent = '';
+      let markers = [];
+
+      visit(node, 'text', (textNode) => {
+        // Split header into text and platform markers
+        const headerParts = textNode.value
+          .split(/(\[A\]|\[I\]|\[W\])/g)
+          .filter((headerPart) => headerPart !== '');
+
+        // Assume that the first part is always the text content, and the rest are markers
+        textContent = headerParts.shift().trimEnd();
+
+        // Sort markers to ensure consistent order
+        markers = headerParts.sort();
+      });
+
+      if (markers.length === 0) {
+        return;
+      }
+
+      const newChildren = [{ type: 'text', value: textContent }];
+
+      markers.forEach((marker) => {
+        newChildren.push({
+          type: 'mdxJsxTextElement',
+          name: 'span',
+          attributes: [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'className',
+              value: platformClasses[marker],
+            },
+          ],
+          children: [],
+          data: { isPlatformIndicator: true },
+        });
+      });
+
+      node.children = newChildren;
+    });
+  };
+};
+
+const removeHeaderJSX = () => {
+  return (ast) => {
+    const classes = Object.values(platformClasses);
+
+    visit(ast, 'heading', (node) => {
+      node.children = node.children.filter((child) => {
+        if (child.type === 'mdxJsxTextElement') {
+          const classAttr = child.attributes?.find(
+            (a) => a.name === 'className'
+          );
+
+          return !(classAttr && classes.includes(classAttr.value));
+        }
+
+        return true;
+      });
+    });
+  };
+};
+
+export { processHeaderMarkers, removeHeaderJSX };
diff --git a/packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx b/packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx
new file mode 100644
index 0000000000..1f706e21db
--- /dev/null
+++ b/packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+
+import styles from './styles.module.css';
+import clsx from 'clsx';
+
+type HeaderWithBadgesProps = {
+  platforms: string[];
+  version?: string;
+  children?: React.ReactNode;
+};
+
+type Platform = 'android' | 'ios' | 'web';
+
+type PlatformBadgeProps = {
+  platform: Platform;
+};
+
+type VersionBadgeProps = {
+  version: string;
+};
+
+const platformNameMap: Record<Platform, string> = {
+  android: 'Android',
+  ios: 'iOS',
+  web: 'Web',
+};
+
+export function VersionBadge({ version }: VersionBadgeProps) {
+  const { colorMode } = useColorMode();
+  const isDark = colorMode === 'dark';
+
+  return (
+    <div
+      className={clsx(
+        styles.badge,
+        styles.versionBadge,
+        isDark ? styles.versionBadgeDark : styles.versionBadgeLight
+      )}>
+      Available from {version}
+    </div>
+  );
+}
+
+export function PlatformBadge({ platform }: PlatformBadgeProps) {
+  let platformBadgeStyle;
+
+  switch (platform) {
+    case 'android':
+      platformBadgeStyle = styles.androidBadge;
+      break;
+    case 'ios':
+      platformBadgeStyle = styles.iosBadge;
+      break;
+    case 'web':
+      platformBadgeStyle = styles.webBadge;
+      break;
+    default:
+      platformBadgeStyle = {};
+  }
+
+  return (
+    <div className={clsx(styles.badge, platformBadgeStyle)}>
+      {platformNameMap[platform]}
+    </div>
+  );
+}
+
+export default function HeaderWithBadges({
+  platforms,
+  version,
+  children,
+}: HeaderWithBadgesProps) {
+  return (
+    <div className={clsx(styles.headerWithBadges)}>
+      {children}
+
+      {platforms
+        ?.map((platform) => platform.toLowerCase() as Platform)
+        .sort()
+        .map((platform) => (
+          <PlatformBadge key={platform} platform={platform} />
+        ))}
+
+      {version && <VersionBadge version={version} />}
+    </div>
+  );
+}
diff --git a/packages/docs-gesture-handler/src/components/HeaderWithBadges/styles.module.css b/packages/docs-gesture-handler/src/components/HeaderWithBadges/styles.module.css
new file mode 100644
index 0000000000..b79c0b3fb3
--- /dev/null
+++ b/packages/docs-gesture-handler/src/components/HeaderWithBadges/styles.module.css
@@ -0,0 +1,61 @@
+.headerWithBadges {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.badge {
+  border-radius: 16px;
+  padding: 2px 10px;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.androidBadge {
+  background-color: #34a853;
+}
+
+.iosBadge {
+  background-color: #000000;
+}
+
+.webBadge {
+  background-color: #1067c4;
+}
+
+.versionBadge {
+  margin-left: auto;
+  border-width: 1px;
+  border-style: solid;
+}
+
+.versionBadgeLight {
+  border-color: var(--swm-purple-light-100);
+  background-color: var(--swm-off-white);
+  color: var(--swm-purple-light-100);
+}
+
+.versionBadgeDark {
+  border-color: var(--swm-navy-light-60);
+  background-color: var(--swm-navy);
+  color: var(--swm-off-white);
+}
+
+@media (max-width: 420px) {
+  .headerWithBadges {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+
+  .versionBadge {
+    margin-left: 0px;
+    border-width: 1px;
+    border-style: solid;
+  }
+}
diff --git a/packages/docs-gesture-handler/src/css/index.css b/packages/docs-gesture-handler/src/css/index.css
index 7e701e6d52..ab55ee89bc 100644
--- a/packages/docs-gesture-handler/src/css/index.css
+++ b/packages/docs-gesture-handler/src/css/index.css
@@ -1,3 +1,4 @@
 @import 'colors.css';
 @import 'typography.css';
+@import 'toc.css';
 @import 'overrides.css';
diff --git a/packages/docs-gesture-handler/src/css/toc.css b/packages/docs-gesture-handler/src/css/toc.css
new file mode 100644
index 0000000000..48329382c4
--- /dev/null
+++ b/packages/docs-gesture-handler/src/css/toc.css
@@ -0,0 +1,29 @@
+.table-of-contents .platform-indicator-android,
+.table-of-contents .platform-indicator-ios,
+.table-of-contents .platform-indicator-web {
+  display: inline-block;
+
+  /* Circle shape */
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+
+  margin-left: 4px;
+
+  /* Vertical alignment */
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}
+
+.table-of-contents .platform-indicator-android {
+  background: #34a853;
+}
+
+.table-of-contents .platform-indicator-ios {
+  background: #000000;
+}
+
+.table-of-contents .platform-indicator-web {
+  background: #1067c4;
+}
diff --git a/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/FlowChart.jsx b/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/FlowChart.jsx
index 544377b02f..a44326dd76 100644
--- a/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/FlowChart.jsx
+++ b/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/FlowChart.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Network } from 'vis-network/standalone';
 import { useColorMode } from '@docusaurus/theme-common';
 
diff --git a/packages/docs-gesture-handler/yarn.lock b/packages/docs-gesture-handler/yarn.lock
index 2f646084e0..0c6fc730e4 100644
--- a/packages/docs-gesture-handler/yarn.lock
+++ b/packages/docs-gesture-handler/yarn.lock
@@ -12980,6 +12980,15 @@ unist-util-visit@^5.0.0:
     unist-util-is "^6.0.0"
     unist-util-visit-parents "^6.0.0"
 
+unist-util-visit@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-5.1.0.tgz#9a2a28b0aa76a15e0da70a08a5863a2f060e2468"
+  integrity sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    unist-util-is "^6.0.0"
+    unist-util-visit-parents "^6.0.0"
+
 universalify@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"