diff --git a/src/App.js b/src/App.js
index e0f680f..2726f78 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from "react";
 import Header from "./components/Header";
 import Link from "./components/Link";
+import Card from "./components/Card"
 import SearchBar from "./components/SearchBar";
 /* import Main from "./components/Main"; */
 
@@ -8,13 +9,20 @@ const App = () => {
   return (
     <>
       <Header className="header" >
+        <Link>Hola</Link>
+        <p>Search</p>
+        <Link/>
         <Link>Inicio</Link>
         <Link>Hoy</Link>
         <Link>Siguiendo</Link>
         <SearchBar/>
-
       </Header>
       {/* <Main /> */}
+      <Card description="Una Foto"
+      title="Intereses, el nuevo widget de pinterest"
+      src="https://i.picsum.photos/id/0/536/354.jpg?hmac=pYva7VotLDyw33JFwZdFMkf5Egtdk2Z6p7Rr8nO6ngs"
+      size="large"
+      />
     </>
   );
 };
diff --git a/src/components/Card.js b/src/components/Card.js
index e5b1bf7..62e3377 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,11 +1,15 @@
+import styles from "./../stylesheets/Card.css"
 
-const Card = () => {
+const Card = ({className, description, title, size, src, ...props}) => {
+  const sizeClassName = size ? "card--large" : "";
   return (
-    <div>
-      Card
+    <div className={`card ${className} ${sizeClassName}`}>
+      <div className='card__gradient'/>
+      <img src={src} className="card__img"/>
+      <p className='card__description'>{description}</p>
+      <h2 className='card__title'>{title}</h2>
     </div>
-
   );
 };
 
-export default Card;
\ No newline at end of file
+export default Card;
diff --git a/src/components/Header.js b/src/components/Header.js
index 1dc3e58..8fc0275 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -9,4 +9,4 @@ const Header = ({className,children}) => {
   );
 };
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/stylesheets/Card.css b/src/stylesheets/Card.css
new file mode 100644
index 0000000..ff4d53d
--- /dev/null
+++ b/src/stylesheets/Card.css
@@ -0,0 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
+
+.card {
+  width: 400px;
+  height: 284px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  border-radius: 24px;
+  box-sizing: border-box;
+  padding: 33px;
+  color: white;
+  z-index: 100;
+  overflow: hidden;
+  font-family: 'Roboto', arial, monospace;
+  gap: 16px;
+  text-align: center;
+  font-style: normal;
+}
+
+.card--large {
+  height: 600px;
+}
+
+.card__description {
+  font-size: 16px;
+}
+
+.card__title {
+  font-size: 28px;
+}
+
+.card__img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -10;
+  top: 0;
+  left: 0;
+}
+
+.card__gradient {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(17, 17, 17, 0.6) 100%);
+}
diff --git a/yarn.lock b/yarn.lock
index 1a3ecd8..8dde23b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9213,6 +9213,11 @@ relateurl@^0.2.7:
   resolved "https://registry.able.co/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remixicon@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
+  integrity sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.able.co/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"