diff --git a/front-end/package-lock.json b/front-end/package-lock.json
index 161a497f..b3da3524 100644
--- a/front-end/package-lock.json
+++ b/front-end/package-lock.json
@@ -11,6 +11,7 @@
         "@ebay/nice-modal-react": "^1.2.10",
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
+        "@fontsource/roboto": "^5.1.0",
         "@mui/icons-material": "^5.14.1",
         "@mui/lab": "^5.0.0-alpha.137",
         "@mui/material": "^5.14.1",
@@ -1039,6 +1040,11 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource/roboto": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.0.tgz",
+      "integrity": "sha512-cFRRC1s6RqPygeZ8Uw/acwVHqih8Czjt6Q0MwoUoDe9U3m4dH1HmNDRBZyqlMSFwgNAUKgFImncKdmDHyKpwdg=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -8078,6 +8084,11 @@
       "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
       "dev": true
     },
+    "@fontsource/roboto": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.0.tgz",
+      "integrity": "sha512-cFRRC1s6RqPygeZ8Uw/acwVHqih8Czjt6Q0MwoUoDe9U3m4dH1HmNDRBZyqlMSFwgNAUKgFImncKdmDHyKpwdg=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
diff --git a/front-end/package.json b/front-end/package.json
index 893bf27a..68adb3f9 100644
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -13,6 +13,7 @@
     "@ebay/nice-modal-react": "^1.2.10",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.1.0",
     "@mui/icons-material": "^5.14.1",
     "@mui/lab": "^5.0.0-alpha.137",
     "@mui/material": "^5.14.1",
diff --git a/front-end/src/api/events/display-event.ts b/front-end/src/api/events/display-event.ts
index acc7b383..5cd83278 100644
--- a/front-end/src/api/events/display-event.ts
+++ b/front-end/src/api/events/display-event.ts
@@ -1,8 +1,23 @@
+import { Displays } from '@toa-lib/models';
 import { useRecoilCallback } from 'recoil';
-import { displayIdAtom } from 'src/stores/recoil';
+import {
+  displayIdAtom,
+  matchOccurringAtom,
+  matchOccurringRanksAtom,
+  matchResultsMatchAtom,
+  matchResultsRanksAtom
+} from 'src/stores/recoil';
 
 export const useDisplayEvent = () => {
-  return useRecoilCallback(({ set }) => async (id: number) => {
+  return useRecoilCallback(({ set, snapshot }) => async (id: number) => {
+    // For match result, we store the currentMatchAtom to matchResultsMatchAtom to avoid the results screen updating when the match is updated.
+    if (id === Displays.MATCH_RESULTS) {
+      const match = await snapshot.getPromise(matchOccurringAtom);
+      set(matchResultsMatchAtom, JSON.parse(JSON.stringify(match)));
+
+      const ranks = await snapshot.getPromise(matchOccurringRanksAtom);
+      set(matchResultsRanksAtom, JSON.parse(JSON.stringify(ranks)));
+    }
     set(displayIdAtom, id);
   });
 };
diff --git a/front-end/src/apps/audience-display/displays/ad-default.tsx b/front-end/src/apps/audience-display/displays/ad-default.tsx
index 0cb1af64..f2b1362f 100644
--- a/front-end/src/apps/audience-display/displays/ad-default.tsx
+++ b/front-end/src/apps/audience-display/displays/ad-default.tsx
@@ -4,6 +4,8 @@ import { useRecoilValue } from 'recoil';
 import {
   matchOccurringAtom,
   matchOccurringRanksAtom,
+  matchResultsMatchAtom,
+  matchResultsRanksAtom,
   matchStateAtom
 } from 'src/stores/recoil';
 import { useEvent } from 'src/api/use-event-data';
@@ -28,7 +30,9 @@ import { useTeamsForEvent } from 'src/api/use-team-data';
  */
 export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
   const match = useRecoilValue(matchOccurringAtom);
+  const matchResultsMatch = useRecoilValue(matchResultsMatchAtom);
   const ranks = useRecoilValue(matchOccurringRanksAtom);
+  const matchResultsRanks = useRecoilValue(matchResultsRanksAtom);
   const matchState = useRecoilValue(matchStateAtom);
   const [searchParams] = useSearchParams();
 
@@ -86,7 +90,7 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
         return (
           <displays.matchPlayStream
             event={event}
-            match={match}
+            match={matchResultsMatch ?? match}
             ranks={ranks}
             teams={teams}
           />
@@ -95,7 +99,7 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
         return (
           <displays.matchResultsStream
             event={event}
-            match={match}
+            match={matchResultsMatch ?? match}
             ranks={ranks}
             teams={teams}
           />
@@ -111,6 +115,25 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
   const showPreviewFull =
     layout[0] === LayoutMode.FULL || layout[1] === LayoutMode.FULL;
 
+  // show the stream results during the preview
+  const showStreamResultsDuringPreview =
+    layout[2] === LayoutMode.STREAM &&
+    layout[0] === LayoutMode.RESULTS &&
+    id === Displays.MATCH_PREVIEW;
+
+  // show the full results during the preview
+  const showFullResultsDuringPreview =
+    layout[2] === LayoutMode.FULL &&
+    layout[0] === LayoutMode.RESULTS &&
+    id === Displays.MATCH_PREVIEW;
+
+  // force hide the preview if we are showing the results
+  const forceHidePreview =
+    showStreamResultsDuringPreview || showFullResultsDuringPreview;
+
+  const resultsToUse = !matchResultsMatch ? match : matchResultsMatch;
+  const ranksToUse = !matchResultsRanks ? ranks : matchResultsRanks;
+
   return (
     <>
       {/* Displays.BLANK (show nothing) */}
@@ -120,7 +143,11 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
       {showPreviewFull && (
         <AbsolouteLocator top={0} left={0}>
           <FadeInOut
-            in={id === Displays.MATCH_PREVIEW || afterMatchBeforeScore}
+            in={
+              // if we are showing the preview full and we are not showing the results
+              (id === Displays.MATCH_PREVIEW && !forceHidePreview) ||
+              afterMatchBeforeScore
+            }
             duration={0.5}
           >
             <displays.matchPreview
@@ -135,7 +162,7 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
       {layout[0] === LayoutMode.STREAM && (
         <AbsolouteLocator bottom={0} left={0}>
           <SlideInBottom
-            in={id === Displays.MATCH_PREVIEW}
+            in={id === Displays.MATCH_PREVIEW && !forceHidePreview}
             duration={1.25}
             inDelay={0.75}
           >
@@ -185,27 +212,29 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
       {/* Displays.MATCH_RESULTS */}
       {layout[2] === LayoutMode.FULL && (
         <AbsolouteLocator top={0} left={0}>
-          <FadeInOut in={id === Displays.MATCH_RESULTS}>
+          <FadeInOut
+            in={id === Displays.MATCH_RESULTS || showFullResultsDuringPreview}
+          >
             <displays.matchResults
               event={event}
-              match={match}
-              ranks={ranks}
+              match={resultsToUse}
+              ranks={ranksToUse}
               teams={teams}
             />
           </FadeInOut>
         </AbsolouteLocator>
       )}
-      {layout[2] === LayoutMode.STREAM && (
+      {layout[2] === LayoutMode.STREAM && matchResultsMatch && (
         <AbsolouteLocator top={0} left={0}>
           <SlideInLeft
-            in={id === Displays.MATCH_RESULTS}
+            in={id === Displays.MATCH_RESULTS || showStreamResultsDuringPreview}
             duration={1.25}
             inDelay={0.75}
           >
             <displays.matchResultsStream
               event={event}
-              match={match}
-              ranks={ranks}
+              match={resultsToUse}
+              ranks={ranksToUse}
               teams={teams}
             />
           </SlideInLeft>
diff --git a/front-end/src/main.tsx b/front-end/src/main.tsx
index e08f2dc4..b8cda4e2 100644
--- a/front-end/src/main.tsx
+++ b/front-end/src/main.tsx
@@ -13,6 +13,10 @@ import { getFromLocalStorage } from './stores/local-storage';
 import { AppContainer } from './App';
 import { useCurrentEvent } from './api/use-event-data';
 import { CssBaseline } from '@mui/material';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
 
 const container = document.getElementById('root');
 if (!container) throw new Error('Error while trying to find document root.');
diff --git a/front-end/src/stores/recoil/event-state.ts b/front-end/src/stores/recoil/event-state.ts
index 7aa5e097..04196af3 100644
--- a/front-end/src/stores/recoil/event-state.ts
+++ b/front-end/src/stores/recoil/event-state.ts
@@ -53,6 +53,16 @@ export const matchOccurringAtom = atom<Match<any> | null>({
   default: null
 });
 
+// this "freezes" the match occuring atom when the display is set to results so it doesn't update anymore
+export const matchResultsMatchAtom = atom<Match<any> | null>({
+  key: 'eventState.matchResultsMatchAtom',
+  default: null
+});
+export const matchResultsRanksAtom = atom<Ranking[] | null>({
+  key: 'eventState.matchResultsRanksAtom',
+  default: null
+});
+
 export const matchOccurringRanksAtom = atom<Ranking[] | null>({
   key: 'eventState.matchOccurringRanksAtom',
   default: null
diff --git a/lib/models/src/base/Audience.ts b/lib/models/src/base/Audience.ts
index 3d65e244..26b1ceae 100644
--- a/lib/models/src/base/Audience.ts
+++ b/lib/models/src/base/Audience.ts
@@ -26,5 +26,6 @@ export enum AudienceScreens {
 export enum LayoutMode {
   OFF = 'o',
   STREAM = 's',
-  FULL = 'f'
+  FULL = 'f',
+  RESULTS = 'r'
 }