diff --git a/layouts/page.templ b/layouts/page.templ
index 6598ed3..67c571c 100644
--- a/layouts/page.templ
+++ b/layouts/page.templ
@@ -2,7 +2,7 @@ package layouts
 
 templ Page(title string) {
 	<!DOCTYPE html>
-	<html lang="en-US" class="scroll-smooth motion-reduce:scroll-auto">
+	<html lang="en-US" data-theme="dark">
 		<head>
 			<meta
 				name="viewport"
@@ -11,6 +11,10 @@ templ Page(title string) {
 							"maximum-scale=1.0, " +
 							"user-scalable=no" }
 			/>
+			<link
+				rel="stylesheet"
+				href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+			/>
 			<title>{ title }</title>
 		</head>
 		<body>
diff --git a/pages/index.templ b/pages/index.templ
index 03b31f5..e8329cf 100644
--- a/pages/index.templ
+++ b/pages/index.templ
@@ -6,6 +6,64 @@ import (
 
 templ Index() {
 	@layouts.Page("013") {
-		<h1>Hello, world</h1>
+		<style>
+			@media(min-width: 640px) {
+				article {
+					max-width: 50%;
+				}
+			}
+			aritcle {
+				max-width: 100%;
+			}
+		</style>
+		<main class="container-fluid" style="display:flex;justify-content:center;align-content:center;">
+			<article>
+				<header>
+					<nav>
+						<ul>
+							<li>Project Extrovert</li>
+						</ul>
+						<ul>
+							<li>
+								<a
+									class="secondary"
+									target="_blank"
+									href="https://github.com/capytalcode/project-extrovert"
+									rel="noreferer nofollow"
+								>GitHub</a>
+							</li>
+							<li>
+								<a
+									class="secondary"
+									target="_blank"
+									href="https://codeberg.org/capytalcode/project-extrovert"
+									rel="noreferer nofollow"
+								>Codeberg</a>
+							</li>
+						</ul>
+					</nav>
+				</header>
+				This is a project by
+				<a
+					target="_blank"
+					href="https://github.com/capytalcode"
+					rel="noreferer nofollow"
+				>
+					Capytal Code
+				</a>,
+				keep visting this link to see the project's evoluition and development.
+				<footer>
+					&copy; 2024
+					<a
+						href="https://guz.one"
+						target="_blank"
+						rel="noreferer nofollow"
+						class="secondary"
+					>
+						Gustavo L. de Mello
+					</a>
+				</footer>
+			</article>
+		</main>
 	}
 }
