diff --git a/src/assets/img/abacus.webp b/src/assets/img/abacus.webp
index e656659..4f3bc0e 100644
Binary files a/src/assets/img/abacus.webp and b/src/assets/img/abacus.webp differ
diff --git a/src/assets/img/arrow.svg b/src/assets/img/arrow.svg
new file mode 100644
index 0000000..de092ce
--- /dev/null
+++ b/src/assets/img/arrow.svg
@@ -0,0 +1,7 @@
+      <svg id="Arrow.7" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18.256 18.256" style="transition:.3s">
+        <g id="Group_7" data-name="Group 7" transform="translate(5.363 5.325)">
+          <path id="Path_10" data-name="Path 10" d="M14.581,7.05,7.05,14.581" transform="translate(-7.05 -7.012)" fill="none" stroke="var(--container-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+          <path id="Path_11" data-name="Path 11" d="M10,7l5.287.037.038,5.287" transform="translate(-7.756 -7)" fill="none" stroke="var(--container-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+        </g>
+        <path id="Path_12" data-name="Path 12" d="M0,0H18.256V18.256H0Z" fill="none"></path>
+      </svg>
\ No newline at end of file
diff --git a/src/assets/img/books.webp b/src/assets/img/books.webp
index ad03147..b3e4304 100644
Binary files a/src/assets/img/books.webp and b/src/assets/img/books.webp differ
diff --git a/src/assets/img/calendar.webp b/src/assets/img/calendar.webp
index a73bf0d..2111a65 100644
Binary files a/src/assets/img/calendar.webp and b/src/assets/img/calendar.webp differ
diff --git a/src/assets/img/casa-nostra.webp b/src/assets/img/casa-nostra.webp
index fea205b..700525a 100644
Binary files a/src/assets/img/casa-nostra.webp and b/src/assets/img/casa-nostra.webp differ
diff --git a/src/assets/img/music.webp b/src/assets/img/music.webp
index 5c467c6..4efd120 100644
Binary files a/src/assets/img/music.webp and b/src/assets/img/music.webp differ
diff --git a/src/assets/img/pokedex.webp b/src/assets/img/pokedex.webp
index 065ca01..557f109 100644
Binary files a/src/assets/img/pokedex.webp and b/src/assets/img/pokedex.webp differ
diff --git a/src/assets/img/radar.webp b/src/assets/img/radar.webp
index 5d232d2..cc01337 100644
Binary files a/src/assets/img/radar.webp and b/src/assets/img/radar.webp differ
diff --git a/src/assets/img/space-invaders.webp b/src/assets/img/space-invaders.webp
index 9599828..b55a808 100644
Binary files a/src/assets/img/space-invaders.webp and b/src/assets/img/space-invaders.webp differ
diff --git a/src/assets/img/spark-ar.webp b/src/assets/img/spark-ar.webp
index 8b6d39c..3cfbb07 100644
Binary files a/src/assets/img/spark-ar.webp and b/src/assets/img/spark-ar.webp differ
diff --git a/src/assets/img/world.webp b/src/assets/img/world.webp
index 1dc8ab4..350839a 100644
Binary files a/src/assets/img/world.webp and b/src/assets/img/world.webp differ
diff --git a/src/components/PortfolioCard.astro b/src/components/PortfolioCard.astro
index 2d9d8ee..0db0c56 100644
--- a/src/components/PortfolioCard.astro
+++ b/src/components/PortfolioCard.astro
@@ -10,114 +10,104 @@ const { link, bgImage, title, description } = Astro.props;
 ---
 
 <a class="card" href=`${link}`>
-  <div
-    class="card__background"
-    style={{
-      backgroundImage: `url(${bgImage})`,
-    }}
-  >
-  </div>
+  <img class="card__image" src={bgImage} alt={title} />
   <div class="card__content">
-    <h3 class="portafolio__title">
+    <h3 class="card__title">
       {title}
     </h3>
-    <p class="portafolio__description">
+    <p class="card__description">
       {description}
     </p>
   </div>
+  <button>
+    <svg
+      id="Arrow.7"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 18.256 18.256"
+      style="transition:.3s"
+    >
+      <g id="Group_7" data-name="Group 7" transform="translate(5.363 5.325)">
+        <path
+          id="Path_10"
+          data-name="Path 10"
+          d="M14.581,7.05,7.05,14.581"
+          transform="translate(-7.05 -7.012)"
+          fill="none"
+          stroke="var(--container-color)"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"></path>
+        <path
+          id="Path_11"
+          data-name="Path 11"
+          d="M10,7l5.287.037.038,5.287"
+          transform="translate(-7.756 -7)"
+          fill="none"
+          stroke="var(--container-color)"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"></path>
+      </g>
+      <path
+        id="Path_12"
+        data-name="Path 12"
+        d="M0,0H18.256V18.256H0Z"
+        fill="none"></path>
+    </svg>
+  </button>
 </a>
 
 <style>
-  .portafolio__container {
-    overflow: initial;
-  }
-  .portafolio__title {
-    opacity: 0;
-    transition: opacity 500ms ease-in-out;
-    font-size: var(--h3-font-size);
-    margin-bottom: var(--mb-0-5);
-    color: var(--body-color);
-    font-size: var(--h3-font-size);
-    line-height: 1.4;
-  }
-  .portafolio__description {
-    opacity: 0;
-    transition: opacity 500ms ease-in;
-    margin-bottom: var(--mb-0-75);
-    color: var(--body-color);
-    font-size: var(--normal-font-size);
-    margin-bottom: 8px;
-  }
-
   .card {
-    width: 250px;
-    height: 250px;
-    padding: 1rem;
-    cursor: pointer;
-    border-radius: 0.25rem;
-    position: relative;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 0.5rem;
+    padding: 2rem;
+    background-color: var(--container-color);
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    gap: 1rem;
+    transition: all 300ms ease-in-out;
   }
 
-  .card > * + * {
-    margin-top: 1.1em;
-  }
-  /* hover */
-  .card:hover .portafolio__title {
-    opacity: 1;
+  .card:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
 
-  .card:hover .portafolio__description {
-    opacity: 1;
+  .card__image {
+    width: 75px;
+    object-fit: cover;
+    align-self: center;
   }
 
-  .card-grid {
-    display: grid;
-    grid-column-gap: 24px;
-    grid-row-gap: 24px;
-    max-width: 1200px;
-    width: 100%;
-    justify-content: center;
-    justify-items: center;
-  }
-
-  .card {
-    list-style: none;
-    position: relative;
-  }
-
-  .card:before {
-    content: "";
-    display: block;
-    padding-bottom: 150%;
-    width: 100%;
+  .card__title {
+    font-size: var(--h3-font-size);
+    font-weight: var(--font-medium);
   }
 
-  .card__background {
-    background-size: cover;
-    background-position: center;
-    border-radius: 0.25rem;
-    bottom: 0;
-    filter: brightness(0.9) saturate(1) contrast(0.85);
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform-origin: center;
-
-    transition:
-      filter 200ms linear,
-      transform 200ms linear;
+  .card__description {
+    display: inline-block;
+    font-size: var(--small-font-size);
+    text-decoration: none;
+    color: var(--text-color);
   }
 
-  .card:hover .card__background {
-    transform: scale(1.05) translateZ(0);
-    filter: brightness(0.75) saturate(1.2) contrast(0.5);
+  button {
+    all: unset;
+    background-color: var(--first-color);
+    border-radius: 50%;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem;
+    transition: all 300ms ease-in-out;
   }
 
-  .card__content {
-    left: 0;
-    padding: 24px;
-    position: absolute;
-    top: 0;
+  button:hover {
+    background-color: var(--first-color-alt);
+    rotate: 45deg;
   }
 </style>
diff --git a/src/sections/Portfolio.astro b/src/sections/Portfolio.astro
index 5fbc3cb..389d844 100644
--- a/src/sections/Portfolio.astro
+++ b/src/sections/Portfolio.astro
@@ -186,18 +186,12 @@ const t = useTranslations(Astro.currentLocale as Lang);
     grid-row-gap: 24px;
     max-width: 1200px;
     width: 100%;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     justify-content: center;
     justify-items: center;
   }
 
-  @media screen and (max-width: 1024px) {
-    .card-grid {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media screen and (max-width: 568px) {
+  @media screen and (max-width: 768px) {
     .card-grid {
       grid-template-columns: 1fr;
     }