diff --git a/app/dashboard/invoices/page.tsx b/app/dashboard/invoices/page.tsx
index 3b8dfcf..7dd2bbe 100644
--- a/app/dashboard/invoices/page.tsx
+++ b/app/dashboard/invoices/page.tsx
@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import { Metadata } from "next";
 import Pagination from "@/app/ui/invoices/pagination";
 import Search from "@/app/ui/search";
 import Table from "@/app/ui/invoices/table";
@@ -7,6 +8,10 @@ import { lusitana } from "@/app/ui/fonts";
 import { InvoicesTableSkeleton } from "@/app/ui/skeletons";
 import { fetchInvoicesPages } from "@/app/lib/data";
 
+export const metadata: Metadata = {
+	title: 'Invoices',
+}
+
 export default async function Page({
 	searchParams,
 }: {
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000..af98450
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/layout.tsx b/app/layout.tsx
index bc3a4c8..5a4375b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,13 @@
+import { Metadata } from 'next';
 import '@/app/ui/global.css';
 import { inter } from '@/app/ui/fonts';
 
+export const metadata: Metadata = {
+  title: '%s | Acme Dashboard',
+  description: 'The official Next.js Course Dashboard, build with App Router.',
+  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
+}
+
 export default function RootLayout({
   children,
 }: {
diff --git a/app/opengraph-image.png b/app/opengraph-image.png
new file mode 100644
index 0000000..569707e
Binary files /dev/null and b/app/opengraph-image.png differ