diff --git a/docs/angular-ui-kit/components/dyte-network-indicator.mdx b/docs/angular-ui-kit/components/dyte-network-indicator.mdx
new file mode 100644
index 0000000000..04f3b942f5
--- /dev/null
+++ b/docs/angular-ui-kit/components/dyte-network-indicator.mdx
@@ -0,0 +1,31 @@
+---
+description: >-
+ Learn how to use and customize the dyte-network-indicator component in Dyte's React UI
+ Kit with our detailed documentation.
+---
+
+# dyte-network-indicator
+
+A component that indicates poor network connection.
+
+It listens to the mediaScoreUpdate event of the passed participant to get the score.
+
+```tsx
+ (participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
+ console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`);
+});
+```
+
+:::note info
+
+This component will only be visible if the network quality is poor (less than or equal to 3, on a scale of 5, 5 being best).
+
+:::
+
+## Props
+
+
+
+
+ React UI Kit dyte-network-indicator
+
\ No newline at end of file
diff --git a/docs/react-ui-kit/components/dyte-network-indicator.mdx b/docs/react-ui-kit/components/dyte-network-indicator.mdx
new file mode 100644
index 0000000000..16fa65d534
--- /dev/null
+++ b/docs/react-ui-kit/components/dyte-network-indicator.mdx
@@ -0,0 +1,35 @@
+---
+description: >-
+ Learn how to use and customize the DyteNetworkIndicator component in Dyte's React UI
+ Kit with our detailed documentation.
+---
+
+# DyteNetworkIndicator
+
+A component that indicates poor network connection.
+
+```jsx
+
+```
+
+It listens to the mediaScoreUpdate event of the passed participant to get the score.
+
+```tsx
+ (participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
+ console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`);
+});
+```
+
+:::note info
+
+This component will only be visible if the network quality is poor (less than or equal to 3, on a scale of 5, 5 being best).
+
+:::
+
+## Props
+
+
+
+
+ React UI Kit DyteNetworkIndicator
+
\ No newline at end of file
diff --git a/docs/ui-kit/components/dyte-network-indicator.mdx b/docs/ui-kit/components/dyte-network-indicator.mdx
new file mode 100644
index 0000000000..f001aade36
--- /dev/null
+++ b/docs/ui-kit/components/dyte-network-indicator.mdx
@@ -0,0 +1,43 @@
+---
+description: >-
+ Learn how to use and customize the dyte-network-indicator component in Dyte's React UI
+ Kit with our detailed documentation.
+---
+
+# dyte-network-indicator
+
+A component that indicates poor network connection.
+
+```html
+
+
+
+```
+
+It listens to the mediaScoreUpdate event of the passed participant to get the score.
+
+```tsx
+participant.addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
+ console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`);
+});
+```
+
+:::note info
+
+This component will only be visible if the network quality is poor (less than or equal to 3, on a scale of 5, 5 being best).
+
+:::
+
+## Props
+
+
+
+
+ React UI Kit dyte-network-indicator
+
\ No newline at end of file