diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index fa69aac6..b24a1a2d 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,29 +1,10 @@
 import { Routes } from '@angular/router'
 import { ResumePageComponent } from './resume-page/resume-page.component'
-import { NotFoundPageComponent } from './not-found-page/not-found-page.component'
 import { METADATA } from './metadata'
 import { environment } from '../environments'
-import { NgxMetaRouteData } from '@davidlj95/ngx-meta/routing'
-import { GlobalMetadata } from '@davidlj95/ngx-meta/core'
-import { StandardMetadata } from '@davidlj95/ngx-meta/standard'
-import { TwitterCardMetadata } from '@davidlj95/ngx-meta/twitter-card'
+import { routes as notFoundPageRoutes } from './not-found-page/routes'
 
 const RESUME_PATH = 'resume'
-const NOT_FOUND_PAGE_DATA: NgxMetaRouteData<
-  GlobalMetadata & StandardMetadata & TwitterCardMetadata
-> = {
-  meta: {
-    title: `${METADATA.siteName} | Not Found`,
-    description: 'Page could not be found',
-    standard: {
-      author: null,
-    },
-    twitterCard: {
-      creator: { username: null },
-      site: { username: null },
-    },
-  },
-}
 
 export const routes: Routes = [
   // Metadata to add when '/' route is ready
@@ -74,6 +55,5 @@ export const routes: Routes = [
       },
     },
   },
-  { path: '404', component: NotFoundPageComponent, data: NOT_FOUND_PAGE_DATA },
-  { path: '**', component: NotFoundPageComponent, data: NOT_FOUND_PAGE_DATA },
+  ...notFoundPageRoutes,
 ]
diff --git a/src/app/not-found-page/routes.ts b/src/app/not-found-page/routes.ts
new file mode 100644
index 00000000..f9a988b1
--- /dev/null
+++ b/src/app/not-found-page/routes.ts
@@ -0,0 +1,30 @@
+import { Route, Routes } from '@angular/router'
+import { NgxMetaRouteData } from '@davidlj95/ngx-meta/routing'
+import { GlobalMetadata } from '@davidlj95/ngx-meta/core'
+import { StandardMetadata } from '@davidlj95/ngx-meta/standard'
+import { TwitterCardMetadata } from '@davidlj95/ngx-meta/twitter-card'
+import { METADATA } from '../metadata'
+
+const NOT_FOUND_ROUTE_TEMPLATE: Route = {
+  loadComponent: () =>
+    import('./not-found-page.component').then((m) => m.NotFoundPageComponent),
+  data: {
+    meta: {
+      title: `${METADATA.siteName} | Not Found`,
+      description: 'Page could not be found',
+      standard: {
+        author: null,
+      },
+      twitterCard: {
+        creator: { username: null },
+        site: { username: null },
+      },
+    },
+  } satisfies NgxMetaRouteData<
+    GlobalMetadata & StandardMetadata & TwitterCardMetadata
+  >,
+}
+export const routes: Routes = [
+  { path: '404', ...NOT_FOUND_ROUTE_TEMPLATE },
+  { path: '**', ...NOT_FOUND_ROUTE_TEMPLATE },
+]