diff --git a/.detoxrc.js b/.detoxrc.js
index 8f4849f34..df5e4261d 100644
--- a/.detoxrc.js
+++ b/.detoxrc.js
@@ -44,7 +44,7 @@ module.exports = {
     simulator: {
       type: "ios.simulator",
       device: {
-        type: "iPhone 13",
+        type: "iPhone 14 Plus",
       },
     },
     emulator: {
diff --git a/android/app/src/main/assets/fonts/INatIcon.ttf b/android/app/src/main/assets/fonts/INatIcon.ttf
index 8d10d15d3..92c325b69 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/app/src/main/assets/fonts/inaturalisticons.ttf b/android/app/src/main/assets/fonts/inaturalisticons.ttf
new file mode 100644
index 000000000..4b27b8045
Binary files /dev/null and b/android/app/src/main/assets/fonts/inaturalisticons.ttf differ
diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json
index 40970cc47..8b12586a6 100644
--- a/android/link-assets-manifest.json
+++ b/android/link-assets-manifest.json
@@ -3,7 +3,7 @@
   "data": [
     {
       "path": "assets/fonts/INatIcon.ttf",
-      "sha1": "47a247e3585aec0da80245083a706f676a7e01c0"
+      "sha1": "2691c217d3dfbcba545ce985c306fa93f9610606"
     },
     {
       "path": "assets/fonts/Whitney-BookItalic-Pro.otf",
@@ -16,6 +16,10 @@
     {
       "path": "assets/fonts/Whitney-Medium-Pro.otf",
       "sha1": "33ca073c11f46dc266a7dc1adeaa102891bd76d1"
+    },
+    {
+      "path": "assets/fonts/inaturalisticons.ttf",
+      "sha1": "d5a9b116c0d7857ec446f4f045fe5316196d22ec"
     }
   ]
 }
diff --git a/assets/fonts/INatIcon.ttf b/assets/fonts/INatIcon.ttf
index 8d10d15d3..92c325b69 100644
Binary files a/assets/fonts/INatIcon.ttf and b/assets/fonts/INatIcon.ttf differ
diff --git a/assets/fonts/inaturalisticons.ttf b/assets/fonts/inaturalisticons.ttf
new file mode 100644
index 000000000..4b27b8045
Binary files /dev/null and b/assets/fonts/inaturalisticons.ttf differ
diff --git a/e2e/addObservationWithoutData.e2e.js b/e2e/addObservationWithoutData.e2e.js
index 1deab8d4b..fdeeeaf44 100644
--- a/e2e/addObservationWithoutData.e2e.js
+++ b/e2e/addObservationWithoutData.e2e.js
@@ -28,7 +28,7 @@ describe( "Add observation without evidence", () => {
   } );
 
   it( "should open app with the observation list screen", async () => {
-    const loginText = element( by.id( "log-in-to-iNaturalist-text" ) );
+    const loginText = element( by.id( "log-in-to-iNaturalist-button.text" ) );
     await waitFor( loginText ).toBeVisible( ).withTimeout( 10000 );
     await expect( loginText ).toBeVisible( );
   } );
diff --git a/e2e/signIn.e2e.js b/e2e/signIn.e2e.js
index a66bd477e..1030af652 100644
--- a/e2e/signIn.e2e.js
+++ b/e2e/signIn.e2e.js
@@ -29,12 +29,12 @@ describe( "Sign into app as logged-in user", () => {
   } );
 
   it( "should open app with the observation list screen", async () => {
-    const loginText = element( by.id( "log-in-to-iNaturalist-text" ) );
+    const loginText = element( by.id( "log-in-to-iNaturalist-button.text" ) );
     // 10000 timeout is for github actions, which was failing with a
     // shorter timeout period
     await waitFor( loginText ).toBeVisible().withTimeout( 10000 );
     await expect( loginText ).toBeVisible();
-    await element( by.id( "log-in-to-iNaturalist-text" ) ).tap();
+    await element( by.id( "log-in-to-iNaturalist-button.text" ) ).tap();
     const usernameInput = element( by.id( "Login.email" ) );
     await waitFor( usernameInput ).toBeVisible().withTimeout( 10000 );
     await expect( usernameInput ).toBeVisible();
diff --git a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
index e3ac9b875..8a70afc36 100644
--- a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
+++ b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
@@ -8,13 +8,14 @@
 
 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* iNaturalistReactNativeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* iNaturalistReactNativeTests.m */; };
-		07603705D89842DD91992F31 /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3810FCEF1E284915A5A23AF5 /* INatIcon.ttf */; };
+		015B74B1048846199E2104BF /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C9904C04E3DD410FA07BB0A1 /* 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 */; };
 		374CB22F29943E63005885ED /* Whitney-BookItalic-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = 374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */; };
 		7EBBE0515B6D88FD724A5C47 /* libPods-iNaturalistReactNative.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7DD42FAECED8C66268DDB37F /* libPods-iNaturalistReactNative.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+		862E651A41DD461AAE4331B2 /* inaturalisticons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 142B10AEC7284E94AE0D2300 /* inaturalisticons.ttf */; };
 		A252B2AEA64E47C9AC1D20E8 /* Whitney-Light-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */; };
 		BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */; };
 /* End PBXBuildFile section */
@@ -39,14 +40,15 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = iNaturalistReactNative/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = iNaturalistReactNative/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = iNaturalistReactNative/main.m; sourceTree = "<group>"; };
+		142B10AEC7284E94AE0D2300 /* inaturalisticons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = inaturalisticons.ttf; path = ../assets/fonts/inaturalisticons.ttf; sourceTree = "<group>"; };
 		19A5877328F8E3310016D128 /* iNaturalistReactNative-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "iNaturalistReactNative-Bridging-Header.h"; sourceTree = "<group>"; };
 		27F9BBBBAB49ABBAF88433C9 /* 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>"; };
 		374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Whitney-BookItalic-Pro.otf"; path = "../assets/fonts/Whitney-BookItalic-Pro.otf"; sourceTree = "<group>"; };
-		3810FCEF1E284915A5A23AF5 /* INatIcon.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = INatIcon.ttf; path = ../assets/fonts/INatIcon.ttf; sourceTree = "<group>"; };
 		7DD42FAECED8C66268DDB37F /* libPods-iNaturalistReactNative.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-iNaturalistReactNative.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = iNaturalistReactNative/LaunchScreen.storyboard; 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>"; };
 		C544256CF572EB52B9E2B9CB /* Pods-iNaturalistReactNative.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative.release.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative/Pods-iNaturalistReactNative.release.xcconfig"; sourceTree = "<group>"; };
+		C9904C04E3DD410FA07BB0A1 /* INatIcon.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; 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>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 /* End PBXFileReference section */
@@ -157,7 +159,8 @@
 				BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */,
 				D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */,
 				374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */,
-				3810FCEF1E284915A5A23AF5 /* INatIcon.ttf */,
+				142B10AEC7284E94AE0D2300 /* inaturalisticons.ttf */,
+				C9904C04E3DD410FA07BB0A1 /* INatIcon.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -258,7 +261,8 @@
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				A252B2AEA64E47C9AC1D20E8 /* Whitney-Light-Pro.otf in Resources */,
 				BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */,
-				07603705D89842DD91992F31 /* INatIcon.ttf in Resources */,
+				862E651A41DD461AAE4331B2 /* inaturalisticons.ttf in Resources */,
+				015B74B1048846199E2104BF /* INatIcon.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/ios/iNaturalistReactNative/Info.plist b/ios/iNaturalistReactNative/Info.plist
index ef992379c..3fa15f9e2 100644
--- a/ios/iNaturalistReactNative/Info.plist
+++ b/ios/iNaturalistReactNative/Info.plist
@@ -58,6 +58,7 @@
 		<string>Whitney-Light-Pro.otf</string>
 		<string>Whitney-Medium-Pro.otf</string>
 		<string>Whitney-BookItalic-Pro.otf</string>
+		<string>inaturalisticons.ttf</string>
 		<string>INatIcon.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json
index 40970cc47..8b12586a6 100644
--- a/ios/link-assets-manifest.json
+++ b/ios/link-assets-manifest.json
@@ -3,7 +3,7 @@
   "data": [
     {
       "path": "assets/fonts/INatIcon.ttf",
-      "sha1": "47a247e3585aec0da80245083a706f676a7e01c0"
+      "sha1": "2691c217d3dfbcba545ce985c306fa93f9610606"
     },
     {
       "path": "assets/fonts/Whitney-BookItalic-Pro.otf",
@@ -16,6 +16,10 @@
     {
       "path": "assets/fonts/Whitney-Medium-Pro.otf",
       "sha1": "33ca073c11f46dc266a7dc1adeaa102891bd76d1"
+    },
+    {
+      "path": "assets/fonts/inaturalisticons.ttf",
+      "sha1": "d5a9b116c0d7857ec446f4f045fe5316196d22ec"
     }
   ]
 }
diff --git a/src/components/AddObsModal.js b/src/components/AddObsModal.js
index e287d9c9a..e42bade9c 100644
--- a/src/components/AddObsModal.js
+++ b/src/components/AddObsModal.js
@@ -60,7 +60,7 @@ const AddObsModal = ( { closeModal }: Props ): React.Node => {
   );
 
   return (
-    <View className="flex-1 justify-end">
+    <>
       <View className="flex-row justify-center">
         <View className="bg-white rounded-xl p-5 mb-12 max-w-sm">
           <Text testID="evidence-text" className="text-2xl">{t( "Evidence" )}</Text>
@@ -112,7 +112,7 @@ const AddObsModal = ( { closeModal }: Props ): React.Node => {
           "record-sound-button"
         )}
       </View>
-    </View>
+    </>
   );
 };
 
diff --git a/src/components/DisplayTaxonName.js b/src/components/DisplayTaxonName.js
index d22e1fc96..0170bd5b6 100644
--- a/src/components/DisplayTaxonName.js
+++ b/src/components/DisplayTaxonName.js
@@ -71,9 +71,12 @@ const DisplayTaxonName = ( {
   return (
     <View
       testID="display-taxon-name"
-      className={classNames( "flex", null, {
-        "flex-row items-end flex-wrap w-11/12": isHorizontal
-      } )}
+      // 03032023 amanda - it doesn't look to me like we need these styles at all,
+      // and they're making the common name and sci name show up on the same
+      // line. not sure if i'm missing context here
+      // className={classNames( "flex", null, {
+      //   "flex-row items-end flex-wrap w-11/12": isHorizontal
+      // } )}
     >
       <Body1
         className={textColorClass}
diff --git a/src/components/LoginSignUp/Logout.js b/src/components/LoginSignUp/Logout.js
index 9a079cd98..10d43fafa 100644
--- a/src/components/LoginSignUp/Logout.js
+++ b/src/components/LoginSignUp/Logout.js
@@ -68,6 +68,7 @@ const Logout = ( ): Node => {
 
   const renderBackButton = ( ) => (
     <Pressable
+      accessibilityRole="button"
       onPress={( ) => navigation.goBack( )}
       className="absolute top-8 right-8"
     >
diff --git a/src/components/MyObservations/Header.js b/src/components/MyObservations/Header.js
new file mode 100644
index 000000000..4c1a1ce98
--- /dev/null
+++ b/src/components/MyObservations/Header.js
@@ -0,0 +1,125 @@
+// @flow
+import { useNavigation } from "@react-navigation/native";
+import ToolbarContainer from "components/MyObservations/ToolbarContainer";
+import {
+  Button, Heading1, Subheading1
+} from "components/SharedComponents";
+import { View } from "components/styledComponents";
+import type { Node } from "react";
+import React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { IconButton, useTheme } from "react-native-paper";
+import User from "realmModels/User";
+import useNumUnuploadedObservations from "sharedHooks/useNumUnuploadedObservations";
+
+import Onboarding from "./Onboarding";
+
+type Props = {
+  setLayout: Function;
+  layout: string,
+  currentUser: ?Object,
+  numObservations: number,
+  setHeightAboveToolbar: Function,
+  uploadStatus: Object,
+  setShowLoginSheet: Function
+}
+
+const Header = ( {
+  setLayout,
+  layout,
+  currentUser,
+  numObservations,
+  setHeightAboveToolbar,
+  uploadStatus,
+  setShowLoginSheet
+}: Props ): Node => {
+  const theme = useTheme( );
+  const navigation = useNavigation( );
+  const numUnuploadedObs = useNumUnuploadedObservations( );
+  const { t } = useTranslation( );
+  const hideToolbar = numObservations === 0;
+
+  const signedInContent = ( ) => (
+    <Trans
+      i18nKey="Welcome-user"
+      parent={View}
+      values={{ userHandle: User.userHandle( currentUser ) }}
+      components={[
+        <Subheading1 className="mt-5" />,
+        <Heading1 />
+      ]}
+    />
+  );
+
+  const signedOutContent = ( ) => (
+    <>
+      <View className="flex-row items-center">
+        <IconButton
+          className="mr-5"
+          icon="inaturalist"
+          size={40}
+          iconColor={theme.colors.onSecondary}
+          backgroundColor={theme.colors.secondary}
+          disabled={false}
+          accessibilityState={{ disabled: false }}
+        />
+        {numUnuploadedObs > 0 ? (
+          <View>
+            <Subheading1
+              className="mt-5 max-w-[280px]"
+              testID="log-in-to-iNaturalist-text"
+            >
+              {t( "Log-in-to-contribute-and-sync" )}
+            </Subheading1>
+            <Heading1 className="mb-5 max-w-[280px]">
+              {t( "X-observations", { count: numUnuploadedObs } )}
+            </Heading1>
+          </View>
+        ) : (
+          <Subheading1
+            className="my-5 max-w-[280px]"
+            testID="log-in-to-iNaturalist-text-no-observations"
+          >
+            {t( "Log-in-to-contribute-your-observations" )}
+          </Subheading1>
+        )}
+      </View>
+      <Button
+        onPress={( ) => navigation.navigate( "login" )}
+        accessibilityRole="link"
+        accessibilityLabel={t( "Navigate-to-login-screen" )}
+        text={t( "LOG-IN-TO-INATURALIST" )}
+        level="focus"
+        testID="log-in-to-iNaturalist-button"
+      />
+    </>
+  );
+
+  return (
+    <>
+      <View
+        className="px-5 bg-white w-screen"
+        onLayout={event => {
+          const {
+            height
+          } = event.nativeEvent.layout;
+          setHeightAboveToolbar( height );
+        }}
+      >
+        {currentUser ? signedInContent( ) : signedOutContent( )}
+        <Onboarding />
+      </View>
+      {!hideToolbar && (
+        <ToolbarContainer
+          setLayout={setLayout}
+          layout={layout}
+          numUnuploadedObs={numUnuploadedObs}
+          uploadStatus={uploadStatus}
+          setShowLoginSheet={setShowLoginSheet}
+        />
+      )}
+    </>
+  );
+};
+
+export default Header;
diff --git a/src/components/MyObservations/InfiniteScrollLoadingWheel.js b/src/components/MyObservations/InfiniteScrollLoadingWheel.js
new file mode 100644
index 000000000..101e1243a
--- /dev/null
+++ b/src/components/MyObservations/InfiniteScrollLoadingWheel.js
@@ -0,0 +1,25 @@
+// @flow
+
+import { View } from "components/styledComponents";
+import type { Node } from "react";
+import React from "react";
+import { ActivityIndicator } from "react-native";
+
+type Props = {
+  isLoading?: boolean,
+  currentUser: ?Object
+}
+
+const InfiniteScrollLoadingWheel = ( { isLoading, currentUser }: Props ): Node => {
+  const className = "h-64 border-t border-border py-16";
+  if ( !isLoading || !currentUser ) {
+    return <View className="h-64 py-16" />;
+  }
+  return (
+    <View className={className}>
+      <ActivityIndicator />
+    </View>
+  );
+};
+
+export default InfiniteScrollLoadingWheel;
diff --git a/src/components/MyObservations/LoginSheet.js b/src/components/MyObservations/LoginSheet.js
new file mode 100644
index 000000000..85566afd5
--- /dev/null
+++ b/src/components/MyObservations/LoginSheet.js
@@ -0,0 +1,57 @@
+// @flow
+
+import { useNavigation } from "@react-navigation/native";
+import { Button, Heading4, List2 } from "components/SharedComponents";
+import BottomSheet from "components/SharedComponents/BottomSheet";
+import BottomSheetStandardBackdrop from "components/SharedComponents/BottomSheetStandardBackdrop";
+import { View } from "components/styledComponents";
+import type { Node } from "react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import IconMaterial from "react-native-vector-icons/MaterialIcons";
+
+type Props = {
+  setShowLoginSheet: Function
+}
+
+const LoginSheet = ( { setShowLoginSheet }: Props ): Node => {
+  const navigation = useNavigation( );
+  const { t } = useTranslation( );
+
+  const renderBackdrop = props => <BottomSheetStandardBackdrop props={props} />;
+
+  return (
+    <BottomSheet
+      snapPoints={["25%"]}
+      backdropComponent={renderBackdrop}
+      handleClose={( ) => setShowLoginSheet( false )}
+    >
+      <View className="m-5">
+        <Heading4 className="text-center py-1">
+          {t( "PLEASE-LOG-IN" )}
+        </Heading4>
+        <View className="absolute right-0 top-0">
+          <IconMaterial
+            name="close"
+            onPress={( ) => setShowLoginSheet( false )}
+            size={30}
+          />
+        </View>
+        <List2 className="mt-3">
+          {t( "To-sync-your-observations-to-iNaturalist" )}
+        </List2>
+        <Button
+          level="focus"
+          text={t( "LOG-IN-TO-INATURALIST" )}
+          className="mt-5"
+          onPress={( ) => {
+            setShowLoginSheet( false );
+            navigation.navigate( "login" );
+          }}
+        />
+      </View>
+    </BottomSheet>
+  );
+};
+
+export default LoginSheet;
diff --git a/src/components/MyObservations/MyObservations.js b/src/components/MyObservations/MyObservations.js
new file mode 100644
index 000000000..d713fbc8e
--- /dev/null
+++ b/src/components/MyObservations/MyObservations.js
@@ -0,0 +1,174 @@
+// @flow
+import Header from "components/MyObservations/Header";
+import ViewWrapper from "components/SharedComponents/ViewWrapper";
+import { View } from "components/styledComponents";
+import type { Node } from "react";
+import React, { useRef, useState } from "react";
+import {
+  Animated, Dimensions, Platform
+} from "react-native";
+
+import InfiniteScrollLoadingWheel from "./InfiniteScrollLoadingWheel";
+import LoginSheet from "./LoginSheet";
+import MyObservationsEmpty from "./MyObservationsEmpty";
+import MyObservationsPressable from "./MyObservationsPressable";
+import ObsGridItem from "./ObsGridItem";
+import ObsListItem from "./ObsListItem";
+
+const { diffClamp } = Animated;
+
+type Props = {
+  isLoading?: bool,
+  layout: "list" | "grid",
+  observations: Array<Object>,
+  onEndReached: Function,
+  setLayout: Function,
+  uploadStatus: Object,
+  currentUser: ?Object,
+  showLoginSheet: boolean,
+  setShowLoginSheet: Function
+}
+
+const {
+  width: screenWidth,
+  height: screenHeight
+} = Dimensions.get( "screen" );
+const GUTTER = 15;
+
+const MyObservations = ( {
+  isLoading,
+  layout,
+  observations,
+  onEndReached,
+  setLayout,
+  uploadStatus,
+  currentUser,
+  showLoginSheet,
+  setShowLoginSheet
+}: Props ): Node => {
+  const [heightAboveToolbar, setHeightAboveToolbar] = useState( 0 );
+
+  const [hideHeaderCard, setHideHeaderCard] = useState( false );
+  const [yValue, setYValue] = useState( 0 );
+  // basing collapsible sticky header code off the example in this article
+  // https://medium.com/swlh/making-a-collapsible-sticky-header-animations-with-react-native-6ad7763875c3
+  const scrollY = useRef( new Animated.Value( 0 ) );
+  const scrollYClamped = diffClamp( scrollY.current, 0, heightAboveToolbar );
+
+  const offsetForHeader = scrollYClamped.interpolate( {
+    inputRange: [0, heightAboveToolbar],
+    // $FlowIgnore
+    outputRange: [0, -heightAboveToolbar]
+  } );
+
+  const setNumColumns = ( ) => {
+    if ( layout === "list" || screenWidth <= 320 ) { return 1; }
+    if ( screenWidth <= 744 ) { return 2; }
+    if ( screenWidth <= 1024 ) { return 4; }
+    return 6;
+  };
+
+  const numColumns = setNumColumns( );
+  const combinedGutterWidth = ( numColumns + 1 ) * GUTTER;
+  const gridItemWidth = Math.round( ( screenWidth - combinedGutterWidth ) / numColumns );
+
+  const handleScroll = Animated.event(
+    [
+      {
+        nativeEvent: {
+          contentOffset: { y: scrollY.current }
+        }
+      }
+    ],
+    {
+      listener: ( { nativeEvent } ) => {
+        const { y } = nativeEvent.contentOffset;
+        const hide = yValue < y;
+        // there's likely a better way to do this, but for now fading out
+        // the content that goes under the status bar / safe area notch on iOS
+        if ( Platform.OS !== "ios" ) { return; }
+        if ( hide !== hideHeaderCard ) {
+          setHideHeaderCard( hide );
+          setYValue( y );
+        }
+      },
+      useNativeDriver: true
+    }
+  );
+
+  return (
+    <>
+      <ViewWrapper>
+        <Animated.View style={[{ transform: [{ translateY: offsetForHeader }] }]}>
+          <Animated.FlatList
+            data={observations}
+            key={numColumns}
+            // eslint-disable-next-line react-native/no-inline-styles
+            contentContainerStyle={layout === "grid" && {
+              alignItems: "center"
+            }}
+            style={{ height: screenHeight }}
+            testID="MyObservationsAnimatedList"
+            numColumns={setNumColumns( )}
+            renderItem={( { item } ) => (
+              <MyObservationsPressable observation={item}>
+                {
+                layout === "grid"
+                  ? (
+                    <ObsGridItem
+                      observation={item}
+                      // 03022023 it seems like Flatlist is designed to work
+                      // better with RN styles than with Tailwind classes
+                      style={{
+                        height: gridItemWidth,
+                        width: gridItemWidth,
+                        margin: GUTTER / 2
+                      }}
+                      uploadStatus={uploadStatus}
+                      setShowLoginSheet={setShowLoginSheet}
+                    />
+                  ) : (
+                    <ObsListItem
+                      observation={item}
+                      uploadStatus={uploadStatus}
+                      setShowLoginSheet={setShowLoginSheet}
+                    />
+                  )
+              }
+              </MyObservationsPressable>
+            )}
+            ListEmptyComponent={
+              <MyObservationsEmpty isLoading={isLoading} />
+            }
+            ListHeaderComponent={(
+              <Header
+                setLayout={setLayout}
+                layout={layout}
+                currentUser={currentUser}
+                numObservations={observations.length}
+                setHeightAboveToolbar={setHeightAboveToolbar}
+                uploadStatus={uploadStatus}
+                setShowLoginSheet={setShowLoginSheet}
+              />
+            )}
+            ItemSeparatorComponent={
+              layout !== "grid" && <View className="border-b border-lightGray" />
+            }
+            ListFooterComponent={
+              <InfiniteScrollLoadingWheel isLoading={isLoading} currentUser={currentUser} />
+            }
+            stickyHeaderIndices={[0]}
+            bounces={false}
+            initialNumToRender={10}
+            onEndReached={onEndReached}
+            onEndReachedThreshold={0.1}
+            onScroll={handleScroll}
+          />
+        </Animated.View>
+      </ViewWrapper>
+      {showLoginSheet && <LoginSheet setShowLoginSheet={setShowLoginSheet} />}
+    </>
+  );
+};
+
+export default MyObservations;
diff --git a/src/components/MyObservations/MyObservationsContainer.js b/src/components/MyObservations/MyObservationsContainer.js
new file mode 100644
index 000000000..2bcb05e28
--- /dev/null
+++ b/src/components/MyObservations/MyObservationsContainer.js
@@ -0,0 +1,41 @@
+// @flow
+
+import type { Node } from "react";
+import React, { useState } from "react";
+import useCurrentUser from "sharedHooks/useCurrentUser";
+import useInfiniteScroll from "sharedHooks/useInfiniteScroll";
+import useLocalObservations from "sharedHooks/useLocalObservations";
+import useUploadObservations from "sharedHooks/useUploadObservations";
+
+import MyObservations from "./MyObservations";
+
+const MyObservationsContainer = ( ): Node => {
+  const { observationList: observations, allObsToUpload } = useLocalObservations( );
+  const uploadStatus = useUploadObservations( allObsToUpload );
+  const [layout, setLayout] = useState( "list" );
+  const [idBelow, setIdBelow] = useState( null );
+  const isLoading = useInfiniteScroll( idBelow );
+  const [showLoginSheet, setShowLoginSheet] = useState( false );
+  const currentUser = useCurrentUser( );
+
+  return (
+    <MyObservations
+      observations={observations}
+      layout={layout}
+      setLayout={setLayout}
+      isLoading={isLoading}
+      uploadStatus={uploadStatus}
+      currentUser={currentUser}
+      showLoginSheet={showLoginSheet}
+      setShowLoginSheet={setShowLoginSheet}
+      onEndReached={( ) => {
+        // infinite scroll
+        if ( !isLoading ) {
+          setIdBelow( observations[observations.length - 1].id );
+        }
+      }}
+    />
+  );
+};
+
+export default MyObservationsContainer;
diff --git a/src/components/MyObservations/MyObservationsEmpty.js b/src/components/MyObservations/MyObservationsEmpty.js
new file mode 100644
index 000000000..18ace2c4e
--- /dev/null
+++ b/src/components/MyObservations/MyObservationsEmpty.js
@@ -0,0 +1,67 @@
+// @flow
+
+import { useNavigation } from "@react-navigation/native";
+import AddObsModal from "components/AddObsModal";
+import {
+  Body1, Body2, Button
+} from "components/SharedComponents";
+import Modal from "components/SharedComponents/Modal";
+import { View } from "components/styledComponents";
+import type { Node } from "react";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  isLoading: ?boolean
+}
+
+const MyObservationsEmpty = ( { isLoading }: Props ): Node => {
+  const { t } = useTranslation( );
+  const navigation = useNavigation( );
+  const [showModal, setShowModal] = useState( false );
+
+  if ( !isLoading ) {
+    return (
+      <>
+        <Modal
+          showModal={showModal}
+          closeModal={( ) => setShowModal( false )}
+          modal={<AddObsModal closeModal={( ) => setShowModal( false )} />}
+        />
+        <View className="mx-5">
+          <Body1 className="mb-3 mt-10">
+            {t( "Welcome-to-iNaturalist" )}
+          </Body1>
+          <Body2 className="mb-5">
+            {t( "iNaturalist-is-a-community-of-naturalists" )}
+          </Body2>
+          <Body2 className="mb-5">
+            {t( "Observations-created-on-iNaturalist" )}
+          </Body2>
+          <Button
+            className="mb-2"
+            text={t( "CREATE-YOUR-FIRST-OBSERVATION" )}
+            level="focus"
+            onPress={( ) => setShowModal( true )}
+            accessibilityLabel={t( "Observe" )}
+            accessibilityHint={t( "Opens-add-observation-modal" )}
+          />
+          <Body2 className="my-5">
+            {t( "You-can-also-explore-existing-observations" )}
+          </Body2>
+          <Button
+            className="mb-2"
+            text={t( "EXPLORE-OBSERVATIONS" )}
+            level="focus"
+            onPress={( ) => navigation.navigate( "MainStack", { screen: "Explore" } )}
+            accessibilityLabel={t( "Explore" )}
+            accessibilityHint={t( "Navigates-to-explore" )}
+          />
+        </View>
+      </>
+    );
+  }
+  return null;
+};
+
+export default MyObservationsEmpty;
diff --git a/src/components/MyObservations/MyObservationsPressable.js b/src/components/MyObservations/MyObservationsPressable.js
new file mode 100644
index 000000000..225e7809e
--- /dev/null
+++ b/src/components/MyObservations/MyObservationsPressable.js
@@ -0,0 +1,45 @@
+// @flow
+
+import { useNavigation } from "@react-navigation/native";
+import type { Node } from "react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Pressable } from "react-native";
+
+type Props = {
+  observation: Object,
+  children: any
+}
+
+const MyObservationsPressable = ( { observation, children }: Props ): Node => {
+  const navigation = useNavigation( );
+  const { t } = useTranslation( );
+  const unsynced = !observation.wasSynced( );
+
+  const navigateToObservation = ( ) => {
+    const { uuid } = observation;
+    if ( unsynced ) {
+      navigation.navigate( "ObsEdit", { uuid } );
+    } else {
+      navigation.navigate( "ObsDetails", { uuid } );
+    }
+  };
+
+  return (
+    <Pressable
+      onPress={navigateToObservation}
+      accessibilityRole="link"
+      accessibilityHint={unsynced
+        ? t( "Navigate-to-observation-edit-screen" )
+        : t( "Navigate-to-observation-details" )}
+      accessibilityLabel={t( "Observation-Name", {
+        // TODO: use the name that the user prefers (common or scientific)
+        scientificName: observation.species_guess
+      } )}
+    >
+      {children}
+    </Pressable>
+  );
+};
+
+export default MyObservationsPressable;
diff --git a/src/components/MyObservations/ObsGridItem.js b/src/components/MyObservations/ObsGridItem.js
new file mode 100644
index 000000000..3d767708a
--- /dev/null
+++ b/src/components/MyObservations/ObsGridItem.js
@@ -0,0 +1,64 @@
+// @flow
+
+import DisplayTaxonName from "components/DisplayTaxonName";
+import { View } from "components/styledComponents";
+import type { Node } from "react";
+import React from "react";
+import Photo from "realmModels/Photo";
+
+import ObsImagePreview from "./ObsImagePreview";
+import ObsUploadStatus from "./ObsUploadStatus";
+
+type Props = {
+  observation: Object,
+  width?: string,
+  height?: string,
+  style?: Object,
+  uploadStatus: Object,
+  setShowLoginSheet: Function
+};
+
+const ObsGridItem = ( {
+  observation,
+  width = "w-full",
+  height,
+  style,
+  uploadStatus,
+  setShowLoginSheet
+}: Props ): Node => (
+  <ObsImagePreview
+    source={{
+      uri: Photo.displayLocalOrRemoteMediumPhoto(
+        observation?.observationPhotos?.[0]?.photo
+      )
+    }}
+    width={width}
+    height={height}
+    style={style}
+    obsPhotosCount={observation?.observationPhotos?.length ?? 0}
+    hasSound={!!observation?.observationSounds?.length}
+    isMultiplePhotosTop
+    testID={`MyObservations.gridItem.${observation.uuid}`}
+  >
+    <View className="absolute bottom-0 flex p-2 w-full">
+      <ObsUploadStatus
+        observation={observation}
+        uploadStatus={uploadStatus}
+        layout="horizontal"
+        white
+        classNameMargin="mb-1"
+        setShowLoginSheet={setShowLoginSheet}
+      />
+      <DisplayTaxonName
+        taxon={observation?.taxon}
+        scientificNameFirst={
+          observation?.user?.prefers_scientific_name_first
+        }
+        layout="vertical"
+        color="text-white"
+      />
+    </View>
+  </ObsImagePreview>
+);
+
+export default ObsGridItem;
diff --git a/src/components/Observations/ObsPreviewImage/Background.js b/src/components/MyObservations/ObsImageBackground.js
similarity index 93%
rename from src/components/Observations/ObsPreviewImage/Background.js
rename to src/components/MyObservations/ObsImageBackground.js
index fc43b4863..e19ff1e63 100644
--- a/src/components/Observations/ObsPreviewImage/Background.js
+++ b/src/components/MyObservations/ObsImageBackground.js
@@ -15,7 +15,7 @@ type Props = {
   opaque?: boolean
 };
 
-const Background = ( {
+const ObsImageBackground = ( {
   uri,
   disableGradient = false,
   opaque = false
@@ -43,4 +43,4 @@ const Background = ( {
   );
 };
 
-export default Background;
+export default ObsImageBackground;
diff --git a/src/components/Observations/ObsPreviewImage/index.js b/src/components/MyObservations/ObsImagePreview.js
similarity index 88%
rename from src/components/Observations/ObsPreviewImage/index.js
rename to src/components/MyObservations/ObsImagePreview.js
index 45373b10b..2a112ce72 100644
--- a/src/components/Observations/ObsPreviewImage/index.js
+++ b/src/components/MyObservations/ObsImagePreview.js
@@ -7,7 +7,7 @@ import React from "react";
 import { useTheme } from "react-native-paper";
 import { dropShadow } from "styles/global";
 
-import Background from "./Background";
+import ObsImageBackground from "./ObsImageBackground";
 
 type SOURCE = {
   uri: string,
@@ -26,21 +26,25 @@ type Props = {
   isMultiplePhotosTop?: boolean,
   disableGradient?: boolean,
   hasSmallBorderRadius?: boolean,
+  testID?: string,
+  style?: Object
 };
 
-const ObsPreviewImage = ( {
+const ObsImagePreview = ( {
   source,
   children,
   hasSound = false,
   obsPhotosCount = 0,
   selectable = false,
   selected = false,
-  height = "h-[62px]",
   width = "w-[62px]",
+  height = "h-[62px]",
   opaque = false,
   isMultiplePhotosTop = false,
   disableGradient = false,
-  hasSmallBorderRadius = false
+  hasSmallBorderRadius = false,
+  testID,
+  style
 }: Props ): Node => {
   const theme = useTheme();
   const hasMultiplePhotos = obsPhotosCount > 1;
@@ -49,13 +53,15 @@ const ObsPreviewImage = ( {
   return (
     <View
       className={classNames(
-        "relative overflow-hidden",
-        height,
+        "relative overflow-hidden max-h-[210px]",
         width,
+        height,
         borderRadius
       )}
+      style={style}
+      testID={testID}
     >
-      <Background
+      <ObsImageBackground
         uri={source}
         opaque={opaque}
         disableGradient={disableGradient}
@@ -106,4 +112,4 @@ const ObsPreviewImage = ( {
   );
 };
 
-export default ObsPreviewImage;
+export default ObsImagePreview;
diff --git a/src/components/Observations/ObsListItem.js b/src/components/MyObservations/ObsListItem.js
similarity index 69%
rename from src/components/Observations/ObsListItem.js
rename to src/components/MyObservations/ObsListItem.js
index ec120d4a9..fa8312c31 100644
--- a/src/components/Observations/ObsListItem.js
+++ b/src/components/MyObservations/ObsListItem.js
@@ -6,24 +6,25 @@ import type { Node } from "react";
 import React from "react";
 import Photo from "realmModels/Photo";
 
-import ObsPreviewImage from "./ObsPreviewImage";
-import ObsStatus from "./ObsStatus";
-import UploadButton from "./UploadButton";
+import ObsImagePreview from "./ObsImagePreview";
+import ObsUploadStatus from "./ObsUploadStatus";
 
 type Props = {
-  observation: Object
+  observation: Object,
+  uploadStatus: Object,
+  setShowLoginSheet: Function
 };
 
-const ObsListItem = ( { observation }: Props ): Node => {
+const ObsListItem = ( { observation, uploadStatus, setShowLoginSheet }: Props ): Node => {
   const photo = observation?.observationPhotos?.[0]?.photo || null;
   const needsSync = observation.needsSync( );
 
   return (
     <View
-      testID={`ObsList.obsListItem.${observation.uuid}`}
+      testID={`MyObservations.obsListItem.${observation.uuid}`}
       className="flex-row px-[15px] my-[11px]"
     >
-      <ObsPreviewImage
+      <ObsImagePreview
         source={{ uri: Photo.displayLocalOrRemoteSquarePhoto( photo ) }}
         obsPhotosCount={observation?.observationPhotos?.length ?? 0}
         hasSound={!!observation?.observationSounds?.length}
@@ -45,12 +46,13 @@ const ObsListItem = ( { observation }: Props ): Node => {
           classNameMargin="mt-1"
         />
       </View>
-      <View className="items-center ml-auto">
-        {needsSync ? (
-          <UploadButton observation={observation} />
-        ) : (
-          <ObsStatus observation={observation} layout="vertical" />
-        )}
+      <View className="items-center ml-auto justify-center">
+        <ObsUploadStatus
+          observation={observation}
+          uploadStatus={uploadStatus}
+          layout="vertical"
+          setShowLoginSheet={setShowLoginSheet}
+        />
       </View>
     </View>
   );
diff --git a/src/components/Observations/ObsStatus.js b/src/components/MyObservations/ObsStatus.js
similarity index 73%
rename from src/components/Observations/ObsStatus.js
rename to src/components/MyObservations/ObsStatus.js
index 0dc7799bf..b9e594e41 100644
--- a/src/components/Observations/ObsStatus.js
+++ b/src/components/MyObservations/ObsStatus.js
@@ -35,6 +35,19 @@ const ObsStatus = ( {
   const numIdents = observation.identifications?.length || 0;
   const numComments = observation.comments?.length || 0;
 
+  // 03072023 amanda - applying chris' bandaid fix from PR #515: https://github.com/inaturalist/iNaturalistReactNative/pull/515
+  // to make sure android devices don't crash on start
+  let identificationA11yLabel = "";
+  let commentA11yLabel = "";
+  try {
+    // not exactly sure why this causes a consistent error every time you run android
+    // for the first time...
+    identificationA11yLabel = t( "x-identifications", { count: numIdents } );
+    commentA11yLabel = t( "x-comments", { count: numComments } );
+  } catch ( e ) {
+    console.warn( e );
+  }
+
   return (
     <View className={classNames( "flex", flexDirection, classNameMargin )}>
       <ActivityCount
@@ -42,7 +55,7 @@ const ObsStatus = ( {
         margin={margin}
         count={numIdents}
         color={iconColor}
-        accessibilityLabel={t( "x-identifications", { count: numIdents } )}
+        accessibilityLabel={identificationA11yLabel}
         testID="ActivityCount.identificationCount"
       />
       <ActivityCount
@@ -50,7 +63,7 @@ const ObsStatus = ( {
         margin={margin}
         count={observation.comments?.length}
         color={iconColor}
-        accessibilityLabel={t( "x-comments", { count: numComments } )}
+        accessibilityLabel={commentA11yLabel}
         testID="ActivityCount.commentCount"
       />
       <QualityGradeStatus qualityGrade={qualityGrade} color={iconColor} />
diff --git a/src/components/MyObservations/ObsUploadStatus.js b/src/components/MyObservations/ObsUploadStatus.js
new file mode 100644
index 000000000..7bcde1758
--- /dev/null
+++ b/src/components/MyObservations/ObsUploadStatus.js
@@ -0,0 +1,76 @@
+// @flow
+
+import { UploadStatus } from "components/SharedComponents";
+import { ObsEditContext } from "providers/contexts";
+import type { Node } from "react";
+import React, { useContext } from "react";
+import { useTheme } from "react-native-paper";
+import useCurrentUser from "sharedHooks/useCurrentUser";
+
+import ObsStatus from "./ObsStatus";
+import UploadCompleteAnimation from "./UploadIcons/UploadCompleteAnimation";
+
+type Props = {
+  observation: Object,
+  uploadStatus: Object,
+  layout?: "horizontal" | "vertical",
+  white?: boolean,
+  classNameMargin?: string,
+  setShowLoginSheet: Function
+};
+
+const ObsUploadStatus = ( {
+  observation,
+  uploadStatus,
+  layout,
+  white = false,
+  classNameMargin,
+  setShowLoginSheet
+}: Props ): Node => {
+  const theme = useTheme( );
+  const currentUser = useCurrentUser( );
+  const obsEditContext = useContext( ObsEditContext );
+  const startSingleUpload = obsEditContext?.startSingleUpload;
+  const uploadProgress = obsEditContext?.uploadProgress;
+  const wasSynced = observation.wasSynced( );
+  const { allObsToUpload } = uploadStatus;
+  const whiteColor = white && theme.colors.onPrimary;
+
+  const displayUploadStatus = ( ) => {
+    if ( allObsToUpload?.find( upload => upload.uuid === observation.uuid ) ) {
+      return (
+        <UploadStatus
+          progress={uploadProgress?.[observation.uuid] || 0}
+          startSingleUpload={( ) => {
+            if ( !currentUser ) {
+              setShowLoginSheet( true );
+              return;
+            }
+            startSingleUpload( observation );
+          }}
+          color={whiteColor}
+          completeColor={whiteColor}
+        >
+          <UploadCompleteAnimation
+            wasSynced={wasSynced}
+            observation={observation}
+            layout={layout}
+            white={white}
+          />
+        </UploadStatus>
+      );
+    }
+    return (
+      <ObsStatus
+        observation={observation}
+        layout={layout}
+        white={white}
+        classNameMargin={classNameMargin}
+      />
+    );
+  };
+
+  return displayUploadStatus( );
+};
+
+export default ObsUploadStatus;
diff --git a/src/components/MyObservations/Onboarding.js b/src/components/MyObservations/Onboarding.js
new file mode 100644
index 000000000..db5bbfe32
--- /dev/null
+++ b/src/components/MyObservations/Onboarding.js
@@ -0,0 +1,28 @@
+// @flow
+import { Body3 } from "components/SharedComponents";
+import type { Node } from "react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import useCurrentUser from "sharedHooks/useCurrentUser";
+
+const Onboarding = ( ): Node => {
+  const currentUser = useCurrentUser( );
+  const numObservations = currentUser?.observations_count || 0;
+  const { t } = useTranslation( );
+
+  const getOnboardingText = ( ) => {
+    if ( numObservations <= 10 ) {
+      return t( "As-you-upload-more-observations" );
+    }
+    if ( numObservations <= 50 ) {
+      return t( "Observations-you-upload-to-iNaturalist" );
+    }
+    return t( "You-can-search-observations-of-any-plant-or-animal" );
+  };
+
+  return numObservations <= 100 && numObservations > 0
+    ? <Body3 className="pt-5">{getOnboardingText( ) }</Body3>
+    : null;
+};
+
+export default Onboarding;
diff --git a/src/components/MyObservations/Toolbar.js b/src/components/MyObservations/Toolbar.js
new file mode 100644
index 000000000..3089677c2
--- /dev/null
+++ b/src/components/MyObservations/Toolbar.js
@@ -0,0 +1,158 @@
+// @flow
+
+import { Body2, Body4, INatIcon } from "components/SharedComponents";
+import { Pressable, View } from "components/styledComponents";
+import { t } from "i18next";
+import type { Node } from "react";
+import React from "react";
+import { Animated, Easing } from "react-native";
+import { IconButton, ProgressBar, useTheme } from "react-native-paper";
+import IconMaterial from "react-native-vector-icons/MaterialIcons";
+
+type Props = {
+  layout: string,
+  statusText: ?string,
+  handleSyncButtonPress: Function,
+  uploadError: string,
+  uploadInProgress: boolean,
+  stopUpload: Function,
+  progress: number,
+  numUnuploadedObs: number,
+  currentUser: ?Object,
+  navToExplore: Function,
+  toggleLayout: Function,
+  getSyncIcon: Function
+}
+
+const Toolbar = ( {
+  layout,
+  statusText,
+  handleSyncButtonPress,
+  uploadError,
+  uploadInProgress,
+  stopUpload,
+  progress,
+  numUnuploadedObs,
+  currentUser,
+  navToExplore,
+  toggleLayout,
+  getSyncIcon
+}: Props ): Node => {
+  const theme = useTheme( );
+  const spinValue = new Animated.Value( 1 );
+  const uploadComplete = progress === 1;
+  const uploading = uploadInProgress && !uploadComplete;
+
+  Animated.timing( spinValue, {
+    toValue: 0,
+    duration: 3000,
+    easing: Easing.linear,
+    useNativeDriver: true
+  } ).start( );
+
+  const spin = spinValue.interpolate( {
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"]
+  } );
+
+  const getSyncIconColor = ( ) => {
+    if ( uploadError ) {
+      return theme.colors.error;
+    } if ( uploading || numUnuploadedObs > 0 ) {
+      return theme.colors.secondary;
+    }
+    return theme.colors.primary;
+  };
+
+  return (
+    <View className={
+      `bg-white justify-center h-[78px] ${layout !== "grid" ? "border-b border-lightGray" : ""}`
+    }
+    >
+      <View className="flex-row items-center px-[15px]">
+        {currentUser && (
+          <IconButton
+            icon="compass-rose-outline"
+            onPress={navToExplore}
+            accessibilityLabel={t( "Explore" )}
+            accessibilityHint={t( "Navigates-to-explore" )}
+            accessibilityRole="button"
+            size={26}
+            disabled={false}
+            accessibilityState={{ disabled: false }}
+          />
+        )}
+
+        <Animated.View
+          style={uploading ? { transform: [{ rotate: spin }] } : {}}
+        >
+          <IconButton
+            icon={getSyncIcon( )}
+            size={26}
+            onPress={handleSyncButtonPress}
+            accessibilityRole="button"
+            disabled={false}
+            accessibilityState={{ disabled: false }}
+            iconColor={getSyncIconColor( )}
+          />
+        </Animated.View>
+
+        {statusText && (
+          <View>
+            <View className="flex-row items-center">
+              <Body2 className="ml-1">{statusText}</Body2>
+
+              {( uploadComplete && !uploadError ) && (
+              <View className="ml-2">
+                <INatIcon name="checkmark" size={11} color={theme.colors.secondary} />
+              </View>
+              )}
+            </View>
+            <View className="max-w-[200px]">
+              {uploadError && (
+              <Body4 className="ml-1 mt-[3px] color-warningRed">
+                {uploadError}
+              </Body4>
+              )}
+            </View>
+          </View>
+        )}
+
+        <View className="ml-auto flex-row items-center">
+          {( uploadInProgress && !uploadComplete ) && (
+            <Pressable onPress={stopUpload} accessibilityRole="button">
+              <IconMaterial name="close" size={11} color={theme.colors.primary} />
+            </Pressable>
+          )}
+
+          <Pressable
+            className="ml-2"
+            testID={
+              layout === "list"
+                ? "MyObservationsToolbar.toggleGridView"
+                : "MyObservationsToolbar.toggleListView"
+            }
+            onPress={toggleLayout}
+            accessibilityRole="button"
+          >
+            <IconButton
+              icon={layout === "grid" ? "listview" : "gridview"}
+              size={30}
+              disabled={false}
+              accessibilityState={{ disabled: false }}
+            />
+          </Pressable>
+        </View>
+      </View>
+      <ProgressBar
+        progress={progress}
+        color={theme.colors.secondary}
+        // eslint-disable-next-line react-native/no-inline-styles
+        style={{ backgroundColor: "transparent" }}
+        visible={uploadInProgress && progress !== 0}
+      />
+    </View>
+  );
+};
+
+export default Toolbar;
diff --git a/src/components/MyObservations/ToolbarContainer.js b/src/components/MyObservations/ToolbarContainer.js
new file mode 100644
index 000000000..b36cf897e
--- /dev/null
+++ b/src/components/MyObservations/ToolbarContainer.js
@@ -0,0 +1,133 @@
+// @flow
+
+import { useNavigation } from "@react-navigation/native";
+import { ObsEditContext } from "providers/contexts";
+import type { Node } from "react";
+import React, { useContext, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Dimensions, PixelRatio
+} from "react-native";
+import useCurrentUser from "sharedHooks/useCurrentUser";
+
+import Toolbar from "./Toolbar";
+
+type Props = {
+  setLayout: Function,
+  layout: string,
+  numUnuploadedObs: number,
+  uploadStatus: Object,
+  setShowLoginSheet: Function
+}
+
+const ToolbarContainer = ( {
+  setLayout, layout, numUnuploadedObs,
+  uploadStatus,
+  setShowLoginSheet
+}: Props ): Node => {
+  const { t } = useTranslation( );
+  const currentUser = useCurrentUser( );
+  const obsEditContext = useContext( ObsEditContext );
+  const navigation = useNavigation( );
+  const {
+    stopUpload,
+    uploadInProgress,
+    startUpload,
+    progress,
+    error: uploadError,
+    currentUploadIndex,
+    totalUploadCount
+  } = uploadStatus;
+  const uploadComplete = progress === 1;
+
+  const screenWidth = Dimensions.get( "window" ).width * PixelRatio.get();
+
+  const syncObservations = obsEditContext?.syncObservations;
+
+  const getStatusText = ( ) => {
+    if ( uploadComplete ) {
+      return t( "X-observations-uploaded", { count: totalUploadCount } );
+    }
+
+    if ( numUnuploadedObs <= 0 ) {
+      return null;
+    }
+
+    if ( !uploadInProgress ) {
+      return t( "Upload-x-observations", { count: numUnuploadedObs } );
+    }
+
+    const translationParams = {
+      total: totalUploadCount,
+      uploadedCount: currentUploadIndex + 1
+    };
+
+    // iPhone 4 pixel width
+    if ( screenWidth <= 640 ) {
+      return t( "Uploading-x-of-y", translationParams );
+    }
+
+    return t( "Uploading-x-of-y-observations", translationParams );
+  };
+
+  const handleSyncButtonPress = ( ) => {
+    if ( !currentUser ) {
+      setShowLoginSheet( true );
+      return;
+    }
+
+    if ( numUnuploadedObs > 0 ) {
+      startUpload( );
+    } else {
+      syncObservations( );
+    }
+  };
+
+  const navToExplore = ( ) => navigation.navigate( "MainStack", { screen: "Explore" } );
+
+  const toggleLayout = ( ) => setLayout( currentView => {
+    if ( currentView === "list" ) {
+      return "grid";
+    }
+    return "list";
+  } );
+
+  const statusText = getStatusText( );
+
+  const getSyncIcon = ( ) => {
+    if ( ( numUnuploadedObs > 0 && !uploadInProgress ) || uploadError ) {
+      return "sync-unsynced";
+    }
+    return "sync";
+  };
+
+  // clear upload status when leaving screen
+  useEffect(
+    ( ) => {
+      navigation.addListener( "blur", ( ) => {
+        uploadStatus.stopUpload( );
+        obsEditContext?.setUploadProgress( { } );
+      } );
+    },
+    [navigation, uploadStatus, obsEditContext]
+  );
+
+  return (
+    <Toolbar
+      statusText={statusText}
+      handleSyncButtonPress={handleSyncButtonPress}
+      uploadError={uploadError}
+      uploadInProgress={uploadInProgress}
+      stopUpload={stopUpload}
+      progress={progress}
+      numUnuploadedObs={numUnuploadedObs}
+      currentUser={currentUser}
+      navToExplore={navToExplore}
+      toggleLayout={toggleLayout}
+      layout={layout}
+      getSyncIcon={getSyncIcon}
+    />
+  );
+};
+
+export default ToolbarContainer;
diff --git a/src/components/MyObservations/UploadIcons/UploadCompleteAnimation.js b/src/components/MyObservations/UploadIcons/UploadCompleteAnimation.js
new file mode 100644
index 000000000..33851d481
--- /dev/null
+++ b/src/components/MyObservations/UploadIcons/UploadCompleteAnimation.js
@@ -0,0 +1,80 @@
+// @flow
+
+import ObsStatus from "components/MyObservations/ObsStatus";
+import { INatIcon } from "components/SharedComponents";
+import type { Node } from "react";
+import React, { useEffect, useRef } from "react";
+import { Animated } from "react-native";
+import { useTheme } from "react-native-paper";
+import Observation from "realmModels/Observation";
+
+type Props = {
+  wasSynced: boolean,
+  observation: typeof Observation,
+  layout?: "horizontal" | "vertical",
+  white?: boolean,
+  classNameMargin?: string
+}
+
+const fade = value => ( {
+  toValue: value,
+  duration: 2000,
+  useNativeDriver: true
+} );
+
+const UploadCompleteAnimation = ( {
+  wasSynced, observation, layout, white, classNameMargin
+}: Props ): Node => {
+  const fadeAnimation = useRef( new Animated.Value( 1 ) ).current;
+  const enteringFadeAnimation = useRef( new Animated.Value( 0 ) ).current;
+  const theme = useTheme( );
+
+  useEffect( ( ) => {
+    if ( wasSynced ) {
+      Animated.sequence( [
+        Animated.timing( fadeAnimation, fade( 0 ) ),
+        Animated.timing( enteringFadeAnimation, fade( 1 ) )
+      ] ).start( );
+    }
+  }, [wasSynced, fadeAnimation, enteringFadeAnimation] );
+
+  return (
+    <>
+      {/* $FlowIgnore[prop-missing] */}
+      <Animated.View
+        style={{ opacity: fadeAnimation }}
+        // position component fading out and component fading in on the same spot
+        className={
+          layout === "vertical"
+            ? "absolute inset-0 flex justify-center items-center z-10"
+            : "absolute -left-[15px]"
+        }
+      >
+        <INatIcon
+          size={28}
+          name="upload-complete"
+          color={layout === "vertical" ? theme.colors.secondary : theme.colors.onSecondary}
+        />
+      </Animated.View>
+      {/* $FlowIgnore[prop-missing] */}
+      <Animated.View
+        style={{ opacity: enteringFadeAnimation }}
+        // position component fading out and component fading in on the same spot
+        className={
+          layout === "vertical"
+            ? ""
+            : "absolute -left-[25px] -bottom-[30px]"
+        }
+      >
+        <ObsStatus
+          observation={observation}
+          layout={layout}
+          white={white}
+          classNameMargin={classNameMargin}
+        />
+      </Animated.View>
+    </>
+  );
+};
+
+export default UploadCompleteAnimation;
diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index 45b48f11c..4282da822 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -9,8 +9,8 @@ import {
   unfaveObservation
 } from "api/observations";
 import DisplayTaxonName from "components/DisplayTaxonName";
+import ObsStatus from "components/MyObservations/ObsStatus";
 import ActivityHeader from "components/ObsDetails/ActivityHeader";
-import ObsStatus from "components/Observations/ObsStatus";
 import { ObservationLocation, Tabs } from "components/SharedComponents";
 import HideView from "components/SharedComponents/HideView";
 import PhotoScroll from "components/SharedComponents/PhotoScroll";
diff --git a/src/components/Observations/EmptyList.js b/src/components/Observations/EmptyList.js
deleted file mode 100644
index 6d8f0f315..000000000
--- a/src/components/Observations/EmptyList.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// @flow
-
-import { Text } from "components/styledComponents";
-import { t } from "i18next";
-import type { Node } from "react";
-import React from "react";
-
-const EmptyList = ( ): Node => (
-  <Text testID="ObsList.emptyList" className="self-center pt-48">
-    {t( "iNaturalist-is-a-community-of-naturalists" )}
-  </Text>
-);
-export default EmptyList;
diff --git a/src/components/Observations/InfiniteScrollFooter.js b/src/components/Observations/InfiniteScrollFooter.js
deleted file mode 100644
index c0e1386af..000000000
--- a/src/components/Observations/InfiniteScrollFooter.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// @flow
-
-import { View } from "components/styledComponents";
-import type { Node } from "react";
-import React from "react";
-import { ActivityIndicator } from "react-native";
-
-type Props = {
-  view: string,
-  isLoading: boolean
-}
-
-const InfiniteScrollFooter = ( { view, isLoading }: Props ): Node => {
-  const className = `${view === "grid" ? "h-64" : "h-32"} border-t border-lightGray py-16`;
-  if ( isLoading ) {
-    return (
-      <View className={className}>
-        <ActivityIndicator />
-      </View>
-    );
-  }
-  return <View className={className} />;
-};
-
-export default InfiniteScrollFooter;
diff --git a/src/components/Observations/LoggedOutCard.js b/src/components/Observations/LoggedOutCard.js
deleted file mode 100644
index c4294266f..000000000
--- a/src/components/Observations/LoggedOutCard.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// @flow
-
-import { useNavigation } from "@react-navigation/native";
-import { Pressable, Text } from "components/styledComponents";
-import type { Node } from "react";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import useNumUnuploadedObservations from "sharedHooks/useNumUnuploadedObservations";
-
-const LoggedOutCard = ( ): Node => {
-  const navigation = useNavigation( );
-  const numUnuploadedObs = useNumUnuploadedObservations( );
-  const { t } = useTranslation( );
-
-  return (
-    <Pressable
-      onPress={( ) => navigation.navigate( "login" )}
-      accessibilityRole="link"
-      accessibilityLabel={t( "Navigate-to-login-screen" )}
-      className="rounded-bl-3xl rounded-br-3xl h-24 justify-center"
-    >
-      <Text
-        testID="log-in-to-iNaturalist-text"
-        className="self-center text-2xl"
-      >
-        {t( "Log-in-to-iNaturalist" )}
-      </Text>
-      <Text className="self-center text-base">
-        {t( "X-unuploaded-observations", { observationCount: numUnuploadedObs } )}
-      </Text>
-    </Pressable>
-  );
-};
-
-export default LoggedOutCard;
diff --git a/src/components/Observations/LoginPrompt.js b/src/components/Observations/LoginPrompt.js
deleted file mode 100644
index c1116c0ff..000000000
--- a/src/components/Observations/LoginPrompt.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// @flow
-
-import { useNavigation } from "@react-navigation/native";
-import { Button } from "components/SharedComponents";
-import { t } from "i18next";
-import type { Node } from "react";
-import React from "react";
-import { Text } from "react-native";
-
-const LoginPrompt = ( ): Node => {
-  const navigation = useNavigation( );
-
-  return (
-    <>
-      <Text>{t( "Create-an-iNaturalist-account-to-save-your-observations" )}</Text>
-      <Button
-        level="neutral"
-        text={t( "LOG-IN-TO-INATURALIST" )}
-        className="mt-5"
-        onPress={( ) => navigation.navigate( "login" )}
-      />
-    </>
-  );
-};
-
-export default LoginPrompt;
diff --git a/src/components/Observations/ObsGridItem.js b/src/components/Observations/ObsGridItem.js
deleted file mode 100644
index 860c8f35d..000000000
--- a/src/components/Observations/ObsGridItem.js
+++ /dev/null
@@ -1,73 +0,0 @@
-// @flow
-
-import classNames from "classnames";
-import DisplayTaxonName from "components/DisplayTaxonName";
-import { View } from "components/styledComponents";
-import type { Node } from "react";
-import React from "react";
-import Observation from "realmModels/Observation";
-import Photo from "realmModels/Photo";
-
-import ObsPreviewImage from "./ObsPreviewImage";
-import ObsStatus from "./ObsStatus";
-import UploadButton from "./UploadButton";
-
-type Props = {
-  observation: Object,
-  isProject?: boolean,
-  height?: string,
-  width?: string,
-};
-
-const ObsGridItem = ( {
-  observation,
-  isProject = false,
-  width = "w-full",
-  height = "h-[172px]"
-}: Props ): Node => {
-  const photo = observation?.observationPhotos?.[0]?.photo;
-  const showUploadButton = !isProject && observation.needsSync?.( );
-
-  const imageSource = isProject
-    ? Observation.projectUri( observation )
-    : { uri: Photo.displayLocalOrRemoteMediumPhoto( photo ) };
-
-  return (
-    <View
-      className={classNames( "rounded-[17px] overflow-hidden", height, width )}
-      testID={`ObsList.gridItem.${observation.uuid}`}
-    >
-      <ObsPreviewImage
-        source={imageSource}
-        height="h-[172px]"
-        width="w-full"
-        obsPhotosCount={observation?.observationPhotos?.length ?? 0}
-        hasSound={!!observation?.observationSounds?.length}
-        isMultiplePhotosTop
-      >
-        <View className="absolute bottom-0 flex p-2 w-full">
-          {showUploadButton ? (
-            <UploadButton observation={observation} />
-          ) : (
-            <ObsStatus
-              observation={observation}
-              layout="horizontal"
-              white
-              classNameMargin="mb-1"
-            />
-          )}
-          <DisplayTaxonName
-            taxon={observation?.taxon}
-            scientificNameFirst={
-              observation?.user?.prefers_scientific_name_first
-            }
-            layout="vertical"
-            color="text-white"
-          />
-        </View>
-      </ObsPreviewImage>
-    </View>
-  );
-};
-
-export default ObsGridItem;
diff --git a/src/components/Observations/ObsList.js b/src/components/Observations/ObsList.js
deleted file mode 100644
index 8499ab9a2..000000000
--- a/src/components/Observations/ObsList.js
+++ /dev/null
@@ -1,50 +0,0 @@
-// @flow
-
-import { fetchObservationUpdates } from "api/observations";
-import ObservationViews from "components/Observations/ObservationViews";
-import { RealmContext } from "providers/contexts";
-import type { Node } from "react";
-import React, { useEffect } from "react";
-import useAuthenticatedQuery from "sharedHooks/useAuthenticatedQuery";
-import useCurrentUser from "sharedHooks/useCurrentUser";
-
-const { useRealm } = RealmContext;
-
-const ObsList = ( ): Node => {
-  const realm = useRealm( );
-  const currentUser = useCurrentUser( );
-
-  const updateParams = {
-    // TODO: viewed = false is a param in the API v2 docs
-    // but it's currently not returning any results
-    // so filtering in useEffect instead
-    observations_by: "owner",
-    per_page: 100,
-    fields: "viewed,resource_uuid"
-  };
-
-  // TODO: does this make more sense to put in an App.js component?
-  const {
-    data: updates
-  } = useAuthenticatedQuery(
-    ["fetchObservationUpdates"],
-    optsWithAuth => fetchObservationUpdates( updateParams, optsWithAuth ),
-    { enabled: !!currentUser }
-  );
-
-  useEffect( ( ) => {
-    if ( !updates ) { return; }
-    const unviewed = updates.filter( result => result.viewed === false ).map( r => r );
-    unviewed.forEach( update => {
-      const existingObs = realm?.objectForPrimaryKey( "Observation", update.resource_uuid );
-      if ( !existingObs ) { return; }
-      realm?.write( ( ) => {
-        existingObs.viewed = update.viewed;
-      } );
-    } );
-  }, [realm, updates] );
-
-  return <ObservationViews />;
-};
-
-export default ObsList;
diff --git a/src/components/Observations/ObsListBottomSheet.js b/src/components/Observations/ObsListBottomSheet.js
deleted file mode 100644
index da56fc665..000000000
--- a/src/components/Observations/ObsListBottomSheet.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// @flow
-
-import BottomSheet from "components/SharedComponents/BottomSheet";
-import type { Node } from "react";
-import React from "react";
-import useCurrentUser from "sharedHooks/useCurrentUser";
-
-import LoginPrompt from "./LoginPrompt";
-
-type Props = {
-  hasScrolled: boolean
-}
-
-const ObsListBottomSheet = ( { hasScrolled }: Props ): Node => {
-  const currentUser = useCurrentUser( );
-
-  if ( !currentUser ) {
-    return (
-      <BottomSheet hide={hasScrolled}>
-        <LoginPrompt />
-      </BottomSheet>
-    );
-  }
-
-  return null;
-};
-
-export default ObsListBottomSheet;
diff --git a/src/components/Observations/ObsListHeader.js b/src/components/Observations/ObsListHeader.js
deleted file mode 100644
index 0abadbc58..000000000
--- a/src/components/Observations/ObsListHeader.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// @flow
-import type { Node } from "react";
-import React from "react";
-import useCurrentUser from "sharedHooks/useCurrentUser";
-
-import LoggedOutCard from "./LoggedOutCard";
-import ObsListToolbar from "./ObsListToolbar";
-import UserCard from "./UserCard";
-
-type Props = {
-  setLayout: Function;
-  layout: string
-}
-
-const ObsListHeader = ( {
-  setLayout,
-  layout
-}: Props ): Node => {
-  const currentUser = useCurrentUser( );
-
-  return (
-    // $FlowIgnore
-    <>
-      {currentUser
-        ? <UserCard />
-        : <LoggedOutCard />}
-      <ObsListToolbar setLayout={setLayout} layout={layout} />
-    </>
-  );
-};
-
-export default ObsListHeader;
diff --git a/src/components/Observations/ObsListToolbar.js b/src/components/Observations/ObsListToolbar.js
deleted file mode 100644
index 3811e27f2..000000000
--- a/src/components/Observations/ObsListToolbar.js
+++ /dev/null
@@ -1,178 +0,0 @@
-// @flow
-
-import { useNavigation } from "@react-navigation/native";
-import { Pressable, Text, View } from "components/styledComponents";
-import { t } from "i18next";
-import { ObsEditContext } from "providers/contexts";
-import type { Node } from "react";
-import React, { useContext } from "react";
-import {
-  Animated, Dimensions, Easing, PixelRatio
-} from "react-native";
-import { IconButton, ProgressBar } from "react-native-paper";
-import IconMaterial from "react-native-vector-icons/MaterialIcons";
-import useCurrentUser from "sharedHooks/useCurrentUser";
-import useLocalObservations from "sharedHooks/useLocalObservations";
-import useNumUnuploadedObservations from "sharedHooks/useNumUnuploadedObservations";
-import useUploadObservations from "sharedHooks/useUploadObservations";
-import colors from "styles/tailwindColors";
-
-type Props = {
-  setLayout: Function,
-  layout: string,
-};
-
-const Toolbar = ( { setLayout, layout }: Props ): Node => {
-  const currentUser = useCurrentUser( );
-  const obsEditContext = useContext( ObsEditContext );
-  const { allObsToUpload } = useLocalObservations( );
-  const numUnuploadedObs = useNumUnuploadedObservations( );
-  const navigation = useNavigation( );
-  const {
-    stopUpload,
-    uploadInProgress,
-    startUpload,
-    progress,
-    error: uploadError,
-    currentUploadIndex,
-    totalUploadCount
-  } = useUploadObservations( allObsToUpload );
-
-  const screenWidth = Dimensions.get( "window" ).width * PixelRatio.get();
-  const spinValue = new Animated.Value( 1 );
-
-  Animated.timing( spinValue, {
-    toValue: 0,
-    duration: 3000,
-    easing: Easing.linear,
-    useNativeDriver: true
-  } ).start( );
-
-  const spin = spinValue.interpolate( {
-    inputRange: [0, 1],
-    outputRange: ["0deg", "360deg"]
-  } );
-
-  const loading = obsEditContext?.loading;
-  const syncObservations = obsEditContext?.syncObservations;
-
-  const getSyncClick = ( ) => {
-    if ( numUnuploadedObs > 0 ) {
-      return startUpload;
-    }
-
-    return syncObservations;
-  };
-
-  const getStatusText = ( ) => {
-    if ( numUnuploadedObs <= 0 ) {
-      return null;
-    }
-
-    if ( !uploadInProgress ) {
-      return t( "Upload-x-observations", { count: numUnuploadedObs } );
-    }
-
-    const translationParams = {
-      total: totalUploadCount,
-      uploadedCount: currentUploadIndex + 1
-    };
-
-    // iPhone 4 pixel width
-    if ( screenWidth <= 640 ) {
-      return t( "Uploading-x-of-y", translationParams );
-    }
-
-    return t( "Uploading-x-of-y-observations", translationParams );
-  };
-
-  const getSyncIconColor = ( ) => {
-    if ( uploadInProgress || numUnuploadedObs > 0 ) {
-      return colors.inatGreen;
-    }
-    return colors.darkGray;
-  };
-
-  const statusText = getStatusText( );
-  /* eslint-disable react-native/no-inline-styles */
-  return (
-    <View className="bg-white border-b border-lightGray">
-      <View className="pt-5 flex flex-row items-center px-[15px]">
-        {currentUser && (
-          <IconButton
-            icon="compass-rose-outline"
-            onPress={( ) => navigation.navigate( "Explore" )}
-            accessibilityLabel={t( "Explore" )}
-            accessibilityHint={t( "Navigates-to-explore" )}
-            accessibilityRole="button"
-            disabled={false}
-            size={30}
-          />
-        )}
-        <Pressable
-          onPress={getSyncClick( )}
-          accessibilityRole="button"
-          disabled={loading || uploadInProgress}
-          accessibilityState={{ disabled: loading || uploadInProgress }}
-        >
-          <Animated.View
-            style={uploadInProgress ? { transform: [{ rotate: spin }] } : {}}
-          >
-            <IconMaterial name="sync" size={26} color={getSyncIconColor( )} />
-          </Animated.View>
-        </Pressable>
-
-        {statusText && (
-          <View>
-            <Text className="ml-1">{statusText}</Text>
-            {uploadError && (
-              <Text
-                className="ml-1 mt-[3px]"
-                style={{ color: colors.warningRed }}
-              >
-                {uploadError}
-              </Text>
-            )}
-          </View>
-        )}
-
-        <View className="ml-auto flex flex-row items-center">
-          {uploadInProgress && (
-            <Pressable onPress={stopUpload} accessibilityRole="button">
-              <IconMaterial name="close" size={20} color={colors.darkGray} />
-            </Pressable>
-          )}
-
-          <Pressable
-            className="ml-2"
-            testID={
-              layout === "list"
-                ? "ObsList.toggleGridView"
-                : "ObsList.toggleListView"
-            }
-            onPress={( ) => setLayout( currentView => {
-              if ( currentView === "list" ) {
-                return "grid";
-              }
-              return "list";
-            } )}
-            accessibilityRole="button"
-          >
-            <IconMaterial
-              name={layout === "grid" ? "format-list-bulleted" : "grid-view"}
-              size={30}
-            />
-          </Pressable>
-        </View>
-      </View>
-      <ProgressBar
-        progress={progress}
-        color={colors.inatGreen}
-        style={{ backgroundColor: "transparent" }}
-        visible={uploadInProgress && progress !== 0}
-      />
-    </View>
-  );
-};
-
-export default Toolbar;
diff --git a/src/components/Observations/ObservationViews.js b/src/components/Observations/ObservationViews.js
deleted file mode 100644
index d4f815afa..000000000
--- a/src/components/Observations/ObservationViews.js
+++ /dev/null
@@ -1,151 +0,0 @@
-// @flow
-
-import { useNavigation } from "@react-navigation/native";
-import ViewWrapper from "components/SharedComponents/ViewWrapper";
-import { View } from "components/styledComponents";
-import type { Node } from "react";
-import React, { useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Animated, Dimensions, Pressable } from "react-native";
-import useCurrentUser from "sharedHooks/useCurrentUser";
-import useLocalObservations from "sharedHooks/useLocalObservations";
-
-import EmptyList from "./EmptyList";
-import useInfiniteScroll from "./hooks/useInfiniteScroll";
-import InfiniteScrollFooter from "./InfiniteScrollFooter";
-import ObsGridItem from "./ObsGridItem";
-import ObsListBottomSheet from "./ObsListBottomSheet";
-import ObsListHeader from "./ObsListHeader";
-import ObsListItem from "./ObsListItem";
-
-const { diffClamp } = Animated;
-
-const { height } = Dimensions.get( "screen" );
-const HEADER_HEIGHT = 101;
-
-const ObservationViews = (): Node => {
-  const localObservations = useLocalObservations();
-  const [layout, setLayout] = useState( "list" );
-  const navigation = useNavigation();
-  const currentUser = useCurrentUser();
-  const { observationList } = localObservations;
-  const [hasScrolled, setHasScrolled] = useState( false );
-  const [idBelow, setIdBelow] = useState( null );
-  const isLoading = useInfiniteScroll( idBelow );
-  const { t } = useTranslation();
-  // basing collapsible sticky header code off the example in this article
-  // https://medium.com/swlh/making-a-collapsible-sticky-header-animations-with-react-native-6ad7763875c3
-  const scrollY = useRef( new Animated.Value( 0 ) );
-
-  const handleScroll = Animated.event(
-    [
-      {
-        nativeEvent: {
-          contentOffset: { y: scrollY.current }
-        }
-      }
-    ],
-    {
-      listener: ( { nativeEvent } ) => {
-        const { y } = nativeEvent.contentOffset;
-
-        if ( y <= 0 ) {
-          setHasScrolled( false );
-        } else {
-          setHasScrolled( true );
-        }
-      },
-      useNativeDriver: true
-    }
-  );
-
-  const navToObsDetails = async observation => {
-    const { uuid } = observation;
-    if ( !observation.wasSynced() ) {
-      navigation.navigate( "ObsEdit", { uuid } );
-    } else {
-      navigation.navigate( "ObsDetails", { uuid } );
-    }
-  };
-
-  const renderEmptyState = () => {
-    if ( currentUser === false || ( !isLoading && observationList.length === 0 ) ) {
-      return <EmptyList />;
-    }
-    return <View />;
-  };
-
-  const renderItem = ( { item } ) => (
-    <Pressable
-      onPress={() => navToObsDetails( item )}
-      accessibilityRole="link"
-      accessibilityHint={t( "Navigate-to-observation-details" )}
-      accessibilityLabel={t( "Observation-Name", {
-        scientificName: item.name
-      } )}
-    >
-      {layout === "grid" ? (
-        <ObsGridItem observation={item} />
-      ) : (
-        <ObsListItem observation={item} />
-      )}
-    </Pressable>
-  );
-
-  const renderFooter = () => {
-    if ( currentUser === false ) {
-      return <View />;
-    }
-    return <InfiniteScrollFooter view={layout} isLoading={isLoading} />;
-  };
-
-  const renderItemSeparator = () => (
-    <View className="border border-lightGray" />
-  );
-
-  const onEndReached = () => {
-    if ( !isLoading ) {
-      setIdBelow( observationList[observationList.length - 1].id );
-    }
-  };
-
-  const scrollYClamped = diffClamp( scrollY.current, 0, HEADER_HEIGHT );
-
-  const translateY = scrollYClamped.interpolate( {
-    inputRange: [0, HEADER_HEIGHT],
-    // $FlowIgnore
-    outputRange: [0, -HEADER_HEIGHT]
-  } );
-
-  return (
-    <ViewWrapper>
-      <View className="overflow-hidden">
-        <Animated.View style={[{ transform: [{ translateY }] }]}>
-          <Animated.FlatList
-            data={observationList}
-            key={layout === "grid" ? 1 : 0}
-            style={{ height }}
-            testID="ObservationViews.myObservations"
-            numColumns={layout === "grid" ? 2 : 1}
-            renderItem={renderItem}
-            ListEmptyComponent={renderEmptyState}
-            ListHeaderComponent={
-              <ObsListHeader setLayout={setLayout} layout={layout} />
-            }
-            ListFooterComponent={renderFooter}
-            ItemSeparatorComponent={layout !== "grid" && renderItemSeparator}
-            stickyHeaderIndices={[0]}
-            bounces={false}
-            initialNumToRender={10}
-            onScroll={handleScroll}
-            onEndReached={onEndReached}
-            onEndReachedThreshold={0.1}
-          />
-          <ObsListBottomSheet hasScrolled={hasScrolled} />
-        </Animated.View>
-      </View>
-    </ViewWrapper>
-  );
-};
-
-export default ObservationViews;
diff --git a/src/components/Observations/UploadButton.js b/src/components/Observations/UploadButton.js
deleted file mode 100644
index 2642fa293..000000000
--- a/src/components/Observations/UploadButton.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// @flow
-
-import { ObsEditContext } from "providers/contexts";
-import type { Node } from "react";
-import React, { useContext } from "react";
-import { IconButton } from "react-native-paper";
-import colors from "styles/tailwindColors";
-
-type Props = {
-  observation: Object
-}
-
-const UploadButton = ( { observation }: Props ): Node => {
-  const obsEditContext = useContext( ObsEditContext );
-  const uploadObservation = obsEditContext?.uploadObservation;
-  const setLoading = obsEditContext?.setLoading;
-
-  return (
-    <IconButton
-      size={40}
-      icon="arrow-up"
-      iconColor={colors.lightGray}
-      onPress={async ( ) => {
-        setLoading( true );
-        await uploadObservation( observation );
-        setLoading( false );
-      }}
-    />
-  );
-};
-
-export default UploadButton;
diff --git a/src/components/Observations/UserCard.js b/src/components/Observations/UserCard.js
deleted file mode 100644
index b9d0ad3f9..000000000
--- a/src/components/Observations/UserCard.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// @flow
-
-import { Body1 } from "components/SharedComponents";
-import { View } from "components/styledComponents";
-import type { Node } from "react";
-import React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import User from "realmModels/User";
-import useCurrentUser from "sharedHooks/useCurrentUser";
-
-const UserCard = ( ): Node => {
-  const currentUser = useCurrentUser( );
-  // useTranslation fixes unit test.
-  useTranslation( );
-
-  return (
-    <View className="flex-row px-5 items-center bg-white h-24 ml-3">
-      <Trans
-        i18nKey="Welcome-user"
-        parent={View}
-        values={{ userHandle: User.userHandle( currentUser ) }}
-        components={[
-          <Body1 className="mt-1 text-3xl" />,
-          <Body1 className="mb-1 text-3xl font-semibold" />
-        ]}
-      />
-    </View>
-  );
-};
-
-export default UserCard;
diff --git a/src/components/PhotoImporter/GroupPhotoImage.js b/src/components/PhotoImporter/GroupPhotoImage.js
index 443d62405..f3c668cea 100644
--- a/src/components/PhotoImporter/GroupPhotoImage.js
+++ b/src/components/PhotoImporter/GroupPhotoImage.js
@@ -1,6 +1,6 @@
 // @flow
 
-import ObsPreviewImage from "components/Observations/ObsPreviewImage";
+import ObsPreviewImage from "components/MyObservations/ObsImagePreview";
 import { Pressable } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
diff --git a/src/components/Projects/ProjectObsGridItem.js b/src/components/Projects/ProjectObsGridItem.js
new file mode 100644
index 000000000..efc0162e5
--- /dev/null
+++ b/src/components/Projects/ProjectObsGridItem.js
@@ -0,0 +1,55 @@
+// @flow
+
+import DisplayTaxonName from "components/DisplayTaxonName";
+import ObsImagePreview from "components/MyObservations/ObsImagePreview";
+import ObsStatus from "components/MyObservations/ObsStatus";
+import { View } from "components/styledComponents";
+import type { Node } from "react";
+import React from "react";
+import Observation from "realmModels/Observation";
+
+type Props = {
+  observation: Object,
+  width?: string,
+  height?: string,
+  style?: Object
+};
+
+const ProjectObsGridItem = ( {
+  observation,
+  width = "w-full",
+  height,
+  style
+}: Props ): Node => (
+  <ObsImagePreview
+    source={Observation.projectUri( observation )}
+    width={width}
+    height={height}
+    style={style}
+    obsPhotosCount={observation?.observationPhotos?.length ?? 0}
+    hasSound={!!observation?.observationSounds?.length}
+    isMultiplePhotosTop
+    testID={`ProjectObservations.gridItem.${observation.uuid}`}
+  >
+    <View className="absolute bottom-0 flex p-2 w-full">
+      {!observation.needsSync?.( ) && (
+        <ObsStatus
+          observation={observation}
+          layout="horizontal"
+          white
+          classNameMargin="mb-1"
+        />
+      )}
+      <DisplayTaxonName
+        taxon={observation?.taxon}
+        scientificNameFirst={
+          observation?.user?.prefers_scientific_name_first
+        }
+        layout="vertical"
+        color="text-white"
+      />
+    </View>
+  </ObsImagePreview>
+);
+
+export default ProjectObsGridItem;
diff --git a/src/components/Projects/ProjectObservations.js b/src/components/Projects/ProjectObservations.js
index 8474c73ea..9350bb2ae 100644
--- a/src/components/Projects/ProjectObservations.js
+++ b/src/components/Projects/ProjectObservations.js
@@ -2,7 +2,7 @@
 
 import { useNavigation } from "@react-navigation/native";
 import { searchObservations } from "api/observations";
-import ObsGridItem from "components/Observations/ObsGridItem";
+import ProjectObsGridItem from "components/Projects/ProjectObsGridItem";
 import { Pressable } from "components/styledComponents";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -37,9 +37,8 @@ const ProjectObservations = ( { id }: Props ): React.Node => {
         scientificName: item.name
       } )}
     >
-      <ObsGridItem
+      <ProjectObsGridItem
         observation={item}
-        isProject
       />
     </Pressable>
   );
diff --git a/src/components/SharedComponents/BottomSheet.js b/src/components/SharedComponents/BottomSheet.js
index 9a78c7479..b83af6564 100644
--- a/src/components/SharedComponents/BottomSheet.js
+++ b/src/components/SharedComponents/BottomSheet.js
@@ -12,7 +12,8 @@ type Props = {
   hide?: boolean,
   snapPoints?: ( string|number )[],
   backdropComponent?: Function,
-  onChange?: Function
+  onChange?: Function,
+  handleClose?: Function
 }
 
 const DEFAULT_SNAP_POINTS = ["45%"];
@@ -22,16 +23,20 @@ const StandardBottomSheet = ( {
   hide,
   snapPoints = DEFAULT_SNAP_POINTS,
   backdropComponent = null,
-  onChange = null
+  onChange = null,
+  handleClose
 }: Props ): Node => {
   const sheetRef = useRef( null );
 
   // eslint-disable-next-line
   const noHandle = ( ) => <></>;
 
-  const handleClosePress = useCallback( () => {
-    sheetRef.current?.close();
-  }, [] );
+  const handleClosePress = useCallback( ( ) => {
+    if ( handleClose ) {
+      handleClose( );
+    }
+    sheetRef.current?.close( );
+  }, [handleClose] );
 
   const handleSnapPress = useCallback( ( ) => {
     sheetRef.current?.snapToIndex( 0 );
diff --git a/src/components/SharedComponents/Buttons/Button.js b/src/components/SharedComponents/Buttons/Button.js
index 692d72d41..f4c28ad0c 100644
--- a/src/components/SharedComponents/Buttons/Button.js
+++ b/src/components/SharedComponents/Buttons/Button.js
@@ -116,7 +116,7 @@ const Button = ( {
           } )}
         />
       )}
-      <Heading4 className={textClass}>{text}</Heading4>
+      <Heading4 className={textClass} testID={`${testID || "RNButton"}.text`}>{text}</Heading4>
     </Pressable>
   );
 };
diff --git a/src/components/SharedComponents/INatIcon/glyphmap.json b/src/components/SharedComponents/INatIcon/glyphmap.json
index 232e5e4d8..00c36edde 100644
--- a/src/components/SharedComponents/INatIcon/glyphmap.json
+++ b/src/components/SharedComponents/INatIcon/glyphmap.json
@@ -39,42 +39,43 @@
     "help-circle-outline": 61734,
     "help": 61735,
     "id-agree": 61736,
-    "info-circle-outline": 61737,
-    "kebab-menu": 61738,
-    "label-outline": 61739,
-    "label": 61740,
-    "layers": 61741,
-    "leaf": 61742,
-    "list-square": 61743,
-    "location-crosshairs": 61744,
-    "magnifying-glass": 61745,
-    "map-marker-outline": 61746,
-    "microphone-circle": 61747,
-    "microphone": 61748,
-    "noevidence": 61749,
-    "notifications-bell": 61750,
-    "pause-circle": 61751,
-    "pencil-outline": 61752,
-    "pencil": 61753,
-    "person": 61754,
-    "photos-outline": 61755,
-    "photos": 61756,
-    "play-circle": 61757,
-    "play": 61758,
-    "plus-bold": 61759,
-    "plus": 61760,
-    "pot-outline": 61761,
-    "rotate-exclamation": 61762,
-    "rotate-right": 61763,
-    "rotate": 61764,
-    "sliders": 61765,
-    "sound-bold-outline": 61766,
-    "sound-outline": 61767,
-    "sounds": 61768,
-    "sparkly-label": 61769,
-    "star-bold-outline": 61770,
-    "star": 61771,
-    "trash-outline": 61772,
-    "trash": 61773,
-    "triangle-exclamation": 61774
+    "inaturalist": 61737,
+    "info-circle-outline": 61738,
+    "kebab-menu": 61739,
+    "label-outline": 61740,
+    "label": 61741,
+    "layers": 61742,
+    "leaf": 61743,
+    "list-square": 61744,
+    "location-crosshairs": 61745,
+    "magnifying-glass": 61746,
+    "map-marker-outline": 61747,
+    "microphone-circle": 61748,
+    "microphone": 61749,
+    "noevidence": 61750,
+    "notifications-bell": 61751,
+    "pause-circle": 61752,
+    "pencil-outline": 61753,
+    "pencil": 61754,
+    "person": 61755,
+    "photos-outline": 61756,
+    "photos": 61757,
+    "play-circle": 61758,
+    "play": 61759,
+    "plus-bold": 61760,
+    "plus": 61761,
+    "pot-outline": 61762,
+    "rotate-exclamation": 61763,
+    "rotate-right": 61764,
+    "rotate": 61765,
+    "sliders": 61766,
+    "sound-bold-outline": 61767,
+    "sound-outline": 61768,
+    "sounds": 61769,
+    "sparkly-label": 61770,
+    "star-bold-outline": 61771,
+    "star": 61772,
+    "trash-outline": 61773,
+    "trash": 61774,
+    "triangle-exclamation": 61775
 }
\ No newline at end of file
diff --git a/src/components/SharedComponents/Modal.js b/src/components/SharedComponents/Modal.js
index 4f727d91c..57cfb660a 100644
--- a/src/components/SharedComponents/Modal.js
+++ b/src/components/SharedComponents/Modal.js
@@ -8,15 +8,19 @@ type Props = {
   showModal: boolean,
   closeModal: Function,
   modal: any,
-  style?: Object,
   backdropOpacity?: number
 }
 
+const modalStyle = {
+  flex: 1,
+  justifyContent: "flex-end"
+};
+
 // accessibility might not work on Android because of backdrop
 // https://github.com/react-native-modal/react-native-modal/issues/525
 
 const Modal = ( {
-  showModal, closeModal, modal, style, backdropOpacity
+  showModal, closeModal, modal, backdropOpacity
 }: Props ): React.Node => (
   <RNModal
     isVisible={showModal}
@@ -25,7 +29,7 @@ const Modal = ( {
     swipeDirection="down"
     useNativeDriverForBackdrop
     useNativeDriver
-    style={style}
+    style={modalStyle}
     backdropOpacity={backdropOpacity}
   >
     {modal}
diff --git a/src/components/SharedComponents/UploadStatus/UploadStatus.js b/src/components/SharedComponents/UploadStatus/UploadStatus.js
index 08c2df949..2c9d849c8 100644
--- a/src/components/SharedComponents/UploadStatus/UploadStatus.js
+++ b/src/components/SharedComponents/UploadStatus/UploadStatus.js
@@ -7,15 +7,20 @@ import type { Node } from "react";
 import React from "react";
 import { Animated, Easing } from "react-native";
 import CircularProgressBase from "react-native-circular-progress-indicator";
-import { useTheme } from "react-native-paper";
+import { IconButton, useTheme } from "react-native-paper";
 
 type Props = {
   color?: string,
   completeColor?: string,
-  progress: number
+  progress: number,
+  startSingleUpload: Function,
+  children: any
 }
 
-const UploadStatus = ( { color, completeColor, progress }: Props ): Node => {
+const UploadStatus = ( {
+  color, completeColor, progress, startSingleUpload,
+  children
+}: Props ): Node => {
   const theme = useTheme();
   const defaultColor = theme.colors.primary;
   const defaultCompleteColor = theme.colors.secondary;
@@ -32,18 +37,18 @@ const UploadStatus = ( { color, completeColor, progress }: Props ): Node => {
     rotateAnimation.setValue( 0 );
   } );
 
-  const interpolateRotating = rotateAnimation.interpolate( {
-    inputRange: [0, 1],
-    outputRange: ["0deg", "360deg"]
-  } );
+  // const interpolateRotating = rotateAnimation.interpolate( {
+  //   inputRange: [0, 1],
+  //   outputRange: ["0deg", "360deg"]
+  // } );
 
-  const rotate = {
-    transform: [
-      {
-        rotate: interpolateRotating
-      }
-    ]
-  };
+  // const rotate = {
+  //   transform: [
+  //     {
+  //       rotate: interpolateRotating
+  //     }
+  //   ]
+  // };
 
   const translationParams = {
     uploadProgress: progress * 100
@@ -59,15 +64,11 @@ const UploadStatus = ( { color, completeColor, progress }: Props ): Node => {
     return t( "Upload-Complete" );
   };
 
-  return (
-    <View
-      accessible
-      accessibilityLabel={accessibilityLabelText()}
-      className="relative items-center justify-center w-[49px] h-[67px]"
-    >
-      {progress < 0.05 ? (
+  const displayIcon = ( ) => {
+    if ( progress < 0.05 ) {
+      return (
         <>
-          <Animated.View style={rotate}>
+          {/* <Animated.View style={rotate}>
             <INatIcon
               name="upload-saved"
               color={color || defaultColor}
@@ -80,43 +81,59 @@ const UploadStatus = ( { color, completeColor, progress }: Props ): Node => {
               color={color || defaultColor}
               size={15}
             />
-          </View>
+          </View> */}
+          {/* <Animated.View style={rotate}>
+            <INatIcon name="dotted-outline" color={color || defaultColor} size={33} />
+          </Animated.View> */}
+          <IconButton
+            icon="upload-saved"
+            iconColor={color || defaultColor}
+            size={33}
+            onPress={startSingleUpload}
+            disabled={false}
+            accessibilityState={{ disabled: false }}
+          />
         </>
-      ) : (
+      );
+    }
+    if ( progress < 1 ) {
+      return (
         <>
-          {progress < 1 ? (
-            <View className="absolute">
-              <INatIcon
-                name="upload-arrow"
-                color={color || defaultColor}
-                size={15}
-              />
-            </View>
-          ) : (
-            <View className="absolute">
-              <INatIcon
-                name="upload-complete"
-                color={completeColor || defaultCompleteColor}
-                size={15}
-              />
-            </View>
-          )}
+          <View className="absolute">
+            <INatIcon
+              name="upload-arrow"
+              color={color || defaultColor}
+              size={15}
+            />
+          </View>
           <CircularProgressBase
             testID="UploadStatus.CircularProgress"
             value={progress}
             radius={16.5}
-            activeStrokeColor={
-              progress < 1
-                ? color || defaultColor
-                : completeColor || defaultCompleteColor
-            }
+            activeStrokeColor={( progress < 1 )
+              ? ( color || defaultColor ) : ( completeColor || defaultCompleteColor )}
             showProgressValue={false}
             maxValue={1}
             inActiveStrokeOpacity={0}
             activeStrokeWidth={2}
           />
         </>
-      )}
+      );
+    }
+    return (
+      <View className="absolute">
+        {children}
+      </View>
+    );
+  };
+
+  return (
+    <View
+      accessible
+      accessibilityLabel={accessibilityLabelText()}
+      className="items-center justify-center w-[49px] h-[67px]"
+    >
+      {displayIcon( )}
     </View>
   );
 };
diff --git a/src/components/UiLibrary.js b/src/components/UiLibrary.js
index 9286f6e60..e4fa3fb84 100644
--- a/src/components/UiLibrary.js
+++ b/src/components/UiLibrary.js
@@ -1,5 +1,4 @@
-// @flow
-import ObsStatus from "components/Observations/ObsStatus";
+import ObsStatus from "components/MyObservations/ObsStatus";
 import {
   ActivityCount,
   Body1,
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index 02bf3dadd..a4575e670 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -91,7 +91,7 @@ Couldnt-create-identification = Couldn't create identification
 
 Create-an-iNaturalist-account-to-save-your-observations = Create an iNaturalist account to save your observations and contribute them to science.
 
-CREATE-AN-OBSERVATION = CREATE AN OBSERVATION
+CREATE-YOUR-FIRST-OBSERVATION = CREATE YOUR FIRST OBSERVATION
 
 Date = Date
 
@@ -146,6 +146,8 @@ Evidence = Evidence
 
 Explore = Explore
 
+EXPLORE-OBSERVATIONS = EXPLORE OBSERVATIONS
+
 External-Applications = External Applications
 
 # Header for featured projects
@@ -213,7 +215,7 @@ iNaturalist-Applications = iNaturalist Applications
 
 iNaturalist-Network-Affiliation = iNaturalist Network Affiliation
 
-iNaturalist-is-a-community-of-naturalists = iNaturalist is a community of naturalists.
+iNaturalist-is-a-community-of-naturalists = iNaturalist is a community of naturalists that works together to create and identify wild biodiversity observations.
 
 Insects = Insects
 
@@ -243,7 +245,9 @@ Log-in = Log in
 
 LOG-IN-TO-INATURALIST = LOG IN TO INATURALIST
 
-Log-in-to-iNaturalist = Log in to iNaturalist
+Log-in-to-contribute-and-sync = Log in to contribute & sync
+
+Log-in-to-contribute-your-observations = Log in to contribute your observations to science!
 
 Logged-in-as = Logged in as: { $username }
 
@@ -341,6 +345,8 @@ Observation-Attribution = Observation © {$attribution} · {$licenseCode}
 
 Observations = Observations
 
+Observations-created-on-iNaturalist = Observations created on iNaturalist are used by scientists around the world.
+
 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.
@@ -365,6 +371,8 @@ Plants = Plants
 # Help text for playing back a sound recording
 Playing-Sound = Playing Sound
 
+PLEASE-LOG-IN = PLEASE LOG IN
+
 # Help text for beginning a sound recording
 Press-Record-to-Start = Press Record to Start
 
@@ -570,6 +578,8 @@ This-will-be-your-default-place-for-all-searches-in-Explore-and-Identify = This
 
 Threatened = Threatened
 
+To-sync-your-observations-to-iNaturalist = To sync your observations to iNaturalist, please log in.
+
 Trust-with-hidden-coordinates = Trust with hidden coordinates
 
 Trusted = Trusted
@@ -629,6 +639,8 @@ Username-or-Email = Username or Email
 
 Visually-search-iNaturalist-data = Visually search iNaturalist’s wealth of data. Search by a taxon in a location
 
+Welcome-to-iNaturalist = Welcome to iNaturalist!
+
 Whenever-you-get-internet-connection-you-can-upload = Whenever you get internet connection, you can upload your observations to iNaturalist.
 
 Which-traditional-projects-can-add-your-observations = Which traditional projects can add your observations?
@@ -644,6 +656,16 @@ X-Observations = {$count ->
     *[other] {$count} Observations
 }
 
+X-observations = {$count ->
+    [one] 1 observation
+    *[other] {$count} observations
+}
+
+X-observations-uploaded = {$count ->
+    [one] 1 observation uploaded
+    *[other] {$count} observations uploaded
+}
+
 # Displays number of photos attached to an observation in the Media Viewer
 X-Photos = {$photoCount ->
     [one] 1 Photo
@@ -659,11 +681,6 @@ X-PHOTOS-X-OBSERVATIONS = {$photoCount ->
     *[other] {$observationCount} OBSERVATIONS
 }
 
-X-unuploaded-observations = {$observationCount ->
-    [one] 1 unuploaded observation
-    *[other] {$observationCount} unuploaded observations
-}
-
 Yes = Yes
 
 Yes-delete-observation = Yes, delete observation
@@ -675,6 +692,8 @@ Take-a-photo-with-your-camera = Take a photo with your camera
 Upload-a-photo-from-your-gallery = Upload a photo from your gallery
 Record-a-sound = Record a sound
 
+You-can-also-explore-existing-observations = You can also explore existing observations on iNaturalist to discover what’s around you.
+
 
 # Message shown when a permission is required to use a part of the app
 # (e.g. permission to access the camera) but the user denied the permission.
@@ -836,7 +855,15 @@ x-identifications = {$count ->
 date-format-short = M/d/yy
 datetime-format-short = M/d/yy h:mm a
 
+# Onboarding text on MyObservations
+# 0-10 observations
+As-you-upload-more-observations = As you upload more observations, others in our community may be able to help you identify them!
+# 11-50 observations
+Observations-you-upload-to-iNaturalist = Observations you upload to iNaturalist can be used by scientists and researchers worldwide.
+# 51-100 observations
+You-can-search-observations-of-any-plant-or-animal = You can search observations of any plant or animal anywhere in the world with Explore!
+
 DISCARD-PHOTOS = DISCARD PHOTOS?
 By-exiting-your-photos-will-not-be-saved = By exiting, your photos will not be saved.
 DISCARD = DISCARD
-CANCEL = CANCEL
\ No newline at end of file
+CANCEL = CANCEL
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index 8bdeec186..34288e6d4 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -67,7 +67,7 @@
   "Couldnt-create-comment": "Couldn't create comment",
   "Couldnt-create-identification": "Couldn't create identification",
   "Create-an-iNaturalist-account-to-save-your-observations": "Create an iNaturalist account to save your observations and contribute them to science.",
-  "CREATE-AN-OBSERVATION": "CREATE AN OBSERVATION",
+  "CREATE-YOUR-FIRST-OBSERVATION": "CREATE YOUR FIRST OBSERVATION",
   "Date": "Date",
   "Date-added-newest-to-oldest": "Date added - newest to oldest",
   "Date-added-oldest-to-newest": "Date added - oldest to newest",
@@ -94,6 +94,7 @@
   "Error-Could-Not-Fetch-Taxon": "Error: Could Not Fetch Taxon",
   "Evidence": "Evidence",
   "Explore": "Explore",
+  "EXPLORE-OBSERVATIONS": "EXPLORE OBSERVATIONS",
   "External-Applications": "External Applications",
   "Featured": {
     "comment": "Header for featured projects",
@@ -139,7 +140,7 @@
   "iNaturalist-Activity-Notifications": "iNaturalist Activity Notifications",
   "iNaturalist-Applications": "iNaturalist Applications",
   "iNaturalist-Network-Affiliation": "iNaturalist Network Affiliation",
-  "iNaturalist-is-a-community-of-naturalists": "iNaturalist is a community of naturalists.",
+  "iNaturalist-is-a-community-of-naturalists": "iNaturalist is a community of naturalists that works together to create and identify wild biodiversity observations.",
   "Insects": "Insects",
   "Introduced": "Introduced",
   "Invalid-login": {
@@ -164,7 +165,8 @@
   "Location": "Location",
   "Log-in": "Log in",
   "LOG-IN-TO-INATURALIST": "LOG IN TO INATURALIST",
-  "Log-in-to-iNaturalist": "Log in to iNaturalist",
+  "Log-in-to-contribute-and-sync": "Log in to contribute & sync",
+  "Log-in-to-contribute-your-observations": "Log in to contribute your observations to science!",
   "Logged-in-as": "Logged in as: { $username }",
   "Login-header": {
     "comment": "Appears in the login screen",
@@ -238,6 +240,7 @@
   "Observation": "Observation",
   "Observation-Attribution": "Observation © { $attribution } · { $licenseCode }",
   "Observations": "Observations",
+  "Observations-created-on-iNaturalist": "Observations created on iNaturalist are used by scientists around the world.",
   "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.",
   "Open": "Open",
@@ -255,6 +258,7 @@
     "comment": "Help text for playing back a sound recording",
     "val": "Playing Sound"
   },
+  "PLEASE-LOG-IN": "PLEASE LOG IN",
   "Press-Record-to-Start": {
     "comment": "Help text for beginning a sound recording",
     "val": "Press Record to Start"
@@ -385,6 +389,7 @@
   "This-sets-your-language-and-date-formatting-preferences-across-iNaturalist": "This sets your language and date formatting preferences across iNaturalist based on your locale.",
   "This-will-be-your-default-place-for-all-searches-in-Explore-and-Identify": "This will be your default place for all searches in Explore and Identify.",
   "Threatened": "Threatened",
+  "To-sync-your-observations-to-iNaturalist": "To sync your observations to iNaturalist, please log in.",
   "Trust-with-hidden-coordinates": "Trust with hidden coordinates",
   "Trusted": "Trusted",
   "Unblock": "Unblock",
@@ -423,6 +428,7 @@
     "val": "Username or Email"
   },
   "Visually-search-iNaturalist-data": "Visually search iNaturalist’s wealth of data. Search by a taxon in a location",
+  "Welcome-to-iNaturalist": "Welcome to iNaturalist!",
   "Whenever-you-get-internet-connection-you-can-upload": "Whenever you get internet connection, you can upload your observations to iNaturalist.",
   "Which-traditional-projects-can-add-your-observations": "Which traditional projects can add your observations?",
   "Who-can-add-observation-fields-to-my-observations": "Who can add observation fields to my observations?",
@@ -434,6 +440,8 @@
     "comment": "Banner above Explore Map showing total number of results",
     "val": "{ $count ->\n  [one] 1 Observation\n *[other] { $count } Observations\n}"
   },
+  "X-observations": "{ $count ->\n  [one] 1 observation\n *[other] { $count } observations\n}",
+  "X-observations-uploaded": "{ $count ->\n  [one] 1 observation uploaded\n *[other] { $count } observations uploaded\n}",
   "X-Photos": {
     "comment": "Displays number of photos attached to an observation in the Media Viewer",
     "val": "{ $photoCount ->\n  [one] 1 Photo\n *[other] { $photoCount } Photos\n}"
@@ -442,7 +450,6 @@
     "comment": "Displays number of photos and observations a user has selected from the camera roll",
     "val": "{ $photoCount ->\n  [one] 1 PHOTO\n *[other] { $photoCount } PHOTOS\n}, { $observationCount ->\n  [one] 1 OBSERVATION\n *[other] { $observationCount } OBSERVATIONS\n}"
   },
-  "X-unuploaded-observations": "{ $observationCount ->\n  [one] 1 unuploaded observation\n *[other] { $observationCount } unuploaded observations\n}",
   "Yes": "Yes",
   "Yes-delete-observation": "Yes, delete observation",
   "Yes-delete-photo": "Yes, delete photo",
@@ -450,6 +457,7 @@
   "Take-a-photo-with-your-camera": "Take a photo with your camera",
   "Upload-a-photo-from-your-gallery": "Upload a photo from your gallery",
   "Record-a-sound": "Record a sound",
+  "You-can-also-explore-existing-observations": "You can also explore existing observations on iNaturalist to discover what’s around you.",
   "You-denied-iNaturalist-permission-to-do-that": {
     "comment": "Message shown when a permission is required to use a part of the app\n(e.g. permission to access the camera) but the user denied the permission.",
     "val": "You denied iNaturalist permission to do that"
@@ -610,6 +618,18 @@
     "val": "M/d/yy"
   },
   "datetime-format-short": "M/d/yy h:mm a",
+  "As-you-upload-more-observations": {
+    "comment": "Onboarding text on MyObservations\n0-10 observations",
+    "val": "As you upload more observations, others in our community may be able to help you identify them!"
+  },
+  "Observations-you-upload-to-iNaturalist": {
+    "comment": "11-50 observations",
+    "val": "Observations you upload to iNaturalist can be used by scientists and researchers worldwide."
+  },
+  "You-can-search-observations-of-any-plant-or-animal": {
+    "comment": "51-100 observations",
+    "val": "You can search observations of any plant or animal anywhere in the world with Explore!"
+  },
   "DISCARD-PHOTOS": "DISCARD PHOTOS?",
   "By-exiting-your-photos-will-not-be-saved": "By exiting, your photos will not be saved.",
   "DISCARD": "DISCARD",
diff --git a/src/i18n/l10n/es.ftl b/src/i18n/l10n/es.ftl
index d2fee84c7..db23809a9 100644
--- a/src/i18n/l10n/es.ftl
+++ b/src/i18n/l10n/es.ftl
@@ -14,4 +14,5 @@ X-Observations =
         [one] 1 Observación
        *[other] { $count } Observaciones
     }
-Welcome-user = <0>Bienvenido de nuevo,</0><1>{$userHandle}</1>
+Welcome-to-iNaturalist = ¡Bienvenido a iNaturalist!
+Welcome-user = <0>Bienvenido de nuevo,</0><1>{$userHandle}</1>
\ No newline at end of file
diff --git a/src/i18n/l10n/es.ftl.json b/src/i18n/l10n/es.ftl.json
index b368d6545..f39c617ee 100644
--- a/src/i18n/l10n/es.ftl.json
+++ b/src/i18n/l10n/es.ftl.json
@@ -15,5 +15,6 @@
   "Your-Observations": "Sus observaciones",
   "TAXONOMY-header": "TAXONOMIE es bueno",
   "X-Observations": "{ $count ->\n  [one] 1 Observación\n *[other] { $count } Observaciones\n}",
+  "Welcome-to-iNaturalist": "¡Bienvenido a iNaturalist!",
   "Welcome-user": "<0>Bienvenido de nuevo,</0><1>{ $userHandle }</1>"
 }
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index 02bf3dadd..a4575e670 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -91,7 +91,7 @@ Couldnt-create-identification = Couldn't create identification
 
 Create-an-iNaturalist-account-to-save-your-observations = Create an iNaturalist account to save your observations and contribute them to science.
 
-CREATE-AN-OBSERVATION = CREATE AN OBSERVATION
+CREATE-YOUR-FIRST-OBSERVATION = CREATE YOUR FIRST OBSERVATION
 
 Date = Date
 
@@ -146,6 +146,8 @@ Evidence = Evidence
 
 Explore = Explore
 
+EXPLORE-OBSERVATIONS = EXPLORE OBSERVATIONS
+
 External-Applications = External Applications
 
 # Header for featured projects
@@ -213,7 +215,7 @@ iNaturalist-Applications = iNaturalist Applications
 
 iNaturalist-Network-Affiliation = iNaturalist Network Affiliation
 
-iNaturalist-is-a-community-of-naturalists = iNaturalist is a community of naturalists.
+iNaturalist-is-a-community-of-naturalists = iNaturalist is a community of naturalists that works together to create and identify wild biodiversity observations.
 
 Insects = Insects
 
@@ -243,7 +245,9 @@ Log-in = Log in
 
 LOG-IN-TO-INATURALIST = LOG IN TO INATURALIST
 
-Log-in-to-iNaturalist = Log in to iNaturalist
+Log-in-to-contribute-and-sync = Log in to contribute & sync
+
+Log-in-to-contribute-your-observations = Log in to contribute your observations to science!
 
 Logged-in-as = Logged in as: { $username }
 
@@ -341,6 +345,8 @@ Observation-Attribution = Observation © {$attribution} · {$licenseCode}
 
 Observations = Observations
 
+Observations-created-on-iNaturalist = Observations created on iNaturalist are used by scientists around the world.
+
 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.
@@ -365,6 +371,8 @@ Plants = Plants
 # Help text for playing back a sound recording
 Playing-Sound = Playing Sound
 
+PLEASE-LOG-IN = PLEASE LOG IN
+
 # Help text for beginning a sound recording
 Press-Record-to-Start = Press Record to Start
 
@@ -570,6 +578,8 @@ This-will-be-your-default-place-for-all-searches-in-Explore-and-Identify = This
 
 Threatened = Threatened
 
+To-sync-your-observations-to-iNaturalist = To sync your observations to iNaturalist, please log in.
+
 Trust-with-hidden-coordinates = Trust with hidden coordinates
 
 Trusted = Trusted
@@ -629,6 +639,8 @@ Username-or-Email = Username or Email
 
 Visually-search-iNaturalist-data = Visually search iNaturalist’s wealth of data. Search by a taxon in a location
 
+Welcome-to-iNaturalist = Welcome to iNaturalist!
+
 Whenever-you-get-internet-connection-you-can-upload = Whenever you get internet connection, you can upload your observations to iNaturalist.
 
 Which-traditional-projects-can-add-your-observations = Which traditional projects can add your observations?
@@ -644,6 +656,16 @@ X-Observations = {$count ->
     *[other] {$count} Observations
 }
 
+X-observations = {$count ->
+    [one] 1 observation
+    *[other] {$count} observations
+}
+
+X-observations-uploaded = {$count ->
+    [one] 1 observation uploaded
+    *[other] {$count} observations uploaded
+}
+
 # Displays number of photos attached to an observation in the Media Viewer
 X-Photos = {$photoCount ->
     [one] 1 Photo
@@ -659,11 +681,6 @@ X-PHOTOS-X-OBSERVATIONS = {$photoCount ->
     *[other] {$observationCount} OBSERVATIONS
 }
 
-X-unuploaded-observations = {$observationCount ->
-    [one] 1 unuploaded observation
-    *[other] {$observationCount} unuploaded observations
-}
-
 Yes = Yes
 
 Yes-delete-observation = Yes, delete observation
@@ -675,6 +692,8 @@ Take-a-photo-with-your-camera = Take a photo with your camera
 Upload-a-photo-from-your-gallery = Upload a photo from your gallery
 Record-a-sound = Record a sound
 
+You-can-also-explore-existing-observations = You can also explore existing observations on iNaturalist to discover what’s around you.
+
 
 # Message shown when a permission is required to use a part of the app
 # (e.g. permission to access the camera) but the user denied the permission.
@@ -836,7 +855,15 @@ x-identifications = {$count ->
 date-format-short = M/d/yy
 datetime-format-short = M/d/yy h:mm a
 
+# Onboarding text on MyObservations
+# 0-10 observations
+As-you-upload-more-observations = As you upload more observations, others in our community may be able to help you identify them!
+# 11-50 observations
+Observations-you-upload-to-iNaturalist = Observations you upload to iNaturalist can be used by scientists and researchers worldwide.
+# 51-100 observations
+You-can-search-observations-of-any-plant-or-animal = You can search observations of any plant or animal anywhere in the world with Explore!
+
 DISCARD-PHOTOS = DISCARD PHOTOS?
 By-exiting-your-photos-will-not-be-saved = By exiting, your photos will not be saved.
 DISCARD = DISCARD
-CANCEL = CANCEL
\ No newline at end of file
+CANCEL = CANCEL
diff --git a/src/images/icons/inaturalist.svg b/src/images/icons/inaturalist.svg
new file mode 100644
index 000000000..f2ebe8cd7
--- /dev/null
+++ b/src/images/icons/inaturalist.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg width="24" height="24" version="1.1" x="0px" y="0px" viewBox="0 0 24 24" space="preserve">
+  <style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+  <path class="st0" d="M0,3.9c6.4,0.7,11.5,3,15.2,7l0.1,0.1c0.1,0.2,0.5,0.6,0.9,0.5c0.3-0.1,0.7-0.8,0.8-1l0,0  c0.3-0.4,1.1-1.7,2.8-2.3c1.7-0.5,3.9,0.1,4,0.1l0,0c0.1,0.1,0.3,0.1,0.2,0.2c-0.1,0.1-0.8,0.4-1.3,1.4s-0.8,3-0.9,3.4  c-0.3,1.8-1,3.4-2.1,4.8c-1.8,2.5-4.7,4.2-8,4.4c-1.8,0.2-3.6-0.1-5.1-0.8c1.9-0.2,4.2-1.1,6.1-3.2c2.3-2.7-0.2-1.3-2.4-1.7  c-1.5-0.3-2.8-1-4.9-3.7c0.7-0.2,2-0.4,3.1-0.5c-2-0.5-4.6-1.7-5.8-3.6c0.9-0.3,2.2-0.2,3.2-0.2C2,6.6,0.3,5.4,0,3.9z M9,1.5L9,1.5  c0.4,0.2,3.6,1.6,5.2,3.7c2.3,3,2.3,5.9,1.7,5.3c-1.4-1.6-2.8-2.6-4.4-3.7C10.3,5.9,9.4,3.5,9,1.5z M20.7,9c-0.3,0-0.5,0.3-0.5,0.6  s0.3,0.5,0.6,0.5s0.5-0.3,0.5-0.6C21.2,9.2,21,8.9,20.7,9z"/>
+</svg>
diff --git a/src/navigation/BottomTabNavigator/index.js b/src/navigation/BottomTabNavigator/index.js
index 8585ba164..4e87cab42 100644
--- a/src/navigation/BottomTabNavigator/index.js
+++ b/src/navigation/BottomTabNavigator/index.js
@@ -2,9 +2,9 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import About from "components/About";
 import Explore from "components/Explore/Explore";
 import Messages from "components/Messages/Messages";
+import MyObservationsContainer from "components/MyObservations/MyObservationsContainer";
 import NetworkLogging from "components/NetworkLogging";
 import ObsDetails from "components/ObsDetails/ObsDetails";
-import ObsList from "components/Observations/ObsList";
 import PlaceholderComponent from "components/PlaceholderComponent";
 import Search from "components/Search/Search";
 import Settings from "components/Settings/Settings";
@@ -61,7 +61,7 @@ const BottomTabs = () => {
       />
       <Tab.Screen
         name="ObsList"
-        component={ObsList}
+        component={MyObservationsContainer}
         options={{
           ...hideHeader,
           meta: {
diff --git a/src/providers/ObsEditProvider.js b/src/providers/ObsEditProvider.js
index 2311aa3e3..01089d743 100644
--- a/src/providers/ObsEditProvider.js
+++ b/src/providers/ObsEditProvider.js
@@ -3,7 +3,9 @@ import { useNavigation } from "@react-navigation/native";
 import { activateKeepAwake, deactivateKeepAwake } from "@sayem314/react-native-keep-awake";
 import { searchObservations } from "api/observations";
 import type { Node } from "react";
-import React, { useCallback, useMemo, useState } from "react";
+import React, {
+  useCallback, useMemo, useState
+} from "react";
 import Observation from "realmModels/Observation";
 import ObservationPhoto from "realmModels/ObservationPhoto";
 import Photo from "realmModels/Photo";
@@ -32,8 +34,9 @@ const ObsEditProvider = ( { children }: Props ): Node => {
   const [galleryUris, setGalleryUris] = useState( [] );
   const [evidenceToAdd, setEvidenceToAdd] = useState( [] );
   const [album, setAlbum] = useState( null );
-  const [loading, setLoading] = useState( );
+  const [loading, setLoading] = useState( false );
   const [unsavedChanges, setUnsavedChanges] = useState( false );
+  const [uploadProgress, setUploadProgress] = useState( { } );
 
   const resetObsEditContext = useCallback( ( ) => {
     setObservations( [] );
@@ -206,6 +209,8 @@ const ObsEditProvider = ( { children }: Props ): Node => {
     };
 
     const uploadObservation = async observation => {
+      // don't bother trying to upload unless there's a logged in user
+      if ( !currentUser ) { return {}; }
       if ( !apiToken ) {
         throw new Error( "Gack, tried to upload an observation without API token!" );
       }
@@ -244,10 +249,28 @@ const ObsEditProvider = ( { children }: Props ): Node => {
       await Photo.deletePhoto( realm, photoUriToDelete );
     };
 
-    const uploadLocalObservationsToServer = ( ) => {
-      const unsyncedObservations = Observation.filterUnsyncedObservations( realm );
-      unsyncedObservations.forEach( async observation => {
-        await Observation.uploadObservation( observation, apiToken, realm );
+    const startSingleUpload = async observation => {
+      setLoading( true );
+      const { uuid } = observation;
+      setUploadProgress( {
+        ...uploadProgress,
+        [uuid]: 0.5
+      } );
+      const response = await uploadObservation( observation );
+      if ( Object.keys( response ).length === 0 ) {
+        return;
+      }
+      // TODO: mostly making sure UI presentation works at the moment, but we will
+      // need to figure out what counts as progress towards an observation uploading
+      // and add that functionality.
+      // maybe uploading an observation is 0.33, starting to upload photos is 0.5,
+      // checking for sounds is 0.66 progress?
+      // and we need a way to track this progress from the Observation.uploadObservation function
+
+      setLoading( false );
+      setUploadProgress( {
+        ...uploadProgress,
+        [uuid]: 1
       } );
     };
 
@@ -266,7 +289,6 @@ const ObsEditProvider = ( { children }: Props ): Node => {
       // TODO: GET observation/deletions once this is enabled in API v2
       activateKeepAwake( );
       setLoading( true );
-      await uploadLocalObservationsToServer( );
       await downloadRemoteObservationsFromServer( );
       // we at least want to keep the device awake while uploads are happening
       // not sure about downloads/deletions
@@ -309,7 +331,10 @@ const ObsEditProvider = ( { children }: Props ): Node => {
       loading,
       setLoading,
       unsavedChanges,
-      syncObservations
+      syncObservations,
+      startSingleUpload,
+      uploadProgress,
+      setUploadProgress
     };
   }, [
     currentObservation,
@@ -334,7 +359,8 @@ const ObsEditProvider = ( { children }: Props ): Node => {
     loading,
     setLoading,
     unsavedChanges,
-    currentUser?.id
+    currentUser,
+    uploadProgress
   ] );
 
   return (
diff --git a/src/components/Observations/hooks/useInfiniteScroll.js b/src/sharedHooks/useInfiniteScroll.js
similarity index 98%
rename from src/components/Observations/hooks/useInfiniteScroll.js
rename to src/sharedHooks/useInfiniteScroll.js
index 5f6b1a11b..2c2c5d088 100644
--- a/src/components/Observations/hooks/useInfiniteScroll.js
+++ b/src/sharedHooks/useInfiniteScroll.js
@@ -15,7 +15,7 @@ const useInfiniteScroll = ( idBelow: ?number ): boolean => {
 
   const params = {
     user_id: currentUser?.id,
-    per_page: 10,
+    per_page: 50,
     fields: Observation.FIELDS
   };
 
diff --git a/src/sharedHooks/useLocalObservations.js b/src/sharedHooks/useLocalObservations.js
index 9dfabc872..977665847 100644
--- a/src/sharedHooks/useLocalObservations.js
+++ b/src/sharedHooks/useLocalObservations.js
@@ -1,6 +1,5 @@
 // @flow
 
-import _ from "lodash";
 import { RealmContext } from "providers/contexts";
 import {
   useEffect, useState
@@ -29,7 +28,8 @@ const useLocalObservations = ( ): Object => {
       // array, which doesn't seem to work. _.compact or Array.from will
       // create an array of Realm objects... which will probably require some
       // degree of pagination in the future
-      setObservationList( _.compact( collection ) );
+      // setObservationList( _.compact( collection ) );
+      setObservationList( collection );
 
       const unsyncedObs = Observation.filterUnsyncedObservations( realm );
 
diff --git a/src/sharedHooks/useUploadObservations.js b/src/sharedHooks/useUploadObservations.js
index 195855b2c..260c4c655 100644
--- a/src/sharedHooks/useUploadObservations.js
+++ b/src/sharedHooks/useUploadObservations.js
@@ -58,7 +58,6 @@ const useUploadObservations = ( allObsToUpload: Array<Object> ): Object => {
     const continueUpload = shouldUpload && observationToUpload && !!apiToken;
 
     if ( !continueUpload ) {
-      cleanup( );
       return;
     }
 
@@ -81,7 +80,8 @@ const useUploadObservations = ( allObsToUpload: Array<Object> ): Object => {
     stopUpload: cleanup,
     currentUploadIndex,
     totalUploadCount,
-    startUpload: ( ) => setShouldUpload( true )
+    startUpload: ( ) => setShouldUpload( true ),
+    allObsToUpload
   };
 };
 
diff --git a/tests/factories/LocalObservation.js b/tests/factories/LocalObservation.js
index d0fa1a7d6..87637fbbb 100644
--- a/tests/factories/LocalObservation.js
+++ b/tests/factories/LocalObservation.js
@@ -24,5 +24,6 @@ export default define( "LocalObservation", faker => ( {
   description: faker.lorem.paragraph( ),
   // is this the right way to test this?
   needsSync: jest.fn( ),
+  wasSynced: jest.fn( ),
   observed_on_string: "2022-12-03T11:14:16"
 } ) );
diff --git a/tests/integration/MyObservations.test.js b/tests/integration/MyObservations.test.js
index e83a79d39..f404e7632 100644
--- a/tests/integration/MyObservations.test.js
+++ b/tests/integration/MyObservations.test.js
@@ -2,13 +2,12 @@
 // remote data retrieval and local data persistence
 
 import { screen, waitFor } from "@testing-library/react-native";
-import ObsList from "components/Observations/ObsList";
+import MyObservationsContainer from "components/MyObservations/MyObservationsContainer";
 import initI18next from "i18n/initI18next";
 import i18next from "i18next";
 import inatjs from "inaturalistjs";
 import React from "react";
 
-// import RNSInfo from "react-native-sensitive-info";
 import factory, { makeResponse } from "../factory";
 import { renderAppWithComponent } from "../helpers/render";
 import { signIn, signOut } from "../helpers/user";
@@ -44,8 +43,8 @@ describe( "MyObservations", ( ) => {
       expect( apiMethod ).not.toHaveBeenCalled( );
       const signedInUsers = global.realm.objects( "User" ).filtered( "signedIn == true" );
       expect( signedInUsers.length ).toEqual( 0 );
-      renderAppWithComponent( <ObsList /> );
-      const loginText = i18next.t( "Log-in-to-iNaturalist" );
+      renderAppWithComponent( <MyObservationsContainer /> );
+      const loginText = i18next.t( "Log-in-to-contribute-your-observations" );
       await waitFor( ( ) => {
         expect( screen.getByText( loginText ) ).toBeTruthy( );
       } );
@@ -68,7 +67,7 @@ describe( "MyObservations", ( ) => {
       const mockUser = factory( "LocalUser" );
       expect( mockUser.locale ).toEqual( "en" );
       await signIn( mockUser );
-      renderAppWithComponent( <ObsList /> );
+      renderAppWithComponent( <MyObservationsContainer /> );
       await waitFor( ( ) => {
         expect( screen.getByText( /Welcome back/ ) ).toBeTruthy( );
       } );
@@ -81,9 +80,9 @@ describe( "MyObservations", ( ) => {
       } );
       expect( mockSpanishUser.locale ).toEqual( "es" );
       await signIn( mockSpanishUser );
-      renderAppWithComponent( <ObsList /> );
+      renderAppWithComponent( <MyObservationsContainer /> );
       await waitFor( ( ) => {
-        expect( screen.getByText( /Bienvenido/ ) ).toBeTruthy();
+        expect( screen.getByText( /Bienvenido a iNaturalist/ ) ).toBeTruthy();
       } );
       expect( screen.queryByText( /Welcome/ ) ).toBeFalsy( );
     } );
@@ -100,14 +99,14 @@ describe( "MyObservations", ( ) => {
         } );
         inatjs.users.me.mockResolvedValue( makeResponse( [mockSpanishUser] ) );
 
-        renderAppWithComponent( <ObsList /> );
+        renderAppWithComponent( <MyObservationsContainer /> );
         // I'd prefer to wait for the Spanish text to appear, but that never
         // seems to wait long enough. This waits for the relevant API call to
         // have been made
         await waitFor( ( ) => {
           expect( inatjs.users.me ).toHaveBeenCalled( );
         } );
-        expect( await screen.findByText( /Bienvenido/ ) ).toBeTruthy( );
+        expect( screen.getByText( /Bienvenido a iNaturalist/ ) ).toBeTruthy( );
         expect( screen.queryByText( /Welcome/ ) ).toBeFalsy( );
       }
     );
diff --git a/tests/unit/components/Observations/ObsList.test.js b/tests/unit/components/MyObservations/MyObservations.test.js
similarity index 69%
rename from tests/unit/components/Observations/ObsList.test.js
rename to tests/unit/components/MyObservations/MyObservations.test.js
index 2883efc91..68837c6ba 100644
--- a/tests/unit/components/Observations/ObsList.test.js
+++ b/tests/unit/components/MyObservations/MyObservations.test.js
@@ -1,5 +1,5 @@
 import { fireEvent, screen, within } from "@testing-library/react-native";
-import ObsList from "components/Observations/ObsList";
+import MyObservationsContainer from "components/MyObservations/MyObservationsContainer";
 import initI18next from "i18n/initI18next";
 import React from "react";
 
@@ -17,17 +17,21 @@ const mockObservations = [
   factory( "LocalObservation" )
 ];
 
-// Mock the hooks we use on ObsList since we're not trying to test them here
+const mockNavigate = jest.fn();
+jest.mock( "@react-navigation/native", () => {
+  const actualNav = jest.requireActual( "@react-navigation/native" );
+  return {
+    ...actualNav,
+    useRoute: () => ( {} ),
+    useNavigation: () => ( {
+      navigate: mockNavigate,
+      addListener: jest.fn()
+    } )
+  };
+} );
 
 jest.mock( "sharedHooks/useApiToken" );
 
-const mockUser = factory( "LocalUser" );
-
-jest.mock( "sharedHooks/useCurrentUser", () => ( {
-  __esModule: true,
-  default: () => mockUser
-} ) );
-
 jest.mock( "sharedHooks/useLocalObservations", () => ( {
   __esModule: true,
   default: () => ( {
@@ -36,38 +40,26 @@ jest.mock( "sharedHooks/useLocalObservations", () => ( {
   } )
 } ) );
 
-jest.mock( "@react-navigation/native", () => {
-  const actualNav = jest.requireActual( "@react-navigation/native" );
-  return {
-    ...actualNav,
-    useRoute: () => ( {
-      params: {
-        id: mockObservations[0].uuid
-      }
-    } )
-  };
-} );
-
-describe( "ObsList", () => {
+describe( "MyObservations", () => {
   beforeAll( async () => {
     await initI18next();
   } );
 
   it( "should not have accessibility errors", () => {
-    renderComponent( <ObsList /> );
-    const obsList = screen.getByTestId( "ObservationViews.myObservations" );
+    renderComponent( <MyObservationsContainer /> );
+    const obsList = screen.getByTestId( "MyObservationsAnimatedList" );
     expect( obsList ).toBeAccessible();
   } );
 
   it( "renders an observation", async () => {
-    renderComponent( <ObsList /> );
+    renderComponent( <MyObservationsContainer /> );
     const obs = mockObservations[0];
 
-    const list = await screen.findByTestId( "ObservationViews.myObservations" );
+    const list = await screen.findByTestId( "MyObservationsAnimatedList" );
     // Test that there isn't other data lingering
     expect( list.props.data.length ).toEqual( mockObservations.length );
     // Test that a card got rendered for the our test obs
-    const card = await screen.findByTestId( `ObsList.obsListItem.${obs.uuid}` );
+    const card = await screen.findByTestId( `MyObservations.obsListItem.${obs.uuid}` );
     expect( card ).toBeTruthy();
     // Test that the card has the correct comment count
     const commentCount = within( card ).getByTestId( "ActivityCount.commentCount" );
@@ -79,13 +71,13 @@ describe( "ObsList", () => {
   } );
 
   it( "renders multiple observations", async () => {
-    renderComponent( <ObsList /> );
+    renderComponent( <MyObservationsContainer /> );
     // Awaiting the first observation because using await in the forEach errors out
     const firstObs = mockObservations[0];
-    await screen.findByTestId( `ObsList.obsListItem.${firstObs.uuid}` );
+    await screen.findByTestId( `MyObservations.obsListItem.${firstObs.uuid}` );
     mockObservations.forEach( obs => {
       expect(
-        screen.getByTestId( `ObsList.obsListItem.${obs.uuid}` )
+        screen.getByTestId( `MyObservations.obsListItem.${obs.uuid}` )
       ).toBeTruthy();
     } );
     // TODO: some things are still happening in the background so I unmount here,
@@ -94,14 +86,14 @@ describe( "ObsList", () => {
   } );
 
   it( "renders grid view on button press", async () => {
-    renderComponent( <ObsList /> );
-    const button = await screen.findByTestId( "ObsList.toggleGridView" );
+    renderComponent( <MyObservationsContainer /> );
+    const button = await screen.findByTestId( "MyObservationsToolbar.toggleGridView" );
     fireEvent.press( button );
     // Awaiting the first observation because using await in the forEach errors out
     const firstObs = mockObservations[0];
-    await screen.findByTestId( `ObsList.gridItem.${firstObs.uuid}` );
+    await screen.findByTestId( `MyObservations.gridItem.${firstObs.uuid}` );
     mockObservations.forEach( obs => {
-      expect( screen.getByTestId( `ObsList.gridItem.${obs.uuid}` ) ).toBeTruthy();
+      expect( screen.getByTestId( `MyObservations.gridItem.${obs.uuid}` ) ).toBeTruthy();
     } );
   } );
 } );
diff --git a/tests/unit/components/SharedComponents/Buttons/__snapshots__/Button.test.js.snap b/tests/unit/components/SharedComponents/Buttons/__snapshots__/Button.test.js.snap
index 67e6a606e..27d8e4142 100644
--- a/tests/unit/components/SharedComponents/Buttons/__snapshots__/Button.test.js.snap
+++ b/tests/unit/components/SharedComponents/Buttons/__snapshots__/Button.test.js.snap
@@ -84,6 +84,7 @@ exports[`Button focus should render correctly 1`] = `
         ],
       ]
     }
+    testID="RNButton.text"
   >
     FOCUS BUTTON
   </Text>
@@ -177,6 +178,7 @@ exports[`Button focus when disabled should render correctly 1`] = `
         ],
       ]
     }
+    testID="RNButton.text"
   >
     FOCUS DISABLED
   </Text>
@@ -285,6 +287,7 @@ exports[`Button neutral should render correctly 1`] = `
         ],
       ]
     }
+    testID="RNButton.text"
   >
     NEUTRAL BUTTON
   </Text>
@@ -396,6 +399,7 @@ exports[`Button neutral when disabled should render correctly 1`] = `
         ],
       ]
     }
+    testID="RNButton.text"
   >
     NEUTRAL DISABLED
   </Text>
@@ -486,6 +490,7 @@ exports[`Button primary should render correctly 1`] = `
         ],
       ]
     }
+    testID="RNButton.text"
   >
     PRIMARY BUTTON
   </Text>
@@ -579,6 +584,7 @@ exports[`Button primary when disabled should render correctly 1`] = `
         ],
       ]
     }
+    testID="RNButton.text"
   >
     PRIMARY DISABLED
   </Text>
@@ -669,6 +675,7 @@ exports[`Button warning should render correctly 1`] = `
         ],
       ]
     }
+    testID="RNButton.text"
   >
     WARNING BUTTON
   </Text>
@@ -762,6 +769,7 @@ exports[`Button warning when disabled should render correctly 1`] = `
         ],
       ]
     }
+    testID="RNButton.text"
   >
     WARNING DISABLED
   </Text>
diff --git a/tests/unit/components/SharedComponents/UploadStatus/__snapshots__/UploadStatus.test.js.snap b/tests/unit/components/SharedComponents/UploadStatus/__snapshots__/UploadStatus.test.js.snap
index 76ec3ea36..91b622995 100644
--- a/tests/unit/components/SharedComponents/UploadStatus/__snapshots__/UploadStatus.test.js.snap
+++ b/tests/unit/components/SharedComponents/UploadStatus/__snapshots__/UploadStatus.test.js.snap
@@ -6,9 +6,6 @@ exports[`UploadStatus displays progress bar when progress is greater than 5% cor
   style={
     Array [
       Array [
-        Object {
-          "position": "relative",
-        },
         Object {
           "alignItems": "center",
         },
@@ -77,9 +74,6 @@ exports[`UploadStatus displays progress bar when progress is less than 5% correc
   style={
     Array [
       Array [
-        Object {
-          "position": "relative",
-        },
         Object {
           "alignItems": "center",
         },
@@ -100,68 +94,135 @@ exports[`UploadStatus displays progress bar when progress is less than 5% correc
     collapsable={false}
     style={
       Object {
-        "transform": Array [
-          Object {
-            "rotate": "0deg",
-          },
-        ],
+        "alignSelf": undefined,
+        "bottom": undefined,
+        "left": undefined,
+        "position": undefined,
+        "right": undefined,
+        "shadowColor": "#000",
+        "shadowOffset": Object {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+        "top": undefined,
       }
     }
   >
-    <Text
-      allowFontScaling={false}
-      selectable={false}
+    <View
+      collapsable={false}
       style={
-        Array [
-          Object {
-            "color": "#454545",
-            "fontSize": 33,
+        Object {
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
           },
-          undefined,
-          Object {
-            "fontFamily": "INatIcon",
-            "fontStyle": "normal",
-            "fontWeight": "normal",
-          },
-          Object {},
-        ]
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        }
       }
     >
-      
-    </Text>
-  </View>
-  <View
-    style={
-      Array [
-        Array [
+      <View
+        collapsable={false}
+        style={
           Object {
-            "position": "absolute",
-          },
-        ],
-      ]
-    }
-  >
-    <Text
-      allowFontScaling={false}
-      selectable={false}
-      style={
-        Array [
-          Object {
-            "color": "#454545",
-            "fontSize": 15,
-          },
-          undefined,
-          Object {
-            "fontFamily": "INatIcon",
-            "fontStyle": "normal",
-            "fontWeight": "normal",
-          },
-          Object {},
-        ]
-      }
-    >
-      
-    </Text>
+            "backgroundColor": undefined,
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 24.5,
+            "borderWidth": 0,
+            "elevation": 0,
+            "height": 49,
+            "margin": 6,
+            "overflow": "hidden",
+            "width": 49,
+          }
+        }
+      >
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
+            }
+          }
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "overflow": "hidden",
+              },
+              false,
+              Object {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#454545",
+                  "fontSize": 33,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 33,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            ?
+          </Text>
+        </View>
+      </View>
+    </View>
   </View>
 </View>
 `;