diff --git a/astro/src/components/web/Hero.astro b/astro/src/components/web/Hero.astro
new file mode 100644
index 0000000..1aa387c
--- /dev/null
+++ b/astro/src/components/web/Hero.astro
@@ -0,0 +1,33 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+    hero: HeroComponent;
+}
+
+const hero = Astro.props.hero;
+console.log(hero);
+---
+
+<div id={`hero-${hero.id}`} class="flex w-full">
+    <div class="flex w-full h-screen static">
+        <Image
+            src={hero.backgroundImage.url}
+            width={hero.backgroundImage.width}
+            height={hero.backgroundImage.height}
+            class="flex w-full h-screen object-cover z-1"
+            alt=""
+        />
+
+        <div class="absolute flex items-center w-full h-screen bg-[#00000082] z-10">
+            <div class="absolute text-white md:left-40 sm:left-20 p-8 z-30">
+                <div class="flex flex-col gap-2.5 text-left">
+                    <h1 class="text-white font-bold text-8xl w-fit">{hero.title}</h1>
+                    { hero.text !== null && (
+                        <div class="text-2xl max-w-170">{hero.text}</div>
+                    ) }
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/astro/src/components/webpage/Webpage.astro b/astro/src/components/webpage/Webpage.astro
new file mode 100644
index 0000000..983fe42
--- /dev/null
+++ b/astro/src/components/webpage/Webpage.astro
@@ -0,0 +1,19 @@
+---
+import Hero from '../web/Hero.astro';
+
+interface Props {
+    webpage: WebpageComponent[];
+}
+
+const components = Astro.props.webpage;
+
+console.log(Astro.props.webpage);
+---
+
+<div class="flex flex-col">
+    { components.map((component) => (
+        <Fragment>
+            { component.component === "Hero" && <Hero hero={component} /> }
+        </Fragment>
+    )) }
+</div>
diff --git a/astro/src/pages/[...route].astro b/astro/src/pages/[...route].astro
index ba4fa07..9cec203 100644
--- a/astro/src/pages/[...route].astro
+++ b/astro/src/pages/[...route].astro
@@ -3,8 +3,11 @@ import { getAllRoutesList } from "@/lib/routing";
 import { getPage } from "@/lib/pages";
 import { getSettings } from "@/content/settings/settings"
 import WebpageLayout from "@/layouts/WebpageLayout.astro";
+import BlogLayout from "@/layouts/BlogLayout.astro";
+import ProjectLayout from "@/layouts/ProjectLayout.astro";
 import BlogIndex from "@/components/blogs/BlogIndex.astro";
 import ProjectIndex from "@/components/projects/ProjectIndex.astro";
+import Webpage from "@/components/webpage/Webpage.astro";
 
 export async function getStaticPaths() {
     const settings = await getSettings();
@@ -45,12 +48,12 @@ if (page === null || page.page === null) {
             }
     }}}>
         <Fragment slot="content">
-            <div>Webpage</div>
+            <Webpage webpage={page.page.components} />
         </Fragment>
     </WebpageLayout>
 ) }
 
-{ page.pageType === "BlogIndex" && (
+{ page.page.type === "BlogIndex" && (
     <WebpageLayout settings={{
         searchEngine: {
             title: "Blogs",
@@ -65,32 +68,34 @@ if (page === null || page.page === null) {
             }
     }}}>
         <Fragment slot="content">
-            <BlogIndex page={page.page as BlogIndex} />
+            <BlogIndex page={page.page} />
         </Fragment>
     </WebpageLayout>
 ) }
 
-{ page?.pageType === "BlogPost" && (
-    <WebpageLayout settings={{
+{ page.page.type === "BlogPost" && (
+    <BlogLayout settings={{
         searchEngine: {
-            title: "Blogs",
-            description: "",
-            allowCrawlers: true,
-            canonical: null,
-            priority: 65,
+            title: page.page.searchEngine.title,
+            description: page.page.searchEngine.description,
+            allowCrawlers: page.page.searchEngine.allowCrawlers,
+            canonical: page.page.searchEngine.canonical,
+            priority: page.page.searchEngine.priority,
             thumbnail: {
-                url: "",
+                url: page.page.searchEngine.thumbnail.url,
                 width: 1200,
                 height: 630
             }
-    }}}>
+        },
+        tags: []
+    }}>
         <Fragment slot="content">
             <dib>BlogPost</dib>
         </Fragment>
-    </WebpageLayout>
+    </BlogLayout>
 ) }
 
-{ page.pageType === "ProjectIndex" && (
+{ page.page.type === "ProjectIndex" && (
     <WebpageLayout settings={{
         searchEngine: {
             title: "Projects",
@@ -110,8 +115,8 @@ if (page === null || page.page === null) {
     </WebpageLayout>
 ) }
 
-{ page.pageType === "ProjectPost" && (
-    <WebpageLayout settings={{
+{ page.page.type === "ProjectPost" && (
+    <ProjectLayout settings={{
         searchEngine: {
             title: "Projects",
             description: "",
@@ -123,11 +128,13 @@ if (page === null || page.page === null) {
                 width: 1200,
                 height: 630
             }
-    }}}>
+        },
+        tags: []
+    }}>
         <Fragment slot="content">
             <div>ProjectPost</div>
         </Fragment>
-    </WebpageLayout>
+    </ProjectLayout>
 ) }
 
 { page.pageType === "PhotoCategoryIndex" && (