diff --git a/android/app/src/main/assets/fonts/INatIcon.ttf b/android/app/src/main/assets/fonts/INatIcon.ttf
index 7f84059b8..d7021328c 100644
Binary files a/android/app/src/main/assets/fonts/INatIcon.ttf and b/android/app/src/main/assets/fonts/INatIcon.ttf differ
diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json
index 591972043..e566f2a4d 100644
--- a/android/link-assets-manifest.json
+++ b/android/link-assets-manifest.json
@@ -3,7 +3,7 @@
   "data": [
     {
       "path": "assets/fonts/INatIcon.ttf",
-      "sha1": "b06f8d8fc228469707681cbbdde665868437d031"
+      "sha1": "e6311871bfa114078a3adb8900359160b001f0ba"
     },
     {
       "path": "assets/fonts/Whitney-Book-Italic.otf",
diff --git a/assets/fonts/INatIcon.ttf b/assets/fonts/INatIcon.ttf
index 7f84059b8..d7021328c 100644
Binary files a/assets/fonts/INatIcon.ttf and b/assets/fonts/INatIcon.ttf differ
diff --git a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
index 9023e443c..b37c0aff8 100644
--- a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
+++ b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
@@ -9,6 +9,7 @@
 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* iNaturalistReactNativeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* iNaturalistReactNativeTests.m */; };
 		03BE06B8FED98F5CD10273BB /* libPods-iNaturalistReactNative.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 20043186B311EE211FEB259A /* libPods-iNaturalistReactNative.a */; };
+		08387561362A4099A1D58774 /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 121B82B7918941189871CFD5 /* INatIcon.ttf */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
@@ -40,7 +41,6 @@
 		BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */; };
 		CD4D097140634EE091BB5818 /* Whitney-Book.otf in Resources */ = {isa = PBXBuildFile; fileRef = 8EB5F71FA6C34855B03FE3FB /* Whitney-Book.otf */; };
 		CD871292AF3144DC9F9240BA /* Whitney-Semibold.otf in Resources */ = {isa = PBXBuildFile; fileRef = 4A5C60A9F7DF42F49CED09FC /* Whitney-Semibold.otf */; };
-		D2853A71785A4FF6AB137F4C /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CC5CF9E037E74ADF9CF9710B /* INatIcon.ttf */; };
 		E23E0899594A7C6DF680FFDB /* libPods-iNaturalistReactNative-ShareExtension.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A336AF0ADEAE537AB1B73F98 /* libPods-iNaturalistReactNative-ShareExtension.a */; };
 /* End PBXBuildFile section */
 
@@ -81,6 +81,7 @@
 		00E356F21AD99517003FC87E /* iNaturalistReactNativeTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = iNaturalistReactNativeTests.m; sourceTree = "<group>"; };
 		097C2902AB1249AA9846CED3 /* Whitney-MediumItalic-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-MediumItalic-Pro.otf"; path = "../assets/fonts/Whitney-MediumItalic-Pro.otf"; sourceTree = "<group>"; };
 		0DD877E5F25945BCB6707357 /* Whitney-SemiboldItalic-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-SemiboldItalic-Pro.otf"; path = "../assets/fonts/Whitney-SemiboldItalic-Pro.otf"; sourceTree = "<group>"; };
+		121B82B7918941189871CFD5 /* INatIcon.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = INatIcon.ttf; path = ../assets/fonts/INatIcon.ttf; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* iNaturalistReactNative.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = iNaturalistReactNative.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = iNaturalistReactNative/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = iNaturalistReactNative/AppDelegate.mm; sourceTree = "<group>"; };
@@ -117,7 +118,6 @@
 		B8FC28F6DD66FAD52B79E072 /* Pods-iNaturalistReactNative.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative.debug.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative/Pods-iNaturalistReactNative.debug.xcconfig"; sourceTree = "<group>"; };
 		BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-Light-Pro.otf"; path = "../assets/fonts/Whitney-Light-Pro.otf"; sourceTree = "<group>"; };
 		C13A1C5596344F5F8830E524 /* Whitney-Light.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-Light.otf"; path = "../assets/fonts/Whitney-Light.otf"; sourceTree = "<group>"; };
-		CC5CF9E037E74ADF9CF9710B /* INatIcon.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = INatIcon.ttf; path = ../assets/fonts/INatIcon.ttf; sourceTree = "<group>"; };
 		D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-Medium-Pro.otf"; path = "../assets/fonts/Whitney-Medium-Pro.otf"; sourceTree = "<group>"; };
 		D7AE5BDBC584A83878A04344 /* Pods-iNaturalistReactNative-ShareExtension.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative-ShareExtension.debug.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative-ShareExtension/Pods-iNaturalistReactNative-ShareExtension.debug.xcconfig"; sourceTree = "<group>"; };
 		D8663889EABFBFC3077401E3 /* Pods-iNaturalistReactNative-ShareExtension.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative-ShareExtension.release.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative-ShareExtension/Pods-iNaturalistReactNative-ShareExtension.release.xcconfig"; sourceTree = "<group>"; };
@@ -213,7 +213,6 @@
 		376267522BB609590059CCF1 /* Recovered References */ = {
 			isa = PBXGroup;
 			children = (
-				CC5CF9E037E74ADF9CF9710B /* INatIcon.ttf */,
 			);
 			name = "Recovered References";
 			sourceTree = "<group>";
@@ -287,6 +286,7 @@
 				63C92696AD524E14B655C56A /* Whitney-Semibold-Italic.otf */,
 				4A5C60A9F7DF42F49CED09FC /* Whitney-Semibold.otf */,
 				0DD877E5F25945BCB6707357 /* Whitney-SemiboldItalic-Pro.otf */,
+				121B82B7918941189871CFD5 /* INatIcon.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -418,7 +418,6 @@
 				BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */,
 				8F1AC6772BC1B610002F994B /* PrivacyInfo.xcprivacy in Resources */,
 				4FB3B444D46A4115B867B9CC /* inaturalisticons.ttf in Resources */,
-				D2853A71785A4FF6AB137F4C /* INatIcon.ttf in Resources */,
 				B197D1A2DFD9440C9581D513 /* Whitney-Book-Pro.otf in Resources */,
 				42832120F7C944B980FD13BC /* Whitney-MediumItalic-Pro.otf in Resources */,
 				B4518F59A698433CA0271ED5 /* Whitney-Semibold-Pro.otf in Resources */,
@@ -432,6 +431,7 @@
 				A64FC9A5388A49568EC932B6 /* Whitney-Semibold-Italic.otf in Resources */,
 				CD871292AF3144DC9F9240BA /* Whitney-Semibold.otf in Resources */,
 				4698CEACBD4F4A859CAB0694 /* Whitney-SemiboldItalic-Pro.otf in Resources */,
+				08387561362A4099A1D58774 /* INatIcon.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/ios/iNaturalistReactNative/Info.plist b/ios/iNaturalistReactNative/Info.plist
index cfbf17a98..debc5e2f3 100644
--- a/ios/iNaturalistReactNative/Info.plist
+++ b/ios/iNaturalistReactNative/Info.plist
@@ -40,13 +40,12 @@
 		<string>https</string>
 		<string>mailto</string>
 		<string>googlegmail</string>
-    <string>inbox-gmail</string>
+		<string>inbox-gmail</string>
 	</array>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-	  <!-- Do not change NSAllowsArbitraryLoads to true, or you will risk app rejection! -->
 		<key>NSAllowsArbitraryLoads</key>
 		<false/>
 		<key>NSAllowsLocalNetworking</key>
@@ -74,7 +73,6 @@
 		<string>Whitney-Medium-Pro.otf</string>
 		<string>Whitney-BookItalic-Pro.otf</string>
 		<string>inaturalisticons.ttf</string>
-		<string>INatIcon.ttf</string>
 		<string>Whitney-Book-Pro.otf</string>
 		<string>Whitney-MediumItalic-Pro.otf</string>
 		<string>Whitney-Semibold-Pro.otf</string>
@@ -88,6 +86,7 @@
 		<string>Whitney-Semibold-Italic.otf</string>
 		<string>Whitney-Semibold.otf</string>
 		<string>Whitney-SemiboldItalic-Pro.otf</string>
+		<string>INatIcon.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json
index 591972043..e566f2a4d 100644
--- a/ios/link-assets-manifest.json
+++ b/ios/link-assets-manifest.json
@@ -3,7 +3,7 @@
   "data": [
     {
       "path": "assets/fonts/INatIcon.ttf",
-      "sha1": "b06f8d8fc228469707681cbbdde665868437d031"
+      "sha1": "e6311871bfa114078a3adb8900359160b001f0ba"
     },
     {
       "path": "assets/fonts/Whitney-Book-Italic.otf",
diff --git a/package.json b/package.json
index 9a7dfaf86..dfa8a5948 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "ios": "react-native run-ios",
     "ios:release": "npx react-native run-ios --device --mode Release",
     "start": "react-native start",
+    "clean": "./scripts/clean.sh",
     "clean-start": "npx react-native clean-project-auto && npx pod-install && npm start -- --reset-cache",
     "test": "jest",
     "lint": "npm run lint:eslint && npm run lint:flow",
diff --git a/scripts/clean.sh b/scripts/clean.sh
new file mode 100755
index 000000000..cb0697dab
--- /dev/null
+++ b/scripts/clean.sh
@@ -0,0 +1,23 @@
+echo "iOS simulator cache"
+rm -rf ~/Library/Developer/CoreSimulator/Caches
+
+echo "React-native cache"
+rm -rf $TMPDIR/react-*
+
+echo "Metro bundler cache"
+rm -rf $TMPDIR/metro-*
+
+echo "Watchman cache"
+watchman watch-del-all
+
+echo "iOS build folder"
+rm -rf ios/build
+
+echo "system iOS pods cache"
+(cd ios && pod cache clean --all)
+
+echo "Android build folder"
+rm -rf android/build
+
+echo "Android clean project"
+(cd android && ./gradlew clean)
diff --git a/src/components/Notifications/NotificationsContainer.js b/src/components/Notifications/NotificationsContainer.js
index bfe1aa312..519b10b13 100644
--- a/src/components/Notifications/NotificationsContainer.js
+++ b/src/components/Notifications/NotificationsContainer.js
@@ -34,6 +34,7 @@ const NotificationsContainer = (): Node => {
       isOnline={isOnline}
       isLoading={isInitialLoading || isFetching}
       isError={isError}
+      reload={refetch}
     />
   );
 };
diff --git a/src/components/Notifications/NotificationsList.js b/src/components/Notifications/NotificationsList.js
index a7ab811e5..2957d4844 100644
--- a/src/components/Notifications/NotificationsList.js
+++ b/src/components/Notifications/NotificationsList.js
@@ -3,7 +3,7 @@
 import { FlashList } from "@shopify/flash-list";
 import InfiniteScrollLoadingWheel from "components/MyObservations/InfiniteScrollLoadingWheel";
 import NotificationsListItem from "components/Notifications/NotificationsListItem";
-import { Body2, ViewWrapper } from "components/SharedComponents";
+import { Body2, OfflineNotice, ViewWrapper } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React, { useCallback } from "react";
@@ -14,7 +14,8 @@ type Props = {
   isError?: boolean,
   isLoading?: boolean,
   isOnline: boolean,
-  onEndReached: Function
+  onEndReached: Function,
+  reload: Function
 };
 
 const NotificationsList = ( {
@@ -22,7 +23,8 @@ const NotificationsList = ( {
   isError,
   isLoading,
   isOnline,
-  onEndReached
+  onEndReached,
+  reload
 }: Props ): Node => {
   const { t } = useTranslation( );
 
@@ -43,10 +45,12 @@ const NotificationsList = ( {
   const renderEmptyComponent = useCallback( ( ) => {
     if ( isLoading ) return null;
 
-    let msg = t( "No-Notifications-Found" );
     if ( !isOnline ) {
-      msg = t( "Offline-No-Notifications" );
-    } else if ( isError ) {
+      return <OfflineNotice onPress={reload} />;
+    }
+
+    let msg = t( "No-Notifications-Found" );
+    if ( isError ) {
       msg = t( "Something-went-wrong" );
     }
 
@@ -55,11 +59,20 @@ const NotificationsList = ( {
     isError,
     isLoading,
     isOnline,
+    reload,
     t
   ] );
 
+  if ( !data || data.length === 0 ) {
+    return (
+      <ViewWrapper>
+        {renderEmptyComponent( )}
+      </ViewWrapper>
+    );
+  }
+
   return (
-    <ViewWrapper className="h-full">
+    <ViewWrapper>
       <FlashList
         data={data}
         keyExtractor={item => item.id}
@@ -69,7 +82,6 @@ const NotificationsList = ( {
         onEndReached={onEndReached}
         refreshing={isLoading}
         ListFooterComponent={renderFooter}
-        ListEmptyComponent={renderEmptyComponent}
       />
     </ViewWrapper>
   );
diff --git a/src/components/ObsDetails/DQAContainer.js b/src/components/ObsDetails/DQAContainer.js
index a149ca27f..36f8193e5 100644
--- a/src/components/ObsDetails/DQAContainer.js
+++ b/src/components/ObsDetails/DQAContainer.js
@@ -1,4 +1,8 @@
 // @flow
+import {
+  refresh as refreshNetInfo,
+  useNetInfo
+} from "@react-native-community/netinfo";
 import { useRoute } from "@react-navigation/native";
 import { useQueryClient } from "@tanstack/react-query";
 import { faveObservation, unfaveObservation } from "api/observations";
@@ -17,7 +21,6 @@ import * as React from "react";
 import Observation from "realmModels/Observation";
 import {
   useAuthenticatedMutation,
-  useIsConnected,
   useLocalObservation
 } from "sharedHooks";
 import useRemoteObservation, {
@@ -26,7 +29,7 @@ import useRemoteObservation, {
 
 const DQAContainer = ( ): React.Node => {
   const queryClient = useQueryClient( );
-  const isOnline = useIsConnected( );
+  const { isInternetReachable: isOnline } = useNetInfo( );
   const { params } = useRoute( );
   const { observationUUID } = params;
   const [qualityMetrics, setQualityMetrics] = useState( undefined );
@@ -299,6 +302,8 @@ const DQAContainer = ( ): React.Node => {
         removeNeedsIDVote={removeNeedsIDVote}
         ifMajorityAgree={ifMajorityAgree}
         checkTest={checkTest}
+        isOnline={isOnline}
+        recheckIsOnline={refreshNetInfo}
       />
       <BottomSheet
         headerText={t( "ERROR-VOTING-IN-DQA" )}
diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
index 4d53da6ef..113999fa0 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -7,7 +7,9 @@ import {
   INatIcon,
   List1,
   List2,
-  ScrollViewWrapper
+  OfflineNotice,
+  ScrollViewWrapper,
+  ViewWrapper
 } from "components/SharedComponents";
 import QualityGradeStatus from "components/SharedComponents/QualityGradeStatus/QualityGradeStatus";
 import { View } from "components/styledComponents";
@@ -39,31 +41,35 @@ const titleDescription = option => {
   }
 };
 type Props = {
-  qualityMetrics: Object,
+  checkTest: Function,
+  ifMajorityAgree: Function,
+  isOnline?: boolean,
   loadingAgree: boolean,
   loadingDisagree: boolean,
   loadingMetric: string,
   qualityGrade: string,
-  ifMajorityAgree: Function,
-  checkTest: Function,
-  setMetricVote: Function,
+  qualityMetrics: Object,
+  recheckIsOnline: Function,
   removeMetricVote: Function,
+  removeNeedsIDVote: Function,
+  setMetricVote: Function,
   setNeedsIDVote: Function,
-  removeNeedsIDVote: Function
 }
 
 const DataQualityAssessment = ( {
-  qualityMetrics,
+  checkTest,
+  ifMajorityAgree,
+  isOnline,
   loadingAgree,
   loadingDisagree,
   loadingMetric,
   qualityGrade,
-  ifMajorityAgree,
-  checkTest,
-  setMetricVote,
+  qualityMetrics,
+  recheckIsOnline,
   removeMetricVote,
-  setNeedsIDVote,
-  removeNeedsIDVote
+  removeNeedsIDVote,
+  setMetricVote,
+  setNeedsIDVote
 }: Props ): Node => {
   const isResearchGrade = qualityGrade === "research";
   const theme = useTheme( );
@@ -107,6 +113,14 @@ const DataQualityAssessment = ( {
     );
   };
 
+  if ( isOnline === false ) {
+    return (
+      <ViewWrapper>
+        <OfflineNotice onPress={( ) => recheckIsOnline( )} />
+      </ViewWrapper>
+    );
+  }
+
   return (
     <ScrollViewWrapper testID="DataQualityAssessment">
       <View className="mx-[26px] my-[19px] space-y-[9px]">
diff --git a/src/components/ObsDetails/PhotoContainer.js b/src/components/ObsDetails/PhotoContainer.js
index 4d07ac1ac..54efa13c0 100644
--- a/src/components/ObsDetails/PhotoContainer.js
+++ b/src/components/ObsDetails/PhotoContainer.js
@@ -1,11 +1,10 @@
 // @flow
 
 import classnames from "classnames";
-import { ActivityIndicator } from "components/SharedComponents";
+import { ActivityIndicator, OfflineNotice } from "components/SharedComponents";
 import { Image, Pressable } from "components/styledComponents";
 import type { Node } from "react";
 import React, { useState } from "react";
-import IconMaterial from "react-native-vector-icons/MaterialIcons";
 import { useTranslation } from "sharedHooks";
 
 type Props = {
@@ -79,17 +78,6 @@ const PhotoContainer = ( { photo, onPress, style }: Props ): Node => {
       )}
     />
   );
-  const offlineNotice = loadSuccess === false && (
-    <IconMaterial
-      name="wifi-off"
-      color="white"
-      size={100}
-      accessibilityRole="image"
-      accessibilityLabel={t(
-        "Observation-photos-unavailable-without-internet"
-      )}
-    />
-  );
 
   return (
     <Pressable
@@ -101,7 +89,12 @@ const PhotoContainer = ( { photo, onPress, style }: Props ): Node => {
     >
       {loadingIndicator}
       {image}
-      {offlineNotice}
+      {loadSuccess === false && (
+        <OfflineNotice
+          onPress={( ) => setLoadSuccess( null )}
+          color="white"
+        />
+      )}
     </Pressable>
   );
 };
diff --git a/src/components/ObsDetails/SoundContainer.js b/src/components/ObsDetails/SoundContainer.js
index c58d08573..bd37d8e20 100644
--- a/src/components/ObsDetails/SoundContainer.js
+++ b/src/components/ObsDetails/SoundContainer.js
@@ -1,5 +1,9 @@
+import {
+  refresh as refreshNetInfo,
+  useNetInfo
+} from "@react-native-community/netinfo";
 import { useFocusEffect } from "@react-navigation/native";
-import { Body1, INatIconButton } from "components/SharedComponents";
+import { Body1, INatIconButton, OfflineNotice } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import React, {
   useCallback,
@@ -14,6 +18,7 @@ import { useTranslation } from "sharedHooks";
 const logger = log.extend( "SoundContainer" );
 
 const SoundContainer = ( { sizeClass, isVisible, sound } ) => {
+  const { isInternetReachable } = useNetInfo( );
   const playerRef = useRef( new AudioRecorderPlayer( ) );
   const player = playerRef.current;
   const { t } = useTranslation( );
@@ -138,6 +143,15 @@ const SoundContainer = ( { sizeClass, isVisible, sound } ) => {
   }, [stopSound] ) );
 
   const playBackPercent = ( playBackState.currentPosition / ( playBackState.duration || 1 ) ) * 100;
+
+  if ( isInternetReachable === false ) {
+    return (
+      <OfflineNotice
+        onPress={( ) => refreshNetInfo( )}
+        color="white"
+      />
+    );
+  }
   return (
     <View className={`${sizeClass} items-center justify-center`}>
       <INatIconButton
diff --git a/src/components/SharedComponents/INatIcon/glyphmap.json b/src/components/SharedComponents/INatIcon/glyphmap.json
index 31e2c18b6..10c2deef3 100644
--- a/src/components/SharedComponents/INatIcon/glyphmap.json
+++ b/src/components/SharedComponents/INatIcon/glyphmap.json
@@ -84,31 +84,32 @@
     "noevidence": 61779,
     "notifications-bell": 61780,
     "observers": 61781,
-    "pause-circle": 61782,
-    "pause": 61783,
-    "pencil-outline": 61784,
-    "pencil": 61785,
-    "person": 61786,
-    "photos-outline": 61787,
-    "photos": 61788,
-    "play-circle": 61789,
-    "play": 61790,
-    "plus-bold": 61791,
-    "plus": 61792,
-    "pot-outline": 61793,
-    "rotate-exclamation": 61794,
-    "rotate-right": 61795,
-    "rotate": 61796,
-    "share": 61797,
-    "sliders": 61798,
-    "sound-bold-outline": 61799,
-    "sound-outline": 61800,
-    "sounds": 61801,
-    "sparkly-label": 61802,
-    "star-bold-outline": 61803,
-    "star": 61804,
-    "stop": 61805,
-    "trash-outline": 61806,
-    "trash": 61807,
-    "triangle-exclamation": 61808
+    "offline": 61782,
+    "pause-circle": 61783,
+    "pause": 61784,
+    "pencil-outline": 61785,
+    "pencil": 61786,
+    "person": 61787,
+    "photos-outline": 61788,
+    "photos": 61789,
+    "play-circle": 61790,
+    "play": 61791,
+    "plus-bold": 61792,
+    "plus": 61793,
+    "pot-outline": 61794,
+    "rotate-exclamation": 61795,
+    "rotate-right": 61796,
+    "rotate": 61797,
+    "share": 61798,
+    "sliders": 61799,
+    "sound-bold-outline": 61800,
+    "sound-outline": 61801,
+    "sounds": 61802,
+    "sparkly-label": 61803,
+    "star-bold-outline": 61804,
+    "star": 61805,
+    "stop": 61806,
+    "trash-outline": 61807,
+    "trash": 61808,
+    "triangle-exclamation": 61809
 }
\ No newline at end of file
diff --git a/src/components/SharedComponents/OfflineNotice.js b/src/components/SharedComponents/OfflineNotice.js
new file mode 100644
index 000000000..617c59f33
--- /dev/null
+++ b/src/components/SharedComponents/OfflineNotice.js
@@ -0,0 +1,52 @@
+// @flow
+import classnames from "classnames";
+import {
+  Body2,
+  INatIcon
+} from "components/SharedComponents";
+import { Pressable } from "components/styledComponents";
+import type { Node } from "react";
+import React from "react";
+import { useTranslation } from "sharedHooks";
+
+type Props = {
+  color?: string,
+  onPress: Function
+};
+
+const OfflineNotice = ( {
+  color,
+  onPress
+}: Props ): Node => {
+  const { t } = useTranslation( );
+  if ( typeof ( onPress ) !== "function" ) {
+    throw new Error( "OfflineNotice needs an onPress function" );
+  }
+  return (
+    <Pressable
+      accessibilityLabel={t( "Internet-Connection-Required" )}
+      accessibilityHint={t( "Loads-content-that-requires-an-Internet-connection" )}
+      onPress={onPress}
+      className="justify-center items-center w-full h-full"
+    >
+      <INatIcon
+        name="offline"
+        size={72}
+        aria-hidden
+        accessibilityElementsHidden
+        importantForAccessibility="no"
+        color={color}
+      />
+      <Body2
+        className={classnames(
+          "mt-[30px]",
+          color && `text-${color}`
+        )}
+      >
+        { t( "You-are-offline-Tap-to-try-again" ) }
+      </Body2>
+    </Pressable>
+  );
+};
+
+export default OfflineNotice;
diff --git a/src/components/SharedComponents/index.js b/src/components/SharedComponents/index.js
index 438f27c52..c53263132 100644
--- a/src/components/SharedComponents/index.js
+++ b/src/components/SharedComponents/index.js
@@ -34,6 +34,7 @@ export { default as Mortal } from "./Mortal";
 export { default as ObservationLocation } from "./ObservationLocation";
 export { default as ObservationsFlashList } from "./ObservationsFlashList/ObservationsFlashList";
 export { default as ObsStatus } from "./ObsStatus";
+export { default as OfflineNotice } from "./OfflineNotice";
 export { default as OverviewCounts } from "./OverviewCounts";
 export { default as PermissionGate } from "./PermissionGate";
 export { default as PhotoCount } from "./PhotoCount";
diff --git a/src/components/UiLibrary.js b/src/components/UiLibrary.js
index 957900277..4e3e43f22 100644
--- a/src/components/UiLibrary.js
+++ b/src/components/UiLibrary.js
@@ -480,8 +480,6 @@ const UiLibrary = (): Node => {
         <View className="flex flex-row justify-between">
           <View>
             <Body2 className="text-center">Research</Body2>
-            {/* TODO: refactor to not have color prop because we only need black and white */}
-            {/* TODO: better to access the color from theme here */}
             <QualityGradeStatus qualityGrade="research" />
           </View>
           <View>
@@ -595,7 +593,6 @@ const UiLibrary = (): Node => {
             <CommentsCount count={10} white />
           </View>
         </View>
-
         <Heading2 className="my-2">IdentificationsCount</Heading2>
         <View className="flex flex-row justify-evenly">
           <View>
@@ -645,11 +642,16 @@ const UiLibrary = (): Node => {
         <Heading2 className="my-2">Confidence Interval</Heading2>
         <ConfidenceInterval confidence={3} activeColor="bg-inatGreen" />
         <Heading2 className="my-2">Taxon Result</Heading2>
-        <TaxonResult taxon={aves} />
+        <TaxonResult taxon={aves} accessibilityLabel="ui library" />
         <Heading3>Taxon w/ photo</Heading3>
-        <TaxonResult taxon={taxonWithPhoto} />
+        <TaxonResult taxon={taxonWithPhoto} accessibilityLabel="ui library" />
         <Heading3>Iconic taxon</Heading3>
-        <TaxonResult taxon={aves} fetchRemote={false} fromLocal={false} />
+        <TaxonResult
+          taxon={aves}
+          fetchRemote={false}
+          fromLocal={false}
+          accessibilityLabel="ui library"
+        />
         <Heading2 className="my-2">Iconic Taxon Chooser</Heading2>
         <IconicTaxonChooser
           taxon={{
@@ -660,7 +662,6 @@ const UiLibrary = (): Node => {
           before={<Button text={t( "ADD-AN-ID" )} className="rounded-full" />}
           onTaxonChosen={taxon => console.log( "taxon selected:", taxon )}
         />
-
         <Heading1 className="my-2">DisplayTaxonName</Heading1>
         <Heading2 className="my-2">Color</Heading2>
         <DisplayTaxonName color="text-blue" taxon={species || taxonWithPhoto} />
@@ -689,7 +690,6 @@ const UiLibrary = (): Node => {
             icon: "https://static.inaturalist.org/attachments/users/icons/1044550/medium.jpg?1653532155"
           }}
         />
-
         <Heading1 className="my-2">RadioButtonRow</Heading1>
         <RadioButtonRow
           value="radio1"
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index a38a6ceb0..09d3588c8 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -497,6 +497,7 @@ LEAVE-US-A-REVIEW = LEAVE US A REVIEW!
 LICENSES = LICENSES
 List-view = List view
 Loading-iNaturalists-AR-Camera = Loading iNaturalist's AR Camera
+Loads-content-that-requires-an-Internet-connection = Loads content that requires an Internet connection
 LOCATION = LOCATION
 Location = Location
 Location-accuracy-is-too-imprecise = Location accuracy is too imprecise to help identifiers. Please zoom in.
@@ -600,7 +601,6 @@ Observation-has-no-photos-and-no-sounds = This observation has no photos and no
 Observation-Name = Observation { $scientificName }
 # Label for a menu that shows various actions you can take for an observation
 Observation-options = Observation options
-Observation-photos-unavailable-without-internet = Observation photos unavailable without internet
 OBSERVATION-WAS-DELETED = OBSERVATION WAS DELETED
 Observation-with-no-evidence = Observation with no evidence
 Observations = Observations
@@ -631,7 +631,6 @@ October = October
 Offensive-Inappropriate = Offensive/Inappropriate
 Offensive-Inappropriate-Examples = Misleading or illegal content, racial or ethnic slurs, etc. For more on our defintion of "appropriate," see the FAQ.
 Offline-DQA-description = The DQA may not be accurate. Check your internet connection and try again.
-Offline-No-Notifications = Cannot fetch notifications at this time.
 # Generic confirmation, e.g. button on a warning alert
 OK = OK
 # Sort order, refers to newest or oldest date
@@ -1094,6 +1093,7 @@ X-Species =
        *[other] { $count } Species
     }
 Yes-license-my-photos = Yes, license my photos, sounds, and observations so scientists can use my data (recommended)
+You-are-offline-Tap-to-try-again = You are offline. Tap to try again.
 You-can-add-up-to-20-media = You can add up to 20 photos and 20 sounds per observation.
 You-can-also-check-out-merchandise = You can also check out merchandise for iNaturalist and Seek at our store below!
 You-can-also-explore-existing-observations = You can also explore existing observations on iNaturalist to discover what's around you.
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index a5bfd8598..2da27613b 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -669,6 +669,7 @@
   "LICENSES": "LICENSES",
   "List-view": "List view",
   "Loading-iNaturalists-AR-Camera": "Loading iNaturalist's AR Camera",
+  "Loads-content-that-requires-an-Internet-connection": "Loads content that requires an Internet connection",
   "LOCATION": "LOCATION",
   "Location": "Location",
   "Location-accuracy-is-too-imprecise": "Location accuracy is too imprecise to help identifiers. Please zoom in.",
@@ -808,7 +809,6 @@
     "comment": "Label for a menu that shows various actions you can take for an observation",
     "val": "Observation options"
   },
-  "Observation-photos-unavailable-without-internet": "Observation photos unavailable without internet",
   "OBSERVATION-WAS-DELETED": "OBSERVATION WAS DELETED",
   "Observation-with-no-evidence": "Observation with no evidence",
   "Observations": "Observations",
@@ -850,7 +850,6 @@
   "Offensive-Inappropriate": "Offensive/Inappropriate",
   "Offensive-Inappropriate-Examples": "Misleading or illegal content, racial or ethnic slurs, etc. For more on our defintion of \"appropriate,\" see the FAQ.",
   "Offline-DQA-description": "The DQA may not be accurate. Check your internet connection and try again.",
-  "Offline-No-Notifications": "Cannot fetch notifications at this time.",
   "OK": {
     "comment": "Generic confirmation, e.g. button on a warning alert",
     "val": "OK"
@@ -1379,6 +1378,7 @@
   },
   "X-Species": "{ $count ->\n  [one] { $count } Species\n *[other] { $count } Species\n}",
   "Yes-license-my-photos": "Yes, license my photos, sounds, and observations so scientists can use my data (recommended)",
+  "You-are-offline-Tap-to-try-again": "You are offline. Tap to try again.",
   "You-can-add-up-to-20-media": "You can add up to 20 photos and 20 sounds per observation.",
   "You-can-also-check-out-merchandise": "You can also check out merchandise for iNaturalist and Seek at our store below!",
   "You-can-also-explore-existing-observations": "You can also explore existing observations on iNaturalist to discover what's around you.",
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index a38a6ceb0..09d3588c8 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -497,6 +497,7 @@ LEAVE-US-A-REVIEW = LEAVE US A REVIEW!
 LICENSES = LICENSES
 List-view = List view
 Loading-iNaturalists-AR-Camera = Loading iNaturalist's AR Camera
+Loads-content-that-requires-an-Internet-connection = Loads content that requires an Internet connection
 LOCATION = LOCATION
 Location = Location
 Location-accuracy-is-too-imprecise = Location accuracy is too imprecise to help identifiers. Please zoom in.
@@ -600,7 +601,6 @@ Observation-has-no-photos-and-no-sounds = This observation has no photos and no
 Observation-Name = Observation { $scientificName }
 # Label for a menu that shows various actions you can take for an observation
 Observation-options = Observation options
-Observation-photos-unavailable-without-internet = Observation photos unavailable without internet
 OBSERVATION-WAS-DELETED = OBSERVATION WAS DELETED
 Observation-with-no-evidence = Observation with no evidence
 Observations = Observations
@@ -631,7 +631,6 @@ October = October
 Offensive-Inappropriate = Offensive/Inappropriate
 Offensive-Inappropriate-Examples = Misleading or illegal content, racial or ethnic slurs, etc. For more on our defintion of "appropriate," see the FAQ.
 Offline-DQA-description = The DQA may not be accurate. Check your internet connection and try again.
-Offline-No-Notifications = Cannot fetch notifications at this time.
 # Generic confirmation, e.g. button on a warning alert
 OK = OK
 # Sort order, refers to newest or oldest date
@@ -1094,6 +1093,7 @@ X-Species =
        *[other] { $count } Species
     }
 Yes-license-my-photos = Yes, license my photos, sounds, and observations so scientists can use my data (recommended)
+You-are-offline-Tap-to-try-again = You are offline. Tap to try again.
 You-can-add-up-to-20-media = You can add up to 20 photos and 20 sounds per observation.
 You-can-also-check-out-merchandise = You can also check out merchandise for iNaturalist and Seek at our store below!
 You-can-also-explore-existing-observations = You can also explore existing observations on iNaturalist to discover what's around you.
diff --git a/src/images/icons/offline.svg b/src/images/icons/offline.svg
new file mode 100644
index 000000000..5728d4f86
--- /dev/null
+++ b/src/images/icons/offline.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" version="1.1" viewBox="0 0 24 24">
+  <path d="m10.42 4.1c0-0.87262 0.70742-1.58 1.58-1.58 0.87262 0 1.58 0.7074 1.58 1.58v10.533c0 0.87262-0.70742 1.58-1.58 1.58-0.73625 0-1.3549-0.50361-1.5303-1.1851-0.01263-0.04917-0.02297-0.09927-0.0309-0.15017-0.0124-0.0798-0.01887-0.16157-0.01887-0.24487v-1.587s3.3e-5 0 3.3e-5 -3.4e-5v-1.4323h-3.3e-5v-2.7043h3.3e-5v-1.5388s-3.3e-5 0-3.3e-5 3.3e-5v-2.6817h3.3e-5zm-1.6482 9.4867v1.0465c0 0.58351 0.28551 1.1227 0.72138 1.5592-0.64058 0.31911-1.302 0.75492-1.9939 1.3082-0.57508 0.45994-1.4142 0.36654-1.8741-0.20857-0.45991-0.57511-0.36654-1.4142 0.20857-1.8741 0.93406-0.74698 1.9106-1.382 2.938-1.8313zm0-1.505c-1.2177 0.45088-2.5367 1.1577-4.0323 2.1549-0.61271 0.40851-1.4406 0.24297-1.8491-0.36971-0.40851-0.61272-0.24298-1.4406 0.36972-1.8491 1.9311-1.2875 3.732-2.2226 5.5116-2.7444zm6.4562 1.4767v1.0748c0 0.57461-0.27687 1.1062-0.70152 1.5391 0.61111 0.30551 1.2602 0.73375 1.9535 1.3114 0.56578 0.47138 1.4066 0.39481 1.8779-0.17097 0.47134-0.56575 0.39481-1.4065-0.17097-1.8779-0.99032-0.82505-1.975-1.45-2.9589-1.8765zm0-1.4768v-2.8084c1.7797 0.52181 3.5807 1.4569 5.5119 2.7446 0.61268 0.40854 0.77822 1.2364 0.36971 1.8491-0.40851 0.61268-1.2364 0.77822-1.8491 0.36971-1.4957-0.99726-2.8148-1.7041-4.0326-2.155zm0-4.2722c2.1357 0.62758 4.3393 1.8372 6.5946 3.6822 0.56998 0.46628 1.41 0.38221 1.8763-0.18774 0.46631-0.56998 0.38224-1.41-0.1877-1.8763-2.7112-2.218-5.4846-3.7012-8.2831-4.3787zm-6.4562-2.8663c-2.908 0.62318-5.6997 2.1577-8.3307 4.5254-0.54738 0.49261-0.59179 1.3357-0.099186 1.883 0.4926 0.54738 1.3357 0.59182 1.883 0.0992 2.1671-1.9502 4.3559-3.1851 6.5469-3.7657zm5.3348 14.43c0 1.1635-0.94319 2.1067-2.1067 2.1067-1.1635 0-2.1067-0.94319-2.1067-2.1067 0-1.1635 0.94319-2.1067 2.1067-2.1067 1.1635 0 2.1067 0.94322 2.1067 2.1067z" clip-rule="evenodd"/>
+</svg>
diff --git a/tests/unit/components/BottomTabNavigator/__snapshots__/CustomTabBar.test.js.snap b/tests/unit/components/BottomTabNavigator/__snapshots__/CustomTabBar.test.js.snap
index 616863bf3..77429a75b 100644
--- a/tests/unit/components/BottomTabNavigator/__snapshots__/CustomTabBar.test.js.snap
+++ b/tests/unit/components/BottomTabNavigator/__snapshots__/CustomTabBar.test.js.snap
@@ -375,7 +375,7 @@ exports[`CustomTabBar should render correctly 1`] = `
                 ]
               }
             >
-              
+              
             </Text>
           </View>
         </BVLinearGradient>
@@ -467,7 +467,7 @@ exports[`CustomTabBar should render correctly 1`] = `
               ]
             }
           >
-            
+            
           </Text>
         </View>
       </View>
diff --git a/tests/unit/components/SharedComponents/InlineUser/__snapshots__/InlineUser.test.js.snap b/tests/unit/components/SharedComponents/InlineUser/__snapshots__/InlineUser.test.js.snap
index f1eb878c0..7e516ff86 100644
--- a/tests/unit/components/SharedComponents/InlineUser/__snapshots__/InlineUser.test.js.snap
+++ b/tests/unit/components/SharedComponents/InlineUser/__snapshots__/InlineUser.test.js.snap
@@ -176,7 +176,7 @@ exports[`InlineUser when offline renders reliably 1`] = `
       }
       testID="InlineUser.FallbackPicture"
     >
-      
+      
     </Text>
   </View>
   <Text
@@ -289,7 +289,7 @@ exports[`InlineUser when user has no icon set renders reliably 1`] = `
       }
       testID="InlineUser.FallbackPicture"
     >
-      
+      
     </Text>
   </View>
   <Text
diff --git a/tests/unit/components/SharedComponents/OfflineNotice.test.js b/tests/unit/components/SharedComponents/OfflineNotice.test.js
new file mode 100644
index 000000000..e6be64f19
--- /dev/null
+++ b/tests/unit/components/SharedComponents/OfflineNotice.test.js
@@ -0,0 +1,18 @@
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import OfflineNotice from "components/SharedComponents/OfflineNotice";
+import i18next from "i18next";
+import React from "react";
+
+describe( "OfflineNotice", ( ) => {
+  it( "should throw without an onPress prop", ( ) => {
+    expect( ( ) => render( <OfflineNotice /> ) ).toThrow( );
+  } );
+
+  it( "should be pressable", ( ) => {
+    const onPress = jest.fn( );
+    render( <OfflineNotice onPress={onPress} /> );
+    const notice = screen.getByLabelText( i18next.t( "Internet-Connection-Required" ) );
+    fireEvent.press( notice );
+    expect( onPress ).toHaveBeenCalled( );
+  } );
+} );