diff --git a/src/components/Error.tsx b/src/components/Error.tsx
new file mode 100644
index 0000000..f25b194
--- /dev/null
+++ b/src/components/Error.tsx
@@ -0,0 +1,3 @@
+export function ErrorComponent() {
+  return <div>An unhandled error happened!</div>
+}
diff --git a/src/components/NotFount.tsx b/src/components/NotFount.tsx
index ee49503..fec55b7 100644
--- a/src/components/NotFount.tsx
+++ b/src/components/NotFount.tsx
@@ -1,3 +1,3 @@
-export function NotFound() {
-  return <div>Not Found</div>
+export function NotFoundComponent() {
+  return <div>404 - Not Found</div>
 }
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index f3b1d0c..c652d53 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,6 +1,8 @@
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router'
 import type { ReactNode } from 'react'
+import { ErrorComponent } from '@/components/Error'
+import { NotFoundComponent } from '@/components/NotFount'
 import { devtools as queryDevtools } from '@/integrations/tanstack-query'
 import { devtools as routerDevtools } from '@/integrations/tanstack-router'
 import appCss from '@/styles.css?url'
@@ -27,8 +29,8 @@ export const Route = createRootRoute({
     ],
   }),
   shellComponent: RootDocument,
-  errorComponent: () => <div>Error</div>,
-  notFoundComponent: () => <div>404 - Not Found</div>,
+  errorComponent: () => <ErrorComponent />,
+  notFoundComponent: () => <NotFoundComponent />,
 })
 
 function RootDocument({ children }: Readonly<{ children: ReactNode }>) {