diff --git a/src/components/molecules/OverviewCard/OverviewCard.stories.tsx b/src/components/molecules/OverviewCard/OverviewCard.stories.tsx
index 74202fa..8a777dc 100644
--- a/src/components/molecules/OverviewCard/OverviewCard.stories.tsx
+++ b/src/components/molecules/OverviewCard/OverviewCard.stories.tsx
@@ -1,6 +1,5 @@
 import { Meta } from "@storybook/react";
 import { OverviewCard } from ".";
-import { CicleIcon } from "../../atoms/CicleIcon";
 import { IoDocumentTextOutline } from "react-icons/io5";
 
 export default {
@@ -10,11 +9,11 @@ export default {
 
 export const Document = () => (
   <div style={{ width: "300px" }}>
-    <OverviewCard>
-      <CicleIcon
-        className="document"
-        icon={<IoDocumentTextOutline size="24" />}
-      />
-    </OverviewCard>
+    <OverviewCard
+      icon={<IoDocumentTextOutline size='24' />}
+      iconType="document"
+      title="New Document"
+      subtitle="Europe Trip"
+    />
   </div>
 );
diff --git a/src/components/molecules/OverviewCard/index.tsx b/src/components/molecules/OverviewCard/index.tsx
index 89cf541..68d2ae8 100644
--- a/src/components/molecules/OverviewCard/index.tsx
+++ b/src/components/molecules/OverviewCard/index.tsx
@@ -15,10 +15,128 @@ const OverviewCardStyle = styled.div`
   }
 `;
 
+const OverviewCardIconStyle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  width: 60px;
+  border-radius: 50%;
+  font-size: 21px;
+  color: #fff;
+
+  &.document {
+    background-color: #e67e22;
+  }
+`;
+
+interface IOverviewCardIcon {
+  icon: React.ReactNode;
+  className: string;
+}
+
+export const OverviewCardIcon = ({ className, icon }: IOverviewCardIcon) => (
+  <OverviewCardIconStyle className={className}>{icon}</OverviewCardIconStyle>
+);
+
+const OverviewCardDescriptionTitleStyle = styled.h3`
+  font-size: 18px;
+  color: #1bbae1;
+  margin: 0;
+  font-weight: "bold";
+
+  &.light {
+    font-weight: 300;
+  }
+`;
+
+interface IOverviewCardDescriptionTitle {
+  className: any;
+  text: string;
+}
+
+const OverviewCardDescriptionTitle = ({
+  className,
+  text,
+}: IOverviewCardDescriptionTitle) => (
+  <OverviewCardDescriptionTitleStyle className={className}>
+    {text}
+  </OverviewCardDescriptionTitleStyle>
+);
+
+const OverviewCardDescriptionSubTitleStyle = styled.p`
+  margin: 2px;
+  color: #777;
+`;
+
+interface IOverviewCardDescriptionSubTitle {
+  text: string;
+}
+
+const OverviewCardDescriptionSubTitle = ({
+  text,
+}: IOverviewCardDescriptionSubTitle) => (
+  <OverviewCardDescriptionSubTitleStyle>
+    {text}
+  </OverviewCardDescriptionSubTitleStyle>
+);
+
+const OverviewCardDescriptionStyle = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+interface IOverviewCardDescription {
+  title: string;
+  subtitle: string;
+}
+
+export const OverviewCardDescription = ({
+  title,
+  subtitle,
+}: IOverviewCardDescription) => (
+  <OverviewCardDescriptionStyle>
+    <OverviewCardDescriptionTitle className="light" text={title} />
+    <OverviewCardDescriptionSubTitle text={subtitle} />
+  </OverviewCardDescriptionStyle>
+);
+
 interface IOverviewCard {
-  children: React.ReactNode;
+  icon: any;
+  iconType: string;
+  title: string;
+  subtitle: string;
 }
 
-export const OverviewCard = ({ children }: IOverviewCard) => (
-  <OverviewCardStyle>{children}</OverviewCardStyle>
+export const OverviewCard = ({
+  icon,
+  iconType,
+  title,
+  subtitle,
+}: IOverviewCard) => (
+  <OverviewCardStyle>
+    <OverviewCardIcon className={iconType} icon={icon} />
+    <OverviewCardDescription title={title} subtitle={subtitle} />
+  </OverviewCardStyle>
 );
+
+/*eslint no-lone-blocks: "off"*/
+{
+  /* 
+  
+  Codigo Original a ser refatorado
+
+<div class="overviewCard">
+  <div class="overviewCard-icon overviewCard-icon--document">
+    <i class="far fa-file-alt"></i>
+  </div>
+  <div class="overviewCard-description">
+    <h3 class="overviewCard-title text-light">
+      New <strong>Document</strong>
+    </h3>
+    <p class="overviewCard-subtitle">Europe Trip</p>
+  </div>
+</div>; 
+*/
+}