diff --git a/pkg/app/web/src/components/application-detail.stories.tsx b/pkg/app/web/src/components/application-detail.stories.tsx
index 2956b260fc..626d3f7583 100644
--- a/pkg/app/web/src/components/application-detail.stories.tsx
+++ b/pkg/app/web/src/components/application-detail.stories.tsx
@@ -19,6 +19,7 @@ const dummyStore: Partial<AppState> = {
     disabling: {},
     adding: false,
     loading: false,
+    fetchApplicationError: null,
   },
   environments: {
     entities: {
diff --git a/pkg/app/web/src/components/application-detail.tsx b/pkg/app/web/src/components/application-detail.tsx
index cea3c3776d..c71c076907 100644
--- a/pkg/app/web/src/components/application-detail.tsx
+++ b/pkg/app/web/src/components/application-detail.tsx
@@ -22,6 +22,7 @@ import { AppState } from "../modules";
 import {
   Application,
   ApplicationDeploymentReference,
+  fetchApplication,
   selectById as selectApplicationById,
   syncApplication,
 } from "../modules/applications";
@@ -38,6 +39,8 @@ import { DetailTableRow } from "./detail-table-row";
 import { ApplicationHealthStatusIcon } from "./health-status-icon";
 import { SyncStateReason } from "./sync-state-reason";
 import { SyncStatusIcon } from "./sync-status-icon";
+import { SerializedError } from "@reduxjs/toolkit";
+import { UI_TEXT_REFRESH } from "../constants/ui-text";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -95,13 +98,15 @@ const useIsSyncingApplication = (
   });
 };
 
+const ERROR_MESSAGE = "It was unable to fetch the application.";
+
 const MostRecentlySuccessfulDeployment: FC<{
   deployment?: ApplicationDeploymentReference.AsObject;
 }> = ({ deployment }) => {
   const classes = useStyles();
 
   if (!deployment) {
-    return <Skeleton height={63} width={500} />;
+    return <Skeleton height={105} width={500} />;
   }
 
   const date = dayjs(deployment.startedAt * 1000);
@@ -139,12 +144,17 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
   const classes = useStyles();
   const dispatch = useDispatch();
 
-  const [app, liveState] = useSelector<
+  const [app, liveState, fetchApplicationError] = useSelector<
     AppState,
-    [Application | undefined, ApplicationLiveState | undefined]
+    [
+      Application | undefined,
+      ApplicationLiveState | undefined,
+      SerializedError | null
+    ]
   >((state) => [
     selectApplicationById(state.applications, applicationId),
     selectLiveStateById(state.applicationLiveState, applicationId),
+    state.applications.fetchApplicationError,
   ]);
 
   const [pipe, env] = useSelector<
@@ -163,6 +173,30 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
     }
   };
 
+  if (fetchApplicationError) {
+    return (
+      <Paper square elevation={1} className={classes.root}>
+        <Box
+          height={200}
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Typography variant="body1">{ERROR_MESSAGE}</Typography>
+          <Button
+            color="primary"
+            onClick={() => {
+              dispatch(fetchApplication(applicationId));
+            }}
+          >
+            {UI_TEXT_REFRESH}
+          </Button>
+        </Box>
+      </Paper>
+    );
+  }
+
   return (
     <Paper square elevation={1} className={classes.root}>
       <Box flex={1}>
@@ -242,7 +276,7 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
               </tbody>
             </table>
           ) : (
-            <Skeleton height={63} width={500} />
+            <Skeleton height={105} width={500} />
           )}
         </div>
 
@@ -258,7 +292,7 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
           variant="outlined"
           color="primary"
           onClick={handleSync}
-          disabled={isSyncing}
+          disabled={isSyncing || !app}
           startIcon={<SyncIcon />}
         >
           SYNC
diff --git a/pkg/app/web/src/components/application-state-view.test.tsx b/pkg/app/web/src/components/application-state-view.test.tsx
index a390ea7c0e..11375a891a 100644
--- a/pkg/app/web/src/components/application-state-view.test.tsx
+++ b/pkg/app/web/src/components/application-state-view.test.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { createStore, render, screen } from "../../test-utils";
 import { ApplicationStateView } from "./application-state-view";
 import { dummyApplicationLiveState } from "../__fixtures__/dummy-application-live-state";
-import { clearError } from "../modules/applications-live-state";
+import { fetchApplicationStateById } from "../modules/applications-live-state";
 import { UI_TEXT_REFRESH } from "../constants/ui-text";
 import userEvent from "@testing-library/user-event";
 
@@ -35,5 +35,7 @@ it("shows refresh button if live state fetching has error", () => {
 
   userEvent.click(screen.getByRole("button", { name: UI_TEXT_REFRESH }));
 
-  expect(store.getActions()).toMatchObject([{ type: clearError.type }]);
+  expect(store.getActions()).toMatchObject([
+    { type: fetchApplicationStateById.pending.type },
+  ]);
 });
diff --git a/pkg/app/web/src/components/application-state-view.tsx b/pkg/app/web/src/components/application-state-view.tsx
index aa956ea615..98f077f8c2 100644
--- a/pkg/app/web/src/components/application-state-view.tsx
+++ b/pkg/app/web/src/components/application-state-view.tsx
@@ -12,7 +12,7 @@ import { UI_TEXT_REFRESH } from "../constants/ui-text";
 import { AppState } from "../modules";
 import {
   ApplicationLiveState,
-  clearError,
+  fetchApplicationStateById,
   selectById as selectLiveStateById,
   selectHasError,
 } from "../modules/applications-live-state";
@@ -52,7 +52,7 @@ export const ApplicationStateView: FC<Props> = memo(
           <Button
             color="primary"
             onClick={() => {
-              dispatch(clearError(applicationId));
+              dispatch(fetchApplicationStateById(applicationId));
             }}
           >
             {UI_TEXT_REFRESH}
diff --git a/pkg/app/web/src/modules/applications-live-state.ts b/pkg/app/web/src/modules/applications-live-state.ts
index 2bf11a2bb4..11655222aa 100644
--- a/pkg/app/web/src/modules/applications-live-state.ts
+++ b/pkg/app/web/src/modules/applications-live-state.ts
@@ -2,7 +2,6 @@ import {
   createAsyncThunk,
   createEntityAdapter,
   createSlice,
-  PayloadAction,
 } from "@reduxjs/toolkit";
 import {
   ApplicationLiveStateSnapshot as ApplicationLiveStateSnapshotModel,
@@ -55,11 +54,7 @@ export const selectHasError = (
 export const applicationLiveStateSlice = createSlice({
   name: "applicationLiveState",
   initialState,
-  reducers: {
-    clearError(state, action: PayloadAction<string>) {
-      state.hasError[action.payload] = false;
-    },
-  },
+  reducers: {},
   extraReducers: (builder) => {
     builder
       .addCase(fetchApplicationStateById.pending, (state, action) => {
@@ -77,6 +72,4 @@ export const applicationLiveStateSlice = createSlice({
   },
 });
 
-export const { clearError } = applicationLiveStateSlice.actions;
-
 export { ApplicationLiveStateSnapshot as ApplicationLiveStateSnapshotModel } from "pipe/pkg/app/web/model/application_live_state_pb";
diff --git a/pkg/app/web/src/modules/applications.test.ts b/pkg/app/web/src/modules/applications.test.ts
index 0753eba278..050fb416d9 100644
--- a/pkg/app/web/src/modules/applications.test.ts
+++ b/pkg/app/web/src/modules/applications.test.ts
@@ -13,6 +13,16 @@ import {
 import { CommandModel, CommandStatus, fetchCommand } from "./commands";
 import * as applicationsAPI from "../api/applications";
 
+const baseState = {
+  adding: false,
+  disabling: {},
+  entities: {},
+  ids: [],
+  loading: false,
+  syncing: {},
+  fetchApplicationError: null,
+};
+
 describe("fetchApplications", () => {
   it("should get applications by options", async () => {
     jest
@@ -49,14 +59,7 @@ describe("applicationsSlice reducer", () => {
       applicationsSlice.reducer(undefined, {
         type: "TEST_ACTION",
       })
-    ).toEqual({
-      adding: false,
-      disabling: {},
-      entities: {},
-      ids: [],
-      loading: false,
-      syncing: {},
-    });
+    ).toEqual(baseState);
   });
 
   describe("fetchApplications", () => {
@@ -66,40 +69,24 @@ describe("applicationsSlice reducer", () => {
           type: fetchApplications.pending.type,
         })
       ).toEqual({
-        adding: false,
-        disabling: {},
-        entities: {},
-        ids: [],
+        ...baseState,
         loading: true,
-        syncing: {},
       });
     });
 
     it(`should handle ${fetchApplications.fulfilled.type}`, () => {
       expect(
-        applicationsSlice.reducer(
-          {
-            adding: false,
-            disabling: {},
-            entities: {},
-            ids: [],
-            loading: false,
-            syncing: {},
-          },
-          {
-            type: fetchApplications.fulfilled.type,
-            payload: [dummyApplication],
-          }
-        )
+        applicationsSlice.reducer(baseState, {
+          type: fetchApplications.fulfilled.type,
+          payload: [dummyApplication],
+          loading: true,
+        })
       ).toEqual({
-        adding: false,
-        disabling: {},
+        ...baseState,
         entities: {
           [dummyApplication.id]: dummyApplication,
         },
         ids: [dummyApplication.id],
-        loading: false,
-        syncing: {},
       });
     });
 
@@ -107,25 +94,14 @@ describe("applicationsSlice reducer", () => {
       expect(
         applicationsSlice.reducer(
           {
-            adding: false,
-            disabling: {},
-            entities: {},
-            ids: [],
+            ...baseState,
             loading: true,
-            syncing: {},
           },
           {
             type: fetchApplications.rejected.type,
           }
         )
-      ).toEqual({
-        adding: false,
-        disabling: {},
-        entities: {},
-        ids: [],
-        loading: false,
-        syncing: {},
-      });
+      ).toEqual(baseState);
     });
   });
 
@@ -141,14 +117,11 @@ describe("applicationsSlice reducer", () => {
       expect(
         applicationsSlice.reducer(
           {
-            adding: false,
-            disabling: {},
+            ...baseState,
             entities: {
               [dummyApplication.id]: dummyApplication,
             },
             ids: [dummyApplication.id],
-            loading: false,
-            syncing: {},
           },
           {
             type: fetchApplication.fulfilled.type,
@@ -156,14 +129,11 @@ describe("applicationsSlice reducer", () => {
           }
         )
       ).toEqual({
-        adding: false,
-        disabling: {},
+        ...baseState,
         entities: {
           [dummyApplication.id]: updatedApplication,
         },
         ids: [dummyApplication.id],
-        loading: false,
-        syncing: {},
       });
     });
 
@@ -171,28 +141,22 @@ describe("applicationsSlice reducer", () => {
       expect(
         applicationsSlice.reducer(
           {
-            adding: false,
-            disabling: {},
+            ...baseState,
             entities: {
               [dummyApplication.id]: dummyApplication,
             },
             ids: [dummyApplication.id],
-            loading: false,
-            syncing: {},
           },
           {
             type: fetchApplication.fulfilled.type,
           }
         )
       ).toEqual({
-        adding: false,
-        disabling: {},
+        ...baseState,
         entities: {
           [dummyApplication.id]: dummyApplication,
         },
         ids: [dummyApplication.id],
-        loading: false,
-        syncing: {},
       });
     });
   });
@@ -200,26 +164,12 @@ describe("applicationsSlice reducer", () => {
   describe("addApplication", () => {
     it(`should handle ${addApplication.pending.type}`, () => {
       expect(
-        applicationsSlice.reducer(
-          {
-            adding: false,
-            disabling: {},
-            entities: {},
-            ids: [],
-            loading: false,
-            syncing: {},
-          },
-          {
-            type: addApplication.pending.type,
-          }
-        )
+        applicationsSlice.reducer(baseState, {
+          type: addApplication.pending.type,
+        })
       ).toEqual({
+        ...baseState,
         adding: true,
-        disabling: {},
-        entities: {},
-        ids: [],
-        loading: false,
-        syncing: {},
       });
     });
 
@@ -227,50 +177,28 @@ describe("applicationsSlice reducer", () => {
       expect(
         applicationsSlice.reducer(
           {
+            ...baseState,
             adding: true,
-            disabling: {},
-            entities: {},
-            ids: [],
-            loading: false,
-            syncing: {},
           },
           {
             type: addApplication.fulfilled.type,
           }
         )
-      ).toEqual({
-        adding: false,
-        disabling: {},
-        entities: {},
-        ids: [],
-        loading: false,
-        syncing: {},
-      });
+      ).toEqual(baseState);
     });
 
     it(`should handle ${addApplication.rejected.type}`, () => {
       expect(
         applicationsSlice.reducer(
           {
+            ...baseState,
             adding: true,
-            disabling: {},
-            entities: {},
-            ids: [],
-            loading: false,
-            syncing: {},
           },
           {
             type: addApplication.rejected.type,
           }
         )
-      ).toEqual({
-        adding: false,
-        disabling: {},
-        entities: {},
-        ids: [],
-        loading: false,
-        syncing: {},
-      });
+      ).toEqual(baseState);
     });
   });
 
@@ -278,11 +206,7 @@ describe("applicationsSlice reducer", () => {
     expect(
       applicationsSlice.reducer(
         {
-          adding: false,
-          disabling: {},
-          entities: {},
-          ids: [],
-          loading: false,
+          ...baseState,
           syncing: {
             "app-1": true,
           },
@@ -297,11 +221,7 @@ describe("applicationsSlice reducer", () => {
         }
       )
     ).toEqual({
-      adding: false,
-      disabling: {},
-      entities: {},
-      ids: [],
-      loading: false,
+      ...baseState,
       syncing: {
         "app-1": false,
       },
@@ -310,11 +230,7 @@ describe("applicationsSlice reducer", () => {
     expect(
       applicationsSlice.reducer(
         {
-          adding: false,
-          disabling: {},
-          entities: {},
-          ids: [],
-          loading: false,
+          ...baseState,
           syncing: {
             "app-1": true,
           },
@@ -329,11 +245,7 @@ describe("applicationsSlice reducer", () => {
         }
       )
     ).toEqual({
-      adding: false,
-      disabling: {},
-      entities: {},
-      ids: [],
-      loading: false,
+      ...baseState,
       syncing: {
         "app-1": true,
       },
@@ -345,14 +257,11 @@ describe("applicationsSlice reducer", () => {
       expect(
         applicationsSlice.reducer(
           {
-            adding: false,
-            disabling: {},
+            ...baseState,
             entities: {
               [dummyApplication.id]: dummyApplication,
             },
             ids: [dummyApplication.id],
-            loading: false,
-            syncing: {},
           },
           {
             type: disableApplication.pending.type,
@@ -364,7 +273,7 @@ describe("applicationsSlice reducer", () => {
           }
         )
       ).toEqual({
-        adding: false,
+        ...baseState,
         disabling: {
           [dummyApplication.id]: true,
         },
@@ -372,8 +281,6 @@ describe("applicationsSlice reducer", () => {
           [dummyApplication.id]: dummyApplication,
         },
         ids: [dummyApplication.id],
-        loading: false,
-        syncing: {},
       });
     });
 
@@ -381,7 +288,7 @@ describe("applicationsSlice reducer", () => {
       expect(
         applicationsSlice.reducer(
           {
-            adding: false,
+            ...baseState,
             disabling: {
               [dummyApplication.id]: true,
             },
@@ -389,8 +296,6 @@ describe("applicationsSlice reducer", () => {
               [dummyApplication.id]: dummyApplication,
             },
             ids: [dummyApplication.id],
-            loading: false,
-            syncing: {},
           },
           {
             type: disableApplication.fulfilled.type,
@@ -402,14 +307,10 @@ describe("applicationsSlice reducer", () => {
           }
         )
       ).toEqual({
-        adding: false,
+        ...baseState,
         disabling: {
           [dummyApplication.id]: false,
         },
-        entities: {},
-        ids: [],
-        loading: false,
-        syncing: {},
       });
     });
 
@@ -417,7 +318,7 @@ describe("applicationsSlice reducer", () => {
       expect(
         applicationsSlice.reducer(
           {
-            adding: false,
+            ...baseState,
             disabling: {
               [dummyApplication.id]: true,
             },
@@ -425,8 +326,6 @@ describe("applicationsSlice reducer", () => {
               [dummyApplication.id]: dummyApplication,
             },
             ids: [dummyApplication.id],
-            loading: false,
-            syncing: {},
           },
           {
             type: disableApplication.rejected.type,
@@ -438,7 +337,7 @@ describe("applicationsSlice reducer", () => {
           }
         )
       ).toEqual({
-        adding: false,
+        ...baseState,
         disabling: {
           [dummyApplication.id]: false,
         },
@@ -446,8 +345,6 @@ describe("applicationsSlice reducer", () => {
           [dummyApplication.id]: dummyApplication,
         },
         ids: [dummyApplication.id],
-        loading: false,
-        syncing: {},
       });
     });
   });
@@ -455,30 +352,16 @@ describe("applicationsSlice reducer", () => {
   describe("syncApplication", () => {
     it(`should handle ${syncApplication.pending.type}`, () => {
       expect(
-        applicationsSlice.reducer(
-          {
-            adding: false,
-            disabling: {},
-            entities: {},
-            ids: [],
-            loading: false,
-            syncing: {},
-          },
-          {
-            type: syncApplication.pending.type,
-            meta: {
-              arg: {
-                applicationId: dummyApplication.id,
-              },
+        applicationsSlice.reducer(baseState, {
+          type: syncApplication.pending.type,
+          meta: {
+            arg: {
+              applicationId: dummyApplication.id,
             },
-          }
-        )
+          },
+        })
       ).toEqual({
-        adding: false,
-        disabling: {},
-        entities: {},
-        ids: [],
-        loading: false,
+        ...baseState,
         syncing: {
           [dummyApplication.id]: true,
         },
diff --git a/pkg/app/web/src/modules/applications.ts b/pkg/app/web/src/modules/applications.ts
index b9f98f97f5..8b274d0c97 100644
--- a/pkg/app/web/src/modules/applications.ts
+++ b/pkg/app/web/src/modules/applications.ts
@@ -2,6 +2,7 @@ import {
   createSlice,
   createEntityAdapter,
   createAsyncThunk,
+  SerializedError,
 } from "@reduxjs/toolkit";
 import {
   Application as ApplicationModel,
@@ -111,11 +112,13 @@ export const applicationsSlice = createSlice({
     loading: boolean;
     syncing: Record<string, boolean>;
     disabling: Record<string, boolean>;
+    fetchApplicationError: SerializedError | null;
   }>({
     adding: false,
     loading: false,
     syncing: {},
     disabling: {},
+    fetchApplicationError: null,
   }),
   reducers: {},
   extraReducers: (builder) => {
@@ -131,11 +134,18 @@ export const applicationsSlice = createSlice({
       .addCase(fetchApplications.rejected, (state) => {
         state.loading = false;
       })
+      .addCase(fetchApplication.pending, (state) => {
+        state.fetchApplicationError = null;
+      })
       .addCase(fetchApplication.fulfilled, (state, action) => {
+        state.fetchApplicationError = null;
         if (action.payload) {
           applicationsAdapter.upsertOne(state, action.payload);
         }
       })
+      .addCase(fetchApplication.rejected, (state, action) => {
+        state.fetchApplicationError = action.error;
+      })
       .addCase(addApplication.pending, (state) => {
         state.adding = true;
       })
diff --git a/pkg/app/web/src/pages/applications/detail.tsx b/pkg/app/web/src/pages/applications/detail.tsx
index 9dfca4a61e..29717053b7 100644
--- a/pkg/app/web/src/pages/applications/detail.tsx
+++ b/pkg/app/web/src/pages/applications/detail.tsx
@@ -5,7 +5,6 @@ import { ApplicationDetail } from "../../components/application-detail";
 import { ApplicationStateView } from "../../components/application-state-view";
 import { fetchApplication } from "../../modules/applications";
 import {
-  clearError,
   fetchApplicationStateById,
   selectHasError,
 } from "../../modules/applications-live-state";
@@ -18,27 +17,38 @@ export const ApplicationDetailPage: FC = memo(function ApplicationDetailPage() {
   const dispatch = useDispatch();
   const params = useParams<{ applicationId: string }>();
   const applicationId = decodeURIComponent(params.applicationId);
-  const hasLiveStateError = useSelector<AppState, boolean>((state) =>
-    selectHasError(state.applicationLiveState, params.applicationId)
-  );
+  const [hasFetchApplicationError, hasLiveStateError] = useSelector<
+    AppState,
+    [boolean, boolean]
+  >((state) => [
+    state.applications.fetchApplicationError !== null,
+    selectHasError(state.applicationLiveState, params.applicationId),
+  ]);
 
-  const fetchData = (): void => {
+  useEffect(() => {
     if (applicationId) {
-      if (hasLiveStateError === false) {
-        dispatch(fetchApplicationStateById(applicationId));
-      }
+      dispatch(fetchApplicationStateById(applicationId));
       dispatch(fetchApplication(applicationId));
     }
-  };
+  }, [applicationId, dispatch]);
 
-  useEffect(fetchData, [applicationId, dispatch, hasLiveStateError]);
-  useInterval(fetchData, applicationId ? FETCH_INTERVAL : null);
+  useInterval(
+    () => {
+      if (applicationId) {
+        dispatch(fetchApplication(applicationId));
+      }
+    },
+    applicationId && hasFetchApplicationError === false ? FETCH_INTERVAL : null
+  );
 
-  useEffect(() => {
-    return () => {
-      dispatch(clearError(applicationId));
-    };
-  }, [dispatch, applicationId]);
+  useInterval(
+    () => {
+      if (applicationId) {
+        dispatch(fetchApplicationStateById(applicationId));
+      }
+    },
+    applicationId && hasLiveStateError === false ? FETCH_INTERVAL : null
+  );
 
   return (
     <>