diff --git a/src/Components/UserStreakCard.js b/src/Components/UserStreakCard.js
index 729d2e468dd6c0a18808f4fb54e30efef3d84c3d..f5b1e4a0d69abce92597b35584e0e708e1a48081 100644
--- a/src/Components/UserStreakCard.js
+++ b/src/Components/UserStreakCard.js
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import LocalFireDepartmentIcon from "@mui/icons-material/LocalFireDepartment";
+import InfoIcon from "@mui/icons-material/Info";
 import styled from "styled-components";
 
 function getCurrentDate() {
@@ -11,45 +12,146 @@ function getCurrentDate() {
 }
 
 export default function UserStreakCard(props) {
+  const [isFireHovered, setIsFireHovered] = useState(false); // State to track hover status
+  const [isStreakHovered, setIsStreakHovered] = useState(false); // State to track hover status
+
+  const handleMouseFireEnter = () => {
+    setIsFireHovered(true);
+  };
+
+  const handleMouseFireLeave = () => {
+    setIsFireHovered(false);
+  };
+
+  const handleMouseStreakEnter = () => {
+    setIsStreakHovered(true);
+  };
+
+  const handleMouseStreakLeave = () => {
+    setIsStreakHovered(false);
+  };
+
   const streak = props.streak;
   const lastaction = props.lastaction;
   const currentDate = getCurrentDate();
-  const color = currentDate === lastaction ? "success" : "action";
+  var color = currentDate === lastaction ? "success" : "action";
+
+  if (props.contrast !== "") {
+    color = "secondary";
+  }
 
   return (
-    <div>
+    <Container>
+      <TooltipInfoButton
+        onMouseEnter={handleMouseStreakEnter}
+        onMouseLeave={handleMouseStreakLeave}
+      >
+        <InfoIcon color="action" sx={{ fontSize: "4.5vh", margin: "0 20px" }} />
+        {isStreakHovered && (
+          <TooltipMessage>
+            A streak marca sua assiduidade de uso da plataforma. Para a manter,
+            visualize ou publique um recurso diariamente!
+          </TooltipMessage>
+        )}
+      </TooltipInfoButton>
       <StreakTitle contrast={props.contrast}>Streak</StreakTitle>
-      <LoginStreak>
+      <LoginStreak contrast={props.contrast}>
         {streak > 1
-          ? streak + " dias consecutivos de uso"
-          : streak + " dia consecutivo de uso"}
-        <LocalFireDepartmentIcon color={color} sx={{ fontSize: 50 }} />
+          ? streak + " dias consecutivos de uso "
+          : streak + " dia consecutivo de uso "}
+        <TooltipButton
+          onMouseEnter={handleMouseFireEnter}
+          onMouseLeave={handleMouseFireLeave}
+        >
+          <LocalFireDepartmentIcon
+            color={color}
+            sx={{ fontSize: "6vh", margin: "0 10px" }}
+          />
+          {isFireHovered && color === "success" && (
+            <TooltipMessage>
+              Parabéns! Você já publicou ou visualizou um recurso hoje!
+            </TooltipMessage>
+          )}
+          {isFireHovered && (color === "action" || color === "secondary") && (
+            <TooltipMessage>
+              Você ainda não publicou ou visualizou um recurso hoje.
+            </TooltipMessage>
+          )}
+        </TooltipButton>
       </LoginStreak>
-    </div>
+    </Container>
   );
 }
 
+const Container = styled.div`
+  position: relative;
+  margin: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+`;
+
 const StreakTitle = styled.h1`
   font-weight: 500;
   font-size: 20px;
+  display: flex;
+  align-items: center;
   text-align: center;
   color: ${(props) =>
     props.contrast === "" ? "#646464 !important" : "white !important"};
-  margin-top: 3rem;
   @media screen and (min-width: 500px) {
     font-weight: 500;
     font-size: 40px;
     color: ${(props) =>
       props.contrast === "" ? "#646464 !important" : "white !important"};
-    margin-top: 3rem;
   }
 `;
 
-const LoginStreak = styled.h1`
+const LoginStreak = styled.p`
+  margin: 0;
+  padding: 0;
   font-weight: 400;
-  text-align: center;
+  font-size: 15px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin: 2rem;
+  text-align: center;
+  color: ${(props) =>
+    props.contrast === "" ? "#646464 !important" : "white !important"};
+  @media screen and (min-width: 500px) {
+    font-weight: 400;
+    font-size: 30px;
+    color: ${(props) =>
+      props.contrast === "" ? "#646464 !important" : "white !important"};
+  }
+`;
+
+const TooltipInfoButton = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+
+const TooltipButton = styled.div`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+`;
+
+const TooltipMessage = styled.span`
+  visibility: visible;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-size: 1.2rem;
+  font-weight: 400;
+  text-align: center;
+  border-radius: 4px;
+  padding: 8px;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0.9;
+  width: 250px;
 `;