diff --git a/README.md b/README.md
index 9fdfee0..f2c0f9a 100644
--- a/README.md
+++ b/README.md
@@ -783,10 +783,47 @@ export const { auth, signIn, signOut } = NextAuth({
     },
   })],
 });
-````
+```
 
 More details about the authentication can be found in the [Next.js course](https://nextjs.org/learn/dashboard-app/adding-authentication).
 
+## Metadata
+Metadata can be defined by adding and exporting a metadata const to the `layout.tsx` file.
+```tsx
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Acme Dashboard',
+  description: 'The official Next.js Course Dashboard, built with App Router.',
+  metadataBase: new URL('http://localhost:3000/dashboard'),
+}
+```
+
+The metadata defined in `layout.tsx` will be used globally across all pages. They can also be overwritten for a specific page by adding the metadata const to those page's `page.tsx`-File.
+
+It's also possible to use templates in metadata, so things like the app's name can be set globally but the page title is indivudal.
+```tsx
+import { Metadata } from 'next';
+ 
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Acme Dashboard',
+    default: 'Acme Dashboard',
+  },
+  description: 'The official Next.js Learn Dashboard built with App Router.',
+  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
+};
+```
+
+With this template the following title is just enough per page.
+```tsx
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Invoices',
+};
+```
+
 
 ## Ressources
 - [Next.js Installation](https://nextjs.org/docs/app/getting-started/installation)
diff --git a/dashboard-app-course/app/dashboard/(overview)/page.tsx b/dashboard-app-course/app/dashboard/(overview)/page.tsx
index dbf7731..7c2e2bc 100644
--- a/dashboard-app-course/app/dashboard/(overview)/page.tsx
+++ b/dashboard-app-course/app/dashboard/(overview)/page.tsx
@@ -5,6 +5,11 @@ import { lusitana } from '../../ui/fonts';
 import { Suspense } from 'react';
 import { RevenueChartSkeleton, LatestInvoicesSkeleton, CardsSkeleton, CardSkeleton} from '@/app/ui/skeletons';
 import CardWrapper from '@/app/ui/dashboard/cards';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Dashboard',
+};
 
 export default async function Page(){
     return (
diff --git a/dashboard-app-course/app/dashboard/customers/page.tsx b/dashboard-app-course/app/dashboard/customers/page.tsx
index b790196..f8d220c 100644
--- a/dashboard-app-course/app/dashboard/customers/page.tsx
+++ b/dashboard-app-course/app/dashboard/customers/page.tsx
@@ -1,3 +1,9 @@
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Customers',
+};
+
 export default function Page(){
     return <p>Customers Page</p>
 }
\ No newline at end of file
diff --git a/dashboard-app-course/app/dashboard/invoices/[id]/edit/page.tsx b/dashboard-app-course/app/dashboard/invoices/[id]/edit/page.tsx
index f6a97f6..aceaee9 100644
--- a/dashboard-app-course/app/dashboard/invoices/[id]/edit/page.tsx
+++ b/dashboard-app-course/app/dashboard/invoices/[id]/edit/page.tsx
@@ -2,6 +2,11 @@ import Form from '@/app/ui/invoices/edit-form';
 import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 import { fetchCustomers, fetchInvoiceById } from '@/app/lib/data';
 import { notFound } from 'next/navigation';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Edit invoice',
+};
 
 export default async function Page(props: {
     params: Promise<{
diff --git a/dashboard-app-course/app/dashboard/invoices/create/page.tsx b/dashboard-app-course/app/dashboard/invoices/create/page.tsx
index 2debd8f..af2a545 100644
--- a/dashboard-app-course/app/dashboard/invoices/create/page.tsx
+++ b/dashboard-app-course/app/dashboard/invoices/create/page.tsx
@@ -1,6 +1,11 @@
 import Form from '@/app/ui/invoices/create-form';
 import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 import { fetchCustomers } from '@/app/lib/data';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'New invoice',
+};
 
 export default async function Page(){
     const customers = await fetchCustomers();
diff --git a/dashboard-app-course/app/dashboard/invoices/page.tsx b/dashboard-app-course/app/dashboard/invoices/page.tsx
index 40988f1..2526f5d 100644
--- a/dashboard-app-course/app/dashboard/invoices/page.tsx
+++ b/dashboard-app-course/app/dashboard/invoices/page.tsx
@@ -6,6 +6,11 @@ import { lusitana } from "@/app/ui/fonts";
 import { InvoicesTableSkeleton } from "@/app/ui/skeletons";
 import { Suspense } from "react";
 import { fetchInvoicesPages } from "@/app/lib/data";
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Invoices',
+};
 
 export default async function Page(props: {
     searchParams?: Promise<{
diff --git a/dashboard-app-course/public/favicon.ico b/dashboard-app-course/app/favicon.ico
similarity index 100%
rename from dashboard-app-course/public/favicon.ico
rename to dashboard-app-course/app/favicon.ico
diff --git a/dashboard-app-course/app/layout.tsx b/dashboard-app-course/app/layout.tsx
index fdb0c63..123a2b5 100644
--- a/dashboard-app-course/app/layout.tsx
+++ b/dashboard-app-course/app/layout.tsx
@@ -1,5 +1,15 @@
 import '@/app/ui/global.css';
 import {inter} from '@/app/ui/fonts';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Acme Dashboard',
+    default: 'Acme Dashboard',
+  },
+  description: 'The official Next.js Course Dashboard, built with App Router.',
+  metadataBase: new URL('http://localhost:3000/dashboard'),
+}
 
 export default function RootLayout({
   children,
diff --git a/dashboard-app-course/app/login/page.tsx b/dashboard-app-course/app/login/page.tsx
index 609ed5f..ead80c3 100644
--- a/dashboard-app-course/app/login/page.tsx
+++ b/dashboard-app-course/app/login/page.tsx
@@ -1,6 +1,11 @@
 import AcmeLogo from "../ui/acme-logo";
 import LoginForm from "../ui/login-form";
 import { Suspense } from "react";
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Login',
+};
 
 export default function LoginPage(){
     return (
diff --git a/dashboard-app-course/public/opengraph-image.png b/dashboard-app-course/app/opengraph-image.png
similarity index 100%
rename from dashboard-app-course/public/opengraph-image.png
rename to dashboard-app-course/app/opengraph-image.png