diff --git a/src/components/home/Focus.jsx b/src/components/home/Focus.jsx
index 0c80e1d..8dc9976 100644
--- a/src/components/home/Focus.jsx
+++ b/src/components/home/Focus.jsx
@@ -2,7 +2,7 @@ import ArrowLink from "../ArrowLink";
 
 const Focus = ({ title, description, link, icon }) => {
   return (
-    <div className="col-span-1 md:col-span-2 relative flex flex-col items-center bg-blue-100 p-2">
+    <div className="col-span-2 md:col-span-1 relative flex flex-col items-center bg-blue-100 p-2">
       <div className="flex justify-center text-3xl text-ewb-green my-2">
         {icon}
       </div>
diff --git a/src/components/home/WhyJoin.jsx b/src/components/home/WhyJoin.jsx
index c10e57c..8415ac2 100644
--- a/src/components/home/WhyJoin.jsx
+++ b/src/components/home/WhyJoin.jsx
@@ -2,6 +2,7 @@ import Title from "../Title";
 import { FOCUS } from "@/data/focus";
 import Focus from "./Focus";
 import Picture from "../Picture";
+import img1 from "../../../public/images/whyJoin.webp";
 const WhyJoin = () => {
   return (
     <div className="py-16 w-11/12 flex flex-col items-center">
@@ -27,7 +28,7 @@ const WhyJoin = () => {
           />
         ))}
       </div>
-      <Picture picture="/images/CostaRica/CostaRica1.gif" />
+      <Picture picture={img1.src} />
     </div>
   );
 };