diff --git a/frontend/src/components/BrowseDirectors.tsx b/frontend/src/components/BrowseDirectors.tsx
index bb295bd7dc2d29f816a831540660ca40c8a9f00a..10ff6de62618cfe57fd331694e27669789292f70 100644
--- a/frontend/src/components/BrowseDirectors.tsx
+++ b/frontend/src/components/BrowseDirectors.tsx
@@ -2,6 +2,7 @@ import { Space, Spin, Table } from "antd";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import axiosConfig from "../axios-config";
+import { ErrorPage } from "./ErrorPage";
 import { DirectorIO } from "./Preview"
 
 export const BrowseDirectors = () => {
@@ -79,7 +80,7 @@ export const BrowseDirectors = () => {
   ];
 
   if (isError) {
-    return <h3>Something went wrong…</h3>;
+    return <ErrorPage />
   }
 
   return (
diff --git a/frontend/src/components/BrowseMovies.tsx b/frontend/src/components/BrowseMovies.tsx
index 99424432e6235ef1f6b096b9f958357ff8debba2..1d1b967db30af413a2438faad291a0bb87ea28f7 100644
--- a/frontend/src/components/BrowseMovies.tsx
+++ b/frontend/src/components/BrowseMovies.tsx
@@ -15,6 +15,7 @@ import React, {useEffect, useState} from "react";
 import { Link } from "react-router-dom";
 import {CategoryIO, DirectorIO, MovieIO} from "./Preview";
 import axiosConfig from "../axios-config";
+import { ErrorPage } from "./ErrorPage";
 
 const { Panel } = Collapse;
 const { Paragraph } = Typography;
@@ -45,7 +46,7 @@ export const BrowseMovies = () => {
   }, [])
 
   if (isError) {
-    return <h3>Something went wrong…</h3>;
+    return <ErrorPage />
   }
 
   var panelNum = 0;
diff --git a/frontend/src/components/DirectorPage.tsx b/frontend/src/components/DirectorPage.tsx
index 2e497cc665fca28a6a1134f3d91fbdf3b1690e03..7f4c37222a8ac0ad9c53213dd22a32fd2595b8e8 100644
--- a/frontend/src/components/DirectorPage.tsx
+++ b/frontend/src/components/DirectorPage.tsx
@@ -3,6 +3,7 @@ import axiosConfig from '../axios-config';
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { DirectorIO } from "./Preview";
+import { ErrorPage } from "./ErrorPage";
 
 export const DirectorPage = () => {
   const { id: directorId } = useParams();
@@ -23,7 +24,7 @@ export const DirectorPage = () => {
   }, []);
 
   if (isError) {
-    return <h3>Something went wrong…</h3>;
+    return <ErrorPage />;
   }
 
   return (
diff --git a/frontend/src/components/MoviePage.tsx b/frontend/src/components/MoviePage.tsx
index 87ab749a13c0a36f7d464324855788897382c199..c582db8abc6cef6d4a263120ad4af4878ecb5416 100644
--- a/frontend/src/components/MoviePage.tsx
+++ b/frontend/src/components/MoviePage.tsx
@@ -3,6 +3,7 @@ import React, {useEffect, useState} from "react";
 import { Link, useParams } from "react-router-dom";
 import {DirectorIO, MovieIO} from "./Preview";
 import axiosConfig from '../axios-config';
+import { ErrorPage } from "./ErrorPage";
 
 export const MoviePage = () => {
   const { id, name } = useParams();
@@ -29,7 +30,7 @@ export const MoviePage = () => {
   }, [])
 
   if (isError) {
-    return <h3>Something went wrong…</h3>;
+    return <ErrorPage />;
   }
 
   return (
diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index 56cf3ab0ed1573b33a6d8bba4de923c239fc2775..5887bd8f6587ee18d3888bc411d9f32312abb69b 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -14,6 +14,7 @@ import Title from "antd/lib/skeleton/Title";
 import React, {useEffect, useState} from "react";
 import { Link } from "react-router-dom";
 import axiosConfig from "../axios-config";
+import { ErrorPage } from "./ErrorPage";
 
 const contentStyle: React.CSSProperties = {
   height: "320px",
@@ -166,7 +167,7 @@ export const Preview: React.FC = () => {
   }, [])
 
   if (isError) {
-    return <h3>Something went wrong…</h3>;
+    return <ErrorPage />;
   }