diff --git a/apps/web/src/apps/index.tsx b/apps/web/src/apps/index.tsx
index b02319e..2d5110c 100644
--- a/apps/web/src/apps/index.tsx
+++ b/apps/web/src/apps/index.tsx
@@ -16,7 +16,8 @@ export default function App() {
           <Route path="/403" element={<Forbidden />} />
           <Route path="/maintenance" element={<Maintenance />} />
           <Route path="/coming-soon" element={<ComingSoon />} />
-          <Route path="*" element={<Navigate to="/app" />} />
+          <Route path="/" element={<Navigate to="/app" />} />
+          <Route path="*" element={<Navigate to="/404" />} />
         </Routes>
       </Suspense>
     </BrowserRouter>
diff --git a/apps/web/src/apps/modules/index.tsx b/apps/web/src/apps/modules/index.tsx
index d26c094..314dd82 100644
--- a/apps/web/src/apps/modules/index.tsx
+++ b/apps/web/src/apps/modules/index.tsx
@@ -1,5 +1,8 @@
 import { DateServiceExample, StyleGuideOne, StyleGuideTree, StyleGuideTwo } from '@repo/ui';
-import { Route, Routes } from 'react-router-dom';
+import { lazy } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+const ExamplePage = lazy(() => import('./example/example.page'));
 
 export default function AppModule() {
   return (
@@ -8,6 +11,8 @@ export default function AppModule() {
       <Route path="/guide-1/*" element={<StyleGuideOne />} />
       <Route path="/guide-2/*" element={<StyleGuideTwo />} />
       <Route path="/guide-3/*" element={<StyleGuideTree />} />
+      <Route path="/" element={<ExamplePage />} />
+      <Route path="*" element={<Navigate to={'/404'} replace={true} />} />
     </Routes>
   );
 }
diff --git a/packages/ui/src/components/system-pages/coming-soon.tsx b/packages/ui/src/components/system-pages/coming-soon.tsx
index 7ec9d63..02b6c91 100644
--- a/packages/ui/src/components/system-pages/coming-soon.tsx
+++ b/packages/ui/src/components/system-pages/coming-soon.tsx
@@ -24,7 +24,7 @@ export function ComingSoon(props: ComingSoonProps) {
           <div className="mt-8 flex justify-center gap-3">
             <a
               href="/"
-              className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+              className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
             >
               Back to Home
             </a>
diff --git a/packages/ui/src/components/system-pages/forbidden.tsx b/packages/ui/src/components/system-pages/forbidden.tsx
index f9c518d..f583524 100644
--- a/packages/ui/src/components/system-pages/forbidden.tsx
+++ b/packages/ui/src/components/system-pages/forbidden.tsx
@@ -36,7 +36,7 @@ export function Forbidden(props: ForbiddenProps) {
             {showActionsHome && (
               <a
                 href="/"
-                className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+                className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
               >
                 Back to Home
               </a>
diff --git a/packages/ui/src/components/system-pages/maintenance.tsx b/packages/ui/src/components/system-pages/maintenance.tsx
index 7643be2..bd7d508 100644
--- a/packages/ui/src/components/system-pages/maintenance.tsx
+++ b/packages/ui/src/components/system-pages/maintenance.tsx
@@ -25,7 +25,7 @@ export function Maintenance(props: MaintenanceProps) {
           <div className="mt-8 flex justify-center gap-3">
             <a
               href="/"
-              className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+              className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
             >
               Back to Home
             </a>
diff --git a/packages/ui/src/components/system-pages/not-found.tsx b/packages/ui/src/components/system-pages/not-found.tsx
index ffb8efc..3f644ba 100644
--- a/packages/ui/src/components/system-pages/not-found.tsx
+++ b/packages/ui/src/components/system-pages/not-found.tsx
@@ -31,7 +31,7 @@ export function NotFound(props: NotFoundProps) {
             {showActionsHome && (
               <a
                 href="/"
-                className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+                className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
               >
                 Back to Home
               </a>