diff --git a/src/components/Cards/CommunityCard.svelte b/src/components/Cards/CommunityCard.svelte
index 4ef6505..e58441c 100644
--- a/src/components/Cards/CommunityCard.svelte
+++ b/src/components/Cards/CommunityCard.svelte
@@ -1,13 +1,13 @@
 <script>
+  import ExternalLinkIcon from "@/components/Icon/ExternalLink.svelte";
   let { text, route } = $props();
 </script>
 
 <div class="p-5 w-full md:w-1/3">
-  <a href="{route}" target="_blank">
-    <div class="border border-cmxyellow p-5 h-[150px] flex justify-between flex-col hover:bg-zinc-100 transition-colors duration-200">
-      <h3 class="text-lg font-bold">{text}</h3>
-      <img src="/flecha-amarilla.png" class="inline h-[20px] w-[20px] 
-      self-end" alt="flecha amarilla">
-    </div>
+  <a href="{route}" target="_blank" class="border border-cmxyellow p-5 h-[150px] flex justify-between flex-col hover:bg-zinc-100 transition-colors duration-200 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxyellow focus:bg-zinc-100">
+    <h3 class="text-lg font-bold">{text}</h3>
+    <span class="inline h-[20px] w-[20px] self-end text-cmxyellow">
+      <ExternalLinkIcon  />
+    </span>
   </a>
 </div>
\ No newline at end of file
diff --git a/src/components/Cards/GetInvolvedCard.svelte b/src/components/Cards/GetInvolvedCard.svelte
index 137fb06..ee71560 100644
--- a/src/components/Cards/GetInvolvedCard.svelte
+++ b/src/components/Cards/GetInvolvedCard.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Button from "../Button.svelte";
+  import LinkLikeButton from "../LinkLikeButton.svelte";
   let {
     image,
     image_alt,
@@ -10,10 +10,8 @@
   } = $props();
 </script>
 
-<div class="flex flex-col justify-start gap-8 p-6">
-  <img src={image} alt={image_alt} class="w-[250px]">
-  <p class="text-xl font-light">{text}</p>
-  <a href={url}>
-    <Button action_label={label} color={color} />
-  </a>
+<div class="p-6">
+  <img src={image} alt={image_alt} class="w-[250px] my-8">
+  <p class="text-xl font-light my-8">{text}</p>
+  <LinkLikeButton go_to={url} action_label={label} color={color} external={true}/>
 </div>
\ No newline at end of file
diff --git a/src/components/LinkLikeButton.svelte b/src/components/LinkLikeButton.svelte
index 628694c..5f072ee 100644
--- a/src/components/LinkLikeButton.svelte
+++ b/src/components/LinkLikeButton.svelte
@@ -1,8 +1,9 @@
 <script>
+	import ExternalLinkIcon from "@/components/Icon/ExternalLink.svelte";
 	import { fontColorContrast } from '$lib/fontColorContrast.js';
 
-	/** @type {{ go_to: string, action_label: string, color?: string }} */
-	let { go_to = '', action_label, color = "#00D690" } = $props();
+	/** @type {{ go_to: string, action_label: string, color?: string, external?: boolean }} */
+	let { go_to = '', action_label, color = "#00D690", external = false } = $props();
 
 	const labelColor = $derived(fontColorContrast(color));
 
@@ -75,4 +76,9 @@
 	}}
 >
 	{action_label}
+	{#if external}
+		<span class="inline self-center ml-2">
+			<ExternalLinkIcon />
+		</span>
+	{/if}
 </a>
diff --git a/src/routes/comunidad/+page.svelte b/src/routes/comunidad/+page.svelte
index 57a96d9..7374ef2 100644
--- a/src/routes/comunidad/+page.svelte
+++ b/src/routes/comunidad/+page.svelte
@@ -28,7 +28,7 @@
 
 <section class="container mx-auto">
   <div class="mx-auto md:w-1/2 p-3 my-8">
-    <h1 class="text-5xl font-bold my-10 text-center">Comienza a participar</h1>
+    <h2 class="text-5xl font-bold my-10 text-center">Comienza a participar</h2>
     <p class="text-center md:text-left text-lg">¿Quieres participar pero no sabes por dónde comenzar? Este es un espacio abierto y tenemos un lugar para todas las personas. Empieza por aquí:</p>
   </div>
   <div class="my-10 flex flex-column md:flex-row flex-wrap">