Used page component and button

src/pages/index.astro

@@ -3,29 +3,23 @@ import Layout from '../layouts/Layout.astro'
 import Button from '../builtin-components/Button/Button.tsx'
 import Image from '../builtin-components/Image/Image'
 import Link from '../builtin-components/Link/Link'
-import Counter from '../components/Counter.tsx'
+import Counter from '../components/Counter/Counter.tsx'
+import Page from '../builtin-components/Page/Page'
 ---
 
 <Layout title="FWT">
-  <main class="page">
+  <Page alignment="column">
     <Link to="https://git.patalcala.com/patalcala9/fwt">
       <Image src="fwt.png" size={250} />
     </Link>
 
     <h1>Fast WebApp Template</h1>
     <Counter client:load />
-    <Button label="Next Page" to="/next" />
-  </main>
+    <Button edges="rounded" label="Show Built-in Components" to="/next" />
+  </Page>
 
   <style lang="sass">
-    .page
-      display: flex
-      flex-direction: column
-      flex-wrap: wrap
-      justify-content: center
-      align-items: center
-      align-content: center
-      margin: 2rem
-      height: 90vh
+    h1
+      color: #3377AC
   </style>
 </Layout>

src/pages/next.astro

@@ -2,17 +2,21 @@
 import Layout from '../layouts/Layout.astro'
 import Button from '../builtin-components/Button/Button.tsx'
 import Image from '../builtin-components/Image/Image'
+import Page from '../builtin-components/Page/Page'
 ---
 
 <Layout title="Home">
-  <main class="page">
-    <h1>Second Page</h1>
-    <Button label="Back to Home" to="/" />
+  <Page alignment='column'>
+    <h1>Built-in Components</h1>
+    <Button edges='rounded' label="Back to Home" to="/" />
 
     <section class="image">
       <Image src="sample.png" alt="Example Image" size={400} />
+      <Image src="sample.png" alt="Example Image" size={400} />
+      <Image src="sample.png" alt="Example Image" size={400} />
+      <Image src="sample.png" alt="Example Image" size={400} />
     </section>
-  </main>
+  </Page>
 </Layout>
 
 <style lang="sass">