diff --git a/projects/netgrif-components/src/assets/error-pages/404.html b/projects/netgrif-components/src/assets/error-pages/404.html
new file mode 100644
index 0000000000..5fe891bf41
--- /dev/null
+++ b/projects/netgrif-components/src/assets/error-pages/404.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page not found</title>
+    <style>
+        body, html {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+        }
+        .image-left {
+            height: 100%;
+            width: 100%;
+            background-image: url(background_left.svg);
+            background-repeat: no-repeat;
+            background-position-x: left;
+            background-position-y: top;
+        }
+        .image-right {
+            height: 100%;
+            width: 100%;
+            background-image: url(background_right.svg);
+            background-repeat: no-repeat;
+            background-position-x: right;
+            background-position-y: bottom;
+        }
+        .page-card {
+            padding: 24px;
+            border-radius: 12px;
+            opacity: 80%;
+            background-color: rgba(0,0,0,.12);
+            text-align: center;
+            box-shadow: 0 4px 2px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 2px 4px 0 rgba(0,0,0,.12);
+        }
+        .parent {
+            display: flex;
+            flex: 120%;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+        }
+        .show-normal {
+            display: flex;
+            flex-direction: row;
+            height: 100%;
+            width: 100%
+        }
+        .link-button {
+            display: inline-block;
+            text-decoration: none;
+            padding: 0.5rem;
+            border: 2px solid #157eff;
+            border-radius: 6px;
+        }
+        .show-mobile {
+            display: none;
+        }
+
+        @media screen and (max-width: 600px) {
+            .show-normal {
+                display: none;
+            }
+            .show-mobile {
+                display: flex;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="show-normal">
+        <div class="image-left"></div>
+        <div class="parent">
+            <div class="page-card">
+                <h1>404</h1>
+                <h2>Sorry, that link is missing!</h2>
+                <a class="link-button" href="/home">Go to the homepage</a>
+            </div>
+        </div>
+        <div class="image-right"></div>
+    </div>
+    <div class="parent show-mobile">
+        <div class="page-card">
+            <h1>404</h1>
+            <h2>Sorry, that link is missing!</h2>
+            <a class="link-button" href="/home">Go to the homepage</a>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/projects/netgrif-components/src/assets/error-pages/500.html b/projects/netgrif-components/src/assets/error-pages/500.html
new file mode 100644
index 0000000000..faf22a72f6
--- /dev/null
+++ b/projects/netgrif-components/src/assets/error-pages/500.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Something went wrong</title>
+    <style>
+        body, html {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+        }
+        .image-left {
+            height: 100%;
+            width: 100%;
+            background-image: url(background_left.svg);
+            background-repeat: no-repeat;
+            background-position-x: left;
+            background-position-y: top;
+        }
+        .image-right {
+            height: 100%;
+            width: 100%;
+            background-image: url(background_right.svg);
+            background-repeat: no-repeat;
+            background-position-x: right;
+            background-position-y: bottom;
+        }
+        .page-card {
+            padding: 24px;
+            border-radius: 12px;
+            opacity: 80%;
+            background-color: rgba(0,0,0,.12);
+            text-align: center;
+            box-shadow: 0 4px 2px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 2px 4px 0 rgba(0,0,0,.12);
+        }
+        .parent {
+            display: flex;
+            flex: 120%;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+        }
+        .show-normal {
+            display: flex;
+            flex-direction: row;
+            height: 100%;
+            width: 100%
+        }
+        .link-button {
+            display: inline-block;
+            text-decoration: none;
+            padding: 0.5rem;
+            border: 2px solid #157eff;
+            border-radius: 6px;
+        }
+        .show-mobile {
+            display: none;
+        }
+
+        @media screen and (max-width: 600px) {
+            .show-normal {
+                display: none;
+            }
+            .show-mobile {
+                display: flex;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="show-normal">
+    <div class="image-left"></div>
+    <div class="parent">
+        <div class="page-card">
+            <h1>500</h1>
+            <h2>Something went wrong!</h2>
+            <a class="link-button" href="/home">Go to the homepage</a>
+        </div>
+    </div>
+    <div class="image-right"></div>
+</div>
+<div class="parent show-mobile">
+    <div class="page-card">
+        <h1>500</h1>
+        <h2>Something went wrong!</h2>
+        <a class="link-button" href="/home">Go to the homepage</a>
+    </div>
+</div>
+</body>
+</html>
diff --git a/projects/netgrif-components/src/assets/error-pages/background_left.svg b/projects/netgrif-components/src/assets/error-pages/background_left.svg
new file mode 100644
index 0000000000..8070320bf5
--- /dev/null
+++ b/projects/netgrif-components/src/assets/error-pages/background_left.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="362px" height="361px" viewBox="-0.5 -0.5 362 361" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="80" y="160" width="40" height="40" fill="#d2d2d2" stroke="#d2d2d2" pointer-events="all"/><rect x="40" y="200" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="0" y="160" width="40" height="40" fill="#eeeeee" stroke="#eeeeee" pointer-events="all"/><rect x="0" y="240" width="40" height="40" fill="#eeeeee" stroke="#eeeeee" pointer-events="all"/><rect x="0" y="200" width="40" height="40" fill="#5c35b0" stroke="#5c35b0" pointer-events="all"/><rect x="160" y="40" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="160" y="0" width="40" height="40" fill="#2297f4" stroke="#2297f4" pointer-events="all"/><rect x="120" y="80" width="40" height="40" fill="#5c35b0" stroke="none" pointer-events="all"/><rect x="80" y="120" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="80" y="80" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="0" y="80" width="80" height="80" fill="#2297f4" stroke="#2297f4" pointer-events="all"/><rect x="80" y="0" width="80" height="80" fill="#d2d2d2" stroke="#d2d2d2" pointer-events="all"/><rect x="200" y="40" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="240" y="0" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="320" y="0" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="120" y="120" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="40" y="240" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="80" y="240" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="0" y="320" width="40" height="40" fill="#eeeeee" stroke="#eeeeee" pointer-events="all"/><rect x="0" y="0" width="80" height="80" fill="#13b0d4" stroke="#13b0d4" pointer-events="all"/></g></svg>
\ No newline at end of file
diff --git a/projects/netgrif-components/src/assets/error-pages/background_right.svg b/projects/netgrif-components/src/assets/error-pages/background_right.svg
new file mode 100644
index 0000000000..988ad83e70
--- /dev/null
+++ b/projects/netgrif-components/src/assets/error-pages/background_right.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="161px" height="121px" viewBox="-0.5 -0.5 161 121" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="80" y="80" width="40" height="40" fill="#5c35b0" stroke="none" pointer-events="all"/><rect x="80" y="40" width="40" height="40" fill="#d2d2d2" stroke="none" pointer-events="all"/><rect x="40" y="80" width="40" height="40" fill="#d2d2d2" stroke="none" pointer-events="all"/><rect x="120" y="80" width="40" height="40" fill="#d2d2d2" stroke="none" pointer-events="all"/><rect x="40" y="40" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="120" y="0" width="40" height="40" fill="#eeeeee" stroke="none" pointer-events="all"/><rect x="120" y="40" width="40" height="40" fill="#2297f4" stroke="none" pointer-events="all"/><rect x="0" y="80" width="40" height="40" fill="#5c35b0" stroke="none" pointer-events="all"/></g></svg>
\ No newline at end of file
