diff --git a/src/lib/assets/cyanprint-social-card.png b/src/lib/assets/cyanprint-social-card.png
new file mode 100644
index 0000000..ce1b07a
Binary files /dev/null and b/src/lib/assets/cyanprint-social-card.png differ
diff --git a/src/lib/assets/favicon.ico b/src/lib/assets/favicon.ico
new file mode 100644
index 0000000..35f6c04
Binary files /dev/null and b/src/lib/assets/favicon.ico differ
diff --git a/src/lib/components/custom/main-nav/nav.svelte b/src/lib/components/custom/main-nav/nav.svelte
index cab3765..cf8112e 100644
--- a/src/lib/components/custom/main-nav/nav.svelte
+++ b/src/lib/components/custom/main-nav/nav.svelte
@@ -14,7 +14,7 @@
         Registry
     </a>
     <a
-        href="/documentation"
+        href="https://docs.cyanprint.dev"
         class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
     >
         Documentation
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc917c1..00683db 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -39,28 +39,43 @@
 </script>
 <Page notFoundMessage="Main page cannot be found">
     <div class="max-w-[1200px] w-5/6 mx-auto">
-        <div class="relative text-center text-6xl md:text-9xl font-semibold flex flex-col justify-center ">
-            <div class="w-full h-full absolute
+        <div class="relative text-center text-6xl md:text-9xl  flex flex-col justify-center ">
+            <div class="w-full h-full absolute font-semibold
             transition-all duration-500
         bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))]
         bg-opacity-[50%]
         {backg} from-0% via-background via-60% to-background to-90% blur opacity-[20%] dark:opacity-[15%]">
 
             </div>
-            <div class="flex items-center mt-8 md:mt-28 mb-8 w-full">
+            <div class="flex items-center mt-8 md:mt-28 mb-8 w-full font-semibold">
                 <div class="mx-auto relative p-2 md:p-4  dark:bg-gradient-to-br bg-gradient-to-tr {textg} inline-block text-transparent bg-clip-text">
                     Next Generation Templating Engine
                 </div>
             </div>
             <div class="relative space-y-2 space-x-0 md:space-y-0 md:space-x-4 my-8 flex flex-col md:flex-row w-full max-w-[1200px] justify-between text-foreground">
-                <button class="rounded-t-lg md:rounded-lg p-12 cursor-pointer bg-black/5 dark:bg-white/5 backdrop-blur transition hover:scale-[1.02]" on:mouseenter={() => hover="a"} on:mouseleave={() => hover="main"}>
-                    hello
+                <button class="flex flex-col gap-y-4 items-center justify-center rounded-t-lg md:rounded-lg p-12 cursor-pointer bg-black/5 dark:bg-white/5 backdrop-blur transition hover:scale-[1.02]" on:mouseenter={() => hover="a"} on:mouseleave={() => hover="main"}>
+                    <div class="text-6xl">
+                        Templates
+                    </div>
+                    <a href="https://docs.cyanprint.dev" class="text-3xl  font-light p-4">
+                        CREATE
+                    </a>
                 </button>
-                <button class="md:rounded-lg p-12 cursor-pointer bg-black/5 dark:bg-white/5 backdrop-blur transition hover:scale-[1.02]" on:mouseenter={() => hover="b"} on:mouseleave={() => hover="main"}>
-                    hello
+                <button class="flex flex-col gap-y-4 items-center justify-center md:rounded-lg p-12 cursor-pointer bg-black/5 dark:bg-white/5 backdrop-blur transition hover:scale-[1.02]" on:mouseenter={() => hover="b"} on:mouseleave={() => hover="main"}>
+                    <div class="text-6xl">
+                        Processors
+                    </div>
+                    <a href="https://docs.cyanprint.dev" class="text-3xl font-light p-4">
+                        CREATE
+                    </a>
                 </button>
-                <button class="rounded-b-lg md:rounded-lg p-12 cursor-pointer bg-black/5 dark:bg-white/5 backdrop-blur transition rounded-lg hover:scale-[1.02]" on:mouseenter={() => hover="c"} on:mouseleave={() => hover="main"}>
-                    hello
+                <button class="flex flex-col gap-y-4 items-center justify-center  rounded-b-lg md:rounded-lg p-12 cursor-pointer bg-black/5 dark:bg-white/5 backdrop-blur transition rounded-lg hover:scale-[1.02]" on:mouseenter={() => hover="c"} on:mouseleave={() => hover="main"}>
+                    <div class="text-6xl">
+                        Plugins
+                    </div>
+                    <a href="https://docs.cyanprint.dev" class="text-3xl  font-light p-4">
+                        CREATE
+                    </a>
                 </button>
             </div>
         </div>
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..35f6c04
Binary files /dev/null and b/static/favicon.ico differ
diff --git a/static/favicon.png b/static/favicon.png
deleted file mode 100644
index 825b9e6..0000000
Binary files a/static/favicon.png and /dev/null differ