diff --git a/.eslintrc.js b/.eslintrc.js
index 63633947e..a150efbff 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -170,6 +170,12 @@ module.exports = {
         "import/consistent-type-specifier-style": "off"
       }
     },
+    {
+      files: ["*.test.js", "*.test.tsx"],
+      rules: {
+        "react/jsx-props-no-spreading": "off"
+      }
+    },
     {
       files: ["**/__mocks__/**/*", "**/*mock*", "**/*.mock.*"],
       rules: {
diff --git a/src/api/types.d.ts b/src/api/types.d.ts
index 286230f76..7408cc7bc 100644
--- a/src/api/types.d.ts
+++ b/src/api/types.d.ts
@@ -102,12 +102,17 @@ export interface ApiUser {
 export interface ApiComment {
   body?: string;
   user?: ApiUser;
+  id: number;
+  hidden?: boolean;
+  uuid: string;
+  created_at: string;
 }
 
 export interface ApiIdentification {
   body?: string;
   taxon?: ApiTaxon;
   user?: ApiUser;
+  hidden?: boolean;
 }
 
 export interface ApiNotification {
@@ -134,6 +139,9 @@ export interface ApiObservation extends ApiRecord {
   time_observed_at?: string;
   user?: ApiUser;
   uuid: string;
+  comments?: ApiComment[];
+  identifications?: ApiIdentification[];
+  taxon?: ApiTaxon;
 }
 
 export interface ApiObservationsSearchResponse extends ApiResponse {
diff --git a/src/components/Match/Match.js b/src/components/Match/Match.js
index 5f26c9626..bf05944b7 100644
--- a/src/components/Match/Match.js
+++ b/src/components/Match/Match.js
@@ -19,9 +19,9 @@ import MatchHeader from "./MatchHeader";
 import PhotosSection from "./PhotosSection";
 import SaveDiscardButtons from "./SaveDiscardButtons";
 
-const cardClassTop
+export const matchCardClassTop
   = "rounded-t-2xl border-lightGray border-[2px] py-[18px] px-5 border-b-0 -mb-0.5";
-const cardClassBottom
+export const matchCardClassBottom
   = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mt-0.5 mb-[30px]";
 
 type Props = {
@@ -66,7 +66,7 @@ const Match = ( {
     return (
       <>
         <ScrollViewWrapper scrollRef={scrollRef}>
-          <View className={cardClassTop}>
+          <View className={matchCardClassTop}>
             {
               suggestionsLoading
                 ? (
@@ -127,7 +127,7 @@ const Match = ( {
     return (
       <>
         <ScrollViewWrapper scrollRef={scrollRef}>
-          <View className={cardClassTop}>
+          <View className={matchCardClassTop}>
             {
               suggestionsLoading
                 ? (
@@ -177,7 +177,7 @@ const Match = ( {
   return (
     <>
       <ScrollViewWrapper scrollRef={scrollRef}>
-        <View className={cardClassTop}>
+        <View className={matchCardClassTop}>
           {
             suggestionsLoading
               ? (
@@ -207,7 +207,7 @@ const Match = ( {
           belongsToCurrentUser
           observation={observation}
         />
-        <View className={cardClassBottom} />
+        <View className={matchCardClassBottom} />
         {
           isConnected && (
             <Button
diff --git a/src/components/Match/MatchHeader.tsx b/src/components/Match/MatchHeader.tsx
index 51fb47733..fcc7500a7 100644
--- a/src/components/Match/MatchHeader.tsx
+++ b/src/components/Match/MatchHeader.tsx
@@ -17,11 +17,12 @@ interface Props {
   topSuggestion?: {
     combined_score?: number;
     score?: number;
-    taxon: RealmTaxon;
+    taxon?: RealmTaxon;
   };
+  hideObservationStatus?: boolean
 }
 
-const MatchHeader = ( { topSuggestion }: Props ) => {
+const MatchHeader = ( { topSuggestion, hideObservationStatus }: Props ) => {
   const { t } = useTranslation( );
   const taxon = topSuggestion?.taxon;
 
@@ -42,7 +43,7 @@ const MatchHeader = ( { topSuggestion }: Props ) => {
     }
 
     let rankDescription = "organism";
-    if ( taxon.rank_level === 10 ) {
+    if ( taxon?.rank_level === 10 ) {
       rankDescription = "species";
     }
 
@@ -89,17 +90,19 @@ const MatchHeader = ( { topSuggestion }: Props ) => {
 
   return (
     <View>
-      <Body2 className="mb-2">{generateCongratulatoryText( )}</Body2>
+      {!hideObservationStatus && <Body2 className="mb-2">{generateCongratulatoryText( )}</Body2>}
       <View className="flex-row justify-between items-center">
         {showSuggestedTaxon( )}
-        <View className="justify-end items-center ml-5">
-          <Subheading2 className="text-inatGreen mb-2">
-            {t( "X-percent", { count: confidence } )}
-          </Subheading2>
-          <Body4 className="text-inatGreen">
-            {t( "Confidence--label" )}
-          </Body4>
-        </View>
+        { !hideObservationStatus && (
+          <View className="justify-end items-center ml-5">
+            <Subheading2 className="text-inatGreen mb-2">
+              {t( "X-percent", { count: confidence } )}
+            </Subheading2>
+            <Body4 className="text-inatGreen">
+              {t( "Confidence--label" )}
+            </Body4>
+          </View>
+        )}
       </View>
     </View>
   );
diff --git a/src/components/Match/PhotosSection.js b/src/components/Match/PhotosSection.js
index 4b92b0845..4ce61b4f8 100644
--- a/src/components/Match/PhotosSection.js
+++ b/src/components/Match/PhotosSection.js
@@ -1,3 +1,5 @@
+// @flow
+
 import classnames from "classnames";
 import MediaViewerModal from "components/MediaViewer/MediaViewerModal";
 import {
@@ -7,23 +9,26 @@ import {
   Image, Pressable, View
 } from "components/styledComponents";
 import _, { compact } from "lodash";
+import type { Node } from "react";
 import React, { useEffect, useState } from "react";
 import Photo from "realmModels/Photo";
 import getImageDimensions from "sharedHelpers/getImageDimensions";
 
 type Props = {
-  representativePhoto: Object,
+  representativePhoto?: Object,
   taxon: Object,
   obsPhotos: Array<Object>,
-  navToTaxonDetails: ( photo: Object ) => void
+  navToTaxonDetails: ( photo: Object ) => void,
+  hideTaxonPhotos?: boolean
 }
 
 const PhotosSection = ( {
   representativePhoto,
   taxon,
   obsPhotos,
-  navToTaxonDetails
-}: Props ) => {
+  navToTaxonDetails,
+  hideTaxonPhotos
+}: Props ): Node => {
   const [displayPortraitLayout, setDisplayPortraitLayout] = useState( null );
   const [mediaViewerVisible, setMediaViewerVisible] = useState( false );
 
@@ -86,34 +91,36 @@ const PhotosSection = ( {
     let observationPhotoClass = "w-full h-full";
     let taxonPhotosContainerClass;
     let taxonPhotoClass;
-    // If there is only one taxon photo: obs photo a square,
-    // taxon photo a square in the lower right corner of the obs photo
-    if ( bestTaxonPhotos.length === 1 ) {
-      containerClass = "flex-row relative";
-      observationPhotoClass = "w-full h-full";
-      taxonPhotosContainerClass = "absolute bottom-0 right-0 w-1/3 h-1/3";
-      taxonPhotoClass = "w-full h-full border-l-[3px] border-t-[3px] border-white";
-    }
-    if ( bestTaxonPhotos.length > 1 ) {
-      if ( displayPortraitLayout ) {
-        containerClass = "flex-row";
-        observationPhotoClass = "w-2/3 h-full pr-[3px]";
-        if ( bestTaxonPhotos.length === 2 ) {
-          taxonPhotosContainerClass = "flex-col w-1/3 h-full space-y-[3px]";
-          taxonPhotoClass = "w-full h-1/2";
+    if ( !hideTaxonPhotos ) {
+      // If there is only one taxon photo: obs photo a square,
+      // taxon photo a square in the lower right corner of the obs photo
+      if ( bestTaxonPhotos.length === 1 ) {
+        containerClass = "flex-row relative";
+        observationPhotoClass = "w-full h-full";
+        taxonPhotosContainerClass = "absolute bottom-0 right-0 w-1/3 h-1/3";
+        taxonPhotoClass = "w-full h-full border-l-[3px] border-t-[3px] border-white";
+      }
+      if ( bestTaxonPhotos.length > 1 ) {
+        if ( displayPortraitLayout ) {
+          containerClass = "flex-row";
+          observationPhotoClass = "w-2/3 h-full pr-[3px]";
+          if ( bestTaxonPhotos.length === 2 ) {
+            taxonPhotosContainerClass = "flex-col w-1/3 h-full space-y-[3px]";
+            taxonPhotoClass = "w-full h-1/2";
+          } else {
+            taxonPhotosContainerClass = "flex-col w-1/3 h-full space-y-[3px]";
+            taxonPhotoClass = "w-full h-1/3";
+          }
         } else {
-          taxonPhotosContainerClass = "flex-col w-1/3 h-full space-y-[3px]";
-          taxonPhotoClass = "w-full h-1/3";
-        }
-      } else {
-        containerClass = "flex-col";
-        observationPhotoClass = "w-full h-2/3 pb-[3px]";
-        if ( bestTaxonPhotos.length === 2 ) {
-          taxonPhotosContainerClass = "flex-row w-full h-1/3 space-x-[3px]";
-          taxonPhotoClass = "w-1/2 h-full";
-        } else {
-          taxonPhotosContainerClass = "flex-row w-full h-1/3 space-x-[3px]";
-          taxonPhotoClass = "w-1/3 h-full";
+          containerClass = "flex-col";
+          observationPhotoClass = "w-full h-2/3 pb-[3px]";
+          if ( bestTaxonPhotos.length === 2 ) {
+            taxonPhotosContainerClass = "flex-row w-full h-1/3 space-x-[3px]";
+            taxonPhotoClass = "w-1/2 h-full";
+          } else {
+            taxonPhotosContainerClass = "flex-row w-full h-1/3 space-x-[3px]";
+            taxonPhotoClass = "w-1/3 h-full";
+          }
         }
       }
     }
@@ -189,9 +196,9 @@ const PhotosSection = ( {
   }
 
   return (
-    <View className={classnames( "h-[390px]", layoutClasses.containerClass )}>
+    <View className={classnames( "h-[390px] overflow-hidden", layoutClasses.containerClass )}>
       {renderObservationPhoto( )}
-      {bestTaxonPhotos.length > 0 && renderTaxonPhotos( )}
+      {!hideTaxonPhotos && bestTaxonPhotos.length > 0 && renderTaxonPhotos( )}
       <MediaViewerModal
         showModal={mediaViewerVisible}
         onClose={( ) => setMediaViewerVisible( false )}
diff --git a/src/components/ObsDetailsDefaultMode/CommunitySection/CommunitySection.js b/src/components/ObsDetailsDefaultMode/CommunitySection/CommunitySection.js
index d7a3d087e..7554d05a6 100644
--- a/src/components/ObsDetailsDefaultMode/CommunitySection/CommunitySection.js
+++ b/src/components/ObsDetailsDefaultMode/CommunitySection/CommunitySection.js
@@ -14,7 +14,7 @@ type Props = {
   activityItems: Array<Object>,
   openAgreeWithIdSheet: Function,
   isConnected: boolean,
-  targetItemID: number,
+  targetItemID: ?number,
   // TODO change to LayoutEvent from react-native if/when switching to TS
   onLayoutTargetItem: ( event: Object ) => void
 }
diff --git a/src/components/ObsDetailsDefaultMode/MapSection/MapSection.js b/src/components/ObsDetailsDefaultMode/MapSection/MapSection.js
index 0dd14907b..0b64bb04e 100644
--- a/src/components/ObsDetailsDefaultMode/MapSection/MapSection.js
+++ b/src/components/ObsDetailsDefaultMode/MapSection/MapSection.js
@@ -63,7 +63,7 @@ const MapSection = ( { observation, taxon }: Props ) => {
   }
 
   return (
-    <View className="h-[200px]">
+    <View testID="MapSection" className="h-[200px]">
       <Map
         mapHeight={200}
         observation={observation}
diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx
index 58f69df28..8bdf9deb9 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx
@@ -32,7 +32,6 @@ type Props = {
   belongsToCurrentUser: boolean,
   currentUser: RealmUser,
   isConnected: boolean,
-  isSimpleMode: boolean,
   navToSuggestions: () => void,
   observation: RealmObservation & Observation & { id: number },
   openAddCommentSheet: () => void,
@@ -52,7 +51,6 @@ const ObsDetailsDefaultMode = ( {
   belongsToCurrentUser,
   currentUser,
   isConnected,
-  isSimpleMode,
   navToSuggestions,
   observation,
   openAddCommentSheet,
@@ -79,7 +77,7 @@ const ObsDetailsDefaultMode = ( {
   const showFloatingButtons = currentUser && !isSavedObservationByCurrentUser;
 
   return (
-    <View className="flex-1 bg-white">
+    <View className="flex-1 bg-white" testID="ObsDetails.container">
       <ObsDetailsDefaultModeHeaderRight
         belongsToCurrentUser={belongsToCurrentUser}
         observationId={observation?.id}
@@ -98,13 +96,11 @@ const ObsDetailsDefaultMode = ( {
             setHeightOfContentAboveCommunitySection( layout );
           }}
         >
-          {!isSimpleMode && (
-            <ObserverDetails
-              belongsToCurrentUser={belongsToCurrentUser}
-              isConnected={isConnected}
-              observation={observation}
-            />
-          )}
+          <ObserverDetails
+            belongsToCurrentUser={belongsToCurrentUser}
+            isConnected={isConnected}
+            observation={observation}
+          />
           <View>
             <ObsMediaDisplayContainer observation={observation} />
           </View>
@@ -113,10 +109,7 @@ const ObsDetailsDefaultMode = ( {
             observation={observation}
             isSimpleMode
           />
-          <View className={isSimpleMode
-            ? "mt-[15px]"
-            : "mt-5"}
-          >
+          <View className="mt-5">
             <MapSection observation={observation} />
           </View>
           <LocationSection
@@ -124,29 +117,25 @@ const ObsDetailsDefaultMode = ( {
             observation={observation}
           />
           <NotesSection description={observation.description} />
-          {!isSimpleMode && <View className={cardClassBottom} />}
+          <View className={cardClassBottom} />
         </View>
-        {!isSimpleMode && (
-          <>
-            <CommunitySection
-              activityItems={activityItems}
-              isConnected={isConnected}
-              targetItemID={targetActivityItemID}
-              observation={observation}
-              openAgreeWithIdSheet={openAgreeWithIdSheet}
-              refetchRemoteObservation={refetchRemoteObservation}
-              onLayoutTargetItem={setOffsetToActivityItem}
-            />
-            {addingActivityItem && (
-              <View className="flex-row items-center justify-center p-10">
-                <ActivityIndicator size={50} />
-              </View>
-            )}
-            <StatusSection observation={observation} />
-            <DetailsSection observation={observation} />
-            <MoreSection observation={observation} />
-          </>
+        <CommunitySection
+          activityItems={activityItems}
+          isConnected={isConnected}
+          targetItemID={targetActivityItemID}
+          observation={observation}
+          openAgreeWithIdSheet={openAgreeWithIdSheet}
+          refetchRemoteObservation={refetchRemoteObservation}
+          onLayoutTargetItem={setOffsetToActivityItem}
+        />
+        {addingActivityItem && (
+          <View className="flex-row items-center justify-center p-10">
+            <ActivityIndicator size={50} />
+          </View>
         )}
+        <StatusSection observation={observation} />
+        <DetailsSection observation={observation} />
+        <MoreSection observation={observation} />
       </ScrollView>
       {showFloatingButtons && (
         <FloatingButtons
diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
index baae00aea..ecac21986 100644
--- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js
@@ -1,8 +1,5 @@
 // @flow
-import {
-  useNetInfo
-} from "@react-native-community/netinfo";
-import { useFocusEffect, useNavigation, useRoute } from "@react-navigation/native";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import { useQueryClient } from "@tanstack/react-query";
 import { fetchSubscriptions } from "api/observations";
 import IdentificationSheets from "components/ObsDetailsDefaultMode/IdentificationSheets";
@@ -11,20 +8,16 @@ import type { Node } from "react";
 import React, {
   useCallback,
   useEffect,
-  useMemo,
-  useReducer,
-  useState
+  useReducer
 } from "react";
 import { LogBox } from "react-native";
 import Observation from "realmModels/Observation";
 import safeRealmWrite from "sharedHelpers/safeRealmWrite";
 import {
   useAuthenticatedQuery,
-  useCurrentUser,
-  useLocalObservation,
   useObservationsUpdates
 } from "sharedHooks";
-import useRemoteObservation, {
+import {
   fetchRemoteObservationKey
 } from "sharedHooks/useRemoteObservation";
 import useStore from "stores/useStore";
@@ -109,19 +102,47 @@ const reducer = ( state, action ) => {
   }
 };
 
-const ObsDetailsDefaultModeContainer = ( ): Node => {
+type Props = {
+  belongsToCurrentUser: boolean,
+  currentUser: ?Object,
+  fetchRemoteObservationError: ?Object,
+  isConnected: boolean,
+  isRefetching: boolean,
+  localObservation: ?Object,
+  markDeletedLocally: Function,
+  markViewedLocally: Function,
+  observation: Object,
+  refetchRemoteObservation: Function,
+  remoteObservation: ?Object,
+  remoteObsWasDeleted: boolean,
+  setRemoteObsWasDeleted: Function,
+  targetActivityItemID?: ?number,
+  uuid: string
+}
+
+const ObsDetailsDefaultModeContainer = ( props: Props ): Node => {
   const setObservations = useStore( state => state.setObservations );
-  const currentUser = useCurrentUser( );
-  const { params } = useRoute();
-  const {
-    targetActivityItemID,
-    uuid
-  } = params;
   const navigation = useNavigation( );
   const realm = useRealm( );
-  const { isConnected } = useNetInfo( );
   const [state, dispatch] = useReducer( reducer, initialState );
-  const [remoteObsWasDeleted, setRemoteObsWasDeleted] = useState( false );
+
+  const {
+    observation,
+    targetActivityItemID,
+    uuid,
+    localObservation,
+    markViewedLocally,
+    markDeletedLocally,
+    remoteObservation,
+    setRemoteObsWasDeleted,
+    fetchRemoteObservationError,
+    currentUser,
+    belongsToCurrentUser,
+    isRefetching,
+    refetchRemoteObservation,
+    isConnected,
+    remoteObsWasDeleted
+  } = props;
 
   const {
     activityItems,
@@ -133,26 +154,6 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
   } = state;
   const queryClient = useQueryClient( );
 
-  const {
-    localObservation,
-    markDeletedLocally,
-    markViewedLocally
-  } = useLocalObservation( uuid );
-  const wasSynced = localObservation && localObservation?.wasSynced();
-
-  const fetchRemoteObservationEnabled = !!(
-    !remoteObsWasDeleted
-    && ( !localObservation || localObservation?.wasSynced( ) )
-    && isConnected
-  );
-
-  const {
-    remoteObservation,
-    refetchRemoteObservation,
-    isRefetching,
-    fetchRemoteObservationError
-  } = useRemoteObservation( uuid, fetchRemoteObservationEnabled );
-
   useMarkViewedMutation( localObservation, markViewedLocally, remoteObservation );
 
   // If we tried to get a remote observation but it no longer exists, the user
@@ -160,7 +161,8 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
   // copy of this observation
   useEffect( ( ) => {
     setRemoteObsWasDeleted( fetchRemoteObservationError?.status === 404 );
-  }, [fetchRemoteObservationError?.status] );
+  }, [fetchRemoteObservationError?.status, setRemoteObsWasDeleted] );
+
   const confirmRemoteObsWasDeleted = useCallback( ( ) => {
     if ( localObservation ) {
       markDeletedLocally( );
@@ -172,27 +174,10 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
     navigation
   ] );
 
-  const observation = localObservation || Observation.mapApiToRealm( remoteObservation );
+  const wasSynced = !!( localObservation && localObservation?.wasSynced() );
+
   const hasPhotos = observation?.observationPhotos?.length > 0;
 
-  // In theory the only situation in which an observation would not have a
-  // user is when a user is not signed but has made a new observation in the
-  // app. Also in theory that user should not be able to get to ObsDetail for
-  // those observations, just ObsEdit. But.... let's be safe.
-  const belongsToCurrentUser = (
-    observation?.user?.id === currentUser?.id
-    || ( !observation?.user && !observation?.id )
-  );
-
-  const isSimpleMode = useMemo( () => (
-    // Simple mode applies only when:
-    // 1. It's the current user's observation (or an observation being created)
-    // 2. AND the observation hasn't been synced yet
-    ( belongsToCurrentUser || !observation?.user )
-      && localObservation
-      && !localObservation.wasSynced()
-  ), [belongsToCurrentUser, localObservation, observation?.user] );
-
   const { data: subscriptions, refetch: refetchSubscriptions } = useAuthenticatedQuery(
     [
       "fetchSubscriptions"
@@ -325,7 +310,7 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
         const localComments = localObservation?.comments;
         const newComment = data[0];
         newComment.user = currentUser;
-        localComments.push( newComment );
+        localComments?.push( newComment );
       }, "setting local comment in ObsDetailsContainer" );
       const updatedLocalObservation = realm.objectForPrimaryKey( "Observation", uuid );
       dispatch( { type: "ADD_ACTIVITY_ITEM", observationShown: updatedLocalObservation } );
@@ -355,7 +340,6 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
         belongsToCurrentUser={belongsToCurrentUser}
         currentUser={currentUser}
         isConnected={isConnected}
-        isSimpleMode={isSimpleMode}
         navToSuggestions={navToSuggestions}
         observation={observationShown}
         openAddCommentSheet={openAddCommentSheet}
diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
new file mode 100644
index 000000000..9ada16fef
--- /dev/null
+++ b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.tsx
@@ -0,0 +1,99 @@
+import { useNetInfo } from "@react-native-community/netinfo";
+import { useRoute } from "@react-navigation/native";
+import ObsDetailsDefaultModeContainer
+  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer";
+import React, { useMemo, useState } from "react";
+import Observation from "realmModels/Observation";
+import {
+  useCurrentUser,
+  useLocalObservation,
+  useRemoteObservation
+} from "sharedHooks";
+
+import SavedMatchContainer from "./SavedMatch/SavedMatchContainer";
+
+type RouteParams = {
+    targetActivityItemID?: number,
+    uuid: string,
+}
+
+const ObsDetailsDefaultModeScreensWrapper = () => {
+  const { params } = useRoute();
+  const {
+    targetActivityItemID,
+    uuid
+  } = params as RouteParams;
+  const currentUser = useCurrentUser( );
+  const isConnected = !!useNetInfo( ).isConnected;
+
+  const [remoteObsWasDeleted, setRemoteObsWasDeleted] = useState( false );
+
+  const {
+    localObservation,
+    markDeletedLocally,
+    markViewedLocally
+  } = useLocalObservation( uuid );
+
+  const fetchRemoteObservationEnabled = !!(
+    !remoteObsWasDeleted
+    && ( !localObservation || localObservation?.wasSynced( ) )
+    && isConnected
+  );
+
+  const {
+    remoteObservation,
+    refetchRemoteObservation,
+    isRefetching,
+    fetchRemoteObservationError
+  } = useRemoteObservation( uuid, fetchRemoteObservationEnabled );
+
+  const observation = localObservation || Observation.mapApiToRealm( remoteObservation );
+
+  // In theory the only situation in which an observation would not have a
+  // user is when a user is not signed but has made a new observation in the
+  // app. Also in theory that user should not be able to get to ObsDetail for
+  // those observations, just ObsEdit. But.... let's be safe.
+  const belongsToCurrentUser = (
+    observation?.user?.id === currentUser?.id
+    || ( !observation?.user && !observation?.id )
+  );
+
+  const showSavedMatch = useMemo( () => (
+    // Saved match screen is used when:
+    // 1. It's the current user's observation (or an observation being created)
+    // 2. AND the observation hasn't been synced yet
+    !!( ( belongsToCurrentUser || !observation?.user )
+      && localObservation
+      && !localObservation.wasSynced() )
+  ), [belongsToCurrentUser, localObservation, observation?.user] );
+
+  if ( showSavedMatch ) {
+    return (
+      <SavedMatchContainer
+        observation={observation}
+      />
+    );
+  }
+
+  return (
+    <ObsDetailsDefaultModeContainer
+      observation={observation}
+      targetActivityItemID={targetActivityItemID}
+      uuid={uuid}
+      localObservation={localObservation}
+      markViewedLocally={markViewedLocally}
+      markDeletedLocally={markDeletedLocally}
+      remoteObservation={remoteObservation}
+      remoteObsWasDeleted={remoteObsWasDeleted}
+      setRemoteObsWasDeleted={setRemoteObsWasDeleted}
+      fetchRemoteObservationError={fetchRemoteObservationError}
+      currentUser={currentUser}
+      belongsToCurrentUser={belongsToCurrentUser}
+      isRefetching={isRefetching}
+      refetchRemoteObservation={refetchRemoteObservation}
+      isConnected={isConnected}
+    />
+  );
+};
+
+export default ObsDetailsDefaultModeScreensWrapper;
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
new file mode 100644
index 000000000..1421a93ee
--- /dev/null
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx
@@ -0,0 +1,69 @@
+import { useNetInfo } from "@react-native-community/netinfo";
+import { matchCardClassBottom, matchCardClassTop } from "components/Match/Match";
+import MatchHeader from "components/Match/MatchHeader";
+import PhotosSection from "components/Match/PhotosSection";
+import LocationSection from "components/ObsDetailsDefaultMode/LocationSection/LocationSection";
+import MapSection from "components/ObsDetailsDefaultMode/MapSection/MapSection";
+import { Button, ScrollViewWrapper } from "components/SharedComponents";
+import { View } from "components/styledComponents";
+import _ from "lodash";
+import React from "react";
+import type { RealmObservation } from "realmModels/types";
+import { useTranslation } from "sharedHooks";
+
+import SavedMatchHeaderRight from "./SavedMatchHeaderRight";
+
+interface Props {
+  observation: RealmObservation,
+  navToTaxonDetails: ( ) => void,
+}
+
+const SavedMatch = ( {
+  observation,
+  navToTaxonDetails
+}: Props ) => {
+  const { t } = useTranslation( );
+  const { isConnected } = useNetInfo( );
+
+  const latitude = observation?.privateLatitude || observation?.latitude;
+  const { taxon } = observation;
+
+  return (
+    <ScrollViewWrapper testID="SavedMatch.container">
+      <SavedMatchHeaderRight observation={observation} />
+      <View className={`${matchCardClassTop} mt-[10px]`}>
+        <MatchHeader hideObservationStatus topSuggestion={observation} />
+      </View>
+      <PhotosSection
+        taxon={taxon}
+        obsPhotos={observation.observationPhotos}
+        navToTaxonDetails={navToTaxonDetails}
+        hideTaxonPhotos={!isConnected}
+      />
+      <View className="border-[1.5px] border-white" />
+      {latitude && (
+        <MapSection observation={observation} taxon={taxon} />
+      )}
+      <LocationSection
+        belongsToCurrentUser
+        observation={observation}
+      />
+      <View className={matchCardClassBottom} />
+      {
+        isConnected && (
+          <Button
+            className="mx-4 mb-[30px]"
+            level="primary"
+            text={taxon?.rank_level === 10
+              ? t( "LEARN-MORE-ABOUT-THIS-SPECIES" )
+              : t( "LEARN-MORE-ABOUT-THIS-GROUP" )}
+            onPress={navToTaxonDetails}
+            accessibilityHint={t( "Navigates-to-taxon-details" )}
+          />
+        )
+      }
+    </ScrollViewWrapper>
+  );
+};
+
+export default SavedMatch;
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
new file mode 100644
index 000000000..b055b0a83
--- /dev/null
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer.tsx
@@ -0,0 +1,28 @@
+import { useNavigation } from "@react-navigation/native";
+import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import SavedMatch from "components/ObsDetailsDefaultMode/SavedMatch/SavedMatch";
+import _ from "lodash";
+import React from "react";
+import type { RealmObservation } from "realmModels/types";
+
+interface Props {
+  observation: RealmObservation,
+}
+
+const SavedMatchContainer = ( { observation }: Props ) => {
+  const navigation = useNavigation<NativeStackNavigationProp<Record<string, { id?: number }>>>( );
+
+  const navToTaxonDetails = () => {
+    const navParams = { id: observation.taxon?.id };
+    navigation.push( "TaxonDetails", navParams );
+  };
+
+  return (
+    <SavedMatch
+      observation={observation}
+      navToTaxonDetails={navToTaxonDetails}
+    />
+  );
+};
+
+export default SavedMatchContainer;
diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
new file mode 100644
index 000000000..d99040d3b
--- /dev/null
+++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx
@@ -0,0 +1,50 @@
+import { useNavigation } from "@react-navigation/native";
+import {
+  INatIconButton
+} from "components/SharedComponents";
+import React, { useCallback, useEffect } from "react";
+import type { RealmObservation } from "realmModels/types";
+import {
+  useNavigateToObsEdit,
+  useTranslation
+} from "sharedHooks";
+import colors from "styles/tailwindColors";
+
+interface Props {
+  observation: RealmObservation;
+}
+
+const SavedMatchHeaderRight = ( {
+  observation
+}: Props ) => {
+  const navigation = useNavigation( );
+  const { t } = useTranslation( );
+  const navigateToObsEdit = useNavigateToObsEdit( );
+
+  const headerRight = useCallback(
+    ( ) => (
+      <INatIconButton
+        testID="SavedMatch.editButton"
+        onPress={() => navigateToObsEdit( observation )}
+        icon="pencil"
+        color={String( colors?.darkGray )}
+        accessibilityLabel={t( "Edit" )}
+        size={22}
+      />
+    ),
+    [
+      observation,
+      navigateToObsEdit,
+      t
+    ]
+  );
+
+  useEffect(
+    ( ) => navigation.setOptions( { headerRight } ),
+    [headerRight, navigation]
+  );
+
+  return null;
+};
+
+export default SavedMatchHeaderRight;
diff --git a/src/components/SharedComponents/DisplayTaxonName.tsx b/src/components/SharedComponents/DisplayTaxonName.tsx
index 47d7e7de3..88f234b2e 100644
--- a/src/components/SharedComponents/DisplayTaxonName.tsx
+++ b/src/components/SharedComponents/DisplayTaxonName.tsx
@@ -34,7 +34,7 @@ interface Props {
   showOneNameOnly?: boolean;
   selectable?: boolean;
   small?: boolean;
-  taxon: RealmTaxon | ApiTaxon;
+  taxon?: RealmTaxon | ApiTaxon;
   textCentered?: boolean;
   topTextComponent?: React.ComponentType<TextProps>;
   underlineTopText?: boolean;
diff --git a/src/navigation/StackNavigators/TabStackNavigator.js b/src/navigation/StackNavigators/TabStackNavigator.js
index 8887dbbad..c8b466198 100644
--- a/src/navigation/StackNavigators/TabStackNavigator.js
+++ b/src/navigation/StackNavigators/TabStackNavigator.js
@@ -19,8 +19,8 @@ import MyObservationsContainer from "components/MyObservations/MyObservationsCon
 import Notifications from "components/Notifications/Notifications";
 import DQAContainer from "components/ObsDetails/DQAContainer";
 import ObsDetailsContainer from "components/ObsDetails/ObsDetailsContainer";
-import ObsDetailsDefaultModeContainer
-  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer";
+import ObsDetailsDefaultModeScreensWrapper
+  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper";
 import ProjectDetailsContainer from "components/ProjectDetails/ProjectDetailsContainer";
 import ProjectMembers from "components/ProjectDetails/ProjectMembers";
 import ProjectRequirements from "components/ProjectDetails/ProjectRequirements";
@@ -129,8 +129,8 @@ const FadeInRootExplore = ( ) => fadeInComponent( <RootExploreContainer /> );
 const FadeInMyObservations = ( ) => fadeInComponent( <MyObservationsContainer /> );
 const FadeInUserProfile = ( ) => fadeInComponent( <UserProfile /> );
 const FadeInExploreContainer = ( ) => fadeInComponent( <ExploreContainer /> );
-const FadeInObsDetailsDefaultModeContainer = ( ) => fadeInComponent(
-  <ObsDetailsDefaultModeContainer />
+const FadeInObsDetailsDefaultModeScreensWrapper = ( ) => fadeInComponent(
+  <ObsDetailsDefaultModeScreensWrapper />
 );
 const FadeInObsDetailsContainer = ( ) => fadeInComponent(
   <ObsDetailsContainer />
@@ -226,7 +226,7 @@ const TabStackNavigator = ( { route }: TabStackNavigatorProps ): Node => {
           ? (
             <Stack.Screen
               name="ObsDetails"
-              component={FadeInObsDetailsDefaultModeContainer}
+              component={FadeInObsDetailsDefaultModeScreensWrapper}
               options={OBS_DETAILS_OPTIONS}
             />
           )
diff --git a/src/sharedHooks/useRemoteObservation.js b/src/sharedHooks/useRemoteObservation.ts
similarity index 83%
rename from src/sharedHooks/useRemoteObservation.js
rename to src/sharedHooks/useRemoteObservation.ts
index 0cbfb9895..002f53a98 100644
--- a/src/sharedHooks/useRemoteObservation.js
+++ b/src/sharedHooks/useRemoteObservation.ts
@@ -1,5 +1,5 @@
-// @flow
 import { fetchRemoteObservation } from "api/observations";
+import type { ApiObservation } from "api/types";
 import i18n from "i18next";
 import { RealmContext } from "providers/contexts";
 import { useCallback, useEffect, useMemo } from "react";
@@ -10,7 +10,15 @@ const { useRealm } = RealmContext;
 
 export const fetchRemoteObservationKey = "fetchRemoteObservation";
 
-const filterHiddenContent = observation => {
+interface UseRemoteObservationReturn {
+  remoteObservation: ApiObservation | null | undefined;
+  refetchRemoteObservation: () => void;
+  isRefetching: boolean;
+  fetchRemoteObservationError: Error | null;
+}
+
+const filterHiddenContent
+= ( observation?: ApiObservation | null ): ApiObservation | null | undefined => {
   if ( observation === undefined || observation === null ) {
     return observation;
   }
@@ -24,7 +32,7 @@ const filterHiddenContent = observation => {
   return filteredObservation;
 };
 
-const useRemoteObservation = ( uuid: string, enabled: boolean ): Object => {
+const useRemoteObservation = ( uuid: string, enabled: boolean ): UseRemoteObservationReturn => {
   const fetchRemoteObservationQueryKey = useMemo(
     ( ) => ( [fetchRemoteObservationKey, uuid] ),
     [uuid]
@@ -40,7 +48,7 @@ const useRemoteObservation = ( uuid: string, enabled: boolean ): Object => {
     refetch: refetchRemoteObservation,
     isRefetching,
     error: fetchRemoteObservationError
-  } = useAuthenticatedQuery(
+  } = useAuthenticatedQuery<ApiObservation | null>(
     fetchRemoteObservationQueryKey,
     optsWithAuth => fetchRemoteObservation(
       uuid,
diff --git a/tests/integration/ObsDetails.test.js b/tests/integration/ObsDetails.test.js
index 32c023467..2794b0401 100644
--- a/tests/integration/ObsDetails.test.js
+++ b/tests/integration/ObsDetails.test.js
@@ -1,7 +1,7 @@
 import { screen, waitFor } from "@testing-library/react-native";
 import ObsDetailsContainer from "components/ObsDetails/ObsDetailsContainer";
-import DefaultModeObsDetailsContainer
-  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer";
+import ObsDetailsDefaultModeScreensWrapper
+  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper";
 import inatjs from "inaturalistjs";
 import React from "react";
 import Observation from "realmModels/Observation";
@@ -71,7 +71,7 @@ jest.mock( "@react-navigation/native", () => {
 // Run the same suite of tests for multiple ObsDetails container
 describe.each( [
   { Container: ObsDetailsContainer, name: "ObsDetailsContainer" },
-  { Container: DefaultModeObsDetailsContainer, name: "DefaultModeObsDetailsContainer" }
+  { Container: ObsDetailsDefaultModeScreensWrapper, name: "ObsDetailsDefaultModeScreensWrapper" }
 ] )( "ObsDetails", ( { Container, name } ) => {
   beforeAll( async () => {
     jest.useFakeTimers( );
diff --git a/tests/integration/SavedMatch.test.js b/tests/integration/SavedMatch.test.js
new file mode 100644
index 000000000..001b541bb
--- /dev/null
+++ b/tests/integration/SavedMatch.test.js
@@ -0,0 +1,106 @@
+import { useNetInfo } from "@react-native-community/netinfo";
+import { screen } from "@testing-library/react-native";
+import SavedMatchContainer from "components/ObsDetailsDefaultMode/SavedMatch/SavedMatchContainer";
+import { t } from "i18next";
+import React from "react";
+import factory from "tests/factory";
+import faker from "tests/helpers/faker";
+import { renderAppWithComponent } from "tests/helpers/render";
+import setupUniqueRealm from "tests/helpers/uniqueRealm";
+
+// UNIQUE REALM SETUP
+const mockRealmIdentifier = __filename;
+const { mockRealmModelsIndex, uniqueRealmBeforeAll, uniqueRealmAfterAll } = setupUniqueRealm(
+  mockRealmIdentifier
+);
+jest.mock( "realmModels/index", ( ) => mockRealmModelsIndex );
+jest.mock( "providers/contexts", ( ) => {
+  const originalModule = jest.requireActual( "providers/contexts" );
+  return {
+    __esModule: true,
+    ...originalModule,
+    RealmContext: {
+      ...originalModule.RealmContext,
+      useRealm: ( ) => global.mockRealms[mockRealmIdentifier],
+      useQuery: ( ) => []
+    }
+  };
+} );
+beforeAll( uniqueRealmBeforeAll );
+afterAll( uniqueRealmAfterAll );
+// /UNIQUE REALM SETUP
+
+const mockObservation = factory( "LocalObservation", {
+  _created_at: faker.date.past( ),
+  created_at: "2022-11-27T19:07:41-08:00",
+  time_observed_at: "2023-12-14T21:07:41-09:30",
+  observationPhotos: [
+    factory( "LocalObservationPhoto", {
+      photo: {
+        id: faker.number.int( ),
+        attribution: faker.lorem.sentence( ),
+        licenseCode: "cc-by-nc",
+        url: faker.image.url( )
+      }
+    } )
+  ],
+  taxon: factory( "LocalTaxon", {
+    name: faker.person.firstName( ),
+    rank: "species",
+    rank_level: 10,
+    preferred_common_name: faker.person.fullName( ),
+    defaultPhoto: {
+      id: faker.number.int( ),
+      attribution: faker.lorem.sentence( ),
+      licenseCode: "cc-by-nc",
+      url: faker.image.url( )
+    }
+  } ),
+  user: factory( "LocalUser", {
+    login: faker.internet.userName( ),
+    iconUrl: faker.image.url( ),
+    locale: "en"
+  } ),
+  identifications: []
+} );
+
+const mockPush = jest.fn();
+jest.mock( "@react-navigation/native", () => {
+  const actualNav = jest.requireActual( "@react-navigation/native" );
+  return {
+    ...actualNav,
+    useNavigation: () => ( {
+      push: mockPush,
+      setOptions: jest.fn()
+    } )
+  };
+} );
+
+describe( "SavedMatch", ( ) => {
+  beforeEach( async ( ) => {
+    jest.clearAllMocks( );
+  } );
+
+  it( "should not show learn more button when offline", async ( ) => {
+    useNetInfo.mockImplementation( ( ) => ( { isConnected: false } ) );
+    renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
+    const learnMoreButton = screen.queryByText( t( "LEARN-MORE-ABOUT-THIS-SPECIES" ) );
+    expect( learnMoreButton ).toBeFalsy( );
+  } );
+
+  it( "should not show map section for no latitude", async ( ) => {
+    renderAppWithComponent( <SavedMatchContainer observation={mockObservation} /> );
+    const mapSection = screen.queryByTestId( "MapSection" );
+    expect( mapSection ).toBeFalsy( );
+  } );
+
+  const mockObservationWithLatitude = factory( "LocalObservation", {
+    latitude: faker.location.latitude( )
+  } );
+
+  it( "should show map section when latitude is present", async ( ) => {
+    renderAppWithComponent( <SavedMatchContainer observation={mockObservationWithLatitude} /> );
+    const mapSection = screen.queryByTestId( "MapSection" );
+    expect( mapSection ).toBeTruthy( );
+  } );
+} );
diff --git a/tests/unit/components/DisplayTaxonName.test.js b/tests/unit/components/DisplayTaxonName.test.js
index 9c12ce97f..4bd9e45e0 100644
--- a/tests/unit/components/DisplayTaxonName.test.js
+++ b/tests/unit/components/DisplayTaxonName.test.js
@@ -275,6 +275,14 @@ describe( "DisplayTaxonName", ( ) => {
     } );
   } );
 
+  describe( "when taxon is undefined", ( ) => {
+    it( "it displays fallback text", ( ) => {
+      let taxon;
+      render( <DisplayTaxonName taxon={taxon} /> );
+      expect( screen.getByText( /Unknown/ ) ).toBeTruthy( );
+    } );
+  } );
+
   describe( "when displayed as plain text within a Trans component", ( ) => {
     it( "it displays common name followed by scientific name", async ( ) => {
       render( <DisplayTaxonName taxon={subspeciesTaxon} removeStyling layout="horizontal" /> );
diff --git a/tests/unit/components/ObsDetailsDefaultMode/ObsDetails.test.js b/tests/unit/components/ObsDetailsDefaultMode/ObsDetails.test.js
index 7399eb0c9..8441b4352 100644
--- a/tests/unit/components/ObsDetailsDefaultMode/ObsDetails.test.js
+++ b/tests/unit/components/ObsDetailsDefaultMode/ObsDetails.test.js
@@ -128,8 +128,32 @@ jest.mock( "sharedHooks/useObservationsUpdates", () => ( {
   } ) )
 } ) );
 
-const renderObsDetails = ( ) => renderComponent(
-  <ObsDetailsContainer />
+const mockRefetchRemoteObservation = jest.fn();
+const mockMarkViewedLocally = jest.fn();
+const mockMarkDeletedLocally = jest.fn();
+const mockSetRemoteObsWasDeleted = jest.fn();
+
+const defaultProps = {
+  belongsToCurrentUser: false,
+  currentUser: mockUser,
+  fetchRemoteObservationError: null,
+  isConnected: true,
+  isRefetching: false,
+  isSimpleMode: false,
+  localObservation: null,
+  markDeletedLocally: mockMarkDeletedLocally,
+  markViewedLocally: mockMarkViewedLocally,
+  observation: mockObservation,
+  refetchRemoteObservation: mockRefetchRemoteObservation,
+  remoteObservation: mockObservation,
+  remoteObsWasDeleted: false,
+  setRemoteObsWasDeleted: mockSetRemoteObsWasDeleted,
+  targetActivityItemID: null,
+  uuid: mockObservation.uuid
+};
+
+const renderObsDetails = ( props = {} ) => renderComponent(
+  <ObsDetailsContainer {...defaultProps} {...props} />
 );
 
 describe( "ObsDetails", () => {
@@ -156,7 +180,11 @@ describe( "ObsDetails", () => {
     } );
 
     it( "should render fallback image icon instead of photos", async () => {
-      renderObsDetails( );
+      renderObsDetails( {
+        observation: mockNoEvidenceObservation,
+        remoteObservation: mockNoEvidenceObservation,
+        uuid: mockNoEvidenceObservation.uuid
+      } );
 
       const labelText = t( "Observation-has-no-photos-and-no-sounds" );
       const fallbackImage = await screen.findByLabelText( labelText );
@@ -194,7 +222,13 @@ describe( "ObsDetails", () => {
       } );
 
       jest.spyOn( useCurrentUser, "default" ).mockImplementation( () => mockUser );
-      renderObsDetails( );
+      renderObsDetails( {
+        observation: otherUserObservation,
+        remoteObservation: otherUserObservation,
+        uuid: otherUserObservation.uuid,
+        belongsToCurrentUser: false,
+        localObservation: null
+      } );
       const agreeButton = screen.getByTestId(
         `ActivityItem.AgreeIdButton.${firstIdentification.taxon.id}`
       );
diff --git a/tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js b/tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js
new file mode 100644
index 000000000..e60090504
--- /dev/null
+++ b/tests/unit/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper.test.js
@@ -0,0 +1,133 @@
+import { screen } from "@testing-library/react-native";
+import ObsDetailsDefaultModeScreensWrapper
+  from "components/ObsDetailsDefaultMode/ObsDetailsDefaultModeScreensWrapper";
+import React from "react";
+import * as useLocalObservation from "sharedHooks/useLocalObservation";
+import factory from "tests/factory";
+import faker from "tests/helpers/faker";
+import { renderComponent } from "tests/helpers/render";
+
+const mockCurrentUser = factory( "LocalUser", {
+  id: 123,
+  login: faker.internet.userName( )
+} );
+
+const mockLocalObservation = factory( "LocalObservation", {
+  user: factory( "LocalUser", {
+    id: 123
+  } ),
+  uuid: "test-123"
+} );
+
+jest.mock( "@react-native-community/netinfo", () => ( {
+  useNetInfo: () => ( { isConnected: true } ),
+  configure: jest.fn( )
+} ) );
+
+jest.mock( "sharedHooks/useCurrentUser", () => ( {
+  __esModule: true,
+  default: () => mockCurrentUser
+} ) );
+jest.mock( "sharedHooks/useLocalObservation", () => ( {
+  __esModule: true,
+  default: jest.fn( () => ( {
+    localObservation: null
+  } ) )
+} ) );
+jest.mock( "sharedHooks/useRemoteObservation", ( ) => ( {
+  __esModule: true,
+  default: ( _uuid, _fetchRemoteEnabled ) => ( {
+    remoteObservation: null,
+    refetchRemoteObservation: jest.fn( ),
+    isRefetching: false,
+    fetchRemoteObservationError: null
+  } )
+} ) );
+
+describe( "ObsDetailsDefaultModeScreensWrapper", ( ) => {
+  describe( "when showSavedMatch is true", ( ) => {
+    it(
+      "renders SavedMatchContainer when observation belongs to current user and is not synced",
+      ( ) => {
+        const unsyncedLocalObservation = {
+          ...mockLocalObservation,
+          wasSynced: jest.fn( () => false )
+        };
+
+        jest.spyOn( useLocalObservation, "default" ).mockImplementation( () => ( {
+          localObservation: unsyncedLocalObservation,
+          markDeletedLocally: jest.fn( ),
+          markViewedLocally: jest.fn( )
+        } ) );
+
+        renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
+
+        expect( screen.getByTestId( "SavedMatch.container" ) ).toBeTruthy( );
+        expect( screen.queryByTestId( "ObsDetails.container" ) ).toBeFalsy( );
+      }
+    );
+
+    it( "renders SavedMatchContainer when observation has no user and is not synced", ( ) => {
+      const unsyncedLocalObservationNoUser = factory( "LocalObservation", {
+        user: null,
+        uuid: "test-123",
+        wasSynced: jest.fn( () => false )
+      } );
+
+      jest.spyOn( useLocalObservation, "default" ).mockImplementation( () => ( {
+        localObservation: unsyncedLocalObservationNoUser,
+        markDeletedLocally: jest.fn( ),
+        markViewedLocally: jest.fn( )
+      } ) );
+
+      renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
+
+      expect( screen.getByTestId( "SavedMatch.container" ) ).toBeTruthy( );
+      expect( screen.queryByTestId( "ObsDetails.container" ) ).toBeFalsy( );
+    } );
+  } );
+
+  describe( "when showSavedMatch is false", ( ) => {
+    it( "renders ObsDetailsDefaultModeContainer when observation is synced", ( ) => {
+      const syncedLocalObservation = {
+        ...mockLocalObservation,
+        wasSynced: jest.fn( () => true )
+      };
+
+      jest.spyOn( useLocalObservation, "default" ).mockImplementation( () => ( {
+        localObservation: syncedLocalObservation,
+        markDeletedLocally: jest.fn( ),
+        markViewedLocally: jest.fn( )
+      } ) );
+
+      renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
+
+      expect( screen.getByTestId( "ObsDetails.container" ) ).toBeTruthy( );
+      expect( screen.queryByTestId( "SavedMatch.container" ) ).toBeFalsy( );
+    } );
+
+    it(
+      "renders ObsDetailsDefaultModeContainer when observation does not belong to current user",
+      ( ) => {
+        const otherUserObservation = factory( "LocalObservation", {
+          user: factory( "LocalUser", {
+            id: 456
+          } ),
+          uuid: "test-123",
+          wasSynced: jest.fn( () => false )
+        } );
+
+        jest.spyOn( useLocalObservation, "default" ).mockImplementation( () => ( {
+          localObservation: otherUserObservation,
+          markDeletedLocally: jest.fn( ),
+          markViewedLocally: jest.fn( )
+        } ) );
+
+        renderComponent( <ObsDetailsDefaultModeScreensWrapper /> );
+
+        expect( screen.getByTestId( "ObsDetails.container" ) ).toBeTruthy( );
+        expect( screen.queryByTestId( "SavedMatch.container" ) ).toBeFalsy( );
+      }
+    );
+  } );
+} );