diff --git a/src/app/books/[bookId]/chapters/[chapterId]/page.tsx b/src/app/books/[bookId]/chapters/[chapterId]/page.tsx
index ee1a04b..896d19b 100644
--- a/src/app/books/[bookId]/chapters/[chapterId]/page.tsx
+++ b/src/app/books/[bookId]/chapters/[chapterId]/page.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import NavigationButtons from "@/components/NavigationButtons";
 import { Chapter } from "@/lib/types";
 import { fetchBookById } from "@/lib/api";
-
+import Head from "next/head";
 export type paramsType = Promise<{ bookId: string; chapterId: string }>;
 
 // Dynamic page component
@@ -20,21 +20,33 @@ export default async function ChapterPage(props: { params: paramsType}) {
     
     if (current_chapter === undefined) {
         return (    
+            <>
+            <Head>
+                <title>Chapter not found</title>
+                <meta name="description" content="Chapter not found" />
+            </Head>
                 <div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
                     <div dangerouslySetInnerHTML={{ __html: '<center><h1> Chapter not found !</h1></center>' }}></div>
                 <NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} />
                 </div>
+            </>
         )
     }
   
     
     return (
+        <>
+        <Head>
+            <title>{book.title} - Chapter {current_chapter.number}</title>
+            <meta name="description" content={book.description} />
+        </Head>
             <div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
             <NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} />
                 <div className="pt-4" dangerouslySetInnerHTML={{ __html: current_chapter.content }}></div>
         
                 <NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter}/>
             </div>
+        </>
       );
     
 }
\ No newline at end of file
diff --git a/src/app/books/[bookId]/page.tsx b/src/app/books/[bookId]/page.tsx
index 82608f9..badda35 100644
--- a/src/app/books/[bookId]/page.tsx
+++ b/src/app/books/[bookId]/page.tsx
@@ -2,6 +2,8 @@ import { fetchBookById } from "@/lib/api";
 import { Book } from "@/lib/types";
 import { formatDateToMonthDayYear } from "@/lib/utils";
 import ChapterDropdown from "@/components/ChapterDropdown";
+import { Ad } from "@/lib/types";
+import Head from "next/head";
 
 export type paramsType = Promise<{ bookId: string}>;
 
@@ -25,6 +27,11 @@ export default async function BookPage(props: { params: paramsType }) {
     const cover_media = cover?.at(0);
     const recentChapters = chapters.length > 6 ? chapters.slice(chapters.length - 6, chapters.length) : chapters;
     return (
+        <>
+        <Head>
+            <title>{title}</title>
+            <meta name="description" content={description} />
+        </Head>
             <div className="max-w-6xl mx-auto py-10 px-4">
                 <div className="flex flex-col items-center justify-center">
                     <img src={`${process.env.NEXT_PUBLIC_API_URL}${cover_media?.url}`}
@@ -33,7 +40,7 @@ export default async function BookPage(props: { params: paramsType }) {
                     />
                         <h1 className="text-5xl pb-2 font-bold">{title}</h1>
                         <a
-                            href="https://www.patreon.com/c/nulltranslationgroup/membership?view_as=patron" // Replace with your Patreon URL
+                            href={Ad.patreon}
                             target="_blank"
                             rel="noopener noreferrer"
                             className="ml-4 bg-yellow-500 text-white font-semibold py-2 px-4 rounded hover:bg-yellow-600 transition duration-200"
@@ -86,5 +93,8 @@ export default async function BookPage(props: { params: paramsType }) {
                         </a>
                     </li>
                 ))}
-            </div>);
+            </div>
+            </>
+        );
+            
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index be2e473..2b870dc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -34,6 +34,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" className={isDarkMode ? "dark" : ""} suppressHydrationWarning>
        <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script
           dangerouslySetInnerHTML={{
             __html: `
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6f74971..9b86b2e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,8 @@
 import { Book } from "@/lib/types";
 import { fetchBooks } from "@/lib/api";
+import { Ad } from "@/lib/types";
+import Head from "next/head";
+
 export default async function HomePage() {
   let books: Book[] = [];
 
@@ -15,10 +18,15 @@ export default async function HomePage() {
   }
 
   return (
+    <>
+    <Head>
+      <title>Null Translation Group</title>
+      <meta name="description" content="Null Translation Group main hub for all the books we are currently translating" />
+    </Head>
     <div className="mx-auto p-6 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
       <div className="hidden md:block bg-yellow-500 text-black py-2 px-4 rounded-lg hover:bg-yellow-600 transition duration-200 mb-6">
         <a
-          href="https://patreon.com/NullTranslationGroup"
+          href={Ad.patreon}
           target="_blank"
           rel="noopener noreferrer"
           className="font-semibold text-center block"
@@ -61,5 +69,7 @@ export default async function HomePage() {
         )})}
       </div>
     </div>
+    </>
+
   );
 }
