diff --git a/public/img/403.jpg b/public/img/403.jpg
deleted file mode 100644
index 8d1ec7a..0000000
Binary files a/public/img/403.jpg and /dev/null differ
diff --git a/public/img/404.jpg b/public/img/404.jpg
deleted file mode 100644
index 193adfa..0000000
Binary files a/public/img/404.jpg and /dev/null differ
diff --git a/public/img/500.jpg b/public/img/500.jpg
deleted file mode 100644
index 8d1ec7a..0000000
Binary files a/public/img/500.jpg and /dev/null differ
diff --git a/public/img/sad-monster.png b/public/img/sad-monster.png
new file mode 100644
index 0000000..32d063a
Binary files /dev/null and b/public/img/sad-monster.png differ
diff --git a/resources/css/app.scss b/resources/css/app.scss
index df4e85c..c52b998 100644
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -69,38 +69,29 @@ code {
 /* Page Errors */
 .sm-page-error {
     display: flex;
-    flex-direction: row;
-    flex: 1;
-    margin-top: map-get($spacer, 5);
-    min-height: 50vh;
+    flex-direction: column;
 
-    .image {
-        flex: 1;
-        height: 100%;
-        width: 100%;
-        background-position: center;
-        background-size: contain;
-        background-repeat: no-repeat;
-        margin-left: map-get($spacer, 2);
-        margin-right: map-get($spacer, 2);
+    .sm-error-number {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 30vw;
+        font-weight: 600;
+        color: #295b7e;
+
+        img {
+            height: 25vw;
+            margin: 0 0.5rem 0 1rem;
+        }
     }
 
-    .content {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        justify-content: center;
-        margin-left: map-get($spacer, 2);
-        margin-right: map-get($spacer, 2);
-        margin-bottom: 0;
+    .sm-error-content {
+        text-align: center;
+        font-size: 120%;
 
-        h1 {
-            text-align: left;
-            margin-bottom: map-get($spacer, 1);
-        }
-
-        p {
-            margin: 0;
+        h2 {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
         }
     }
 }
diff --git a/resources/js/components/errors/Forbidden.vue b/resources/js/components/errors/Forbidden.vue
index 9391c2b..cf6bc30 100644
--- a/resources/js/components/errors/Forbidden.vue
+++ b/resources/js/components/errors/Forbidden.vue
@@ -1,19 +1,28 @@
 <template>
     <SMPage no-breadcrumbs>
-        <div class="sm-page-error sm-error-forbidden">
-            <div class="image"></div>
-            <div class="content">
-                <h1>The cat says no!</h1>
-                <p>You do not have the needed access to see this page</p>
+        <div class="sm-page-error sm-error-not-found">
+            <div class="sm-error-number">
+                4<img src="/img/sad-monster.png" />3
+            </div>
+            <div class="sm-error-content">
+                <h2>Ooops!</h2>
+                <p>This page is not for you to view!</p>
+                <SMButton label="Go Back" @click="handleClick" />
             </div>
         </div>
     </SMPage>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import SMButton from "../SMButton.vue";
+import { useRouter } from "vue-router";
 
-<style lang="scss">
-.sm-page-error.sm-error-forbidden .image {
-    background-image: url("/img/403.jpg");
-}
-</style>
+const router = useRouter();
+
+/**
+ * Handle user clicking back/home button
+ */
+const handleClick = () => {
+    router.go(-1);
+};
+</script>
diff --git a/resources/js/components/errors/Internal.vue b/resources/js/components/errors/Internal.vue
index 3e63f89..cf22126 100644
--- a/resources/js/components/errors/Internal.vue
+++ b/resources/js/components/errors/Internal.vue
@@ -1,22 +1,31 @@
 <template>
     <SMPage no-breadcrumbs>
-        <div class="sm-page-error sm-error-internal">
-            <div class="image"></div>
-            <div class="content">
-                <h1>The cat has broken something</h1>
+        <div class="sm-page-error sm-error-not-found">
+            <div class="sm-error-number">
+                5<img src="/img/sad-monster.png" />0
+            </div>
+            <div class="sm-error-content">
+                <h2>Ooops!</h2>
                 <p>
                     We are working to fix that what was broken. Please try again
-                    later.
+                    later!
                 </p>
+                <SMButton label="Go Back" @click="handleClick" />
             </div>
         </div>
     </SMPage>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import SMButton from "../SMButton.vue";
+import { useRouter } from "vue-router";
 
-<style lang="scss">
-.sm-page-error.sm-error-internal .image {
-    background-image: url("/img/500.jpg");
-}
-</style>
+const router = useRouter();
+
+/**
+ * Handle user clicking back/home button
+ */
+const handleClick = () => {
+    router.go(-1);
+};
+</script>
diff --git a/resources/js/components/errors/NotFound.vue b/resources/js/components/errors/NotFound.vue
index 06cc561..c6203f2 100644
--- a/resources/js/components/errors/NotFound.vue
+++ b/resources/js/components/errors/NotFound.vue
@@ -1,19 +1,28 @@
 <template>
     <SMPage no-breadcrumbs>
         <div class="sm-page-error sm-error-not-found">
-            <div class="image"></div>
-            <div class="content">
-                <h1>Opps</h1>
-                <p>The page you asked for was not found</p>
+            <div class="sm-error-number">
+                4<img src="/img/sad-monster.png" />4
+            </div>
+            <div class="sm-error-content">
+                <h2>Ooops!</h2>
+                <p>The page you are looking for does not exist!</p>
+                <SMButton label="Go Back" @click="handleClick" />
             </div>
         </div>
     </SMPage>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import SMButton from "../SMButton.vue";
+import { useRouter } from "vue-router";
 
-<style lang="scss">
-.sm-page-error.sm-error-not-found .image {
-    background-image: url("/img/404.jpg");
-}
-</style>
+const router = useRouter();
+
+/**
+ * Handle user clicking back/home button
+ */
+const handleClick = () => {
+    router.go(-1);
+};
+</script>