diff --git a/src/fragments/lib/graphqlapi/js/subscribe-data.mdx b/src/fragments/lib/graphqlapi/js/subscribe-data.mdx
index ac68d931836..05f6c4e511f 100644
--- a/src/fragments/lib/graphqlapi/js/subscribe-data.mdx
+++ b/src/fragments/lib/graphqlapi/js/subscribe-data.mdx
@@ -40,7 +40,7 @@ Amplify.configure({
 
 ### Subscription connection status updates
 
-Now that your application is setup and using subscriptions, you may want to know when the subscription is finally up and running, or reflect to your users when the subscription isn't healthy. You can monitor the connection state for changes via Hub.
+Now that your application is setup and using subscriptions, you may want to know when the subscription is finally established, or reflect to your users when the subscription isn't healthy. You can monitor the connection state for changes via Hub.
 
 ```typescript
 import { CONNECTION_STATE_CHANGE, ConnectionState } from '@aws-amplify/pubsub';
diff --git a/src/fragments/lib/pubsub/js/subunsub.mdx b/src/fragments/lib/pubsub/js/subunsub.mdx
index 58ec0fa09bc..620d15e480b 100644
--- a/src/fragments/lib/pubsub/js/subunsub.mdx
+++ b/src/fragments/lib/pubsub/js/subunsub.mdx
@@ -56,4 +56,25 @@ const sub1 = PubSub.subscribe('myTopicA').subscribe({
 
 sub1.unsubscribe();
 // You will no longer get messages for 'myTopicA'
-```
\ No newline at end of file
+```
+
+## Subscription connection status updates
+
+Now that your application is setup and using pubsub subscriptions, you may want to know when the subscription is finally established, or reflect to your users when the subscription isn't healthy. You can monitor the connection state for changes via Hub.
+
+```typescript
+import { CONNECTION_STATE_CHANGE, ConnectionState } from '@aws-amplify/pubsub';
+import { Hub } from 'aws-amplify';
+
+Hub.listen('pubsub', (data: any) => {
+  const { payload } = data;
+  if (payload.event === CONNECTION_STATE_CHANGE) {
+    const connectionState = payload.data.connectionState as ConnectionState;
+    console.log(connectionState);
+  }
+});
+```
+
+import jsConnectionStates from '/src/fragments/lib/pubsub/js/connection-states.mdx';
+
+<Fragments fragments={{ js: jsConnectionStates }} />
\ No newline at end of file