diff --git a/package-lock.json b/package-lock.json
index 4a8529a..d8674df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "react-icons": "^5.0.1",
         "react-image-gallery": "^1.3.0",
         "react-star-ratings": "^2.3.0",
+        "react-svg": "^16.1.33",
         "tailwind-merge": "^2.2.1",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -452,6 +453,16 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanem/svg-injector": {
+      "version": "10.1.68",
+      "resolved": "https://registry.npmjs.org/@tanem/svg-injector/-/svg-injector-10.1.68.tgz",
+      "integrity": "sha512-UkJajeR44u73ujtr5GVSbIlELDWD/mzjqWe54YMK61ljKxFcJoPd9RBSaO7xj02ISCWUqJW99GjrS+sVF0UnrA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "content-type": "^1.0.5",
+        "tslib": "^2.6.2"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1229,6 +1240,14 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -3778,6 +3797,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-svg": {
+      "version": "16.1.33",
+      "resolved": "https://registry.npmjs.org/react-svg/-/react-svg-16.1.33.tgz",
+      "integrity": "sha512-XpKC3G1yZ+ay+lBy1KtJWKGEZGMI+291jEfHdyFfm6X3vMVg/mly2+JjPPCr4ihPElxaZI2z32n2RVV7+PFKVw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@tanem/svg-injector": "^10.1.68",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 919575b..62b4312 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react-icons": "^5.0.1",
     "react-image-gallery": "^1.3.0",
     "react-star-ratings": "^2.3.0",
+    "react-svg": "^16.1.33",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/public/icons/blogLogo.svg b/public/icons/blogLogo.svg
index 70510c7..ae53a6f 100644
--- a/public/icons/blogLogo.svg
+++ b/public/icons/blogLogo.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <!-- Creator: CorelDRAW -->
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="700px" height="400px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+<svg fill="white" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="700px" height="400px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
 viewBox="0 0 700 400"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
diff --git a/src/app/globals.css b/src/app/globals.css
index 4fee3a1..1af5cd1 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -69,7 +69,13 @@ html,
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
-
+  .fil0 {
+    height: 100%;
+    width: 100%;
+  }
+  svg:hover .fil0 {
+    fill: red;
+  }
   * {
     @apply border-border;
   }
diff --git a/src/components/Blog/index.tsx b/src/components/Blog/index.tsx
index 5ba8bc2..95413ed 100644
--- a/src/components/Blog/index.tsx
+++ b/src/components/Blog/index.tsx
@@ -1,19 +1,23 @@
+"use client";
+import { ReactSVG } from "react-svg";
 import Link from "next/link";
-import Image from "next/image";
 import { FC } from "react";
 
 const Blog: FC = () => {
   return (
-    <section className='w-full bg-black'>
-    <Link className="bg-cover bg-center bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto px-4 ms:px-0" href={'https://actualizatucarro.blogspot.com'} target='_blank'>
-      <Image
-        src={'/images/blog.webp'}
-        alt="Título del Blog"
-        width={668}
-        height={363}
-        loading="lazy"
-      />
-    </Link>
+    <section className="w-full bg-black">
+      <Link
+        className="bg-cover bg-center bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto px-4 ms:px-0"
+        href={"https://actualizatucarro.blogspot.com"}
+        target="_blank"
+      >
+        <ReactSVG
+          src="/icons/blogLogo.svg"
+          beforeInjection={(svg) => {
+            svg.classList.add("fil0");
+          }}
+        />
+      </Link>
     </section>
   );
 };