diff --git a/app/src/App.js b/app/src/App.js
index 115798d8..ec6e8bbb 100644
--- a/app/src/App.js
+++ b/app/src/App.js
@@ -13,7 +13,7 @@ import { getAuthToken } from "./api/gram/util/authToken";
 import "./App.css";
 import AdminPage from "./components/admin/AdminPage";
 import { ModalManager } from "./components/elements/modal/ModalManager";
-import ErrorPage from "./components/error-page";
+import { ErrorPage } from "./components/elements/ErrorPage";
 import Home from "./components/home/Home";
 import { Login } from "./components/login/Login";
 import { LoginCallback } from "./components/login/LoginCallback";
diff --git a/app/src/components/error-line/ErrorLine.css b/app/src/components/elements/ErrorLine.css
similarity index 100%
rename from app/src/components/error-line/ErrorLine.css
rename to app/src/components/elements/ErrorLine.css
diff --git a/app/src/components/elements/ErrorLine.js b/app/src/components/elements/ErrorLine.js
new file mode 100644
index 00000000..75c25dc0
--- /dev/null
+++ b/app/src/components/elements/ErrorLine.js
@@ -0,0 +1,6 @@
+import React from "react";
+import "./ErrorLine.css";
+
+export function ErrorLine({ message }) {
+  return <div className="error-line">{message}</div>;
+}
diff --git a/app/src/components/error-page/ErrorPage.css b/app/src/components/elements/ErrorPage.css
similarity index 100%
rename from app/src/components/error-page/ErrorPage.css
rename to app/src/components/elements/ErrorPage.css
diff --git a/app/src/components/elements/ErrorPage.js b/app/src/components/elements/ErrorPage.js
new file mode 100644
index 00000000..96af48ca
--- /dev/null
+++ b/app/src/components/elements/ErrorPage.js
@@ -0,0 +1,20 @@
+import React from "react";
+import "./ErrorPage.css";
+import { useTitle } from "../../hooks/useTitle";
+
+const desc = {
+  404: "The page you are looking for does not exist",
+  403: "You are not allowed to access this resource",
+  500: "Something went terribly wrong. Try checking browser console for errors",
+};
+
+export function ErrorPage({ code }) {
+  useTitle("Page not found");
+
+  return (
+    <div id="error-page">
+      <p className="big">{code.toString()}</p>
+      <p className="desc">{desc[code.toString()]}</p>
+    </div>
+  );
+}
diff --git a/app/src/components/elements/list/ModelList.js b/app/src/components/elements/list/ModelList.js
index 26025d8b..bbda1e90 100644
--- a/app/src/components/elements/list/ModelList.js
+++ b/app/src/components/elements/list/ModelList.js
@@ -1,5 +1,4 @@
 import React from "react";
-import ErrorLine from "../../error-line";
 import Loading from "../../loading";
 import {
   Card,
@@ -12,6 +11,7 @@ import { Link } from "react-router-dom";
 import { SystemName } from "../../reviews/SystemName";
 import { DateLabel } from "../DateLabel";
 import { ModelComplianceBadge } from "../ModelComplianceBadge";
+import { ErrorLine } from "../ErrorLine";
 
 export function ModelList({
   models = [],
diff --git a/app/src/components/error-line/ErrorLine.js b/app/src/components/error-line/ErrorLine.js
deleted file mode 100644
index 0dfba1f8..00000000
--- a/app/src/components/error-line/ErrorLine.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import "./ErrorLine.css";
-
-class ErrorLine extends Component {
-  render = () => {
-    return <div className="error-line">{this.props.message}</div>;
-  };
-}
-
-ErrorLine.propTypes = {
-  message: PropTypes.string.isRequired,
-};
-
-export default ErrorLine;
diff --git a/app/src/components/error-line/ErrorLine.spec.js b/app/src/components/error-line/ErrorLine.spec.js
deleted file mode 100644
index 42d5802c..00000000
--- a/app/src/components/error-line/ErrorLine.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import { cleanup, render } from "@testing-library/react";
-import ErrorLine from "./ErrorLine";
-
-describe("ErrorLine", () => {
-  it("should render successfully", () => {
-    const { queryByText } = render(<ErrorLine message="test" />);
-    expect(queryByText("test", { selector: "div.error-line" })).toBeTruthy();
-  });
-
-  afterAll(() => {
-    cleanup();
-  });
-});
diff --git a/app/src/components/error-line/index.js b/app/src/components/error-line/index.js
deleted file mode 100644
index 6f27b19b..00000000
--- a/app/src/components/error-line/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ErrorLine from "./ErrorLine";
-
-export default ErrorLine;
diff --git a/app/src/components/error-page/ErrorPage.js b/app/src/components/error-page/ErrorPage.js
deleted file mode 100644
index 8c20bacf..00000000
--- a/app/src/components/error-page/ErrorPage.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import "./ErrorPage.css";
-
-const desc = {
-  404: "The page you are looking for does not exist",
-  403: "You are not allowed to access this resource",
-  500: "Something went terribly wrong. Try checking browser console for errors",
-};
-
-class ErrorPage extends Component {
-  render = () => {
-    return (
-      <div id="error-page">
-        <p className="big">{this.props.code.toString()}</p>
-        <p className="desc">{desc[this.props.code.toString()]}</p>
-      </div>
-    );
-  };
-}
-
-ErrorPage.propTypes = {
-  code: PropTypes.number.isRequired,
-};
-
-export default ErrorPage;
diff --git a/app/src/components/error-page/ErrorPage.spec.js b/app/src/components/error-page/ErrorPage.spec.js
deleted file mode 100644
index a69f2da2..00000000
--- a/app/src/components/error-page/ErrorPage.spec.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import { cleanup, render } from "@testing-library/react";
-import ErrorPage from "./ErrorPage";
-
-describe("ErrorPage", () => {
-  it("should render 404 page successfully", () => {
-    const { queryByText } = render(<ErrorPage code={404} />);
-    expect(queryByText("404", { selector: "p.big" })).toBeTruthy();
-    expect(
-      queryByText("The page you are looking for does not exist", {
-        selector: "p.desc",
-      })
-    ).toBeTruthy();
-  });
-
-  it("should render 403 page successfully", () => {
-    const { queryByText } = render(<ErrorPage code={403} />);
-    expect(queryByText("403", { selector: "p.big" })).toBeTruthy();
-    expect(
-      queryByText("You are not allowed to access this resource", {
-        selector: "p.desc",
-      })
-    ).toBeTruthy();
-  });
-
-  it("should render 500 page successfully", () => {
-    const { queryByText } = render(<ErrorPage code={500} />);
-    expect(queryByText("500", { selector: "p.big" })).toBeTruthy();
-    expect(
-      queryByText(
-        "Something went terribly wrong. Try checking browser console for errors",
-        { selector: "p.desc" }
-      )
-    ).toBeTruthy();
-  });
-
-  it("should render null page successfully", () => {
-    const { queryByText } = render(<ErrorPage code={123} />);
-    expect(queryByText(/.+/, { selector: "p.desc" })).toBeNull();
-  });
-
-  afterAll(() => {
-    cleanup();
-  });
-});
diff --git a/app/src/components/error-page/index.js b/app/src/components/error-page/index.js
deleted file mode 100644
index 2438d9a4..00000000
--- a/app/src/components/error-page/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ErrorPage from "./ErrorPage";
-
-export default ErrorPage;
diff --git a/app/src/components/model/Model.js b/app/src/components/model/Model.js
index d74dd1f3..9f749934 100644
--- a/app/src/components/model/Model.js
+++ b/app/src/components/model/Model.js
@@ -18,12 +18,13 @@ import { PERMISSIONS } from "./constants";
 import "./Model.css";
 import { LeftPanel } from "./panels/left/LeftPanel";
 import { RightPanel } from "./panels/right/RightPanel";
+import { ErrorPage } from "../elements/ErrorPage";
 
 export function Model() {
   const dispatch = useDispatch();
 
   const { id } = useParams("/model/:id");
-  const { data: model } = useGetModelQuery(id);
+  const { data: model, isError, error } = useGetModelQuery(id);
 
   useEffect(() => {
     model && dispatch(loadModel(model));
@@ -50,11 +51,10 @@ export function Model() {
 
   // if write permission sync model changes (patch component) to the backend
   useModelSync();
-  // useEffect(() => {
-  //   if (id && writeAllowed) {
-  //     return store.subscribe(useModelSyncListener(store, dispatch));
-  //   }
-  // }, [store, id, writeAllowed]);
+
+  if (isError) {
+    return <ErrorPage code={error.originalStatus} />;
+  }
 
   if (model?.id !== id) return <LoadingPage isLoading={true} />;
 
diff --git a/app/src/components/model/New.js b/app/src/components/model/New.js
index 19933902..70fc08a9 100644
--- a/app/src/components/model/New.js
+++ b/app/src/components/model/New.js
@@ -6,7 +6,6 @@ import {
   useListModelsQuery,
 } from "../../api/gram/model";
 import { useGetSystemQuery } from "../../api/gram/system";
-import ErrorLine from "../error-line";
 import Loading from "../loading";
 import "./New.css";
 import InputLabel from "@mui/material/InputLabel";
@@ -17,6 +16,7 @@ import Select from "@mui/material/Select";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
+import { ErrorLine } from "../elements/ErrorLine";
 
 export function NewWizard() {
   const [version, setVersion] = useState(
diff --git a/app/src/components/model/panels/left/SystemProperties.js b/app/src/components/model/panels/left/SystemProperties.js
index cf6f80c2..bb7eebab 100644
--- a/app/src/components/model/panels/left/SystemProperties.js
+++ b/app/src/components/model/panels/left/SystemProperties.js
@@ -1,7 +1,7 @@
 import { Card, CardContent, Skeleton, Typography } from "@mui/material";
 import { uniqueId } from "lodash";
 import { useGetSystemPropertiesQuery } from "../../../../api/gram/system-properties";
-import ErrorLine from "../../../error-line";
+import { ErrorLine } from "../../../elements/ErrorLine";
 
 export function SystemProperties({ modelId }) {
   const {
diff --git a/app/src/components/system/System.js b/app/src/components/system/System.js
index 60ce7ab4..6d202e9e 100644
--- a/app/src/components/system/System.js
+++ b/app/src/components/system/System.js
@@ -8,7 +8,7 @@ import {
 } from "../../api/gram/system";
 import { useTitle } from "../../hooks/useTitle";
 import { ModelList } from "../elements/list/ModelList";
-import ErrorPage from "../error-page";
+import { ErrorPage } from "../elements/ErrorPage";
 import Loading from "../loading";
 import { PERMISSIONS } from "../model/constants";
 import "./System.css";
@@ -19,7 +19,12 @@ export function System() {
 
   const { data: permissions, isLoading: isLoadingPermissions } =
     useGetSystemPermissionsQuery({ systemId });
-  const { data: system, isLoading: isLoadingSystem } = useGetSystemQuery({
+  const {
+    data: system,
+    isLoading: isLoadingSystem,
+    isError,
+    error,
+  } = useGetSystemQuery({
     systemId,
   });
   const { data: models, isLoading: isLoadingModels } = useListModelsQuery({
@@ -27,7 +32,7 @@ export function System() {
     systemId,
   });
 
-  useTitle(isLoadingSystem ? "Loading..." : "System: " + system.displayName);
+  useTitle(isLoadingSystem ? "Loading..." : "System: " + system?.displayName);
 
   if (isLoadingPermissions || isLoadingSystem) {
     return (
@@ -38,6 +43,10 @@ export function System() {
     );
   }
 
+  if (isError) {
+    return <ErrorPage code={error.originalStatus} />;
+  }
+
   if (!permissions.includes(PERMISSIONS.READ)) {
     return <ErrorPage code={403} />;
   }