diff --git a/package-lock.json b/package-lock.json
index 70bdc27..fd8964d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@wordpress/url": "^4.26.0",
         "aos": "^2.3.4",
         "astro": "^5.11.0",
+        "astro-social-share": "^2.2.0",
         "tailwindcss": "^4.1.11",
         "toml": "^3.0.0"
       },
@@ -2134,6 +2135,12 @@
         "sharp": "^0.33.3"
       }
     },
+    "node_modules/astro-social-share": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/astro-social-share/-/astro-social-share-2.2.0.tgz",
+      "integrity": "sha512-Z5ebhO6Yw4GLggw7wsTahdpS0f4pf/XuVjQlBpWZ0zyt0cKaVrlG/+u6RzrzN9B2t27wxp90XiosZNwvBZqA+Q==",
+      "license": "MIT"
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
diff --git a/package.json b/package.json
index dcf6f09..0e8c448 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@wordpress/url": "^4.26.0",
     "aos": "^2.3.4",
     "astro": "^5.11.0",
+    "astro-social-share": "^2.2.0",
     "tailwindcss": "^4.1.11",
     "toml": "^3.0.0"
   },
diff --git a/src/components/Blog/BlogCard.astro b/src/components/Blog/BlogCard.astro
index 2b596ca..0ef44ed 100644
--- a/src/components/Blog/BlogCard.astro
+++ b/src/components/Blog/BlogCard.astro
@@ -61,8 +61,9 @@ const date = new Date(dateGmt).toLocaleDateString("en-US", {
           img && (
             <img
               class="object-cover object-center w-full h-50 md:h-96"
-              src={img.node.link}
+              src={img.node.sourceUrl}
               alt={img.node.altText}
+              srcset={img.node.srcSet}
             />
           )
         }
diff --git a/src/components/SocialMeta.astro b/src/components/SocialMeta.astro
index 2db0d8a..5cf58b1 100644
--- a/src/components/SocialMeta.astro
+++ b/src/components/SocialMeta.astro
@@ -2,8 +2,12 @@
 export type Props = {
   title: string;
   metaDesc: string;
-  filePath: string;
-  pageType: string;
+  opengraphImage: {
+    sourceUrl: string;
+  };
+  schema: {
+    pageType: string;
+  };
 };
 
 const domain = import.meta.env.DOMAIN;
@@ -11,20 +15,24 @@ const domain = import.meta.env.DOMAIN;
 const {
   title = "",
   metaDesc = "",
-  filePath = `${domain}/images/hero.webp`,
-  pageType = "",
+  opengraphImage = {
+    sourceUrl: `${domain}/images/hero.webp`,
+  },
+  schema = {
+    pageType: "",
+  },
 } = Astro.props;
 ---
 
 <meta property="og:title" content={title} />
 <meta property="og:description" content={metaDesc} />
-<meta property="og:image" content={filePath} />
+<meta property="og:image" content={opengraphImage?.sourceUrl} />
 <meta property="og:url" content=`${domain}` />
-<meta property="og:type" content={pageType} />
+<meta property="og:type" content={schema?.pageType} />
 <meta property="og:site_name" content={title} />
 
 <meta name="twitter:card" content="photo" />
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={metaDesc} />
-<meta name="twitter:image" content={filePath} />
+<meta name="twitter:image" content={opengraphImage?.sourceUrl} />
 <meta name="twitter:url" content=`${domain}` />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e2322a4..45a88da 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -18,8 +18,12 @@ export type Props = {
   seo?: {
     title: string;
     metaDesc: string;
-    filePath: string;
-    pageType: string;
+    opengraphImage: {
+      sourceUrl: string;
+    };
+    schema: {
+      pageType: string;
+    };
   };
 };
 
@@ -33,8 +37,12 @@ const {
     title: "Brais Pato's Portfolio",
     metaDesc:
       "I'm Brais Pato, Galician based Senior Backend Developer with 6+ years industry experience.",
-    filePath: `${domain}/images/hero.webp`,
-    pageType: "WebPage",
+    opengraphImage: {
+      sourceUrl: `${domain}/images/hero.webp`,
+    },
+    schema: {
+      pageType: "WebPage",
+    },
   },
 } = Astro.props;
 ---
diff --git a/src/lib/wpResources.ts b/src/lib/wpResources.ts
index 2d17ae2..066cdb2 100644
--- a/src/lib/wpResources.ts
+++ b/src/lib/wpResources.ts
@@ -13,7 +13,8 @@ export enum Page {
                         pageType
                     }
                     opengraphImage {
-                        filePath
+                        srcSet
+                        sourceUrl
                     }
                 }
             }
@@ -34,7 +35,9 @@ export enum Post {
                 featuredImage {
                     node {
                             altText
-                            link
+                            uri
+                            srcSet
+                            sourceUrl
                         }
                 }
                 tags {
@@ -51,7 +54,8 @@ export enum Post {
                         pageType
                     }
                     opengraphImage {
-                        filePath
+                        srcSet
+                        sourceUrl
                     }
                 }
 			}
@@ -77,7 +81,9 @@ export enum Post {
             featuredImage {
                 node {
                         altText
-                        link
+                        uri
+                        srcSet
+                        sourceUrl
                     }
             }
             tags {
@@ -94,7 +100,8 @@ export enum Post {
                     pageType
                 }
                 opengraphImage {
-                    filePath
+                    srcSet
+                    sourceUrl
                 }
             }
         }
diff --git a/src/pages/[pageSlug].astro b/src/pages/[pageSlug].astro
index 9878a7c..d44fd3f 100644
--- a/src/pages/[pageSlug].astro
+++ b/src/pages/[pageSlug].astro
@@ -14,8 +14,12 @@ export type Props = {
   seo: {
     title: string;
     metaDesc: string;
-    filePath: string;
-    pageType: string;
+    opengraphImage: {
+      sourceUrl: string;
+    };
+    schema: {
+      pageType: string;
+    };
   };
 };
 
diff --git a/src/pages/post/[postSlug].astro b/src/pages/post/[postSlug].astro
index 8aa99b7..ae654aa 100644
--- a/src/pages/post/[postSlug].astro
+++ b/src/pages/post/[postSlug].astro
@@ -7,6 +7,13 @@ import PageWrapper from "../../components/PageWrapper.astro";
 import Breadcrumb, {
   type BreadcrumbParams,
 } from "@/components/Breadcrumb/Breadcrumb.astro";
+import {
+  SocialShare,
+  TwitterShareButton,
+  BlueskyShareButton,
+  LinkedInShareButton,
+  WhatsAppShareButton,
+} from "astro-social-share";
 
 const { postSlug: slug } = Astro.params;
 
@@ -56,7 +63,7 @@ const postBc = {
   slug: slug,
 } satisfies BreadcrumbParams;
 
-const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]";
+const sizeBack = img ? "h-[85%] md:h-[35%] xl:h-[60%]" : "h-[360px]";
 ---
 
 <Layout title=`${blogBc.name} - ${postBc.name}` {seo}>
@@ -86,8 +93,9 @@ const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]";
           img && (
             <img
               class="object-cover object-center w-full h-50 md:h-96"
-              src={img.node.link}
+              src={img.node.sourceUrl}
               alt={img.node.altText}
+              srcset={img.node.srcSet}
             />
           )
         }
@@ -97,11 +105,33 @@ const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]";
       </section>
       <div class="container mx-auto py-6 max-w-xl text-theme-black">
         <p>SHARE:</p>
+        <SocialShare
+          buttons={[
+            TwitterShareButton,
+            BlueskyShareButton,
+            LinkedInShareButton,
+            WhatsAppShareButton,
+          ]}
+          description={seo.metaDesc}
+          title={title}
+        />
       </div>
     </article>
   </PageWrapper>
 </Layout>
 
+<script>
+  document.addEventListener("astro:page-load", function () {
+    document.querySelectorAll("pre code").forEach((block) => {
+      const html = block.innerText
+        .replace(/(\/\/.*)/g, '<span class="comment">$1</span>') // JS o C-style
+        .replace(/(#.*)/g, '<span class="comment">$1</span>');
+
+      block.innerHTML = html;
+    });
+  });
+</script>
+
 <style>
   @media (min-width: 640px) {
     :global(.triangle) {
@@ -116,6 +146,11 @@ const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]";
     font-weight: var(--font-weight-bold);
   }
 
+  .wp-page :global(h2.wp-block-heading) {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+
   .wp-page :global(p) {
     margin-block: calc(var(--spacing) * 5);
     color: var(--color-theme-black);
@@ -127,4 +162,39 @@ const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]";
     border-left: 4px solid var(--color-primary-light);
     padding-left: 8px;
   }
+
+  .wp-page :global(pre.wp-block-code) {
+    background-color: #1e1e1e; /* Fondo oscuro estilo VSCode */
+    color: #dcdcdc; /* Color de texto claro */
+    padding: 1em;
+    border-radius: 8px;
+    overflow-x: auto;
+    font-size: 0.95em;
+    line-height: 1.5;
+    margin-bottom: 1.5em;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    border: 1px solid #333;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .wp-page :global(pre.wp-block-code > code) {
+    font-family: "Fira Code", "Courier New", monospace;
+    font-weight: 400;
+    color: inherit;
+  }
+
+  .wp-page :global(pre.wp-block-code > code > .comment) {
+    color: var(--color-primary-light);
+    font-style: italic;
+  }
+
+  /* Si hay <code> suelto en línea (no en <pre>), lo estilizamos diferente */
+  .wp-page :global(pre.wp-block-code > code:not(pre code)) {
+    background-color: #f5f5f5;
+    color: #c7254e;
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-size: 0.9em;
+  }
 </style>