3 files changed, 37 insertions, 14 deletions
diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx
index a2ae7c3..8661dc0 100644
--- a/src/components/Counter.jsx
+++ b/src/components/Counter.jsx
@@ -4,8 +4,11 @@ export default function Counter() {
   const [count, setCount] = useState(0);
 
   return (
-    <div className="counter">
-      <button onClick={() => setCount(count + 1)}>
+    <div className="flex justify-center">
+      <button 
+        className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
+        onClick={() => setCount(count + 1)}
+      >
         Clicked {count} times
       </button>
     </div>
diff --git a/src/layouts/CenteredLayout.astro b/src/layouts/CenteredLayout.astro
new file mode 100644
index 0000000..5505b65
--- /dev/null
+++ b/src/layouts/CenteredLayout.astro
@@ -0,0 +1,26 @@
+---
+import '../styles/global.css';
+
+interface Props {
+  title?: string;
+}
+
+const { title = "Astro Site" } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body class="min-h-screen bg-white">
+    <main class="flex min-h-screen flex-col items-center justify-center p-4">
+      <div class="w-full max-w-4xl">
+        <slot />
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ce6dc4e..22adfcf 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,11 @@
 ---
 import Counter from '../components/Counter';
+import CenteredLayout from '../layouts/CenteredLayout.astro';
 ---
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
+<CenteredLayout title="Astro">
+	<div class="text-center">
+		<h1 class="text-4xl font-bold mb-6">Astro</h1>
 		<Counter client:load />
-	</body>
-</html>
+	</div>
+</CenteredLayout>