diff --git a/.deco/blocks/Neutral.json b/.deco/blocks/Neutral.json
index 54896ad..24654a3 100644
--- a/.deco/blocks/Neutral.json
+++ b/.deco/blocks/Neutral.json
@@ -19,7 +19,7 @@
     "primary": "#1D2A4C",
     "secondary": "#2C4A99",
     "tertiary": "#3A8DCC",
-    "neutral": "#DFE4F0",
+    "neutral": "#F7F7EF",
     "success": "#008060",
     "warning": "#F18D19",
     "error": "#d82c0d",
@@ -64,6 +64,7 @@
   },
   "mode": "light",
   "complementaryColors": {
-    "base-200": "#848484"
+    "base-200": "#848484",
+    "base-300": "#FEFCFE"
   }
 }
\ No newline at end of file
diff --git a/.deco/blocks/pages-home-5afd25174424.json b/.deco/blocks/pages-home-5afd25174424.json
index 5aa10e3..c3d7b98 100644
--- a/.deco/blocks/pages-home-5afd25174424.json
+++ b/.deco/blocks/pages-home-5afd25174424.json
@@ -4,6 +4,20 @@
   "sections": [
     {
       "__resolveType": "Header"
+    },
+    {
+      "__resolveType": "website/sections/Rendering/Lazy.tsx",
+      "section": {
+        "__resolveType": "site/sections/Hero.tsx",
+        "image": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/a98a8a47-047d-4dab-afc9-aec7e09f9720/HERO-IMAGE.svg",
+        "headline": "Transforme a maneira de cuidar",
+        "title": "Monitoramento de pacientes em tempo real",
+        "description": "Simplifique o acompanhamento de pacientes e a organização de escalas, tudo em tempo real com a nossa IA integrada ao WhatsApp",
+        "cta": {
+          "text": "Veja como funciona",
+          "href": "#"
+        }
+      }
     }
   ],
   "__resolveType": "website/pages/Page.tsx",
diff --git a/sections/Hero.tsx b/sections/Hero.tsx
index 8e8dafe..f1be886 100644
--- a/sections/Hero.tsx
+++ b/sections/Hero.tsx
@@ -3,24 +3,41 @@ import Image from "apps/website/components/Image.tsx";
 
 export interface CTA {
   id?: string;
+  /**
+   * @title Link
+   */
   href: string;
+  /**
+   * @title Texto
+   */
   text: string;
-  outline?: boolean;
 }
 
 export interface Props {
   /**
-   * @format rich-text
-   * @default Click here to tweak this text however you want.
+   * @title Chamada
+   */
+  headline: string;
+  /**
+   * @title Titulo
    */
   title?: string;
   /**
-   * @default This text is fully editable and ready for your personal touch. Just click here, head over to the section window, or dive straight into the code to make changes as you see fit. Whether it's about the content, formatting, font, or anything in between, editing is just a click away.
+   * @title Descrição
    */
   description?: string;
+  /**
+   * @title Imagem
+   */
   image?: ImageWidget;
+  /**
+   * @title Posição da imagem
+   */
   placement?: "left" | "right";
-  cta?: CTA[];
+  /**
+   * @title Botão - (CTA)
+   */
+  cta?: CTA;
 }
 
 const PLACEMENT = {
@@ -29,68 +46,67 @@ const PLACEMENT = {
 };
 
 export default function HeroFlats({
+  headline = "Place here your headline",
   title = "Click here to tweak this text however you want.",
   description = "This text is fully editable and ready for your personal touch. Just click here, head over to the section window, or dive straight into the code to make changes as you see fit. Whether it's about the content, formatting, font, or anything in between, editing is just a click away.",
   image,
-  placement = "left",
-  cta = [
-    { id: "change-me-1", href: "/", text: "Change me", outline: false },
-    { id: "change-me-2", href: "/", text: "Change me", outline: true },
-  ],
+  placement = "right",
+  cta = { id: "change-me-1", href: "/", text: "Change me" },
 }: Props) {
   return (
-    <nav class="lg:container lg:mx-auto mx-4">
+    <div class="lg:container lg:px-0 px-4 flex gap-8 items-center justify-between pt-9 lg:pt-16 pb-10 lg:pb-20 w-full">
       <div class="flex flex-col items-center gap-8">
         <div
-          class={`flex w-full xl:container xl:mx-auto py-20 mx-5 md:mx-10 z-10 ${
+          class={`flex w-full xl:container xl:mx-auto mx-5 md:mx-10 z-10 ${
             image
               ? PLACEMENT[placement]
               : "flex-col items-center justify-center text-center"
-          } lg:py-36 gap-12 md:gap-20 items-center`}
+          } gap-2 lg:gap-5 justify-between items-center`}
         >
-          {image && (
-            <Image
-              width={640}
-              class="w-full lg:w-1/2 object-fit"
-              sizes="(max-width: 640px) 100vw, 30vw"
-              src={image}
-              alt={image}
-              decoding="async"
-              loading="lazy"
-            />
-          )}
           <div
-            class={`mx-6 lg:mx-auto lg:w-full space-y-4 gap-4 ${
+            class={`w-full gap-4 ${
               image
-                ? "lg:w-1/2 lg:max-w-xl"
-                : "flex flex-col items-center justify-center lg:max-w-3xl"
+                ? "lg:max-w-[50%] flex flex-col"
+                : "flex flex-col items-center justify-center lg:max-w-[586px]"
             }`}
           >
-            <div
-              class="inline-block lg:text-[80px] text-4xl leading-none font-medium"
-              dangerouslySetInnerHTML={{
-                __html: title ?? "",
-              }}
-            ></div>
-            <p class="text-lg md:text-md leading-[150%]">{description}</p>
+            <p class="text-warning font-semibold pb-4">{headline}</p>
+            <h1 class="text-[40px] lg:text-[64px] font-bold text-primary pb-5">
+              {title}
+            </h1>
+            <p class="leading-[150%] text-base-200 text-sm lg:text-xl pb-6">
+              {description}
+            </p>
             <div class="flex items-center gap-3">
-              {cta?.map((item) => (
+              {cta && (
                 <a
-                  key={item?.id}
-                  id={item?.id}
-                  href={item?.href}
-                  target={item?.href.includes("http") ? "_blank" : "_self"}
-                  class={`font-normal btn btn-primary ${
-                    item.outline && "btn-outline"
-                  }`}
+                  key={cta?.id}
+                  id={cta?.id}
+                  href={cta?.href}
+                  target={cta?.href.includes("http") ? "_blank" : "_self"}
+                  class={`bg-accent text-base-300 rounded-full font-semibold text-xs lg:text-lg py-3 px-6 lg:py-5 lg:px-12`}
                 >
-                  {item?.text}
+                  {cta?.text}
                 </a>
-              ))}
+              )}
             </div>
           </div>
+          {image && (
+            <div class="w-full lg:max-w-[50%] flex justify-end">
+              <Image
+                width={555}
+                class="w-full object-fit max-w-[555px]"
+                sizes="(max-width: 640px) 100vw, 30vw"
+                src={image}
+                alt={image}
+                decoding="async"
+                loading="lazy"
+                fit="contain"
+              />
+            </div>
+          )}
         </div>
       </div>
-    </nav>
+    </div>
   );
 }
diff --git a/static/tailwind.css b/static/tailwind.css
index 4923ad6..2eb47b4 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -475,6 +475,10 @@ html {
             appearance: textfield;
   }
 
+  html, body {
+    background-color: oklch(var(--n) / 1)
+  }
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -578,35 +582,13 @@ html {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
+  padding-right: 1rem;
+  padding-left: 1rem;
 }
-@media (min-width: 640px) {
-
-  .container {
-    max-width: 640px;
-  }
-}
-@media (min-width: 768px) {
-
-  .container {
-    max-width: 768px;
-  }
-}
-@media (min-width: 1024px) {
-
-  .container {
-    max-width: 1024px;
-  }
-}
-@media (min-width: 1280px) {
-
-  .container {
-    max-width: 1280px;
-  }
-}
-@media (min-width: 1536px) {
+@media (min-width: 1140px) {
 
   .container {
-    max-width: 1536px;
+    max-width: 1140px;
   }
 }
 .alert {
@@ -2755,10 +2737,6 @@ input.tab:checked + .tab-content,
   margin-left: 1.25rem;
   margin-right: 1.25rem;
 }
-.mx-6 {
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -2809,9 +2787,6 @@ input.tab:checked + .tab-content,
 .block {
   display: block;
 }
-.inline-block {
-  display: inline-block;
-}
 .flex {
   display: flex;
 }
@@ -3003,6 +2978,9 @@ input.tab:checked + .tab-content,
 .max-w-\[522px\] {
   max-width: 522px;
 }
+.max-w-\[555px\] {
+  max-width: 555px;
+}
 .max-w-\[600px\] {
   max-width: 600px;
 }
@@ -3302,6 +3280,10 @@ input.tab:checked + .tab-content,
 .bg-\[var\(--bg-color\)\] {
   background-color: var(--bg-color);
 }
+.bg-accent {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity)));
+}
 .bg-base-100 {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
@@ -3374,6 +3356,10 @@ input.tab:checked + .tab-content,
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
 .px-60 {
   padding-left: 15rem;
   padding-right: 15rem;
@@ -3398,10 +3384,6 @@ input.tab:checked + .tab-content,
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-20 {
-  padding-top: 5rem;
-  padding-bottom: 5rem;
-}
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -3418,12 +3400,21 @@ input.tab:checked + .tab-content,
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
 .pb-12 {
   padding-bottom: 3rem;
 }
 .pb-4 {
   padding-bottom: 1rem;
 }
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
 .pb-\[15px\] {
   padding-bottom: 15px;
 }
@@ -3463,6 +3454,9 @@ input.tab:checked + .tab-content,
 .pt-8 {
   padding-top: 2rem;
 }
+.pt-9 {
+  padding-top: 2.25rem;
+}
 .text-left {
   text-align: left;
 }
@@ -3493,6 +3487,9 @@ input.tab:checked + .tab-content,
 .text-\[24px\] {
   font-size: 24px;
 }
+.text-\[40px\] {
+  font-size: 40px;
+}
 .text-\[48px\] {
   font-size: 48px;
 }
@@ -3522,9 +3519,6 @@ input.tab:checked + .tab-content,
 .font-light {
   font-weight: 300;
 }
-.font-medium {
-  font-weight: 500;
-}
 .font-normal {
   font-weight: 400;
 }
@@ -3573,9 +3567,6 @@ input.tab:checked + .tab-content,
 .leading-\[22px\] {
   line-height: 22px;
 }
-.leading-none {
-  line-height: 1;
-}
 .leading-normal {
   line-height: 1.5;
 }
@@ -3603,6 +3594,14 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
 }
+.text-base-200 {
+  --tw-text-opacity: 1;
+  color: var(--fallback-b2,oklch(var(--b2)/var(--tw-text-opacity)));
+}
+.text-base-300 {
+  --tw-text-opacity: 1;
+  color: var(--fallback-b3,oklch(var(--b3)/var(--tw-text-opacity)));
+}
 .text-base-content {
   --tw-text-opacity: 1;
   color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
@@ -3615,6 +3614,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
 }
+.text-warning {
+  --tw-text-opacity: 1;
+  color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -3678,40 +3681,14 @@ input.tab:checked + .tab-content,
     width: 100%;
     margin-right: auto;
     margin-left: auto;
+    padding-right: 1rem;
+    padding-left: 1rem;
   }
 
-  @media (min-width: 640px) {
-
-    .lg\:container {
-      max-width: 640px;
-    }
-  }
-
-  @media (min-width: 768px) {
-
-    .lg\:container {
-      max-width: 768px;
-    }
-  }
-
-  @media (min-width: 1024px) {
+  @media (min-width: 1140px) {
 
     .lg\:container {
-      max-width: 1024px;
-    }
-  }
-
-  @media (min-width: 1280px) {
-
-    .lg\:container {
-      max-width: 1280px;
-    }
-  }
-
-  @media (min-width: 1536px) {
-
-    .lg\:container {
-      max-width: 1536px;
+      max-width: 1140px;
     }
   }
 }
@@ -3721,40 +3698,14 @@ input.tab:checked + .tab-content,
     width: 100%;
     margin-right: auto;
     margin-left: auto;
+    padding-right: 1rem;
+    padding-left: 1rem;
   }
 
-  @media (min-width: 640px) {
-
-    .xl\:container {
-      max-width: 640px;
-    }
-  }
-
-  @media (min-width: 768px) {
-
-    .xl\:container {
-      max-width: 768px;
-    }
-  }
-
-  @media (min-width: 1024px) {
-
-    .xl\:container {
-      max-width: 1024px;
-    }
-  }
-
-  @media (min-width: 1280px) {
-
-    .xl\:container {
-      max-width: 1280px;
-    }
-  }
-
-  @media (min-width: 1536px) {
+  @media (min-width: 1140px) {
 
     .xl\:container {
-      max-width: 1536px;
+      max-width: 1140px;
     }
   }
 }
@@ -3925,16 +3876,12 @@ input.tab:checked + .tab-content,
     width: 40%;
   }
 
-  .lg\:w-full {
-    width: 100%;
+  .lg\:max-w-\[50\%\] {
+    max-width: 50%;
   }
 
-  .lg\:max-w-3xl {
-    max-width: 48rem;
-  }
-
-  .lg\:max-w-xl {
-    max-width: 36rem;
+  .lg\:max-w-\[586px\] {
+    max-width: 586px;
   }
 
   .lg\:flex-\[100px\] {
@@ -3965,6 +3912,10 @@ input.tab:checked + .tab-content,
     gap: 5rem;
   }
 
+  .lg\:gap-5 {
+    gap: 1.25rem;
+  }
+
   .lg\:gap-6 {
     gap: 1.5rem;
   }
@@ -3974,6 +3925,11 @@ input.tab:checked + .tab-content,
     padding-right: 0px;
   }
 
+  .lg\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
   .lg\:px-16 {
     padding-left: 4rem;
     padding-right: 4rem;
@@ -3989,25 +3945,43 @@ input.tab:checked + .tab-content,
     padding-bottom: 7rem;
   }
 
-  .lg\:py-36 {
-    padding-top: 9rem;
-    padding-bottom: 9rem;
+  .lg\:py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
   }
 
   .lg\:pb-16 {
     padding-bottom: 4rem;
   }
 
+  .lg\:pb-20 {
+    padding-bottom: 5rem;
+  }
+
   .lg\:pb-28 {
     padding-bottom: 7rem;
   }
 
+  .lg\:pt-16 {
+    padding-top: 4rem;
+  }
+
   .lg\:pt-28 {
     padding-top: 7rem;
   }
 
-  .lg\:text-\[80px\] {
-    font-size: 80px;
+  .lg\:text-\[64px\] {
+    font-size: 64px;
+  }
+
+  .lg\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
   }
 }
 @media (min-width: 1280px) {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ef2ff23..a1dfc4c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,6 +7,13 @@ export default {
   theme: {
     container: { center: true },
     extend: {
+      container: {
+        center: true,
+        padding: "1rem",
+        screens: {
+          "xl": "1140px",
+        },
+      },
       animation: {
         sliding: "sliding 30s linear infinite",
       },
diff --git a/tailwind.css b/tailwind.css
index d8540c4..296e8a0 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -20,6 +20,10 @@
     -moz-appearance: textfield;
     appearance: textfield;
   }
+
+  html, body {
+    background-color: oklch(var(--n) / 1)
+  }
 }
 
 @layer components {