diff --git a/android/app/src/debug/AndroidManifest.xml b/android/app/src/debug/AndroidManifest.xml
index fa26aa56e1c14..6dc098f4797a0 100644
--- a/android/app/src/debug/AndroidManifest.xml
+++ b/android/app/src/debug/AndroidManifest.xml
@@ -3,6 +3,6 @@
     xmlns:tools="http://schemas.android.com/tools">
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
     <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
 </manifest>
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index cefe08dd125c2..5f8a5ca5adbb8 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -2,6 +2,7 @@
   package="com.expensifyreactnative.chat">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
 
     <application
       android:name=".MainApplication"
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 1b6f81bf7db21..56c878ab25621 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -240,7 +240,7 @@ PODS:
     - react-native-config/App (= 1.3.3)
   - react-native-config/App (1.3.3):
     - React
-  - react-native-netinfo (5.9.5):
+  - react-native-netinfo (5.9.6):
     - React
   - react-native-safe-area-context (3.1.4):
     - React
@@ -473,9 +473,9 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 8ca588cc921e70590820ce72b8789b02c67cce38
   React-jsinspector: b14e62ebe7a66e9231e9581279909f2fc3db6606
   react-native-config: 9a061347e0136fdb32d43a34d60999297d672361
-  react-native-netinfo: 7f3f3ed9e8f0e7ab3e7cac00cbfdc6997e25ecaf
-  react-native-safe-area-context: 0ed9288ed4409beabb0817b54efc047286fc84da
-  react-native-webview: 797f50d16bb271c4270bc742040a64c79ec7147c
+  react-native-netinfo: d2c312fa4b151214e1d5c8456ddb5f28ff24a576
+  react-native-safe-area-context: eb91fe1fb3f7b87d9c30a7f0808407d8569d539d
+  react-native-webview: df9ff59f76e991aefa7174831a0af48ddbac5f1b
   React-RCTActionSheet: 910163b6b09685a35c4ebbc52b66d1bfbbe39fc5
   React-RCTAnimation: 9a883bbe1e9d2e158d4fb53765ed64c8dc2200c6
   React-RCTBlob: 39cf0ece1927996c4466510e25d2105f67010e13
@@ -486,7 +486,7 @@ SPEC CHECKSUMS:
   React-RCTText: 1b6773e776e4b33f90468c20fe3b16ca3e224bb8
   React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
-  RNCAsyncStorage: db711e29e5e0500d9bd21aa0c2e397efa45302b1
+  RNCAsyncStorage: d059c3ee71738c39834a627476322a5a8cd5bf36
   Yoga: 7740b94929bbacbddda59bf115b5317e9a161598
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
diff --git a/package-lock.json b/package-lock.json
index d6a6fa60e5bcc..1b37f7cb32fca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1795,9 +1795,9 @@
       "dev": true
     },
     "@react-native-community/netinfo": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-5.9.5.tgz",
-      "integrity": "sha512-PbSsRmhRwYIMdeVJTf9gJtvW0TVq/hmgz1xyjsrTIsQ7QS7wbMEiv1Eb/M/y6AEEsdUped5Axm5xykq9TGISHg=="
+      "version": "5.9.6",
+      "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-5.9.6.tgz",
+      "integrity": "sha512-cEkA1Apg8+VjnDdeDZRHI+2RqouiPKgYnewouRkvF4ettH9ZS4Cmi/nANQKIpIu2L+czboxM3fCZ44nc7IM9VQ=="
     },
     "@sindresorhus/is": {
       "version": "0.14.0",
diff --git a/package.json b/package.json
index 89557eb3e2dbd..b4747ebe81fb3 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@react-native-community/async-storage": "^1.11.0",
-    "@react-native-community/netinfo": "^5.9.5",
+    "@react-native-community/netinfo": "^5.9.6",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "dotenv": "^8.2.0",
     "electron-serve": "^1.0.0",
diff --git a/src/lib/Network.js b/src/lib/Network.js
index aebcc263f65d5..47525cf08d3c0 100644
--- a/src/lib/Network.js
+++ b/src/lib/Network.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import NetInfo from '@react-native-community/netinfo';
 import Ion from './Ion';
 import CONFIG from '../CONFIG';
 import IONKEYS from '../IONKEYS';
@@ -35,6 +36,13 @@ function setNewOfflineStatus(isCurrentlyOffline) {
         });
 }
 
+// Subscribe to the state change event via NetInfo so we can update
+// whether a user has internet connectivity or not. This is more reliable
+// than the Pusher `disconnected` event which takes about 10-15 seconds to emit
+NetInfo.addEventListener((state) => {
+    setNewOfflineStatus(!state.isConnected);
+});
+
 /**
  * Events that happen on the pusher socket are used to determine if the app is online or offline. The offline setting
  * is stored in Ion so the rest of the app has access to it.
diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js
index 0182598161797..f7edc1510594b 100644
--- a/src/page/HomePage/SidebarView.js
+++ b/src/page/HomePage/SidebarView.js
@@ -76,6 +76,10 @@ class SidebarView extends React.Component {
     render() {
         const reports = this.props.reports;
         this.updateUnreadReportIndicator();
+        const indicatorStyles = [
+            styles.statusIndicator,
+            this.props.isOffline ? styles.statusIndicatorOffline : styles.statusIndicatorOnline
+        ];
         return (
             <View style={[styles.flex1, styles.sidebar]}>
                 <View style={[styles.sidebarHeader, {marginTop: this.props.insets.top}]}>
@@ -106,9 +110,7 @@ class SidebarView extends React.Component {
                             source={{uri: this.props.avatarURL}}
                             style={[styles.historyItemAvatar]}
                         />
-                        {this.props.isOffline && (
-                        <View style={[styles.statusIndicator]} />
-                        )}
+                        <View style={indicatorStyles} />
                     </View>
                     <View style={[styles.flexColumn]}>
                         {this.props.userDisplayName && (
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index e8f69dda85360..53b6f60012dc5 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -233,7 +233,6 @@ const styles = {
     },
 
     statusIndicator: {
-        backgroundColor: colors.icon,
         borderColor: colors.heading,
         borderRadius: 7,
         borderWidth: 2,
@@ -245,6 +244,14 @@ const styles = {
         zIndex: 10,
     },
 
+    statusIndicatorOnline: {
+        backgroundColor: colors.green,
+    },
+
+    statusIndicatorOffline: {
+        backgroundColor: colors.icon,
+    },
+
     sidebarFooterUsername: {
         color: '#FFFFFF',
         fontSize: 15,
diff --git a/webpack.common.js b/webpack.common.js
index 3f2e400c021d5..979dcb1c50d04 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -69,5 +69,9 @@ module.exports = {
             'react-native-config': 'react-web-config',
             'react-native$': 'react-native-web',
         },
+
+        // React Native libraries may have web-specific module implementations that appear with the extension `.web.js`
+        // without this, web will try to use native implementations and break in not very obvious ways
+        extensions: ['.web.js', '.js'],
     },
 };