diff --git a/pages/404.tsx b/pages/404.tsx
new file mode 100644
index 0000000..2f6f306
--- /dev/null
+++ b/pages/404.tsx
@@ -0,0 +1,79 @@
+import type { NextPage } from "next";
+import Link from "next/link";
+import styles from "../styles/Errorpage.module.css";
+
+const svg = `
+<svg viewBox="30 -20 450 280" x="0" y="0">
+    <!-- Box -->
+    <polygon points="100,70 170,0 370,50 370,180" style="fill:#b58747;" />
+    <defs>
+        <linearGradient id="shadow_grad1" x1="50%" y1="0%" x2="0%" y2="50%">
+            <stop offset="0%" style="stop-color:#876029;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <defs>
+        <linearGradient id="shadow_grad2" x1="0%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:#876029;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <polygon points="100,70 170,0 330,100 300,120" style="fill:#876029;fill:url(#shadow_grad1)" />
+    <polygon points="100,70 170,0 170,130 100,200, 100,70" style="fill:#876029;fill:url(#shadow_grad2)"/>
+    <line x1="170" y1="0" x2="370" y2="50" style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"/>
+    <line x1="170" y1="0" x2="170" y2="130" style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"/>
+    <!-- Katzenschweif -->
+    <path id="${styles.schweif}" d="M 280,120 C 250 100, 310 70, 320 20" style="fill:transparent;stroke:black;stroke-width:10;stroke-linecap:round" />                    
+    <!-- Box-linien -->
+    <polygon points="100,70 300,120 370,50 370,180 300,250 100,200" style="fill:#d19b4f;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="100" y1="70" x2="100" y2="200" />
+        <line x1="100" y1="200" x2="300" y2="250" />
+        <line x1="300" y1="250" x2="300" y2="120" />
+        <line x1="100" y1="70" x2="300" y2="120" />
+        <line x1="300" y1="120" x2="370" y2="50" />
+        <line x1="300" y1="250" x2="370" y2="180" />
+        <line x1="370" y1="50" x2="370" y2="180" />
+    </g>
+    <!-- Lappen-rechts -->
+    <polygon points="300,120 350,150 420,80 370,50" style="fill:#b58747;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="300" y1="120" x2="370" y2="50" />
+        <line x1="300" y1="120" x2="350" y2="150" />
+        <line x1="350" y1="150" x2="420" y2="80" />
+        <line x1="370" y1="50" x2="420" y2="80" />
+    </g>
+    <!-- Lappen-links -->
+    <polygon points="100,70 50,100 120,30 170,0" style="fill:#b58747;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="100" y1="70" x2="170" y2="0" />
+        <line x1="100" y1="70" x2="50" y2="100" />
+        <line x1="50" y1="100" x2="120" y2="30" />
+        <line x1="170" y1="0" x2="120" y2="30" />
+    </g>
+    <!-- Text -->
+    <text x="120" y="120" style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);">404</text>
+    <!-- Killeraugen -->
+    <ellipse cx="275" cy="150" rx="32" ry="20" style="fill:#291e0f;transform:rotateZ(12deg)" />
+    <ellipse cx="266" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
+    <ellipse cx="266" cy="153" rx="2" ry="5" style="fill:#000000;transform:rotateZ(12deg)" />
+    <ellipse cx="285" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
+    <ellipse cx="285" cy="153" rx="2" ry="5" style="fill:#000000;transform:rotateZ(12deg)" />
+    <rect id="${styles.blinzeln}" width="40" height="22" x="255" y="139" style="fill:#291e0f;transform:rotateZ(12deg);" />
+</svg>
+`;
+
+const Custom404: NextPage = () => {
+    return <div className={styles.container}>
+        <div id={styles.wrapper}>
+            <div id={styles.box} dangerouslySetInnerHTML={{__html: svg}}>
+            </div>
+            <div id={styles.errorText}>
+                The site you requested could not be found.<br/>
+                <Link href="/"><a>&gt; Back to the main page &lt;</a></Link>
+            </div>
+        </div>
+    </div>;
+};
+
+export default Custom404;
\ No newline at end of file
diff --git a/pages/500.tsx b/pages/500.tsx
new file mode 100644
index 0000000..4d849ef
--- /dev/null
+++ b/pages/500.tsx
@@ -0,0 +1,79 @@
+import type { NextPage } from "next";
+import Link from "next/link";
+import styles from "../styles/Errorpage.module.css";
+
+const svg = `
+<svg viewBox="30 -20 450 280" x="0" y="0">
+    <!-- Box -->
+    <polygon points="100,70 170,0 370,50 370,180" style="fill:#b58747;" />
+    <defs>
+        <linearGradient id="shadow_grad1" x1="50%" y1="0%" x2="0%" y2="50%">
+            <stop offset="0%" style="stop-color:#876029;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <defs>
+        <linearGradient id="shadow_grad2" x1="0%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:#876029;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <polygon points="100,70 170,0 330,100 300,120" style="fill:#876029;fill:url(#shadow_grad1)" />
+    <polygon points="100,70 170,0 170,130 100,200, 100,70" style="fill:#876029;fill:url(#shadow_grad2)"/>
+    <line x1="170" y1="0" x2="370" y2="50" style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"/>
+    <line x1="170" y1="0" x2="170" y2="130" style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"/>
+    <!-- Katzenschweif -->
+    <path id="${styles.schweif}" d="M 280,120 C 250 100, 310 70, 320 20" style="fill:transparent;stroke:black;stroke-width:10;stroke-linecap:round" />                    
+    <!-- Box-linien -->
+    <polygon points="100,70 300,120 370,50 370,180 300,250 100,200" style="fill:#d19b4f;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="100" y1="70" x2="100" y2="200" />
+        <line x1="100" y1="200" x2="300" y2="250" />
+        <line x1="300" y1="250" x2="300" y2="120" />
+        <line x1="100" y1="70" x2="300" y2="120" />
+        <line x1="300" y1="120" x2="370" y2="50" />
+        <line x1="300" y1="250" x2="370" y2="180" />
+        <line x1="370" y1="50" x2="370" y2="180" />
+    </g>
+    <!-- Lappen-rechts -->
+    <polygon points="300,120 350,150 420,80 370,50" style="fill:#b58747;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="300" y1="120" x2="370" y2="50" />
+        <line x1="300" y1="120" x2="350" y2="150" />
+        <line x1="350" y1="150" x2="420" y2="80" />
+        <line x1="370" y1="50" x2="420" y2="80" />
+    </g>
+    <!-- Lappen-links -->
+    <polygon points="100,70 50,100 120,30 170,0" style="fill:#b58747;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="100" y1="70" x2="170" y2="0" />
+        <line x1="100" y1="70" x2="50" y2="100" />
+        <line x1="50" y1="100" x2="120" y2="30" />
+        <line x1="170" y1="0" x2="120" y2="30" />
+    </g>
+    <!-- Text -->
+    <text x="120" y="120" style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);">500</text>
+    <!-- Killeraugen -->
+    <ellipse cx="275" cy="150" rx="32" ry="20" style="fill:#291e0f;transform:rotateZ(12deg)" />
+    <ellipse cx="266" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
+    <ellipse cx="266" cy="153" rx="2" ry="5" style="fill:#000000;transform:rotateZ(12deg)" />
+    <ellipse cx="285" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
+    <ellipse cx="285" cy="153" rx="2" ry="5" style="fill:#000000;transform:rotateZ(12deg)" />
+    <rect id="${styles.blinzeln}" width="40" height="22" x="255" y="139" style="fill:#291e0f;transform:rotateZ(12deg);" />
+</svg>
+`;
+
+const Custom404: NextPage = () => {
+    return <div className={styles.container}>
+        <div id={styles.wrapper}>
+            <div id={styles.box} dangerouslySetInnerHTML={{__html: svg}}>
+            </div>
+            <div id={styles.errorText}>
+                The site you requested could not be found.<br/>
+                <Link href="/"><a>&gt; Back to the main page &lt;</a></Link>
+            </div>
+        </div>
+    </div>;
+};
+
+export default Custom404;
\ No newline at end of file
diff --git a/styles/Errorpage.module.css b/styles/Errorpage.module.css
new file mode 100644
index 0000000..447cfdf
--- /dev/null
+++ b/styles/Errorpage.module.css
@@ -0,0 +1,61 @@
+.container {
+    background: #222222;
+    width: 100vw;
+    height: 100vh;
+}
+
+#errorText { 
+    margin-top:2vh;               
+    color: #fff;
+    text-align:center;
+    font-family:Arial, Helvetica, sans-serif;
+    font-size:150%;
+}
+
+#wrapper a:link, #wrapper a:visited, #wrapper a:hover, #wrapper a:active {
+    color:#fff;
+    font-weight:bold;
+    text-decoration:none;
+}
+
+#wrapper {
+    margin: auto;
+    position: relative;
+}
+
+#box {
+    max-width: 800px;
+    margin:auto;
+}
+
+@keyframes schweif {
+    0% {d: path("M 280,120 C 250 100, 310 70, 320 20");}
+    12.5% {d: path("M 280,120 C 260 100, 280 70, 310 20");}
+    25% {d: path("M 280,120 C 280 100, 260 70, 290 20");}
+    37.5% {d: path("M 280,120 C 280 100, 240 70, 270 20");}
+    50% {d: path("M 280,120 C 280 100, 240 70, 230 20");}
+    62.5% {d: path("M 280,120 C 270 100, 260 70, 250 20");}
+    75% {d: path("M 280,120 C 270 100, 280 70, 270 20");}
+    87.5% {d: path("M 280,120 C 250 100, 310 70, 290 20");}
+    100% {d: path("M 280,120 C 250 100, 310 70, 320 20");}
+}
+
+#schweif {
+    animation-name: schweif;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+#box svg:hover > #schweif {
+    animation-duration:1s;
+}
+
+#blinzeln {
+    fill-opacity:1;
+    transition: fill-opacity 0.5s;
+}
+
+#box svg:hover > #blinzeln {
+    fill-opacity:0;
+}
\ No newline at end of file