From 3ae88e6354d56a9aef68ba53756c6576d92f9958 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marko=20Markovi=C4=87?= <okram@civokram.com>
Date: Sun, 9 Jul 2023 21:43:12 +0400
Subject: [PATCH] 404 500

---
 frontend/pages/404.js |  2 +-
 frontend/pages/500.js | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/404.js b/frontend/pages/404.js
index aa3e7e2..74154f5 100644
--- a/frontend/pages/404.js
+++ b/frontend/pages/404.js
@@ -8,7 +8,7 @@ export default function Custom404() {
       <AlertTitle mt={4} mb={1} fontSize="lg">
         404: Page Not Found
       </AlertTitle>
-      <AlertDescription maxWidth="sm">Try going back or something&hellip;</AlertDescription>
+      <AlertDescription maxWidth="sm">Try going back or something &hellip;</AlertDescription>
     </Alert>
   )
 }
diff --git a/frontend/pages/500.js b/frontend/pages/500.js
index 79519a6..9fabec9 100644
--- a/frontend/pages/500.js
+++ b/frontend/pages/500.js
@@ -1,3 +1,14 @@
+import { Alert, AlertDescription, AlertTitle } from '@chakra-ui/react'
+import { TbMoodSad } from 'react-icons/tb'
+
 export default function Custom500() {
-  return <h1>500 - Server-side error occurred</h1>
+  return (
+    <Alert status="info" flexDirection="column" justifyContent="center" rounded="md" paddingY="10">
+      <TbMoodSad style={{ width: '2rem', height: '2rem' }} />
+      <AlertTitle mt={4} mb={1} fontSize="lg">
+        500: Server-side error occurred
+      </AlertTitle>
+      <AlertDescription maxWidth="sm">Something happened that was totally unexpected &hellip;</AlertDescription>
+    </Alert>
+  )
 }