diff --git a/custom/react/components/Countdown/assets/box-white.svg b/custom/react/components/Countdown/assets/box-white.svg
new file mode 100644
index 0000000..2470cb3
--- /dev/null
+++ b/custom/react/components/Countdown/assets/box-white.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M23.9953 5.91909C23.9673 5.66095 23.8069 5.43248 23.5671 5.32059L12.3171 0.0705918C12.1161 -0.0232051 11.8838 -0.0232051 11.6828 0.0705918L0.432797 5.32059C0.193078 5.43248 0.0326719 5.6609 0.00459375 5.91909C0.00398437 5.92448 0 5.99629 0 6.00023V18.7502C0 19.0569 0.186703 19.3327 0.471469 19.4466L11.7215 23.9466C11.8109 23.9823 11.9055 24.0002 12 24.0002C12.0945 24.0002 12.1891 23.9824 12.2785 23.9466L23.5285 19.4466C23.8133 19.3327 24 19.0569 24 18.7502V6.00023C24 5.99629 23.9959 5.92444 23.9953 5.91909ZM12 1.57786L21.363 5.94726L17.7577 7.38942L8.21845 3.34261L12 1.57786ZM6.38953 4.19611L15.7808 8.18015L12 9.69244L2.637 5.94726L6.38953 4.19611ZM1.5 7.10798L11.25 11.008V22.1424L1.5 18.2424V7.10798ZM12.75 22.1425V11.008L22.5 7.10798V18.2424L12.75 22.1425Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/custom/react/components/Countdown/assets/brand-makup.png b/custom/react/components/Countdown/assets/brand-makup.png
new file mode 100644
index 0000000..81d7bd3
Binary files /dev/null and b/custom/react/components/Countdown/assets/brand-makup.png differ
diff --git a/custom/react/components/Countdown/indext.tsx b/custom/react/components/Countdown/indext.tsx
index 1da959f..43df068 100644
--- a/custom/react/components/Countdown/indext.tsx
+++ b/custom/react/components/Countdown/indext.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-
+import styles from "./styles.css";
+import clock from "./assets/box-white.svg";
 interface CountdownProps {
     //formato: dd/mm/yyyy//hh:mm
     endDate: string;
@@ -68,7 +69,30 @@ const Countdown = ({ endDate }: CountdownProps) => {
     const minuteString = time.minute.toString().padStart(2, "0");
     const secondString = time.second.toString().padStart(2, "0");
 
-    return <div>{`${hourString}:${minuteString}:${secondString}`}</div>;
+    return (
+        <div className={styles.countdown}>
+            <div className={styles.countdownBadge}>
+                <img
+                    src={clock}
+                    alt="Relógio"
+                    className={styles.countdownBadgeClock}
+                />
+            </div>
+
+            <div className={styles.countdownTitle}>
+                <h1 className={styles.countdownTitleHeading1}>ofertas</h1>
+                <h3 className={styles.countdownTitleHeading3}>
+                    Não perca tempo,
+                </h3>
+                <h2 className={styles.countdownTitleHeading2}>
+                    garanta agora!
+                </h2>
+            </div>
+            <div className={styles.countdownText}>
+                {`${hourString}:${minuteString}:${secondString}`}
+            </div>
+        </div>
+    );
 };
 
 export default Countdown;
diff --git a/custom/react/components/Countdown/styles.css b/custom/react/components/Countdown/styles.css
new file mode 100644
index 0000000..79ff88b
--- /dev/null
+++ b/custom/react/components/Countdown/styles.css
@@ -0,0 +1,67 @@
+.countdown {
+    background-image: url('./assets/brand-makup.png');
+    width: 414px;
+    height: 463px;
+    background-color: #4e1e52;
+    border-radius: 30px;
+    position: relative;
+    background-blend-mode: multiply;
+}
+
+.countdownTitle {
+    color: white;
+    padding-top: 40px;
+    text-align: center;
+}
+
+.countdownTitleHeading1 {
+    margin: 0;
+    font-size: 40px;
+    line-height: 48px;
+    letter-spacing: -0.05em;
+
+}
+.countdownTitleHeading3 {
+    margin: 0;
+    font-size: 18px;
+    line-height: 20px;
+    letter-spacing: -0.05em;
+    font-weight: 300;
+}
+.countdownTitleHeading2 {
+    margin: 0;
+    font-size: 26px;
+    line-height: 20px;
+    letter-spacing: -0.05em;
+}
+
+.countdownText {
+    position: absolute;
+
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    color: white;
+    font-size: 24px;
+    font-weight: 200;
+    letter-spacing: 0.1em;
+
+    width: 170px;
+    height: 170px;
+    border-radius: 50%;
+
+    border: 2px solid #ffffff10;
+
+    display: grid;
+    place-items: center;
+}
+
+.countdownBadge {
+    position: absolute;
+    top: 30px;
+    right: 0;
+    background-color: #47bb77;
+    border-radius: 80px 0 0 80px;
+    padding: 8px 10px 6px 34px;
+}
diff --git a/custom/react/index.d.ts b/custom/react/index.d.ts
new file mode 100644
index 0000000..dd4ab7e
--- /dev/null
+++ b/custom/react/index.d.ts
@@ -0,0 +1 @@
+declare module "*.svg";