diff --git a/src/App.tsx b/src/App.tsx
index c330ada3..7e32dd2d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,12 +6,11 @@ import { getFirebaseRecipe, jsonToString } from "./utils/recipeLoader";
 import { getSubmitPackingUrl, JOB_STATUS } from "./constants/aws";
 import { FIRESTORE_FIELDS } from "./constants/firebase";
 import {
+    useCurrentRecipeData,
     useJobId,
-    useJobLogs,
     useOutputsDirectory,
     useRunTime,
     useSetJobId,
-    useSetJobLogs,
     useSetPackingResults,
 } from "./state/store";
 import PackingInput from "./components/PackingInput";
@@ -25,14 +24,14 @@ const { Link } = Typography;
 
 function App() {
     const [jobStatus, setJobStatus] = useState<string>("");
+    const [jobLogs, setJobLogs] = useState<string>("");
 
-    const setJobLogs = useSetJobLogs();
-    const jobLogs = useJobLogs();
     const setJobId = useSetJobId();
     const jobId = useJobId();
     const setPackingResults = useSetPackingResults();
     const runTime = useRunTime();
     const outputDir = useOutputsDirectory();
+    const edits = useCurrentRecipeData()?.edits || {};
 
     let start = 0;
 
@@ -98,6 +97,7 @@ function App() {
         start = Date.now();
         const response = await fetch(request);
         setJobStatus(JOB_STATUS.SUBMITTED);
+        setJobLogs("");
         const data = await response.json();
         if (response.ok) {
             setJobId(data.jobId);
@@ -140,18 +140,19 @@ function App() {
         if (localJobStatus.status == JOB_STATUS.DONE) {
             setPackingResults({
                 jobId: id,
-                jobLogs: "",
                 resultUrl: localJobStatus.result_path,
                 runTime: range,
                 outputDir: localJobStatus.outputs_directory,
+                edits: edits,
             });
         } else if (localJobStatus.status == JOB_STATUS.FAILED) {
+            setJobLogs(`Packing job failed: ${localJobStatus.error_message}`);
             setPackingResults({
                 jobId: id,
-                jobLogs: `Packing job failed: ${localJobStatus.error_message}`,
                 resultUrl: "",
                 runTime: range,
                 outputDir: "",
+                edits: {}
             });
         }
     };
diff --git a/src/components/PackingInput/index.tsx b/src/components/PackingInput/index.tsx
index a2de51da..6ed61bd6 100644
--- a/src/components/PackingInput/index.tsx
+++ b/src/components/PackingInput/index.tsx
@@ -9,6 +9,7 @@ import {
     useCurrentRecipeObject,
     useInputOptions,
     useLoadInputOptions,
+    useIsLoading,
 } from "../../state/store";
 import Dropdown from "../Dropdown";
 import JSONViewer from "../JSONViewer";
@@ -36,6 +37,7 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
     const selectedRecipeId = useSelectedRecipeId();
     const recipeObj = useCurrentRecipeObject();
     const inputOptions = useInputOptions();
+    const isLoading = useIsLoading();
 
     const loadInputOptions = useLoadInputOptions();
     const loadAllRecipes = useLoadAllRecipes();
@@ -73,7 +75,7 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
     const loadingText = <div className="recipe-select">Loading...</div>;
 
     // No recipe or dropdown options to load
-    if (!recipeObj && !inputOptions[selectedRecipeId]) {
+    if (isLoading) {
         return loadingText;
     }
 
diff --git a/src/components/Viewer/index.tsx b/src/components/Viewer/index.tsx
index 8a2dc79d..1a36e48e 100644
--- a/src/components/Viewer/index.tsx
+++ b/src/components/Viewer/index.tsx
@@ -1,15 +1,43 @@
+import { LoadingOutlined } from "@ant-design/icons";
 import { SIMULARIUM_EMBED_URL } from "../../constants/urls";
-import { useResultUrl } from "../../state/store";
+import { useIsLoading, useIsModified, useIsPacking, useResultUrl } from "../../state/store";
 import "./style.css";
 
 const Viewer = (): JSX.Element => {
     const resultUrl = useResultUrl();
+    const isLoading = useIsLoading();
+    const isPacking = useIsPacking();
+    const isModified = useIsModified();
+
+    const overlayText = isPacking
+        ? "Running..."
+        : isLoading
+        ? "Loading..."
+        : isModified
+        ? "Re-run packing to view result"
+        : "";
+    
+    const activeState = isLoading || isPacking;
+    const showOverlay = activeState || isModified;
+
     return (
         <div className="viewer-container">
             <iframe
                 className="simularium-embed"
                 src={`${SIMULARIUM_EMBED_URL}${resultUrl}`}
             />
+            {showOverlay && (
+                <div className="viewer-overlay">
+                    <div
+                        className={`overlay-content ${
+                            activeState ? "active" : ""
+                        }`}
+                    >
+                        {activeState && <LoadingOutlined />}
+                        <p>{overlayText}</p>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };
diff --git a/src/components/Viewer/style.css b/src/components/Viewer/style.css
index 25ca27d7..479292df 100644
--- a/src/components/Viewer/style.css
+++ b/src/components/Viewer/style.css
@@ -1,6 +1,7 @@
 .viewer-container {
     width: 100%;
     height: 100%;
+    position: relative;
 }
 
 .simularium-embed {
@@ -8,3 +9,34 @@
     height: 100%;
     border: 1px solid black;
 }
+
+.viewer-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #DCDDE5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+}
+
+.overlay-content {
+    color: #989898;
+    font-size: 32px;
+    text-align: center;
+}
+
+.overlay-content.active {
+    color: #468ADE;
+}
+
+.dark-theme .viewer-overlay {
+    background-color: #2C2F38;
+}
+
+.dark-theme .overlay-content.active {
+    color: #8b91ff;
+}
diff --git a/src/state/constants.ts b/src/state/constants.ts
index 46418079..ce3affd0 100644
--- a/src/state/constants.ts
+++ b/src/state/constants.ts
@@ -4,8 +4,8 @@ import { EditableField, PackingResult } from "../types";
 export const EMPTY_FIELDS: readonly EditableField[] = Object.freeze([]);
 export const EMPTY_PACKING_RESULT: PackingResult = Object.freeze({
     jobId: "",
-    jobLogs: "",
     resultUrl: "",
     runTime: 0,
     outputDir: "",
+    edits: {},
 });
diff --git a/src/state/store.ts b/src/state/store.ts
index 48382aed..09fdb074 100644
--- a/src/state/store.ts
+++ b/src/state/store.ts
@@ -42,7 +42,6 @@ type Actions = {
         ) => Promise<void>
     ) => Promise<void>;
     setPackingResults: (results: PackingResult) => void;
-    setJobLogs: (logs: string) => void;
     setJobId: (jobId: string) => void;
 };
 
@@ -137,19 +136,6 @@ export const useRecipeStore = create<RecipeStore>()(
             });
         },
 
-        setJobLogs: (logs: string) => {
-            const currentRecipeId = get().selectedRecipeId;
-            set({
-                packingResults: {
-                    ...get().packingResults,
-                    [currentRecipeId]: {
-                        ...get().packingResults[currentRecipeId],
-                        jobLogs: logs,
-                    },
-                },
-            });
-        },
-
         setJobId: (jobId: string) => {
             const currentRecipeId = get().selectedRecipeId;
             set({
@@ -273,6 +259,20 @@ export const useFieldsToDisplay = () =>
 export const useRecipes = () => useRecipeStore((s) => s.recipes);
 export const usePackingResults = () => useRecipeStore((s) => s.packingResults);
 
+export const useIsLoading = () => {
+    const recipeObj = useCurrentRecipeData();
+    const selectedRecipeId = useSelectedRecipeId();
+    const inputOptions = useInputOptions();
+    return !recipeObj && !inputOptions[selectedRecipeId];
+};
+
+export const useIsModified = () => {
+    const recipeObj = useCurrentRecipeData();
+    const packingResults = useCurrentPackingResult();
+    if (!recipeObj || !packingResults) return false;
+    return !isEqual(recipeObj.edits, packingResults.edits);
+};
+
 export const useCurrentRecipeObject = () => {
     const recipe = useCurrentRecipeData();
     return recipe
@@ -313,11 +313,6 @@ export const useRunTime = () => {
     return results.runTime;
 };
 
-export const useJobLogs = () => {
-    const results = useCurrentPackingResult();
-    return results.jobLogs;
-};
-
 export const useJobId = () => {
     const results = useCurrentPackingResult();
     return results.jobId;
@@ -362,5 +357,4 @@ export const useGetOriginalValue = () =>
     useRecipeStore((s) => s.getOriginalValue);
 export const useSetPackingResults = () =>
     useRecipeStore((s) => s.setPackingResults);
-export const useSetJobLogs = () => useRecipeStore((s) => s.setJobLogs);
 export const useSetJobId = () => useRecipeStore((s) => s.setJobId);
diff --git a/src/style/themeRoot.tsx b/src/style/themeRoot.tsx
index b835a577..3b3309b8 100644
--- a/src/style/themeRoot.tsx
+++ b/src/style/themeRoot.tsx
@@ -18,7 +18,9 @@ export function ThemeRoot({ children }: { children: React.ReactNode }) {
 
     return (
         <ConfigProvider theme={isDark ? darkTheme : lightTheme}>
-            {children}
+            <div className={isDark ? "dark-theme" : "light-theme"}>
+                {children}
+            </div>
         </ConfigProvider>
     );
 }
\ No newline at end of file
diff --git a/src/test/store.test.ts b/src/test/store.test.ts
index 34980ff8..dd31ad25 100644
--- a/src/test/store.test.ts
+++ b/src/test/store.test.ts
@@ -109,28 +109,6 @@ test("editing one recipe does not affect others", async () => {
     expect(result.current.getCurrentValue(path)).toBe(newValue1);
 });
 
-test("setJobLogs updates job logs for current recipe", async () => {
-    const { result } = renderHook(() => useRecipeStore());
-
-    const recipeId = INITIAL_RECIPE_ID;
-    await result.current.selectRecipe(recipeId);
-
-    const logs = "Some Error Message";
-
-    act(() => {
-        result.current.setJobLogs(logs);
-    });
-
-    expect(result.current.packingResults[recipeId].jobLogs).toBe(logs);
-
-    for (const recipeId of Object.keys(result.current.inputOptions)) {
-        if (recipeId !== INITIAL_RECIPE_ID) {
-            // No other job logs should have been updated to `logs`
-            expect(result.current.packingResults[recipeId]?.jobLogs).not.toBe(logs);
-        }
-    }
-});
-
 test("setJobId updates job ID for current recipe", async () => {
     const { result } = renderHook(() => useRecipeStore());
 
@@ -165,6 +143,7 @@ test("setPackingResults updates packing results for current recipe", async () =>
         resultUrl: "http://example.com/result",
         runTime: 120,
         outputDir: "/output/dir",
+        edits: {}
     };
 
     act(() => {
diff --git a/src/types/index.ts b/src/types/index.ts
index 64f73cc1..ea474830 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -42,10 +42,10 @@ export type JobStatusObject = {
 
 export type PackingResult = {
     jobId: string;
-    jobLogs: string;
     resultUrl: string;
     runTime: number;
     outputDir: string;
+    edits: Record<string, string | number>;
 };
 
 export type EditableField = {