diff --git a/components/header/Buttons/ToggleDarkMode.tsx b/components/header/Buttons/ToggleDarkMode.tsx
index 03f55d8..473c39c 100644
--- a/components/header/Buttons/ToggleDarkMode.tsx
+++ b/components/header/Buttons/ToggleDarkMode.tsx
@@ -2,16 +2,16 @@ import Icon from "$store/components/ui/Icon.tsx";
 
 export default function ToggleDarkMode() {
   return (
-    <label class="swap swap-rotate bg-[#F5BF62] dark:bg-[#FF8352] border p-2 rounded-full">
+    <label class="swap swap-rotate text-black font-light bg-primary dark:bg-secondary border-none rounded-full w-9 h-9 md:w-11 md:h-11 lg:w-14 lg:h-14">
       <input type="checkbox" data-toggle-darkmode />
       <Icon
         id="Sun"
-        class="swap-off fill-current w-5 h-5 lg:w-8 lg:h-8"
+        class="swap-off fill-current w-5 h-5 md:w-6 md:h-6 lg:w-8 lg:h-8"
         strokeWidth={0.01}
       />
       <Icon
         id="Moon"
-        class="swap-on fill-current w-5 h-5 lg:w-8 lg:h-8"
+        class="swap-on fill-current w-5 h-5 md:w-6 md:h-6 lg:w-8 lg:h-8"
         strokeWidth={0.01}
       />
     </label>
diff --git a/components/header/Header.tsx b/components/header/Header.tsx
index 1a57303..bb0ba0f 100644
--- a/components/header/Header.tsx
+++ b/components/header/Header.tsx
@@ -38,7 +38,7 @@ function Header({
       <header
         style={{ height: headerHeight }}
       >
-        <div class="fixed w-full z-50 bg-black dark:bg-[#FFF8E6]">
+        <div class="fixed w-full z-50 bg-black  dark:bg-[#FFF8E6]">
           {alerts && alerts.length > 0 && <Alert alerts={alerts} />}
           <Navbar
             logo={logo}
diff --git a/components/header/Navbar.tsx b/components/header/Navbar.tsx
index fa7f69f..2df4e8f 100644
--- a/components/header/Navbar.tsx
+++ b/components/header/Navbar.tsx
@@ -1,5 +1,4 @@
 import Icon from "$store/components/ui/Icon.tsx";
-import { MenuButton } from "$store/islands/Header/Buttons.tsx";
 import { navbarHeight } from "./constants.ts";
 import Image from "apps/website/components/Image.tsx";
 import { Logo, WorkshopButton } from "$store/components/header/Header.tsx";
@@ -13,25 +12,24 @@ function Navbar({ logo, slogan, workshopButton }: {
   return (
     <>
       {/* Mobile Version */}
-      <div class="lg:hidden flex flex-col items-start w-full px-6 pb-6">
+      <div class="min-[1386px]:hidden flex flex-col items-start w-full p-6 border-none">
         <div class="flex flex-row w-full items-center justify-between">
           <a
-            class="flex flex-col justify-center items-start gap-2"
+            class="flex flex-col justify-center items-start"
             href="/"
-            style={{ minHeight: navbarHeight }}
             aria-label="Store logo"
           >
             {logo && (
               <>
                 <Image
-                  class="inline dark:hidden"
+                  class="inline dark:hidden w-[3.938rem] h-[1.073rem]"
                   src={logo.srcDark || ""}
                   alt={logo.alt || ""}
                   width={logo.width || 100}
                   height={logo.height || 13}
                 />
                 <Image
-                  class="hidden dark:inline"
+                  class="hidden dark:inline w-[3.938rem] h-[1.073rem]"
                   src={logo.srcLight || ""}
                   alt={logo.alt || ""}
                   width={logo.width || 100}
@@ -40,21 +38,19 @@ function Navbar({ logo, slogan, workshopButton }: {
               </>
             )}
           </a>
-          <div class="">
-            <ToggleDarkMode />
-          </div>
+          <ToggleDarkMode />
         </div>
-        <h3 class="text-xs font-extrabold text-white dark:text-black">
+        <h3 class="max-[1386px]:mt-2 text-[0.813rem]  leading-[0.975rem]  font-black text-white dark:text-black">
           {slogan != undefined ? slogan : "COMUNICAÇÃO DE ALTO DESEMPENHO"}
         </h3>
       </div>
 
       {/* Desktop Version */}
-      <div class="hidden lg:grid lg:grid-cols-3 items-center border-b border-base-200 w-full px-6">
+      <div class="hidden min-[1386px]:grid min-[1386px]:grid-cols-3 items-center border-none w-full py-6 px-16">
         <ul
           class={"flex gap-6 col-span-1 justify-center"}
         >
-          <h3 class="text-sm font-extrabold text-white dark:text-black py-6">
+          <h3 class="text-[1rem] leading-6 font-black text-white dark:text-black py-6">
             {slogan != undefined ? slogan : "COMUNICAÇÃO DE ALTO DESEMPENHO"}
           </h3>
         </ul>
@@ -67,14 +63,14 @@ function Navbar({ logo, slogan, workshopButton }: {
             {logo && (
               <>
                 <Image
-                  class="inline dark:hidden"
+                  class="inline dark:hidden w-[3.938rem] h-[1.573rem]"
                   src={logo.srcDark || ""}
                   alt={logo.alt || ""}
                   width={logo.width || 100}
                   height={logo.height || 13}
                 />
                 <Image
-                  class="hidden dark:inline"
+                  class="hidden dark:inline w-[3.938rem] h-[1.573rem]"
                   src={logo.srcLight || ""}
                   alt={logo.alt || ""}
                   width={logo.width || 100}
@@ -84,13 +80,13 @@ function Navbar({ logo, slogan, workshopButton }: {
             )}
           </a>
         </div>
-        <div class="flex-none flex items-center justify-end gap-6 col-span-1">
+        <div class="flex items-center justify-end gap-6 col-span-1">
           <a
-            class="btn h-8 rounded-full text-sm bg-[#F5BF62] dark:bg-[#FF8352]"
+            class="btn h-9 lg:h-14 rounded-full border-none font-light text-black text-[1rem] gap-2 bg-primary dark:bg-secondary"
             href={workshopButton?.url ?? "https://www.miraeducacao.com.br/"}
           >
             {workshopButton?.text ?? "PARTICIPE DO PRÓXIMO WORKSHOP"}
-            <Icon id="ExternalLink" size={20} strokeWidth={0.01} />
+            <Icon id="ExternalLink" class="mb-1" size={20} strokeWidth={0.01} />
           </a>
           <ToggleDarkMode />
         </div>
diff --git a/sections/Content/Features.tsx b/sections/Content/Features.tsx
index 179a613..5657a1b 100644
--- a/sections/Content/Features.tsx
+++ b/sections/Content/Features.tsx
@@ -1,76 +1,98 @@
-import Icon, { AvailableIcons } from "$store/components/ui/Icon.tsx";
+import { ImageWidget } from "apps/admin/widgets.ts";
+import SlideBanner, {
+  Props as SlideBannerProps,
+} from "deco-sites/mira-site/sections/Miscellaneous/Slide.tsx";
+import Image from "apps/website/components/Image.tsx";
 
-/**
- * @titleBy title
- */
-export interface Card {
-  icon?: AvailableIcons;
-  /**
-   * @format html
-   */
-  title: string;
-  text: string;
+export interface WidgetData {
+  srcDark?: ImageWidget;
+  srcLight?: ImageWidget;
+  alt?: string;
+  width?: number;
+  height?: number;
 }
 
 export interface Props {
+  /** @format html */
   title?: string;
-  cards: Card[];
+
+  widget1?: WidgetData;
+  widget2?: WidgetData;
+
+  /** @format html */
+  description1?: string;
+
+  /** @format html */
+  description2?: string;
+
+  slideBanner?: SlideBannerProps;
 }
 
-function FeatureCard({ icon, title, text }: Card) {
+export default function Features(
+  {
+    title = "Title",
+    widget1,
+    widget2,
+    description1,
+    description2,
+    slideBanner,
+  }: Props,
+) {
   return (
-    <div class="feature-card group group-hover:-translate-y-3">
-      {icon && (
-        <div class="p-6 rounded-full bg-white text-[#1A1A1A]">
-          <Icon id={icon} size={48} />
-        </div>
-      )}
-      <div class="space-y-4 text-center">
-        {title && (
+    <section class="max-w-screen py-10 lg:py-40 bg-black dark:bg-[#FFF8E6] text-white dark:text-black ">
+      <div class="px-6 lg:px-16 ">
+        <div class="grid lg:grid-cols-3 pb-6 lg:pb-20">
           <div
-            class="text-2xl font-semibold leading-[110%]"
+            class="lg:col-span-2 font-black text-2xl leading-[1.65rem] lg:text-[2.5rem] lg:leading-[3.5rem] text-white dark:text-black"
             dangerouslySetInnerHTML={{ __html: title }}
           />
-        )}
-        <p class="leading-[120%]" dangerouslySetInnerHTML={{ __html: text }} />
-      </div>
-    </div>
-  );
-}
+          <div class="flex items-center max-[1024px]:mt-6">
+            <Image
+              class="inline dark:hidden mr-1 lg:mr-8 w-[3.125rem] h-[3.125rem] md:w-[6.25rem] md:h-[6.25rem]"
+              src={widget1?.srcDark || ""}
+              alt={widget1?.alt || ""}
+              width={widget1?.width || 40}
+              height={widget1?.height || 20}
+            />
+            <Image
+              class="hidden dark:inline mr-1 lg:mr-8 w-[3.125rem] h-[3.125rem] md:w-[6.25rem] md:h-[6.25rem]"
+              src={widget1?.srcLight || ""}
+              alt={widget1?.alt || ""}
+              width={widget1?.width || 40}
+              height={widget1?.height || 20}
+            />
 
-const DEFAULT_CARDS = [
-  {
-    "icon": "Discount" as AvailableIcons,
-    "text": ":)",
-    "title": "<p>Visit our coupon page!</p>",
-  },
-  {
-    "icon": "Discount" as AvailableIcons,
-    "text": ":)",
-    "title": "<p>Visit our coupon page!</p>",
-  },
-  {
-    "icon": "Discount" as AvailableIcons,
-    "text": ":)",
-    "title": "<p>Visit our coupon page!</p>",
-  },
-];
+            <Image
+              class="inline dark:hidden w-[3.889rem] h-[2.604rem] md:w-[7.779rem] md:h-[5.208rem]"
+              src={widget2?.srcDark || ""}
+              alt={widget2?.alt || ""}
+              width={widget2?.width || 40}
+              height={widget2?.height || 20}
+            />
+            <Image
+              class="hidden dark:inline w-[3.889rem] h-[2.604rem] md:w-[7.779rem] md:h-[5.208rem]"
+              src={widget2?.srcLight || ""}
+              alt={widget2?.alt || ""}
+              width={widget2?.width || 40}
+              height={widget2?.height || 20}
+            />
+          </div>
+        </div>
+        <div class="font-normal lg:flex lg:flex-row lg:gap-8">
+          <div
+            class="text-white font-merriweather dark:text-black text-base lg:text-2xl lg:leading-9"
+            dangerouslySetInnerHTML={{ __html: description1 || "" }}
+          />
 
-export default function Features(
-  { title = "Feature", cards = DEFAULT_CARDS }: Props,
-) {
-  return (
-    <section class="relative bg-white text-black py-20 max-w-screen">
-      <div class="mx-6 lg:container lg:mx-auto flex justify-center items-center flex-col gap-20">
-        {title && (
-          <h2 class="font-medium text-[36px] lg:text-[72px] leading-[100%] text-center max-w-4xl z-10">
-            {title}
-          </h2>
-        )}
-        <div class="features">
-          {cards?.map((card) => <FeatureCard {...card} />)}
+          <div
+            class="text-white font-merriweather dark:text-black text-base lg:text-2xl lg:leading-9"
+            dangerouslySetInnerHTML={{ __html: description2 || "" }}
+          />
         </div>
       </div>
+      <div class="pt-10 lg:pt-20">
+        <SlideBanner {...slideBanner} />
+      </div>
     </section>
   );
 }
diff --git a/sections/Miscellaneous/Slide.tsx b/sections/Miscellaneous/Slide.tsx
index 789e933..da667b0 100644
--- a/sections/Miscellaneous/Slide.tsx
+++ b/sections/Miscellaneous/Slide.tsx
@@ -1,49 +1,71 @@
-import Icon, { AvailableIcons } from "$store/components/ui/Icon.tsx";
+import { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
 
 export interface SlideProps {
-  label?: string;
   repeat?: number;
-  icon?: AvailableIcons;
+  srcDark?: ImageWidget;
+  srcLight?: ImageWidget;
+  alt?: string;
+  width?: number;
+  height?: number;
 }
 
 export interface Props {
   content?: SlideProps[];
 }
 
-export default function Slide({
-  content = [
-    {
-      label: "Label",
-      repeat: 30,
-      icon: "ChevronRight",
+export default function Slide({ content }: Props) {
+  const slideContentDark = content?.map(
+    ({ srcDark, width, height, alt, repeat = 1 }) => {
+      return (
+        <div class="flex justify-center items-center gap-x-10 mx-4 text-base-content">
+          {Array(repeat).fill(0).map(() => (
+            <>
+              <div class="flex justify-center items-center gap-1 min-w-[142.86px] lg:min-w-[200px] min-h-[40px] lg:min-h-[58px] overflow-hidden">
+                <Image
+                  class="w-[96px] lg:w-[134px] h-auto block"
+                  src={srcDark || ""}
+                  alt={alt || ""}
+                  width={width || 40}
+                  height={height || 20}
+                />
+              </div>
+            </>
+          ))}
+        </div>
+      );
     },
-  ],
-}: Props) {
-  const slideContent = content?.map(({ label, icon, repeat = 1 }) => {
-    return (
-      <div class="flex items-center gap-x-10 mx-4">
-        {Array(repeat).fill(0).map(() => (
-          <>
-            <span class="text-sm font-extralight text-base-content whitespace-nowrap">
-              {label}
-            </span>
-            {icon && (
-              <Icon
-                id={icon}
-                name={icon}
-                width={24}
-                height={24}
-              />
-            )}
-          </>
-        ))}
-      </div>
-    );
-  });
+  );
+
+  const slideContentLight = content?.map(
+    ({ srcLight, width, height, alt, repeat = 1 }) => {
+      return (
+        <div class="flex justify-center items-center gap-x-10 mx-4 text-base-content">
+          {Array(repeat).fill(0).map(() => (
+            <>
+              <div class="flex justify-center items-center gap-1 min-w-[142.86px] lg:min-w-[200px] min-h-[40px] lg:min-h-[58px] overflow-hidden">
+                <Image
+                  class="w-[96px] lg:w-[134px] h-auto block"
+                  src={srcLight || ""}
+                  alt={alt || ""}
+                  width={width || 40}
+                  height={height || 20}
+                />
+              </div>
+            </>
+          ))}
+        </div>
+      );
+    },
+  );
+
   return (
-    <div class="bg-secondary relative w-full overflow-hidden h-11">
-      <div class="animate-sliding absolute top-0 left-0 flex flex-nowrap h-11">
-        {slideContent}
+    <div class="relative w-full overflow-hidden h-11">
+      <div class="animate-[sliding_60s_linear_infinite] absolute top-0 left-0 flex dark:hidden flex-nowrap h-11">
+        {Array(30).fill(0).map(() => slideContentDark)}
+      </div>
+      <div class="animate-[sliding_60s_linear_infinite] absolute top-0 left-0 hidden dark:flex flex-nowrap h-11">
+        {Array(30).fill(0).map(() => slideContentLight)}
       </div>
     </div>
   );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c8c70b3..79f55f1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,6 +17,9 @@ export default {
           "100%": { transform: "translateX(-50%)" },
         },
       },
+      fontFamily: {
+        merriweather: ["Merriweather", "serif"],
+      },
     },
   },
 };
diff --git a/tailwind.css b/tailwind.css
index edd3232..c6c93e0 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -1,7 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
+
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 @layer base {
 
   /* Allow changing font family via CMS */