diff --git a/app/data/dummy.ts b/app/data/dummy.ts
index 150e7ee..a9f3047 100644
--- a/app/data/dummy.ts
+++ b/app/data/dummy.ts
@@ -1,6 +1,21 @@
-export const DUMMY = {
+export const APP = {
   title: 'React Router',
   description:
     'Bonus judex secundum aequum et\n bonum judicat et aequitatem stricto juri praefert',
   logo: '/images/logo.svg',
 }
+
+export const META_TITLE_CONFIG = [
+  {
+    path: '/news',
+    title: 'Home',
+  },
+  {
+    path: '/auth/login',
+    title: 'Login',
+  },
+  {
+    path: '/auth/register',
+    title: 'Register',
+  },
+]
diff --git a/app/pages/news/footer-links.tsx b/app/pages/news/footer-links.tsx
index 30dff67..d41c4c5 100644
--- a/app/pages/news/footer-links.tsx
+++ b/app/pages/news/footer-links.tsx
@@ -1,7 +1,8 @@
 import { Link } from 'react-router'
 
-import { DUMMY } from '~/data/dummy'
-import { COPYRIGHT_MENU, FOOTER_MENU } from '~/data/menu'
+import { APP } from '~/data/dummy'
+
+import { COPYRIGHT_MENU, FOOTER_MENU } from './menu'
 
 export const FooterLinks = () => {
   return (
@@ -36,7 +37,7 @@ export const FooterLinks = () => {
       </div>
       <div className="flex justify-between border-t border-white pt-8 text-sm">
         <div>
-          {new Date().getFullYear()} {DUMMY.title}. All rights reserved.
+          {new Date().getFullYear()} {APP.title}. All rights reserved.
         </div>
         <div className="flex gap-6">
           {COPYRIGHT_MENU.map(({ url, title }, index) => (
diff --git a/app/pages/news/footer-newsletter.tsx b/app/pages/news/footer-newsletter.tsx
index 4014912..83568fa 100644
--- a/app/pages/news/footer-newsletter.tsx
+++ b/app/pages/news/footer-newsletter.tsx
@@ -1,7 +1,7 @@
 import { Link } from 'react-router'
 
 import { Button } from '~/components/ui/button'
-import { DUMMY } from '~/data/dummy'
+import { APP } from '~/data/dummy'
 
 export const FooterNewsletter = () => {
   return (
@@ -12,8 +12,8 @@ export const FooterNewsletter = () => {
           className="h-full"
         >
           <img
-            src={DUMMY.logo}
-            alt={DUMMY.title}
+            src={APP.logo}
+            alt={APP.title}
             className="h-full w-auto"
           />
         </Link>
diff --git a/app/pages/news/header-menu.tsx b/app/pages/news/header-menu.tsx
index 4e2a817..a679d32 100644
--- a/app/pages/news/header-menu.tsx
+++ b/app/pages/news/header-menu.tsx
@@ -1,8 +1,7 @@
 import { Link } from 'react-router'
 
-import { MENU } from '~/data/menu'
-
 import { HeaderSearch } from './header-search'
+import { MENU } from './menu'
 
 export const HeaderMenu = () => {
   return (
diff --git a/app/pages/news/header-top.tsx b/app/pages/news/header-top.tsx
index 3d16c80..8240508 100644
--- a/app/pages/news/header-top.tsx
+++ b/app/pages/news/header-top.tsx
@@ -1,7 +1,7 @@
 import { Link } from 'react-router'
 
 import { Button } from '~/components/ui/button'
-import { DUMMY } from '~/data/dummy'
+import { APP } from '~/data/dummy'
 
 export const HeaderTop = () => {
   return (
@@ -11,13 +11,13 @@ export const HeaderTop = () => {
         className="h-full py-[5px]"
       >
         <img
-          src={DUMMY.logo}
-          alt={DUMMY.title}
+          src={APP.logo}
+          alt={APP.title}
           className="h-full w-auto"
         />
       </Link>
       <div className="flex h-full items-center py-1.5 font-light whitespace-pre-line">
-        {DUMMY.description}
+        {APP.description}
       </div>
       <div className="flex items-center gap-[15px]">
         <Button>About Us</Button>
diff --git a/app/data/menu.ts b/app/pages/news/menu.ts
similarity index 100%
rename from app/data/menu.ts
rename to app/pages/news/menu.ts
diff --git a/app/root.tsx b/app/root.tsx
index ea63567..25e2172 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -9,6 +9,7 @@ import {
 
 import type { Route } from './+types/root'
 import './app.css'
+import { APP, META_TITLE_CONFIG } from './data/dummy'
 
 export const links: Route.LinksFunction = () => [
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
@@ -23,6 +24,21 @@ export const links: Route.LinksFunction = () => [
   },
 ]
 
+export const meta = ({ location }: Route.MetaArgs) => {
+  const { pathname } = location
+  const pageTitle = META_TITLE_CONFIG.find(
+    (meta) => meta.path === pathname,
+  )?.title
+  const metaTitle = APP.title
+  const title = `${pageTitle ? `${pageTitle} - ` : ''}${metaTitle}`
+
+  return [
+    {
+      title,
+    },
+  ]
+}
+
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">