diff --git a/frontend/nginx-default.conf b/frontend/nginx-default.conf
index 9b66f407..21456746 100644
--- a/frontend/nginx-default.conf
+++ b/frontend/nginx-default.conf
@@ -10,5 +10,12 @@ server {
     location / {
         root /user/share/nginx/html;
         index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page  404 /index.html;
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
     }
 }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 01a6f55b..f254c0f9 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -5,6 +5,7 @@ import CollectionsView from '@/views/CollectionsView.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import FrequentlyAskedQuestions from '@/components/FrequentlyAskedQuestions.vue'
 import ContactPage from '@/components/ContactPage.vue'
+import NotFoundView from '@/views/NotFoundView.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -37,6 +38,11 @@ const router = createRouter({
       path: '/',
       name: 'start',
       component: StartView
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: '404',
+      component: NotFoundView
     }
   ]
 })
diff --git a/frontend/src/views/NotFoundView.vue b/frontend/src/views/NotFoundView.vue
new file mode 100644
index 00000000..2a372e15
--- /dev/null
+++ b/frontend/src/views/NotFoundView.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="d-flex flex-column vh-100">
+    <div class="flex-shrink-1">
+      <div class="mt-5">
+        <SloganComponent />
+      </div>
+      <div class="mt-5">
+        <Suspense>
+          <div class="container">
+            <h2>404 Error: Not Found</h2>
+            <p>We could not match your request with a valid document.</p>
+          </div>
+        </Suspense>
+      </div>
+    </div>
+    <FooterComponent />
+  </div>
+</template>
+
+<script setup lang="ts">
+import FooterComponent from '@/components/FooterComponent.vue'
+import SloganComponent from '@/components/SloganComponent.vue'
+import FrequentlyAskedQuestions from '@/components/FrequentlyAskedQuestions.vue'
+import DragToStartProjectComponent from '@/components/DragToStartProjectComponent.vue'
+import StatementsComponent from '@/components/StatementsComponent.vue'
+</script>
diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue
index a8ba774c..50965a0f 100644
--- a/frontend/src/views/StartView.vue
+++ b/frontend/src/views/StartView.vue
@@ -11,6 +11,7 @@
 </template>
 
 <script setup lang="ts">
+import FooterComponent from '@/components/FooterComponent.vue'
 import CollectionsView from './CollectionsView.vue'
 import HomeView from '@/views/HomeView.vue'
 import { type Project } from '@/constants'