diff --git a/src/assets/icons/danger.svg b/src/assets/icons/danger.svg
new file mode 100644
index 0000000000000000000000000000000000000000..609fd17d0541b7258e1374e6c7422b8ee3e696d9
--- /dev/null
+++ b/src/assets/icons/danger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m40-120 440-760 440 760H40Zm104-60h672L480-760 144-180Zm340.175-57q12.825 0 21.325-8.675 8.5-8.676 8.5-21.5 0-12.825-8.675-21.325-8.676-8.5-21.5-8.5-12.825 0-21.325 8.675-8.5 8.676-8.5 21.5 0 12.825 8.675 21.325 8.676 8.5 21.5 8.5ZM454-348h60v-224h-60v224Zm26-122Z" fill="#ffffff"/></svg>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 5711edbe06862397d7ece8bfce86b3a154412100..5f3a683a89ec1edd6c1e2d20c2b31f46102ff1e1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -39,7 +39,7 @@ const routes = [
{
path: 'unauthorized',
name: 'unauthorized',
- component: () => import('@/views/TestView.vue'),
+ component: () => import('@/views/UnauthorizedView.vue'),
},
]
},
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index 946391e88dbcaa2ac6d0d4964c5be9adda5a2421..650e2b20ce9dca2abb7fa351c48948a304fbb28e 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -1,5 +1,44 @@
<template>
- <div>
- <h1 id="errorMessage">404 - Not Found</h1>
+ <div class="container-fluid"> <!-- Changed from 'container' to 'container-fluid' -->
+ <div class="row">
+ <div class="col-md-12">
+ <div class="error-template text-center"> <!-- 'text-center' for centering text content -->
+ <h1>
+ Oops!</h1>
+ <h2>
+ 404 Not Found</h2>
+ <div class="error-details">
+ Sorry, an error has occurred, Requested page not found!
+ </div>
+ <div class="error-actions">
+ <Button1 button-text="Take Me Home" @click="home" />
+ </div>
+ </div>
+ </div>
</div>
-</template>
\ No newline at end of file
+</div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import Button1 from '@/components/Buttons/Button1.vue';
+
+const router = useRouter();
+
+const home = () => {
+ router.push('/'); // Assuming the root URL '/' is your home route
+};
+</script>
+
+
+<style scoped>
+ .error-template {
+ text-align: center; /* Ensures all text and inline elements within are centered */
+ display: flex;
+ flex-direction: column;
+ align-items: center; /* Aligns child elements (which are block-level) centrally */
+ justify-content: center; /* Optional: if you want vertical centering */
+ margin: 2rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/UnauthorizedView.vue b/src/views/UnauthorizedView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8a3f78ed6bdc87283db0ea40dbcdd5b2306c371d
--- /dev/null
+++ b/src/views/UnauthorizedView.vue
@@ -0,0 +1,28 @@
+<template>
+ <body class="bg-dark text-white py-5">
+ <div class="container py-5">
+ <div class="row">
+ <div class="col-md-2 text-center">
+ <p><img src="@/assets/icons/danger.svg"> <br/>Status Code: 403</p>
+ </div>
+ <div class="col-md-10">
+ <h3>OPPSSS!!!! Sorry...</h3>
+ <p>Sorry, your access is refused due to security reasons of our server and also our sensitive data.<br/>Please go back to the home page to continue browsing.</p>
+ <Button1 :button-text="'Take Me Home'" @click="home" />
+ </div>
+ </div>
+ </div>
+ </body>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+import Button1 from '@/components/Buttons/Button1.vue';
+
+const router = useRouter();
+
+const home = () => {
+ router.push('/');
+};
+</script>