diff --git a/src/pages/404.astro b/src/pages/404.astro
index 43e2e76..0f42a60 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,29 +1,13 @@
 ---
-import Layout from "~/layouts/Empty.astro";
+import Layout from "~/layouts/BaseLayout.astro";
+import { SITE } from "~/config.mjs";
+import Error404 from "~/components/widgets/Error404.astro";
+
+const title = `Error 404 — ${SITE.name}`;
 ---
 
-<Layout title="Error 404 — AstroWind">
+<Layout meta={{ title }}>
   <main>
-    <section class="flex items-center h-full p-16">
-      <div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
-        <div class="max-w-md text-center">
-          <h2
-            class="mb-8 font-extrabold text-9xl bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
-          >
-            <span class="sr-only">Error</span>404
-          </h2>
-          <p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
-          <p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
-            But dont worry, you can find plenty of other things on our homepage.
-          </p>
-          <a
-            rel="noopener noreferrer"
-            href="./"
-            class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
-            >Back to homepage
-          </a>
-        </div>
-      </div>
-    </section>
+    <Error404 />
   </main>
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index abb503a..cc0dd92 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,30 +1,34 @@
 ---
-import Layout from "~/layouts/Default.astro";
+import Layout from "~/layouts/PageLayout.astro";
 
-import BasicCTA from "~/components/astro/ctas/BasicCTA.astro";
-import BasicFeatures from "~/components/astro/features/BasicFeatures.astro";
-import StepsFeatures from "~/components/astro/features/StepsFeatures.astro";
-import HeroWithImage from "~/components/astro/hero/HeroWithImage.astro";
-import BasicFAQs from "~/components/astro/faqs/BasicFAQs.astro";
-import TwoColsFeatures from "~/components/astro/features/TwoColsFeatures.astro";
-import StepsLeft from "~/components/astro/features/StepsLeft.astro";
-import BasicStats from "~/components/astro/stats/BasicStats.astro";
-import BlogFeaturesFourCols from "~/components/astro/blog/BlogFeaturesFourCols.astro";
+import { SITE } from "~/config.mjs";
+
+import Hero from "~/components/widgets/Hero.astro";
+import BasicCTA from "~/components/widgets/BasicCTA.astro";
+import BasicFeatures from "~/components/widgets/BasicFeatures.astro";
+import StepsFeatures from "~/components/widgets/StepsFeatures.astro";
+import BasicFAQs from "~/components/widgets/BasicFAQs.astro";
+import TwoColsFeatures from "~/components/widgets/TwoColsFeatures.astro";
+import StepsLeft from "~/components/widgets/StepsLeft.astro";
+import BlogFeaturesPosts from "~/components/widgets/BlogFeaturesPosts.astro";
+import Stats from "~/components/widgets/Stats.astro";
+
+const title = `${SITE.name} — Your website with Astro + Tailwind CSS`;
+const description =
+  "A ready to start template to make your website using Astro and Tailwind CSS.";
+const canonical = new URL("", Astro.site);
 ---
 
-<Layout
-  title="AstroWind — Your website with Astro + Tailwind CSS"
-  description="A ready to start template to make your website using Astro and Tailwind CSS."
->
+<Layout meta={{ title, description, canonical }}>
   <main class="mt-20">
-    <HeroWithImage />
+    <Hero />
     <BasicFeatures />
     <StepsLeft />
     <TwoColsFeatures />
     <StepsFeatures />
-    <BlogFeaturesFourCols />
+    <BlogFeaturesPosts />
     <BasicFAQs />
-    <BasicStats />
+    <Stats />
     <BasicCTA />
   </main>
 </Layout>